Esm: babel-register compatibility

[EmilTholin]

Thank you for your hard work on esm. I get goosebumps constantly just experimenting with this absolute masterpiece of a project.

I got very excited when I saw that esm is compatible with babel-register, but I can't get it to work properly. This basic repro illustrates my issue. @std/esm and @babel/register works beautifully by themselves, but when I use them together it seems like @babel/register has no effect at all.

// The order doesn't seem to matter, I get the same result.
require = require('@std/esm')(module, {
  esm: 'js',
  cjs: true
})

require('@babel/register')({
  babelrc: false,
  presets: [
    ['@babel/env', { loose: true, modules: false }],
    '@babel/stage-0'
  ]
})

require('./target').default()

Am I doing something silly, or might there be a bug?

[jdalton]

Hi @EmilTholin!

Thanks for the kind words. This has been worked out in our master branch.
So will be working in the next bump due out in a day or so.

This will work for @babel/register and Babel 7 equivs of other packages
(which your example is using).

[EmilTholin]

Amazing! Thank you!

[jdalton]

I tried your example and got it working in our master branch by moving @std/esm instantiation out of index.js and into the npm start script like node -r @std/esm index.js. I'll look into the in file usage though before we version bump.

Update:
It looks like in-file use works too so you'll be all set! There is something with @babel/register and its cache that causes hiccups every once in a while. I know of at least one issue with it; the cache json file persists even when you disable cache in the @babel/register options.

[EmilTholin]

Ah, interesting. Great find! I might have to file an issue over at the Babel repository then.

[jdalton]

@EmilTholin I opened https://github.com/babel/babel/pull/6788.

[dnalborczyk]

@EmilTholin

since std/esm v0.13.0 with babel/register 7.0.0 (beta), you are also able to run:

node --require @babel/register --require @std/esm index.js

index.js

import foo from './foo';

class A {
  static test = 'works';
}

console.log(A.test);
console.log(foo);

foo.js

export default 'works';

package.json

{
    "dependencies": {
        "@babel/core": "7.0.0-beta.31",
        "@babel/plugin-proposal-class-properties": "^7.0.0-beta.31",
        "@babel/register": "^7.0.0-beta.31",
        "@std/esm": "0.13.0"
    },
    "@std/esm": {
        "esm": "js"
    }
}

.babelrc

{
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

[jdalton]

@dnalborczyk

node --require @babel/register --require @std/esm index.js

That order is backwards for the next bump (I think). The @std/esm should be first then @babel/register. I'll be sure to add a dev section to the readme for things like babel/register and mocha --watch. Could you test on the local master branch bits?

[dnalborczyk]

@jdalton

just gave it a try

v0.13.0

# works:
node --require @babel/register --require @std/esm index.js

# does not work:
node --require @std/esm --require @babel/register index.js

master (latest)

# works:
node --require @babel/register --require @std/esm index.js

# works:
node --require @std/esm --require @babel/register index.js

which is kind of weird, unless std/esm's parser (acorn) understands in this case the class property proposal -- which I thought it wouldn't (yet), since it's stage-3? I also tried it with the babel-transform-react-jsx, which also works in both cases.

I thought the first --register (babel), would compile everything down to whatever is specified in the plugins/presets options, and leave import/export statements alone -- which then would be handed to std/esm:

babel

import foo from './foo';

class A {}

Object.defineProperty(A, "test", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: 'works'
});
console.log(A.test);
console.log(foo);

std/esm

let foo;_c13‍.w('./foo',[["default",function(v){foo=v}]]);

class A {}

Object.defineProperty(A, "test", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: 'works'
});
console.log(A.test);
console.log(foo);

[jdalton]

[jdalton]

Actually, I think I was seeing in file use working because of caching (#144).
I've patched pirates to make it work for real.

Update:
Annd the pirates patch has landed!

Update:
Annd the @babel/register patch has landed too!