unsubscribe events from within components

index.js

@@ -1,9 +1,25 @@
 import { create } from 'evx'
 
+const isObj = v => typeof v === 'object' && !Array.isArray(v)
+
+const validate = (o, name) => {
+  if (!isObj(o)) throw name + ' should be an object'
+}
+
+// make sure evx and picoapp don't destroy the same events
 export function component (create) {
-  return function initialize (node, context) {
+  return function initialize (node, ctx) {
+    let subs = []
     return {
-      unmount: create(node, context),
+      subs,
+      unmount: create(node, {
+        ...ctx,
+        on: (evs, fn) => {
+          const u = ctx.on(evs, fn)
+          subs.push(u)
+          return u
+        }
+      }),
       node
     }
   }
@@ -21,11 +37,11 @@ export function picoapp (components = {}, initialState = {}) {
       return evx.getState()
     },
     add (index) {
-      if (typeof index !== 'object') console.error(new Error(`picoapp - add should be passed an object of components`))
+      validate(index, 'components')
       Object.assign(components, index)
     },
     hydrate (data) {
-      if (typeof data !== 'object') console.error(new Error(`picoapp - hydrate should be passed a state object`))
+      validate(data, 'state')
       return evx.hydrate(data)
     },
     mount (attrs = 'data-component') {
@@ -40,17 +56,16 @@ export function picoapp (components = {}, initialState = {}) {
           const modules = node.getAttribute(attr).split(/\s/)
 
           for (let m = 0; m < modules.length; m++) {
-            const component = components[modules[m]]
+            const comp = components[modules[m]]
 
-            if (component) {
+            if (comp) {
               node.removeAttribute(attr) // so can't be bound twice
 
               try {
-                cache.push(component(node, evx))
+                cache.push(comp(node, evx))
               } catch (e) {
-                console.groupCollapsed(`🚨 %cpicoapp - ${modules[m]} failed - ${e.message || e}`, 'color: red')
+                console.error(`🚨 %cpicoapp - ${modules[m]} failed - ${e.message || e}`, 'color: red')
                 console.error(e)
-                console.groupEnd()
               }
             }
           }
@@ -59,10 +74,11 @@ export function picoapp (components = {}, initialState = {}) {
     },
     unmount () {
       for (let i = cache.length - 1; i > -1; i--) {
-        const { unmount, node } = cache[i]
+        const { unmount, node, subs } = cache[i]
 
         if (!document.documentElement.contains(node)) {
           unmount && unmount(node)
+          subs.map(u => u())
           cache.splice(i, 1)
         }
       }

package.json

@@ -24,7 +24,7 @@
     "microbundle": "^0.11.0"
   },
   "dependencies": {
-    "evx": "^0.2.0",
+    "evx": "^1.0.0",
     "picostate": "^1.4.0"
   }
 }

test.js

@@ -1,5 +1,5 @@
 import test from 'ava'
-import { picoapp } from './dist/picoapp.js'
+import { picoapp, component } from './dist/picoapp.js'
 
 test('init', t => {
   const app = picoapp({ foo: 'foo' }, { bar: true })
@@ -26,3 +26,41 @@ test('events', t => {
   app.emit('a')
   app.emit('b')
 })
+test('mount', t => {
+  t.plan(1)
+
+  const node = {
+    getAttribute () {
+      return 'foo'
+    },
+    removeAttribute () {}
+  }
+
+  global.document = {
+    querySelectorAll () {
+      return [ node ]
+    },
+    documentElement: {
+      contains () {
+        return false
+      }
+    }
+  }
+
+  const app = picoapp({
+    foo: component((node, ctx) => {
+      const u = ctx.on('foo', () => {
+        t.pass()
+        u() // unsub itself
+      })
+    })
+  }, { bar: true })
+
+  app.mount()
+
+  app.emit('foo')
+
+  app.unmount()
+
+  app.emit('foo')
+})