@atlaspack/runtime-browser-hmr 2.12.1-canary.3354

package/lib/loaders/hmr-runtime.js

@@ -0,0 +1,506 @@
+"use strict";
+
+/* global HMR_HOST, HMR_PORT, HMR_ENV_HASH, HMR_SECURE, HMR_USE_SSE, chrome, browser, __atlaspack__import__, __atlaspack__importScripts__, ServiceWorkerGlobalScope */
+/*::
+import type {
+  HMRAsset,
+  HMRMessage,
+} from '@atlaspack/reporter-dev-server/src/HMRServer.js';
+interface AtlaspackRequire {
+  (string): mixed;
+  cache: {|[string]: AtlaspackModule|};
+  hotData: {|[string]: mixed|};
+  Module: any;
+  parent: ?AtlaspackRequire;
+  isAtlaspackRequire: true;
+  modules: {|[string]: [Function, {|[string]: string|}]|};
+  HMR_BUNDLE_ID: string;
+  root: AtlaspackRequire;
+}
+interface AtlaspackModule {
+  hot: {|
+    data: mixed,
+    accept(cb: (Function) => void): void,
+    dispose(cb: (mixed) => void): void,
+    // accept(deps: Array<string> | string, cb: (Function) => void): void,
+    // decline(): void,
+    _acceptCallbacks: Array<(Function) => void>,
+    _disposeCallbacks: Array<(mixed) => void>,
+  |};
+}
+interface ExtensionContext {
+  runtime: {|
+    reload(): void,
+    getURL(url: string): string;
+    getManifest(): {manifest_version: number, ...};
+  |};
+}
+declare var module: {bundle: AtlaspackRequire, ...};
+declare var HMR_HOST: string;
+declare var HMR_PORT: string;
+declare var HMR_ENV_HASH: string;
+declare var HMR_SECURE: boolean;
+declare var HMR_USE_SSE: boolean;
+declare var chrome: ExtensionContext;
+declare var browser: ExtensionContext;
+declare var __atlaspack__import__: (string) => Promise<void>;
+declare var __atlaspack__importScripts__: (string) => Promise<void>;
+declare var globalThis: typeof self;
+declare var ServiceWorkerGlobalScope: Object;
+*/
+var OVERLAY_ID = '__atlaspack__error__overlay__';
+var OldModule = module.bundle.Module;
+function Module(moduleName) {
+  OldModule.call(this, moduleName);
+  this.hot = {
+    data: module.bundle.hotData[moduleName],
+    _acceptCallbacks: [],
+    _disposeCallbacks: [],
+    accept: function (fn) {
+      this._acceptCallbacks.push(fn || function () {});
+    },
+    dispose: function (fn) {
+      this._disposeCallbacks.push(fn);
+    }
+  };
+  module.bundle.hotData[moduleName] = undefined;
+}
+module.bundle.Module = Module;
+module.bundle.hotData = {};
+var checkedAssets /*: {|[string]: boolean|} */, assetsToDispose /*: Array<[AtlaspackRequire, string]> */, assetsToAccept /*: Array<[AtlaspackRequire, string]> */;
+
+function getHostname() {
+  return HMR_HOST || (location.protocol.indexOf('http') === 0 ? location.hostname : 'localhost');
+}
+function getPort() {
+  return HMR_PORT || location.port;
+}
+
+// eslint-disable-next-line no-redeclare
+var parent = module.bundle.parent;
+if ((!parent || !parent.isAtlaspackRequire) && typeof WebSocket !== 'undefined') {
+  var hostname = getHostname();
+  var port = getPort();
+  var protocol = HMR_SECURE || location.protocol == 'https:' && !['localhost', '127.0.0.1', '0.0.0.0'].includes(hostname) ? 'wss' : 'ws';
+  var ws;
+  if (HMR_USE_SSE) {
+    ws = new EventSource('/__atlaspack_hmr');
+  } else {
+    try {
+      ws = new WebSocket(protocol + '://' + hostname + (port ? ':' + port : '') + '/');
+    } catch (err) {
+      if (err.message) {
+        console.error(err.message);
+      }
+      ws = {};
+    }
+  }
+
+  // Web extension context
+  var extCtx = typeof browser === 'undefined' ? typeof chrome === 'undefined' ? null : chrome : browser;
+
+  // Safari doesn't support sourceURL in error stacks.
+  // eval may also be disabled via CSP, so do a quick check.
+  var supportsSourceURL = false;
+  try {
+    (0, eval)('throw new Error("test"); //# sourceURL=test.js');
+  } catch (err) {
+    supportsSourceURL = err.stack.includes('test.js');
+  }
+
+  // $FlowFixMe
+  ws.onmessage = async function (event /*: {data: string, ...} */) {
+    checkedAssets = {} /*: {|[string]: boolean|} */;
+    assetsToAccept = [];
+    assetsToDispose = [];
+    var data /*: HMRMessage */ = JSON.parse(event.data);
+    if (data.type === 'reload') {
+      fullReload();
+    } else if (data.type === 'update') {
+      // Remove error overlay if there is one
+      if (typeof document !== 'undefined') {
+        removeErrorOverlay();
+      }
+      let assets = data.assets.filter(asset => asset.envHash === HMR_ENV_HASH);
+
+      // Handle HMR Update
+      let handled = assets.every(asset => {
+        return asset.type === 'css' || asset.type === 'js' && hmrAcceptCheck(module.bundle.root, asset.id, asset.depsByBundle);
+      });
+      if (handled) {
+        console.clear();
+
+        // Dispatch custom event so other runtimes (e.g React Refresh) are aware.
+        if (typeof window !== 'undefined' && typeof CustomEvent !== 'undefined') {
+          window.dispatchEvent(new CustomEvent('atlaspackhmraccept'));
+        }
+        await hmrApplyUpdates(assets);
+
+        // Dispose all old assets.
+        let processedAssets = {} /*: {|[string]: boolean|} */;
+        for (let i = 0; i < assetsToDispose.length; i++) {
+          let id = assetsToDispose[i][1];
+          if (!processedAssets[id]) {
+            hmrDispose(assetsToDispose[i][0], id);
+            processedAssets[id] = true;
+          }
+        }
+
+        // Run accept callbacks. This will also re-execute other disposed assets in topological order.
+        processedAssets = {};
+        for (let i = 0; i < assetsToAccept.length; i++) {
+          let id = assetsToAccept[i][1];
+          if (!processedAssets[id]) {
+            hmrAccept(assetsToAccept[i][0], id);
+            processedAssets[id] = true;
+          }
+        }
+      } else fullReload();
+    }
+    if (data.type === 'error') {
+      // Log atlaspack errors to console
+      for (let ansiDiagnostic of data.diagnostics.ansi) {
+        let stack = ansiDiagnostic.codeframe ? ansiDiagnostic.codeframe : ansiDiagnostic.stack;
+        console.error('🚨 [atlaspack]: ' + ansiDiagnostic.message + '\n' + stack + '\n\n' + ansiDiagnostic.hints.join('\n'));
+      }
+      if (typeof document !== 'undefined') {
+        // Render the fancy html overlay
+        removeErrorOverlay();
+        var overlay = createErrorOverlay(data.diagnostics.html);
+        // $FlowFixMe
+        document.body.appendChild(overlay);
+      }
+    }
+  };
+  if (ws instanceof WebSocket) {
+    ws.onerror = function (e) {
+      if (e.message) {
+        console.error(e.message);
+      }
+    };
+    ws.onclose = function () {
+      console.warn('[atlaspack] 🚨 Connection to the HMR server was lost');
+    };
+  }
+}
+function removeErrorOverlay() {
+  var overlay = document.getElementById(OVERLAY_ID);
+  if (overlay) {
+    overlay.remove();
+    console.log('[atlaspack] ✨ Error resolved');
+  }
+}
+function createErrorOverlay(diagnostics) {
+  var overlay = document.createElement('div');
+  overlay.id = OVERLAY_ID;
+  let errorHTML = '<div style="background: black; opacity: 0.85; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; font-family: Menlo, Consolas, monospace; z-index: 9999;">';
+  for (let diagnostic of diagnostics) {
+    let stack = diagnostic.frames.length ? diagnostic.frames.reduce((p, frame) => {
+      return `${p}
+<a href="/__atlaspack_launch_editor?file=${encodeURIComponent(frame.location)}" style="text-decoration: underline; color: #888" onclick="fetch(this.href); return false">${frame.location}</a>
+${frame.code}`;
+    }, '') : diagnostic.stack;
+    errorHTML += `
+      <div>
+        <div style="font-size: 18px; font-weight: bold; margin-top: 20px;">
+          🚨 ${diagnostic.message}
+        </div>
+        <pre>${stack}</pre>
+        <div>
+          ${diagnostic.hints.map(hint => '<div>💡 ' + hint + '</div>').join('')}
+        </div>
+        ${diagnostic.documentation ? `<div>📝 <a style="color: violet" href="${diagnostic.documentation}" target="_blank">Learn more</a></div>` : ''}
+      </div>
+    `;
+  }
+  errorHTML += '</div>';
+  overlay.innerHTML = errorHTML;
+  return overlay;
+}
+function fullReload() {
+  if ('reload' in location) {
+    location.reload();
+  } else if (extCtx && extCtx.runtime && extCtx.runtime.reload) {
+    extCtx.runtime.reload();
+  }
+}
+function getParents(bundle, id) /*: Array<[AtlaspackRequire, string]> */{
+  var modules = bundle.modules;
+  if (!modules) {
+    return [];
+  }
+  var parents = [];
+  var k, d, dep;
+  for (k in modules) {
+    for (d in modules[k][1]) {
+      dep = modules[k][1][d];
+      if (dep === id || Array.isArray(dep) && dep[dep.length - 1] === id) {
+        parents.push([bundle, k]);
+      }
+    }
+  }
+  if (bundle.parent) {
+    parents = parents.concat(getParents(bundle.parent, id));
+  }
+  return parents;
+}
+function updateLink(link) {
+  var href = link.getAttribute('href');
+  if (!href) {
+    return;
+  }
+  var newLink = link.cloneNode();
+  newLink.onload = function () {
+    if (link.parentNode !== null) {
+      // $FlowFixMe
+      link.parentNode.removeChild(link);
+    }
+  };
+  newLink.setAttribute('href',
+  // $FlowFixMe
+  href.split('?')[0] + '?' + Date.now());
+  // $FlowFixMe
+  link.parentNode.insertBefore(newLink, link.nextSibling);
+}
+var cssTimeout = null;
+function reloadCSS() {
+  if (cssTimeout) {
+    return;
+  }
+  cssTimeout = setTimeout(function () {
+    var links = document.querySelectorAll('link[rel="stylesheet"]');
+    for (var i = 0; i < links.length; i++) {
+      // $FlowFixMe[incompatible-type]
+      var href /*: string */ = links[i].getAttribute('href');
+      var hostname = getHostname();
+      var servedFromHMRServer = hostname === 'localhost' ? new RegExp('^(https?:\\/\\/(0.0.0.0|127.0.0.1)|localhost):' + getPort()).test(href) : href.indexOf(hostname + ':' + getPort());
+      var absolute = /^https?:\/\//i.test(href) && href.indexOf(location.origin) !== 0 && !servedFromHMRServer;
+      if (!absolute) {
+        updateLink(links[i]);
+      }
+    }
+    cssTimeout = null;
+  }, 50);
+}
+function hmrDownload(asset) {
+  if (asset.type === 'js') {
+    if (typeof document !== 'undefined') {
+      let script = document.createElement('script');
+      script.src = asset.url + '?t=' + Date.now();
+      if (asset.outputFormat === 'esmodule') {
+        script.type = 'module';
+      }
+      return new Promise((resolve, reject) => {
+        var _document$head;
+        script.onload = () => resolve(script);
+        script.onerror = reject;
+        (_document$head = document.head) === null || _document$head === void 0 || _document$head.appendChild(script);
+      });
+    } else if (typeof importScripts === 'function') {
+      // Worker scripts
+      if (asset.outputFormat === 'esmodule') {
+        return __atlaspack__import__(asset.url + '?t=' + Date.now());
+      } else {
+        return new Promise((resolve, reject) => {
+          try {
+            __atlaspack__importScripts__(asset.url + '?t=' + Date.now());
+            resolve();
+          } catch (err) {
+            reject(err);
+          }
+        });
+      }
+    }
+  }
+}
+async function hmrApplyUpdates(assets) {
+  global.atlaspackHotUpdate = Object.create(null);
+  let scriptsToRemove;
+  try {
+    // If sourceURL comments aren't supported in eval, we need to load
+    // the update from the dev server over HTTP so that stack traces
+    // are correct in errors/logs. This is much slower than eval, so
+    // we only do it if needed (currently just Safari).
+    // https://bugs.webkit.org/show_bug.cgi?id=137297
+    // This path is also taken if a CSP disallows eval.
+    if (!supportsSourceURL) {
+      let promises = assets.map(asset => {
+        var _hmrDownload;
+        return (_hmrDownload = hmrDownload(asset)) === null || _hmrDownload === void 0 ? void 0 : _hmrDownload.catch(err => {
+          // Web extension fix
+          if (extCtx && extCtx.runtime && extCtx.runtime.getManifest().manifest_version == 3 && typeof ServiceWorkerGlobalScope != 'undefined' && global instanceof ServiceWorkerGlobalScope) {
+            extCtx.runtime.reload();
+            return;
+          }
+          throw err;
+        });
+      });
+      scriptsToRemove = await Promise.all(promises);
+    }
+    assets.forEach(function (asset) {
+      hmrApply(module.bundle.root, asset);
+    });
+  } finally {
+    delete global.atlaspackHotUpdate;
+    if (scriptsToRemove) {
+      scriptsToRemove.forEach(script => {
+        if (script) {
+          var _document$head2;
+          (_document$head2 = document.head) === null || _document$head2 === void 0 || _document$head2.removeChild(script);
+        }
+      });
+    }
+  }
+}
+function hmrApply(bundle /*: AtlaspackRequire */, asset /*:  HMRAsset */) {
+  var modules = bundle.modules;
+  if (!modules) {
+    return;
+  }
+  if (asset.type === 'css') {
+    reloadCSS();
+  } else if (asset.type === 'js') {
+    let deps = asset.depsByBundle[bundle.HMR_BUNDLE_ID];
+    if (deps) {
+      if (modules[asset.id]) {
+        // Remove dependencies that are removed and will become orphaned.
+        // This is necessary so that if the asset is added back again, the cache is gone, and we prevent a full page reload.
+        let oldDeps = modules[asset.id][1];
+        for (let dep in oldDeps) {
+          if (!deps[dep] || deps[dep] !== oldDeps[dep]) {
+            let id = oldDeps[dep];
+            let parents = getParents(module.bundle.root, id);
+            if (parents.length === 1) {
+              hmrDelete(module.bundle.root, id);
+            }
+          }
+        }
+      }
+      if (supportsSourceURL) {
+        // Global eval. We would use `new Function` here but browser
+        // support for source maps is better with eval.
+        (0, eval)(asset.output);
+      }
+
+      // $FlowFixMe
+      let fn = global.atlaspackHotUpdate[asset.id];
+      modules[asset.id] = [fn, deps];
+    } else if (bundle.parent) {
+      hmrApply(bundle.parent, asset);
+    }
+  }
+}
+function hmrDelete(bundle, id) {
+  let modules = bundle.modules;
+  if (!modules) {
+    return;
+  }
+  if (modules[id]) {
+    // Collect dependencies that will become orphaned when this module is deleted.
+    let deps = modules[id][1];
+    let orphans = [];
+    for (let dep in deps) {
+      let parents = getParents(module.bundle.root, deps[dep]);
+      if (parents.length === 1) {
+        orphans.push(deps[dep]);
+      }
+    }
+
+    // Delete the module. This must be done before deleting dependencies in case of circular dependencies.
+    delete modules[id];
+    delete bundle.cache[id];
+
+    // Now delete the orphans.
+    orphans.forEach(id => {
+      hmrDelete(module.bundle.root, id);
+    });
+  } else if (bundle.parent) {
+    hmrDelete(bundle.parent, id);
+  }
+}
+function hmrAcceptCheck(bundle /*: AtlaspackRequire */, id /*: string */, depsByBundle /*: ?{ [string]: { [string]: string } }*/) {
+  if (hmrAcceptCheckOne(bundle, id, depsByBundle)) {
+    return true;
+  }
+
+  // Traverse parents breadth first. All possible ancestries must accept the HMR update, or we'll reload.
+  let parents = getParents(module.bundle.root, id);
+  let accepted = false;
+  while (parents.length > 0) {
+    let v = parents.shift();
+    let a = hmrAcceptCheckOne(v[0], v[1], null);
+    if (a) {
+      // If this parent accepts, stop traversing upward, but still consider siblings.
+      accepted = true;
+    } else {
+      // Otherwise, queue the parents in the next level upward.
+      let p = getParents(module.bundle.root, v[1]);
+      if (p.length === 0) {
+        // If there are no parents, then we've reached an entry without accepting. Reload.
+        accepted = false;
+        break;
+      }
+      parents.push(...p);
+    }
+  }
+  return accepted;
+}
+function hmrAcceptCheckOne(bundle /*: AtlaspackRequire */, id /*: string */, depsByBundle /*: ?{ [string]: { [string]: string } }*/) {
+  var modules = bundle.modules;
+  if (!modules) {
+    return;
+  }
+  if (depsByBundle && !depsByBundle[bundle.HMR_BUNDLE_ID]) {
+    // If we reached the root bundle without finding where the asset should go,
+    // there's nothing to do. Mark as "accepted" so we don't reload the page.
+    if (!bundle.parent) {
+      return true;
+    }
+    return hmrAcceptCheck(bundle.parent, id, depsByBundle);
+  }
+  if (checkedAssets[id]) {
+    return true;
+  }
+  checkedAssets[id] = true;
+  var cached = bundle.cache[id];
+  assetsToDispose.push([bundle, id]);
+  if (!cached || cached.hot && cached.hot._acceptCallbacks.length) {
+    assetsToAccept.push([bundle, id]);
+    return true;
+  }
+}
+function hmrDispose(bundle /*: AtlaspackRequire */, id /*: string */) {
+  var cached = bundle.cache[id];
+  bundle.hotData[id] = {};
+  if (cached && cached.hot) {
+    cached.hot.data = bundle.hotData[id];
+  }
+  if (cached && cached.hot && cached.hot._disposeCallbacks.length) {
+    cached.hot._disposeCallbacks.forEach(function (cb) {
+      cb(bundle.hotData[id]);
+    });
+  }
+  delete bundle.cache[id];
+}
+function hmrAccept(bundle /*: AtlaspackRequire */, id /*: string */) {
+  // Execute the module.
+  bundle(id);
+
+  // Run the accept callbacks in the new version of the module.
+  var cached = bundle.cache[id];
+  if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
+    cached.hot._acceptCallbacks.forEach(function (cb) {
+      var assetsToAlsoAccept = cb(function () {
+        return getParents(module.bundle.root, id);
+      });
+      if (assetsToAlsoAccept && assetsToAccept.length) {
+        assetsToAlsoAccept.forEach(function (a) {
+          hmrDispose(a[0], a[1]);
+        });
+
+        // $FlowFixMe[method-unbinding]
+        assetsToAccept.push.apply(assetsToAccept, assetsToAlsoAccept);
+      }
+    });
+  }
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@atlaspack/runtime-browser-hmr",
+  "version": "2.12.1-canary.3354+7bb54d46a",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/atlassian-labs/atlaspack.git"
+  },
+  "main": "lib/HMRRuntime.js",
+  "source": "src/HMRRuntime.js",
+  "engines": {
+    "node": ">= 16.0.0",
+    "atlaspack": "2.12.1-canary.3354+7bb54d46a"
+  },
+  "dependencies": {
+    "@atlaspack/plugin": "2.12.1-canary.3354+7bb54d46a",
+    "@atlaspack/utils": "2.12.1-canary.3354+7bb54d46a"
+  },
+  "gitHead": "7bb54d46a00c5ba9cdbc2ee426dcbe82c8d79a3e"
+}

package/src/HMRRuntime.js

@@ -0,0 +1,64 @@
+// @flow strict-local
+
+import {Runtime} from '@atlaspack/plugin';
+import fs from 'fs';
+import path from 'path';
+
+// Without this, the hmr-runtime.js is transpiled with the React Refresh swc transform because it
+// lives in `/app/packages/runtimes/...` and thus the `config` in the JSTransformer is actually the
+// user's package.json, and hmr-runtime.js is transpiled as a JSX asset.
+const FILENAME =
+  // $FlowFixMe
+  process.env.ATLASPACK_BUILD_REPL && process.browser
+    ? '/' + __filename
+    : __filename;
+
+const HMR_RUNTIME = fs.readFileSync(
+  path.join(__dirname, './loaders/hmr-runtime.js'),
+  'utf8',
+);
+
+export default (new Runtime({
+  apply({bundle, options}) {
+    if (
+      bundle.type !== 'js' ||
+      !options.hmrOptions ||
+      bundle.env.isLibrary ||
+      bundle.env.isWorklet() ||
+      bundle.env.sourceType === 'script'
+    ) {
+      return;
+    }
+
+    const {host, port} = options.hmrOptions;
+    return {
+      filePath: FILENAME,
+      code:
+        `var HMR_HOST = ${JSON.stringify(
+          host != null && host !== '0.0.0.0' ? host : null,
+        )};` +
+        `var HMR_PORT = ${JSON.stringify(
+          port != null &&
+            // Default to the HTTP port in the browser, only override
+            // in watch mode or if hmr port != serve port
+            (!options.serveOptions || options.serveOptions.port !== port)
+            ? port
+            : null,
+        )};` +
+        `var HMR_SECURE = ${JSON.stringify(
+          !!(options.serveOptions && options.serveOptions.https),
+        )};` +
+        `var HMR_ENV_HASH = "${bundle.env.id}";` +
+        `var HMR_USE_SSE = ${JSON.stringify(
+          // $FlowFixMe
+          !!(process.env.ATLASPACK_BUILD_REPL && process.browser),
+        )};` +
+        `module.bundle.HMR_BUNDLE_ID = ${JSON.stringify(bundle.id)};` +
+        HMR_RUNTIME,
+      isEntry: true,
+      env: {
+        sourceType: 'module',
+      },
+    };
+  },
+}): Runtime);

package/src/loaders/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@atlaspack/eslint-config-browser"
+}