fix nested & partial providers

If a provider cannot supply a value it should not, and so we need to
check if it has the available `@provide` name.

If a provider _can_ supply a value it should stopPropagation to avoid
letting other providers assign and callback.

Author: keithamus

src/providable.ts

@@ -86,12 +86,14 @@ export const providable = createAbility(
       constructor(...args: any[]) {
         super(...args)
         initProvide(this)
-        if (getProvide(this).size) {
+        const provides = getProvide(this)
+        if (provides.size) {
           if (!contexts.has(this)) contexts.set(this, new Map())
           const instanceContexts = contexts.get(this)!
           this.addEventListener('context-request', event => {
             if (!isContextEvent(event)) return
             const name = event.context.name
+            if (!provides.has(name)) return
             const value = this[name]
             const dispose = () => instanceContexts.get(name)?.delete(callback)
             const eventCallback = event.callback
@@ -100,6 +102,7 @@ export const providable = createAbility(
               if (!instanceContexts.has(name)) instanceContexts.set(name, new Set())
               instanceContexts.get(name)!.add(callback)
             }
+            event.stopPropagation()
             callback(value)
           })
         }

test/providable.ts

@@ -16,6 +16,15 @@ describe('Providable', () => {
   }
   window.customElements.define('providable-provider-test', ProvidableProviderTest)
 
+  @providable
+  class ProvidableSomeProviderTest extends HTMLElement {
+    @provide foo = 'greetings'
+    bar = 'universe'
+    baz = 18
+    @provide qux = 42
+  }
+  window.customElements.define('providable-some-provider-test', ProvidableSomeProviderTest)
+
   @providable
   class ProvidableConsumerTest extends HTMLElement {
     @consume foo = 'goodbye'
@@ -225,6 +234,49 @@ describe('Providable', () => {
     })
   })
 
+  describe('consumer with nested provider parents', () => {
+    let provider: ProvidableProviderTest
+    let someProvider: ProvidableSomeProviderTest
+    let consumer: ProvidableConsumerTest
+    beforeEach(async () => {
+      provider = await fixture(html`<providable-provider-test>
+        <main>
+          <article>
+            <providable-some-provider-test>
+              <section>
+                <div>
+                  <providable-consumer-test></providable-consumer-test>
+                </div>
+              </section>
+            </providable-some-provider-test>
+          </article>
+        </main>
+      </providable-provider-test>`)
+      someProvider = provider.querySelector<ProvidableSomeProviderTest>('providable-some-provider-test')!
+      consumer = provider.querySelector<ProvidableConsumerTest>('providable-consumer-test')!
+    })
+
+    it('only recieves provider responses from first matching provider', () => {
+      expect(consumer).to.have.property('foo', 'greetings')
+      expect(consumer).to.have.property('bar', 'world')
+      expect(consumer).to.have.property('baz', 3)
+      expect(consumer).to.have.property(sym).eql({provided: true})
+      expect(consumer).to.have.property('qux').eql(42)
+      expect(consumer).to.have.property('count').eql(1)
+    })
+
+    it('only updates on appropriate provider changing values', () => {
+      expect(consumer).to.have.property('qux').eql(42)
+      expect(consumer).to.have.property('count').eql(1)
+      provider.qux = 12
+      expect(consumer).to.have.property('qux').eql(42)
+      expect(consumer).to.have.property('count').eql(1)
+      someProvider.qux = 88
+      expect(consumer).to.have.property('qux').eql(88)
+      expect(consumer).to.have.property('count').eql(2)
+    })
+  })
+
   describe('error scenarios', () => {
     it('cannot decorate methods as providers', () => {
       expect(() => {