shama / on-load

On load/unload events for DOM elements using a MutationObserver
113 stars 19 forks source link

`onload` is fired continuously in template strings with reducers when compiled or run with babel or es2020 #17

Open artcommacode opened 7 years ago

artcommacode commented 7 years ago

Here's my minimal reproduction where init is continuously logged to the console:

const choo = require('choo')
const html = require('choo/html')
const app = choo()

app.model({
  reducers: {
    init: () => console.log('init')
  }
})

const view = (state, prev, send) => {
  return html`<div onload=${() => send('init', [])}></div>`
}

app.router([
  ['/', view]
])

const tree = app.start()
document.body.appendChild(tree)

which compiles to:

'use strict';

var _templateObject = _taggedTemplateLiteral(['<div onload=', '></div>'], ['<div onload=', '></div>']);

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var choo = require('choo');
var html = require('choo/html');
var app = choo();

app.model({
  reducers: {
    init: function init() {
      return console.log('init');
    }
  }
});

var view = function view(state, prev, send) {
  return html(_templateObject, function () {
    return send('init', []);
  });
};

app.router([['/', view]]);

var tree = app.start();
document.body.appendChild(tree);

I've opened the issue here at @yoshuawuyts request. A runnable example can be found at https://github.com/artcommacode/choo-onload-example, please let me know if you need any further information.