fix(standalone-context): unsub on disconnect (#53)

Author: rax-it

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

@@ -1,3 +1,5 @@
 <template>
-  <x-context-child-detached></x-context-child-detached>
+  <template lwc:if={showChild}>
+    <x-context-child-detached></x-context-child-detached>
+  </template>
 </template>

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

@@ -5,4 +5,11 @@ import parentStateFactory from 'x/parentState';
 export default class ContextParent extends ContextfulLightningElement {
   @api
   parentState = parentStateFactory('parentFoo');
+
+  @api
+  hideChild = false;
+
+  get showChild() {
+    return !this.hideChild;
+  }
 }

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

@@ -83,13 +83,13 @@ describe('context', () => {
     const contextParent = querySelectorDeep('x-context-parent');
 
     // Current active subscriptions
-    // 1. <x-context-parent>
+    // 1. <x-context-child-sibling>
     // 2. <x-context-child>
     // 3. <x-context-grand-child>
     expect(contextParent.parentState.subscribers.size).toBe(3);
 
     // Only active subscription to parent State will be
-    // LWC framework subscribing to component <x-context-parent>
+    // from component: <x-context-child-sibling>
     // subscription of context child and grand child
     // should be removed after unsubscribing
     contextParent.hideChild = true;
@@ -125,4 +125,16 @@ describe('context', () => {
     const childWithDetachedFromContext = querySelectorDeep('.child-content-detached', el);
     expect(childWithDetachedFromContext.innerText).to.include('parentFoo');
   });
+
+  it('standalone context is unsubscribed once the child disconnects', async () => {
+    const el = await clientSideRender(parentEl, componentPath, {});
+    const contextParentDetached = querySelectorDeep('x-context-parent-detached', el);
+
+    expect(contextParentDetached.parentState.subscribers.size).toBe(1);
+
+    contextParentDetached.hideChild = true;
+    await freshRender();
+
+    expect(contextParentDetached.parentState.subscribers.size).toBe(0);
+  });
 });

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

@@ -1,4 +1,4 @@
-import { connectContext } from './shared.js';
+import { connectContext, disconnectContext } from './shared.js';
 import { SignalBaseClass, type Signal } from '@lwc/signals';
 import type { ExposedUpdater } from './types.js';
 import type { ContextRuntimeAdapter } from './runtime-interface.js';
@@ -13,7 +13,6 @@ class ConsumedContextSignal<StateShape extends ValidStateShape>
 {
   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>) {
@@ -44,6 +43,15 @@ class ConsumedContextSignal<StateShape extends ValidStateShape>
       },
     );
   }
+
+  [disconnectContext](_componentId: ContextRuntimeAdapter<object>['component']) {
+    // Unlike the state manager's fromContext which can subscribe to multiple
+    // ancestor contexts simultaneously, this standalone version only subscribes
+    // to a single context at a time. Therefore, we don't need to use componentId
+    // to track subscriptions.
+    this.unsubscribe();
+    this.unsubscribe = () => {};
+  }
 }
 
 export const fromContext = <