@atlaspack/runtime-js 2.15.0 → 2.15.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaspack/runtime-js
 
+## 2.15.1
+
+### Patch Changes
+
+- [#692](https://github.com/atlassian-labs/atlaspack/pull/692) [`13aef17`](https://github.com/atlassian-labs/atlaspack/commit/13aef177eea289a6e40d2113b5ec1ac9be18a33d) Thanks [@JakeLane](https://github.com/JakeLane)! - Add fallback behaviour when conditional bundle is missing
+
+- Updated dependencies [[`13aef17`](https://github.com/atlassian-labs/atlaspack/commit/13aef177eea289a6e40d2113b5ec1ac9be18a33d)]:
+  - @atlaspack/feature-flags@2.19.1
+  - @atlaspack/utils@2.17.1
+  - @atlaspack/plugin@2.14.19
+
 ## 2.15.0
 
 ### Minor Changes

package/lib/JSRuntime.js

@@ -208,9 +208,19 @@ var _default = exports.default = new (_plugin().Runtime)({
       const conditions = bundleGraph.getConditionsForDependencies(conditionalDependencies, bundle);
       for (const cond of conditions) {
         const requireName = (0, _featureFlags().getFeatureFlag)('hmrImprovements') || 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}')})`;
+        const fallbackUrls = cond => {
+          return `[${[...cond.ifTrueBundles, ...cond.ifFalseBundles].map(target => {
+            let relativePathExpr = getRelativePathExpr(bundle, target, options);
+            return getAbsoluteUrlExpr(relativePathExpr, bundle, config.domainSharding);
+          }).join(',')}]`;
+        };
+        const shouldUseFallback = options.mode === 'development' ? (0, _featureFlags().getFeatureFlag)('condbDevFallbackDev') : (0, _featureFlags().getFeatureFlag)('condbDevFallbackProd');
+        const loaderPath = `./helpers/conditional-loader${options.mode === 'development' ? '-dev' : ''}`;
+        const ifTrue = `function (){return ${requireName}('${cond.ifTrueAssetId}')}`;
+        const ifFalse = `function (){return ${requireName}('${cond.ifFalseAssetId}')}`;
+        const assetCode = `module.exports = require('${loaderPath}')('${cond.key}', ${ifTrue}, ${ifFalse}${shouldUseFallback ? `, {loader: require('./helpers/browser/sync-js-loader'), urls: ${fallbackUrls(cond)}}` : ''})`;
         assets.push({
-          filePath: _path().default.join(__dirname, `/conditions/${cond.publicId}.js`),
+          filePath: _path().default.join(__dirname, `/conditions-${cond.publicId}.js`),
           code: assetCode,
           // This dependency is important, as it's the last symbol handled in scope hoisting.
           // That means that scope hoisting will use the module id for this asset to replace the symbol

package/lib/helpers/browser/sync-js-loader.js

@@ -0,0 +1,33 @@
+"use strict";
+
+const cacheLoader = require('../cacheLoader');
+module.exports = function loadJSBundle(bundle) {
+  // Don't insert the same script twice (e.g. if it was already in the HTML)
+  let existingScripts = document.getElementsByTagName('script');
+  let isCurrentBundle = function (script) {
+    return script.src === bundle;
+  };
+  if ([].concat(existingScripts).some(isCurrentBundle)) {
+    return;
+  }
+
+  // Request using XHR because it's synchronous and we can't use promises here
+  // This has extremely poor performance because we're idle during this fetch, so we only use this so that the app won't crash
+  const xhr = new XMLHttpRequest();
+  xhr.open('GET', bundle, false);
+  try {
+    xhr.send();
+    if (xhr.status === 200) {
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.text = xhr.responseText;
+
+      // Execute the script synchronously
+      document.head.appendChild(script);
+    } else {
+      throw new TypeError(`Failed to fetch dynamically imported module: ${bundle}. Status: ${xhr.status}`);
+    }
+  } catch (e) {
+    throw new TypeError(`Failed to fetch dynamically imported module: ${bundle}. Error: ${e.message}`);
+  }
+};

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

@@ -1,6 +1,6 @@
 "use strict";
 
-module.exports = function loadCond(cond, ifTrue, ifFalse) {
+module.exports = function loadCond(cond, ifTrue, ifFalse, fallback) {
   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.');
   }
@@ -10,7 +10,14 @@ module.exports = function loadCond(cond, ifTrue, ifFalse) {
   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;
+    console.error('Conditional dependency was not registered when executing. Ensure the server sends the correct scripts to the client. Falling back to synchronous bundle loading.');
+    if (fallback) {
+      for (const url of fallback.urls) {
+        fallback.loader(url);
+      }
+      return globalThis.__MCOND(cond) ? ifTrue() : ifFalse();
+    } else {
+      throw new Error('No fallback urls specified, cannot fallback safely');
+    }
   }
 };

package/lib/helpers/conditional-loader.js

@@ -1,5 +1,18 @@
 "use strict";
 
-module.exports = function loadCond(cond, ifTrue, ifFalse) {
-  return globalThis.__MCOND && globalThis.__MCOND(cond) ? ifTrue() : ifFalse();
+module.exports = function loadCond(cond, ifTrue, ifFalse, fallback) {
+  let result = globalThis.__MCOND(cond);
+  try {
+    return result ? ifTrue() : ifFalse();
+  } catch (err) {
+    if (fallback) {
+      console.error('Conditional dependency was not registered when executing. Falling back to synchronous bundle loading.');
+      for (const url of fallback.urls) {
+        fallback.loader(url);
+      }
+      return result ? ifTrue() : ifFalse();
+    } else {
+      throw err;
+    }
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaspack/runtime-js",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "license": "(MIT OR Apache-2.0)",
   "publishConfig": {
     "access": "public"
@@ -17,9 +17,9 @@
   "dependencies": {
     "@atlaspack/diagnostic": "2.14.1",
     "@atlaspack/domain-sharding": "2.14.1",
-    "@atlaspack/feature-flags": "2.19.0",
-    "@atlaspack/plugin": "2.14.18",
-    "@atlaspack/utils": "2.17.0",
+    "@atlaspack/feature-flags": "2.19.1",
+    "@atlaspack/plugin": "2.14.19",
+    "@atlaspack/utils": "2.17.1",
     "nullthrows": "^1.1.1"
   },
   "type": "commonjs"

package/src/JSRuntime.js

@@ -221,14 +221,47 @@ export default (new Runtime({
             ? 'parcelRequire'
             : '__parcel__require__';
 
-        const assetCode = `module.exports = require('../helpers/conditional-loader${
+        const fallbackUrls = (cond) => {
+          return `[${[...cond.ifTrueBundles, ...cond.ifFalseBundles]
+            .map((target) => {
+              let relativePathExpr = getRelativePathExpr(
+                bundle,
+                target,
+                options,
+              );
+              return getAbsoluteUrlExpr(
+                relativePathExpr,
+                bundle,
+                config.domainSharding,
+              );
+            })
+            .join(',')}]`;
+        };
+
+        const shouldUseFallback =
+          options.mode === 'development'
+            ? getFeatureFlag('condbDevFallbackDev')
+            : getFeatureFlag('condbDevFallbackProd');
+
+        const loaderPath = `./helpers/conditional-loader${
           options.mode === 'development' ? '-dev' : ''
-        }')('${cond.key}', function (){return ${requireName}('${
-          cond.ifTrueAssetId
-        }')}, function (){return ${requireName}('${cond.ifFalseAssetId}')})`;
+        }`;
+
+        const ifTrue = `function (){return ${requireName}('${cond.ifTrueAssetId}')}`;
+        const ifFalse = `function (){return ${requireName}('${cond.ifFalseAssetId}')}`;
+
+        const assetCode = `module.exports = require('${loaderPath}')('${
+          cond.key
+        }', ${ifTrue}, ${ifFalse}${
+          shouldUseFallback
+            ? `, {loader: require('./helpers/browser/sync-js-loader'), urls: ${fallbackUrls(
+                cond,
+              )}}`
+            : ''
+        })`;
 
         assets.push({
-          filePath: path.join(__dirname, `/conditions/${cond.publicId}.js`),
+          filePath: path.join(__dirname, `/conditions-${cond.publicId}.js`),
           code: assetCode,
           // This dependency is important, as it's the last symbol handled in scope hoisting.
           // That means that scope hoisting will use the module id for this asset to replace the symbol

package/src/helpers/browser/sync-js-loader.js

@@ -0,0 +1,39 @@
+const cacheLoader = require('../cacheLoader');
+
+module.exports = function loadJSBundle(bundle) {
+  // Don't insert the same script twice (e.g. if it was already in the HTML)
+  let existingScripts = document.getElementsByTagName('script');
+  let isCurrentBundle = function (script) {
+    return script.src === bundle;
+  };
+
+  if ([].concat(existingScripts).some(isCurrentBundle)) {
+    return;
+  }
+
+  // Request using XHR because it's synchronous and we can't use promises here
+  // This has extremely poor performance because we're idle during this fetch, so we only use this so that the app won't crash
+  const xhr = new XMLHttpRequest();
+  xhr.open('GET', bundle, false);
+
+  try {
+    xhr.send();
+
+    if (xhr.status === 200) {
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.text = xhr.responseText;
+
+      // Execute the script synchronously
+      document.head.appendChild(script);
+    } else {
+      throw new TypeError(
+        `Failed to fetch dynamically imported module: ${bundle}. Status: ${xhr.status}`,
+      );
+    }
+  } catch (e) {
+    throw new TypeError(
+      `Failed to fetch dynamically imported module: ${bundle}. Error: ${e.message}`,
+    );
+  }
+};

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

@@ -1,4 +1,4 @@
-module.exports = function loadCond(cond, ifTrue, ifFalse) {
+module.exports = function loadCond(cond, ifTrue, ifFalse, fallback) {
   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.',
@@ -15,9 +15,17 @@ module.exports = function loadCond(cond, ifTrue, ifFalse) {
     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").',
+      'Conditional dependency was not registered when executing. Ensure the server sends the correct scripts to the client. Falling back to synchronous bundle loading.',
     );
 
-    throw err;
+    if (fallback) {
+      for (const url of fallback.urls) {
+        fallback.loader(url);
+      }
+
+      return globalThis.__MCOND(cond) ? ifTrue() : ifFalse();
+    } else {
+      throw new Error('No fallback urls specified, cannot fallback safely');
+    }
   }
 };

package/src/helpers/conditional-loader.js

@@ -1,3 +1,19 @@
-module.exports = function loadCond(cond, ifTrue, ifFalse) {
-  return globalThis.__MCOND && globalThis.__MCOND(cond) ? ifTrue() : ifFalse();
+module.exports = function loadCond(cond, ifTrue, ifFalse, fallback) {
+  let result = globalThis.__MCOND(cond);
+  try {
+    return result ? ifTrue() : ifFalse();
+  } catch (err) {
+    if (fallback) {
+      console.error(
+        'Conditional dependency was not registered when executing. Falling back to synchronous bundle loading.',
+      );
+      for (const url of fallback.urls) {
+        fallback.loader(url);
+      }
+
+      return result ? ifTrue() : ifFalse();
+    } else {
+      throw err;
+    }
+  }
 };