vdom-parser
Advanced tools
A client-side DOM to vdom parser based on DOMParser API, compatible with virtual-dom
A client-side DOM to vdom parser based on DOMParser API, compatible with virtual-dom.
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.
This means we need a solid implementation of html to vdom parser, while there are existing implementations, we would like a solution that's well-tested and make use of existing browser API.
Hence vdom-parser, a small module that bridges the gap between server-side and client-side rendering.
virtual-dom major version (v2 currently).phantomjs still lacks HTML support in DOMParser, so our travis coverage remains incomplete).document.body to work, but anything else will throw Invalid target element for this operation. Maybe better to cut the mustard and use server-side rendering.virtual-dom diffing or patching, but don't expect properties['xlink:href'] to exists.virtual-dom don't have to remove or mutate them.npm install vdom-parser --save
// server-side render
var parser = require('vdom-parser');
var nodeCache = document.body;
var vdomCache = parser(nodeCache);
// client-side render
var vdom = h('div', 'hello');
// diff and patch
var patches = diff(vdomCache, vdom);
patch(nodeCache, patches);
See test cases for more examples.
Returns a VNode or VText, see virtual-dom documentation.
Should be a DOM Element or HTML String.
Note: for string input, <html>, <body>, <head> will return empty VText as we only support nodes under document.body or document.head. DOM element input doesn't have this limit.
Optional attribute name (eg. 'id' or 'data-id') for VNode key lookup, exposing VNode key as html attribute to minimize client-side patching.
MIT
Thanks to marcelklehr/vdom-virtualize and TimBeyer/html-to-vdom for their work on this topic.
v1.4.1
FAQs
A client-side DOM to vdom parser based on DOMParser API, compatible with virtual-dom
The npm package vdom-parser receives a total of 115 weekly downloads. As such, vdom-parser popularity was classified as not popular.
We found that vdom-parser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.