https://github.com/goto-bus-stop/babel-plugin-yo-yoify

Babel plugin to transform yo-yo or bel template strings into pure and fast document calls.
https://github.com/goto-bus-stop/babel-plugin-yo-yoify

babel-plugin bel choo template-literals yo-yo yo-yoify

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/goto-bus-stop/babel-plugin-yo-yoify
• Owner: goto-bus-stop
• License: isc
• Archived: true
• Created: 2017-01-29T20:43:51.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-23T08:33:14.000Z (over 6 years ago)
• Last Synced: 2024-09-24T08:02:16.314Z (about 2 months ago)
• Topics: babel-plugin, bel, choo, template-literals, yo-yo, yo-yoify
• Language: JavaScript
• Homepage: https://npmjs.com/package/babel-plugin-yo-yoify
• Size: 114 KB
• Stars: 9
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# DEPRECATED

This plugin was merged with [nanohtml](https://github.com/choojs/nanohtml).

Please use that instead!

```js

// .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

```bash

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**

```js

import html from 'bel'

const title = 'yo-yoify'

const header = html`

  

    
${title}

     alert('Hello world!')}>Click here

  

`

```


**Out**

```js

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:

```js

// .babelrc

{

  "plugins": [

    "yo-yoify"

  ]

}

```

With options:

```js

// .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.

```js

{

  "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][]

[yo-yoify]: https://github.com/shama/yo-yoify

[yo-yo]: https://github.com/maxogden/yo-yo

[bel]: https://github.com/shama/bel

[ISC]: ./LICENSE