Add ES Modules recipe #1593

motss · 2017-11-17T16:13:34Z

Recipe for ava + @std/esm + typescript

jdalton · 2017-11-17T19:15:57Z

docs/recipes/[email protected]

+    "cjs": true,
+    "await": true,
+    "gz": true
+  }


👆 I don't believe all those options are needed. Can you try snipping it down to something like:

"@std/esm": "cjs"

@jdalton Sure.

Sweet 🍬 !

sindresorhus · 2017-11-19T15:50:55Z

Thanks for starting this @motss. I've tweaked the text and simplified parts of it a little bit.

Can you also add it to the AVA readme: https://github.com/avajs/ava#recipes

jdalton · 2017-11-19T16:03:12Z

docs/recipes/[email protected]

+
+However, it works a bit different on Node.js than in web browsers that also natively supports ES modules. In Node.js, you need to use the `.mjs` extension instead of the commonly known `.js` extension. The `.mjs` extension in web browsers too, but they have to be served with the correct media type (`application/javascript`). There is a [ongoing effort](https://tools.ietf.org/html/draft-bfarias-javascript-mjs-00) on standardizing `.mjs`.
+
+The good news is that there's a module called [`@std/esm`](https://github.com/standard-things/esm) that enable you to write and run ES modules in Node.js 4 and above.


that enable -> that enables

jdalton · 2017-11-19T16:04:29Z

docs/recipes/[email protected]

+```
+
+You can now write tests with AVA, `@std/esm`, and TypeScript:
+


👆 So rad!

jdalton · 2017-11-19T16:06:24Z

docs/recipes/[email protected]

+```json
+{
+	…
+	"moduleResolution": "node",


👆 is the ... in the json common in recipe docs? It makes a weird error highlight when using ```json

It's just a way to signify that there should be more content than just this in the file. Any better suggestion?

jdalton · 2017-11-19T16:11:39Z

Let me know if a specific usage pops out for AVA.
I wouldn't mind making @std/esm detect AVA and applying AVA specific defaults or something.

novemberborn

Thanks @motss!

Some minor text comments (perhaps those were @sindresorhus' changes). Would be neat if this could show an example of using .mjs files, too.

novemberborn · 2017-11-20T15:51:02Z

docs/recipes/[email protected]

+
+As of Node.js 8.5.0, [ES modules](http://2ality.com/2017/09/native-esm-node.html) are natively supported, but behind a command line option `--experimental-modules`.
+
+However, it works a bit different on Node.js than in web browsers that also natively supports ES modules. In Node.js, you need to use the `.mjs` extension instead of the commonly known `.js` extension. The `.mjs` extension in web browsers too, but they have to be served with the correct media type (`application/javascript`). There is a [ongoing effort](https://tools.ietf.org/html/draft-bfarias-javascript-mjs-00) on standardizing `.mjs`.


I think this should say:

The .mjs extension can work in web browsers too, but such files have to be served with the correct media type

And:

There is an ongoing effort on standardizing .mjs.

(an rather than a)

novemberborn · 2017-11-20T15:53:05Z

docs/recipes/[email protected]

+```js
+import test from 'ava';
+
+test('2 + 2 = 4', t => {


It'd be nice if this would have an actual example of a .mjs file. Notably the test files are still transpiled using Babel, which means the above really reads const test = require('ava'), and there are no .mjs files being used. Same goes for the TypeScript example below.

jdalton · 2017-11-20T17:47:25Z

I'm fine not dwelling on mjs. The recommended config is "@std/esm":"cjs", which enables cjs compat mode.

jdalton · 2017-11-23T05:05:00Z

docs/recipes/[email protected]

+		"test": "ava"
+	},
+	"dependencies": {
+		"@std/esm": "^0.16.0"


Latest is 0.17.0 now. Is there a standard way to express a dependency without using a version for the recipe so folks don't lazy copy pasta an out of date version?

I don't know… perhaps the recipe should say to use npm install and not show any package.json? That would make copying really hard.

motss · 2017-12-14T03:16:15Z

@sindresorhus @jdalton Does the PR look good? Ready to merge?

motss · 2017-12-24T02:42:29Z

See #1618

sindresorhus · 2018-01-14T22:25:49Z

What do we do about this PR now that #1618 is merged?

jdalton · 2018-01-14T23:08:34Z

The general advice is still solid. Maybe bump the version documented and run with it.

feross · 2018-01-15T16:42:12Z

You might want to update this PR to point out that .mjs files won't work with ava until #631 (comment) is fixed.

Running ava or ava test/**/*.mjs or ava test/my-test.mjs results in:

  1 exception

  ✖ Couldn't find any files to test

This was surprising to me since the documentation in this PR mentions the .mjs extension explicitly, implying that testing .mjs files would work!

jdalton · 2018-01-17T16:59:53Z

The "@std/esm": "cjs" could technically be "@std/esm": "js" since with #1618 it would no longer need the cjs babel interop to be enabled.

* support @std/esm * fix path test for windows * fix linter error * Stricter regex. Use shorthand .esmrc file in fixture. * update package-lock.json

novemberborn · 2018-02-11T17:46:22Z

I've pushed a rewrite that focuses this recipe on using @std/esm, with AVA 1.0 in mind.

@jdalton is the configuration OK, and the example accurate?

I've pushed a rewrite that focuses this recipe on using @std/esm, with AVA 1.0 in mind.

jdalton · 2018-02-11T18:19:39Z

Looks great! Let's roll with that configuration and loosen it if needed later.

sindresorhus · 2018-02-11T19:24:21Z

docs/recipes/es-modules.md

+}
+```
+
+By default AVA converts ES module syntax to CommonJS. [You can disable this](./babel.md#preserve-es-module-syntax).


You don't need to prefix the file path with ./. It works without too.

novemberborn · 2018-02-12T11:48:50Z

Thanks all!

motss · 2018-02-12T13:08:48Z

🎉 Thanks for merging the PR. Well done all! 👏

motss added 3 commits November 18, 2017 00:12

Create [email protected]

1a7c234

Recipe for ava + @std/esm + typescript

Update [email protected]

64d31e0

Update [email protected]

cf7c347

motss changed the title ~~Create [email protected]~~ [DO NOT MERGE JUST YET] Create [email protected] Nov 17, 2017

motss added 2 commits November 18, 2017 00:48

Update [email protected]

be0d84f

Update [email protected]

b593506

motss mentioned this pull request Nov 17, 2017

HOW-TO: ES Modules with @std/esm #1590

Closed

motss changed the title ~~[DO NOT MERGE JUST YET] Create [email protected]~~ Create [email protected] Nov 17, 2017

jdalton reviewed Nov 17, 2017

View reviewed changes

motss and others added 2 commits November 18, 2017 09:44

Update [email protected]

f815af7

Update [email protected]

347d8be

sindresorhus changed the title ~~Create [email protected]~~ Add ES Modules recipe Nov 19, 2017

jdalton reviewed Nov 19, 2017

View reviewed changes

docs/recipes/[email protected] Outdated

```

You can now write tests with AVA, `@std/esm`, and TypeScript:

Copy link

Contributor

jdalton Nov 19, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👆 So rad!

jdalton reviewed Nov 19, 2017

View reviewed changes

Update [email protected]

e530aaf

jdalton mentioned this pull request Nov 20, 2017

Enable @std/esm on "es:next" node-modules standard-things/esm#108

Closed

novemberborn previously requested changes Nov 20, 2017

View reviewed changes

jdalton reviewed Nov 23, 2017

View reviewed changes

novemberborn referenced this pull request Jan 30, 2018

support @std/esm (#1618)

72c53be

* support @std/esm * fix path test for windows * fix linter error * Stricter regex. Use shorthand .esmrc file in fixture. * update package-lock.json

Merge branch 'master' into pr/1593

3474d52

Focus recipe on @std/esm

3f33a74

sindresorhus reviewed Feb 11, 2018

View reviewed changes

sindresorhus approved these changes Feb 11, 2018

View reviewed changes

novemberborn merged commit 0b27db5 into avajs:master Feb 12, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add ES Modules recipe #1593

Add ES Modules recipe #1593

motss commented Nov 17, 2017 •

edited

Loading

jdalton Nov 17, 2017 •

edited

Loading

motss Nov 18, 2017

jdalton Nov 18, 2017

sindresorhus commented Nov 19, 2017

jdalton Nov 19, 2017

jdalton Nov 19, 2017

jdalton Nov 19, 2017 •

edited

Loading

sindresorhus Nov 19, 2017

jdalton commented Nov 19, 2017 •

edited

Loading

novemberborn left a comment

novemberborn Nov 20, 2017

novemberborn Nov 20, 2017

jdalton commented Nov 20, 2017

jdalton Nov 23, 2017

novemberborn Nov 26, 2017

motss commented Dec 14, 2017

motss commented Dec 24, 2017

sindresorhus commented Jan 14, 2018

jdalton commented Jan 14, 2018

feross commented Jan 15, 2018 •

edited

Loading

jdalton commented Jan 17, 2018 •

edited

Loading

novemberborn commented Feb 11, 2018

jdalton commented Feb 11, 2018

sindresorhus Feb 11, 2018

novemberborn commented Feb 12, 2018

motss commented Feb 12, 2018


		However, it works a bit different on Node.js than in web browsers that also natively supports ES modules. In Node.js, you need to use the `.mjs` extension instead of the commonly known `.js` extension. The `.mjs` extension in web browsers too, but they have to be served with the correct media type (`application/javascript`). There is a [ongoing effort](https://tools.ietf.org/html/draft-bfarias-javascript-mjs-00) on standardizing `.mjs`.

		The good news is that there's a module called [`@std/esm`](https://github.com/standard-things/esm) that enable you to write and run ES modules in Node.js 4 and above.

		```

		You can now write tests with AVA, `@std/esm`, and TypeScript:


		As of Node.js 8.5.0, [ES modules](http://2ality.com/2017/09/native-esm-node.html) are natively supported, but behind a command line option `--experimental-modules`.

		However, it works a bit different on Node.js than in web browsers that also natively supports ES modules. In Node.js, you need to use the `.mjs` extension instead of the commonly known `.js` extension. The `.mjs` extension in web browsers too, but they have to be served with the correct media type (`application/javascript`). There is a [ongoing effort](https://tools.ietf.org/html/draft-bfarias-javascript-mjs-00) on standardizing `.mjs`.

Add ES Modules recipe #1593

Add ES Modules recipe #1593

Conversation

motss commented Nov 17, 2017 • edited Loading

jdalton Nov 17, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sindresorhus commented Nov 19, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jdalton Nov 19, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jdalton commented Nov 19, 2017 • edited Loading

novemberborn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jdalton commented Nov 20, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

motss commented Dec 14, 2017

motss commented Dec 24, 2017

sindresorhus commented Jan 14, 2018

jdalton commented Jan 14, 2018

feross commented Jan 15, 2018 • edited Loading

jdalton commented Jan 17, 2018 • edited Loading

novemberborn commented Feb 11, 2018

jdalton commented Feb 11, 2018

Choose a reason for hiding this comment

novemberborn commented Feb 12, 2018

motss commented Feb 12, 2018

motss commented Nov 17, 2017 •

edited

Loading

jdalton Nov 17, 2017 •

edited

Loading

jdalton Nov 19, 2017 •

edited

Loading

jdalton commented Nov 19, 2017 •

edited

Loading

feross commented Jan 15, 2018 •

edited

Loading

jdalton commented Jan 17, 2018 •

edited

Loading