feat: implement standalone fromContext

example/src/modules/x/contextChildDetached/contextChildDetached.html

@@ -0,0 +1,4 @@
+<template>
+  <h3>Child</h3>
+  <p class='child-content-detached'>nameProvidedByParent: {nameProvidedByParent}</p>
+</template>

example/src/modules/x/contextChildDetached/contextChildDetached.js

@@ -0,0 +1,12 @@
+import { ContextfulLightningElement } from '@lwc/state/context';
+import { fromContext } from '@lwc/state';
+import childStateFactory from 'x/childState';
+import parentStateFactory from 'x/parentState';
+
+export default class ContextChild extends ContextfulLightningElement {
+  parentState = fromContext(parentStateFactory);
+
+  get nameProvidedByParent() {
+    return this.parentState.value?.name ?? 'not available';
+  }
+}

example/src/modules/x/contextParentDetached/contextParentDetached.html

@@ -0,0 +1,3 @@
+<template>
+  <x-context-child-detached></x-context-child-detached>
+</template>

example/src/modules/x/contextParentDetached/contextParentDetached.js

@@ -0,0 +1,8 @@
+import { api } from 'lwc';
+import { ContextfulLightningElement } from '@lwc/state/context';
+import parentStateFactory from 'x/parentState';
+
+export default class ContextParent extends ContextfulLightningElement {
+  @api
+  parentState = parentStateFactory('parentFoo');
+}

example/src/modules/x/contextRoot/context.spec.js

@@ -96,4 +96,10 @@ describe('context', () => {
 
     expect(contextParent.parentState.subscribers.size).toBe(1);
   });
+
+  it('children can access context directly with detached fromContext', async () => {
+    const el = await clientSideRender(parentEl, componentPath, {});
+    const childWithDetachedFromContext = querySelectorDeep('.child-content-detached', el);
+    expect(childWithDetachedFromContext.innerText).to.include('parentFoo');
+  });
 });

example/src/modules/x/contextRoot/contextRoot.html

@@ -1,4 +1,5 @@
 <template>
 	<x-context-parent></x-context-parent>
 	<x-context-lonely-child></x-context-lonely-child>
+	<x-context-parent-detached></x-context-parent-detached>
 </template>

packages/@lwc/state/src/index.ts

@@ -12,6 +12,7 @@ import type {
   UnwrapSignal,
 } from './types.ts';
 export { setTrustedSignalSet } from '@lwc/signals';
+export { fromContext } from './standalone-context.js';
 
 const atomSetter = Symbol('atomSetter');
 const contextID = Symbol('contextID');

packages/@lwc/state/src/standalone-context.ts

@@ -0,0 +1,56 @@
+import { connectContext } from './shared.js';
+import { SignalBaseClass, type Signal } from '@lwc/signals';
+import type { ExposedUpdater } from './types.js';
+import type { ContextRuntimeAdapter } from './runtime-interface.js';
+import type { ContextManager } from './index.js';
+
+type ValidStateShape = Record<string, Signal<unknown> | ExposedUpdater>;
+type ValidStateDef<StateShape extends ValidStateShape> = () => Signal<StateShape>;
+
+class ConsumedContextSignal<StateShape extends ValidStateShape>
+  extends SignalBaseClass<ValidStateShape>
+  implements ContextManager
+{
+  private desiredStateDef: ValidStateDef<StateShape>;
+  private _value: StateShape | null = null;
+  // Currently unused. Should be called once `disconnectContext` is implemented.
+  private unsubscribe: () => void = () => {};
+
+  constructor(stateDef: ValidStateDef<StateShape>) {
+    super();
+    this.desiredStateDef = stateDef;
+  }
+
+  get value(): StateShape | null {
+    return this._value;
+  }
+
+  [connectContext](runtimeAdapter: ContextRuntimeAdapter<object>) {
+    if (!runtimeAdapter) {
+      throw new Error(
+        'Implementation error: runtimeAdapter must be present at the time of connect.',
+      );
+    }
+
+    runtimeAdapter.consumeContext(
+      this.desiredStateDef,
+      (providedContextSignal: Signal<StateShape>) => {
+        this._value = providedContextSignal.value;
+        this.notify();
+        this.unsubscribe = providedContextSignal.subscribe(() => {
+          this._value = providedContextSignal.value;
+          this.notify();
+        });
+      },
+    );
+  }
+}
+
+export const fromContext = <
+  StateShape extends ValidStateShape,
+  StateDef extends ValidStateDef<StateShape>,
+>(
+  stateDef: StateDef,
+) => {
+  return new ConsumedContextSignal<StateShape>(stateDef);
+};