add provideAsync

Author: keithamus

src/providable.ts

@@ -45,6 +45,21 @@ const [provide, getProvide, initProvide] = createMark<CustomElement>(
     }
   }
 )
+const [provideAsync, getProvideAsync, initProvideAsync] = createMark<CustomElement>(
+  ({name, kind}) => {
+    if (kind === 'setter') throw new Error(`@provide cannot decorate setter ${String(name)}`)
+    if (kind === 'method') throw new Error(`@provide cannot decorate method ${String(name)}`)
+  },
+  (instance: CustomElement, {name, kind, access}) => {
+    return {
+      get: () => (kind === 'getter' ? access.get!.call(instance) : access.value),
+      set: (newValue: unknown) => {
+        access.set?.call(instance, newValue)
+        for (const callback of contexts.get(instance)?.get(name) || []) callback(newValue)
+      }
+    }
+  }
+)
 const [consume, getConsume, initConsume] = createMark<CustomElement>(
   ({name, kind}) => {
     if (kind === 'method') throw new Error(`@consume cannot decorate method ${String(name)}`)
@@ -75,7 +90,7 @@ const [consume, getConsume, initConsume] = createMark<CustomElement>(
 
 const disposes = new WeakMap<CustomElement, Map<PropertyKey, () => void>>()
 
-export {consume, provide, getProvide, getConsume}
+export {consume, provide, provideAsync, getProvide, getProvideAsync, getConsume}
 export const providable = createAbility(
   <T extends CustomElementClass>(Class: T): T =>
     class extends Class {
@@ -86,18 +101,23 @@ export const providable = createAbility(
       constructor(...args: any[]) {
         super(...args)
         initProvide(this)
+        initProvideAsync(this)
         const provides = getProvide(this)
-        if (provides.size) {
+        const providesAsync = getProvideAsync(this)
+        if (provides.size || providesAsync.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
+            if (!provides.has(name) && !providesAsync.has(name)) return
             const value = this[name]
             const dispose = () => instanceContexts.get(name)?.delete(callback)
             const eventCallback = event.callback
-            const callback = (newValue: unknown) => eventCallback(newValue, dispose)
+            let callback = (newValue: unknown) => eventCallback(newValue, dispose)
+            if (providesAsync.has(name)) {
+              callback = async (newValue: unknown) => eventCallback(await newValue, dispose)
+            }
             if (event.multiple) {
               if (!instanceContexts.has(name)) instanceContexts.set(name, new Set())
               instanceContexts.get(name)!.add(callback)

test/providable.ts

@@ -1,6 +1,6 @@
 import {expect, fixture, html} from '@open-wc/testing'
 import {fake} from 'sinon'
-import {provide, consume, providable, ContextEvent} from '../src/providable.js'
+import {provide, provideAsync, consume, providable, ContextEvent} from '../src/providable.js'
 
 describe('Providable', () => {
   const sym = Symbol('bing')
@@ -16,6 +16,18 @@ describe('Providable', () => {
   }
   window.customElements.define('providable-provider-test', ProvidableProviderTest)
 
+  @providable
+  class AsyncProvidableProviderTest extends HTMLElement {
+    @provideAsync foo = Promise.resolve('hello')
+    @provideAsync bar = Promise.resolve('world')
+    @provideAsync get baz() {
+      return Promise.resolve(3)
+    }
+    @provideAsync [sym] = Promise.resolve({provided: true})
+    @provideAsync qux = Promise.resolve(8)
+  }
+  window.customElements.define('async-providable-provider-test', AsyncProvidableProviderTest)
+
   @providable
   class ProvidableSomeProviderTest extends HTMLElement {
     @provide foo = 'greetings'
@@ -277,6 +289,26 @@ describe('Providable', () => {
     })
   })
 
+  describe('async provider', () => {
+    let provider: AsyncProvidableProviderTest
+    let consumer: ProvidableConsumerTest
+    beforeEach(async () => {
+      provider = await fixture(html`<async-providable-provider-test>
+        <providable-consumer-test></providable-consumer-test>
+      </async-providable-provider-test>`)
+      consumer = provider.querySelector<ProvidableConsumerTest>('providable-consumer-test')!
+    })
+
+    it('passes resovled values to consumer', async () => {
+      expect(consumer).to.have.property('foo', 'hello')
+      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(8)
+      expect(consumer).to.have.property('count').eql(1)
+    })
+  })
+
   describe('error scenarios', () => {
     it('cannot decorate methods as providers', () => {
       expect(() => {