@docsvision/management-console-extension-build 1.0.0 → 6.2.0-beta.2

package/package.json

@@ -1,23 +1,18 @@
 {
   "name": "@docsvision/management-console-extension-build",
-  "version": "1.0.0",
+  "version": "6.2.0-beta.2",
   "description": "Helper tools for building Management Console extensions.",
   "scripts": {},
   "dependencies": {
     "autoprefixer": "9.8.5",
     "postcss-custom-properties": "9.1.1",
-    "rollup": "2.56.3",
-    "rollup-plugin-includepaths": "0.2.3",
-    "rollup-plugin-postcss": "3.1.2",
-    "rollup-plugin-terser": "6.1.0",
     "tslib": "2.3.1",
     "typescript": "4.7.4",
     "@types/react": "17.0.3",
     "@types/react-dom": "17.0.3",
-    "@rollup/plugin-commonjs": "12.0.0",
-    "@rollup/plugin-node-resolve": "8.0.0",
-    "@rollup/plugin-replace": "2.3.3",
-    "@rollup/plugin-typescript": "8.2.5",
+    "vite": "^7.0.6",
+    "vite-tsconfig-paths": "^5.1.4",
+    "@vitejs/plugin-react": "^4.7.0",
     "del": "5.1.0",
     "gulp": "4.0.2"
   },

package/vite.base.config.js

@@ -0,0 +1,162 @@
+import { existsSync, readFileSync, writeFileSync } from "fs";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
+import autoprefixer from "autoprefixer";
+import postcssCustomProperties from "postcss-custom-properties";
+import path from "path";
+
+const EXTERNAL_EXACT = new Set([
+  "react",
+  "react-dom",
+  "@emotion/react",
+  "@emotion/styled",
+  "@mui/styled-engine",
+  "@mui/material",
+  "@mui/material/styles",
+  "@mui/system",
+  "@mui/private-theming",
+  "@mui/x-tree-view",
+]);
+
+const isExternal = (id) => {
+  if (EXTERNAL_EXACT.has(id)) return true;
+  if (id.startsWith("@emotion/react/")) return true;
+  if (id.startsWith("@mui/styled-engine/")) return true;
+  if (id.startsWith("@mui/material/")) return true;
+  if (id.startsWith("@mui/system/")) return true;
+  if (id.startsWith("@mui/private-theming/")) return true;
+  if (id.startsWith("@mui/x-tree-view/")) return true;
+  return false;
+};
+
+const globals = (id) => {
+  if (id === "react") return "React";
+  if (id === "react-dom") return "ReactDOM";
+  if (id === "@emotion/react") return "EmotionReact";
+  if (id === "@emotion/styled") return "EmotionStyled";
+  if (id === "@mui/styled-engine") return "MuiStyledEngine";
+  if (id === "@mui/material") return "MuiMaterial";
+  if (id === "@mui/material/styles") return "MuiMaterial";
+  if (id === "@mui/system") return "MuiSystem";
+  if (id === "@mui/private-theming") return "MuiPrivateTheming";
+  if (id === "@mui/x-tree-view") return "MuiXTreeView";
+  if (id === "@docsvision/management-console") return "Library";
+
+  if (id.startsWith("@emotion/react/")) return "EmotionReact";
+  if (id.startsWith("@mui/styled-engine/")) return "MuiStyledEngine";
+  if (id.startsWith("@mui/material/")) return "MuiMaterial";
+  if (id.startsWith("@mui/system/")) return "MuiSystem";
+  if (id.startsWith("@mui/private-theming/")) return "MuiPrivateTheming";
+  if (id.startsWith("@mui/x-tree-view/")) return "MuiXTreeView";
+
+  return undefined;
+};
+
+export function getBaseConfig(
+  name,
+  inputFileName,
+  outputFileName,
+  outputCssFileName,
+  foldername,
+) {
+  if (!name) throw new Error("name is empty");
+  if (!inputFileName) throw new Error("inputFileName is empty");
+  if (!outputFileName) throw new Error("outputFileName is empty");
+  if (!outputCssFileName) throw new Error("outputCssFileName is empty");
+
+  return defineConfig(({ mode }) => {
+    const isProd = mode === "production";
+    const managementConsoleCssPath = path.resolve(
+      process.cwd(),
+      "node_modules",
+      "@docsvision",
+      "management-console",
+      "index.css",
+    );
+    const cssOutputPath = path.resolve(
+      process.cwd(),
+      "dist",
+      foldername ?? name,
+      outputCssFileName,
+    );
+
+    const injectManagementConsoleCssPlugin = {
+      name: "inject-management-console-css",
+      apply: "build",
+      writeBundle() {
+        if (!existsSync(managementConsoleCssPath)) {
+          this.warn(
+            `Management console CSS not found at ${managementConsoleCssPath}, skipping injection.`,
+          );
+          return;
+        }
+
+        if (!existsSync(cssOutputPath)) {
+          this.warn(
+            `Management console CSS output file ${cssOutputPath} not found, skipping injection.`,
+          );
+          return;
+        }
+
+        const sourceToInject = readFileSync(managementConsoleCssPath, "utf-8");
+        const currentCss = readFileSync(cssOutputPath, "utf-8");
+        writeFileSync(cssOutputPath, `${sourceToInject}\n${currentCss}`);
+      },
+    };
+
+    return {
+      define: { "process.env.NODE_ENV": JSON.stringify("production") },
+      plugins: [react(), tsconfigPaths(), injectManagementConsoleCssPlugin],
+      css: {
+        postcss: { plugins: [autoprefixer(), postcssCustomProperties()] },
+        devSourcemap: true,
+      },
+      optimizeDeps: { exclude: Array.from(EXTERNAL_EXACT) },
+      build: {
+        target: "esnext",
+        minify: isProd ? "terser" : false,
+        sourcemap: true,
+        emptyOutDir: true,
+        copyPublicDir: false,
+        cssCodeSplit: false,
+        outDir: path.posix.join("dist", foldername ?? name),
+        lib: {
+          entry: path.resolve(process.cwd(), inputFileName),
+          name,
+          fileName: () => outputFileName,
+          formats: ["umd"],
+        },
+        rollupOptions: {
+          external: isExternal,
+          output: {
+            format: "umd",
+            name,
+            entryFileNames: outputFileName,
+            assetFileNames: () => outputCssFileName,
+            globals,
+          },
+          onwarn(warning, warn) {
+            if (
+              warning.code === "MISSING_GLOBAL_NAME" ||
+              String(warning.message || "").includes(
+                "No name was provided for external module",
+              )
+            ) {
+              throw new Error(
+                `Missing output.globals mapping: ${warning.message}`,
+              );
+            }
+            if (
+              warning.code === "UNUSED_EXTERNAL_IMPORT" ||
+              String(warning.message).includes("__PURE__")
+            ) {
+              return;
+            }
+            warn(warning);
+          },
+        },
+      },
+    };
+  });
+}

package/rollup.base.config.js

@@ -1,79 +0,0 @@
-const typescript = require("@rollup/plugin-typescript");
-const commonjs = require("@rollup/plugin-commonjs");
-const { nodeResolve } = require('@rollup/plugin-node-resolve');
-const replace = require("@rollup/plugin-replace");
-const { terser } = require("rollup-plugin-terser");
-const includePaths = require("rollup-plugin-includepaths");
-const postcss = require("rollup-plugin-postcss");
-const path = require("path");
-const autoprefixer = require("autoprefixer");
-const postcssCustomProperties = require("postcss-custom-properties");
-
-
-const NODE_ENV_PRODUCTION = "production";
-module.exports = {};
-
-
-module.exports.getBaseConfig = function(name, inputFileName, outputFileName, outputCssFileName, globals, paths, external) {
-    if (!name) {
-        throw "name is empty";
-    }
-
-    if (!inputFileName) {
-        throw "inputFileName is empty"
-    }
-
-    if (!outputFileName) {
-        throw "outputFileName is empty";
-    }
-
-    if (!outputCssFileName) {
-      throw "outputCssFileName is empty";
-    }
-
-    const isProd = process.env.NODE_ENV == NODE_ENV_PRODUCTION;
-
-
-    const plugins = [];
-    plugins.push(nodeResolve());
-    plugins.push(replace(
-      { "process.env.NODE_ENV": `"${process.env.NODE_ENV}"`,
-        "/assets/": "/bundle/assets/"
-      }));
-    plugins.push(includePaths({ paths: ["./src"] }));
-    plugins.push(commonjs({
-      include: /node_modules/,
-    }));
-    plugins.push(postcss({
-      extract: path.resolve(outputCssFileName),
-      plugins: [ autoprefixer(), postcssCustomProperties() ],
-      minimize: isProd,
-      sourceMap: true,
-      use: [
-        ["sass", {
-            includePaths: [
-                "./node_modules"
-            ]
-        }]
-    ]
-    }));
-    plugins.push(typescript({   }));
-
-    if (isProd) {
-      plugins.push(terser());
-    }
-
-    return {
-        external: external || [],
-        input: inputFileName,
-        output: {
-          file: outputFileName,
-          format: "umd",
-          globals: globals || {},
-          paths: paths || {},
-          name: name,
-          sourcemap: true
-        },
-        plugins: plugins
-      };
-} 

package/variables.js

@@ -1,11 +0,0 @@
-module.exports = {};
-
-module.exports.globals =  {
-    'react': 'React',
-    'react-dom': 'ReactDOM'
-};
-  
-module.exports.external = [
-    'react',
-    'react-dom'
-];