Latest stable version: 1.0.0-rc.2
Plugin for babel 6.x to enable tagged template compilation for diffHTML
This plugin transforms tagged template strings in your projects to diffHTML Virtual Tree's.
Note! This plugin has been built for use in Babel 6.x environments, and will not work with Babel 5.x ( deprecated) or older versions.*
npm i --save-dev transform-tagged-diffhtml
Add the plugin to your package.json
and update the plugin section in your
.babelrc
file. Or if your Babel settings are located inside the
package.json
- update the plugin section there.
You will then need to tag your diffHTML templates with the html
function,
examples below. This will only optimize tagged templates, allowing you to
use the diffHTML runtime build avoiding runtime HTML parsing.
Example on a .babelrc
file that will work with diffHTML:
{
"plugins": ["transform-tagged-diffhtml"]
}
Write a View view.js
:
// Render a div with dynamic children and onclick
function renderComponent(time) {
diff.innerHTML(document.body, html`
<button onclick=${e => renderComponent(new Date())}>Get time</button>
<output>${time}</output>
`);
}
renderComponent(new Date());
Then compile it:
babel view.js -o view.es5.js
You can override three identifiers that are used within the transform:
- tagName - The tagged template function name default is
html
. - createElement - The create element function default is
diff.createElement
- createAttribute - The create attribute function default is
diff.createAttribute
Specifying the options in your .babelrc
:
{
plugins: [
["transform-tagged-diffhtml", {
"tagName": "diff.html",
"createElement": "createEl",
"createAttribute": "createAttr"
}]
]
}
How your source would look reflecting the options:
import * as diff from 'diffhtml';
const { createElement as createEl, createAttribute as createAttr } = diff;
diff.html`
<div></div>
`;