A browserify transform or plugin, like babel or esmify, should do the trick. Unless you want to test real ESM in browsers, then I'm not sure.

We also want to test real ESM in the browser

I haven't used real ESM before, some guidance is welcome.

First thoughts: I suppose airtap would have to serve the user's input files as-is without bundling them, acting as a static file server. The client could then load those files either by appending <script type="module"> elements to the DOM, or through a dynamic import().

Currently we serve a bundle at http://localhost:1234/airtap/test.js. This URL will have to be dynamic and use a dedicated route, something like http://localhost:1234/user/*. We could have the airtap server send a list of entrypoint URLs to the client, over the websocket.

Which directory should we serve? For example given test/*.mjs. Do we serve test/ or the complete working directory (including node_modules)? It's likely that tests will import e.g. ../src/foo.mjs. So we'd serve files like so:

• http://localhost:1234/user/test/foo-test.mjs => /cwd/test/foo-test.mjs
• http://localhost:1234/user/src/foo.mjs => /cwd/src/foo.mjs

Sound good so far?

sounds good so far. There is also the possibility of using import maps for node_modules

Are there any good (simple and unopinionated) npm packages to help us create import maps? Or (if there are other caveats besides import maps) a general solution for serving ESM files? I'm looking for small building blocks, rather than a full framework or bundler like snowpack.

seems like specifying

browserify:
  - plugin: 'esmify'

inside .airtap.yml mostly fixes this except for type assertion, for browserify CLI doing -t [ babelify --presets [@babel/preset-env] --plugins [@babel/plugin-syntax-import-assertions]] does the job, but i have no clue how to specify that for yml as it doesn't seem to accept args

browserify:
  - transform: babelify
    presets: ['@babel/preset-env']
    plugins: ['@babel/plugin-syntax-import-assertions']

this doesn't seem to work for me, even tho it parses it

@vweevers SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (2:0) while parsing
see: ThaUnknown/webtorrent@7adb87f

My example was just to show how to specify transform options. The complete configuration should also include esmify.

My example was just to show how to specify transform options. The complete configuration should also include esmify.

for CLI browserify you don't need esmify when u specify babelify, anyways even if i add esmify as a plugin it just straight up ignores the transform:

code:

browserify:
  - plugin: 'esmify'
  - transform: babelify
    presets: ['@babel/preset-env']
    plugins: ['@babel/plugin-syntax-import-assertions']

the cli command for reference:

browserify -t [ babelify --presets [@babel/preset-env] --plugins [@babel/plugin-syntax-import-assertions]] --standalone WebTorrent . | minify --mangle=false > webtorrent.min.js

I see. OK, then I can't be of further assistance. You now know how to specify options in airtap.yml, so unless you have more questions about airtap specifically, you'll have to figure out the right combination of plugins and transforms yourself.

@vweevers this seems to be a bug with airtap, as running the cli command I listed above works fine, with only babelify

@vweevers welp, feel free to add this to the readme

To compile ESM tests and modules to your .airtap.yml add:

browserify:
  - transform: babelify
    global: true
    presets: ['@babel/preset-env']
    plugins: ['@babel/plugin-syntax-import-assertions']

make sure that your root package.json does not have any browserify or babel fields!

When using this I get: 'ReferenceError: regeneratorRuntime is not defined