├── .npmignore ├── .gitignore ├── .babelrc ├── component.json ├── index.js ├── package.json ├── README.md └── test └── index.js /.npmignore: -------------------------------------------------------------------------------- 1 | test 2 | index.js -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } -------------------------------------------------------------------------------- /component.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "magic-virtual-element", 3 | "main": "build/magic-virtual-element.js" 4 | } -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { element } from 'deku' 2 | import { string } from 'to-style' 3 | import classNames from 'classnames' 4 | import componentType from 'component-type' 5 | 6 | export default function magic (type, attributes, ...children) { 7 | let vnode = element(type, attributes, ...children) 8 | 9 | if (componentType(vnode.attributes.class) === 'array') { 10 | vnode.attributes.class = classNames.apply(null, vnode.attributes.class) 11 | } 12 | 13 | if (componentType(vnode.attributes.class) === 'object') { 14 | vnode.attributes.class = classNames(vnode.attributes.class) 15 | } 16 | 17 | if (componentType(vnode.attributes.style) === 'object') { 18 | vnode.attributes.style = string(vnode.attributes.style) 19 | } 20 | 21 | if (!vnode.attributes.hidden) { 22 | delete vnode.attributes.hidden 23 | } 24 | 25 | return vnode 26 | } 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "magic-virtual-element", 3 | "version": "2.0.0-rc1", 4 | "repository": "dekujs/magic-virtual-element", 5 | "description": "Build virtual tree elements with magic attributes", 6 | "main": "lib/index.js", 7 | "devDependencies": { 8 | "babel-cli": "^6.4.0", 9 | "babel-preset-es2015": "^6.3.13", 10 | "babelify": "^7.2.0", 11 | "hihat": "^2.6.1", 12 | "rimraf": "^2.5.0", 13 | "snazzy": "^2.0.1", 14 | "standard": "^5.4.1", 15 | "tap-dev-tool": "^1.3.0", 16 | "tape": "^4.4.0" 17 | }, 18 | "dependencies": { 19 | "deku": "~2.0.0-rc", 20 | "classnames": "^2.2.3", 21 | "component-type": "~1.2.0", 22 | "to-style": "^1.3.3" 23 | }, 24 | "scripts": { 25 | "clean": "rimraf lib", 26 | "build": "babel index.js --out-dir lib", 27 | "prepublish": "npm run clean && npm run build", 28 | "preversion": "npm run clean && npm run test", 29 | "version": "npm run build", 30 | "postversion": "git push && git push --tags && npm run clean", 31 | "test": "standard index.js && hihat test/index.js -- --debug -t babelify -p tap-dev-tool" 32 | } 33 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # magic-virtual-element 2 | 3 | [![version](https://img.shields.io/npm/v/magic-virtual-element.svg?style=flat-square)](https://www.npmjs.com/package/magic-virtual-element) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/feross/standard) 4 | 5 | A library for building virtual tree elements, with enhanced support for class and style properties. 6 | 7 | ``` 8 | npm install magic-virtual-element 9 | ``` 10 | 11 | You can also use Duo, Bower or [download the files manually](https://github.com/dekujs/magic-virtual-element/releases). 12 | 13 | ## Top-Level API 14 | 15 | ```js 16 | element(component: string|Function , [props: object], [...children: Array]): Component 17 | ``` 18 | 19 | ## Example 20 | ```js 21 | import element from 'magic-virtual-element'; 22 | 23 | let divStyle = { 24 | color: 'white', 25 | backgroundImage: 'url(' + imgUrl + ')', 26 | WebkitTransition: 'all', // note the capital 'W' here 27 | msTransition: 'all' // 'ms' is the only lowercase vendor prefix 28 | }; 29 | 30 | element('div', { class: ["App", "foo", "bar"], style: divStyle }, [ 31 | element('button', { class: "Button" }, 'Click Me!') 32 | ]); 33 | ``` 34 | 35 | See https://github.com/dekujs/deku#virtual-elements 36 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | /** @jsx h */ 2 | import test from 'tape' 3 | import element from '../' 4 | 5 | test('magic class attribute', ({equal, end}) => { 6 | let vnode = element('div', { 7 | class: [ 'foo', false, 'bar', null, 'baz' ] 8 | }) 9 | 10 | equal(vnode.attributes.class, 'foo bar baz') 11 | 12 | vnode = element('div', { 13 | class: { 14 | foo: true, 15 | bar: true, 16 | baz: false 17 | } 18 | }) 19 | 20 | equal(vnode.attributes.class, 'foo bar') 21 | 22 | end() 23 | }) 24 | 25 | test('magic style attribute', ({equal, end}) => { 26 | let vnode = element('div', { 27 | style: { 28 | border: { 29 | width: 1 30 | } 31 | } 32 | }) 33 | 34 | equal(vnode.attributes.style, 'border-width: 1px') 35 | 36 | end() 37 | }) 38 | 39 | test('magic hidden attribute', ({equal, comment, end}) => { 40 | let vnode = element('div', { 41 | hidden: true 42 | }) 43 | 44 | equal(vnode.attributes.hidden, true) 45 | 46 | vnode = element('div', { 47 | hidden: false 48 | }) 49 | 50 | equal(vnode.attributes.hasOwnProperty('hidden'), false) 51 | 52 | vnode = element('div', { 53 | hidden: null 54 | }) 55 | 56 | equal(vnode.attributes.hasOwnProperty('hidden'), false) 57 | 58 | vnode = element('div', { 59 | hidden: undefined 60 | }) 61 | 62 | equal(vnode.attributes.hasOwnProperty('hidden'), false) 63 | 64 | end() 65 | }) 66 | --------------------------------------------------------------------------------