This repository has been archived by the owner. It is now read-only.
Babel plugin to transform yo-yo or bel template strings into pure and fast document calls.
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
.travis.yml
LICENSE
README.md
index.js
package.json

README.md

DEPRECATED

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

// .babelrc
{
  "plugins": ["nanohtml"]
}

babel-plugin-yo-yoify

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

Installation

npm install --save-dev babel-plugin-yo-yoify
# And:
npm 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

import html from 'bel'

const title = 'yo-yoify'
const header = html`
  <header id="page-header">
    <h1>${title}</h1>
    <button onclick=${event => alert('Hello world!')}>Click here</button>
  </header>
`

Out

var _h, _button, _pageHeader;

var _appendChild = require('yo-yoify/lib/appendChild');

const title = 'yo-yoify';
const header = (_pageHeader = document.createElement(
  'header'
), _pageHeader.setAttribute('id', 'page-header'), _appendChild(_pageHeader, [
  '\n    ',
  (_h = document.createElement('h1'), _appendChild(_h, [title]), _h),
  '\n    ',
  (_button = document.createElement('button'), _button.onclick = event =>
    alert('Hello world!'), _button.textContent = 'Click here', _button),
  '\n  '
]), _pageHeader);

Usage

Without options:

// .babelrc
{
  "plugins": [
    "yo-yoify"
  ]
}

With options:

// .babelrc
{
  "plugins": [
    ["yo-yoify", {
      "useImport": true
    }]
  ]
}

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.

{
  "plugins": [
    ["yo-yoify", {
      "appendChildModule": "bel/appendChild"
    }]
  ]
}

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