babel-plugin-yo-yoify

Babel plugin to transform yo-yo or bel template strings into pure and fast document calls.

This plugin was merged with nanohtml. Please use nanohtml instead.
Last updated 3 years ago by goto-bus-stop .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install babel-plugin-yo-yoify 
SYNC missed versions from official npm registry.

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

Current Tags

  • 2.0.0                                ...           latest (3 years ago)

17 Versions

  • 2.0.0 [deprecated]           ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 0.7.0                                ...           3 years ago
  • 0.6.0                                ...           4 years ago
  • 0.5.0                                ...           4 years ago
  • 0.4.1                                ...           4 years ago
  • 0.4.0                                ...           4 years ago
  • 0.3.4                                ...           4 years ago
  • 0.3.3                                ...           4 years ago
  • 0.3.2                                ...           4 years ago
  • 0.3.1                                ...           4 years ago
  • 0.3.0                                ...           4 years ago
  • 0.2.0                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 4
This Month 55
Last Day 3
Last Week 25
Last Month 103
Dependencies (7)
Dev Dependencies (7)

Copyright 2014 - 2017 © taobao.org |