choojs / choo

:steam_locomotive::train: - sturdy 4kb frontend framework
https://choo.io/
MIT License
6.78k stars 595 forks source link

Magic in the emitter callback? #694

Open crcdng opened 5 years ago

crcdng commented 5 years ago

Expected behavior

choo should accept valid JS code in the emitter callback.

Actual behavior

choo throws

"Unexpected token: punc ()) while parsing file: /app/index.js"

when an ES6 arrow function is used the emitter callback.

Steps to reproduce behavior

This is working code (adapted from the intro tutorial, running on glitch)

const choo = require('choo');
const html = require('choo/html');
const main = require('./templates/main.js');

const app = choo();

app.use(function (state, emitter) {
  state.animals = [
    { type: 'lion', x: 200, y: 100 },
    { type: 'crocodile', x: 50, y: 300 }
  ];

  emitter.on('addAnimal', function () {
    const obj = { type: 'lion', x: 100, y: 200 };
    state.animals.push(obj);
    emitter.emit('render');
  });

});

app.route('/', main);
app.mount('div');

When I replace function ()with () =>

emitter.on('addAnimal', () => {
    const obj = { type: 'lion', x: 100, y: 200 };
    state.animals.push(obj);
    emitter.emit('render');
  });

choo throws the above error. Some kind of magic going on?

tornqvist commented 5 years ago

That's odd. I tried to reproduce the error but couldn't. Have I missed something here? Source: https://glitch.com/edit/#!/cliff-peridot https://cliff-peridot.glitch.me

I'm using Bankai here to bundle the app, what are you using? Or are you maybe using an old version of Node which doesn't support arrow functions?

crcdng commented 5 years ago

I have remixed the starter tutorial linked from https://handbook.choo.io/your-first-choo-app/ keeping the original configuration. I just specified node version 10 just to be sure. If I copy in your code it breaks as well.

https://glitch.com/~magical-apple

https://glitch.com/edit/#!/magical-apple?path=index.js:1:0

Anything I could be missing?

goto-bus-stop commented 5 years ago

It uses an old version of uglifyify that doesn't support arrow functions. Update to v5 and it works, see remix here: https://glitch.com/edit/#!/cedar-manuscript?path=package.json:14:0

crcdng commented 5 years ago

Confirmed. Thanks a lot. @tornqvist that should be updated in the https://glitch.com/edit/#!/project/choo-animals-starter as well.