├── .babelrc ├── .gitignore ├── .npmignore ├── Makefile ├── Readme.md ├── package.json ├── src └── index.js └── test └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "optional": ["es7.objectRestSpread"] 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | lib -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | # 2 | # Vars 3 | # 4 | 5 | BIN = ./node_modules/.bin 6 | .DEFAULT_GOAL := all 7 | 8 | # 9 | # Tasks 10 | # 11 | 12 | node_modules: package.json 13 | @npm install 14 | @touch node_modules 15 | 16 | test: node_modules 17 | ${BIN}/babel-tape-runner test/*.js 18 | 19 | validate: node_modules 20 | @${BIN}/standard 21 | 22 | all: validate test 23 | 24 | # 25 | # Phony 26 | # 27 | 28 | .PHONY: test validate -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | 2 | # virtual-component 3 | 4 | [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard) 5 | 6 | Components for virtual-dom 7 | 8 | ## Installation 9 | 10 | $ npm install virtual-component 11 | 12 | ## Usage 13 | 14 | virtual-component enables you to write react/deku style components in your virtual-dom application. E.g. 15 | 16 | ```javascript 17 | import {fetch} from 'redux-effects-fetch' 18 | 19 | function beforeMount (props) { 20 | return actions.fetchStories(props.categoryId) 21 | } 22 | 23 | function render (props) { 24 | return ( 25 |
26 | { 27 | props.children.map(story => ) 28 | } 29 |
30 | ) 31 | } 32 | 33 | export default { 34 | beforeMount, 35 | render 36 | } 37 | ``` 38 | 39 | ### Hooks 40 | 41 | It supports the following hooks: 42 | 43 | * `beforeMount(props)` - Before the initial DOM element is created 44 | * `beforeUpdate(prevProps, nextProps)` - Before a state update (not called on initial render) 45 | * `afterUpdate(prevProps, nextProps)` - After a state update (not called on initial render). 46 | * `afterMount(props)` - After the initial DOM element is rendered 47 | * `beforeUnmount(props)` - Before the DOM element is removed 48 | * `transformProps(props)` - Transforms props before they are passed to any of the above. Takes props as an argument, returns a new props object. 49 | 50 | Each of these hooks takes either a single argument `props` or `prevProps` and `nextProps`. And it may return a single-value, an action (or array of actions, if using [redux-multi](https://github.com/ashaffer/redux-multi), which can be listened to at the top-level of your application, like this: 51 | 52 | ```javascript 53 | import {listen} from 'virtual-component' 54 | import store from 'my-redux-store' 55 | 56 | listen(store.dispatch) 57 | ``` 58 | 59 | ### shouldUpdate 60 | 61 | By default your component assumes that your `props` are immutable, and will only update when there is a shallow change in your `props` object. If you want to change this behavior, your component may export a `shouldUpdate` function: 62 | 63 | ```javascript 64 | function shouldUpdate (nextProps, prevProps) { 65 | return nextProps.someKey !== prevProps.someKey 66 | } 67 | 68 | function render (props) { 69 | // ...Etc 70 | } 71 | 72 | export default { 73 | render, 74 | shouldUpdate 75 | } 76 | ``` 77 | 78 | ### children 79 | 80 | The props object passed to your component has a single special property: `children`. It consists of the child nodes (if any) of your component. E.g. 81 | 82 | ``` 83 | function List (props) { 84 | return ( 85 | 90 | ) 91 | } 92 | 93 | function PrimaryColors (props) { 94 | return ( 95 | 96 | red 97 | green 98 | blue 99 | 100 | ) 101 | } 102 | ``` 103 | 104 | ### Single function component 105 | 106 | If you don't want to use any hooks and you don't want to use `shouldUpdate`, as most of your components should, then you may just export a single function: `render`, with no object wrapper. E.g. 107 | 108 | ```javascript 109 | export default function render (props) { 110 | // Render some stuff 111 | } 112 | ``` 113 | 114 | 115 | This works particularly well with a [redux](https://github.com/rackt/redux) store, and [vdux](https://github.com/ashaffer/vdux) bridge between [virtual-dom](https://github.com/Matt-Esch/virtual-dom) and redux. 116 | 117 | Using [redux-effects](https://github.com/redux-effects/redux-effects), you can also keep all side-effects out of your hooks and only return pure values, but that is optional. 118 | 119 | 120 | ### Notes 121 | 122 | * The `window.dispatchEvent` stuff is a temporary hack until I think of a better way of doing that. 123 | 124 | If you have any suggestions for either of these, please let me know. 125 | 126 | 127 | ## License 128 | 129 | The MIT License 130 | 131 | Copyright © 2015, Weo.io <info@weo.io> 132 | 133 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 134 | 135 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 136 | 137 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 138 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "virtual-component", 3 | "description": "Components for virtual-dom", 4 | "repository": "git://github.com/ashaffer/virtual-component.git", 5 | "version": "0.2.5", 6 | "license": "MIT", 7 | "main": "lib/index.js", 8 | "scripts": { 9 | "prepublish": "rm -rf lib && babel src --out-dir lib", 10 | "postpublish": "rm -rf lib" 11 | }, 12 | "dependencies": { 13 | "get-uid": "^1.0.1", 14 | "shallow-equals": "0.0.0" 15 | }, 16 | "devDependencies": { 17 | "babel": "^5.8.21", 18 | "babel-tape-runner": "^1.2.0", 19 | "standard": "^5.1.0", 20 | "tape": "^4.2.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Imports 3 | */ 4 | 5 | import shallow from 'shallow-equals' 6 | import uid from 'get-uid' 7 | 8 | /** 9 | * Action event name 10 | */ 11 | 12 | const ActionEvent = 'virtual-component-action' 13 | 14 | /** 15 | * Virtual component 16 | */ 17 | 18 | function factory (component, props, children) { 19 | if (!props) props = {} 20 | 21 | const render = component.render || component 22 | 23 | props.children = children 24 | 25 | if (component.transformProps) { 26 | props = component.transformProps(props) 27 | } 28 | 29 | return { 30 | props, 31 | type: 'Thunk', 32 | component, 33 | render (prev) { 34 | let vnode 35 | 36 | if (!prev || !isSameThunk(prev, this)) { 37 | this.hookKey = uid() 38 | execHook(component.beforeMount, props) 39 | return applyHook(chainThunks(render(props), this), this.hookKey, createComponentHook(component, props)) 40 | } else if (shouldUpdate(component, prev.props, props)) { 41 | execHook(component.beforeUpdate, prev.props, props) 42 | setTimeout(() => execHook(component.afterUpdate, prev.props, props)) 43 | 44 | vnode = chainThunks(render(props), this) 45 | this.hookKey = prev.hookKey 46 | vnode.properties[this.hookKey] = prev.vnode.properties[this.hookKey] 47 | vnode.properties[this.hookKey].props = this.props 48 | return vnode 49 | } else { 50 | this.hookKey = prev.hookKey 51 | prev.vnode.properties[this.hookKey].props = this.props 52 | return prev.vnode 53 | } 54 | } 55 | } 56 | } 57 | 58 | function chainThunks (thunk, prev) { 59 | if (!isThunk(thunk)) return thunk 60 | 61 | const prevThunk = prev.nextThunk 62 | prev.nextThunk = thunk 63 | thunk.vnode = thunk.render(prevThunk) 64 | 65 | return thunk.vnode 66 | } 67 | 68 | function isThunk (t) { 69 | return t && t.type === 'Thunk' 70 | } 71 | 72 | function applyHook (vnode, key, hook) { 73 | vnode.hooks = vnode.hooks || {} 74 | vnode.properties = vnode.properties || {} 75 | vnode.hooks[key] = vnode.properties[key] = hook 76 | 77 | return vnode 78 | } 79 | 80 | function isSameThunk (prev, cur) { 81 | return isThunk(prev) && prev.component === cur.component 82 | } 83 | 84 | function createComponentHook (component, props) { 85 | return Object.create({ 86 | hook: () => setTimeout(() => execHook(component.afterMount, props)), 87 | unhook: () => execHook(component.beforeUnmount, props) 88 | }) 89 | } 90 | 91 | function shouldUpdate (component, prevProps, nextProps) { 92 | if (prevProps && nextProps && shallow(prevProps.children, nextProps.children)) { 93 | nextProps.children = prevProps.children 94 | } 95 | 96 | return component.shouldUpdate 97 | ? component.shouldUpdate(prevProps, nextProps) 98 | : !shallow(prevProps, nextProps) 99 | } 100 | 101 | function execHook (fn, ...args) { 102 | if (fn) { 103 | const action = fn(...args) 104 | action && dispatch(action) 105 | return action 106 | } 107 | } 108 | 109 | function dispatch (action) { 110 | const ev = new CustomEvent(ActionEvent, {detail: action}) 111 | // XXX This is a temporary solution until we settle on a better way of 112 | // accomplishing this. dispatchEvent is imperative and not universal. 113 | setTimeout(() => window.dispatchEvent(ev)) 114 | } 115 | 116 | function listen (fn) { 117 | window.addEventListener(ActionEvent, listener, true) 118 | return () => window.removeEventListener(ActionEvent, listener, true) 119 | 120 | function listener (e) { 121 | fn(e.detail) 122 | } 123 | } 124 | 125 | /** 126 | * Exports 127 | */ 128 | 129 | export default factory 130 | export {listen} 131 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Imports 3 | */ 4 | 5 | import test from 'tape' 6 | import virtual-component from '../src' 7 | 8 | /** 9 | * Tests 10 | */ 11 | 12 | test('should work', () => { 13 | 14 | }) --------------------------------------------------------------------------------