Feature: Promised Components

README.md

@@ -9,6 +9,8 @@
 > [operator](https://github.com/estrattonbailey/operator) – where page
 > transitions can make conventional JS patterns cumbersome.
 
+**Note**: You’ll need to polyfill `Promise` for browsers that don’t support it.
+
 ## Install
 ```
 npm i picoapp --save
@@ -44,7 +46,40 @@ const app = picoapp({ button })
 
 To bind your component to the DOM node, call `mount()`:
 ```javascript
-app.mount()
+app.mount() // returns a promise which resolves when all components successfully mount
+```
+
+## Adding Components
+If you need to add components – maybe asynchronously – you can use `add`:
+```javascript
+app.add({
+  modal: component(context => {})
+})
+
+app.mount() // bind the newly added component to the DOM
+```
+
+Additionally, you can pass arbitrary promises that resolve to a component:
+```javascript
+import { picoapp } from 'picoapp'
+import button from './button.js'
+
+const components = { button }
+
+// check for native image lazy-loading
+if (!'loading' in HTMLImageElement.prototype) {
+  const lazyImage = import('lazy-image-fallback.mjs').then(module => module.default)
+  components.push(lazyImage)
+}
+
+const app = picoapp(components) // components.lazyImage is a promise
+```
+
+```javascript
+// lazy-image-fallback.mjs
+export default component((node, ctx) => {
+…
+})
 ```
 
 ## State & Events
@@ -166,13 +201,6 @@ And then access it from anywhere:
 app.getState() // { count: 5 }
 ```
 
-If you need to add components – maybe asynchronously – you can use `add`:
-```javascript
-app.add({
-  lazyImage: component(context => {})
-})
-```
-
 If `data-component` isn't your style, or you'd like to use different types of
 "components", pass your attributes to `mount()`:
 

index.js

@@ -41,6 +41,7 @@ export function picoapp (components = {}, initialState = {}) {
       return evx.hydrate(data)
     },
     mount (attrs = 'data-component') {
+      const queue = []
       attrs = [].concat(attrs)
 
       for (let a = 0; a < attrs.length; a++) {
@@ -57,17 +58,24 @@ export function picoapp (components = {}, initialState = {}) {
             if (comp) {
               node.removeAttribute(attr) // so can't be bound twice
 
-              try {
-                const instance = comp(node, evx)
-                isFn(instance.unmount) && cache.push(instance)
-              } catch (e) {
-                console.log(`🚨 %cpicoapp - ${modules[m]} failed - ${e.message || e}`, 'color: #E85867')
-                console.error(e)
-              }
+              queue.push(
+                Promise.resolve(comp)
+                  .then(initFn => {
+                    const instance = initFn(node, evx)
+                    isFn(instance.unmount) && cache.push(instance)
+                  })
+                  .catch(e => {
+                    console.log(`🚨 %cpicoapp - ${modules[m]} failed - ${e.message || e}`, 'color: #E85867')
+                    console.error(e)
+                  })
+              )
             }
           }
         }
       }
+
+      // NOTE: Promise.allSettled might be be ideal, but browser support isn't there yet
+      return Promise.all(queue).then() // so `mount()` can be awaited
     },
     unmount () {
       for (let i = cache.length - 1; i > -1; i--) {

test.js

@@ -42,27 +42,32 @@ test('events', t => {
   app.emit('a')
   app.emit('b')
 })
-test('mount', t => {
-  t.plan(1)
+test('mount', async t => {
+  t.plan(2)
 
-  const app = picoapp({
-    foo: component((node, ctx) => {
+  const createComponent = () => {
+    return component((node, ctx) => {
       const u = ctx.on('foo', () => {
         t.pass()
         u() // unsub itself
       })
     })
+  }
+
+  const app = picoapp({
+    foo: createComponent(),
+    bar: Promise.resolve(createComponent()) // async component
   }, { bar: true })
 
-  app.mount()
+  await app.mount()
 
   app.emit('foo')
 
   app.unmount()
 
   app.emit('foo')
 })
-test('unmount', t => {
+test('unmount', async t => {
   t.plan(4)
 
   const app = picoapp({
@@ -75,7 +80,7 @@ test('unmount', t => {
     })
   })
 
-  app.mount()
+  await app.mount()
 
   app.emit('foo')