v2

README.md

@@ -19,27 +19,11 @@ const Button = component((render, text) => render`
     ${text}
   </button>
 `)
+const myButton = Button()
 
-app`${Button('Hello world!')}`
-```
-
-### Pass your own [wire][wire] or bound node
-
-```js
-const hyperHTML = require('hyperhtml')
-const component = require('hypercomponent')
-const app = hyperHTML.bind(document.body)
-
-const Button = component((render, text) => render`
-  <button>
-    ${text}
-  </button>
-`)
+app`${myButton.render('Hello world!')}`
 
-app`${[
-  Button(hyperHTML.wire(), 'Hello world!'),
-  Button(hyperHTML.wire(), 'Hello again!')
-]}`
+setTimeout(() => myButton.render('Hello there!'), 1000)
 ```
 
 ### Subscribe to lifecycle events
@@ -50,10 +34,10 @@ const component = require('hypercomponent')
 const app = hyperHTML.bind(document.body)
 
 const Button = component({
-  onload: (e) => {
+  load: (e) => {
     console.log(e, 'loaded')
   },
-  onunload: (e) => {
+  unload: (e) => {
     console.log(e, 'unloaded')
   },
   render: (render, text) => render`
@@ -63,16 +47,19 @@ const Button = component({
   `
 })
 
+const button1 = Button()
+const button2 = Button()
+
 app`${[
-  Button(hyperHTML.wire(), 'Hello world!'),
-  Button(hyperHTML.wire(), 'Hello again!')
+  button1.render('Hello world!'),
+  button2.render('Hello again!')
 ]}`
 ```
 
 ## See also:
 
 - [yoshuawuyts/nanocomponent][nano]
-- [joshgillies/microcomponent][micro]
+- [yoshuawuyts/microcomponent][micro]
 
 ## License
 
@@ -85,4 +72,4 @@ MIT
 [hyper]: https://github.com/WebReflection/hyperHTML
 [wire]: https://github.com/WebReflection/hyperHTML#wait--there-is-a-wire--in-the-code
 [nano]: https://github.com/yoshuawuyts/nanocomponent
-[micro]: https://github.com/joshgillies/microcomponent
+[micro]: https://github.com/yoshuawuyts/microcomponent

index.js

@@ -1,52 +1,63 @@
-const hyperHTML = require('hyperhtml')
 const onload = require('on-load')
+const html = require('hyperrender').html
+const svg = require('hyperrender').svg
 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
-
+  const symbol = {
+    render: typeof component === 'function' ? component : component.render,
+    load: component && component.load,
+    unload: component && component.unload
+  }
   return function wireComponent () {
-    const onloadHandler = component.onload
-    const onunloadHandler = component.onunload
-    const args = slice.call(arguments)
-
-    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)
-    }
-
-    return el
+    const instance = new Component()
+    instance._symbol = symbol
+    instance._loaded = !(symbol.load || symbol.unload)
+    instance._defaultArgs = slice.call(arguments)
+    return instance
+  }
+}
+
+function Component () {
+  const self = this
+
+  function wire () {
+    return wire.html.apply(self, arguments)
+  }
+
+  wire.html = html(this)
+  wire.svg = svg(this)
+
+  this._wire = wire
+}
+
+Component.prototype.render = function render () {
+  const self = this
+  let args = [this._wire] // first arg is always our wire
+
+  for (var
+    i = 0,
+    length = arguments.length;
+    i < length; i++
+  ) {
+    args[i + 1] = arguments[i] === undefined
+      ? this._defaultArgs[i] // assign default arg if incomming is undefined
+      : arguments[i]
+  }
+
+  if (this._loaded === false) {
+    return onload(this._symbol.render.apply(this, args), load, unload)
+  }
+
+  return this._symbol.render.apply(this, args)
+
+  function load () {
+    self._loaded = true
+    self._symbol.load.apply(null, arguments)
+  }
+
+  function unload () {
+    self._loaded = false
+    self._symbol.unload.apply(null, arguments)
   }
 }

package.json

@@ -19,13 +19,16 @@
     "universal"
   ],
   "scripts": {
+    "start": "bankai example --open --uglify=false",
     "test": "standard"
   },
   "dependencies": {
-    "hyperhtml": "^0.8.6",
+    "hyperrender": "^1.0.0",
     "on-load": "^3.2.0"
   },
   "devDependencies": {
+    "bankai": "^7.1.1",
+    "hyperhtml": "^0.9.1",
     "standard": "^9.0.2"
   }
 }