├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── index.js ├── package.json └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | coverage/ 3 | tmp/ 4 | npm-debug.log* 5 | .DS_Store 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | node_js: 2 | - "0.12" 3 | - "4" 4 | sudo: false 5 | language: node_js 6 | script: "npm run test:cov" 7 | after_script: "npm i -g codecov.io && cat ./coverage/lcov.info | codecov" 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Yoshua Wuyts 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # virtual-widget 2 | 3 | [![NPM version][npm-image]][npm-url] 4 | [![build status][travis-image]][travis-url] 5 | [![Test coverage][codecov-image]][codecov-url] 6 | [![Downloads][downloads-image]][downloads-url] 7 | [![js-standard-style][standard-image]][standard-url] 8 | 9 | Create a virtual-dom widget. 10 | 11 | ## Installation 12 | ```sh 13 | $ npm install virtual-widget 14 | ``` 15 | 16 | ## Usage 17 | ```js 18 | // map.js 19 | const virtualWidget = require('virtual-widget') 20 | 21 | module.exports = virtualWidget({ 22 | init: function (state) { 23 | this.state = state 24 | var elem = document.createElement('div') 25 | this.map = GoogleMap(elem) 26 | this.map.setPosition(this.state.position) 27 | return elem 28 | }, 29 | update: function (prev, el) { 30 | this.map = this.map || prev.map 31 | this.map.setPosition(this.state.position) 32 | }, 33 | destroy: function (el) { 34 | // clear position 35 | this.state.position.set({ x: 0, y: 0 }) 36 | } 37 | }) 38 | ``` 39 | ```js 40 | // view.js 41 | const map = require('./map') 42 | 43 | module.exports = view 44 | 45 | function view (h, state) { 46 | return h('section.foo', [ 47 | map(state) 48 | ]) 49 | } 50 | ``` 51 | 52 | ## API 53 | ### render = virtualWidget(hooks) 54 | Create a new `virtual-widget` using hooks. The following hooks are available: 55 | - __init__: run when the element is first created. Define the instantiation 56 | logic here. 57 | - __update__: run on a re-render. Gives a chance to update state. 58 | - __destroy__: run before the widget is unmounted. It is passed the HTMLElement 59 | associated with the widget that will be removed. Generally used to clean up 60 | data and remove hooks. 61 | - __render__: return a string of HTML for server side rendering. It's 62 | recommended to use [vdom-to-html][1] for server-side rendering. 63 | 64 | ## See Also 65 | - [virtual-dom/docs/widgets](https://github.com/Raynos/mercury/blob/master/docs/widgets.md) 66 | - [mercury/docs/how-to-do-custom-rendering](https://github.com/Raynos/mercury/blob/master/docs/faq.md#how-do-i-do-custom-rendering) 67 | - [vdom-to-html][1] 68 | 69 | ## License 70 | [MIT](https://tldrlegal.com/license/mit-license) 71 | 72 | [npm-image]: https://img.shields.io/npm/v/virtual-widget.svg?style=flat-square 73 | [npm-url]: https://npmjs.org/package/virtual-widget 74 | [travis-image]: https://img.shields.io/travis/yoshuawuyts/virtual-widget/master.svg?style=flat-square 75 | [travis-url]: https://travis-ci.org/yoshuawuyts/virtual-widget 76 | [codecov-image]: https://img.shields.io/codecov/c/github/yoshuawuyts/virtual-widget/master.svg?style=flat-square 77 | [codecov-url]: https://codecov.io/github/yoshuawuyts/virtual-widget 78 | [downloads-image]: http://img.shields.io/npm/dm/virtual-widget.svg?style=flat-square 79 | [downloads-url]: https://npmjs.org/package/virtual-widget 80 | [standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square 81 | [standard-url]: https://github.com/feross/standard 82 | [1]: https://github.com/nthtran/vdom-to-html 83 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const assert = require('assert') 2 | const noop = require('noop2') 3 | 4 | module.exports = virtualWidget 5 | 6 | // Create a virtual-dom widget 7 | // obj -> fn(fn) 8 | function virtualWidget (obj) { 9 | assert.equal(typeof obj, 'object') 10 | const init = obj.init || noop 11 | const update = obj.update || noop 12 | const destroy = obj.destroy || noop 13 | const render = obj.render || noop 14 | 15 | Widget.prototype.update = update 16 | Widget.prototype.destroy = destroy 17 | Widget.prototype.render = render 18 | 19 | return Widget 20 | 21 | function Widget () { 22 | if (!(this instanceof Widget)) { 23 | const o = Object.create(Widget.prototype) 24 | o.constructor.apply(o, arguments) 25 | return o 26 | } 27 | this.type = 'Widget' 28 | this.init = init.apply.bind(init, this, arguments) 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "virtual-widget", 3 | "version": "1.3.0", 4 | "description": "Create a virtual-dom widget", 5 | "main": "index.js", 6 | "scripts": { 7 | "deps": "dependency-check . && dependency-check . --extra --no-dev", 8 | "deps:pkg": "ncu", 9 | "deps:update": "ncu -a", 10 | "test": "standard && npm run deps && NODE_ENV=test node test", 11 | "test:cov": "standard && npm run deps && NODE_ENV=test istanbul cover test.js" 12 | }, 13 | "repository": "yoshuawuyts/virtual-widget", 14 | "keywords": [ 15 | "virtual-dom", 16 | "mercury", 17 | "widget" 18 | ], 19 | "license": "MIT", 20 | "dependencies": { 21 | "noop2": "^2.0.0" 22 | }, 23 | "devDependencies": { 24 | "dependency-check": "^2.5.1", 25 | "istanbul": "^0.3.21", 26 | "npm-check-updates": "^2.2.3", 27 | "standard": "^5.3.1", 28 | "tape": "^4.2.1" 29 | }, 30 | "files": [ 31 | "index.js", 32 | "bin/*" 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | const test = require('tape') 2 | const virtualWidget = require('./') 3 | 4 | test('should assert input types', function (t) { 5 | t.plan(1) 6 | t.throws(virtualWidget) 7 | }) 8 | 9 | test('should pass arguments to init', function (t) { 10 | t.plan(4) 11 | const Widget = virtualWidget({ 12 | init: function (a, b) { 13 | t.equal(a, 'foo') 14 | t.equal(b, 'bar') 15 | } 16 | }) 17 | const widget = new Widget('foo', 'bar') 18 | widget.init() 19 | Widget('foo', 'bar').init() 20 | }) 21 | --------------------------------------------------------------------------------