@parcel/packager-js 2.0.0-nightly.1358 → 2.0.0-nightly.1359

package/lib/ESMOutputFormat.js

@@ -88,6 +88,11 @@ class ESMOutputFormat {
       res += `\nexport {${exportSpecifiers.join(', ')}};`;
       lines++;
     }
+    if (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

@@ -94,11 +94,12 @@ class ScopeHoistingPackager {
   needsPrelude = false;
   usedHelpers = new Set();
   externalAssets = new Set();
-  constructor(options, bundleGraph, bundle, parcelRequireName) {
+  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';
@@ -181,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) {
@@ -189,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;
@@ -225,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
@@ -494,6 +512,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) {
@@ -902,6 +923,13 @@ ${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`;

package/lib/helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.prelude = exports.helpers = void 0;
+exports.prelude = exports.helpers = exports.fnExpr = exports.bundleQueuePrelude = void 0;
 const prelude = parcelRequireName => `
 var $parcel$modules = {};
 var $parcel$inits = {};
@@ -35,6 +35,36 @@ if (parcelRequire == null) {
 }
 `;
 exports.prelude = prelude;
+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});

package/lib/index.js

@@ -18,6 +18,13 @@ function _utils() {
   };
   return data;
 }
+function _diagnostic() {
+  const data = require("@parcel/diagnostic");
+  _diagnostic = function () {
+    return data;
+  };
+  return data;
+}
 function _hash() {
   const data = require("@parcel/hash");
   _hash = function () {
@@ -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 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 ? 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, _hash().hashString)(name).slice(-4),
+      unstable_asyncBundleRuntime: Boolean(pkg === null || pkg === void 0 ? 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.0.0-nightly.1358+1832d18d6",
+  "version": "2.0.0-nightly.1359+0b5edcfaf",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,17 +17,17 @@
   "source": "src/index.js",
   "engines": {
     "node": ">= 12.0.0",
-    "parcel": "2.0.0-nightly.1356+1832d18d6"
+    "parcel": "2.0.0-nightly.1357+0b5edcfaf"
   },
   "dependencies": {
-    "@parcel/diagnostic": "2.0.0-nightly.1358+1832d18d6",
-    "@parcel/hash": "2.9.4-nightly.2981+1832d18d6",
-    "@parcel/plugin": "2.0.0-nightly.1358+1832d18d6",
+    "@parcel/diagnostic": "2.0.0-nightly.1359+0b5edcfaf",
+    "@parcel/hash": "2.9.4-nightly.2982+0b5edcfaf",
+    "@parcel/plugin": "2.0.0-nightly.1359+0b5edcfaf",
     "@parcel/source-map": "^2.1.1",
-    "@parcel/types": "2.0.0-nightly.1358+1832d18d6",
-    "@parcel/utils": "2.0.0-nightly.1358+1832d18d6",
+    "@parcel/types": "2.0.0-nightly.1359+0b5edcfaf",
+    "@parcel/utils": "2.0.0-nightly.1359+0b5edcfaf",
     "globals": "^13.2.0",
     "nullthrows": "^1.1.1"
   },
-  "gitHead": "1832d18d62bd0d99dc283afd3f23b6db49555d1c"
+  "gitHead": "0b5edcfaf174a62f454f774d1c78cbf0004cb457"
 }

package/src/ESMOutputFormat.js

@@ -106,6 +106,14 @@ export class ESMOutputFormat implements OutputFormat {
       lines++;
     }
 
+    if (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>;
@@ -101,11 +102,13 @@ export class ScopeHoistingPackager {
     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);
@@ -202,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)) {
@@ -210,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}`;
         }
 
@@ -264,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 = [];
@@ -599,6 +645,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];
   }
 
@@ -1199,6 +1253,14 @@ ${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(

package/src/helpers.js

@@ -32,6 +32,74 @@ if (parcelRequire == null) {
 }
 `;
 
+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});

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 {
+  replaceInlineReferences,
+  replaceURLReferences,
+  validateSchema,
+  type SchemaEntity,
+} from '@parcel/utils';
+import {encodeJSONKeyComponent} from '@parcel/diagnostic';
 import {hashString} from '@parcel/hash';
 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,