@bigbinary/neeto-commons-frontend 4.14.4 → 4.14.5

package/configs/esbuild/index.js

@@ -13,6 +13,7 @@ const postcss = require("postcss");
 const sass = require("sass");
 
 const alias = require("./alias.js");
+const { atomsImportsPlugin } = require("./plugins/atomsImports.js");
 const { babelPlugin } = require("./plugins/babel.js");
 const { entrypointPlugin } = require("./plugins/entrypoint.js");
 const {
@@ -51,6 +52,8 @@ const config = {
   assetNames: "assets/[name]-[hash].digested",
   chunkNames: "chunks/[name]-[hash].digested",
   plugins: [
+    // Before stripSourcemapsPlugin: both load @bigbinary files.
+    atomsImportsPlugin(),
     stripSourcemapsPlugin(),
     rails(),
     entrypointPlugin(isWatchMode),

package/configs/esbuild/plugins/atomsImports.js

@@ -0,0 +1,318 @@
+// Rewrites imports from the neeto-atoms barrels to the modules that define
+// each name, in app code and in every @bigbinary package.
+//
+// esbuild assigns a module to the chunks of every entry that can reach it. The
+// barrels (`@bigbinary/neeto-atoms`, `/primitives`, `/formik`) re-export the
+// whole library, so once any module on a page's import path imports a barrel,
+// every component used anywhere in the product lands in that page's chunks.
+// Importing each name from its defining module keeps a component in the
+// chunks of the pages that use it.
+//
+// The map is read from the installed barrels at build time, so new atoms
+// exports need no change here. Anything the rewrite can't map (namespace or
+// default imports, unknown names, files that fail to parse) is left as it is.
+
+/* eslint-disable @bigbinary/neeto/no-dangling-constants */
+const fs = require("fs");
+const path = require("path");
+
+const parser = require("@babel/parser");
+
+const { stripSourcemapUrl, SOURCEMAP_SKIP_RE } = require("./stripSourcemaps");
+
+const PACKAGE_NAME = "@bigbinary/neeto-atoms";
+const SPECIFIER_RE = /^(@bigbinary\/neeto-atoms|neetoatoms)(\/[a-z]+)?$/;
+const MENTION_RE = /neeto-?atoms/;
+const INLINE_NAMESPACE = "neeto-atoms-inline";
+const BARE_PREFIX = "neeto-atoms-bare:";
+
+const parse = (code, jsx) =>
+  parser.parse(code, {
+    sourceType: "module",
+    plugins: jsx ? ["jsx"] : [],
+  });
+
+const findPackageDir = cwd => {
+  try {
+    const entry = require.resolve(PACKAGE_NAME, { paths: [cwd] });
+    let dir = path.dirname(entry);
+    while (dir !== path.dirname(dir)) {
+      const manifestPath = path.join(dir, "package.json");
+      if (fs.existsSync(manifestPath)) {
+        const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+        if (manifest.name === PACKAGE_NAME) return { dir, manifest };
+      }
+      dir = path.dirname(dir);
+    }
+  } catch {
+    return null;
+  }
+
+  return null;
+};
+
+// atoms marks only CSS as having side effects, so an import of a barrel
+// that binds nothing can be dropped.
+const hasSideEffectFreeJs = ({ sideEffects }) =>
+  sideEffects === false ||
+  (Array.isArray(sideEffects) &&
+    sideEffects.every(pattern => /\.s?css$/.test(pattern)));
+
+const readBarrel = file => {
+  const code = fs.readFileSync(file, "utf8");
+  const dir = path.dirname(file);
+  const names = {};
+  const reexportRanges = [];
+
+  parse(code, false).program.body.forEach(node => {
+    if (node.type === "ExportAllDeclaration") {
+      reexportRanges.push([node.start, node.end]);
+
+      return;
+    }
+
+    if (node.type !== "ExportNamedDeclaration") return;
+
+    if (!node.source) {
+      // Defined in the barrel itself, served from a module of its own.
+      node.specifiers.forEach(specifier => {
+        names[specifier.exported.name] = {
+          target: `${INLINE_NAMESPACE}:${file}`,
+          imported: specifier.exported.name,
+        };
+      });
+
+      (node.declaration?.declarations ?? []).forEach(({ id }) => {
+        if (id.type === "Identifier") {
+          names[id.name] = {
+            target: `${INLINE_NAMESPACE}:${file}`,
+            imported: id.name,
+          };
+        }
+      });
+
+      return;
+    }
+
+    reexportRanges.push([node.start, node.end]);
+    const source = node.source.value;
+    const target = source.startsWith(".")
+      ? path.resolve(dir, source)
+      : `${BARE_PREFIX}${JSON.stringify([dir, source])}`;
+
+    node.specifiers.forEach(specifier => {
+      if (specifier.type !== "ExportSpecifier") return;
+
+      names[specifier.exported.name] = {
+        target,
+        imported: specifier.local.name,
+      };
+    });
+  });
+
+  // The barrel's own code without its re-exports, for the inline exports.
+  let inlineCode = code;
+  [...reexportRanges]
+    .sort((a, b) => b[0] - a[0])
+    .forEach(([start, end]) => {
+      inlineCode = inlineCode.slice(0, start) + inlineCode.slice(end);
+    });
+
+  return { names, inlineCode };
+};
+
+const createRewriter = ({ dir, manifest }) => {
+  const barrels = {};
+  const inlineModules = {};
+  Object.entries(manifest.exports ?? {}).forEach(([subpath, conditions]) => {
+    const file =
+      typeof conditions === "string" ? conditions : conditions?.import;
+    if (!file || subpath.includes("*") || !file.endsWith(".js")) return;
+
+    const absolute = path.join(dir, file);
+    if (!fs.existsSync(absolute)) return;
+
+    try {
+      const { names, inlineCode } = readBarrel(absolute);
+      barrels[subpath.replace(/^\./, "")] = names;
+      inlineModules[absolute] = inlineCode;
+    } catch {
+      // A barrel we can't read keeps being imported as it is.
+    }
+  });
+  const dropBareImports = hasSideEffectFreeJs(manifest);
+
+  const rewrite = (code, { jsx = false } = {}) => {
+    if (!MENTION_RE.test(code)) return code;
+
+    let ast;
+    try {
+      ast = parse(code, jsx);
+    } catch {
+      return code;
+    }
+
+    const edits = [];
+    ast.program.body.forEach(node => {
+      const isImport = node.type === "ImportDeclaration";
+      const isReexport =
+        node.type === "ExportNamedDeclaration" && Boolean(node.source);
+      if (!isImport && !isReexport) return;
+
+      const match = node.source.value.match(SPECIFIER_RE);
+      const names = match && barrels[match[2] ?? ""];
+      if (!names) return;
+
+      if (isImport && node.specifiers.length === 0) {
+        if (dropBareImports) edits.push({ node, statements: [] });
+
+        return;
+      }
+
+      const unsupported = node.specifiers.some(
+        ({ type }) => type !== "ImportSpecifier" && type !== "ExportSpecifier"
+      );
+      if (unsupported || node.importKind === "type") return;
+
+      const byTarget = new Map();
+      const unmapped = [];
+      node.specifiers.forEach(specifier => {
+        const requested = isImport
+          ? (specifier.imported.name ?? specifier.imported.value)
+          : specifier.local.name;
+        const alias = isImport ? specifier.local.name : specifier.exported.name;
+        const entry = names[requested];
+        if (!entry) {
+          unmapped.push(
+            requested === alias ? requested : `${requested} as ${alias}`
+          );
+
+          return;
+        }
+
+        if (!byTarget.has(entry.target)) byTarget.set(entry.target, []);
+        byTarget.get(entry.target).push(`${entry.imported} as ${alias}`);
+      });
+
+      const keyword = isImport ? "import" : "export";
+      const statements = [...byTarget].map(
+        ([target, specifiers]) =>
+          `${keyword} { ${specifiers.join(", ")} } from ${JSON.stringify(target)};`
+      );
+      if (unmapped.length > 0) {
+        statements.push(
+          `${keyword} { ${unmapped.join(", ")} } from ${JSON.stringify(
+            node.source.value
+          )};`
+        );
+      }
+      edits.push({ node, statements });
+    });
+
+    if (edits.length === 0) return code;
+
+    // Keep every line where it was, so sourcemaps of the rest of the file
+    // stay valid.
+    return edits
+      .sort((a, b) => b.node.start - a.node.start)
+      .reduce((result, { node, statements }) => {
+        const original = result.slice(node.start, node.end);
+        const newlines = "\n".repeat((original.match(/\n/g) ?? []).length);
+
+        return (
+          result.slice(0, node.start) +
+          statements.join(" ") +
+          newlines +
+          result.slice(node.end)
+        );
+      }, code);
+  };
+
+  return { rewrite, inlineModules };
+};
+
+const rewriters = new Map();
+// Rewritten imports can point at this plugin's virtual modules, so app code
+// is only rewritten when the plugin is part of the build.
+let isPluginInstalled = false;
+
+const getRewriter = (cwd = process.cwd()) => {
+  if (!rewriters.has(cwd)) {
+    const atoms = findPackageDir(cwd);
+    rewriters.set(cwd, atoms ? { ...createRewriter(atoms), atoms } : null);
+  }
+
+  return rewriters.get(cwd);
+};
+
+const rewriteAtomsImports = (code, options) =>
+  getRewriter(options?.cwd)?.rewrite(code, options) ?? code;
+
+const rewriteAtomsImportsInAppCode = code =>
+  isPluginInstalled ? rewriteAtomsImports(code, { jsx: true }) : code;
+
+const atomsImportsPlugin = ({ cwd } = {}) => ({
+  name: "atoms-imports",
+  setup(build) {
+    const rewriter = getRewriter(cwd);
+    if (!rewriter) return;
+
+    isPluginInstalled = true;
+
+    const atomsDir = `${rewriter.atoms.dir}${path.sep}`;
+
+    build.onResolve({ filter: new RegExp(`^${INLINE_NAMESPACE}:`) }, args => ({
+      path: args.path.slice(INLINE_NAMESPACE.length + 1),
+      namespace: INLINE_NAMESPACE,
+    }));
+
+    build.onLoad({ filter: /.*/, namespace: INLINE_NAMESPACE }, args => {
+      const contents = rewriter.inlineModules[args.path];
+      if (contents === undefined) {
+        return { errors: [{ text: `Not a neeto-atoms barrel: ${args.path}` }] };
+      }
+
+      return { contents, resolveDir: path.dirname(args.path), loader: "js" };
+    });
+
+    // Names atoms re-exports from other packages resolve from atoms' folder,
+    // as they did through the barrel.
+    build.onResolve({ filter: new RegExp(`^${BARE_PREFIX}`) }, args => {
+      const [resolveDir, specifier] = JSON.parse(
+        args.path.slice(BARE_PREFIX.length)
+      );
+
+      return build.resolve(specifier, { resolveDir, kind: args.kind });
+    });
+
+    build.onLoad(
+      { filter: /node_modules\/@bigbinary\/.*\.m?js$/ },
+      async args => {
+        if (
+          args.path.startsWith(atomsDir) ||
+          SOURCEMAP_SKIP_RE.test(args.path)
+        ) {
+          return null;
+        }
+
+        const code = await fs.promises.readFile(args.path, "utf8");
+        // Whatever this handler returns, stripSourcemapsPlugin no longer loads,
+        // so it strips the sourcemap comment too and each file is read once.
+        const contents = stripSourcemapUrl(rewriter.rewrite(code));
+        if (contents === code) return null;
+
+        return {
+          contents,
+          loader: "js",
+          resolveDir: path.dirname(args.path),
+        };
+      }
+    );
+  },
+});
+
+module.exports = {
+  atomsImportsPlugin,
+  rewriteAtomsImports,
+  rewriteAtomsImportsInAppCode,
+};

package/configs/esbuild/plugins/babel.js

@@ -1,12 +1,16 @@
 const babel = require("@babel/core");
 const parser = require("@babel/parser");
 
+const { rewriteAtomsImportsInAppCode } = require("./atomsImports");
+
 const babelPlugin = () => ({
   name: "babel-plugin",
   setup(build) {
     build.onLoad({ filter: /app\/javascript\/.*\.*\.jsx?$/ }, async args => {
       const fs = require("fs").promises;
-      const contents = await fs.readFile(args.path, "utf8");
+      const contents = rewriteAtomsImportsInAppCode(
+        await fs.readFile(args.path, "utf8")
+      );
 
       const ast = parser.parse(contents, {
         sourceType: "module",

package/configs/esbuild/plugins/stripSourcemaps.js

@@ -23,6 +23,8 @@ const fs = require("fs").promises;
 const SKIP_RE = /(v2\/)?initializers\/i18n\.js$/;
 const SOURCEMAP_URL_RE = /\/\/[#@] sourceMappingURL=[^\n]+/gm;
 
+const stripSourcemapUrl = contents => contents.replace(SOURCEMAP_URL_RE, "");
+
 const stripSourcemapsPlugin = () => ({
   name: "strip-node-modules-sourcemaps",
   setup(build) {
@@ -35,7 +37,7 @@ const stripSourcemapsPlugin = () => ({
         if (!SOURCEMAP_URL_RE.test(contents)) return null;
 
         return {
-          contents: contents.replace(SOURCEMAP_URL_RE, ""),
+          contents: stripSourcemapUrl(contents),
           loader: "js",
         };
       }
@@ -43,4 +45,10 @@ const stripSourcemapsPlugin = () => ({
   },
 });
 
-module.exports = { stripSourcemapsPlugin };
+// atomsImportsPlugin loads @bigbinary files before this plugin and uses these
+// too, so the two agree on what to skip and strip.
+module.exports = {
+  stripSourcemapsPlugin,
+  stripSourcemapUrl,
+  SOURCEMAP_SKIP_RE: SKIP_RE,
+};

package/dist/.ready

@@ -1 +1 @@
-Built at 2026-10-23T16:32:29.063Z
+Built at 2026-10-26T09:42:29.086Z

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-commons-frontend",
-  "version": "4.14.4",
+  "version": "4.14.5",
   "description": "A package encapsulating common code across neeto projects including initializers, utility functions, common components and hooks and so on.",
   "repository": "git@github.com:bigbinary/neeto-commons-frontend.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",