Initial commit

.gitignore

@@ -0,0 +1,61 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+package-lock.json
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+public/app.js

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Leon Sorokin, John Long, Fred Daoud, Graham Dixon
+
+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:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.

lib/el.jsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2018 Leon Sorokin, John Long, Fred Daoud, Graham Dixon
+ * All rights reserved. (MIT Licensed)
+ *
+ * domvm-jsx(.jsx) - el.jsx
+ * this package supplies the el function defined in the using JSX with domvm wiki (https://github.com/domvm/domvm/wiki/JSX)
+ * @preserve https://github.com/gdixon/domvm-jsx
+ */
+
+// include domvm
+const domvm = require('domvm/dist/full/domvm.full');
+
+// jsx entry function
+let el = (...args) => {
+
+    // read the compiled jsx defintion into a defineView call when type is function
+    const type = typeof args[0];
+
+    // when the given is a func call
+    if (type === 'function') {
+        // hydrate the view data and children from the ...args
+        const view = args[0];
+        const data = args[1] || {};
+        // all children except the view and data
+        data.children = args.filter(function(arg, key) {
+
+            // not the view or the data definition
+            return (key > 1);
+        });
+
+        // define the component view
+        return domvm.defineView(view, data, data.key);
+    }
+
+    // define compiled jsx as spread
+    return domvm.defineElementSpread(...args);
+}
+
+// returns the el
+module.exports = el;

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "domvm-jsx",
+  "version": "1.0.1",
+  "description": "This package supplies the el function defined in the [Using JSX with domvm wiki](https://github.com/domvm/domvm/wiki/JSX).",
+  "keywords": [
+    "domvm",
+    "jsx"
+  ],
+  "author": "GDixon",
+  "repository": "github:gdixon/domvm-jsx",
+  "main": "lib/el.jsx",
+  "license": "MIT",
+  "dependencies": {
+    "domvm": "^3.3.3"
+  }
+}

readme.md

@@ -0,0 +1,129 @@
+# domvm-jsx
+
+ > This package supplies the el function defined in the [using JSX with domvm wiki](https://github.com/domvm/domvm/wiki/JSX).
+
+--------
+
+## 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](https://github.com/domvm/domvm/wiki/JSX).
+
+## 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)](https://github.com/leeoniya) - Author of domvm
+ - [John Long (iamjohnlong)](https://github.com/iamjohnlong)
+ - [Fred Daoud (foxdonut)](https://github.com/foxdonut)
+
+[See discussion here](https://github.com/domvm/domvm/issues/179)
+
+## License
+* [Licensed](https://github.com/gdixon/domvm-jsx/blob/master/LICENSE) under the MIT License (MIT).