@atlaspack/runtime-js 2.15.0 → 2.15.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaspack/runtime-js
 
+## 2.15.2
+
+### Patch Changes
+
+- [#702](https://github.com/atlassian-labs/atlaspack/pull/702) [`daaa768`](https://github.com/atlassian-labs/atlaspack/commit/daaa7688786772d7e3713b71c5bba6b89ec704aa) Thanks [@alshdavid](https://github.com/alshdavid)! - Fixes to Flow types
+
+- Updated dependencies [[`daaa768`](https://github.com/atlassian-labs/atlaspack/commit/daaa7688786772d7e3713b71c5bba6b89ec704aa), [`1c7865a`](https://github.com/atlassian-labs/atlaspack/commit/1c7865a64451116d94015e248302435839d347c0), [`a0b959f`](https://github.com/atlassian-labs/atlaspack/commit/a0b959fbf61fc3f820ff03c7e8988945fe40a91a)]:
+  - @atlaspack/plugin@2.14.20
+  - @atlaspack/feature-flags@2.19.2
+  - @atlaspack/utils@2.17.2
+
+## 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
@@ -270,7 +280,9 @@ var _default = exports.default = new (_plugin().Runtime)({
       }
 
       // URL dependency or not, fall back to including a runtime that exports the url
-      assets.push(getURLRuntime(dependency, bundle, mainBundle, options, config.domainSharding));
+      assets.push(getURLRuntime(dependency, bundle, mainBundle, options,
+      // $FlowFixMe
+      config.domainSharding));
     }
 
     // In development, bundles can be created lazily. This means that the parent bundle may not
@@ -288,7 +300,9 @@ var _default = exports.default = new (_plugin().Runtime)({
           continue;
         }
         let relativePathExpr = getRelativePathExpr(bundle, referencedBundle, options);
-        let loaderCode = `require(${JSON.stringify(loader)})(${getAbsoluteUrlExpr(relativePathExpr, bundle, config.domainSharding)})`;
+        let loaderCode = `require(${JSON.stringify(loader)})(${getAbsoluteUrlExpr(relativePathExpr, bundle,
+        // $FlowFixMe
+        config.domainSharding)})`;
         assets.push({
           filePath: __filename,
           code: loaderCode,
@@ -307,7 +321,9 @@ var _default = exports.default = new (_plugin().Runtime)({
         env: {
           sourceType: 'module'
         },
-        priority: getManifestBundlePriority(bundleGraph, bundle, config.splitManifestThreshold)
+        priority: getManifestBundlePriority(bundleGraph, bundle,
+        // $FlowFixMe
+        config.splitManifestThreshold)
       });
     }
     return assets;

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.2",
   "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.2",
+    "@atlaspack/plugin": "2.14.20",
+    "@atlaspack/utils": "2.17.2",
     "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
@@ -296,6 +329,7 @@ export default (new Runtime({
           bundle,
           mainBundle,
           options,
+          // $FlowFixMe
           config.domainSharding,
         ),
       );
@@ -327,6 +361,7 @@ export default (new Runtime({
         )})(${getAbsoluteUrlExpr(
           relativePathExpr,
           bundle,
+          // $FlowFixMe
           config.domainSharding,
         )})`;
         assets.push({
@@ -353,6 +388,7 @@ export default (new Runtime({
         priority: getManifestBundlePriority(
           bundleGraph,
           bundle,
+          // $FlowFixMe
           config.splitManifestThreshold,
         ),
       });
@@ -360,7 +396,7 @@ export default (new Runtime({
 
     return assets;
   },
-}): Runtime);
+}): Runtime<JSRuntimeConfig>);
 
 function getDependencies(bundle: NamedBundle): {|
   asyncDependencies: Array<Dependency>,

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;
+    }
+  }
 };