@bigbinary/neeto-commons-frontend 4.12.3 → 4.13.0-beta.0

package/configs/esbuild/alias.js

@@ -0,0 +1,25 @@
+const path = require("path");
+
+const commonResolve = require("@bigbinary/neeto-commons-frontend/configs/webpack/resolve.js");
+
+const appResolve = require("../webpack/resolve.js");
+
+module.exports = {
+  ...commonResolve.alias,
+  ...appResolve.alias,
+  images: path.resolve(process.cwd(), "app/assets/images"),
+  assert: require.resolve("assert/"),
+  buffer: require.resolve("buffer/"),
+  crypto: require.resolve("crypto-browserify"),
+  http: require.resolve("stream-http"),
+  https: require.resolve("https-browserify"),
+  os: require.resolve("os-browserify/browser"),
+  path: require.resolve("path-browserify"),
+  perf_hooks: require.resolve("perf_hooks"),
+  stream: require.resolve("stream-browserify"),
+  tty: require.resolve("tty-browserify"),
+  url: require.resolve("url/"),
+  util: require.resolve("util/"),
+  vm: require.resolve("vm-browserify"),
+  zlib: require.resolve("browserify-zlib"),
+};

package/configs/esbuild/babel.config.js

@@ -0,0 +1,25 @@
+const {
+  TRANSFORM_RULES,
+} = require("@bigbinary/neeto-commons-frontend/configs/constants.js");
+
+module.exports = api => {
+  api.cache(true);
+
+  return {
+    presets: ["@bigbinary/neeto"],
+    plugins: [
+      [
+        "module-resolver",
+        {
+          root: ["./src"],
+          alias: {
+            "dayjs/plugin/timezone":
+              "@bigbinary/neeto-commons-frontend/utils/timezonePlugin",
+          },
+          loglevel: "silent",
+        },
+      ],
+      ...TRANSFORM_RULES,
+    ],
+  };
+};

package/configs/esbuild/index.js

@@ -0,0 +1,90 @@
+const path = require("path");
+
+const commonResolve = require("@bigbinary/neeto-commons-frontend/configs/webpack/resolve.js");
+const dotenv = require("dotenv");
+const rails = require("esbuild-rails");
+const { sassPlugin } = require("esbuild-sass-plugin");
+const postcss = require("postcss");
+
+const alias = require("./alias.js");
+const { babelPlugin } = require("./plugins/babel.js");
+const { prevalPlugin } = require("./plugins/preval.js");
+const {
+  createDefinitions,
+  entryPoint,
+  createModuleEntryPoints,
+  build,
+  watch,
+  createBigbinaryEntryPoints,
+} = require("./utils.js");
+
+// @ts-ignore
+const postCssConfig = require("../../../../../postcss.config.js");
+
+const isProduction = process.env.NODE_ENV === "production";
+const isWatchMode = process.argv.includes("--watch");
+
+dotenv.config({ path: isProduction ? ".env" : ".env.development" });
+
+const config = {
+  entryPoints: {
+    application: entryPoint("app/javascript/packs/application.js"),
+    ...createBigbinaryEntryPoints(),
+    ...createModuleEntryPoints(["antd", "recharts", "emojiMart"]),
+  },
+  bundle: true,
+  splitting: true,
+  outdir: path.join(process.cwd(), "app/assets/builds"),
+  minify: isProduction,
+  sourcemap: true,
+  assetNames: "assets/[name]-[hash].digested",
+  chunkNames: "chunks/[name]-[hash].digested",
+  publicPath: `${process.env.ASSET_HOST ?? ""}/assets`,
+  plugins: [
+    rails(),
+    prevalPlugin(),
+    babelPlugin(),
+    sassPlugin({
+      async transform(source) {
+        const { css } = await postcss(postCssConfig.plugins).process(source);
+
+        return css;
+      },
+      importMapper: path =>
+        path.replace("@bigbinary/neetoui", "@bigbinary/neetoui/dist"),
+    }),
+  ],
+  conditions: ["style"],
+  logLevel: "error",
+  format: "esm",
+  metafile: true,
+  platform: "browser",
+  mainFields: ["browser", "module", "main"],
+  loader: {
+    ".png": "file",
+    ".jpeg": "file",
+    ".jpg": "file",
+    ".svg": "file",
+    ".ico": "file",
+  },
+  external: ["fs", "path", "os", "events"],
+  alias,
+  jsx: "automatic",
+  resolveExtensions: [...commonResolve.extensions, ".jsx"],
+  define: {
+    "process.env.RAILS_ENV": "'development'",
+    "process.env.NODE_DEBUG": "'development'",
+    ...createDefinitions(process),
+  },
+  banner: {
+    js: isWatchMode
+      ? `(() => new EventSource("http://localhost:${
+          process.env.ESBUILD_PORT || 8000
+        }/esbuild").addEventListener('change', () => location.reload()))();`
+      : "",
+  },
+};
+
+isWatchMode ? watch(config) : build(config);
+
+exports.config = config;

package/configs/esbuild/plugins/babel.js

@@ -0,0 +1,24 @@
+const babel = require("@babel/core");
+const parser = require("@babel/parser");
+
+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 ast = parser.parse(contents, {
+        sourceType: "module",
+        plugins: ["jsx"],
+      });
+
+      const result = babel.transformFromAstSync(ast, contents);
+      const transformedContents = result?.code;
+
+      return { contents: transformedContents, loader: "jsx" };
+    });
+  },
+});
+
+module.exports = { babelPlugin };

package/configs/esbuild/plugins/preval.js

@@ -0,0 +1,26 @@
+const PkgTranslations = require("@bigbinary/neeto-commons-frontend/configs/scripts/getPkgTranslations.js");
+
+const prevalPlugin = () => ({
+  name: "preval-plugin",
+  setup(build) {
+    build.onLoad(
+      {
+        filter:
+          /node_modules\/@bigbinary\/neeto-commons-frontend\/dist\/(cjs\/)?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)
+        );
+
+        return { contents: transformedContents, loader: "js" };
+      }
+    );
+  },
+});
+
+module.exports = { prevalPlugin };

package/configs/esbuild/utils.js

@@ -0,0 +1,93 @@
+const esbuild = require("esbuild");
+const path = require("path");
+const fs = require("fs");
+
+// colors for console output
+const consoleColors = {
+  info: "\x1b[34m", // Blue
+  success: "\x1b[32m", // Green
+  warning: "\x1b[33m", // Yellow
+  error: "\x1b[31m", // Red
+  reset: "\x1b[0m", // Reset
+};
+
+const createDefinitions = process => {
+  return Object.keys(process.env).reduce((acc, key) => {
+    acc[`process.env.${key}`] = JSON.stringify(process.env[key]);
+    return acc;
+  }, {});
+};
+
+const entryPoint = file => path.join(process.cwd(), file);
+
+const createBigbinaryEntryPoints = () => {
+  const directoryPath = "node_modules/@bigbinary";
+  const excludeList = ["babel-preset-neeto", "eslint-plugin-neeto"];
+  const entries = {};
+  try {
+    const items = fs.readdirSync(directoryPath);
+    items.forEach(item => {
+      if (excludeList.includes(item)) return;
+      const itemPath = path.join(directoryPath, item, "/dist/index.js");
+      try {
+        fs.accessSync(itemPath);
+        entries[item] = entryPoint(itemPath);
+      } catch {
+        console.log(itemPath, "doesn't exist");
+      }
+    });
+    return entries;
+  } catch (error) {
+    console.error(`Error reading directory ${directoryPath}:`, error);
+    return {};
+  }
+};
+
+const createModuleEntryPoints = modules => {
+  const entries = {};
+  modules.forEach(module => {
+    const modulePath = `node_modules/${
+      module instanceof String ? module : module.path
+    }`;
+    const name = module instanceof String ? module : module.name;
+    if (fs.existsSync(modulePath)) {
+      entries[name] = entryPoint(modulePath);
+    }
+  });
+  return entries;
+};
+
+const build = async config => {
+  try {
+    console.info(
+      `${consoleColors.info}[esbuild]${consoleColors.reset} Building...`
+    );
+    await esbuild.build(config);
+    console.info(
+      `${consoleColors.success}[esbuild]${consoleColors.reset} Build successful`
+    );
+  } catch {
+    console.error(
+      `${consoleColors.error}[esbuild]${consoleColors.reset} Build failed`
+    );
+  }
+};
+
+const watch = async config => {
+  const ctx = await esbuild.context(config);
+  await ctx.watch();
+  await ctx.serve({
+    servedir: config.outdir,
+    port: parseInt(process.env.ESBUILD_PORT || "8000"),
+  });
+  console.log("watching...");
+};
+
+module.exports = {
+  createDefinitions,
+  entryPoint,
+  createModuleEntryPoints,
+  build,
+  watch,
+  createBigbinaryEntryPoints,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-commons-frontend",
-  "version": "4.12.3",
+  "version": "4.13.0-beta.0",
   "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>",
@@ -88,7 +88,7 @@
     "@babel/runtime": "7.19.0",
     "@babel/types": "^7.20.7",
     "@bigbinary/babel-preset-neeto": "^1.0.3",
-    "@bigbinary/eslint-plugin-neeto": "1.5.5",
+    "@bigbinary/eslint-plugin-neeto": "1.5.6",
     "@bigbinary/neeto-audit-frontend": "^2.0.19",
     "@bigbinary/neeto-cist": "1.0.11",
     "@bigbinary/neeto-commons-frontend": "4.4.6",
@@ -142,6 +142,9 @@
     "cypress": "11.2.0",
     "dayjs": "1.11.10",
     "dompurify": "^2.4.0",
+    "esbuild": "^0.24.0",
+    "esbuild-rails": "^1.0.7",
+    "esbuild-sass-plugin": "^3.3.1",
     "eslint": "8.14.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-cypress": "2.12.1",
@@ -227,6 +230,9 @@
     "dayjs": "1.11.10",
     "dompurify": "^2.4.0",
     "dotenv-webpack": "^8.0.1",
+    "esbuild": "^0.24.0",
+    "esbuild-rails": "^1.0.7",
+    "esbuild-sass-plugin": "^3.3.1",
     "formik": "2.2.9",
     "framer-motion": "11.2.14",
     "husky": "7.0.4",