Marko: Spread operator causes compile error

[fineline]

Marko Version: 4.4.28

Details

Attempting to use the ES6 spread operator to include the content of another object in a component's state produces a compiler error.

Steps to Reproduce

1. Start a project using marko-cli
2. Create a component as follows

component.js

module.exports = class {
  onCreate() {
    const innerState = {a: 1, b: 2}

    this.state = {
      ...innerState,
      c: 3
    }
  }
}

index.marko

div -- ${state.a}
div -- ${state.b}
div -- ${state.c}

1. npm start

Expected Behavior

No error

Actual Behavior

Error as follows:

/Users/me/marko-test/src/components/compound-state/component.js:6
...innerState,
^^^
SyntaxError: Unexpected token ...
at Object.exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object. (/Users/tstewart/marko-rxdb/src/components/compound-state/index.marko.js:10:23)
at Module._compile (module.js:571:32)

[mlrawlings]

This is expected since the spread operator in objects is still a Stage 3 Draft and not supported by Node. Chrome 60+ and Firefox 55+ do support it natively now.

If you want to use object spread in node and other browsers, you'll need to transpile it with babel.

---

@marko-js/core:

• Should we provide babel transpilation as part of marko-starter?
• Not the issue here, but if the component were defined in the template, it wouldn't make it past Marko's compilation step because esprima does not support draft syntaxes. So transpilation wouldn't even be an option.

[fineline]

Thanks @mlrawlings, that does make sense. I hadn't noticed the provisional status of the spread operator in object literals and that it doesn't work in Node. Pity. I'll stick to Object.assign() for now, and close this issue.

Please _don't_ add Babel transpilation to marko-starter, at least not as a default in development. Being able to debug source code as-is (with only the "wrapper" prelude added to the first code line) is a killer feature of Marko / Lasso. Source maps "kind of" work but there are always a few glitches of one sort or another. I spent ages messing with Vue and WebPack to try and get around them, whereas Marko "just works" without the need for source maps, as the code is basically what I write. Much better. Transpilation as an option on the minified prod build could be cool though.

[cie]

Hello,
NodeJS now supports the object spread operator, but Marko still gives the same error message. (Isn't it related to the JS tokenizer used in Marko?)