@atlaspack/runtime-js 2.12.1-dev.3566 → 2.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaspack/runtime-js",
-  "version": "2.12.1-dev.3566+facdfb05f",
+  "version": "2.13.0",
   "license": "(MIT OR Apache-2.0)",
   "publishConfig": {
     "access": "public"
@@ -12,15 +12,15 @@
   "main": "lib/JSRuntime.js",
   "source": "src/JSRuntime.js",
   "engines": {
-    "atlaspack": "^2.12.1-dev.3566+facdfb05f",
+    "atlaspack": "^2.12.0",
     "node": ">= 16.0.0"
   },
   "dependencies": {
-    "@atlaspack/diagnostic": "2.12.1-dev.3566+facdfb05f",
-    "@atlaspack/feature-flags": "2.12.1-dev.3566+facdfb05f",
-    "@atlaspack/plugin": "2.12.1-dev.3566+facdfb05f",
-    "@atlaspack/utils": "2.12.1-dev.3566+facdfb05f",
+    "@atlaspack/diagnostic": "2.13.0",
+    "@atlaspack/domain-sharding": "2.13.0",
+    "@atlaspack/feature-flags": "2.13.0",
+    "@atlaspack/plugin": "2.13.0",
+    "@atlaspack/utils": "2.13.0",
     "nullthrows": "^1.1.1"
-  },
-  "gitHead": "facdfb05f693e50037a82a4afa101adf093fd8c9"
+  }
 }

package/src/JSRuntime.js

@@ -74,6 +74,9 @@ let bundleDependencies = new WeakMap<
 
 type JSRuntimeConfig = {|
   splitManifestThreshold: number,
+  domainSharding?: {|
+    maxShards: number,
+  |},
 |};
 
 let defaultConfig: JSRuntimeConfig = {
@@ -86,6 +89,16 @@ const CONFIG_SCHEMA: SchemaEntity = {
     splitManifestThreshold: {
       type: 'number',
     },
+    domainSharding: {
+      type: 'object',
+      properties: {
+        maxShards: {
+          type: 'number',
+        },
+      },
+      additionalProperties: false,
+      required: ['maxShards'],
+    },
   },
   additionalProperties: false,
 };
@@ -181,6 +194,7 @@ export default (new Runtime({
           bundleGraph,
           bundleGroup: resolved.value,
           options,
+          shardingConfig: config.domainSharding,
         });
 
         if (loaderRuntime != null) {
@@ -271,7 +285,15 @@ export default (new Runtime({
       }
 
       // URL dependency or not, fall back to including a runtime that exports the url
-      assets.push(getURLRuntime(dependency, bundle, mainBundle, options));
+      assets.push(
+        getURLRuntime(
+          dependency,
+          bundle,
+          mainBundle,
+          options,
+          config.domainSharding,
+        ),
+      );
     }
 
     // In development, bundles can be created lazily. This means that the parent bundle may not
@@ -297,7 +319,11 @@ export default (new Runtime({
         );
         let loaderCode = `require(${JSON.stringify(
           loader,
-        )})( ${getAbsoluteUrlExpr(relativePathExpr, bundle)})`;
+        )})(${getAbsoluteUrlExpr(
+          relativePathExpr,
+          bundle,
+          config.domainSharding,
+        )})`;
         assets.push({
           filePath: __filename,
           code: loaderCode,
@@ -376,12 +402,14 @@ function getLoaderRuntime({
   bundleGroup,
   bundleGraph,
   options,
+  shardingConfig,
 }: {|
   bundle: NamedBundle,
   dependency: Dependency,
   bundleGroup: BundleGroup,
   bundleGraph: BundleGraph<NamedBundle>,
   options: PluginOptions,
+  shardingConfig: JSRuntimeConfig['domainSharding'],
 |}): ?RuntimeAsset {
   let loaders = getLoaders(bundle.env);
   if (loaders == null) {
@@ -423,6 +451,7 @@ function getLoaderRuntime({
   function getLoaderForBundle(
     bundle: NamedBundle,
     to: NamedBundle,
+    shardingConfig: JSRuntimeConfig['domainSharding'],
   ): string | void {
     let loader = loaders[to.type];
     if (!loader) {
@@ -455,11 +484,22 @@ function getLoaderRuntime({
       return `Promise.resolve(__parcel__require__("./" + ${relativePathExpr}))`;
     }
 
-    let absoluteUrlExpr = shouldUseRuntimeManifest(bundle, options)
-      ? `require('./helpers/bundle-manifest').resolve(${JSON.stringify(
-          to.publicId,
-        )})`
-      : getAbsoluteUrlExpr(relativePathExpr, bundle);
+    let absoluteUrlExpr;
+    if (shouldUseRuntimeManifest(bundle, options)) {
+      let publicId = JSON.stringify(to.publicId);
+      absoluteUrlExpr = `require('./helpers/bundle-manifest').resolve(${publicId})`;
+
+      if (shardingConfig) {
+        absoluteUrlExpr = `require('@atlaspack/domain-sharding').shardUrl(${absoluteUrlExpr}, ${shardingConfig.maxShards})`;
+      }
+    } else {
+      absoluteUrlExpr = getAbsoluteUrlExpr(
+        relativePathExpr,
+        bundle,
+        shardingConfig,
+      );
+    }
+
     let code = `require(${JSON.stringify(loader)})(${absoluteUrlExpr})`;
 
     // In development, clear the require cache when an error occurs so the
@@ -483,22 +523,32 @@ function getLoaderRuntime({
       bundle,
     )) {
       // This bundle has a conditional dependency, we need to load the bundle group
-
-      // 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 Promise.all([${cond.ifTrueBundles
-          .map((targetBundle) => getLoaderForBundle(bundle, targetBundle))
-          .join(',')}]);}, function (){return Promise.all([${cond.ifFalseBundles
-          .map((targetBundle) => getLoaderForBundle(bundle, targetBundle))
-          .join(',')}]);})`,
+      const ifTrueLoaders = cond.ifTrueBundles.map((targetBundle) =>
+        getLoaderForBundle(bundle, targetBundle),
       );
+      const ifFalseLoaders = cond.ifFalseBundles.map((targetBundle) =>
+        getLoaderForBundle(bundle, targetBundle),
+      );
+
+      if (ifTrueLoaders.length > 0 || ifFalseLoaders.length > 0) {
+        // 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 Promise.all([${ifTrueLoaders.join(
+            ',',
+          )}]);}, function (){return Promise.all([${ifFalseLoaders.join(
+            ',',
+          )}]);})`,
+        );
+      }
     }
   }
 
   for (let to of externalBundles) {
-    let loaderModule = getLoaderForBundle(bundle, to);
+    let loaderModule = getLoaderForBundle(bundle, to, shardingConfig);
     if (loaderModule !== undefined) loaderModules.push(loaderModule);
   }
 
@@ -573,7 +623,11 @@ function getLoaderRuntime({
   let code = [];
 
   if (needsEsmLoadPrelude) {
-    code.push(`let load = require('./helpers/browser/esm-js-loader');`);
+    let preludeLoad = shardingConfig
+      ? `let load = require('./helpers/browser/esm-js-loader-shards')(${shardingConfig.maxShards});`
+      : `let load = require('./helpers/browser/esm-js-loader');`;
+
+    code.push(preludeLoad);
   }
 
   code.push(`module.exports = ${loaderCode};`);
@@ -673,6 +727,7 @@ function getURLRuntime(
   from: NamedBundle,
   to: NamedBundle,
   options: PluginOptions,
+  shardingConfig: JSRuntimeConfig['domainSharding'],
 ): RuntimeAsset {
   let relativePathExpr = getRelativePathExpr(from, to, options);
   let code;
@@ -690,12 +745,19 @@ function getURLRuntime(
     } else {
       code += `let bundleURL = require('./helpers/bundle-url');\n`;
       code += `let url = bundleURL.getBundleURL('${from.publicId}') + ${relativePathExpr};`;
+      if (shardingConfig) {
+        code += `url = require('@atlaspack/domain-sharding').shardUrl(url, ${shardingConfig.maxShards});`;
+      }
       code += `module.exports = workerURL(url, bundleURL.getOrigin(url), ${String(
         from.env.outputFormat === 'esmodule',
       )});`;
     }
   } else {
-    code = `module.exports = ${getAbsoluteUrlExpr(relativePathExpr, from)};`;
+    code = `module.exports = ${getAbsoluteUrlExpr(
+      relativePathExpr,
+      from,
+      shardingConfig,
+    )};`;
   }
 
   return {
@@ -765,17 +827,27 @@ function getRelativePathExpr(
   return res;
 }
 
-function getAbsoluteUrlExpr(relativePathExpr: string, bundle: NamedBundle) {
+function getAbsoluteUrlExpr(
+  relativePathExpr: string,
+  fromBundle: NamedBundle,
+  shardingConfig: JSRuntimeConfig['domainSharding'],
+) {
   if (
-    (bundle.env.outputFormat === 'esmodule' &&
-      bundle.env.supports('import-meta-url')) ||
-    bundle.env.outputFormat === 'commonjs'
+    (fromBundle.env.outputFormat === 'esmodule' &&
+      fromBundle.env.supports('import-meta-url')) ||
+    fromBundle.env.outputFormat === 'commonjs'
   ) {
     // This will be compiled to new URL(url, import.meta.url) or new URL(url, 'file:' + __filename).
     return `new __parcel__URL__(${relativePathExpr}).toString()`;
-  } else {
-    return `require('./helpers/bundle-url').getBundleURL('${bundle.publicId}') + ${relativePathExpr}`;
   }
+
+  const regularBundleUrl = `require('./helpers/bundle-url').getBundleURL('${fromBundle.publicId}') + ${relativePathExpr}`;
+
+  if (!shardingConfig) {
+    return regularBundleUrl;
+  }
+
+  return `require('@atlaspack/domain-sharding').shardUrl(${regularBundleUrl}, ${shardingConfig.maxShards})`;
 }
 
 function shouldUseRuntimeManifest(

package/src/helpers/browser/analytics/analytics.d.ts

@@ -0,0 +1,6 @@
+export type AtlaspackAnalyticsEvent = {
+  action: string;
+  attributes?: {[key: string]: string | number | boolean};
+};
+
+export function sendAnalyticsEvent(event: AtlaspackAnalyticsEvent): void;

package/src/helpers/browser/analytics/analytics.js

@@ -0,0 +1,6 @@
+function sendAnalyticsEvent(detail) {
+  const ev = new globalThis.CustomEvent('atlaspack:analytics', {detail});
+  globalThis.dispatchEvent(ev);
+}
+
+module.exports = {sendAnalyticsEvent};

package/src/helpers/browser/analytics/analytics.js.flow

@@ -0,0 +1,8 @@
+// @flow
+
+export type AtlaspackAnalyticsEvent = {|
+  action: string,
+  attributes?: { [key: string]: string | number | boolean },
+|};
+
+declare export function sendAnalyticsEvent(event: AtlaspackAnalyticsEvent): void;

package/src/helpers/browser/esm-js-loader-retry.js

@@ -1,26 +1,73 @@
 async function load(id) {
-  if (!parcelRequire.retryState) {
-    parcelRequire.retryState = {};
-  }
+  // Global state maps the initial url to the completed task.
+  // This ensures the same URL is used in subsequent imports
+  if (!parcelRequire._retryState) parcelRequire._retryState = {};
+  /** @type {Record<string, Promise<void>>} */
+  const retryState = parcelRequire._retryState;
+
+  // The number of retries before rethrowing the error
+  const maxRetries = 6;
 
+  // Resolve the request URL from the bundle ID
+  const url = require('../bundle-manifest').resolve(id);
+
+  // Wait for the user to go online before making a request
   if (!globalThis.navigator.onLine) {
-    await new Promise((res) =>
-      globalThis.addEventListener('online', res, {once: true}),
+    await new Promise((resolve) =>
+      globalThis.addEventListener('online', resolve, {once: true}),
     );
   }
 
-  let url = require('../bundle-manifest').resolve(id);
+  // If the import has not run or is not currently running
+  // then start the import retry task. Otherwise reuse the
+  // existing result or wait for the current task to complete
+  if (!retryState[url]) {
+    retryState[url] = (async () => {
+      // Try first request with normal import circuit
+      try {
+        // eslint-disable-next-line no-undef
+        return await __parcel__import__(url);
+      } catch {
+        /**/
+      }
 
-  if (parcelRequire.retryState[id] != undefined) {
-    url = `${url}?retry=${parcelRequire.retryState[id]}`;
-  }
+      // Attempt to retry request
+      for (let i = 1; i <= maxRetries; i++) {
+        try {
+          // Wait for an increasing delay time
+          const jitter = Math.round(Math.random() * 100);
+          const delay = Math.min(Math.pow(2, i), 8) * 1000;
+          await new Promise((resolve) => setTimeout(resolve, delay + jitter));
 
-  try {
-    // eslint-disable-next-line no-undef
-    return await __parcel__import__(url);
-  } catch (error) {
-    parcelRequire.retryState[id] = Date.now();
+          // Append the current time to the request URL
+          // to ensure it has not been cached by the browser
+          // eslint-disable-next-line no-undef
+          const result = await __parcel__import__(`${url}?t=${Date.now()}`);
+          sendAnalyticsEvent('recovered', url, i);
+          return result;
+        } catch (error) {
+          if (i === maxRetries) {
+            sendAnalyticsEvent('failure', url, i);
+            throw error;
+          }
+          sendAnalyticsEvent('progress', url, i);
+        }
+      }
+    })();
   }
+
+  return retryState[url];
+}
+
+function sendAnalyticsEvent(status, targetUrl, attempt) {
+  require('./analytics/analytics.js').sendAnalyticsEvent({
+    action: 'importRetry',
+    attributes: {
+      status,
+      targetUrl,
+      attempt,
+    },
+  });
 }
 
 module.exports = load;

package/src/helpers/browser/esm-js-loader-shards.js

@@ -0,0 +1,11 @@
+let load = (maxShards) => (id) => {
+  // eslint-disable-next-line no-undef
+  return __parcel__import__(
+    require('@atlaspack/domain-sharding').shardUrl(
+      require('../bundle-manifest').resolve(id),
+      maxShards,
+    ),
+  );
+};
+
+module.exports = load;

package/src/helpers/bundle-manifest.js

@@ -1,6 +1,9 @@
 var mapping = new Map();
 
-function register(baseUrl, manifest) {
+function register(
+  /** @type {string} */ baseUrl,
+  /** @type {Array<string>} */ manifest, // ['id', 'path', 'id2', 'path2']
+) {
   for (var i = 0; i < manifest.length - 1; i += 2) {
     mapping.set(manifest[i], {
       baseUrl: baseUrl,

package/src/helpers/bundle-url.js

@@ -1,21 +1,42 @@
-var bundleURL = {};
-function getBundleURLCached(id) {
-  var value = bundleURL[id];
+const stackTraceUrlRegexp =
+  /(https?|file|ftp|(chrome|moz|safari-web)-extension):\/\/[^)\n]+/g;
+
+const bundleURL = {};
+
+/**
+ * Retrieves the cached bundle URL for a given identifier.
+ * If the URL is not cached, it computes and stores it in the cache.
+ *
+ * @param {string} id - The identifier for the bundle.
+ * @param {Error?} inputError - An error object to extract the stack trace from
+ * (for testing purposes).
+ * @returns {string} The URL of the bundle, without file name.
+ */
+function getBundleURLCached(id, inputError) {
+  let value = bundleURL[id];
+
   if (!value) {
-    value = getBundleURL();
+    value = getBundleURL(inputError);
     bundleURL[id] = value;
   }
 
   return value;
 }
 
-function getBundleURL() {
+/** Get the URL without the filename (last / segment)
+ *
+ * @param {string} url
+ * @returns {string} The URL with the file name removed
+ */
+function getBaseURL(url) {
+  return url.slice(0, url.lastIndexOf('/')) + '/';
+}
+
+function getBundleURL(inputError) {
   try {
-    throw new Error();
+    throw inputError ?? new Error();
   } catch (err) {
-    var matches = ('' + err.stack).match(
-      /(https?|file|ftp|(chrome|moz|safari-web)-extension):\/\/[^)\n]+/g,
-    );
+    var matches = ('' + err.stack).match(stackTraceUrlRegexp);
     if (matches) {
       // The first two stack frames will be this function and getBundleURLCached.
       // Use the 3rd one, which will be a runtime in the original bundle.
@@ -26,26 +47,15 @@ function getBundleURL() {
   return '/';
 }
 
-function getBaseURL(url) {
-  return (
-    ('' + url).replace(
-      /^((?:https?|file|ftp|(chrome|moz|safari-web)-extension):\/\/.+)\/[^/]+$/,
-      '$1',
-    ) + '/'
-  );
-}
-
-// TODO: Replace uses with `new URL(url).origin` when ie11 is no longer supported.
+/**
+ * @param {string} url
+ * @returns {string}
+ */
 function getOrigin(url) {
-  let matches = ('' + url).match(
-    /(https?|file|ftp|(chrome|moz|safari-web)-extension):\/\/[^/]+/,
-  );
-  if (!matches) {
-    throw new Error('Origin not found');
-  }
-  return matches[0];
+  return new URL(url).origin;
 }
 
+// TODO: convert this file to ESM once HMR issues are resolved
+exports.getOrigin = getOrigin;
 exports.getBundleURL = getBundleURLCached;
 exports.getBaseURL = getBaseURL;
-exports.getOrigin = getOrigin;

package/test/analytics.test.ts

@@ -0,0 +1,47 @@
+import {sendAnalyticsEvent} from '../src/helpers/browser/analytics/analytics.js';
+import {mock} from 'node:test';
+import type {Mock} from 'node:test';
+import assert from 'node:assert';
+
+describe('@atlaspack/analytics', () => {
+  let dispatchEventMock: Mock<Window['dispatchEvent']>;
+
+  beforeEach(() => {
+    // @ts-expect-error
+    globalThis.CustomEvent = MockCustomEvent;
+    dispatchEventMock = mock.fn();
+    globalThis.dispatchEvent = dispatchEventMock;
+  });
+
+  it('should not throw', () => {
+    assert.doesNotThrow(() =>
+      sendAnalyticsEvent({
+        action: 'test',
+      }),
+    );
+  });
+
+  it('should raise event on window', () => {
+    sendAnalyticsEvent({
+      action: 'test',
+    });
+
+    assert.equal(dispatchEventMock.mock.callCount(), 1);
+    assert.deepEqual(dispatchEventMock.mock.calls[0].arguments[0], {
+      eventName: 'atlaspack:analytics',
+      detail: {
+        action: 'test',
+      },
+    });
+  });
+});
+
+class MockCustomEvent {
+  eventName: string;
+  detail: any;
+
+  constructor(eventName: string, options: any = {}) {
+    this.eventName = eventName;
+    this.detail = options.detail;
+  }
+}

package/test/bundle-url.test.js

@@ -0,0 +1,62 @@
+// @flow
+import assert from 'assert';
+
+import {getBaseURL, getBundleURL} from '../src/helpers/bundle-url';
+
+const createErrorStack = (url) => {
+  // This error stack is copied from a local dev, with a bunch
+  // of lines trimmed off the end so it's not unnecessarily long
+  return `
+Error
+    at Object.getBundleURL (http://localhost:8081/main-bundle.1a2fa8b7.js:15688:29)
+    at Object.getBundleURLCached (http://localhost:8081/main-bundle.1a2fa8b7.js:15688:29)
+    at a7u9v.6d3ceb6ac67fea50 (${url}:361466:46)
+    at newRequire (http://localhost:8081/main-bundle.1a2fa8b7.js:71:24)
+    at localRequire (http://localhost:8081/main-bundle.1a2fa8b7.js:84:35)
+    at 7H8wc.react-intl-next (http://localhost:8081/main-bundle.1a2fa8b7.js:279746:28)
+    at newRequire (http://localhost:8081/main-bundle.1a2fa8b7.js:71:24)
+    at localRequire (http://localhost:8081/main-bundle.1a2fa8b7.js:84:35)
+    at 1nL5S../manifest (http://localhost:8081/main-bundle.1a2fa8b7.js:279714:17)
+    at newRequire (http://localhost:8081/main-bundle.1a2fa8b7.js:71:24)
+    at localRequire (http://localhost:8081/main-bundle.1a2fa8b7.js:84:35)
+`.trim();
+};
+
+describe('getBaseUrl', () => {
+  it('should return the URL with the filename removed', () => {
+    const testUrl =
+      'https://bundle-shard-3.assets.example.com/assets/testBundle.123abc.js';
+
+    assert.equal(
+      getBaseURL(testUrl),
+      'https://bundle-shard-3.assets.example.com/assets/',
+    );
+  });
+
+  it('should handle domains with no .', () => {
+    const testUrl = 'http://localhost/assets/testBundle.123abc.js';
+
+    assert.equal(getBaseURL(testUrl), 'http://localhost/assets/');
+  });
+
+  it('should handle domains with ports', () => {
+    const testUrl = 'http://localhost:8081/assets/testBundle.123abc.js';
+
+    assert.equal(getBaseURL(testUrl), 'http://localhost:8081/assets/');
+  });
+});
+
+describe('getBundleURL', () => {
+  it('should return the URL of the bundle without the file name', () => {
+    const testUrl =
+      'https://bundle-domain.assets.example.com/assets/testBundle.123abc.js';
+
+    const errorStack = createErrorStack(testUrl);
+    const error = new Error();
+    error.stack = errorStack;
+
+    const result = getBundleURL('test-asset', error);
+
+    assert.equal(result, 'https://bundle-domain.assets.example.com/assets/');
+  });
+});

package/test/esm-js-loader-retry.test.ts

@@ -0,0 +1,65 @@
+import load from '../src/helpers/browser/esm-js-loader-retry.js';
+import bundleManifest from '../src/helpers/bundle-manifest.js';
+import {mock} from 'node:test';
+import type {Mock} from 'node:test';
+import assert from 'node:assert';
+
+declare var globalThis: Window & {[key: string]: any};
+
+describe('esm-js-loader-retry', () => {
+  let mockSetTimeout: Mock<Window['setTimeout']>;
+  let mockParcelImport: Mock<() => Promise<void>>;
+
+  // eslint-disable-next-line require-await
+  const importError = async () => {
+    throw new Error('TypeError: Failed to fetch dynamically imported module');
+  };
+
+  before(() => {
+    bundleManifest.register('http://localhost', ['1', 'foo.js']);
+  });
+
+  beforeEach(() => {
+    mockSetTimeout = mock.fn((callback: any, duration: any, ...args: any[]) =>
+      callback(),
+    );
+    globalThis.setTimeout = mockSetTimeout;
+
+    mockParcelImport = mock.fn(() => Promise.resolve());
+    globalThis.__parcel__import__ = mockParcelImport;
+
+    globalThis.parcelRequire = mock.fn();
+    // @ts-expect-error
+    globalThis.navigator = {onLine: true};
+    globalThis.CustomEvent = globalThis.CustomEvent || class {};
+    globalThis.dispatchEvent = mock.fn();
+  });
+
+  it('should not throw', async () => {
+    await assert.doesNotReject(() => load('1'));
+  });
+
+  it('should throw if all requests fail', async () => {
+    mockParcelImport.mock.mockImplementationOnce(importError, 0);
+    mockParcelImport.mock.mockImplementationOnce(importError, 1);
+    mockParcelImport.mock.mockImplementationOnce(importError, 2);
+    mockParcelImport.mock.mockImplementationOnce(importError, 3);
+    mockParcelImport.mock.mockImplementationOnce(importError, 4);
+    mockParcelImport.mock.mockImplementationOnce(importError, 5);
+    mockParcelImport.mock.mockImplementationOnce(importError, 6);
+    await assert.rejects(() => load('1'));
+  });
+
+  it('should resolve if the first request fails', async () => {
+    mockParcelImport.mock.mockImplementationOnce(importError, 0);
+    await assert.doesNotReject(() => load('1'));
+  });
+
+  it('should resolve if the first few requests fails', async () => {
+    mockParcelImport.mock.mockImplementationOnce(importError, 0);
+    mockParcelImport.mock.mockImplementationOnce(importError, 1);
+    mockParcelImport.mock.mockImplementationOnce(importError, 2);
+    mockParcelImport.mock.mockImplementationOnce(importError, 3);
+    await assert.doesNotReject(() => load('1'));
+  });
+});