DEPRECATED

This plugin was merged with nanohtml. Please use that instead!

1// .babelrc
2{
3  "plugins": ["nanohtml"]
4}

babel-plugin-yo-yoify

Like yo-yoify, but as a Babel plugin. Transform yo-yo or bel template strings into raw document calls.

Installation

1npm install --save-dev babel-plugin-yo-yoify
2# And:
3npm install --save yo-yoify

yo-yoify is used in the compiled output of babel-plugin-yo-yoify, so it must be installed next to it.

Example

Using babel --plugins yo-yoify | prettier --stdin:

In

1import html from 'bel'
2
3const title = 'yo-yoify'
4const header = html`
5  <header id="page-header">
6    <h1>${title}</h1>
7    <button onclick=${event => alert('Hello world!')}>Click here</button>
8  </header>
9`

Out

1var _h, _button, _pageHeader;
2
3var _appendChild = require('yo-yoify/lib/appendChild');
4
5const title = 'yo-yoify';
6const header = (_pageHeader = document.createElement(
7  'header'
8), _pageHeader.setAttribute('id', 'page-header'), _appendChild(_pageHeader, [
9  '\n    ',
10  (_h = document.createElement('h1'), _appendChild(_h, [title]), _h),
11  '\n    ',
12  (_button = document.createElement('button'), _button.onclick = event =>
13    alert('Hello world!'), _button.textContent = 'Click here', _button),
14  '\n  '
15]), _pageHeader);

Usage

Without options:

1// .babelrc
2{
3  "plugins": [
4    "yo-yoify"
5  ]
6}

With options:

1// .babelrc
2{
3  "plugins": [
4    ["yo-yoify", {
5      "useImport": true
6    }]
7  ]
8}

bel v5

When used with bel v5.1.3 or up, it's recommended to tell babel-plugin-yo-yoify to use bel's exported appendChild function. This way, the transformed output will always use the same appending and white space handling logic as the original source.

1{
2  "plugins": [
3    ["yo-yoify", {
4      "appendChildModule": "bel/appendChild"
5    }]
6  ]
7}

bel versions v5.1.2 and below do not export the appendChild function--for those, the default "yo-yoify/lib/appendChild" function is used instead. This function may have different behaviour from the bel version being used, though.

Options

• useImport - Set to true to use import statements for injected modules. By default, require is used. Enable this if you're using Rollup.
• appendChildModule - Import path to a module that contains an appendChild function. Set this to "bel/appendChild" when using bel v5.1.3 or up! Defaults to "yo-yoify/lib/appendChild".

License

ISC