README
domvm-jsx
This package supplies the el function defined in the using JSX with domvm wiki.
Using domvm and JSX
While not all of domvm's features can be accommodated by JSX syntax, it's possible to cover a fairly large subset via a defineElementSpread pragma. Please refer to demos and examples in the JSX wiki.
Quick start
- install via npm/yarn
npm install domvm-jsx --save
Combining domvm and JSX with webpack and babel
- package.json
... "devDependencies": { "webpack": "^3.8.1", "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.1", "babel-plugin-transform-react-jsx": "^6.24.1" }, "dependencies": { "domvm": "^3.3.3", "domvm-jsx": "^1.0.0" } ...
- webpack.config.js
... module: { loaders: [ { test: /\.(jsx|js)$/, loader: ['babel-loader'] } ] } ...
- babel.rc
{ "presets": [ "env" ], "plugins": [ [ "transform-react-jsx", { "pragma": "el" } ] ] }
- your-project-file.js
... // jsx entry function const el = require('domvm-jsx'); // define a component to be included via JSX (*note that components must start with a capital to differentiate them from element tags) const Component = (vm) => { return (vm) => { return ( <div>{vm.data.step}{vm.data.children}</div> ); }; }; // create a view using JSX and bind component const view = function (vm) { let step = 0; setInterval(() => { step = step +1; vm.redraw(); }, 1000); return function() { /* has own content */ return ( <div> {/* includes the component as a child */} <Component name='foo' step={step} > <div>I'm a child</div> </div> ); }; }; // create a vm from the view const vm = domvm.createView(view); // mount to the dom vm.mount(document.getElementById('root')); ...
Acknowledgements
- Leon Sorokin (leeoniya) - Author of domvm
- John Long (iamjohnlong)
- Fred Daoud (foxdonut)
License
- Licensed under the MIT License (MIT).