@bigbinary/neeto-commons-frontend 4.13.165 → 4.13.166-beta.1

package/configs/esbuild/importMap.js

@@ -0,0 +1,237 @@
+// Stops chunk hash changes from cascading through the whole bundle.
+//
+// esbuild embeds the hashed filename of every imported chunk in the importing
+// chunk, so a change in one chunk renames every chunk that (transitively)
+// imports it. A one-line change in a shared chunk ends up invalidating almost
+// the entire bundle in the browser cache.
+//
+// After the build, this module:
+//   1. gives every chunk a stable logical name. Named chunks (dynamic import
+//      targets) are identified by their entry point; shared chunks by the set
+//      of entry points that reach them, which is exactly how esbuild decides
+//      what goes into a shared chunk. Neither changes when code changes.
+//   2. rewrites chunk references to the logical names. The logical hash has
+//      the same length as esbuild's, so sourcemap columns stay valid.
+//   3. renames each chunk to a hash of its rewritten content, so a chunk is
+//      renamed only when its own code changes.
+//   4. writes importmap.json mapping logical names to real names, plus the
+//      chunks each entry and each root component needs (for modulepreload).
+//      The Rails layout inlines it as <script type="importmap">.
+
+/* eslint-disable @bigbinary/neeto/no-dangling-constants */
+const crypto = require("crypto");
+const fs = require("fs");
+const path = require("path");
+
+const IMPORT_MAP_FILE_NAME = "importmap.json";
+const HASH_LENGTH = 8;
+// Same alphabet esbuild uses for [hash].
+const HASH_ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
+const CHUNK_FILE_RE = /^(.+)-([A-Z2-7]{8})\.digested\.js$/;
+const CHUNK_REFERENCE_RE = /[\w$.-]+-[A-Z2-7]{8}\.digested\.js/g;
+const ENGLISH_TRANSLATIONS_RE = /dist\/translations\/en\.json$/;
+
+const toHash = value => {
+  const digest = crypto.createHash("sha256").update(value).digest();
+
+  return Array.from(
+    digest.subarray(0, HASH_LENGTH),
+    byte => HASH_ALPHABET[byte % HASH_ALPHABET.length]
+  ).join("");
+};
+
+const staticClosure = (outputs, root) => {
+  const seen = new Set();
+  const stack = [root];
+  while (stack.length) {
+    const current = stack.pop();
+    if (seen.has(current) || !outputs[current]) continue;
+
+    seen.add(current);
+    outputs[current].imports
+      .filter(({ kind }) => kind === "import-statement")
+      .forEach(({ path: importPath }) => stack.push(importPath));
+  }
+
+  return seen;
+};
+
+const logicalSignatures = (outputs, jsOutputs) => {
+  const roots = jsOutputs.filter(output => outputs[output].entryPoint);
+  const reachedBy = {};
+  roots.forEach(root => {
+    staticClosure(outputs, root).forEach(output => {
+      (reachedBy[output] ??= []).push(outputs[root].entryPoint);
+    });
+  });
+
+  return Object.fromEntries(
+    jsOutputs.map(output => {
+      const { entryPoint, inputs } = outputs[output];
+      if (entryPoint) return [output, `entry:${entryPoint}`];
+
+      const signature = reachedBy[output]
+        ? `shared:${reachedBy[output].sort().join("|")}`
+        : `inputs:${Object.keys(inputs).sort().join("|")}`;
+
+      return [output, signature];
+    })
+  );
+};
+
+const assignLogicalNames = (chunks, signatures) => {
+  const taken = new Set();
+
+  return Object.fromEntries(
+    chunks.map(({ output, name }) => {
+      let salt = 0;
+      let logicalName;
+      do {
+        const hash = toHash(`${signatures[output]}#${salt}`);
+        logicalName = `${name}-${hash}.digested.js`;
+        salt += 1;
+      } while (taken.has(logicalName));
+      taken.add(logicalName);
+
+      return [output, logicalName];
+    })
+  );
+};
+
+const rewriteReferences = (content, logicalNameByFileName) =>
+  content.replace(
+    CHUNK_REFERENCE_RE,
+    reference => logicalNameByFileName[reference] ?? reference
+  );
+
+const renameSourcemap = (oldPath, newPath) => {
+  const oldMapPath = `${oldPath}.map`;
+  if (!fs.existsSync(oldMapPath)) return;
+
+  const map = JSON.parse(fs.readFileSync(oldMapPath, "utf-8"));
+  map.file = path.basename(newPath);
+  fs.writeFileSync(`${newPath}.map`, JSON.stringify(map));
+  if (oldMapPath !== `${newPath}.map`) fs.unlinkSync(oldMapPath);
+};
+
+const relativeToOutdir = (outdir, filePath) =>
+  path.relative(outdir, filePath).split(path.sep).join("/");
+
+const writeImportMap = ({
+  metafile,
+  outdir,
+  publicPath,
+  absWorkingDir = process.cwd(),
+}) => {
+  const cwd = absWorkingDir;
+  const { outputs } = metafile;
+  const jsOutputs = Object.keys(outputs).filter(output =>
+    output.endsWith(".js")
+  );
+
+  const chunks = jsOutputs
+    .map(output => {
+      const match = path.basename(output).match(CHUNK_FILE_RE);
+
+      return match && { output, name: match[1] };
+    })
+    .filter(Boolean);
+
+  const signatures = logicalSignatures(outputs, jsOutputs);
+  const logicalNames = assignLogicalNames(chunks, signatures);
+  const logicalNameByFileName = Object.fromEntries(
+    chunks.map(({ output }) => [path.basename(output), logicalNames[output]])
+  );
+
+  const finalPaths = {};
+  const imports = {};
+  jsOutputs.forEach(output => {
+    const absolutePath = path.resolve(cwd, output);
+    const content = rewriteReferences(
+      fs.readFileSync(absolutePath, "utf-8"),
+      logicalNameByFileName
+    );
+
+    const logicalName = logicalNames[output];
+    if (!logicalName) {
+      // Entry points keep their name; Sprockets digests them.
+      fs.writeFileSync(absolutePath, content);
+      finalPaths[output] = absolutePath;
+
+      return;
+    }
+
+    const { name } = chunks.find(chunk => chunk.output === output);
+    const finalPath = path.join(
+      path.dirname(absolutePath),
+      `${name}-${toHash(content)}.digested.js`
+    );
+    fs.writeFileSync(finalPath, content);
+    if (finalPath !== absolutePath) fs.unlinkSync(absolutePath);
+    renameSourcemap(absolutePath, finalPath);
+
+    finalPaths[output] = finalPath;
+    const logicalPath = path.join(path.dirname(absolutePath), logicalName);
+    imports[relativeToOutdir(outdir, logicalPath)] = relativeToOutdir(
+      outdir,
+      finalPath
+    );
+  });
+
+  const englishTranslations = jsOutputs.filter(output =>
+    ENGLISH_TRANSLATIONS_RE.test(outputs[output].entryPoint ?? "")
+  );
+
+  const topLevelEntries = jsOutputs.filter(
+    output => !logicalNames[output] && outputs[output].entryPoint
+  );
+
+  const preloads = Object.fromEntries(
+    topLevelEntries.map(entry => {
+      const closure = [
+        ...staticClosure(outputs, entry),
+        ...englishTranslations,
+      ];
+
+      const files = [...new Set(closure)]
+        .filter(output => output !== entry)
+        .map(output => relativeToOutdir(outdir, finalPaths[output]));
+
+      return [path.basename(entry, ".js"), files];
+    })
+  );
+
+  // Root components the entries import dynamically (the packs' componentMap).
+  // The layout preloads the one the page renders, which saves a round trip
+  // after initializeApplication() without running the component early.
+  const components = {};
+  topLevelEntries.forEach(entry => {
+    const entryClosure = staticClosure(outputs, entry);
+    outputs[entry].imports
+      .filter(
+        ({ kind, path: importPath }) =>
+          kind === "dynamic-import" && logicalNames[importPath]
+      )
+      .forEach(({ path: component }) => {
+        const { name } = chunks.find(chunk => chunk.output === component);
+        components[name] = [...staticClosure(outputs, component)]
+          .filter(output => !entryClosure.has(output))
+          .map(output => relativeToOutdir(outdir, finalPaths[output]));
+      });
+  });
+
+  fs.writeFileSync(
+    path.join(outdir, IMPORT_MAP_FILE_NAME),
+    JSON.stringify({ publicPath, imports, preloads, components }, null, 2)
+  );
+};
+
+const removeImportMap = outdir => {
+  fs.rmSync(path.join(outdir, IMPORT_MAP_FILE_NAME), { force: true });
+};
+
+module.exports = {
+  writeImportMap,
+  removeImportMap,
+  IMPORT_MAP_FILE_NAME,
+};

package/configs/esbuild/plugins/preval.js

@@ -11,7 +11,10 @@ const PREVAL_IMPORT_ENGLISH_TRANSLATIONS =
 
 const SOURCEMAP_URL_RE = /\/\/[#@] sourceMappingURL=[^\n]+/gm;
 
-const prevalPlugin = () => ({
+// With inlineEnglishTranslations: false, English is loaded like every other
+// language (a separate chunk) instead of being inlined into the i18n
+// initializer. Otherwise any English string change modifies the core chunk.
+const prevalPlugin = ({ inlineEnglishTranslations = true } = {}) => ({
   name: "preval-plugin",
   setup(build) {
     build.onLoad(
@@ -26,9 +29,10 @@ const prevalPlugin = () => ({
         const transformedContent = contents
           .replace(SOURCEMAP_URL_RE, "")
           .replace(PREVAL_IMPORT_TRANSLATION_IMPORTS, getTranslationImports())
-          .replace(
-            PREVAL_IMPORT_ENGLISH_TRANSLATIONS,
-            JSON.stringify(getEnglishTranslations())
+          .replace(PREVAL_IMPORT_ENGLISH_TRANSLATIONS, () =>
+            inlineEnglishTranslations
+              ? JSON.stringify(getEnglishTranslations())
+              : "null"
           );
 
         return { contents: transformedContent, loader: "js" };

package/configs/esbuild/utils.js

@@ -9,6 +9,8 @@ const {
   DEFAULT_VISUALIZER_TEMPLATE,
   NODE_MODULES_PKG_REGEX,
 } = require("./constants");
+const { writeImportMap, removeImportMap } = require("./importMap");
+const { prevalPlugin } = require("./plugins/preval");
 
 // colors for console output
 const consoleColors = {
@@ -132,6 +134,25 @@ const fixSourcemaps = outdir => {
   }
 };
 
+// `importMap` is not an esbuild option. It is on unless the product sets it to
+// false.
+const resolveImportMap = ({ importMap = true, ...config }) => ({
+  ...config,
+  importMap,
+});
+
+const withImportMapPlugins = config =>
+  config.importMap
+    ? {
+        ...config,
+        plugins: config.plugins.map(plugin =>
+          plugin.name === "preval-plugin"
+            ? prevalPlugin({ inlineEnglishTranslations: false })
+            : plugin
+        ),
+      }
+    : config;
+
 const build = async config => {
   try {
     console.info(
@@ -146,15 +167,35 @@ const build = async config => {
       ? process.argv[process.argv.indexOf("--template") + 1]
       : DEFAULT_VISUALIZER_TEMPLATE;
 
+    const { importMap, ...esbuildConfig } = withImportMapPlugins(
+      resolveImportMap(config)
+    );
     const buildConfig = entrypoint
-      ? { ...config, entryPoints: pick([entrypoint], config.entryPoints) }
-      : config;
-
-    const result = await esbuild.build(buildConfig);
+      ? {
+          ...esbuildConfig,
+          entryPoints: pick([entrypoint], esbuildConfig.entryPoints),
+        }
+      : esbuildConfig;
+
+    const shouldAnalyze = buildConfig.metafile;
+    removeImportMap(buildConfig.outdir);
+    const result = await esbuild.build({
+      ...buildConfig,
+      metafile: shouldAnalyze || importMap,
+    });
 
     fixSourcemaps(buildConfig.outdir);
 
-    if (result.metafile) {
+    if (importMap) {
+      writeImportMap({
+        metafile: result.metafile,
+        outdir: buildConfig.outdir,
+        publicPath: buildConfig.publicPath,
+        absWorkingDir: buildConfig.absWorkingDir,
+      });
+    }
+
+    if (shouldAnalyze) {
       const metaFilePath = writeMetafile(result.metafile, buildConfig.outdir);
       await generateBundleReport({
         metaFilePath,
@@ -173,7 +214,10 @@ const build = async config => {
   }
 };
 
-const watch = async config => {
+const watch = async ({ importMap: _importMap, ...config }) => {
+  // Watch builds are served without an import map; remove any left over from a
+  // previous production build so the layout does not use stale mappings.
+  removeImportMap(config.outdir);
   const ctx = await esbuild.context(config);
   await ctx.watch();
   await ctx.serve({

package/dist/.ready

@@ -1 +1 @@
-Built at 2026-10-08T10:35:55.480Z
+Built at 2026-10-12T05:40:31.752Z

package/dist/cjs/initializers/i18n.js

@@ -23,12 +23,64 @@ function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try {
 
 // eslint-disable-next-line import/no-mutable-exports
 exports.taxonomies = {};
-var initializeI18n = /*#__PURE__*/function () {
-  var _ref = asyncToGenerator._asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(hostTranslations) {
-    var _window$globalProps, _window$globalProps2;
-    var userLanguage, translationImports, englishTranslations, englishResource, resources, defaultTaxonomyKeys, defaultTaxonomies, hostTaxonomies;
+var prefetchTranslations = /*#__PURE__*/function () {
+  var _ref = asyncToGenerator._asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(importTranslations) {
     return _regenerator().w(function (_context) {
-      while (1) switch (_context.n) {
+      while (1) switch (_context.p = _context.n) {
+        case 0:
+          _context.p = 0;
+          _context.n = 1;
+          return importTranslations === null || importTranslations === void 0 ? void 0 : importTranslations();
+        case 1:
+          _context.n = 3;
+          break;
+        case 2:
+          _context.p = 2;
+          _context.v;
+        case 3:
+          return _context.a(2);
+      }
+    }, _callee, null, [[0, 2]]);
+  }));
+  return function prefetchTranslations(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var loadEnglishTranslations = /*#__PURE__*/function () {
+  var _ref2 = asyncToGenerator._asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(translationImports, userLanguage) {
+    var _englishModule$defaul;
+    var englishModule;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          // Start fetching the user's language alongside English instead of after it.
+          if (userLanguage && userLanguage !== "en") {
+            prefetchTranslations(translationImports === null || translationImports === void 0 ? void 0 : translationImports[userLanguage]);
+          }
+          if (translationImports !== null && translationImports !== void 0 && translationImports.en) {
+            _context2.n = 1;
+            break;
+          }
+          return _context2.a(2, {});
+        case 1:
+          _context2.n = 2;
+          return utils_retryImport(translationImports.en);
+        case 2:
+          englishModule = _context2.v;
+          return _context2.a(2, (_englishModule$defaul = englishModule === null || englishModule === void 0 ? void 0 : englishModule["default"]) !== null && _englishModule$defaul !== void 0 ? _englishModule$defaul : englishModule);
+      }
+    }, _callee2);
+  }));
+  return function loadEnglishTranslations(_x2, _x3) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+var initializeI18n = /*#__PURE__*/function () {
+  var _ref3 = asyncToGenerator._asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(hostTranslations) {
+    var _window$globalProps, _preval$require, _window$globalProps2;
+    var userLanguage, translationImports, englishTranslations, englishResource, resources, defaultTaxonomyKeys, defaultTaxonomies, hostTaxonomies, _t2;
+    return _regenerator().w(function (_context3) {
+      while (1) switch (_context3.n) {
         case 0:
           userLanguage = (_window$globalProps = window.globalProps) === null || _window$globalProps === void 0 || (_window$globalProps = _window$globalProps.user) === null || _window$globalProps === void 0 ? void 0 : _window$globalProps.language;
           if (!initializers_constants.IS_CHROME_EXTENSION) {
@@ -37,8 +89,22 @@ var initializeI18n = /*#__PURE__*/function () {
               document.documentElement.setAttribute("lang", userLanguage);
             }
           }
-          translationImports = preval.require("../../../configs/scripts/buildTranslationImports.js");
-          englishTranslations = preval.require("../../../configs/scripts/getEnglishTranslation.js");
+          translationImports = preval.require("../../../configs/scripts/buildTranslationImports.js"); // null when the build keeps English out of this file (import map builds);
+          // English is then loaded like any other language.
+          if (!((_preval$require = preval.require("../../../configs/scripts/getEnglishTranslation.js")) !== null && _preval$require !== void 0)) {
+            _context3.n = 1;
+            break;
+          }
+          _t2 = _preval$require;
+          _context3.n = 3;
+          break;
+        case 1:
+          _context3.n = 2;
+          return loadEnglishTranslations(translationImports, userLanguage);
+        case 2:
+          _t2 = _context3.v;
+        case 3:
+          englishTranslations = _t2;
           englishResource = {
             en: {
               translation: englishTranslations || {}
@@ -54,7 +120,7 @@ var initializeI18n = /*#__PURE__*/function () {
           }));
           hostTaxonomies = ((_window$globalProps2 = window.globalProps) === null || _window$globalProps2 === void 0 ? void 0 : _window$globalProps2.taxonomies) || {};
           exports.taxonomies = initializers_utils_index.replaceNullValuesWithGetter(ramda.mergeDeepLeft(hostTaxonomies, defaultTaxonomies));
-          _context.n = 1;
+          _context3.n = 4;
           return i18next.use(index.Browser).use(reactI18next.initReactI18next).use(initializers_utils_customPostProcessors.sentenceCaseProcessor).use(index.resourcesToBackend(function (language) {
             return utils_retryImport(translationImports === null || translationImports === void 0 ? void 0 : translationImports[language]);
           })).init({
@@ -90,22 +156,22 @@ var initializeI18n = /*#__PURE__*/function () {
               lookupCookie: "lang"
             }
           });
-        case 1:
+        case 4:
           if (!initializers_constants.IS_CHROME_EXTENSION) {
-            _context.n = 2;
+            _context3.n = 5;
             break;
           }
-          return _context.a(2);
-        case 2:
+          return _context3.a(2);
+        case 5:
           document.documentElement.setAttribute("dir", i18next.dir() || "ltr");
           document.documentElement.setAttribute("lang", i18next.resolvedLanguage || "en");
-        case 3:
-          return _context.a(2);
+        case 6:
+          return _context3.a(2);
       }
-    }, _callee);
+    }, _callee3);
   }));
-  return function initializeI18n(_x) {
-    return _ref.apply(this, arguments);
+  return function initializeI18n(_x4) {
+    return _ref3.apply(this, arguments);
   };
 }();