Transpiling only modules import/export #477

backspaces · 2016-02-28T21:08:07Z

This is likely a documentation issue: I would like to configure es6-module-loader so that traceur or babel (<version 6.0, right?) is configured to only transpile modules (import/export). This relates to #463 and #465

This is due to Canary being 96% es6 complete, needing no transpilation, and I would like to standard my use of modules to the <script type="module"> style due to its being the likely first native module loading by browsers.

I've tried turning off all the obvious traceur options, below, but it failed. Is there any way I can set up the traceur or babel options to be modules-only?

System.traceurOptions = { arrowFunctions: false, blockBinding: false, classes: false, computedPropertyNames: false, defaultParameters: false, destructuring: false, forOf: false, generators: false, numericLiterals: false, propertyMethods: false, propertyNameShorthand: false, restParameters: false, spread: false, symbols: false, templateLiterals: false, unicodeEscapeSequences: false, unicodeExpressions: false }

The text was updated successfully, but these errors were encountered:

guybedford · 2016-03-03T14:46:13Z

Turning off all the Traceur options like in the above should work actually. Can you share the error message. Otherwise though #463 is exactly tracking this sort of a change in this project.

backspaces · 2016-03-05T20:03:20Z

Here's a test:

I Created a modload/ dir; cd'd there
I npm installed both es6-module-loader and traceur
I took the demo dir in the es6-module-loader repo and put it in modload
Created a lib/dir with symlinks to the traceur and es6-module-loader libraries
Install the traceur options above.

It works when the traceur options are commented out. When I use the options, I get:
es6-module-loader-dev.js:7 Uncaught MultipleErrors: Error loading undefined
<Anonymous Module 1>:5:5: Unexpected reserved word const
<Anonymous Module 1>:5:11: Semi-colon expected
<Anonymous Module 1>:8:5: Unexpected reserved word const

The modload dir is available in either of these.
http://backspaces.net/temp/modload.tar.gz
http://backspaces.net/temp/modload.zip

The working version (no options) is here:
http://backspaces.net/temp/modload/demo/demo.html

guybedford · 2016-03-06T09:53:36Z

Perhaps you're using an 'export const x' feature or similar? This would
need to be rewritten to 'export car x' for es5 compatibility.
On Sat, 05 Mar 2016 at 22:03, Owen Densmore [email protected]
wrote:

Here's a test:

I Created a modload/ dir; cd'd there

I npm installed both es6-module-loader and traceur

I took the demo dir in the es6-module-loader repo and put it in
modload

Created a lib/dir with symlinks to the traceur and es6-module-loader
libraries

Install the traceur options above.

It works when the traceur options are commented out. When I use the
options, I get:
es6-module-loader-dev.js:7 Uncaught MultipleErrors: Error loading undefined
:5:5: Unexpected reserved word const
:5:11: Semi-colon expected
:8:5: Unexpected reserved word const

The modload dir is available in either of these.
http://backspaces.net/temp/modload.tar.gz
http://backspaces.net/temp/modload.zip

The working version (no options) is here:
http://backspaces.net/temp/modload/demo/demo.html

—
Reply to this email directly or view it on GitHub
#477 (comment)
.

backspaces · 2016-03-07T17:20:52Z

Actually I'm using the demo from this repo, but without the html (i.e. a blank page with just a script that uses console), and importing the test2.js rather than using system.js. Oh ,, also changed

// es6 syntax
var a, b;
[a, b] = [1, 2];
console.log(a); // -> 1

to the more idiomatic:

// es6 syntax
const [a, b] = [1, 2];
console.log(a, b); // -> 1 2

I tested it all to make sure I hadn't fat fingered anything by cut/paste test1.js & test2 (w/o 'export') into the Canary console, then cut/paste the script. Worked fine. I.e. Canary did not run across any es6 not yet implemented.

The page looks like:

<!doctype html>
  <script src="../lib/traceur.js"></script>
  <script src="../lib/es6-module-loader-dev.js"></script>
  <script>
    System.traceurOptions = { arrowFunctions: false, blockBinding: false, classes: false, computedPropertyNames: false, defaultParameters: false, destructuring: false, forOf: false, generators: false, numericLiterals: false, propertyMethods: false, propertyNameShorthand: false, restParameters: false, spread: false, symbols: false, templateLiterals: false, unicodeEscapeSequences: false, unicodeExpressions: false };
  </script>
  <script type="module">
    import { hello } from 'test1.js';
    import { Foo } from 'test2.js';

    console.log(hello); // -> world
    const foo = new Foo(); // -> Created the ES6 class foo!

    // es6 syntax
    const [a, b] = [1, 2];
    console.log(a, b); // -> 1 2
  </script>
</body>
</html>

backspaces · 2016-03-07T17:37:07Z

More info: I asked on the traceur google group:
https://groups.google.com/forum/?hl=en#!topic/traceur-compiler-discuss/Giapl85Y7J8
.. and one suggestion was to tell traceur I want es6 output?

It sounds like you want --outputLanguage=es6.

guybedford · 2016-03-08T11:49:39Z

Ok so I exited the demo.html file in this repo, and added:

  <script>
    System.traceurOptions = { arrowFunctions: false, blockBinding: false, classes: false, computedPropertyNames: false, defaultParameters: false, destructuring: false, forOf: false, generators: false, numericLiterals: false, propertyMethods: false, propertyNameShorthand: false, restParameters: false, spread: false, symbols: false, templateLiterals: false, unicodeEscapeSequences: false, unicodeExpressions: false }
  </script>

After the <script src="../dist/es6-module-loader-dev.js"></script>.

Refreshing the page, the demo still works fine for me. Is that what you're after?

backspaces · 2016-03-08T16:59:05Z

Yup. I probably need to reboot! :)

On Tue, Mar 8, 2016 at 4:49 AM, Guy Bedford [email protected]
wrote:

Ok so I exited the demo.html file in this repo, and added:
<script> System.traceurOptions = { arrowFunctions: false, blockBinding: false, classes: false, computedPropertyNames: false, defaultParameters: false, destructuring: false, forOf: false, generators: false, numericLiterals: false, propertyMethods: false, propertyNameShorthand: false, restParameters: false, spread: false, symbols: false, templateLiterals: false, unicodeEscapeSequences: false, unicodeExpressions: false } </script>
After the <script src="../dist/es6-module-loader-dev.js"></script>.

Refreshing the page, the demo still works fine for me. Is that what you're
after?

—
Reply to this email directly or view it on GitHub
#477 (comment)
.

Alphapage · 2016-03-23T18:33:10Z

@backspaces Did you find a way to achieve your goal ?
Me too, I only want es6 with system.register to use it with nodejs harmony.
I tried both config without success.

probins · 2016-03-23T23:28:29Z

yeah, there is something screwy here. @backspaces code, such as destructuring to const, works fine in Chrome 49 without traceur, and with standard demo, i.e. transpiling with traceur, but when I add @guybedford traceur options, I get 'Unexpected reserved word const'. Looks like traceur is grabbing the code and preventing the native browser functions from running. It's getting late - I'll try again tomorrow with babel.

probins · 2016-03-27T17:10:45Z

@backspaces I don't think what you want to do will work with the current software.

Babel no longer supports use in browser
Traceur seems to have issues, as noted above
You can transpile import/export into System.register but, as I've just discovered (Unexpected anonymous register systemjs/systemjs#1162), System.register doesn't work in script tags

So I'm not sure that <script type="module"> support in the polyfill is all that useful.

Just transpiling import/export with Babel on Node is easier with v6.

npm install babel-cli
babel es6-module-loader/demo/test1.js

doesn't transpile anything. To transpile all ES6, you would install the ES2015 preset. If you just want to transpile import/export to System.register, install the plugin as described in http://babeljs.io/docs/plugins/transform-es2015-modules-systemjs/. Then

babel es6-module-loader/demo/test1.js

will convert module syntax and leave other ES6 stuff untouched.

backspaces · 2016-03-27T19:14:06Z

Folks: I never did get it to work so went back to pre-compiling just the module code with Babel,

babel-cli
babel-plugin-transform-es2015-modules-systemjs

then using System.js.

<html>
  <head>
    <script src="system.js"></script>
  </head>
  <body>
  <script>
    System.import('lib/main'); // .. contains the app & transpiled import/exports
  </script>
  </body>
</html>

This works very well, but alas, does not use the <script type='module'> approach which will be first browser module loader.

I still need no other Babel transpilation of es6 due to running Chrome & Canary with the experimental flags, (91% & 97% es6 coverage), so as soon as <script type='module'> lands, I'll convert to that and have no Babel transpilation at all.

probins mentioned this issue Mar 27, 2016

Transpiler handling #463

Closed

guybedford closed this as completed Aug 13, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Transpiling only modules import/export #477

Transpiling only modules import/export #477

backspaces commented Feb 28, 2016

guybedford commented Mar 3, 2016

backspaces commented Mar 5, 2016

guybedford commented Mar 6, 2016

backspaces commented Mar 7, 2016

backspaces commented Mar 7, 2016

guybedford commented Mar 8, 2016

backspaces commented Mar 8, 2016

Alphapage commented Mar 23, 2016

probins commented Mar 23, 2016

probins commented Mar 27, 2016

backspaces commented Mar 27, 2016

Transpiling only modules import/export #477

Transpiling only modules import/export #477

Comments

backspaces commented Feb 28, 2016

guybedford commented Mar 3, 2016

backspaces commented Mar 5, 2016

guybedford commented Mar 6, 2016

backspaces commented Mar 7, 2016

backspaces commented Mar 7, 2016

guybedford commented Mar 8, 2016

backspaces commented Mar 8, 2016

Alphapage commented Mar 23, 2016

probins commented Mar 23, 2016

probins commented Mar 27, 2016

backspaces commented Mar 27, 2016