fix: only provide first context if multiple SM factories of same type (#52)

Author: rax-it

example/src/modules/x/anotherParentState/anotherParentState.js

@@ -0,0 +1,5 @@
+import { defineState } from '@lwc/state';
+
+export default defineState((atom) => (initialName = 'anotherFoo') => ({
+  name: atom(initialName),
+}));

example/src/modules/x/childState/childState.js

@@ -1,9 +1,11 @@
 import { defineState } from '@lwc/state';
 import parentStateFactory from 'x/parentState';
+import anotherParentStateFactory from 'x/anotherParentState';
 
 export default defineState((atom, _computed, update, fromContext) => (initialName = 'bar') => {
   const name = atom(initialName);
   const parentState = fromContext(parentStateFactory);
+  const anotherParentState = fromContext(anotherParentStateFactory);
 
   const updateName = update({ name }, (_, newName) => ({
     name: newName,
@@ -13,5 +15,6 @@ export default defineState((atom, _computed, update, fromContext) => (initialNam
     name,
     updateName,
     parentState,
+    anotherParentState,
   };
 });

example/src/modules/x/contextChild/contextChild.html

@@ -1,5 +1,6 @@
 <template>
   <h3>Child</h3>
   <p class='child-content'>nameProvidedByParent: {nameProvidedByParent}</p>
+  <p class='another-child-content'>AnotherNameProvidedByParent: {anotherNameProvidedByParent}</p>
   <x-context-grand-child></x-context-grand-child>
 </template>

example/src/modules/x/contextChild/contextChild.js

@@ -7,4 +7,8 @@ export default class ContextChild extends ContextfulLightningElement {
   get nameProvidedByParent() {
     return this.childState.value.parentState.value?.name ?? 'not available';
   }
+
+  get anotherNameProvidedByParent() {
+    return this.childState.value.anotherParentState.value?.name ?? 'not available';
+  }
 }

example/src/modules/x/contextParent/contextParent.js

@@ -1,11 +1,17 @@
 import { api } from 'lwc';
 import { ContextfulLightningElement } from '@lwc/state/context';
 import parentStateFactory from 'x/parentState';
+import anotherParentStateFactory from 'x/anotherParentState';
 
 export default class ContextParent extends ContextfulLightningElement {
   @api
   parentState = parentStateFactory('parentFoo');
 
+  @api
+  dupParentState;
+
+  anotherParentState = anotherParentStateFactory();
+
   @api
   hideChild = false;
 

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

@@ -1,4 +1,5 @@
-import { expect, querySelectorDeep, clientSideRender } from '@lwc/test-runner';
+import { expect, querySelectorDeep, clientSideRender, sinon } from '@lwc/test-runner';
+import parentStateFactory from '../parentState/parentState.js';
 
 const componentPath = import.meta.resolve('./contextRoot.js');
 
@@ -97,6 +98,28 @@ describe('context', () => {
     expect(contextParent.parentState.subscribers.size).toBe(1);
   });
 
+  it('can provide multiple context of different varieties', async () => {
+    await clientSideRender(parentEl, componentPath, {});
+    const childContent = querySelectorDeep('.child-content');
+    const anotherChildContent = querySelectorDeep('.another-child-content');
+
+    expect(childContent.innerText).to.include('parentFoo');
+    expect(anotherChildContent.innerText).to.include('anotherFoo');
+  });
+
+  it('logs an error when multiple contexts of same variety are provided', async () => {
+    const errorSpy = sinon.spy(console, 'error');
+    // context parent already has a state manager of type parentStateFactory
+    await clientSideRender(parentEl, componentPath, {
+      dupParentState: parentStateFactory(),
+    });
+
+    expect(errorSpy.callCount).to.equal(1);
+    expect(errorSpy).to.have.been.calledWith(
+      'Multiple contexts of the same variety were provided. Only the first context will be used.',
+    );
+  });
+
   it('children can access context directly with detached fromContext', async () => {
     const el = await clientSideRender(parentEl, componentPath, {});
     const childWithDetachedFromContext = querySelectorDeep('.child-content-detached', el);

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

@@ -1,5 +1,5 @@
 <template>
-	<x-context-parent></x-context-parent>
+	<x-context-parent dup-parent-state={dupParentState}></x-context-parent>
 	<x-context-lonely-child></x-context-lonely-child>
 	<x-context-parent-detached></x-context-parent-detached>
 </template>

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

@@ -1,3 +1,6 @@
-import { LightningElement } from 'lwc';
+import { LightningElement, api } from 'lwc';
 
-export default class ContextRoot extends LightningElement {}
+export default class ContextRoot extends LightningElement {
+  @api
+  dupParentState;
+}