Snabbdom Edge
This package includes two functions, which useful for client-server applications built with snabbdom. Like the snabbdom this library is focused on simplicity, modularity, powerful features and performance.
Modules
This package implements next snabbdom modules:
- Element attributes (snabbdom-edge/component/attributes.js)
- Embedded styles (snabbdom-edge/component/style.js)
- Toggleable classes (snabbdom-edge/component/class.js)
- Dataset attributes (snabbdom-edge/component/dataset.js)
The element properties module (snabbdom-edge/component/props.js) does not implemented here because properties exists exclusively on client-side.
Write HTML
On the server side you usually want produce HTML output from virtual nodes.
The writeHTML
function does this thing for you.
The supported features includes attributes, style and class.
The another way to do this is using snabbdom-to-html
package.
This package is a simple and clean alternative for it.
Typical usage:
TypeScript:
;;;;; // Init HTML render function with all available modules; // in request handler we generate virtual DOM; // write HTML to response body directly to use lesser RAMwriteHTMLvnode, response; // OR generate HTML string to write;response.writehtml;
JavaScript:
// Init HTML render function with all available modulesvar writeHTML = ; // in request handler we generate virtual DOMvar vnode = ; // write HTML to response body directly to use lesser RAM; // OR generate HTML string to writevar html = ;response;
Read DOM
On the client side you may read initial DOM before first patch
when initializing your application.
The readDOM
function does this thing.
This piece of code has been ported from snabbdom-virtualize
with key differences:
- Event listeners has been removed because this is useless for our purposes.
- Decoding HTML entities using
html-entities
package instead of DOM API calls. - Added support of the single text child in non-text vnode.
Usage example:
TypeScript:
;;;;; // Init DOM reader function with all available modules; //before starting application on client// we would like to read initial DOM // now we can read global DOM node (i.e. <html>); // OR we can read only <body> as soon; // render the first virtual DOM; // initiate the first patchpatch_vnode, vnode;
JavaScript:
// Init DOM reader function with all available modulesvar readDOM = ; //before starting application on client// we would like to read initial DOM // now we can read global DOM node (i.e. <html>)var _vnode = ; // OR we can read only <body> as soonvar _vnode = ; // render the first virtual DOMvar vnode = ; // initiate the first patch;
Attributes module options
As you seen above the attributes module instantiated by calling as function. It implemented so in order to have possibility of transferring options to it. Available options is below:
- Use style: true to read style attribute to
attrs
field. - Use class: true to read class attribute to
attrs
field. - Use dataset: true to read data- attributes to
attrs
field.
TypeScript:
;; // Init DOM reader function with all available modules;
JavaScript:
// Init DOM reader function with all available modules;