Skip to content

Commit 1e8ff9d

Browse files
author
David Frank
committed
init repo
1 parent c084e31 commit 1e8ff9d

9 files changed

+155
-2
lines changed

.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,9 @@ build/Release
2525
# Dependency directory
2626
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
2727
node_modules
28+
29+
# OS files
30+
.DS_Store
31+
32+
# Coveralls token files
33+
.coveralls.yml

.travis.yml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
language: node_js
2+
node_js:
3+
- "0.12"
4+
- "iojs"
5+
before_install: npm install -g npm
6+
script: npm run coverage

CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
Changelog
3+
=========
4+
5+
6+
# 1.x release
7+
8+
## v1.0.0
9+
10+
- Major: initial public release

LICENSE LICENSE.md

File renamed without changes.

README.md

+78-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,78 @@
1-
# vdom-parser
2-
A dom to vdom parser based on DOMParser
1+
2+
vdom-parser
3+
===========
4+
5+
[![npm version][npm-image]][npm-url]
6+
[![build status][travis-image]][travis-url]
7+
[![coverage status][coveralls-image]][coveralls-url]
8+
9+
A client-side DOM to vdom parser based on DOMParser API, compatible with [virtual-dom](https://github.com/Matt-Esch/virtual-dom).
10+
11+
12+
# Motivation
13+
14+
We use `virtual-dom` with progressive enhancement in mind: we use server-side rendering to achieve good first-page performance then re-attach vdom rendering client-side.
15+
16+
This means we need a solid implementation of html to vdom parser, while there are [existing implementations](https://github.com/Matt-Esch/virtual-dom/wiki#html-to-vdom), we would like a solution that's well-tested and make use of existing browser API.
17+
18+
Hence `vdom-parser`, a small module that bridges the gap between server-side and client-side rendering.
19+
20+
21+
# Features
22+
23+
- Use [DOMParser](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser) for better performance and much smaller filesize.
24+
- Peer dependent on `virtual-dom` major version to prevent version lockdown.
25+
- Test cases to cover common usage such as inline svg.
26+
27+
28+
# Install
29+
30+
`npm install vdom-parser --save`
31+
32+
33+
# Usage
34+
35+
```javascript
36+
// server-side render
37+
var parser = require('vdom-parser');
38+
var nodeCache = document.body;
39+
var vdomCache = parser(nodeCache);
40+
41+
// client-side render
42+
var vdom = h('div', 'hello');
43+
44+
// diff and patch
45+
var patches = diff(vdomCache, vdom);
46+
patch(nodeCache, patches);
47+
```
48+
49+
See [test cases](https://github.com/bitinn/vdom-parser/blob/master/test/test.js) for more examples.
50+
51+
52+
# API
53+
54+
## parser(node)
55+
56+
Returns a `VNode`
57+
58+
### node
59+
60+
Should be a DOM Element
61+
62+
63+
# License
64+
65+
MIT
66+
67+
68+
# Acknowledgement
69+
70+
Thanks to [marcelklehr/vdom-virtualize](https://github.com/marcelklehr/vdom-virtualize) and [TimBeyer/html-to-vdom](https://github.com/TimBeyer/html-to-vdom) for providing reference on this topic.
71+
72+
73+
[npm-image]: https://img.shields.io/npm/v/vdom-parser.svg?style=flat-square
74+
[npm-url]: https://www.npmjs.com/package/vdom-parser
75+
[travis-image]: https://img.shields.io/travis/bitinn/vdom-parser.svg?style=flat-square
76+
[travis-url]: https://travis-ci.org/bitinn/vdom-parser
77+
[coveralls-image]: https://img.shields.io/coveralls/bitinn/vdom-parser.svg?style=flat-square
78+
[coveralls-url]: https://coveralls.io/r/bitinn/vdom-parser

index.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
/**
3+
* index.js
4+
*
5+
* A client-side DOM to vdom parser based on DOMParser API
6+
*/
7+
8+
var VNode = require('virtual-dom/VNode');
9+
var VText = require('virtual-dom/VText');
10+
11+
module.exports = parser;
12+
13+
/**
14+
* DOM to vdom parser
15+
*
16+
* @param Object el DOM element
17+
* @return Object VNode or VText
18+
*/
19+
function parser(el) {
20+
21+
}

package.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "vdom-parser",
3+
"version": "1.0.0",
4+
"description": "A client-side DOM to vdom parser based on DOMParser API, compatible with virtual-dom",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "mocha-phantomjs test/index.html"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/bitinn/vdom-parser.git"
12+
},
13+
"keywords": [
14+
"dom",
15+
"vdom",
16+
"parser",
17+
"virtual-dom"
18+
],
19+
"author": "David Frank",
20+
"license": "MIT",
21+
"bugs": {
22+
"url": "https://github.com/bitinn/vdom-parser/issues"
23+
},
24+
"homepage": "https://github.com/bitinn/vdom-parser#readme",
25+
"peerDependencies": {
26+
"virtual-dom": "2.x"
27+
},
28+
"devDependencies": {
29+
"chai": "^3.0.0",
30+
"mocha": "^2.2.5",
31+
"mocha-phantomjs": "^3.5.3",
32+
"phantomjs": "^1.9.17"
33+
}
34+
}

test/index.html

Whitespace-only changes.

test/test.js

Whitespace-only changes.

0 commit comments

Comments
 (0)