@bigbinary/neeto-commons-frontend 4.14.0 → 4.14.1

package/configs/scripts/dead-code-eliminator/index.js

@@ -10,7 +10,7 @@ const babelParser = require("@babel/parser");
 const traverse = require("@babel/traverse").default;
 const { isNotEmpty, existsBy } = require("@bigbinary/neeto-cist");
 const enhancedResolve = require("enhanced-resolve");
-const { isEmpty, includes, __ } = require("ramda");
+const { isEmpty, includes, __, mergeDeepLeft } = require("ramda");
 
 const {
   RAILS_MOUNTED_COMPONENTS_REGEX,
@@ -20,8 +20,14 @@ const {
 } = require("./constants");
 
 // @ts-ignore
-// eslint-disable-next-line import/extensions
-const webpackConfig = require("../../../../../../config/webpack/webpack.config.js");
+const projectESBuildConfig = require("../../../../../../config/esbuild/config");
+const baseESBuildAlias = require("../../esbuild/alias");
+const baseESBuildExtensions = require("../../esbuild/index");
+
+const mergedESBuildAlias = mergeDeepLeft(
+  projectESBuildConfig.alias,
+  baseESBuildAlias
+);
 
 let modifiedFiles = [];
 let importedItems = [];
@@ -34,10 +40,8 @@ const javascriptDir = pathLib.resolve(
 );
 
 const resolver = enhancedResolve.create.sync({
-  alias: webpackConfig.resolve.alias,
-  modules: webpackConfig.resolve.modules,
-  extensions: webpackConfig.resolve.extensions,
-  fallback: webpackConfig.resolve.fallback,
+  alias: mergedESBuildAlias,
+  extensions: baseESBuildExtensions.config.resolveExtensions,
   conditionNames: ["require", "import", "node", "default", "types"],
 });
 
@@ -63,24 +67,98 @@ const findImports = filePath => {
       const currentDir = pathLib.dirname(filePath);
       const importSource = node.source.value;
 
-      const resolvedPath = resolver(currentDir, importSource);
-      const isNodeModule = resolvedPath.includes("node_modules");
-      if (isNodeModule) return;
+      try {
+        const resolvedPath = resolver(currentDir, importSource);
+        const isNodeModule = resolvedPath.includes("node_modules");
+        if (isNodeModule) return;
+
+        if (isEmpty(node.specifiers)) {
+          importedItems.push({ item: "*", filePath: resolvedPath });
+        }
 
-      if (isEmpty(node.specifiers)) {
-        importedItems.push({ item: "*", filePath: resolvedPath });
+        node.specifiers.forEach(specifier => {
+          if (specifier.type === TYPES.IMPORT_NAMESPACE_SPECIFIER) {
+            importedItems.push({ item: "*", filePath: resolvedPath });
+          } else if (specifier.type === TYPES.IMPORT_DEFAULT_SPECIFIER) {
+            importedItems.push({ item: "default", filePath: resolvedPath });
+          } else {
+            const item = specifier.imported.name;
+            importedItems.push({ item, filePath: resolvedPath });
+          }
+        });
+      } catch (err) {
+        // Skip resolution errors (e.g., malformed package exports in node_modules)
+        // This typically happens with external packages that have invalid exports(like BrowserPreview in          neeto-molecules)
+        console.warn(
+          `Failed to resolve import "${importSource}" in ${filePath}: ${err.message}`
+        );
+
+        return;
       }
+    },
+
+    // Handle React.lazy(() => import("...")) patterns and dynamic imports
+    CallExpression(path) {
+      const { node } = path;
+
+      // Check for React.lazy pattern
+      if (
+        node.callee.type === "MemberExpression" &&
+        node.callee.object.name === "React" &&
+        node.callee.property.name === "lazy" &&
+        node.arguments.length === 1 &&
+        node.arguments[0].type === "ArrowFunctionExpression"
+      ) {
+        const arrowFunction = node.arguments[0];
+        if (
+          arrowFunction.body.type === "CallExpression" &&
+          arrowFunction.body.callee.type === "Import"
+        ) {
+          const importArg = arrowFunction.body.arguments[0];
+          if (importArg && importArg.type === "StringLiteral") {
+            const currentDir = pathLib.dirname(filePath);
+            const importSource = importArg.value;
+
+            try {
+              const resolvedPath = resolver(currentDir, importSource);
+              if (!resolvedPath || typeof resolvedPath !== "string") return;
+
+              const isNodeModule = resolvedPath.includes("node_modules");
+              if (isNodeModule) return;
+
+              importedItems.push({ item: "default", filePath: resolvedPath });
+            } catch (err) {
+              console.warn(
+                `⚠️  Failed to resolve React.lazy import "${importSource}" in ${filePath}: ${err.message}`
+              );
+            }
+          }
+        }
+      }
+
+      // Handle direct dynamic imports: import("...")
+      if (
+        node.callee.type === "Import" &&
+        node.arguments.length === 1 &&
+        node.arguments[0].type === "StringLiteral"
+      ) {
+        const currentDir = pathLib.dirname(filePath);
+        const importSource = node.arguments[0].value;
+
+        try {
+          const resolvedPath = resolver(currentDir, importSource);
+          if (!resolvedPath || typeof resolvedPath !== "string") return;
+
+          const isNodeModule = resolvedPath.includes("node_modules");
+          if (isNodeModule) return;
 
-      node.specifiers.forEach(specifier => {
-        if (specifier.type === TYPES.IMPORT_NAMESPACE_SPECIFIER) {
-          importedItems.push({ item: "*", filePath: resolvedPath });
-        } else if (specifier.type === TYPES.IMPORT_DEFAULT_SPECIFIER) {
           importedItems.push({ item: "default", filePath: resolvedPath });
-        } else {
-          const item = specifier.imported.name;
-          importedItems.push({ item, filePath: resolvedPath });
+        } catch (err) {
+          console.warn(
+            `Failed to resolve dynamic import "${importSource}" in ${filePath}: ${err.message}`
+          );
         }
-      });
+      }
     },
   });
 };
@@ -233,7 +311,9 @@ const run = () => {
   importedItems = [];
   unusedFiles = [];
 
-  console.log("* Collecting all the imports.");
+  console.log(
+    "* Collecting all the imports (including React.lazy and dynamic imports)."
+  );
   traverseDirectoryAndExecuteFunc(javascriptDir, findImports);
 
   console.log("* Removing exports which are not imported.");

package/configs/scripts/getEnglishTranslation.js

@@ -0,0 +1,11 @@
+const fs = require("fs");
+const path = require("path");
+
+const getEnglishTranslations = () => {
+  const filePath = path.resolve(process.cwd(), "dist/translations/en.json");
+  const content = fs.readFileSync(filePath, "utf8");
+
+  return JSON.parse(content);
+};
+
+module.exports = getEnglishTranslations;

package/configs/utils/packageTranslations.js

@@ -0,0 +1,100 @@
+const fs = require("fs");
+const path = require("path");
+
+const { mergeDeepLeft } = require("ramda");
+
+const getPkgTransPath = pkg => {
+  const packageDir = path.join(__dirname, "../../..");
+
+  const basePath = path.join(packageDir, pkg);
+  const transPath1 = path.join(basePath, "app/javascript/src/translations");
+  const transPath2 = path.join(basePath, "src/translations");
+
+  return fs.existsSync(transPath1) ? transPath1 : transPath2;
+};
+
+const loadTranslations = translationsDir => {
+  try {
+    const jsonFiles = fs
+      .readdirSync(translationsDir)
+      .filter(file => file.endsWith(".json"))
+      .map(file => path.join(translationsDir, file));
+
+    const translations = {};
+
+    jsonFiles.forEach(jsonFile => {
+      const content = fs.readFileSync(jsonFile, "utf8");
+      const basename = path.basename(jsonFile, ".json");
+      translations[basename] = { translation: JSON.parse(content) };
+    });
+
+    return translations;
+  } catch {
+    return {};
+  }
+};
+
+const generatePackageTranslations = () => {
+  const packageDir = "./node_modules/@bigbinary";
+  const packages = fs.readdirSync(packageDir);
+
+  return packages
+    .map(pkg => {
+      const transPath = getPkgTransPath(pkg);
+
+      return fs.existsSync(transPath) ? loadTranslations(transPath) : {};
+    })
+    .reduce(mergeDeepLeft, {});
+};
+
+const getHostTranslations = () => {
+  const transPath1 = "./app/javascript/src/translations";
+  const transPath2 = "./src/translations";
+
+  if (fs.existsSync(transPath1)) return loadTranslations(transPath1);
+
+  if (fs.existsSync(transPath2)) return loadTranslations(transPath2);
+
+  return {};
+};
+
+const generateMergedTranslations = () => {
+  const packageTranslations = generatePackageTranslations();
+  const hostTranslations = getHostTranslations();
+  const supportedLanguages = Object.keys(hostTranslations);
+
+  const filteredPackageTranslations = Object.fromEntries(
+    Object.entries(packageTranslations).filter(([lang]) =>
+      supportedLanguages.includes(lang)
+    )
+  );
+
+  return mergeDeepLeft(hostTranslations, filteredPackageTranslations);
+};
+
+const writeTranslationsToDisk = mergedTranslations => {
+  const publicTranslationsDir = path.join(
+    process.cwd(),
+    "dist",
+    "translations"
+  );
+
+  if (!fs.existsSync(publicTranslationsDir)) {
+    fs.mkdirSync(publicTranslationsDir, { recursive: true });
+  }
+
+  Object.keys(mergedTranslations).forEach(lang => {
+    const translationData = mergedTranslations[lang];
+    const outputPath = path.join(publicTranslationsDir, `${lang}.json`);
+
+    fs.writeFileSync(
+      outputPath,
+      JSON.stringify(translationData.translation, null, 2)
+    );
+  });
+};
+
+module.exports = {
+  generateMergedTranslations,
+  writeTranslationsToDisk,
+};

package/configs/utils/prevalReplace.js

@@ -0,0 +1,65 @@
+/* eslint-disable @bigbinary/neeto/no-dangling-constants */
+const { generateMergedTranslations } = require("./packageTranslations");
+
+// Patterns found in dist files (rollup replaces env vars with actual paths,
+// but preval.require() calls remain unevaluated in the dist output)
+const DIST_PREVAL_TRANSLATION_IMPORTS =
+  /preval\.require\(\s*"[^"]*buildTranslationImports\.js"\s*\)/;
+
+const DIST_PREVAL_ENGLISH_TRANSLATIONS =
+  /preval\.require\(\s*"[^"]*getEnglishTranslation\.js"\s*\)/;
+
+// Patterns found in source files (env vars not yet replaced)
+const SRC_PREVAL_TRANSLATION_IMPORTS =
+  /preval\.require\(\s*process\.env\.GET_TRANSLATION_IMPORTS_PATH\s*\)/;
+
+const SRC_PREVAL_ENGLISH_TRANSLATIONS =
+  /preval\.require\(\s*process\.env\.GET_ENGLISH_TRANSLATIONS_PATH\s*\)/;
+
+let cachedEnglishTranslations = null;
+
+const getEnglishTranslationsJSON = () => {
+  if (cachedEnglishTranslations !== null) return cachedEnglishTranslations;
+
+  const mergedTranslations = generateMergedTranslations();
+  cachedEnglishTranslations = JSON.stringify(
+    mergedTranslations.en?.translation || {}
+  );
+
+  return cachedEnglishTranslations;
+};
+
+const prevalReplace = source => {
+  const hasDistPattern =
+    DIST_PREVAL_TRANSLATION_IMPORTS.test(source) ||
+    DIST_PREVAL_ENGLISH_TRANSLATIONS.test(source);
+
+  const hasSrcPattern =
+    SRC_PREVAL_TRANSLATION_IMPORTS.test(source) ||
+    SRC_PREVAL_ENGLISH_TRANSLATIONS.test(source);
+
+  if (!hasDistPattern && !hasSrcPattern) return null;
+
+  const englishJSON = getEnglishTranslationsJSON();
+
+  let replaced = source;
+
+  // Replace translation imports with empty object (no lazy-loading in tests/storybook)
+  replaced = replaced.replace(DIST_PREVAL_TRANSLATION_IMPORTS, "{}");
+  replaced = replaced.replace(SRC_PREVAL_TRANSLATION_IMPORTS, "{}");
+
+  // Replace english translations with merged package translations
+  replaced = replaced.replace(
+    DIST_PREVAL_ENGLISH_TRANSLATIONS,
+    () => englishJSON
+  );
+
+  replaced = replaced.replace(
+    SRC_PREVAL_ENGLISH_TRANSLATIONS,
+    () => englishJSON
+  );
+
+  return replaced;
+};
+
+module.exports = { prevalReplace };

package/configs/utils.js

@@ -4,7 +4,7 @@ const neetoNanosFrontendPackages = {
     "neetomessagetemplates",
   ],
   neetoProjects: ["@bigbinary/neeto-projects-frontend", "neetoprojects"],
-  neetoEditor: ["@bigbinary/neeto-editor", "neetoeditor"],
+  neetoEditor: ["@bigbinary/neeto-editor-frontend", "neetoeditor"],
   neetoFields: ["@bigbinary/neeto-fields-frontend", "neetofields"],
   neetoWebhooks: ["@bigbinary/neeto-webhooks-frontend", "neetowebhooks"],
   neetoImageUploader: [
@@ -66,6 +66,25 @@ const generateTransformer = (packageName, aliasName) => {
       transform: `${packageName}/\${member}`,
       preventFullImport: false,
     },
+    // v2 (neeto-atoms migration)
+    [`${packageName}/v2`]: {
+      transform: createImportTransformer(`${packageName}/v2`),
+      preventFullImport: true,
+      skipDefaultConversion: true,
+    },
+    [`${aliasName}/v2`]: {
+      transform: createImportTransformer(`${aliasName}/v2`),
+      preventFullImport: true,
+      skipDefaultConversion: true,
+    },
+    [`${aliasName}/v2/([A-Z][a-zA-Z]+)$`]: {
+      transform: `${aliasName}/v2/\${member}`,
+      preventFullImport: false,
+    },
+    [`${packageName}/v2/([A-Z][a-zA-Z]+)$`]: {
+      transform: `${packageName}/v2/\${member}`,
+      preventFullImport: false,
+    },
   };
 };
 

package/configs/vite/index.js

@@ -1,9 +1,15 @@
 /* eslint-disable  import/extensions */
+
+const fs = require("fs");
+
 const { default: viteYaml } = require("@modyfi/vite-plugin-yaml");
 const { default: react } = require("@vitejs/plugin-react");
 const dotenv = require("dotenv");
 
 const { nanoDevelopmentPlugin } = require("./plugins/nanoDevelopment.js");
+const {
+  packageTranslationsPlugin,
+} = require("./plugins/packageTranslations.js");
 const { prevalPlugin } = require("./plugins/preval.js");
 const { reactGiphyPlugin } = require("./plugins/reactGiphy.js");
 const svgr = require("./plugins/svgr.js");
@@ -16,6 +22,16 @@ const { config: esbuildConfig } = require("../esbuild/index.js");
 dotenv.config({ path: ".env.development" });
 
 const port = process.env.DEVSERVER_PORT || 8000;
+const root = "app/javascript/packs";
+
+const isTestEnv = process.env.TEST_ENV === "development";
+
+const warmupClientFiles = fs.existsSync(root)
+  ? fs
+      .readdirSync(root)
+      .filter(file => file.endsWith(".js"))
+      .map(file => `./${file}`)
+  : [];
 
 const config = {
   assestsInclude: ["**/*.yaml"],
@@ -25,12 +41,23 @@ const config = {
     react({ babel: VITE_BABEL_CONFIG }),
     virtualizedPlugin(),
     reactGiphyPlugin(),
+    packageTranslationsPlugin(),
     prevalPlugin(),
     viteYaml(),
     nanoDevelopmentPlugin(),
   ],
   resolve: { extensions: esbuildConfig.resolveExtensions },
-  server: { port, origin: `http://localhost:${port}`, cors: true },
+  server: {
+    port,
+    origin: `http://localhost:${port}`,
+    cors: true,
+    warmup: {
+      clientFiles: [
+        ...warmupClientFiles,
+        ...(isTestEnv ? ["./app/javascript/**/*.{js,jsx,ts,tsx,json}"] : []),
+      ],
+    },
+  },
   build: {
     manifest: true,
     sourcemap: true,
@@ -38,7 +65,7 @@ const config = {
     rollupOptions: { input: esbuildConfig.entryPoints },
   },
   define: { ...esbuildConfig.define, global: "{}" },
-  root: "app/javascript/packs",
+  root,
   optimizeDeps: {
     include: ["@bigbinary/neeto-icons/typeface-logos", "zustand/shallow"],
   },

package/configs/vite/plugins/nanoDevelopment.js

@@ -1,29 +1,70 @@
-/* eslint-disable @bigbinary/neeto/no-dangling-constants */
-
 const path = require("path");
 
 const { watch } = require("chokidar");
 
-const nanoDevelopmentPlugin = () => ({
-  name: "vite-plugin-nano-development",
-  configureServer: server => {
-    const bigBinaryPackages = path.resolve(
-      process.cwd(),
-      "node_modules",
-      "@bigbinary"
-    );
-
-    watch(bigBinaryPackages, { ignoreInitial: true })
-      .on("all", async event => {
-        if (event === "change" || event === "add") {
+const nanoDevelopmentPlugin = () => {
+  let restartTimeout;
+  let watcher;
+  let restartInProgress = false;
+  let restartAgain = false;
+
+  return {
+    name: "vite-plugin-nano-development",
+    configureServer(server) {
+      const bigBinaryPackagesDir = path.resolve(
+        process.cwd(),
+        "node_modules",
+        "@bigbinary"
+      );
+
+      server.httpServer?.on("close", () => {
+        if (!watcher) return;
+
+        watcher.close();
+        watcher = null;
+      });
+
+      watcher = watch(bigBinaryPackagesDir, { ignoreInitial: true })
+        .on("add", restartServer)
+        .on("change", restartServer)
+        .on("error", error =>
+          // eslint-disable-next-line no-console
+          console.error(`[nano-development-plugin] watcher error: ${error}`)
+        );
+
+      function restartServer(filePath) {
+        if (!filePath.endsWith(".ready")) return;
+
+        clearTimeout(restartTimeout);
+        restartTimeout = setTimeout(() => {
+          if (restartInProgress) {
+            restartAgain = true;
+          } else {
+            doRestart();
+          }
+        }, 1000);
+      }
+
+      async function doRestart() {
+        restartInProgress = true;
+        try {
           await server.restart(true);
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(`[nano-development-plugin] restart error: ${error}`);
+        } finally {
+          setTimeout(() => {
+            restartInProgress = false;
+
+            if (restartAgain) {
+              restartAgain = false;
+              doRestart();
+            }
+          }, 1000);
         }
-      })
-      .on("error", error =>
-        /* eslint-disable no-console */
-        console.log(`[nano-development-plugin] watcher error: ${error}`)
-      );
-  },
-});
+      }
+    },
+  };
+};
 
 module.exports = { nanoDevelopmentPlugin };

package/configs/vite/plugins/packageTranslations.js

@@ -0,0 +1,112 @@
+/* eslint-disable @bigbinary/neeto/use-array-methods */
+const fs = require("fs");
+const path = require("path");
+
+const { watch } = require("chokidar");
+
+const {
+  generateMergedTranslations,
+  writeTranslationsToDisk,
+} = require("../../utils/packageTranslations");
+
+// Only watch host app translations. Package translations inside
+// node_modules/@bigbinary are handled by the nanoDevelopment plugin
+const getTranslationWatchPaths = () => {
+  const hostTranslationsDir = path.resolve("app/javascript/src/translations");
+
+  return fs.existsSync(hostTranslationsDir) ? [hostTranslationsDir] : [];
+};
+
+const rebuildTranslations = () => {
+  const mergedTranslations = generateMergedTranslations();
+  writeTranslationsToDisk(mergedTranslations);
+};
+
+const packageTranslationsPlugin = () => {
+  let watcher;
+  let debounceTimeout;
+
+  return {
+    name: "package-translations",
+    buildStart() {
+      rebuildTranslations();
+    },
+    handleHotUpdate({ file }) {
+      // Suppress Vite's default full-reload for translation JSON files
+      // so that only our plugin controls the rebuild + reload cycle.
+      if (file.includes("translations") && file.endsWith(".json")) return [];
+
+      return undefined;
+    },
+    configureServer(server) {
+      const watchPaths = getTranslationWatchPaths();
+      if (watchPaths.length === 0) return;
+
+      server.watcher.unwatch(watchPaths);
+      server.httpServer?.on("close", () => {
+        if (!watcher) return;
+
+        watcher.close();
+        watcher = null;
+      });
+
+      const invalidateAllModules = () => {
+        const moduleGraph = server.moduleGraph;
+
+        for (const mod of moduleGraph.idToModuleMap.values()) {
+          moduleGraph.invalidateModule(mod);
+        }
+      };
+
+      const handleChange = () => {
+        clearTimeout(debounceTimeout);
+        debounceTimeout = setTimeout(() => {
+          try {
+            const mergedTranslations = generateMergedTranslations();
+            writeTranslationsToDisk(mergedTranslations);
+
+            // Invalidate all modules so the preval transform re-runs and
+            // all import URLs are regenerated with the new browserHash.
+            invalidateAllModules();
+
+            // Update the browserHash on every optimized dep and chunk entry
+            // so the ?v= param changes in import URLs, forcing the browser
+            // to bypass its immutable cache for pre-bundled deps.
+            const depsOptimizer = server.environments?.client?.depsOptimizer;
+            if (depsOptimizer?.metadata) {
+              const newHash = Date.now().toString(36);
+              const { metadata } = depsOptimizer;
+              metadata.browserHash = newHash;
+
+              for (const entry of Object.values(metadata.optimized)) {
+                entry.browserHash = newHash;
+              }
+
+              for (const entry of Object.values(metadata.chunks)) {
+                entry.browserHash = newHash;
+              }
+            }
+
+            server.hot.send({ type: "full-reload" });
+          } catch (error) {
+            server.config.logger.error(
+              `[package-translations] Rebuild failed: ${error}`
+            );
+          }
+        }, 1000);
+      };
+
+      watcher = watch(watchPaths, { ignoreInitial: true })
+        .on("add", handleChange)
+        .on("change", handleChange)
+        .on("unlink", handleChange)
+        .on("error", error =>
+          server.config.logger.error(
+            `[package-translations] Watcher error: ${error}`
+          )
+        );
+    },
+  };
+};
+
+module.exports = { packageTranslationsPlugin };

package/configs/vite/plugins/preval.js

@@ -1,19 +1,29 @@
 /* eslint-disable  import/extensions */
 /* eslint-disable @bigbinary/neeto/no-dangling-constants */
 
-const PkgTranslations = require("../../scripts/getPkgTranslations.js");
+const getTranslationImports = require("../../scripts/buildTranslationImports.js");
+const getEnglishTranslations = require("../../scripts/getEnglishTranslation.js");
 
-const PREVAL_IMPORT =
-  'preval.require("../../configs/scripts/getPkgTranslations.js")';
+const PREVAL_IMPORT_TRANSLATION_IMPORTS =
+  'preval.require("../../configs/scripts/buildTranslationImports.js")';
+
+const PREVAL_IMPORT_ENGLISH_TRANSLATIONS =
+  'preval.require("../../configs/scripts/getEnglishTranslation.js")';
 
 const prevalPlugin = () => ({
   name: "preval-plugin",
   transform(code, id) {
-    if (id.includes("node_modules") && code.includes(PREVAL_IMPORT)) {
-      const replacedCode = code.replace(
-        PREVAL_IMPORT,
-        JSON.stringify(PkgTranslations)
-      );
+    if (
+      id.includes("node_modules") &&
+      (code.includes(PREVAL_IMPORT_TRANSLATION_IMPORTS) ||
+        code.includes(PREVAL_IMPORT_ENGLISH_TRANSLATIONS))
+    ) {
+      const replacedCode = code
+        .replace(PREVAL_IMPORT_TRANSLATION_IMPORTS, getTranslationImports())
+        .replace(
+          PREVAL_IMPORT_ENGLISH_TRANSLATIONS,
+          JSON.stringify(getEnglishTranslations())
+        );
 
       return { code: replacedCode, map: null };
     }