Skip to content

Commit 769ab0a

Browse files
gdixongdixon
committed
Initial commit
0 parents  commit 769ab0a

File tree

5 files changed

+267
-0
lines changed

5 files changed

+267
-0
lines changed

‎.gitignore‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
8+
# Runtime data
9+
pids
10+
*.pid
11+
*.seed
12+
*.pid.lock
13+
14+
# Directory for instrumented libs generated by jscoverage/JSCover
15+
lib-cov
16+
17+
# Coverage directory used by tools like istanbul
18+
coverage
19+
20+
# nyc test coverage
21+
.nyc_output
22+
23+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24+
.grunt
25+
26+
# Bower dependency directory (https://bower.io/)
27+
bower_components
28+
29+
# node-waf configuration
30+
.lock-wscript
31+
32+
# Compiled binary addons (http://nodejs.org/api/addons.html)
33+
build/Release
34+
35+
# Dependency directories
36+
node_modules/
37+
jspm_packages/
38+
package-lock.json
39+
40+
# Typescript v1 declaration files
41+
typings/
42+
43+
# Optional npm cache directory
44+
.npm
45+
46+
# Optional eslint cache
47+
.eslintcache
48+
49+
# Optional REPL history
50+
.node_repl_history
51+
52+
# Output of 'npm pack'
53+
*.tgz
54+
55+
# Yarn Integrity file
56+
.yarn-integrity
57+
58+
# dotenv environment variables file
59+
.env
60+
61+
public/app.js

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2018 Leon Sorokin, John Long, Fred Daoud, Graham Dixon
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.

‎lib/el.jsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/**
2+
* Copyright (c) 2018 Leon Sorokin, John Long, Fred Daoud, Graham Dixon
3+
* All rights reserved. (MIT Licensed)
4+
*
5+
* domvm-jsx(.jsx) - el.jsx
6+
* this package supplies the el function defined in the using JSX with domvm wiki (https://github.com/domvm/domvm/wiki/JSX)
7+
* @preserve https://github.com/gdixon/domvm-jsx
8+
*/
9+
10+
// include domvm
11+
const domvm = require('domvm/dist/full/domvm.full');
12+
13+
// jsx entry function
14+
let el = (...args) => {
15+
16+
// read the compiled jsx defintion into a defineView call when type is function
17+
const type = typeof args[0];
18+
19+
// when the given is a func call
20+
if (type === 'function') {
21+
// hydrate the view data and children from the ...args
22+
const view = args[0];
23+
const data = args[1] || {};
24+
// all children except the view and data
25+
data.children = args.filter(function(arg, key) {
26+
27+
// not the view or the data definition
28+
return (key > 1);
29+
});
30+
31+
// define the component view
32+
return domvm.defineView(view, data, data.key);
33+
}
34+
35+
// define compiled jsx as spread
36+
return domvm.defineElementSpread(...args);
37+
}
38+
39+
// returns the el
40+
module.exports = el;

‎package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "domvm-jsx",
3+
"version": "1.0.1",
4+
"description": "This package supplies the el function defined in the [Using JSX with domvm wiki](https://github.com/domvm/domvm/wiki/JSX).",
5+
"keywords": [
6+
"domvm",
7+
"jsx"
8+
],
9+
"author": "GDixon",
10+
"repository": "github:gdixon/domvm-jsx",
11+
"main": "lib/el.jsx",
12+
"license": "MIT",
13+
"dependencies": {
14+
"domvm": "^3.3.3"
15+
}
16+
}

‎readme.md‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
# domvm-jsx
2+
3+
> This package supplies the el function defined in the [using JSX with domvm wiki](https://github.com/domvm/domvm/wiki/JSX).
4+
5+
--------
6+
7+
## Using domvm and JSX
8+
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).
9+
10+
## Quick start
11+
12+
- install via npm/yarn
13+
```
14+
npm install domvm-jsx --save
15+
```
16+
17+
## Combining domvm and JSX with webpack and babel
18+
19+
- package.json
20+
```
21+
...
22+
23+
"devDependencies": {
24+
"webpack": "^3.8.1",
25+
"babel-core": "^6.26.0",
26+
"babel-loader": "^7.1.2",
27+
"babel-preset-env": "^1.6.1",
28+
"babel-plugin-transform-react-jsx": "^6.24.1"
29+
},
30+
"dependencies": {
31+
"domvm": "^3.3.3",
32+
"domvm-jsx": "^1.0.0"
33+
}
34+
35+
...
36+
```
37+
- webpack.config.js
38+
```
39+
...
40+
41+
module: {
42+
loaders: [
43+
{
44+
test: /\.(jsx|js)$/,
45+
loader: ['babel-loader']
46+
}
47+
]
48+
}
49+
50+
...
51+
```
52+
- babel.rc
53+
```
54+
{
55+
"presets": [
56+
"env"
57+
],
58+
"plugins": [
59+
[
60+
"transform-react-jsx",
61+
{
62+
"pragma": "el"
63+
}
64+
]
65+
]
66+
}
67+
```
68+
- your-project-file.js
69+
```
70+
...
71+
72+
// jsx entry function
73+
const el = require('domvm-jsx');
74+
75+
// define a component to be included via JSX (*note that components must start with a capital to differentiate them from element tags)
76+
const Component = (vm) => {
77+
78+
return (vm) => {
79+
80+
return (
81+
<div>{vm.data.step}{vm.data.children}</div>
82+
);
83+
};
84+
};
85+
86+
// create a view using JSX and bind component
87+
const view = function (vm) {
88+
let step = 0;
89+
90+
setInterval(() => {
91+
step = step +1;
92+
vm.redraw();
93+
}, 1000);
94+
95+
return function() {
96+
97+
/* has own content */
98+
return (
99+
<div>
100+
{/* includes the component as a child */}
101+
<Component
102+
name='foo'
103+
step={step}
104+
>
105+
<div>I'm a child</div>
106+
</div>
107+
);
108+
};
109+
};
110+
111+
// create a vm from the view
112+
const vm = domvm.createView(view);
113+
114+
// mount to the dom
115+
vm.mount(document.getElementById('root'));
116+
117+
...
118+
119+
```
120+
121+
## Acknowledgements
122+
- [Leon Sorokin (leeoniya)](https://github.com/leeoniya) - Author of domvm
123+
- [John Long (iamjohnlong)](https://github.com/iamjohnlong)
124+
- [Fred Daoud (foxdonut)](https://github.com/foxdonut)
125+
126+
[See discussion here](https://github.com/domvm/domvm/issues/179)
127+
128+
## License
129+
* [Licensed](https://github.com/gdixon/domvm-jsx/blob/master/LICENSE) under the MIT License (MIT).

0 commit comments

Comments
 (0)