bel`
  <div>
    ${i++}
    <p>${i++}</p>
    ${i++}
  </div>
`

with babel-plugin-yo-yoify renders

<div>
  1
  <p>0</p>
  2
</div>

This happens on NPM v2, when used with browserify/babelify, my guess is it’s because of nested dependencies in NPM v2 vs flat in v3. Seems to be fixed by adding yo-yoify as devDependency alongside babel-plugin-yo-yoify, in the project where its used. Should we add a note to docs, and a peerDependency maybe? Please see novemberborn/babel-plugin-es6-promise#19.

Right now dynamic attribute names don't work with this transform.

For example:

const handler = isTouchDevice ? 'ontouchstart' : 'onmousedown'

return html`
  <div ${handler}=${() => console.log('hello')}></div>
`

Thanks for your work, love this transform! Exactly what I needed for http://github.com/transloadit/uppy. I recently created an issue asking if using yo-yoify as a Babel transform was possible choojs/nanohtml#65, then made yo-yoify-standalone, which just wraps original yo-yoify and pipes the parsed version out. And then stumbled upon your babel-plugin-yo-yoify :)

The issue mentioned here, which is resolved by original yo-yoify browserify transform, however, remains: I get TypeError: Function.caller used to retrieve strict caller (in Safari) when running a bundle where onload has been used on an element.

I’ve noticed you are parsing onload attributes somehow, but can’t figure out what how exactly yo-yoify “transforms any Function.caller into plain strings”.

Just tried to use the module and spent some time to figure out why stuff is not working.

• http://blog.npmjs.org/post/110924823920/npm-weekly-5
• https://codingwithspike.wordpress.com/2016/01/21/dealing-with-the-deprecation-of-peerdependencies-in-npm-3/

Would be nice to have another way - maybe just add them as "dependencies" so they get auto-installed, because I need them anyway:

• either because i'm using e.g. yo-yo directly in my current module and run babel(ify
• or because browserify is executing the listed transforms (e.g. babelify with this plugin specified) on a dependency

Or maybe I should just save them as "dependencies" on my current project?

https://github.com/shama/on-load

It does not seem to handle boolean attributes how I would expect.

example:

bel`<input checked="${true}" />`

results in:

<input checked="true" />

When it comes to processing SVGs yo-yoify the output is empty in the browser.

Svg tag is there physically but its being done incorrectly (I presume so) as it results in blank boxes.

Right now

bel`
  <div>
    Contents
  </div>
`

generates something like

_div = document.createElement('div'), _div.textContent = '\n    Contents\n  '

But since it's semantically the same as

bel`<div>Contents</div>`

It could generate

_div = document.createElement('div'), _div.textContent = 'Contents'

instead.

Sync it with choojs/nanohtml@4eda35d

document.body.appendChild(bel`
  <h1>abc</h1>
`)

is currently:

document.body.appendChild(function () {
  var _h1 = document.createElement('h1')
  _h1.textContent = 'abc'
  return _h1
}())

but could be:

var _h1 = document.createElement('h1')
_h1.textContent = 'abc'
document.body.appendChild(_h1)

Despite using the { "useImport": true } option in my .babelrc, a require() statement is added instead of an import.

Did this functionality get lost somewhere along the way?

Reproduction

Source: https://glitch.com/edit/#!/spring-tune?path=server.js
Output: https://spring-tune.glitch.me/

Thanks in advance.