import.meta: Stage 2

[hzoo]

import.meta for stage 2 (Domenic Denicola) (@domenic)

Info

Proposed at TC39 Meeting: May 2017
Spec Repo: https://github.com/tc39/proposal-import-meta
Spec Text: https://tc39.github.io/proposal-import-meta/

Example

(async () => {
  const response = await fetch(new URL("../hamsters.jpg", import.meta.url));
  const blob = await response.blob();

  const size = import.meta.scriptElement.dataset.size || 300;

  const image = new Image();
  image.src = URL.createObjectURL(blob);
  image.width = image.height = size;

  document.body.appendChild(image);
})();

Parsing/ESTree

• make issue
• Sounds pretty straightforward to make it a MetaProperty like new.target

{
  "type": "MetaProperty",
  "meta": {
    "type": "Identifier",
    "name": "import"
  },
  "property": {
    "type": "Identifier",
    "name": "meta"
  }
}

• parsing new.target via const metaProp = this.parseMetaProperty(node, meta, "target"); at
  

  babylon/src/parser/expression.js

  Line 715 in 50694f9

  const metaProp = this.parseMetaProperty(node, meta, "target");

• dynamic import

  babylon/src/parser/expression.js

  Line 429 in 50694f9

  case tt._import:

Transform

• Not sure, maybe webpack should handle? Or in node?

[Jessidhia]

How should the tree look like when MemberExpression are involved, like in import.meta.foo?

// super-like
MemberExpression {
  object: MemberExpression {
    object: Import {}
    property: Identifier { name: 'meta' }
  }
  property: Identifier { name: 'foo' }
}

// new.target-like
MemberExpression {
  object: MetaProperty {
    meta: Identifier { name: 'import' }
    property: Identifier { name: 'meta' }
  }
  property: Identifier { name: 'foo' }
}

ESTree specifically defined an Import node expecting it to be used like super in the future.

https://github.com/estree/estree/blob/master/experimental/import-expression.md

[bakkot]

I'd vote for making it like new.target, definitely. That's certainly how it's spec'd, and import.somethingElse is not grammatical.

I believe ESTree's import expression is just to support dynamic import: import("whatever") is legal. It has nothing to do with this proposal from the AST's perspective, despite the visual similarity.

[Jessidhia]

The reasoning for naming it Import instead of DynamicImport was because of the similarity to Super when it got meta-properties added.

It would be nice to be able to have Import {} as the MetaProperty's meta, instead of an Identifier { name: 'import' } though.

[bakkot]

I'm sad I wasn't paying attention when that decision was made, then. import.meta is a thing of its own, and has nothing to do with import("") except that they have one token in common.

Not a big fan of the MetaProperty node type either, come to that. new.target and import.meta really ought to be their own node types (possibly subtypes of MetaProperty, I guess, but not involving any strings anywhere). Since that ship has apparently sailed, I think Identifier { name: 'import' } is more in keeping with new.target than Import {} is.

[hzoo]

@babel-bot move to babel/babel

[hzoo]

Hey @hzoo! I've moved your issue to the correct repository. Please make sure to keep an eye on the new issue for the latest information.