@bigbinary/neeto-commons-frontend 4.14.0 → 4.14.1

package/README.md

@@ -33,7 +33,6 @@ Initializers [↗](./docs/initializers/README.md)
 - [Set up translations](./docs/initializers/translation.md)
 - [Set up logger](./docs/initializers/logger.md)
 - [Disable React Developer Tools in production](./docs/initializers/reactDevTools.md)
-- [Set up mixpanel](./docs/initializers/mixpanel.md)
 
 </td>
 </tr>
@@ -65,10 +64,12 @@ React utilities [↗](./docs/react/README.md)
 - [useMutationWithInvalidation](./docs/react/hooks/useMutationWithInvalidation.md)
 - [useFetchNeetoApps](./docs/react/hooks/useFetchNeetoApps.md)
 - [usePersistedQuery](./docs/react/hooks/usePersistedQuery.md)
+- [usePrefersReducedMotion](./docs/react/hooks/usePrefersReducedMotion.md)
 - [useIsElementVisibleInDom](./docs/react/hooks/useIsElementVisibleInDom.md)
 - [useStateWithDependency](./docs/react/hooks/useStateWithDependency.md)
 - [useQueryParams](./docs/react/hooks/useQueryParams.md)
 - [useBreakpoints](./docs/react/hooks/useBreakpoints.md)
+- [useColumnConfig](./docs/react/hooks/useColumnConfig.md)
 - [PrivateRoute](./docs/react/components/PrivateRoute.md)
 - [AppContainer](./docs/react/components/AppContainer.md)
 - [QueryClientProvider](./docs/react/components/QueryClientProvider.md)
@@ -80,6 +81,7 @@ React utilities [↗](./docs/react/README.md)
 - [handleMetaClick](./docs/react/utils/handleMetaClick.md)
 - [isMetaKeyPressed](./docs/react/utils/isMetaKeyPressed.md)
 - [withT](./docs/react/utils/withT.md)
+- [lazyWithRetry](./docs/react/utils/lazyWithRetry.md)
 
 </td>
   </tr>
@@ -176,8 +178,7 @@ them to read more:
 2. [React utilities](./docs/react/README.md)
 3. [Web utility functions](./docs/utils/README.md)
 4. [Default configurations](./docs/configs/README.md)
-5. [Cypress Utils](./docs/cypress/README.md)
-6. [Common constants](./docs/constants#common-constants)
+5. [Common constants](./docs/constants#common-constants)
 
 ## Other references
 

package/configs/babel.js

@@ -55,6 +55,8 @@ module.exports = function (api) {
         {
           root: ["./src"],
           alias: {
+            "dayjs/plugin/customParseFormat":
+              "@bigbinary/neeto-commons-frontend/utils/customParseFormatPlugin",
             "dayjs/plugin/timezone":
               "@bigbinary/neeto-commons-frontend/utils/timezonePlugin",
           },

package/configs/esbuild/alias.js

@@ -20,6 +20,12 @@ module.exports = {
     "../../../",
     "neeto-time-zones/dist"
   ),
+  "dayjs/plugin/customParseFormat": require.resolve(
+    "@bigbinary/neeto-commons-frontend/utils/customParseFormatPlugin"
+  ),
+  "dayjs/plugin/timezone": require.resolve(
+    "@bigbinary/neeto-commons-frontend/utils/timezonePlugin"
+  ),
   images: path.resolve(process.cwd(), "app/assets/images"),
   assert: require.resolve("assert/"),
   buffer: require.resolve("buffer/"),

package/configs/esbuild/constants.js

@@ -8,6 +8,8 @@ const VITE_BABEL_CONFIG = {
       {
         root: ["./src"],
         alias: {
+          "dayjs/plugin/customParseFormat":
+            "@bigbinary/neeto-commons-frontend/utils/customParseFormatPlugin",
           "dayjs/plugin/timezone":
             "@bigbinary/neeto-commons-frontend/utils/timezonePlugin",
         },
@@ -25,6 +27,8 @@ const BABEL_CONFIG = {
       {
         root: ["./src"],
         alias: {
+          "dayjs/plugin/customParseFormat":
+            "@bigbinary/neeto-commons-frontend/utils/customParseFormatPlugin",
           "dayjs/plugin/timezone":
             "@bigbinary/neeto-commons-frontend/utils/timezonePlugin",
         },
@@ -35,4 +39,13 @@ const BABEL_CONFIG = {
   ],
 };
 
-module.exports = { BABEL_CONFIG, VITE_BABEL_CONFIG };
+const DEFAULT_VISUALIZER_TEMPLATE = "treemap";
+
+const NODE_MODULES_PKG_REGEX = /node_modules\/(@bigbinary\/[^/]+)\/(.*)/;
+
+module.exports = {
+  BABEL_CONFIG,
+  VITE_BABEL_CONFIG,
+  DEFAULT_VISUALIZER_TEMPLATE,
+  NODE_MODULES_PKG_REGEX,
+};

package/configs/esbuild/importMap.js

@@ -0,0 +1,258 @@
+// 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
+  );
+
+// A chunk import left with esbuild's name would 404 in the browser, since only
+// logical names are in the map. Fail the build instead, e.g. if esbuild ever
+// changes how it names chunks.
+const assertReferencesRewritten = ({
+  output,
+  content,
+  outputs,
+  logicalNames,
+}) => {
+  outputs[output].imports
+    .filter(({ path: importPath }) => logicalNames[importPath])
+    .forEach(({ path: importPath }) => {
+      if (content.includes(path.basename(importPath))) {
+        throw new Error(
+          `[importMap] ${output} still imports ${path.basename(importPath)} by its esbuild name`
+        );
+      }
+    });
+};
+
+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
+    );
+    assertReferencesRewritten({ output, content, outputs, logicalNames });
+
+    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/index.js

@@ -15,8 +15,12 @@ const sass = require("sass");
 const alias = require("./alias.js");
 const { babelPlugin } = require("./plugins/babel.js");
 const { entrypointPlugin } = require("./plugins/entrypoint.js");
+const {
+  packageTranslationsPlugin,
+} = require("./plugins/packageTranslations.js");
 const { prevalPlugin } = require("./plugins/preval.js");
 const { reactGiphyPlugin } = require("./plugins/reactGiphy.js");
+const { stripSourcemapsPlugin } = require("./plugins/stripSourcemaps.js");
 const { virtualizedPlugin } = require("./plugins/virtualized.js");
 const { createDefinitions, entryPoint, build, watch } = require("./utils.js");
 
@@ -24,6 +28,7 @@ const postCssConfig = require("../../../../../postcss.config.js");
 const commonResolve = require("../webpack/resolve.js");
 
 const isProduction = process.env.NODE_ENV === "production";
+const enableMetafile = process.argv.includes("--analyze");
 const isWatchMode = process.argv.includes("--watch");
 const assetHost =
   process.env.ASSET_HOST &&
@@ -39,14 +44,17 @@ const config = {
   publicPath: `${assetHost ?? ""}/assets`,
   bundle: true,
   splitting: true,
+  metafile: enableMetafile,
   outdir: path.join(process.cwd(), "app/assets/builds"),
   minify: isProduction,
   sourcemap: isWatchMode ? true : "external",
   assetNames: "assets/[name]-[hash].digested",
   chunkNames: "chunks/[name]-[hash].digested",
   plugins: [
+    stripSourcemapsPlugin(),
     rails(),
     entrypointPlugin(isWatchMode),
+    packageTranslationsPlugin(),
     prevalPlugin(),
     babelPlugin(),
     virtualizedPlugin(),
@@ -54,15 +62,13 @@ const config = {
     svgPlugin(),
     nodeModulesPolyfillPlugin({ modules: { events: true, fs: true } }),
     sassPlugin({
-      transform: async source => {
+      transform: async (source, _resolveDir, filePath) => {
         const { css } = await postcss(postCssConfig.plugins).process(source, {
-          from: undefined,
+          from: filePath,
         });
 
         return css;
       },
-      importMapper: path =>
-        path.replace("@bigbinary/neetoui", "@bigbinary/neetoui/dist"),
       logger: sass.Logger.silent,
     }),
     yamlPlugin(),
@@ -70,7 +76,6 @@ const config = {
   conditions: ["style"],
   logLevel: isWatchMode ? "info" : "error",
   format: "esm",
-  metafile: true,
   platform: "browser",
   mainFields: ["browser", "module", "main"],
   loader: {

package/configs/esbuild/plugins/packageTranslations.js

@@ -0,0 +1,16 @@
+const {
+  generateMergedTranslations,
+  writeTranslationsToDisk,
+} = require("../../utils/packageTranslations");
+
+const packageTranslationsPlugin = () => ({
+  name: "package-translations",
+  setup(build) {
+    build.onStart(() => {
+      const mergedTranslations = generateMergedTranslations();
+      writeTranslationsToDisk(mergedTranslations);
+    });
+  },
+});
+
+module.exports = { packageTranslationsPlugin };

package/configs/esbuild/plugins/preval.js

@@ -1,24 +1,41 @@
+/* eslint-disable @bigbinary/neeto/no-dangling-constants */
 /* eslint-disable  import/extensions */
-const PkgTranslations = require("@bigbinary/neeto-commons-frontend/configs/scripts/getPkgTranslations.js");
+const getTranslationImports = require("../../scripts/buildTranslationImports.js");
+const getEnglishTranslations = require("../../scripts/getEnglishTranslation.js");
 
-const prevalPlugin = () => ({
+const PREVAL_IMPORT_TRANSLATION_IMPORTS =
+  'preval.require("../../configs/scripts/buildTranslationImports.js")';
+
+const PREVAL_IMPORT_ENGLISH_TRANSLATIONS =
+  'preval.require("../../configs/scripts/getEnglishTranslation.js")';
+
+const SOURCEMAP_URL_RE = /\/\/[#@] sourceMappingURL=[^\n]+/gm;
+
+// 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(
       {
         filter:
-          /node_modules\/@bigbinary\/neeto-commons-frontend\/dist\/(cjs\/)?initializers\/i18n.js/,
+          /node_modules\/@bigbinary\/neeto-commons-frontend\/dist\/(cjs\/)?(v2\/)?initializers\/i18n.js/,
       },
       async args => {
         const fs = require("fs").promises;
         const contents = await fs.readFile(args.path, "utf8");
 
-        const transformedContents = contents.replace(
-          `preval.require("../../configs/scripts/getPkgTranslations.js")`,
-          JSON.stringify(PkgTranslations)
-        );
+        const transformedContent = contents
+          .replace(SOURCEMAP_URL_RE, "")
+          .replace(PREVAL_IMPORT_TRANSLATION_IMPORTS, getTranslationImports())
+          .replace(PREVAL_IMPORT_ENGLISH_TRANSLATIONS, () =>
+            inlineEnglishTranslations
+              ? JSON.stringify(getEnglishTranslations())
+              : "null"
+          );
 
-        return { contents: transformedContents, loader: "js" };
+        return { contents: transformedContent, loader: "js" };
       }
     );
   },

package/configs/esbuild/plugins/reactGiphy.js

@@ -1,3 +1,4 @@
+/* eslint-disable @bigbinary/neeto/no-dangling-constants */
 const WRONG_CODE = /^if\s\(module\.hot\)[\s\S]+/gm;
 
 const reactGiphyPlugin = () => ({

package/configs/esbuild/plugins/stripSourcemaps.js

@@ -0,0 +1,46 @@
+// esbuild has a bug in its sourcemap chaining logic. When it bundles the host
+// app and encounters @bigbinary packages built with Rollup (which code-splits
+// shared code into chunks like lodash-CAzW54WT.js, slicedToArray-BcL7fKuL.js),
+// esbuild tries to chain through the upstream .map files. During this chaining,
+// it corrupts source indices in the mappings — causing code from one package
+// file (e.g. FinderModal/Body.jsx) to be attributed to a completely unrelated
+// host app file (e.g. apis/s3.js). The line/column numbers are correct, but
+// they point to the wrong file. This is a known class of esbuild issues
+// (evanw/esbuild#3553, evanw/esbuild#3460).
+//
+// To work around this, we strip `//# sourceMappingURL=...` comments from
+// @bigbinary package files before esbuild sees them, preventing it from
+// attempting the broken chaining. After the build, `fixSourcemaps` in utils.js
+// correctly re-composes sourcemaps using @jridgewell/remapping.
+//
+// Files handled by other onLoad plugins (e.g. preval handles i18n.js) are
+// skipped since esbuild only allows one onLoad handler per file — those plugins
+// strip the comment themselves.
+
+/* eslint-disable @bigbinary/neeto/no-dangling-constants */
+const fs = require("fs").promises;
+
+const SKIP_RE = /(v2\/)?initializers\/i18n\.js$/;
+const SOURCEMAP_URL_RE = /\/\/[#@] sourceMappingURL=[^\n]+/gm;
+
+const stripSourcemapsPlugin = () => ({
+  name: "strip-node-modules-sourcemaps",
+  setup(build) {
+    build.onLoad(
+      { filter: /node_modules\/@bigbinary\/.*\.js$/ },
+      async args => {
+        if (SKIP_RE.test(args.path)) return null;
+
+        const contents = await fs.readFile(args.path, "utf8");
+        if (!SOURCEMAP_URL_RE.test(contents)) return null;
+
+        return {
+          contents: contents.replace(SOURCEMAP_URL_RE, ""),
+          loader: "js",
+        };
+      }
+    );
+  },
+});
+
+module.exports = { stripSourcemapsPlugin };