System module format updates: dynamic import, import meta, top-level await #26606

Search Terms

System modules, dynamic import, import meta, top-level await

Suggestion

I wanted to just create an issue to track updates to the System module format, which are all supported in the current stable release.

I've been meaning to get to this for a while, but haven't had time to dive into the code. So instead, here are the full transforms to track here for now.

Babel supports all of these except for top-level await support.

Use Cases

System module format output support for dynamic import(), import.meta.x, import.meta.url and top-level await.

Examples

The transformations that are supported are the following:

Dynamic Import

import('./x').then(x => ...);

->

System.register([], function (exports, context) {
  return {
    setters: [],
    execute: function () {
      context.import('./x').then(x => ...);
    }
  };
});

import.meta and import.meta.url

console.log(import.meta);
console.log(import.meta.url);

->

System.register([], function (exports, context) {
  return {
    setters: [],
    execute: function () {
      console.log(context.meta);
      console.log(context.meta.url);
    }
  };
});

Top-level await

console.log('sync');
await new Promise(resolve => setTimeout(resolve));
console.log('async');

->

System.register([], function (exports, context) {
  return {
    setters: [],
    execute: async function () {
      console.log('sync');
      await new Promise(resolve => setTimeout(resolve));
      console.log('async');
    }
  };
});

Where in dependency graphs, SystemJS supports variant B of the top-level await proposal.

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript / JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. new expression-level syntax)