choo icon indicating copy to clipboard operation
choo copied to clipboard

Magic in the emitter callback?

Open crcdng opened this issue 5 years ago • 4 comments

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?

crcdng avatar Mar 20 '19 23:03 crcdng

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?

tornqvist avatar Mar 21 '19 09:03 tornqvist

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?

crcdng avatar Mar 21 '19 12:03 crcdng

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

goto-bus-stop avatar Mar 21 '19 13:03 goto-bus-stop

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

crcdng avatar Mar 21 '19 14:03 crcdng