@bigbinary/neeto-commons-frontend 4.14.0-beta.0 → 4.14.1

package/configs/esbuild/utils.js

@@ -1,6 +1,16 @@
 const esbuild = require("esbuild");
 const path = require("path");
 const fs = require("fs");
+const { execSync, spawn } = require("child_process");
+const { pick } = require("ramda");
+const { globSync } = require("glob");
+const remapping = require("@jridgewell/remapping");
+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 = {
@@ -20,23 +30,194 @@ const createDefinitions = process => {
 
 const entryPoint = file => path.join(process.cwd(), file);
 
+const writeMetafile = (metafile, outdir) => {
+  const metaFilePath = path.join(outdir, "meta.json");
+  fs.writeFileSync(metaFilePath, JSON.stringify(metafile, null, 2));
+  return metaFilePath;
+};
+
+const generateBundleReport = async ({ metaFilePath, outdir, template }) => {
+  try {
+    console.info(
+      `${consoleColors.info}[bundle-analyzer]${consoleColors.reset} Generating bundle report...`
+    );
+
+    const htmlFilePath = path.join(outdir, "bundle-report.html");
+    execSync(
+      `npx esbuild-visualizer --metadata ${metaFilePath} --filename ${htmlFilePath} --template ${template}`,
+      { stdio: "inherit" }
+    );
+
+    console.info(
+      `${consoleColors.success}[bundle-analyzer]${consoleColors.reset} Bundle report generated at ${htmlFilePath}`
+    );
+
+    const command = process.platform === "win32" ? "start" : "open";
+    spawn(command, [htmlFilePath], { detached: true, stdio: "ignore" });
+    console.info(
+      `${consoleColors.success}[bundle-analyzer]${consoleColors.reset} Bundle report opened in browser`
+    );
+
+    return htmlFilePath;
+  } catch (error) {
+    console.error(
+      `${consoleColors.error}[bundle-analyzer]${consoleColors.reset} Failed to generate bundle report: ${error.message}`
+    );
+    throw error;
+  }
+};
+
+const loadUpstreamMap = jsAbsPath => {
+  const mapPath = jsAbsPath + ".map";
+  if (!fs.existsSync(mapPath)) return null;
+
+  try {
+    const map = JSON.parse(fs.readFileSync(mapPath, "utf-8"));
+    if (!map.sources?.length || map.sources.every(s => !s)) return null;
+
+    return map;
+  } catch {
+    return null;
+  }
+};
+
+const normalizeSourcePath = source => {
+  const match = source.match(NODE_MODULES_PKG_REGEX);
+  if (match) return `${match[1]}:${match[2]}`;
+
+  return source;
+};
+
+const fixSourcemaps = outdir => {
+  const mapFiles = globSync("**/*.map", {
+    cwd: outdir,
+    absolute: true,
+    nodir: true,
+  });
+
+  if (!mapFiles.length) return;
+
+  for (const mapFile of mapFiles) {
+    let parsed;
+
+    try {
+      const raw = fs.readFileSync(mapFile, "utf-8");
+      parsed = JSON.parse(raw);
+    } catch {
+      continue;
+    }
+
+    if (!parsed.sources?.length) continue;
+
+    try {
+      const mapDir = path.dirname(mapFile);
+
+      const result = remapping(parsed, (sourcePath, ctx) => {
+        if (!sourcePath) return null;
+
+        const baseDir = ctx.importer
+          ? path.dirname(path.resolve(mapDir, ctx.importer))
+          : mapDir;
+        const absPath = path.resolve(baseDir, sourcePath);
+        if (!absPath.includes("node_modules/@bigbinary")) return null;
+
+        return loadUpstreamMap(absPath);
+      });
+
+      result.sources = result.sources.map(normalizeSourcePath);
+
+      fs.writeFileSync(mapFile, JSON.stringify(result));
+    } catch {
+      parsed.sources = parsed.sources.map(normalizeSourcePath);
+      fs.writeFileSync(mapFile, JSON.stringify(parsed));
+    }
+  }
+};
+
+// `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(
       `${consoleColors.info}[esbuild]${consoleColors.reset} Building...`
     );
-    await esbuild.build(config);
+
+    const entrypoint = process.argv.includes("--entrypoint")
+      ? process.argv[process.argv.indexOf("--entrypoint") + 1]
+      : null;
+
+    const template = process.argv.includes("--template")
+      ? process.argv[process.argv.indexOf("--template") + 1]
+      : DEFAULT_VISUALIZER_TEMPLATE;
+
+    const { importMap, ...esbuildConfig } = withImportMapPlugins(
+      resolveImportMap(config)
+    );
+    const buildConfig = entrypoint
+      ? {
+          ...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 (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,
+        outdir: buildConfig.outdir,
+        template,
+      });
+    }
+
     console.info(
       `${consoleColors.success}[esbuild]${consoleColors.reset} Build successful`
     );
-  } catch {
-    console.error(
-      `${consoleColors.error}[esbuild]${consoleColors.reset} Build failed`
-    );
+  } catch (error) {
+    console.error(`Build error: ${error.message}`);
+    const errorMessage = `${consoleColors.error}[esbuild]${consoleColors.reset} Build failed`;
+    throw new Error(errorMessage);
   }
 };
 
-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/configs/eslint/globals.mjs

@@ -0,0 +1,22 @@
+import { defineConfig } from "eslint/config";
+
+// Globals can be disabled with the string "off"
+// "writable" to allow the variable to be overwritten or "readonly" to disallow overwriting.
+export default defineConfig([
+  {
+    languageOptions: {
+      globals: {
+        Atomics: "readonly",
+        SharedArrayBuffer: "readonly",
+        // Makes logger function available everywhere. Else eslint will complaint of undef-var.
+
+        logger: "readonly",
+        module: "writable",
+        // Makes props obtained from Rails backend available everywhere in this project.
+
+        globalProps: "readonly",
+        preval: "readonly",
+      },
+    },
+  },
+]);

package/configs/eslint/helpers/{index.js → index.mjs}

@@ -1,7 +1,14 @@
-const fs = require("fs");
-const path = require("path");
+import fs from "fs";
+import { createRequire } from "node:module";
+import path from "path";
+import { fileURLToPath } from "url";
 
-const { mergeDeepLeft, mergeLeft, keys } = require("ramda");
+import { mergeDeepLeft, mergeLeft, keys } from "ramda";
+
+const require = createRequire(import.meta.url);
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const loadJS = jsPath => {
   try {
@@ -34,7 +41,7 @@ const generatePathGroupsFromAssets = assetsPath => {
 };
 
 const buildPathGroupsBasedOnWebpackAliases = ({
-  customAliasPath = "config/webpack/resolve.js",
+  customAliasPath = "config/esbuild/config.js",
   commonAliasPath = "node_modules/@bigbinary/neeto-commons-frontend/configs/webpack/resolve.js",
 }) => {
   const rootOfProject = path.join(__dirname, "../../../../../../");
@@ -71,4 +78,4 @@ const buildPathGroupsBasedOnWebpackAliases = ({
   return pathGroups.concat(pathGroupsFromAssets);
 };
 
-module.exports = { buildPathGroupsBasedOnWebpackAliases };
+export default { buildPathGroupsBasedOnWebpackAliases };

package/configs/eslint/imports/enforced.mjs

@@ -0,0 +1,34 @@
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  {
+    rules: {
+      // not-auto-fixable: Prefer a default export if module exports a single name.
+      "import/prefer-default-export": "off",
+      // not-auto-fixable: Forbid a module from importing a module with a dependency path back to itself.
+      "import/no-cycle": ["warn", { maxDepth: 1, ignoreExternal: true }],
+      // not-auto-fixable: Prevent unnecessary path segments in import and require statements.
+      "import/no-useless-path-segments": ["error", { noUselessIndex: true }],
+      // not-auto-fixable: Report any invalid exports, i.e. re-export of the same name.
+      "import/export": "error",
+      // not-auto-fixable: Forbid the use of mutable exports with var or let.
+      "import/no-mutable-exports": "error",
+      // not-auto-fixable: Ensure all imports appear before other statements.
+      "import/first": "error",
+      // not-auto-fixable: Ensure all exports appear after other statements.
+      "import/exports-last": "error",
+      // auto-fixable: Enforce a newline after import statements.
+      "import/newline-after-import": ["error", { count: 1 }],
+      // auto-fixable: Remove file extensions for import statements.
+      "import/extensions": [
+        "error",
+        "never",
+        {
+          ignorePackages: true,
+          // auto-fixable: Enforce file extensions for import statements.
+          pattern: { json: "always", ico: "always", yml: "always" },
+        },
+      ],
+    },
+  },
+]);

package/configs/eslint/imports/order.mjs

@@ -0,0 +1,71 @@
+import { defineConfig } from "eslint/config";
+
+import buildPathGroupsBasedOnWebpackAliases from "../helpers/index.mjs";
+
+// Build pathGroups dynamically as in the original config
+const pathGroups =
+  buildPathGroupsBasedOnWebpackAliases.buildPathGroupsBasedOnWebpackAliases({});
+
+const pathGroupForKeepingReactImportsAtTop = {
+  pattern: "react+(-native|)",
+  group: "external",
+  position: "before",
+};
+
+/*
+Example pathGroups structure. Adding this here
+so that if anyone wants to add custom config,
+they can make use of this:
+[
+  { pattern: 'apis/**', group: 'internal' },
+  { pattern: 'common/**', group: 'internal' },
+  { pattern: 'components/**', group: 'internal' },
+  { pattern: 'constants/**', group: 'internal' },
+  { pattern: 'contexts/**', group: 'internal' },
+  { pattern: 'reducers/**', group: 'internal' },
+  { pattern: 'Constants', group: 'internal' },
+  { pattern: 'neetoui/**', group: 'external' },
+  {
+    pattern: 'react+(-native|)',
+    group: 'external',
+    position: 'before'
+  }
+]
+*/
+pathGroups.push(pathGroupForKeepingReactImportsAtTop);
+
+export default defineConfig([
+  {
+    rules: {
+      // auto-fixable: Enforce a convention in module import order - we enforce https://www.bigbinary.com/react-best-practices/sort-import-statements
+      "import/order": [
+        "error",
+        {
+          "newlines-between": "always",
+          alphabetize: { order: "asc", caseInsensitive: true },
+          warnOnUnassignedImports: true,
+          groups: [
+            "builtin",
+            "external",
+            "internal",
+            "index",
+            "sibling",
+            "parent",
+            "object",
+            "type",
+          ],
+          /*
+           * Currently we check for existence of webpack alias
+           * config and then iterate over the aliases and create
+           * these pathGroups. Only caveat with this mechanism
+           * is that in VSCode eslint plugin won't dynamically
+           * read it. But eslint cli would!
+           */
+          pathGroups,
+          // Ignore react imports so that they're always ordered to the top of the file.
+          pathGroupsExcludedImportTypes: ["react", "react-native"],
+        },
+      ],
+    },
+  },
+]);

package/configs/eslint/index.mjs

@@ -0,0 +1,233 @@
+import path from "path";
+import { fileURLToPath } from "url";
+
+import babelParser from "@babel/eslint-parser";
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import { defineConfig } from "eslint/config";
+import jam3 from "eslint-plugin-jam3";
+import prettier from "eslint-plugin-prettier";
+import pluginPromise from "eslint-plugin-promise";
+import react from "eslint-plugin-react";
+import * as reactHooks from "eslint-plugin-react-hooks";
+import security from "eslint-plugin-security";
+import sonarjs from "eslint-plugin-sonarjs";
+import unusedImports from "eslint-plugin-unused-imports";
+import globals from "globals";
+
+import globalsConfig from "./globals.mjs";
+import enforcedConfig from "./imports/enforced.mjs";
+import orderConfig from "./imports/order.mjs";
+import overridesConfig from "./overrides.mjs";
+import promiseConfig from "./promise.mjs";
+import reactConfig from "./react.mjs";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({ baseDirectory: __dirname });
+
+/*
+ * The order of extending each plugin matters a LOT!!
+ * Thus don't change order of items in this array
+ * unless you're sure of it.
+ */
+export default defineConfig([
+  {
+    ignores: [
+      "**/public/**",
+      "**/coverage/**",
+      "**/db/**",
+      "**/docs/**",
+      "**/log/**",
+      "**/.semaphore/**",
+      "**/test/**",
+      "**/tmp/**",
+      "**/.vscode/**",
+      "**/babel.config.js",
+      "**/esbuild.config.js",
+      "**/vite.config.js",
+      "**/app/javascript/packs/**",
+      "**/rollup.config.js",
+      "**/tailwind.config.js",
+      "**/.prettierrc.js",
+      "!.scripts/**",
+      "**/node_modules/**",
+      "**/eslint.config.mjs",
+      "**/package.json",
+      "**/jsconfig.json",
+    ],
+  },
+
+  js.configs.recommended,
+  security.configs.recommended,
+  pluginPromise.configs["flat/recommended"],
+
+  ...compat.extends(
+    "plugin:import/recommended",
+    "plugin:promise/recommended",
+    "plugin:json/recommended-legacy",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:@bigbinary/neeto/recommended"
+  ),
+  globalsConfig,
+  orderConfig,
+  overridesConfig,
+  enforcedConfig,
+  reactConfig,
+  promiseConfig,
+  {
+    files: [
+      "**/*.js",
+      "**/*.jsx",
+      "**/*.ts",
+      "**/*.tsx",
+      "**/*.svg",
+      "**/*.mjs",
+      "**/*.json",
+    ],
+    plugins: {
+      react,
+      prettier,
+      "react-hooks": reactHooks,
+      jam3,
+      "unused-imports": unusedImports,
+      sonarjs,
+    },
+    languageOptions: {
+      globals: {
+        ...globals.browser, // window object etc part of browser are made available globally.
+        ...globals.commonjs,
+        ...globals.node,
+      },
+      parser: babelParser,
+      ecmaVersion: 2018,
+      sourceType: "module",
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+        babelOptions: { presets: ["@babel/preset-react"] },
+      },
+    },
+    settings: {
+      react: { version: "detect" },
+      // We need this for the import/extensions rule to work: https://github.com/import-js/eslint-plugin-import#importextensions
+      "import/resolver": {
+        node: {
+          extensions: [".js", ".jsx", ".ts", ".tsx", ".svg", ".json"],
+        },
+      },
+    },
+    rules: {
+      // auto-fixable: Respect all Prettier rules and apply it.
+      "prettier/prettier": "error",
+      // not-auto-fixable: No unused variables allowed.
+      "no-unused-vars": [
+        "error",
+        {
+          args: "all",
+          argsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          caughtErrors: "all",
+        },
+      ],
+      // not-auto-fixable: No undefined variables allowed.
+      "no-undef": "error",
+      // not-auto-fixable: Dont use console statements. Use logger which babel will remove during bundling.
+      "no-console": "error",
+      // not-auto-fixable: require `return` statements to either always or never specify values.
+      "consistent-return": "error",
+      // auto-fixable: disallows repeating variable name when declaring object properties.
+      "object-shorthand": "error",
+      // auto-fixable: sadly this doesn't support guard clauses yet.
+      "padding-line-between-statements": [
+        "error",
+        { blankLine: "always", prev: "if", next: ["if", "return"] },
+        // The newline-before-return rule is deprecated in favor of the following:
+        { blankLine: "always", prev: "*", next: "return" },
+        // Add newline between function declarations
+        {
+          blankLine: "always",
+          prev: [
+            "block",
+            "multiline-block-like",
+            "function",
+            "iife",
+            "multiline-const",
+            "multiline-expression",
+          ],
+          next: ["function", "iife", "multiline-const", "multiline-expression"],
+        },
+      ],
+      // auto-fixable: Single line statements needn't have any braces. But in all other cases enforce curly braces.
+      curly: ["error", "multi-line"],
+      // auto-fixable: Remove the else part, if the "if" or "else-if" chain has a return statement
+      "no-else-return": "error",
+      // not-auto-fixable: Prevent un-sanitized dangerouslySetInnerHTML.
+      "jam3/no-sanitizer-with-danger": [
+        2,
+        { wrapperName: ["dompurify", "sanitizer", "sanitize"] },
+      ],
+      // auto-fixable: Requires trailing commas when the last element or property is in a different line than the closing ] or }
+      "comma-dangle": [
+        "error",
+        {
+          arrays: "always-multiline",
+          objects: "always-multiline",
+          imports: "always-multiline",
+          exports: "always-multiline",
+          functions: "never",
+        },
+      ],
+      // auto-fixable: If a variable is never reassigned, using the const declaration is better.
+      "prefer-const": "error",
+      // auto-fixable: It is considered good practice to use the type-safe equality operators === and !==.
+      eqeqeq: "error",
+      // not-auto-fixable: Rule flags optional chaining expressions in positions where short-circuiting to undefined causes throwing a TypeError afterward.
+      "no-unsafe-optional-chaining": "error",
+      // auto-fixable: Remove all unused imports.
+      "unused-imports/no-unused-imports": "error",
+      // auto-fixable-1-level-deep: Using nested ternary operators make the code unreadable. Use if/else or switch with if/else. If it's JSX then move it out into a function or a variable. It's fine to use nestedTernary in JSX when it makes code more readable.
+      "no-nested-ternary": "warn",
+      // auto-fixable: Enforces no braces where they can be omitted.
+      "arrow-body-style": ["error", "as-needed"],
+      // auto-fixable: Suggests using template literals instead of string concatenation.
+      "prefer-template": "error",
+      // auto-fixable: Disallows ternary operators when simpler alternatives exist.
+      "no-unneeded-ternary": ["error", { defaultAssignment: false }],
+      // not-auto-fixable: Enforces declaring default params last
+      "default-param-last": "error",
+      // not-auto-fixable: Remove redundant async-awaits
+      "no-return-await": "warn",
+      // not-auto-fixable: Disallow empty block statements
+      "no-empty": ["error", { allowEmptyCatch: true }],
+      // not-auto-fixable: Enforce return statements in callbacks of array methods.
+      "array-callback-return": ["error"],
+      // auto-fixable: Partially fixable. Unless there's a need to the this keyword, there's no advantage of using a plain function.
+      "prefer-arrow-callback": ["error", { allowUnboundThis: true }],
+      // not-auto-fixable: Convert multiple imports from same module into a single import.
+      "no-duplicate-imports": ["error", { includeExports: true }],
+      // auto-fixable: Partially fixable. In JavaScript, there are a lot of different ways to convert value types. Allow only readable coercions.
+      "no-implicit-coercion": ["error", { allow: ["!!"] }],
+      // auto-fixable: Require let or const instead of var.
+      "no-var": "error",
+      // auto-fixable: This rule conflicts with prettier rules. Thus we've NOT kept this rule in react file. This rule ensures we don't add blank lines in JSX.
+      "react/jsx-newline": ["error", { prevent: true }],
+      // not-auto-fixable: Disallow async functions which have no await expression
+      "require-await": "error",
+      // auto-fixable: This rule ensures immediate returns in functions where constants are declared and then directly returned.
+      "sonarjs/prefer-immediate-return": "error",
+      // not-auto-fixable: This rule enforces merging adjacent collapsible if statements.
+      "sonarjs/no-collapsible-if": "error",
+      // not-auto-fixable: This rule prevents identical conditions inside if-else statements.
+      "sonarjs/no-identical-conditions": "error",
+      // not-auto-fixable: This rule prevents using a function with no return as output, passing it to another function, or assigning its result to a variable.
+      "sonarjs/no-use-of-empty-return-value": "error",
+      // not-auto-fixable: This rule prevents using catch clause that only throws an error.
+      "sonarjs/no-useless-catch": "error",
+      // not-auto-fixable: This rule warns against "eval(variable)" which can allow an attacker to run arbitrary code inside your process.
+      "security/detect-eval-with-expression": "warn",
+      // TODO Temporarily disabled for ESlint major version upgrade.
+      "import/no-unresolved": "off",
+    },
+  },
+]);

package/configs/eslint/overrides.mjs

@@ -0,0 +1,28 @@
+import { defineConfig } from "eslint/config";
+import globals from "globals";
+// Currently we are using this section for excluding certain files from certain rules.
+export default defineConfig([
+  {
+    files: [
+      "**/.prettierrc.js",
+      "app/assets/**/*",
+      "app/javascript/packs/**/*",
+      "**/*.json",
+    ],
+
+    rules: {
+      "import/order": "off",
+      "react-hooks/rules-of-hooks": "off",
+    },
+  },
+  {
+    files: ["app/javascript/packs/**/*.{js,jsx}"],
+
+    rules: { "no-redeclare": "off" },
+  },
+  {
+    files: ["**/*.spec.js", "**/*.spec.jsx", "**/*.test.jsx"],
+
+    languageOptions: { globals: { ...globals.jest } },
+  },
+]);

package/configs/eslint/promise.mjs

@@ -0,0 +1,12 @@
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  {
+    rules: {
+      // not-auto-fixable: ensure people use async/await promising chaining rather than using "then-catch-finally" statements
+      "promise/prefer-await-to-then": "error",
+      // auto-fixable: avoid calling "new" on a Promise static method like reject, resolve etc
+      "promise/no-new-statics": "error",
+    },
+  },
+]);