@imtf/profile-scripts 1.5.2 → 2.0.0-beta.0

package/bin/profile-scripts.js

@@ -7,13 +7,26 @@ const args = process.argv.slice(2);
 const scriptIndex = args.findIndex((x) => x === "build" || x === "start");
 const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
 
-const scriptPath = require.resolve(`../scripts/esbuild.mjs`);
+const useVite = args.includes("--vite");
+const useViteFederation = args.includes("--federation");
+
+// federation automatically implies vite
+const useViteBuild = useVite || useViteFederation;
+
+// Remove internal routing flags before forwarding
+const cleanedArgs = args.filter(
+  (arg) => arg !== "--vite"
+);
+
+const scriptPath = useViteBuild
+  ? require.resolve("../scripts/viteBuild.mjs")
+  : require.resolve("../scripts/esbuild.mjs");
 
 switch (script) {
   case "start":
   case "build": {
-    const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
-    const scriptArgs = args.slice(scriptIndex + 1);
+    const nodeArgs = scriptIndex > 0 ? cleanedArgs.slice(0, scriptIndex) : [];
+    const scriptArgs = cleanedArgs.slice(scriptIndex + 1);
 
     if (script === "start") {
       scriptArgs.push("--watch");

package/changelog.md

@@ -2,6 +2,14 @@
 
 Here you can find a resume of all changes between versions.
 
+## 2.0.0
+
+### Breaking changes
+
+- ViteJS will now be used as the default bundler for development and production builds.
+  The previous version of the package used esbuild.
+  This change allows Module Federation to be supported.
+
 ## 1.5.0
 
 ### Features

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@imtf/profile-scripts",
-  "version": "1.5.2",
+  "version": "2.0.0-beta.0",
   "description": "Default scripts to bundle & transpile imtf front-end plugins",
   "main": "index.js",
   "bin": {
-    "profile-scripts": "bin/profile-scripts.js"
+    "profile-scripts": "./bin/profile-scripts.js"
   },
   "files": [
     "bin/",
@@ -19,14 +19,23 @@
   "license": "UNLICENSED",
   "private": false,
   "dependencies": {
+    "@originjs/vite-plugin-federation": "^1.4.1",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
+    "@vitejs/plugin-react": "^5.1.4",
     "esbuild": "^0.27.0",
     "esbuild-css-modules-plugin": "^3.1.4",
     "esbuild-plugin-external-global": "^1.0.1",
     "esbuild-plugin-inline-css": "^0.0.1",
+    "http-server": "^14.1.1",
     "minimist": "^1.2.8",
-    "serve-handler": "^6.1.6"
+    "serve-handler": "^6.1.6",
+    "vite": "^7.3.1",
+    "vite-plugin-css-injected-by-js": "^4.0.1",
+    "vite-tsconfig-paths": "^6.1.1"
+  },
+  "devDependencies": {
+    "@types/minimist": "^1.2.5"
   }
 }

package/scripts/esbuild.mjs

@@ -3,8 +3,7 @@ import esbuild from "esbuild-plugin-external-global";
 import InlineCSSPlugin from "esbuild-plugin-inline-css";
 import CssModulesPlugin from "esbuild-css-modules-plugin";
 import minimist from "minimist";
-import handler from "serve-handler";
-import http from "http";
+import HttpServer from "http-server";
 
 // eslint-disable-next-line import/no-named-as-default-member
 const externalGlobalPlugin = esbuild.externalGlobalPlugin;
@@ -88,9 +87,8 @@ if (watch) {
   await ctx.watch();
 
   // Create a server for the build directory
-  http
-    .createServer((...params) => handler(...params, { public: "build" }))
-    .listen(3010, () => console.log("Running at http://localhost:3010"));
+  const server = HttpServer.createServer({ root: "build" });
+  server.listen(3010, () => console.log("Running at http://localhost:3010"));
 } else {
   await build(config);
 }

package/scripts/viteBuild.mjs

@@ -0,0 +1,202 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+
+import http from "http";
+import fs from "node:fs";
+import path from "path";
+import { pathToFileURL } from "url";
+
+import federation from "@originjs/vite-plugin-federation";
+import react from "@vitejs/plugin-react";
+import { transform } from "esbuild";
+import minimist from "minimist";
+import handler from "serve-handler";
+import { build as viteBuild } from "vite";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+import notifierPlugin from "./vitePlugins/viteNotifierPlugin.mjs";
+import svgPlugin from "./vitePlugins/viteSvgPlugin.mjs";
+
+const {
+  watch,
+  entryPoint,
+  externalGlobal,
+  federation: enableFederation,
+} = minimist(process.argv.slice(2));
+
+const consumerRoot = process.cwd();
+const outDir = "build";
+
+const entryAbs = entryPoint
+  ? path.resolve(consumerRoot, entryPoint)
+  : path.resolve(consumerRoot, "src/index.js");
+
+// Force JSX transform for .js files in src
+const jsxPreTransformPlugin = {
+  name: "jsx-pre-transform",
+  enforce: "pre",
+  async transform(code, id) {
+    if (id.endsWith(".js") && id.includes(path.resolve(consumerRoot, "src"))) {
+      const result = await transform(code, {
+        loader: "jsx",
+        jsx: "automatic",
+        target: "esnext",
+        sourcemap: !watch,
+      });
+
+      return {
+        code: result.code,
+        map: result.map || null,
+      };
+    }
+    return null;
+  },
+};
+
+// Custom plugin to resolve package.json imports from node_modules
+const packageJsonResolver = {
+  name: "package-json-resolver",
+  enforce: "pre",
+  resolveId(source) {
+    if (!source.endsWith("/package.json")) return null;
+
+    const pkgName = source.replace(/\/package\.json$/, "");
+
+    const resolvedPath = path.resolve(
+      consumerRoot,
+      "node_modules",
+      pkgName,
+      "package.json",
+    );
+
+    if (fs.existsSync(resolvedPath)) {
+      return resolvedPath;
+    }
+
+    return null;
+  },
+};
+
+// Parse external globals
+const externalGlobals = externalGlobal
+  ? (typeof externalGlobal === "string"
+      ? [externalGlobal]
+      : externalGlobal
+    ).reduce((acc, curr) => {
+      const [key, value] = curr.split("=");
+      acc[key] = value;
+      return acc;
+    }, {})
+  : {};
+
+// Dynamically resolve optional federation.config.(js|mjs) from consumer root
+const resolveFederationConfig = async () => {
+  if (!enableFederation) return {};
+
+  const candidates = ["federation.config.mjs", "federation.config.js"];
+
+  for (const file of candidates) {
+    const fullPath = path.resolve(consumerRoot, file);
+    if (fs.existsSync(fullPath)) {
+      const mod = await import(pathToFileURL(fullPath).href);
+      return mod.default ?? mod;
+    }
+  }
+
+  throw new Error(
+    "[profile-scripts] --federation requires federation.config.(js|mjs) in project root.",
+  );
+};
+
+// Vite plugins
+const vitePlugins = [
+  // Must run before other plugins: transforms JSX inside .js files
+  // so Vite's import analysis can parse them correctly
+  jsxPreTransformPlugin,
+
+  // Custom resolver for package.json imports
+  packageJsonResolver,
+
+  // React JSX transform + automatic runtime
+  react({
+    jsxRuntime: "automatic",
+    include: /\.(js|jsx|ts|tsx)$/,
+  }),
+
+  // Resolve tsconfig path aliases
+  tsconfigPaths(),
+
+  // Inject CSS into the bundle for library consumers without needing separate CSS files
+  cssInjectedByJsPlugin(),
+
+  // Handle SVG as React components or assets
+  svgPlugin(),
+
+  // Log build and rebuild status to console
+  notifierPlugin(Boolean(watch)),
+];
+
+// Inject Module Federation support when --federation flag is provided
+if (enableFederation) {
+  const federationConfig = await resolveFederationConfig();
+
+  vitePlugins.push(federation(federationConfig));
+}
+
+/**
+ * Vite build configuration
+ * @type {import('vite').UserConfig}
+ */
+const viteConfig = {
+  root: consumerRoot,
+  plugins: vitePlugins,
+  logLevel: watch ? "error" : "info", // !!! Need to discuss
+  build: {
+    outDir,
+    emptyOutDir: true,
+    target: "esnext",
+    sourcemap: watch,
+    rollupOptions: {
+      input: entryAbs,
+      external: [
+        "react",
+        "react-dom",
+        "react-router-dom",
+        "IMTFPlugins",
+        ...Object.keys(externalGlobals),
+      ],
+      output: {
+        entryFileNames: "index.js",
+        format: "iife",
+        inlineDynamicImports: false,
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+          "react-router-dom": "reactRouterDom",
+          IMTFPlugins: "IMTFPlugins",
+          ...externalGlobals,
+        },
+      },
+    },
+    minify: watch ? false : process.env.IMTF_MINIFY_WEBAPP !== "false",
+    watch: watch ? {} : null,
+  },
+};
+
+// Run Vite build in either watch or build mode
+if (watch) {
+  await viteBuild(viteConfig);
+
+  http
+    .createServer((...params) => handler(...params, { public: outDir }))
+    .listen(3010, () => {
+      // eslint-disable-next-line no-console
+      console.log("Running at http://localhost:3010");
+    });
+} else {
+  await viteBuild(viteConfig);
+}

package/scripts/vitePlugins/viteNotifierPlugin.mjs

@@ -0,0 +1,27 @@
+const viteNotifierPlugin = (watch) => {
+  let count = 0;
+
+  return {
+    name: "notifier-plugin-vite",
+
+    buildStart() {
+      count = 0;
+    },
+
+    buildEnd(error) {
+      if (error) return;
+
+      if (count++ === 0) {
+        if (watch) {
+          console.log(`1st build: ${Date.now()}`);
+        } else {
+          console.log("Successfully built");
+        }
+      } else {
+        console.log(`Rebuilt: ${Date.now()}`);
+      }
+    },
+  };
+};
+
+export default viteNotifierPlugin;

package/scripts/vitePlugins/viteSvgPlugin.mjs

@@ -0,0 +1,47 @@
+const viteSvgPlugin = (options = {}) => {
+  return {
+    name: "vite-svgr-plugin",
+    enforce: "pre",
+    async transform(code, id) {
+      if (!id.endsWith(".svg")) {
+        return null;
+      }
+      const svgPath = id.split("?")[0].split("#")[0];
+
+      // Read file content
+      const svg = await fs.promises.readFile(svgPath, "utf8");
+
+      // Determine relative path
+      const relativePath = path.relative(process.cwd(), svgPath);
+
+      // This is an asset ==> dataurl
+      if (
+        !relativePath.startsWith("src/") ||
+        relativePath.startsWith("src/assets/")
+      ) {
+        const dataurl = `data:image/svg+xml;base64,${Buffer.from(svg).toString("base64")}`;
+        return {
+          code: `export default ${JSON.stringify(dataurl)};`,
+          map: null
+        };
+      }
+
+      // Otherwise it's a react component
+      const contents = await transform(
+        svg,
+        {
+          plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
+          ...options
+        },
+        { filePath: svgPath }
+      );
+
+      return {
+        code: contents,
+        map: null
+      };
+    }
+  };
+}
+
+export default viteSvgPlugin;