@atlaspack/runtime-js 2.12.1-dev.3401 → 2.12.1-dev.3450

package/lib/JSRuntime.js

@@ -39,6 +39,13 @@ function _nullthrows() {
   };
   return data;
 }
+function _featureFlags() {
+  const data = require("@atlaspack/feature-flags");
+  _featureFlags = function () {
+    return data;
+  };
+  return data;
+}
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Used for as="" in preload/prefetch
 const TYPE_TO_RESOURCE_PRIORITY = {
@@ -131,6 +138,7 @@ var _default = exports.default = new (_plugin().Runtime)({
     }
     let {
       asyncDependencies,
+      conditionalDependencies,
       otherDependencies
     } = getDependencies(bundle);
     let assets = [];
@@ -180,6 +188,24 @@ var _default = exports.default = new (_plugin().Runtime)({
         }
       }
     }
+    if ((0, _featureFlags().getFeatureFlag)('conditionalBundlingApi')) {
+      // For any conditions that are used in this bundle, we want to produce a runtime asset that is used to
+      // select the correct dependency that condition maps to at runtime - the conditions in the bundle will then be
+      // replaced with a reference to this asset to implement the selection.
+      const conditions = bundleGraph.getConditionsForDependencies(conditionalDependencies);
+      for (const cond of conditions) {
+        const requireName = bundle.env.shouldScopeHoist ? 'parcelRequire' : '__parcel__require__';
+        const assetCode = `module.exports = require('../helpers/conditional-loader${options.mode === 'development' ? '-dev' : ''}')('${cond.key}', function (){return ${requireName}('${cond.ifTrueAssetId}')}, function (){return ${requireName}('${cond.ifFalseAssetId}')})`;
+        assets.push({
+          filePath: _path().default.join(__dirname, `/conditions/${cond.publicId}.js`),
+          code: assetCode,
+          dependency: cond.ifTrueDependency,
+          env: {
+            sourceType: 'module'
+          }
+        });
+      }
+    }
     for (let dependency of otherDependencies) {
       // Resolve the dependency to a bundle. If inline, export the dependency id,
       // which will be replaced with the contents of that bundle later.
@@ -278,6 +304,7 @@ function getDependencies(bundle) {
   } else {
     let asyncDependencies = [];
     let otherDependencies = [];
+    let conditionalDependencies = [];
     bundle.traverse(node => {
       if (node.type !== 'dependency') {
         return;
@@ -285,16 +312,20 @@ function getDependencies(bundle) {
       let dependency = node.value;
       if (dependency.priority === 'lazy' && dependency.specifierType !== 'url') {
         asyncDependencies.push(dependency);
+      } else if (dependency.priority === 'conditional') {
+        conditionalDependencies.push(dependency);
       } else {
         otherDependencies.push(dependency);
       }
     });
     bundleDependencies.set(bundle, {
       asyncDependencies,
+      conditionalDependencies,
       otherDependencies
     });
     return {
       asyncDependencies,
+      conditionalDependencies,
       otherDependencies
     };
   }
@@ -338,28 +369,25 @@ function getLoaderRuntime({
   let needsDynamicImportPolyfill = !bundle.env.isLibrary && !bundle.env.supports('dynamic-import', true);
   let needsEsmLoadPrelude = false;
   let loaderModules = [];
-  for (let to of externalBundles) {
+  function getLoaderForBundle(bundle, to) {
     let loader = loaders[to.type];
     if (!loader) {
-      continue;
+      return;
     }
     if (to.type === 'js' && to.env.outputFormat === 'esmodule' && !needsDynamicImportPolyfill && shouldUseRuntimeManifest(bundle, options)) {
-      loaderModules.push(`load(${JSON.stringify(to.publicId)})`);
       needsEsmLoadPrelude = true;
-      continue;
+      return `load(${JSON.stringify(to.publicId)})`;
     }
     let relativePathExpr = getRelativePathExpr(bundle, to, options);
 
     // Use esmodule loader if possible
     if (to.type === 'js' && to.env.outputFormat === 'esmodule') {
       if (!needsDynamicImportPolyfill) {
-        loaderModules.push(`__parcel__import__("./" + ${relativePathExpr})`);
-        continue;
+        return `__parcel__import__("./" + ${relativePathExpr})`;
       }
       loader = (0, _nullthrows().default)(loaders.IMPORT_POLYFILL, `No import() polyfill available for context '${bundle.env.context}'`);
     } else if (to.type === 'js' && to.env.outputFormat === 'commonjs') {
-      loaderModules.push(`Promise.resolve(__parcel__require__("./" + ${relativePathExpr}))`);
-      continue;
+      return `Promise.resolve(__parcel__require__("./" + ${relativePathExpr}))`;
     }
     let absoluteUrlExpr = shouldUseRuntimeManifest(bundle, options) ? `require('./helpers/bundle-manifest').resolve(${JSON.stringify(to.publicId)})` : getAbsoluteUrlExpr(relativePathExpr, bundle);
     let code = `require(${JSON.stringify(loader)})(${absoluteUrlExpr})`;
@@ -369,7 +397,22 @@ function getLoaderRuntime({
     if (options.mode === 'development' && bundle.env.outputFormat === 'global') {
       code += '.catch(err => {delete module.bundle.cache[module.id]; throw err;})';
     }
-    loaderModules.push(code);
+    return code;
+  }
+  if ((0, _featureFlags().getFeatureFlag)('conditionalBundlingApi')) {
+    let conditionalDependencies = externalBundles.flatMap(to => getDependencies(to).conditionalDependencies);
+    for (const cond of bundleGraph.getConditionsForDependencies(conditionalDependencies)) {
+      // This bundle has a conditional dependency, we need to load it as it may not be present
+      let ifTrueBundle = (0, _nullthrows().default)(bundleGraph.getReferencedBundle(cond.ifTrueDependency, bundle), 'ifTrueBundle was null');
+      let ifFalseBundle = (0, _nullthrows().default)(bundleGraph.getReferencedBundle(cond.ifFalseDependency, bundle), 'ifFalseBundle was null');
+
+      // Load conditional bundles with helper (and a dev mode with additional hints)
+      loaderModules.push(`require('./helpers/conditional-loader${options.mode === 'development' ? '-dev' : ''}')('${cond.key}', function (){return ${getLoaderForBundle(bundle, ifTrueBundle) ?? `Promise.resolve()`}}, function (){return ${getLoaderForBundle(bundle, ifFalseBundle) ?? `Promise.resolve()`}})`);
+    }
+  }
+  for (let to of externalBundles) {
+    let loaderModule = getLoaderForBundle(bundle, to);
+    if (loaderModule !== undefined) loaderModules.push(loaderModule);
   }
 
   // Similar to the comment above, this also used to be skipped when shouldBuildLazily was true,

package/lib/helpers/conditional-loader-dev.js

@@ -0,0 +1,16 @@
+"use strict";
+
+module.exports = function (cond, ifTrue, ifFalse) {
+  if (typeof globalThis.__MCOND !== 'function') {
+    throw new TypeError('"globalThis.__MCOND" was not set to an object. Ensure the function is set to return the key condition for conditional bundles to load with.');
+  }
+  if (typeof globalThis.__MCOND(cond) === 'undefined') {
+    console.error("\"".concat(cond, "\" did not match on globalThis.__MCOND. The conditional dependency will be loaded with the false variant."));
+  }
+  try {
+    return globalThis.__MCOND(cond) ? ifTrue() : ifFalse();
+  } catch (err) {
+    console.error('Conditional dependency was missing. Ensure the server sends the correct scripts to the client ("conditional-manifest.json").');
+    throw err;
+  }
+};

package/lib/helpers/conditional-loader.js

@@ -0,0 +1,5 @@
+"use strict";
+
+module.exports = function (cond, ifTrue, ifFalse) {
+  return globalThis.__MCOND && globalThis.__MCOND(cond) ? ifTrue() : ifFalse();
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaspack/runtime-js",
-  "version": "2.12.1-dev.3401+b483af77f",
-  "license": "MIT",
+  "version": "2.12.1-dev.3450+58845ef87",
+  "license": "(MIT OR Apache-2.0)",
   "publishConfig": {
     "access": "public"
   },
@@ -13,13 +13,14 @@
   "source": "src/JSRuntime.js",
   "engines": {
     "node": ">= 16.0.0",
-    "parcel": "^2.12.1-dev.3401+b483af77f"
+    "parcel": "^2.12.1-dev.3450+58845ef87"
   },
   "dependencies": {
-    "@atlaspack/diagnostic": "2.12.1-dev.3401+b483af77f",
-    "@atlaspack/plugin": "2.12.1-dev.3401+b483af77f",
-    "@atlaspack/utils": "2.12.1-dev.3401+b483af77f",
+    "@atlaspack/diagnostic": "2.12.1-dev.3450+58845ef87",
+    "@atlaspack/feature-flags": "2.12.1-dev.3450+58845ef87",
+    "@atlaspack/plugin": "2.12.1-dev.3450+58845ef87",
+    "@atlaspack/utils": "2.12.1-dev.3450+58845ef87",
     "nullthrows": "^1.1.1"
   },
-  "gitHead": "b483af77f02d1258c8dad156e097b94f83671d8e"
+  "gitHead": "58845ef87446fcedb7d7d8876440c64184645cbb"
 }

package/src/JSRuntime.js

@@ -19,6 +19,7 @@ import {
 import {encodeJSONKeyComponent} from '@atlaspack/diagnostic';
 import path from 'path';
 import nullthrows from 'nullthrows';
+import {getFeatureFlag} from '@atlaspack/feature-flags';
 
 // Used for as="" in preload/prefetch
 const TYPE_TO_RESOURCE_PRIORITY = {
@@ -66,6 +67,7 @@ let bundleDependencies = new WeakMap<
   NamedBundle,
   {|
     asyncDependencies: Array<Dependency>,
+    conditionalDependencies: Array<Dependency>,
     otherDependencies: Array<Dependency>,
   |},
 >();
@@ -127,7 +129,8 @@ export default (new Runtime({
       return;
     }
 
-    let {asyncDependencies, otherDependencies} = getDependencies(bundle);
+    let {asyncDependencies, conditionalDependencies, otherDependencies} =
+      getDependencies(bundle);
 
     let assets = [];
     for (let dependency of asyncDependencies) {
@@ -186,6 +189,33 @@ export default (new Runtime({
       }
     }
 
+    if (getFeatureFlag('conditionalBundlingApi')) {
+      // For any conditions that are used in this bundle, we want to produce a runtime asset that is used to
+      // select the correct dependency that condition maps to at runtime - the conditions in the bundle will then be
+      // replaced with a reference to this asset to implement the selection.
+      const conditions = bundleGraph.getConditionsForDependencies(
+        conditionalDependencies,
+      );
+      for (const cond of conditions) {
+        const requireName = bundle.env.shouldScopeHoist
+          ? 'parcelRequire'
+          : '__parcel__require__';
+
+        const assetCode = `module.exports = require('../helpers/conditional-loader${
+          options.mode === 'development' ? '-dev' : ''
+        }')('${cond.key}', function (){return ${requireName}('${
+          cond.ifTrueAssetId
+        }')}, function (){return ${requireName}('${cond.ifFalseAssetId}')})`;
+
+        assets.push({
+          filePath: path.join(__dirname, `/conditions/${cond.publicId}.js`),
+          code: assetCode,
+          dependency: cond.ifTrueDependency,
+          env: {sourceType: 'module'},
+        });
+      }
+    }
+
     for (let dependency of otherDependencies) {
       // Resolve the dependency to a bundle. If inline, export the dependency id,
       // which will be replaced with the contents of that bundle later.
@@ -299,6 +329,7 @@ export default (new Runtime({
 
 function getDependencies(bundle: NamedBundle): {|
   asyncDependencies: Array<Dependency>,
+  conditionalDependencies: Array<Dependency>,
   otherDependencies: Array<Dependency>,
 |} {
   let cachedDependencies = bundleDependencies.get(bundle);
@@ -308,6 +339,7 @@ function getDependencies(bundle: NamedBundle): {|
   } else {
     let asyncDependencies = [];
     let otherDependencies = [];
+    let conditionalDependencies = [];
     bundle.traverse(node => {
       if (node.type !== 'dependency') {
         return;
@@ -319,12 +351,18 @@ function getDependencies(bundle: NamedBundle): {|
         dependency.specifierType !== 'url'
       ) {
         asyncDependencies.push(dependency);
+      } else if (dependency.priority === 'conditional') {
+        conditionalDependencies.push(dependency);
       } else {
         otherDependencies.push(dependency);
       }
     });
-    bundleDependencies.set(bundle, {asyncDependencies, otherDependencies});
-    return {asyncDependencies, otherDependencies};
+    bundleDependencies.set(bundle, {
+      asyncDependencies,
+      conditionalDependencies,
+      otherDependencies,
+    });
+    return {asyncDependencies, conditionalDependencies, otherDependencies};
   }
 }
 
@@ -378,10 +416,13 @@ function getLoaderRuntime({
   let needsEsmLoadPrelude = false;
   let loaderModules = [];
 
-  for (let to of externalBundles) {
+  function getLoaderForBundle(
+    bundle: NamedBundle,
+    to: NamedBundle,
+  ): string | void {
     let loader = loaders[to.type];
     if (!loader) {
-      continue;
+      return;
     }
 
     if (
@@ -390,9 +431,8 @@ function getLoaderRuntime({
       !needsDynamicImportPolyfill &&
       shouldUseRuntimeManifest(bundle, options)
     ) {
-      loaderModules.push(`load(${JSON.stringify(to.publicId)})`);
       needsEsmLoadPrelude = true;
-      continue;
+      return `load(${JSON.stringify(to.publicId)})`;
     }
 
     let relativePathExpr = getRelativePathExpr(bundle, to, options);
@@ -400,8 +440,7 @@ function getLoaderRuntime({
     // Use esmodule loader if possible
     if (to.type === 'js' && to.env.outputFormat === 'esmodule') {
       if (!needsDynamicImportPolyfill) {
-        loaderModules.push(`__parcel__import__("./" + ${relativePathExpr})`);
-        continue;
+        return `__parcel__import__("./" + ${relativePathExpr})`;
       }
 
       loader = nullthrows(
@@ -409,10 +448,7 @@ function getLoaderRuntime({
         `No import() polyfill available for context '${bundle.env.context}'`,
       );
     } else if (to.type === 'js' && to.env.outputFormat === 'commonjs') {
-      loaderModules.push(
-        `Promise.resolve(__parcel__require__("./" + ${relativePathExpr}))`,
-      );
-      continue;
+      return `Promise.resolve(__parcel__require__("./" + ${relativePathExpr}))`;
     }
 
     let absoluteUrlExpr = shouldUseRuntimeManifest(bundle, options)
@@ -431,7 +467,42 @@ function getLoaderRuntime({
       code +=
         '.catch(err => {delete module.bundle.cache[module.id]; throw err;})';
     }
-    loaderModules.push(code);
+    return code;
+  }
+
+  if (getFeatureFlag('conditionalBundlingApi')) {
+    let conditionalDependencies = externalBundles.flatMap(
+      to => getDependencies(to).conditionalDependencies,
+    );
+    for (const cond of bundleGraph.getConditionsForDependencies(
+      conditionalDependencies,
+    )) {
+      // This bundle has a conditional dependency, we need to load it as it may not be present
+      let ifTrueBundle = nullthrows(
+        bundleGraph.getReferencedBundle(cond.ifTrueDependency, bundle),
+        'ifTrueBundle was null',
+      );
+      let ifFalseBundle = nullthrows(
+        bundleGraph.getReferencedBundle(cond.ifFalseDependency, bundle),
+        'ifFalseBundle was null',
+      );
+
+      // Load conditional bundles with helper (and a dev mode with additional hints)
+      loaderModules.push(
+        `require('./helpers/conditional-loader${
+          options.mode === 'development' ? '-dev' : ''
+        }')('${cond.key}', function (){return ${
+          getLoaderForBundle(bundle, ifTrueBundle) ?? `Promise.resolve()`
+        }}, function (){return ${
+          getLoaderForBundle(bundle, ifFalseBundle) ?? `Promise.resolve()`
+        }})`,
+      );
+    }
+  }
+
+  for (let to of externalBundles) {
+    let loaderModule = getLoaderForBundle(bundle, to);
+    if (loaderModule !== undefined) loaderModules.push(loaderModule);
   }
 
   // Similar to the comment above, this also used to be skipped when shouldBuildLazily was true,

package/src/helpers/conditional-loader-dev.js

@@ -0,0 +1,23 @@
+module.exports = function loadCond(cond, ifTrue, ifFalse) {
+  if (typeof globalThis.__MCOND !== 'function') {
+    throw new TypeError(
+      '"globalThis.__MCOND" was not set to an object. Ensure the function is set to return the key condition for conditional bundles to load with.',
+    );
+  }
+
+  if (typeof globalThis.__MCOND(cond) === 'undefined') {
+    console.error(
+      `"${cond}" did not match on globalThis.__MCOND. The conditional dependency will be loaded with the false variant.`,
+    );
+  }
+
+  try {
+    return globalThis.__MCOND(cond) ? ifTrue() : ifFalse();
+  } catch (err) {
+    console.error(
+      'Conditional dependency was missing. Ensure the server sends the correct scripts to the client ("conditional-manifest.json").',
+    );
+
+    throw err;
+  }
+};

package/src/helpers/conditional-loader.js

@@ -0,0 +1,3 @@
+module.exports = function loadCond(cond, ifTrue, ifFalse) {
+  return globalThis.__MCOND && globalThis.__MCOND(cond) ? ifTrue() : ifFalse();
+};