Make it so 🚀

Author: joshgillies

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - "node"
+  - "4"
+  - "6"

README.md

@@ -1,2 +1,61 @@
 # hypercomponent
-Fast and light component system, backed by hyperHTML
+
+[![Build Status][0]][1]
+[![Standard - JavaScript Style Guide][2]][3]
+
+> Fast and light component system, backed by [hyperHTML][hyper] :zap:
+
+## Usage
+
+### Basic
+
+```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`${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`${[
+  Button(hyperHTML.wire(), 'Hello world!'),
+  Button(hyperHTML.wire(), 'Hello again!')
+]}`
+```
+
+## See also:
+
+- [yoshuawuyts/nanocomponent][nano]
+- [joshgillies/microcomponent][micro]
+
+## License
+
+MIT
+
+[0]: https://travis-ci.org/joshgillies/hypercomponent.svg?branch=master
+[1]: https://travis-ci.org/joshgillies/hypercomponent
+[2]: https://img.shields.io/badge/code_style-standard-brightgreen.svg
+[3]: http://standardjs.com/
+[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

index.js

@@ -0,0 +1,18 @@
+const hyperHTML = require('hyperhtml')
+const slice = Array.prototype.slice
+const WIRE_OR_BOUND_NODE = /(update|hyperHTML)$/
+
+module.exports = function hypercomponent (component) {
+  const render = hyperHTML.wire()
+
+  return function wireComponent () {
+    const args = slice.call(arguments)
+
+    if (typeof args[0] === 'function' && WIRE_OR_BOUND_NODE.test(args[0].name)) {
+      return component.apply(component, args)
+    }
+
+    args.unshift(render)
+    return component.apply(component, args)
+  }
+}

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "hypercomponent",
+  "version": "1.0.0",
+  "description": "Fast and light component system, backed by hyperHTML",
+  "main": "index.js",
+  "repository": "[email protected]:joshgillies/hypercomponent.git",
+  "author": "Josh Gillies <[email protected]>",
+  "license": "MIT",
+  "keywords": [
+    "dom",
+    "hyper",
+    "html",
+    "template",
+    "component",
+    "fast",
+    "performance",
+    "diff",
+    "hyperhtml",
+    "universal"
+  ],
+  "scripts": {
+    "test": "standard"
+  },
+  "dependencies": {
+    "hyperhtml": "^0.8.6"
+  },
+  "devDependencies": {
+    "standard": "^9.0.2"
+  }
+}