@parcel/packager-js 2.9.3 → 2.10.0

package/lib/ESMOutputFormat.js

@@ -88,6 +88,11 @@ class ESMOutputFormat {
       res += `\nexport {${exportSpecifiers.join(', ')}};`;
       lines++;
     }
+    if (this.packager.needsPrelude && this.packager.shouldBundleQueue(this.packager.bundle)) {
+      // Should be last thing the bundle executes on intial eval
+      res += `\n$parcel$global.rlb(${JSON.stringify(this.packager.bundle.publicId)})`;
+      lines++;
+    }
     return [res, lines];
   }
 }

package/lib/ScopeHoistingPackager.js

@@ -93,11 +93,13 @@ class ScopeHoistingPackager {
   hoistedRequires = new Map();
   needsPrelude = false;
   usedHelpers = new Set();
-  constructor(options, bundleGraph, bundle, parcelRequireName) {
+  externalAssets = new Set();
+  constructor(options, bundleGraph, bundle, parcelRequireName, useAsyncBundleRuntime) {
     this.options = options;
     this.bundleGraph = bundleGraph;
     this.bundle = bundle;
     this.parcelRequireName = parcelRequireName;
+    this.useAsyncBundleRuntime = useAsyncBundleRuntime;
     let OutputFormat = OUTPUT_FORMATS[this.bundle.env.outputFormat];
     this.outputFormat = new OutputFormat(this);
     this.isAsyncBundle = this.bundleGraph.hasParentBundleOfType(this.bundle, 'js') && !this.bundle.env.isIsolated() && this.bundle.bundleBehavior !== 'isolated';
@@ -114,9 +116,23 @@ class ScopeHoistingPackager {
     // of each bundle group pointing at the sibling bundles. These can be
     // picked up by another bundler later at which point runtimes will be added.
     if (this.bundle.env.isLibrary || this.bundle.env.outputFormat === 'commonjs') {
-      let bundles = this.bundleGraph.getReferencedBundles(this.bundle);
-      for (let b of bundles) {
-        this.externals.set((0, _utils().relativeBundlePath)(this.bundle, b), new Map());
+      for (let b of this.bundleGraph.getReferencedBundles(this.bundle)) {
+        let entry = b.getMainEntry();
+        let symbols = new Map();
+        if (entry && !this.isAsyncBundle && entry.type === 'js') {
+          this.externalAssets.add(entry);
+          let usedSymbols = this.bundleGraph.getUsedSymbols(entry) || new Set();
+          for (let s of usedSymbols) {
+            // If the referenced bundle is ESM, and we are importing '*', use 'default' instead.
+            // This matches the logic below in buildExportedSymbols.
+            let imported = s;
+            if (imported === '*' && b.env.outputFormat === 'esmodule') {
+              imported = 'default';
+            }
+            symbols.set(imported, this.getSymbolResolution(entry, entry, s));
+          }
+        }
+        this.externals.set((0, _utils().relativeBundlePath)(this.bundle, b), symbols);
       }
     }
     let res = '';
@@ -154,7 +170,7 @@ class ScopeHoistingPackager {
     let [prelude, preludeLines] = this.buildBundlePrelude();
     res = prelude + res;
     lineCount += preludeLines;
-    (_sourceMap = sourceMap) === null || _sourceMap === void 0 ? void 0 : _sourceMap.offsetLines(1, preludeLines);
+    (_sourceMap = sourceMap) === null || _sourceMap === void 0 || _sourceMap.offsetLines(1, preludeLines);
     let entries = this.bundle.getEntryAssets();
     let mainEntry = this.bundle.getMainEntry();
     if (this.isAsyncBundle) {
@@ -166,6 +182,7 @@ class ScopeHoistingPackager {
       });
       mainEntry = null;
     }
+    let needsBundleQueue = this.shouldBundleQueue(this.bundle);
 
     // If any of the entry assets are wrapped, call parcelRequire so they are executed.
     for (let entry of entries) {
@@ -174,8 +191,12 @@ class ScopeHoistingPackager {
         let parcelRequire = `parcelRequire(${JSON.stringify(this.bundleGraph.getAssetPublicId(entry))});\n`;
         let entryExports = (_entry$symbols$get = entry.symbols.get('*')) === null || _entry$symbols$get === void 0 ? void 0 : _entry$symbols$get.local;
         if (entryExports && entry === mainEntry && this.exportedSymbols.has(entryExports)) {
+          (0, _assert().default)(!needsBundleQueue, 'Entry exports are not yet compaitble with async bundles');
           res += `\nvar ${entryExports} = ${parcelRequire}`;
         } else {
+          if (needsBundleQueue) {
+            parcelRequire = this.runWhenReady(this.bundle, parcelRequire);
+          }
           res += `\n${parcelRequire}`;
         }
         lineCount += 2;
@@ -210,6 +231,18 @@ class ScopeHoistingPackager {
       map: sourceMap
     };
   }
+  shouldBundleQueue(bundle) {
+    return this.useAsyncBundleRuntime && bundle.type === 'js' && bundle.bundleBehavior !== 'inline' && bundle.env.outputFormat === 'esmodule' && !bundle.env.isIsolated() && bundle.bundleBehavior !== 'isolated' && !this.bundleGraph.hasParentBundleOfType(bundle, 'js');
+  }
+  runWhenReady(bundle, codeToRun) {
+    let deps = this.bundleGraph.getReferencedBundles(bundle).filter(b => this.shouldBundleQueue(b)).map(b => b.publicId);
+    if (deps.length === 0) {
+      // If no deps we can safely execute immediately
+      return codeToRun;
+    }
+    let params = [JSON.stringify(this.bundle.publicId), (0, _helpers.fnExpr)(this.bundle.env, [], [codeToRun]), JSON.stringify(deps)];
+    return `$parcel$global.rwr(${params.join(', ')});`;
+  }
   async loadAssets() {
     let queue = new (_utils().PromiseQueue)({
       maxConcurrent: 32
@@ -224,8 +257,10 @@ class ScopeHoistingPackager {
         }];
       });
       if (asset.meta.shouldWrap || this.isAsyncBundle || this.bundle.env.sourceType === 'script' || this.bundleGraph.isAssetReferenced(this.bundle, asset) || this.bundleGraph.getIncomingDependencies(asset).some(dep => dep.meta.shouldWrap && dep.specifierType !== 'url')) {
-        this.wrappedAssets.add(asset.id);
-        wrapped.push(asset);
+        if (!asset.meta.isConstantModule) {
+          this.wrappedAssets.add(asset.id);
+          wrapped.push(asset);
+        }
       }
     });
     for (let wrappedAssetRoot of [...wrapped]) {
@@ -237,8 +272,10 @@ class ScopeHoistingPackager {
           actions.skipChildren();
           return;
         }
-        this.wrappedAssets.add(asset.id);
-        wrapped.push(asset);
+        if (!asset.meta.isConstantModule) {
+          this.wrappedAssets.add(asset.id);
+          wrapped.push(asset);
+        }
       }, wrappedAssetRoot);
     }
     this.assetOutputs = new Map(await queue.run());
@@ -366,7 +403,7 @@ class ScopeHoistingPackager {
     let [depMap, replacements] = this.buildReplacements(asset, deps);
     let [prepend, prependLines, append] = this.buildAssetPrelude(asset, deps);
     if (prependLines > 0) {
-      sourceMap === null || sourceMap === void 0 ? void 0 : sourceMap.offsetLines(1, prependLines);
+      sourceMap === null || sourceMap === void 0 || sourceMap.offsetLines(1, prependLines);
       code = prepend + code;
     }
     code += append;
@@ -462,9 +499,9 @@ class ScopeHoistingPackager {
     // wrapper. Dependencies must be inserted AFTER the asset is registered so that circular dependencies work.
     if (shouldWrap) {
       // Offset by one line for the parcelRequire.register wrapper.
-      sourceMap === null || sourceMap === void 0 ? void 0 : sourceMap.offsetLines(1, 1);
+      sourceMap === null || sourceMap === void 0 || sourceMap.offsetLines(1, 1);
       lineCount++;
-      code = `parcelRequire.register(${JSON.stringify(this.bundleGraph.getAssetPublicId(asset))}, function(module, exports) {
+      code = `parcelRegister(${JSON.stringify(this.bundleGraph.getAssetPublicId(asset))}, function(module, exports) {
 ${code}
 });
 `;
@@ -479,6 +516,9 @@ ${code}
       }
       this.needsPrelude = true;
     }
+    if (!shouldWrap && this.shouldBundleQueue(this.bundle) && this.bundle.getEntryAssets().some(entry => entry.id === asset.id)) {
+      code = this.runWhenReady(this.bundle, code);
+    }
     return [code, sourceMap, lineCount];
   }
   buildReplacements(asset, deps) {
@@ -602,6 +642,13 @@ ${code}
       }
     }
   }
+  isWrapped(resolved, parentAsset) {
+    if (resolved.meta.isConstantModule) {
+      (0, _assert().default)(this.bundle.hasAsset(resolved), 'Constant module not found in bundle');
+      return false;
+    }
+    return !this.bundle.hasAsset(resolved) && !this.externalAssets.has(resolved) || this.wrappedAssets.has(resolved.id) && resolved !== parentAsset;
+  }
   getSymbolResolution(parentAsset, resolved, imported, dep) {
     var _resolvedAsset$symbol;
     let {
@@ -614,10 +661,14 @@ ${code}
       // that is actually unused but we still need a placeholder value.
       return '{}';
     }
-    let isWrapped = !this.bundle.hasAsset(resolvedAsset) || this.wrappedAssets.has(resolvedAsset.id) && resolvedAsset !== parentAsset;
+    let isWrapped = this.isWrapped(resolvedAsset, parentAsset);
     let staticExports = resolvedAsset.meta.staticExports !== false;
     let publicId = this.bundleGraph.getAssetPublicId(resolvedAsset);
 
+    // External CommonJS dependencies need to be accessed as an object property rather than imported
+    // directly to maintain live binding.
+    let isExternalCommonJS = !isWrapped && this.bundle.env.isLibrary && this.bundle.env.outputFormat === 'commonjs' && !this.bundle.hasAsset(resolvedAsset);
+
     // If the resolved asset is wrapped, but imported at the top-level by this asset,
     // then we hoist parcelRequire calls to the top of this asset so side effects run immediately.
     if (isWrapped && dep && !(dep !== null && dep !== void 0 && dep.meta.shouldWrap) && symbol !== false && (
@@ -656,7 +707,7 @@ ${code}
       } else {
         return obj;
       }
-    } else if ((!staticExports || isWrapped || !symbol) && resolvedAsset !== parentAsset) {
+    } else if ((!staticExports || isWrapped || !symbol || isExternalCommonJS) && resolvedAsset !== parentAsset) {
       // If the resolved asset is wrapped or has non-static exports,
       // we need to use a member access off the namespace object rather
       // than a direct reference. If importing default from a CJS module,
@@ -681,7 +732,7 @@ ${code}
     let hoisted = this.hoistedRequires.get(dep.id);
     let res = '';
     let lineCount = 0;
-    let isWrapped = !this.bundle.hasAsset(resolved) || this.wrappedAssets.has(resolved.id) && resolved !== parentAsset;
+    let isWrapped = this.isWrapped(resolved, parentAsset);
 
     // If the resolved asset is wrapped and is imported in the top-level by this asset,
     // we need to run side effects when this asset runs. If the resolved asset is not
@@ -821,10 +872,10 @@ ${code}
         // required to simulate ESM live bindings. It's easier to do it this way rather than inserting
         // additional assignments after each mutation of the original binding.
         prepend += `\n${usedExports.map(exp => {
-          var _asset$symbols$get2, _asset$symbols$get2$m;
+          var _asset$symbols$get2;
           let resolved = this.getSymbolResolution(asset, asset, exp);
           let get = this.buildFunctionExpression([], resolved);
-          let isEsmExport = !!((_asset$symbols$get2 = asset.symbols.get(exp)) !== null && _asset$symbols$get2 !== void 0 && (_asset$symbols$get2$m = _asset$symbols$get2.meta) !== null && _asset$symbols$get2$m !== void 0 && _asset$symbols$get2$m.isEsm);
+          let isEsmExport = !!((_asset$symbols$get2 = asset.symbols.get(exp)) !== null && _asset$symbols$get2 !== void 0 && (_asset$symbols$get2 = _asset$symbols$get2.meta) !== null && _asset$symbols$get2 !== void 0 && _asset$symbols$get2.isEsm);
           let set = !isEsmExport && asset.meta.hasCJSExports ? ', ' + this.buildFunctionExpression(['v'], `${resolved} = v`) : '';
           return `$parcel$export($${assetId}$exports, ${JSON.stringify(exp)}, ${get}${set});`;
         }).join('\n')}\n`;
@@ -860,9 +911,13 @@ ${code}
       this.usedHelpers.add('$parcel$global');
     }
     for (let helper of this.usedHelpers) {
-      res += _helpers.helpers[helper];
+      let currentHelper = _helpers.helpers[helper];
+      if (typeof currentHelper === 'function') {
+        currentHelper = _helpers.helpers[helper](this.bundle.env);
+      }
+      res += currentHelper;
       if (enableSourceMaps) {
-        lines += (0, _utils().countLines)(_helpers.helpers[helper]) - 1;
+        lines += (0, _utils().countLines)(currentHelper) - 1;
       }
     }
     if (this.needsPrelude) {
@@ -876,9 +931,19 @@ ${code}
         if (enableSourceMaps) {
           lines += (0, _utils().countLines)(preludeCode) - 1;
         }
+        if (this.shouldBundleQueue(this.bundle)) {
+          let bundleQueuePreludeCode = (0, _helpers.bundleQueuePrelude)(this.bundle.env);
+          res += bundleQueuePreludeCode;
+          if (enableSourceMaps) {
+            lines += (0, _utils().countLines)(bundleQueuePreludeCode) - 1;
+          }
+        }
       } else {
         // Otherwise, get the current parcelRequire global.
-        res += `var parcelRequire = $parcel$global[${JSON.stringify(this.parcelRequireName)}];\n`;
+        const escaped = JSON.stringify(this.parcelRequireName);
+        res += `var parcelRequire = $parcel$global[${escaped}];\n`;
+        lines++;
+        res += `var parcelRegister = parcelRequire.register;\n`;
         lines++;
       }
     }

package/lib/helpers.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.prelude = exports.helpers = void 0;
-const prelude = parcelRequireName => `var $parcel$modules = {};
+exports.prelude = exports.helpers = exports.fnExpr = exports.bundleQueuePrelude = void 0;
+const prelude = parcelRequireName => `
+var $parcel$modules = {};
 var $parcel$inits = {};
 
 var parcelRequire = $parcel$global[${JSON.stringify(parcelRequireName)}];
+
 if (parcelRequire == null) {
   parcelRequire = function(id) {
     if (id in $parcel$modules) {
@@ -32,14 +34,47 @@ if (parcelRequire == null) {
 
   $parcel$global[${JSON.stringify(parcelRequireName)}] = parcelRequire;
 }
+
+var parcelRegister = parcelRequire.register;
 `;
 exports.prelude = prelude;
-const helpers = {
-  $parcel$export: `function $parcel$export(e, n, v, s) {
+const fnExpr = (env, params, body) => {
+  let block = `{ ${body.join(' ')} }`;
+  if (env.supports('arrow-functions')) {
+    return `(${params.join(', ')}) => ${block}`;
+  }
+  return `function (${params.join(', ')}) ${block}`;
+};
+exports.fnExpr = fnExpr;
+const bundleQueuePrelude = env => `
+if (!$parcel$global.lb) {
+  // Set of loaded bundles
+  $parcel$global.lb = new Set();
+  // Queue of bundles to execute once they're dep bundles are loaded
+  $parcel$global.bq = [];
+
+  // Register loaded bundle
+  $parcel$global.rlb = ${fnExpr(env, ['bundle'], ['$parcel$global.lb.add(bundle);', '$parcel$global.pq();'])}
+
+  // Run when ready
+  $parcel$global.rwr = ${fnExpr(env,
+// b = bundle public id
+// r = run function to execute the bundle entry
+// d = list of dependent bundles this bundle requires before executing
+['b', 'r', 'd'], ['$parcel$global.bq.push({b, r, d});', '$parcel$global.pq();'])}
+
+  // Process queue
+  $parcel$global.pq = ${fnExpr(env, [], [`var runnableEntry = $parcel$global.bq.find(${fnExpr(env, ['i'], [`return i.d.every(${fnExpr(env, ['dep'], ['return $parcel$global.lb.has(dep);'])});`])});`, 'if (runnableEntry) {', `$parcel$global.bq = $parcel$global.bq.filter(${fnExpr(env, ['i'], ['return i.b !== runnableEntry.b;'])});`, 'runnableEntry.r();', '$parcel$global.pq();', '}'])}
+}
+`;
+exports.bundleQueuePrelude = bundleQueuePrelude;
+const $parcel$export = `
+function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
-`,
-  $parcel$exportWildcard: `function $parcel$exportWildcard(dest, source) {
+`;
+const $parcel$exportWildcard = `
+function $parcel$exportWildcard(dest, source) {
   Object.keys(source).forEach(function(key) {
     if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
       return;
@@ -55,25 +90,41 @@ const helpers = {
 
   return dest;
 }
-`,
-  $parcel$interopDefault: `function $parcel$interopDefault(a) {
+`;
+const $parcel$interopDefault = `
+function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
-`,
-  $parcel$global: `var $parcel$global =
-typeof globalThis !== 'undefined'
-  ? globalThis
-  : typeof self !== 'undefined'
-  ? self
-  : typeof window !== 'undefined'
-  ? window
-  : typeof global !== 'undefined'
-  ? global
-  : {};
-`,
-  $parcel$defineInteropFlag: `function $parcel$defineInteropFlag(a) {
+`;
+const $parcel$global = env => {
+  if (env.supports('global-this')) {
+    return `
+      var $parcel$global = globalThis;
+    `;
+  }
+  return `
+      var $parcel$global =
+        typeof globalThis !== 'undefined'
+          ? globalThis
+          : typeof self !== 'undefined'
+          ? self
+          : typeof window !== 'undefined'
+          ? window
+          : typeof global !== 'undefined'
+          ? global
+          : {};
+  `;
+};
+const $parcel$defineInteropFlag = `
+function $parcel$defineInteropFlag(a) {
   Object.defineProperty(a, '__esModule', {value: true, configurable: true});
 }
-`
+`;
+const helpers = {
+  $parcel$export,
+  $parcel$exportWildcard,
+  $parcel$interopDefault,
+  $parcel$global,
+  $parcel$defineInteropFlag
 };
 exports.helpers = helpers;

package/lib/index.js

@@ -18,9 +18,16 @@ function _utils() {
   };
   return data;
 }
-function _hash() {
-  const data = require("@parcel/hash");
-  _hash = function () {
+function _diagnostic() {
+  const data = require("@parcel/diagnostic");
+  _diagnostic = function () {
+    return data;
+  };
+  return data;
+}
+function _rust() {
+  const data = require("@parcel/rust");
+  _rust = function () {
     return data;
   };
   return data;
@@ -42,18 +49,37 @@ function _nullthrows() {
 var _DevPackager = require("./DevPackager");
 var _ScopeHoistingPackager = require("./ScopeHoistingPackager");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const CONFIG_SCHEMA = {
+  type: 'object',
+  properties: {
+    unstable_asyncBundleRuntime: {
+      type: 'boolean'
+    }
+  },
+  additionalProperties: false
+};
 var _default = new (_plugin().Packager)({
   async loadConfig({
     config,
     options
   }) {
-    var _pkg$contents$name, _pkg$contents;
+    var _pkg$contents$name, _pkg$contents, _pkg$contents$package;
     // Generate a name for the global parcelRequire function that is unique to this project.
     // This allows multiple parcel builds to coexist on the same page.
     let pkg = await config.getConfigFrom(_path().default.join(options.projectRoot, 'index'), ['package.json']);
-    let name = (_pkg$contents$name = pkg === null || pkg === void 0 ? void 0 : (_pkg$contents = pkg.contents) === null || _pkg$contents === void 0 ? void 0 : _pkg$contents.name) !== null && _pkg$contents$name !== void 0 ? _pkg$contents$name : '';
+    let packageKey = '@parcel/packager-js';
+    if (pkg !== null && pkg !== void 0 && pkg.contents[packageKey]) {
+      _utils().validateSchema.diagnostic(CONFIG_SCHEMA, {
+        data: pkg === null || pkg === void 0 ? void 0 : pkg.contents[packageKey],
+        source: await options.inputFS.readFile(pkg.filePath, 'utf8'),
+        filePath: pkg.filePath,
+        prependKey: `/${(0, _diagnostic().encodeJSONKeyComponent)(packageKey)}`
+      }, packageKey, `Invalid config for ${packageKey}`);
+    }
+    let name = (_pkg$contents$name = pkg === null || pkg === void 0 || (_pkg$contents = pkg.contents) === null || _pkg$contents === void 0 ? void 0 : _pkg$contents.name) !== null && _pkg$contents$name !== void 0 ? _pkg$contents$name : '';
     return {
-      parcelRequireName: 'parcelRequire' + (0, _hash().hashString)(name).slice(-4)
+      parcelRequireName: 'parcelRequire' + (0, _rust().hashString)(name).slice(-4),
+      unstable_asyncBundleRuntime: Boolean(pkg === null || pkg === void 0 || (_pkg$contents$package = pkg.contents[packageKey]) === null || _pkg$contents$package === void 0 ? void 0 : _pkg$contents$package.unstable_asyncBundleRuntime)
     };
   },
   async package({
@@ -75,7 +101,7 @@ var _default = new (_plugin().Packager)({
       }
     }
     if (contents == null) {
-      let packager = bundle.env.shouldScopeHoist ? new _ScopeHoistingPackager.ScopeHoistingPackager(options, bundleGraph, bundle, (0, _nullthrows().default)(config).parcelRequireName) : new _DevPackager.DevPackager(options, bundleGraph, bundle, (0, _nullthrows().default)(config).parcelRequireName);
+      let packager = bundle.env.shouldScopeHoist ? new _ScopeHoistingPackager.ScopeHoistingPackager(options, bundleGraph, bundle, (0, _nullthrows().default)(config).parcelRequireName, (0, _nullthrows().default)(config).unstable_asyncBundleRuntime) : new _DevPackager.DevPackager(options, bundleGraph, bundle, (0, _nullthrows().default)(config).parcelRequireName);
       ({
         contents,
         map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/packager-js",
-  "version": "2.9.3",
+  "version": "2.10.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,16 +17,17 @@
   "source": "src/index.js",
   "engines": {
     "node": ">= 12.0.0",
-    "parcel": "^2.9.3"
+    "parcel": "^2.10.0"
   },
   "dependencies": {
-    "@parcel/diagnostic": "2.9.3",
-    "@parcel/hash": "2.9.3",
-    "@parcel/plugin": "2.9.3",
+    "@parcel/diagnostic": "2.10.0",
+    "@parcel/plugin": "2.10.0",
+    "@parcel/rust": "2.10.0",
     "@parcel/source-map": "^2.1.1",
-    "@parcel/utils": "2.9.3",
+    "@parcel/types": "2.10.0",
+    "@parcel/utils": "2.10.0",
     "globals": "^13.2.0",
     "nullthrows": "^1.1.1"
   },
-  "gitHead": "db3bcae10497fa6a712fd9a135f93f26c5745454"
+  "gitHead": "0e235842b5b93301379bdfa626e7a4e2ee42ea98"
 }

package/src/ESMOutputFormat.js

@@ -106,6 +106,17 @@ export class ESMOutputFormat implements OutputFormat {
       lines++;
     }
 
+    if (
+      this.packager.needsPrelude &&
+      this.packager.shouldBundleQueue(this.packager.bundle)
+    ) {
+      // Should be last thing the bundle executes on intial eval
+      res += `\n$parcel$global.rlb(${JSON.stringify(
+        this.packager.bundle.publicId,
+      )})`;
+      lines++;
+    }
+
     return [res, lines];
   }
 }

package/src/ScopeHoistingPackager.js

@@ -27,7 +27,7 @@ import path from 'path';
 import {ESMOutputFormat} from './ESMOutputFormat';
 import {CJSOutputFormat} from './CJSOutputFormat';
 import {GlobalOutputFormat} from './GlobalOutputFormat';
-import {prelude, helpers} from './helpers';
+import {prelude, helpers, bundleQueuePrelude, fnExpr} from './helpers';
 import {replaceScriptDependencies, getSpecifier} from './utils';
 
 // https://262.ecma-international.org/6.0/#sec-names-and-keywords
@@ -74,6 +74,7 @@ export class ScopeHoistingPackager {
   bundleGraph: BundleGraph<NamedBundle>;
   bundle: NamedBundle;
   parcelRequireName: string;
+  useAsyncBundleRuntime: boolean;
   outputFormat: OutputFormat;
   isAsyncBundle: boolean;
   globalNames: $ReadOnlySet<string>;
@@ -94,17 +95,20 @@ export class ScopeHoistingPackager {
   hoistedRequires: Map<string, Map<string, string>> = new Map();
   needsPrelude: boolean = false;
   usedHelpers: Set<string> = new Set();
+  externalAssets: Set<Asset> = new Set();
 
   constructor(
     options: PluginOptions,
     bundleGraph: BundleGraph<NamedBundle>,
     bundle: NamedBundle,
     parcelRequireName: string,
+    useAsyncBundleRuntime: boolean,
   ) {
     this.options = options;
     this.bundleGraph = bundleGraph;
     this.bundle = bundle;
     this.parcelRequireName = parcelRequireName;
+    this.useAsyncBundleRuntime = useAsyncBundleRuntime;
 
     let OutputFormat = OUTPUT_FORMATS[this.bundle.env.outputFormat];
     this.outputFormat = new OutputFormat(this);
@@ -130,9 +134,25 @@ export class ScopeHoistingPackager {
       this.bundle.env.isLibrary ||
       this.bundle.env.outputFormat === 'commonjs'
     ) {
-      let bundles = this.bundleGraph.getReferencedBundles(this.bundle);
-      for (let b of bundles) {
-        this.externals.set(relativeBundlePath(this.bundle, b), new Map());
+      for (let b of this.bundleGraph.getReferencedBundles(this.bundle)) {
+        let entry = b.getMainEntry();
+        let symbols = new Map();
+        if (entry && !this.isAsyncBundle && entry.type === 'js') {
+          this.externalAssets.add(entry);
+
+          let usedSymbols = this.bundleGraph.getUsedSymbols(entry) || new Set();
+          for (let s of usedSymbols) {
+            // If the referenced bundle is ESM, and we are importing '*', use 'default' instead.
+            // This matches the logic below in buildExportedSymbols.
+            let imported = s;
+            if (imported === '*' && b.env.outputFormat === 'esmodule') {
+              imported = 'default';
+            }
+            symbols.set(imported, this.getSymbolResolution(entry, entry, s));
+          }
+        }
+
+        this.externals.set(relativeBundlePath(this.bundle, b), symbols);
       }
     }
 
@@ -185,6 +205,8 @@ export class ScopeHoistingPackager {
       mainEntry = null;
     }
 
+    let needsBundleQueue = this.shouldBundleQueue(this.bundle);
+
     // If any of the entry assets are wrapped, call parcelRequire so they are executed.
     for (let entry of entries) {
       if (this.wrappedAssets.has(entry.id) && !this.isScriptEntry(entry)) {
@@ -193,13 +215,22 @@ export class ScopeHoistingPackager {
         )});\n`;
 
         let entryExports = entry.symbols.get('*')?.local;
+
         if (
           entryExports &&
           entry === mainEntry &&
           this.exportedSymbols.has(entryExports)
         ) {
+          invariant(
+            !needsBundleQueue,
+            'Entry exports are not yet compaitble with async bundles',
+          );
           res += `\nvar ${entryExports} = ${parcelRequire}`;
         } else {
+          if (needsBundleQueue) {
+            parcelRequire = this.runWhenReady(this.bundle, parcelRequire);
+          }
+
           res += `\n${parcelRequire}`;
         }
 
@@ -247,6 +278,38 @@ export class ScopeHoistingPackager {
     };
   }
 
+  shouldBundleQueue(bundle: NamedBundle): boolean {
+    return (
+      this.useAsyncBundleRuntime &&
+      bundle.type === 'js' &&
+      bundle.bundleBehavior !== 'inline' &&
+      bundle.env.outputFormat === 'esmodule' &&
+      !bundle.env.isIsolated() &&
+      bundle.bundleBehavior !== 'isolated' &&
+      !this.bundleGraph.hasParentBundleOfType(bundle, 'js')
+    );
+  }
+
+  runWhenReady(bundle: NamedBundle, codeToRun: string): string {
+    let deps = this.bundleGraph
+      .getReferencedBundles(bundle)
+      .filter(b => this.shouldBundleQueue(b))
+      .map(b => b.publicId);
+
+    if (deps.length === 0) {
+      // If no deps we can safely execute immediately
+      return codeToRun;
+    }
+
+    let params = [
+      JSON.stringify(this.bundle.publicId),
+      fnExpr(this.bundle.env, [], [codeToRun]),
+      JSON.stringify(deps),
+    ];
+
+    return `$parcel$global.rwr(${params.join(', ')});`;
+  }
+
   async loadAssets(): Promise<Array<Asset>> {
     let queue = new PromiseQueue({maxConcurrent: 32});
     let wrapped = [];
@@ -268,8 +331,10 @@ export class ScopeHoistingPackager {
           .getIncomingDependencies(asset)
           .some(dep => dep.meta.shouldWrap && dep.specifierType !== 'url')
       ) {
-        this.wrappedAssets.add(asset.id);
-        wrapped.push(asset);
+        if (!asset.meta.isConstantModule) {
+          this.wrappedAssets.add(asset.id);
+          wrapped.push(asset);
+        }
       }
     });
 
@@ -283,9 +348,10 @@ export class ScopeHoistingPackager {
           actions.skipChildren();
           return;
         }
-
-        this.wrappedAssets.add(asset.id);
-        wrapped.push(asset);
+        if (!asset.meta.isConstantModule) {
+          this.wrappedAssets.add(asset.id);
+          wrapped.push(asset);
+        }
       }, wrappedAssetRoot);
     }
 
@@ -561,7 +627,7 @@ export class ScopeHoistingPackager {
       sourceMap?.offsetLines(1, 1);
       lineCount++;
 
-      code = `parcelRequire.register(${JSON.stringify(
+      code = `parcelRegister(${JSON.stringify(
         this.bundleGraph.getAssetPublicId(asset),
       )}, function(module, exports) {
 ${code}
@@ -582,6 +648,14 @@ ${code}
       this.needsPrelude = true;
     }
 
+    if (
+      !shouldWrap &&
+      this.shouldBundleQueue(this.bundle) &&
+      this.bundle.getEntryAssets().some(entry => entry.id === asset.id)
+    ) {
+      code = this.runWhenReady(this.bundle, code);
+    }
+
     return [code, sourceMap, lineCount];
   }
 
@@ -756,6 +830,20 @@ ${code}
     }
   }
 
+  isWrapped(resolved: Asset, parentAsset: Asset): boolean {
+    if (resolved.meta.isConstantModule) {
+      invariant(
+        this.bundle.hasAsset(resolved),
+        'Constant module not found in bundle',
+      );
+      return false;
+    }
+    return (
+      (!this.bundle.hasAsset(resolved) && !this.externalAssets.has(resolved)) ||
+      (this.wrappedAssets.has(resolved.id) && resolved !== parentAsset)
+    );
+  }
+
   getSymbolResolution(
     parentAsset: Asset,
     resolved: Asset,
@@ -777,13 +865,18 @@ ${code}
       return '{}';
     }
 
-    let isWrapped =
-      !this.bundle.hasAsset(resolvedAsset) ||
-      (this.wrappedAssets.has(resolvedAsset.id) &&
-        resolvedAsset !== parentAsset);
+    let isWrapped = this.isWrapped(resolvedAsset, parentAsset);
     let staticExports = resolvedAsset.meta.staticExports !== false;
     let publicId = this.bundleGraph.getAssetPublicId(resolvedAsset);
 
+    // External CommonJS dependencies need to be accessed as an object property rather than imported
+    // directly to maintain live binding.
+    let isExternalCommonJS =
+      !isWrapped &&
+      this.bundle.env.isLibrary &&
+      this.bundle.env.outputFormat === 'commonjs' &&
+      !this.bundle.hasAsset(resolvedAsset);
+
     // If the resolved asset is wrapped, but imported at the top-level by this asset,
     // then we hoist parcelRequire calls to the top of this asset so side effects run immediately.
     if (
@@ -849,7 +942,7 @@ ${code}
         return obj;
       }
     } else if (
-      (!staticExports || isWrapped || !symbol) &&
+      (!staticExports || isWrapped || !symbol || isExternalCommonJS) &&
       resolvedAsset !== parentAsset
     ) {
       // If the resolved asset is wrapped or has non-static exports,
@@ -887,9 +980,7 @@ ${code}
     let hoisted = this.hoistedRequires.get(dep.id);
     let res = '';
     let lineCount = 0;
-    let isWrapped =
-      !this.bundle.hasAsset(resolved) ||
-      (this.wrappedAssets.has(resolved.id) && resolved !== parentAsset);
+    let isWrapped = this.isWrapped(resolved, parentAsset);
 
     // If the resolved asset is wrapped and is imported in the top-level by this asset,
     // we need to run side effects when this asset runs. If the resolved asset is not
@@ -1143,9 +1234,13 @@ ${code}
     }
 
     for (let helper of this.usedHelpers) {
-      res += helpers[helper];
+      let currentHelper = helpers[helper];
+      if (typeof currentHelper === 'function') {
+        currentHelper = helpers[helper](this.bundle.env);
+      }
+      res += currentHelper;
       if (enableSourceMaps) {
-        lines += countLines(helpers[helper]) - 1;
+        lines += countLines(currentHelper) - 1;
       }
     }
 
@@ -1168,11 +1263,20 @@ ${code}
         if (enableSourceMaps) {
           lines += countLines(preludeCode) - 1;
         }
+
+        if (this.shouldBundleQueue(this.bundle)) {
+          let bundleQueuePreludeCode = bundleQueuePrelude(this.bundle.env);
+          res += bundleQueuePreludeCode;
+          if (enableSourceMaps) {
+            lines += countLines(bundleQueuePreludeCode) - 1;
+          }
+        }
       } else {
         // Otherwise, get the current parcelRequire global.
-        res += `var parcelRequire = $parcel$global[${JSON.stringify(
-          this.parcelRequireName,
-        )}];\n`;
+        const escaped = JSON.stringify(this.parcelRequireName);
+        res += `var parcelRequire = $parcel$global[${escaped}];\n`;
+        lines++;
+        res += `var parcelRegister = parcelRequire.register;\n`;
         lines++;
       }
     }

package/src/helpers.js

@@ -1,10 +1,12 @@
 // @flow strict-local
-export const prelude = (
-  parcelRequireName: string,
-): string => `var $parcel$modules = {};
+import type {Environment} from '@parcel/types';
+
+export const prelude = (parcelRequireName: string): string => `
+var $parcel$modules = {};
 var $parcel$inits = {};
 
 var parcelRequire = $parcel$global[${JSON.stringify(parcelRequireName)}];
+
 if (parcelRequire == null) {
   parcelRequire = function(id) {
     if (id in $parcel$modules) {
@@ -29,14 +31,86 @@ if (parcelRequire == null) {
 
   $parcel$global[${JSON.stringify(parcelRequireName)}] = parcelRequire;
 }
+
+var parcelRegister = parcelRequire.register;
 `;
 
-export const helpers = {
-  $parcel$export: `function $parcel$export(e, n, v, s) {
+export const fnExpr = (
+  env: Environment,
+  params: Array<string>,
+  body: Array<string>,
+): string => {
+  let block = `{ ${body.join(' ')} }`;
+
+  if (env.supports('arrow-functions')) {
+    return `(${params.join(', ')}) => ${block}`;
+  }
+
+  return `function (${params.join(', ')}) ${block}`;
+};
+
+export const bundleQueuePrelude = (env: Environment): string => `
+if (!$parcel$global.lb) {
+  // Set of loaded bundles
+  $parcel$global.lb = new Set();
+  // Queue of bundles to execute once they're dep bundles are loaded
+  $parcel$global.bq = [];
+
+  // Register loaded bundle
+  $parcel$global.rlb = ${fnExpr(
+    env,
+    ['bundle'],
+    ['$parcel$global.lb.add(bundle);', '$parcel$global.pq();'],
+  )}
+
+  // Run when ready
+  $parcel$global.rwr = ${fnExpr(
+    env,
+    // b = bundle public id
+    // r = run function to execute the bundle entry
+    // d = list of dependent bundles this bundle requires before executing
+    ['b', 'r', 'd'],
+    ['$parcel$global.bq.push({b, r, d});', '$parcel$global.pq();'],
+  )}
+
+  // Process queue
+  $parcel$global.pq = ${fnExpr(
+    env,
+    [],
+    [
+      `var runnableEntry = $parcel$global.bq.find(${fnExpr(
+        env,
+        ['i'],
+        [
+          `return i.d.every(${fnExpr(
+            env,
+            ['dep'],
+            ['return $parcel$global.lb.has(dep);'],
+          )});`,
+        ],
+      )});`,
+      'if (runnableEntry) {',
+      `$parcel$global.bq = $parcel$global.bq.filter(${fnExpr(
+        env,
+        ['i'],
+        ['return i.b !== runnableEntry.b;'],
+      )});`,
+      'runnableEntry.r();',
+      '$parcel$global.pq();',
+      '}',
+    ],
+  )}
+}
+`;
+
+const $parcel$export = `
+function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
-`,
-  $parcel$exportWildcard: `function $parcel$exportWildcard(dest, source) {
+`;
+
+const $parcel$exportWildcard = `
+function $parcel$exportWildcard(dest, source) {
   Object.keys(source).forEach(function(key) {
     if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
       return;
@@ -52,24 +126,44 @@ export const helpers = {
 
   return dest;
 }
-`,
-  $parcel$interopDefault: `function $parcel$interopDefault(a) {
+`;
+
+const $parcel$interopDefault = `
+function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
-`,
-  $parcel$global: `var $parcel$global =
-typeof globalThis !== 'undefined'
-  ? globalThis
-  : typeof self !== 'undefined'
-  ? self
-  : typeof window !== 'undefined'
-  ? window
-  : typeof global !== 'undefined'
-  ? global
-  : {};
-`,
-  $parcel$defineInteropFlag: `function $parcel$defineInteropFlag(a) {
+`;
+
+const $parcel$global = (env: Environment): string => {
+  if (env.supports('global-this')) {
+    return `
+      var $parcel$global = globalThis;
+    `;
+  }
+  return `
+      var $parcel$global =
+        typeof globalThis !== 'undefined'
+          ? globalThis
+          : typeof self !== 'undefined'
+          ? self
+          : typeof window !== 'undefined'
+          ? window
+          : typeof global !== 'undefined'
+          ? global
+          : {};
+  `;
+};
+
+const $parcel$defineInteropFlag = `
+function $parcel$defineInteropFlag(a) {
   Object.defineProperty(a, '__esModule', {value: true, configurable: true});
 }
-`,
+`;
+
+export const helpers = {
+  $parcel$export,
+  $parcel$exportWildcard,
+  $parcel$interopDefault,
+  $parcel$global,
+  $parcel$defineInteropFlag,
 };

package/src/index.js

@@ -2,24 +2,65 @@
 import type {Async} from '@parcel/types';
 import type SourceMap from '@parcel/source-map';
 import {Packager} from '@parcel/plugin';
-import {replaceInlineReferences, replaceURLReferences} from '@parcel/utils';
-import {hashString} from '@parcel/hash';
+import {
+  replaceInlineReferences,
+  replaceURLReferences,
+  validateSchema,
+  type SchemaEntity,
+} from '@parcel/utils';
+import {encodeJSONKeyComponent} from '@parcel/diagnostic';
+import {hashString} from '@parcel/rust';
 import path from 'path';
 import nullthrows from 'nullthrows';
 import {DevPackager} from './DevPackager';
 import {ScopeHoistingPackager} from './ScopeHoistingPackager';
 
+type JSPackagerConfig = {|
+  parcelRequireName: string,
+  unstable_asyncBundleRuntime: boolean,
+|};
+
+const CONFIG_SCHEMA: SchemaEntity = {
+  type: 'object',
+  properties: {
+    unstable_asyncBundleRuntime: {
+      type: 'boolean',
+    },
+  },
+  additionalProperties: false,
+};
+
 export default (new Packager({
-  async loadConfig({config, options}) {
+  async loadConfig({config, options}): Promise<JSPackagerConfig> {
     // Generate a name for the global parcelRequire function that is unique to this project.
     // This allows multiple parcel builds to coexist on the same page.
     let pkg = await config.getConfigFrom(
       path.join(options.projectRoot, 'index'),
       ['package.json'],
     );
+
+    let packageKey = '@parcel/packager-js';
+
+    if (pkg?.contents[packageKey]) {
+      validateSchema.diagnostic(
+        CONFIG_SCHEMA,
+        {
+          data: pkg?.contents[packageKey],
+          source: await options.inputFS.readFile(pkg.filePath, 'utf8'),
+          filePath: pkg.filePath,
+          prependKey: `/${encodeJSONKeyComponent(packageKey)}`,
+        },
+        packageKey,
+        `Invalid config for ${packageKey}`,
+      );
+    }
+
     let name = pkg?.contents?.name ?? '';
     return {
       parcelRequireName: 'parcelRequire' + hashString(name).slice(-4),
+      unstable_asyncBundleRuntime: Boolean(
+        pkg?.contents[packageKey]?.unstable_asyncBundleRuntime,
+      ),
     };
   },
   async package({
@@ -51,6 +92,7 @@ export default (new Packager({
             bundleGraph,
             bundle,
             nullthrows(config).parcelRequireName,
+            nullthrows(config).unstable_asyncBundleRuntime,
           )
         : new DevPackager(
             options,