Update adds lifecycle events

joshgillies · Apr 20, 2017 · a3682fb · a3682fb
1 parent 02d7e93
commit a3682fb
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -42,6 +42,33 @@ app`${[
 ]}`
 ```
 
+### Subscribe to lifecycle events
+
+```js
+const hyperHTML = require('hyperhtml')
+const component = require('hypercomponent')
+const app = hyperHTML.bind(document.body)
+
+const Button = component({
+  onload: (e) => {
+    console.log(e, 'loaded')
+  },
+  onunload: (e) => {
+    console.log(e, 'unloaded')
+  },
+  render: (render, text) => render`
+    <button onclick="${(e) => e.target.parentNode.removeChild(e.target)}">
+      ${text}
+    </button>
+  `
+})
+
+app`${[
+  Button(hyperHTML.wire(), 'Hello world!'),
+  Button(hyperHTML.wire(), 'Hello again!')
+]}`
+```
+
 ## See also:
 
 - [yoshuawuyts/nanocomponent][nano]

diff --git a/index.js b/index.js
@@ -1,18 +1,52 @@
 const hyperHTML = require('hyperhtml')
+const onload = require('on-load')
 const slice = Array.prototype.slice
+
 const WIRE_OR_BOUND_NODE = /(update|hyperHTML)$/
+const ONLOAD_ATTR = /^data-onloadid/
 
 module.exports = function hypercomponent (component) {
   const render = hyperHTML.wire()
+  const renderer = typeof component === 'function'
+    ? component
+    : component.render
 
   return function wireComponent () {
+    const onloadHandler = component.onload
+    const onunloadHandler = component.onunload
     const args = slice.call(arguments)
 
-    if (typeof args[0] === 'function' && WIRE_OR_BOUND_NODE.test(args[0].name)) {
-      return component.apply(component, args)
+    let isMounted = false
+    let el = null
+
+    if (
+      typeof args[0] === 'function' &&
+      WIRE_OR_BOUND_NODE.test(args[0].name)
+    ) {
+      el = renderer.apply(renderer, args)
+    } else {
+      args.unshift(render) // asign default renderer
+      el = renderer.apply(renderer, args)
+    }
+
+    if (!onloadHandler && !onunloadHandler) return el
+
+    if (Array.isArray(el)) {
+      return el // A root elelemnt is required if you want to use mount/unmmount
+    }
+
+    let len = (el.attributes && el.attributes.length) || 0
+    while (len--) {
+      if (ONLOAD_ATTR.test(el.attributes[len].name)) {
+        isMounted = true
+        break
+      }
+    }
+
+    if (!isMounted) {
+      return onload(el, onloadHandler, onunloadHandler)
     }
 
-    args.unshift(render)
-    return component.apply(component, args)
+    return el
   }
 }
diff --git a/package.json b/package.json
@@ -22,7 +22,8 @@
     "test": "standard"
   },
   "dependencies": {
-    "hyperhtml": "^0.8.6"
+    "hyperhtml": "^0.8.6",
+    "on-load": "^3.2.0"
   },
   "devDependencies": {
     "standard": "^9.0.2"

diff --git a/yarn.lock b/yarn.lock
@@ -211,6 +211,10 @@ doctrine@^2.0.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
+dom-walk@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
+
 error-ex@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
@@ -484,6 +488,13 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+global@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.3.1.tgz#5f757908c7cbabce54f386ae440e11e26b7916df"
+  dependencies:
+    min-document "^2.19.0"
+    process "~0.5.1"
+
 globals@^9.14.0:
   version "9.17.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.17.0.tgz#0c0ca696d9b9bb694d2e5470bd37777caad50286"
@@ -696,6 +707,12 @@ lodash@^4.0.0, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  dependencies:
+    dom-walk "^0.1.0"
+
 minimatch@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
@@ -740,6 +757,12 @@ object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
 
+on-load@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/on-load/-/on-load-3.2.0.tgz#dd3145d3a5c2faa5666920d1df674b69f0c2f66f"
+  dependencies:
+    global "^4.3.0"
+
 once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -842,6 +865,10 @@ process-nextick-args@~1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
 
+process@~0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
+
 progress@^1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"