babel-plugin-transform-dom
babel-plugin-transform-dom provides a dom interface while writing code that will transform to document.createElement and friends when you process through Babel.
Documentation
The method you invoke on dom will be your HTML tag, so dom.span becomes <span> and dom.fake will become <fake>.
The only exception to this dom.text which will reaturen a text node.
Arguments
The order of the arguments you pass to dom.tag doesn’t matter. Here’s a list of acceptable arguments:
- Class name, as indicated by a string started with a period
- ID, as indicated by a string started with a number sign
- Text content for the tag, any string that does not start with a period or number sign
- Child elements to add to your tag. These can be passed as top level args or in as an array of args
- Tag attributes via the optiosns argument:
{ attributes: { text: "hello" } }
You can also nest dom.tag calls to create complex trees.
Alternative Invocation
Rather than calling dom.div, you can also call dom('div'). When you invoke with the tag as an argument, everything above is true except the first argument must always be the tag name. After the first argument the order of arguments do not matter.
Example
Here’s an example of creating a simple span element with a class and some text:
In
const hello = dom.div('.hello', 'Hello there!')Out
var _div;
const hello = (_div = document.createElement('div'), _div.classList.add('hello'), _div.appendChild(document.createTextNode('Hello there!')), _div);Here’s a more complex example:
In
const body = dom.body(
'.page',
dom.h1('Title', '#header'),
dom.div(
'.content',
dom.p('Paragraph 1'),
dom.p('Paragraph 2', '.small')
),
dom.aside('#sidebar', {
attributes: {
'data-affixed': '.content'
}
}, dom.span('.sidebar-content .sticky', dom.p('Sidebar')))
)
Out
var _h, _div, _p, _p2, _aside, _span, _p3;
var _body = document.createElement('body');
_body.classList.add('page');
_body.appendChild((_h = document.createElement('h1'), _h.appendChild(document.createTextNode('Title')), _h.setAttribute('id', 'header'), _h));
_body.appendChild((_div = document.createElement('div'), _div.classList.add('content'), _div.appendChild((_p = document.createElement('p'), _p.appendChild(document.createTextNode('Paragraph 1')), _p)), _div.appendChild((_p2 = document.createElement('p'), _p2.appendChild(document.createTextNode('Paragraph 2')), _p2.classList.add('small'), _p2)), _div));
_body.appendChild((_aside = document.createElement('aside'), _aside.setAttribute('id', 'sidebar'), _aside.setAttribute('data-affixed', '.content'), _aside.appendChild((_span = document.createElement('span'), _span.classList.add('sidebar-content', 'sticky'), _span.appendChild((_p3 = document.createElement('p'), _p3.appendChild(document.createTextNode('Sidebar')), _p3)), _span)), _aside));
const body = _body;JSX
You can also use babel-plugin-transform-dom to compile JSX! To enable control over JSX, just use dom.jsx as the JSX pragma and make sure to add babel-plugin-transform-dom after jsx in your plugins list:
.babelrc
{
"plugins": [
[ "transform-react-jsx", { "pragma": "dom.jsx" } ],
"transform-dom"
]
}Example
In
var profile = <div>
<img src="avatar.png" class="profile" />
<h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;Out
var _img, _h, _div;
var profile = (_div = document.createElement("div"), _div.appendChild((_img = document.createElement("img"), _img.setAttribute("src", "avatar.png"), _img.setAttribute("class", "profile"), _img)), _div.appendChild((_h = document.createElement("h3"), _h.appendChild(document.createTextNode([user.firstName, user.lastName].join(' '))), _h)), _div);License
babel-plugin-transform-dom was created by Shaun Harrison and is made available under the MIT license.
