├── .gitignore ├── .travis.yml ├── LICENSE.md ├── README.md ├── dist ├── index.es6.js └── index.js ├── package.json ├── perf ├── .gitignore ├── build-branches.js ├── modules-attribute-props.js ├── modules-object-props.js ├── no-props.js ├── real-world-form.js ├── run.js └── simple-props.js ├── snabbdom-pragma.d.ts ├── src ├── fn.js ├── index.js └── is.js ├── test ├── build-specs │ └── dist-file │ │ ├── actual.js │ │ └── expected.js ├── build-test.js ├── jsx-custom-modules-specs │ ├── component-without-props │ │ ├── actual.js │ │ ├── transform-babel.js │ │ ├── transform-buble.js │ │ ├── transform-traceur.js │ │ └── transform-typescript.js │ ├── component │ │ ├── actual.js │ │ ├── transform-babel.js │ │ ├── transform-buble.js │ │ ├── transform-traceur.js │ │ └── transform-typescript.js │ ├── element-with-attributes │ │ ├── actual.js │ │ ├── transform-babel.js │ │ ├── transform-buble.js │ │ ├── transform-traceur.js │ │ └── transform-typescript.js │ ├── element-with-class-names │ │ ├── actual.js │ │ ├── transform-babel.js │ │ ├── transform-buble.js │ │ ├── transform-traceur.js │ │ └── transform-typescript.js │ ├── element-with-event │ │ ├── actual.js │ │ ├── transform-babel.js │ │ ├── transform-buble.js │ │ ├── transform-traceur.js │ │ └── transform-typescript.js │ └── simple-element │ │ ├── actual.js │ │ ├── transform-babel.js │ │ ├── transform-buble.js │ │ ├── transform-traceur.js │ │ └── transform-typescript.js ├── jsx-custom-modules-test.js ├── jsx-specs │ ├── component-without-props │ │ ├── actual.js │ │ ├── transform-babel.js │ │ ├── transform-buble.js │ │ ├── transform-traceur.js │ │ └── transform-typescript.js │ ├── component │ │ ├── actual.js │ │ ├── transform-babel.js │ │ ├── transform-buble.js │ │ ├── transform-traceur.js │ │ └── transform-typescript.js │ ├── element-with-attributes │ │ ├── actual.js │ │ ├── transform-babel.js │ │ ├── transform-buble.js │ │ ├── transform-traceur.js │ │ └── transform-typescript.js │ ├── element-with-class-names │ │ ├── actual.js │ │ ├── transform-babel.js │ │ ├── transform-buble.js │ │ ├── transform-traceur.js │ │ └── transform-typescript.js │ ├── element-with-event │ │ ├── actual.js │ │ ├── transform-babel.js │ │ ├── transform-buble.js │ │ ├── transform-traceur.js │ │ └── transform-typescript.js │ └── simple-element │ │ ├── actual.js │ │ ├── transform-babel.js │ │ ├── transform-buble.js │ │ ├── transform-traceur.js │ │ └── transform-typescript.js ├── jsx-test.js ├── pragma-specs │ ├── vnode-text-and-var │ │ ├── actual.js │ │ └── expected.js │ ├── vnode-text │ │ ├── actual.js │ │ └── expected.js │ ├── vnode-type │ │ ├── actual.js │ │ └── expected.js │ ├── vnode-with-array-children │ │ ├── actual.js │ │ └── expected.js │ └── vnode-with-children │ │ ├── actual.js │ │ └── expected.js ├── pragma-test.js ├── snabbdom-specs │ ├── vnode-class-names │ │ ├── actual.js │ │ ├── expected.js │ │ └── neutral.js │ ├── vnode-component-with-slot │ │ ├── actual.js │ │ └── expected.js │ ├── vnode-component-without-props │ │ ├── actual.js │ │ └── expected.js │ ├── vnode-component │ │ ├── actual.js │ │ └── expected.js │ ├── vnode-data-aria-object │ │ ├── actual.js │ │ └── expected.js │ ├── vnode-data-aria │ │ ├── actual.js │ │ └── expected.js │ ├── vnode-events │ │ ├── actual.js │ │ ├── expected.js │ │ └── neutral.js │ ├── vnode-forced-attrs │ │ ├── actual.js │ │ └── expected.js │ ├── vnode-hard-component │ │ ├── actual.js │ │ └── expected.js │ ├── vnode-hooks │ │ ├── actual.js │ │ ├── expected.js │ │ └── neutral.js │ ├── vnode-mixed-module-ways │ │ ├── actual.js │ │ └── expected.js │ ├── vnode-properties │ │ ├── actual.js │ │ └── expected.js │ ├── vnode-reserved-module │ │ ├── actual.js │ │ └── expected.js │ ├── vnode-style │ │ ├── actual.js │ │ └── expected.js │ └── vnode-svg │ │ ├── actual.js │ │ └── expected.js ├── snabbdom-test.js └── utils-test.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | // Local sandbox purpose 4 | demo.js 5 | demo.ts 6 | demo.tsx 7 | tsconfig.json 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '6' 4 | 5 | cache: 6 | yarn: true 7 | 8 | matrix: 9 | fast_finish: true 10 | 11 | script: 12 | - yarn run lint 13 | - yarn run test:prebuild 14 | - export HASH=$(cksum dist/index.js) 15 | - yarn run build 16 | - bash -c 'if [[ "$(cksum dist/index.js)" != $HASH ]]; then exit 1; fi' 17 | - yarn run test:postbuild 18 | 19 | deploy: 20 | provider: npm 21 | email: 22 | secure: pOrobfDewXKlKVzdXJeuhfvuj5QRjnLBUHQHqoZNxu4dpm66PpSG7NiGX0gtMkJh/uCbN132bjx0gpCBd02fNYoc7w4ZuwHerlGVRUniWUWeWBxdTABy6loov5IkdTdsieFw1VYwczPDW4Q6pVC6qjoN/s9+A7ZVt6GwfFajMTXHNcJ5CgYX2FcyuJUNXJ+LCRqG0y0SVX4qnxgtNajVrlUPdUngRTDE3vqoVM2y5AAB2MHTJ1WtxRCRMcXbQy2wVDPs90cLbm79aH95bTnuvLM3DbPeXonh/RWXBkmByNSuxwVQdLy0SXJH2ft+nzQ1HwIoVwRsqZxc/sz98GnTQRM1d3jNxbSzDn7wdTpkhnrNu2iJ3V0h0WrYhyDQk5S81DymESVeJ95Pyg5iU+BzAke+LzKjOVAeEcUo3kbFmDhrmRshETbBxNC5fOFQcx93A37y3wZZgkB8GRvT5yDQis0gEe3zWH2VZyzWHnbQmvlW+sQVFoLsr6mdlRbTjRsaaqS00+2qNiywFgOzrXeLRByC1aLAYQMlvdihGQoEdTN1nzi+woYGrBrqod+NsB9JS8QP2KGgjpQWWp3naa+APv9NP/Y9eRKHT0m3xI6diNggsSsP09N1rX27ivMvbJR6mIFflNu2XK6FesHBwqufyYVcsA1UJTuO7LXHHjh6AAY= 23 | api_key: 24 | secure: uyCJ4nUDE35SDEK5GkJ41i8LFQ+8mX4xv6bVq7YZ0k7OA10a/xUrvZ+pFsftC3WHArE6I/s9e1hsKk5x16yV6K0+wXlgqVOkX/H+trkByBAAgXxrWPtwOUJYhxFC4vY4YJjRNNX7u6uCvtdilsQ+tto3qxly6TdYx825J+8ORyG3rSxSgDSwEgzcPjEGRhqAPA4kPs3ZOvBAHtexgeJfpmvacbrI6ROyLUb0NKOpOcJ4sZVM71aDWGTXB44GbLgXAGJZke1/kSeEaxGuNqGB/HPwsFRsCUwxkGkvr2bTRWlWKZP578lhyXBcfobAnAveQAvOAgJPrZQFAcJuGW+Y5TkcT2srHJHazjBcBKYRt6/WqTTE1yWIDQohaiIq1IdmglVKzca56GcsJjpqVpNYvrNzADJxPmp3mFjB5KDJUhGWnNny7XGWCkPaBDhdcdR88jI2aaufyxr385E49zSCSk5T2MSJ8XURGnzjGdOtMwxh+9waaqBzjObSNOfKZIIpfvS9mCV05VUXNmpyRk/pZmd1u0LLXV0hwuGM57DmSEjrPHzjxgB32jZj1FU1gKzxm+miRFZjxNe8MDpnlIvzaZIcIgZn4A5JcHLU23i/OsjadmWtS2c7+V9onv27XXXyzbTrZxVErFyd8/qjcs1jZQMlIFmS9FwyL5b2A+H+ImI= 25 | on: 26 | repo: Swizz/snabbdom-pragma 27 | branch: master 28 | tags: true 29 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Quentin Gerodel 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 |

Snabbdom-pragma

2 | 3 |
4 | Well tested NotReact.createElement pragma although for Snabbdom ! 5 |
6 | 7 |
8 | 9 |
10 | 11 | npm version 12 | 13 | 14 | mit license 15 | 16 | 17 | travis build 18 | 19 |
20 | 21 |
22 | 23 | Snabbdom-pragma is the favorite way to use the [Facebook JSX](https://facebook.github.io/jsx/) syntax with the virtual DOM library [Snabbdom](https://github.com/snabbdom/snabbdom). Based on many principles, Snabbdom-pragma, aim to handle the same API as [React.createElement](https://facebook.github.io/react/docs/react-api.html#createelement) to take all benefits from the most used transpilers proven by the wider React community. 24 | 25 | Snabbdom-pragma draws its strength thanks to the [Snabbdom](https://github.com/snabbdom/snabbdom), [Facebook JSX](https://facebook.github.io/jsx/), and [React.createElement](https://facebook.github.io/react/docs/react-api.html#createelement) specs with some grounded tests. 26 | 27 | ## Table of Contents 28 | 29 |
30 | Table of Contents 31 | 32 | - [Overview](#snabbdom-pragma) 33 | - [Getting started](#getting-started) 34 | - [Usage](#usage) 35 | * [Bublé](#bublé) 36 | * [Typescript](#typescript) 37 | * [Babel](#babel) 38 | * [Traceur](#traceur) 39 | - [JSX Features](#jsx-features) 40 | * [Elements](#elements) 41 | * [Attributes](#attributes) 42 | * [SVG](#svg) 43 | - [Snabbdom Features](#snabbdom-features) 44 | * [Modules object](#modules-object) 45 | * [Modules attribute](#modules-object) 46 | * [Both](#both) 47 | * [Custom Modules](#custom-modules) 48 | - ['NotReact' Features](#notreact-features) 49 | * [Components](#components) 50 | - [Misc](#misc) 51 |
52 | 53 | ## Getting started 54 | 55 | - **1.** To use Snabbdom-pragma you need to download it thanks to your favorite JavaScript Package Manager. 56 | ```sh 57 | yarn add snabbdom-pragma 58 | ``` 59 | 60 | ```sh 61 | npm install --save snabbdom-pragma 62 | ``` 63 | 64 | - **2.** The pragma option tells to your transpiler to use `Snabbdom.createElement` function instead of the default `React.createElement`. 65 | ```js 66 | buble.transform(input, { 67 | jsx: 'Snabbdom.createElement' 68 | }) 69 | ``` 70 | 71 | - **3.** You will need to import the `Snabbdom.createElement` function into your code. 72 | ```js 73 | import Snabbdom from 'snabbdom-pragma' 74 | ``` 75 | 76 | - **4.** Your JSX source code will now be transpiled to use Snabbdom. 77 | ```jsx 78 | const vnode =
Hello World
79 | 80 | patch(document.body, vnode) 81 | ``` 82 | 83 | ## Usage 84 | Snabbdom-pragma is compiler/transpiler independent ! At least your transpiler allow custom JSX pragma. 85 | (If you know a well used transpiler not in this list, feel free to open an issue) 86 | 87 | ### Bublé 88 | Snabbdom-pragma works fine and is fully tested for [Bublé](https://buble.surge.sh/guide/). 89 | ```js 90 | buble.transform(input, { 91 | jsx: 'Snabbdom.createElement' 92 | }) 93 | ``` 94 | 95 | ### Typescript 96 | Snabbdom-pragma works fine and is fully tested and typed for [Typescript](https://www.typescriptlang.org). 97 | ```js 98 | typescript.transpileModule(input, { 99 | compilerOptions: { 100 | jsx: 'react', 101 | jsxFactory: 'Snabbdom.createElement' 102 | } 103 | }) 104 | ``` 105 | 106 | ### Babel 107 | Snabbdom-pragma works fine and is fully tested for [Babel](https://babeljs.io) with the 108 | [transform-react-jsx](https://babeljs.io/docs/plugins/transform-react-jsx/) plugin enabled. 109 | ```js 110 | babel.transform(input, { 111 | plugins: ['transform-react-jsx', { 112 | pragma: 'Snabbdom.createElement' 113 | }] 114 | }) 115 | ``` 116 | 117 | ### Traceur 118 | Snabbdom-pragma works fine and is fully tested for [Traceur](https://github.com/google/traceur-compiler). 119 | ```js 120 | traceur.compile(input, { 121 | jsx: 'Snabbdom.createElement' 122 | }) 123 | ``` 124 | 125 | ## JSX Features 126 | Thanks to your transpiler, JSX tags will be transpiled into `NotReact.createElement` function following the `React.creatElement` specifications. 127 | 128 | ### Elements 129 | As `Snabbdom.createElement` is like a straightforward mapping to `Snabbdom/h`, HTML elements will work out of the box. 130 | ```jsx 131 | /* written */ 132 | const vnode =
Hello World
133 | 134 | /* Once Transpiled */ 135 | const vnode = Snabbdom.createElement('div', null, 'Hello World') 136 | 137 | /* Similar to */ 138 | const vnode = h('div', {}, 'Hello World') 139 | ``` 140 | 141 | ### Attributes 142 | By default, attributes will be entrust to the `props` module. (see [Modules Features](#modules-object)) 143 | ```jsx 144 | /* written */ 145 | const vnode = 146 | 147 | /* Once Transpiled */ 148 | const vnode = Snabbdom.createElement('input', { type: 'text' }) 149 | 150 | /* Similar to */ 151 | const vnode = h('input', { props: { type: 'text' } }, []) 152 | ``` 153 | 154 | ### SVG 155 | SVG tags work without any configuration, but attributes will only work with the `attrs` module. 156 | ```jsx 157 | /* written */ 158 | const vnode = 159 | 160 | /* Once Transpiled */ 161 | const vnode = Snabbdom.createElement('circle', { cx: 43.5, cy: 23, r: 5 }) 162 | 163 | /* Similar to */ 164 | const vnode = h('circle', { attrs: { cx: 43.5, cy: 23, r: 5 } }, []) 165 | ``` 166 | 167 | ## Snabbdom Features 168 | In Snabbdom, functionalities is delegated to separate modules. Like `hook` (lifecycle), `on` (events), `style`, `props`, etc... 169 | Snabbdom-pragma give you two ways to use these modules. 170 | 171 | ### Modules object 172 | You can deal with modules properties with an object. 173 | ```jsx 174 | /* written */ 175 | const vnode =
176 | 177 | /* Once Transpiled */ 178 | const vnode = Snabbdom.createElement('div', { style: { color: 'red', fontWeight: 'bold' } }) 179 | 180 | /* Similar to */ 181 | const vnode = h('div', { style: { color: 'red', fontWeight: 'bold' } }, []) 182 | ``` 183 | 184 | ### Modules attribute 185 | Or by using the `MODULE-PROPERTY` attribute. 186 | ```jsx 187 | /* written */ 188 | const vnode =