catalyst-core 0.2.0-beta.2 → 0.3.0-beta.1

package/dist/vite/vite.config.js

@@ -0,0 +1,422 @@
+import { defineConfig, transformWithEsbuild } from "vite"
+import react from "@vitejs/plugin-react"
+import svgr from "vite-plugin-svgr"
+import { builtinModules } from "node:module"
+
+/**
+ * Treat all .scss imports as CSS modules (webpack compat).
+ * Webpack's css-loader with modules:true scopes every .scss file.
+ * Vite only does this for files named .module.scss.
+ * This plugin renames the resolved ID so Vite's CSS pipeline treats them as modules.
+ */
+function scssModulesPlugin() {
+    return {
+        name: "vite-plugin-scss-as-modules",
+        enforce: "pre",
+        async resolveId(source, importer, options) {
+            if (!importer) return null
+
+            if (!source.endsWith(".scss") || source.includes(".module.")) return null
+
+            const resolved = await this.resolve(source, importer, { ...options, skipSelf: true })
+            if (!resolved || resolved.id.includes("node_modules") || resolved.id.includes("src/static/css"))
+                return null
+
+            return resolved.id.replace(/\.scss$/, ".module.scss")
+        },
+        load(id) {
+            const cleanId = id.split("?")[0]
+            if (cleanId.endsWith(".module.scss") && !fs.existsSync(cleanId)) {
+                const originalPath = cleanId.replace(/\.module\.scss$/, ".scss")
+                if (fs.existsSync(originalPath)) {
+                    this.addWatchFile(originalPath)
+                    return fs.readFileSync(originalPath, "utf-8")
+                }
+            }
+            return null
+        },
+        handleHotUpdate({ file, server }) {
+            if (file.endsWith(".scss") && !file.endsWith(".module.scss")) {
+                const virtualId = file.replace(/\.scss$/, ".module.scss")
+                const virtualMod = server.moduleGraph.getModuleById(virtualId)
+                if (virtualMod) {
+                    server.moduleGraph.invalidateModule(virtualMod)
+                    return [virtualMod]
+                }
+            }
+        },
+    }
+}
+
+function jsxInJsPlugin() {
+    return {
+        name: "vite-plugin-jsx-in-js",
+        enforce: "pre",
+        async transform(code, id) {
+            if (!id.endsWith(".js")) return null
+            if (id.includes("node_modules")) return null
+            if (!/</.test(code)) return null
+            return transformWithEsbuild(code, id, { loader: "jsx" })
+        },
+    }
+}
+
+const emptyStoreModuleId = "\0catalyst-empty-store"
+const templateStoreImport = "@catalyst/template/src/js/store/index.js"
+
+function optionalTemplateStorePlugin() {
+    return {
+        name: "vite-plugin-optional-template-store",
+        enforce: "pre",
+        resolveId(source) {
+            const storePath = path.join(process.env.src_path, "src/js/store/index.js")
+            const isTemplateStoreImport = source === templateStoreImport || path.resolve(source) === storePath
+            if (!isTemplateStoreImport) return null
+            if (fs.existsSync(storePath)) return null
+
+            return emptyStoreModuleId
+        },
+        load(id) {
+            if (id !== emptyStoreModuleId) return null
+
+            return `
+                export default function configureStore(initialState = {}) {
+                    return {
+                        getState: () => initialState,
+                        dispatch: (action) => action,
+                        subscribe: () => () => {},
+                        replaceReducer: () => {},
+                    }
+                }
+            `
+        },
+    }
+}
+
+import { fileURLToPath } from "url"
+import { dirname } from "path"
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+import path from "path"
+import fs from "fs"
+
+const packageJsonConfig = path.resolve(process.env.src_path, "package.json")
+const catalystPackageJsonConfig = path.resolve(__dirname, "../../package.json")
+
+let packageJsonContent, catalystPackageJsonContent
+let _moduleAliases = {},
+    catalyst_moduleAliases = {}
+
+try {
+    packageJsonContent = fs.readFileSync(packageJsonConfig, "utf8")
+    const packageJson = JSON.parse(packageJsonContent)
+    _moduleAliases = packageJson._moduleAliases || {}
+} catch (error) {
+    console.warn(`Failed to read or parse package.json from ${packageJsonConfig}:`, error.message)
+}
+
+try {
+    catalystPackageJsonContent = fs.readFileSync(catalystPackageJsonConfig, "utf8")
+    const catalystPackageJson = JSON.parse(catalystPackageJsonContent)
+    catalyst_moduleAliases = catalystPackageJson._moduleAliases || {}
+} catch (error) {
+    console.warn(
+        `Failed to read or parse catalyst package.json from ${catalystPackageJsonConfig}:`,
+        error.message
+    )
+}
+
+const allAliases = { ..._moduleAliases, ...catalyst_moduleAliases }
+
+import { imageUrl, fontUrl } from "./scssParams.js"
+
+const alias = () => {
+    if (!allAliases || typeof allAliases !== "object") {
+        return {}
+    }
+
+    return Object.keys(allAliases).reduce((moduleEnvMap, alias) => {
+        if (allAliases[alias] && typeof allAliases[alias] === "string") {
+            try {
+                const aliasPath = path.join(process.env.src_path, ...allAliases[alias].split("/"))
+                moduleEnvMap[alias] = aliasPath
+            } catch (error) {
+                console.warn(`Failed to configure alias ${alias}:`, error.message)
+            }
+        }
+        return moduleEnvMap
+    }, {})
+}
+
+export const getClientEnvVariables = () => {
+    const clientEnvVars = process.env.CLIENT_ENV_VARIABLES
+
+    if (!clientEnvVars) {
+        return {}
+    }
+
+    // Parse CLIENT_ENV_VARIABLES if it's a JSON string
+    const allowedVars = typeof clientEnvVars === "string" ? JSON.parse(clientEnvVars) : clientEnvVars
+
+    // Create define object with only allowed environment variables
+    const envVarDefinitions = {}
+
+    allowedVars.forEach((varName) => {
+        if (process.env[varName] !== undefined) {
+            // Define as process.env.VARIABLE_NAME for client-side usage
+            envVarDefinitions[`process.env.${varName}`] = JSON.stringify(process.env[varName])
+        }
+    })
+    envVarDefinitions[`process.env.src_path`] = JSON.stringify(process.env["src_path"])
+    envVarDefinitions[`process.env.BUILD_OUTPUT_PATH`] = JSON.stringify(process.env["BUILD_OUTPUT_PATH"])
+    envVarDefinitions[`process.env.PUBLIC_STATIC_ASSET_PATH`] = JSON.stringify(
+        process.env["PUBLIC_STATIC_ASSET_PATH"]
+    )
+    envVarDefinitions[`process.env.PUBLIC_STATIC_ASSET_URL`] = JSON.stringify(
+        process.env["PUBLIC_STATIC_ASSET_URL"]
+    )
+
+    return envVarDefinitions
+}
+
+const isProduction = process.env.NODE_ENV === "production"
+
+const getScssResourcesImport = () => {
+    const resourcesDir = path.join(process.env.src_path, "src/static/css/resources")
+    const indexPath = path.join(resourcesDir, "index.scss")
+    const variablesPath = path.join(resourcesDir, "_variables.scss")
+
+    if (fs.existsSync(indexPath)) {
+        return '@import "@css/resources/index.scss"; '
+    }
+
+    if (fs.existsSync(variablesPath)) {
+        return '@import "@css/resources/_variables.scss"; '
+    }
+
+    return ""
+}
+
+// Pre-bundling upfront avoids Vite discovering deps at runtime which causes
+// cascading full-page reloads and "stuck in loading" on dev server.
+const browserOptimizeDeps = [
+    "react",
+    "react-dom",
+    "react-dom/client",
+    "react-redux",
+    "react-router-dom",
+    "redux",
+    "redux-thunk",
+    "axios",
+    "react-helmet-async",
+    "react-google-recaptcha",
+    "react-fast-compare",
+    "history",
+    "lottie-web",
+    // Pre-bundle alongside React so esbuild marks react/react-router as external
+    // and avoids a duplicate React instance (which causes useContext null errors)
+    "@tata1mg/slowboi-react",
+    "invariant",
+    "shallowequal",
+    "prop-types",
+    "redux-logger",
+    "framer-motion",
+    "recharts",
+    "react-modal",
+    "react-datepicker",
+    "react-intersection-observer",
+    "react-markdown",
+    "react-lottie",
+    "isomorphic-dompurify",
+    "ua-parser-js",
+    "qrcode.react",
+    "fast-average-color",
+    "react-dfp",
+    "web-vitals",
+    // Referenced by manualChunks in vite.config.client.js — pre-bundle so the
+    // first navigation that pulls them in doesn't trigger a full-page reload.
+    "react-loadable-visibility",
+    "react-detect-offline",
+    "react-side-effect",
+    "react-async-script",
+    "normalize.css",
+]
+
+// Node-only / instrumentation dependencies that must never be bundled into the
+// SSR output. OpenTelemetry is opt-in (enabled at runtime via OTEL_ENABLE), so
+// these packages may not be installed in the consuming app. They are imported
+// only by dist/otel.js, which is itself dynamically imported at runtime and only
+// when OTEL_ENABLE=true (see server/renderer/handler.jsx). Marking them external
+// lets the bundler skip resolving them; Node resolves them at runtime, but only
+// if/when the otel chunk is actually loaded.
+export const nodeOnlyExternalDeps = [
+    "elastic-apm-node",
+    "@grpc/grpc-js",
+    "@opentelemetry/api",
+    "@opentelemetry/core",
+    "@opentelemetry/resources",
+    "@opentelemetry/semantic-conventions",
+    "@opentelemetry/sdk-node",
+    "@opentelemetry/sdk-metrics",
+    "@opentelemetry/sdk-trace-base",
+    "@opentelemetry/sdk-trace-node",
+    "@opentelemetry/exporter-trace-otlp-grpc",
+    "@opentelemetry/exporter-trace-otlp-http",
+    "@opentelemetry/exporter-metrics-otlp-grpc",
+    "@opentelemetry/exporter-metrics-otlp-http",
+    "@opentelemetry/auto-instrumentations-node",
+    "@opentelemetry/instrumentation-http",
+    "@opentelemetry/instrumentation-express",
+]
+
+// Predicate form for Rollup's `external`. Also matches the many transitive
+// @opentelemetry/instrumentation-* packages that auto-instrumentations-node pulls
+// in, without having to enumerate each one.
+const nodeBuiltins = new Set([...builtinModules, ...builtinModules.map((name) => `node:${name}`)])
+
+export const isNodeOnlyExternal = (id) =>
+    nodeBuiltins.has(id) ||
+    id === "elastic-apm-node" ||
+    id === "@grpc/grpc-js" ||
+    id.startsWith("@opentelemetry/")
+
+export default defineConfig({
+    // Parallel `vite build` (SSR + client) must use separate dirs or Vite will block on shared `node_modules/.vite`.
+    cacheDir: path.join(
+        process.env.src_path,
+        "node_modules",
+        process.env.CATALYST_VITE_CACHE_ID ? `.vite-${process.env.CATALYST_VITE_CACHE_ID}` : ".vite"
+    ),
+    ssr: {
+        // Keep selected React-side packages bundled for SSR (transformed by Vite, NOT pre-bundled)
+        // noExternal: ["@tata1mg/slowboi-react"],
+        // Ensure Node-only instrumentation and low-level Node deps stay external so
+        // the bundler never tries to resolve the optional (opt-in) OTEL packages.
+        external: nodeOnlyExternalDeps,
+        optimizeDeps: {
+            include: [
+                "invariant",
+                "react-fast-compare",
+                "shallowequal",
+                "prop-types",
+                "redux-thunk",
+                "redux-logger",
+            ],
+            // Prevent pre-bundling React ecosystem packages for SSR to avoid duplicate
+            // React instances. Pre-bundled copies in .vite/deps_ssr/ create a separate
+            // React instance from node_modules/react used by react-dom/server, causing
+            // "Invalid hook call" errors when hooks try to read a null dispatcher.
+            exclude: [
+                "react",
+                "react-dom",
+                "react-router-dom",
+                "@tata1mg/router",
+                // "@tata1mg/slowoi-react",
+                "catalyst-core/router/ClientRouter",
+            ],
+            esbuildOptions: {
+                format: "esm",
+                target: "node2022",
+                loader: {
+                    ".js": "jsx",
+                },
+            },
+        },
+    },
+    plugins: [
+        optionalTemplateStorePlugin(),
+        scssModulesPlugin(),
+        jsxInJsPlugin(),
+        // `include` extends the default regex so Fast Refresh also wraps .js
+        // files (their JSX has already been transformed by jsxInJsPlugin above).
+        react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
+        // Default: SVG → React component. Use `*.svg?url` (or `?raw`) for asset URL / raw source.
+        // Keep `*.svg?react` so explicit imports still work. Exclude node_modules so deps keep normal asset handling.
+        svgr({
+            include: ["**/*.svg", "**/*.svg?react"],
+            exclude: "**/node_modules/**",
+        }),
+    ],
+    resolve: {
+        alias: alias(),
+        // Ensure only one copy of React-related packages is used (prevents
+        // duplicate instances from hoisted/linked packages in monorepos)
+        dedupe: ["react", "react-dom", "react-router-dom", "@tata1mg/slowboi-react"],
+    },
+    define: {
+        ...getClientEnvVariables(),
+    },
+
+    build: {
+        outDir: path.join(process.env.src_path, process.env.BUILD_OUTPUT_PATH || "build"),
+    },
+
+    optimizeDeps: {
+        // Explicit entries so the dep scanner crawls the app's real import
+        // graph. Without this (SSR middleware mode has no index.html), Vite
+        // can't see dynamic `import()` chunks produced by split(), so every
+        // first-navigation discovers new deps and triggers a full reload.
+        entries: [
+            path.join(process.env.src_path, "client/index.js"),
+            path.join(process.env.src_path, "src/**/*.{js,jsx,ts,tsx}"),
+        ],
+        include: browserOptimizeDeps,
+        exclude: ["catalyst-core/router/ClientRouter"],
+        esbuildOptions: {
+            format: "esm",
+            target: "node2022",
+            loader: {
+                ".js": "jsx",
+            },
+        },
+    },
+
+    css: {
+        modules: {
+            localsConvention: "camelCase",
+            generateScopedName: "[name]__[local]___[hash:base64:5]",
+        },
+        preprocessorOptions: {
+            scss: {
+                additionalData: (content) =>
+                    `${getScssResourcesImport()}$font_url: "${fontUrl()}"; $url_for: "${imageUrl()}";\n${content}`,
+                silenceDeprecations: [
+                    "import",
+                    "global-builtin",
+                    "color-functions",
+                    "if-function",
+                    "slash-div",
+                ],
+            },
+        },
+    },
+    json: {
+        stringify: true,
+    },
+    assetsInclude: [
+        "**/*.png",
+        "**/*.jpg",
+        "**/*.gif",
+        "**/*.jpeg",
+        "**/*.ico",
+        "**/*.svg",
+        "**/*.ttf",
+        "**/*.eot",
+        "**/*.woff2",
+    ],
+
+    // Server configuration
+    server: {
+        hmr: !isProduction,
+        fs: {
+            allow: [process.env.src_path, __dirname],
+        },
+    },
+
+    // Preview configuration for production preview
+    preview: {
+        port: process.env.NODE_SERVER_PORT ? parseInt(process.env.NODE_SERVER_PORT) : 3005,
+        host: process.env.NODE_SERVER_HOSTNAME || "localhost",
+    },
+})

package/dist/vite/vite.config.server.js

@@ -0,0 +1,84 @@
+import loadEnvironmentVariables from "../scripts/loadEnvironmentVariables.js"
+loadEnvironmentVariables()
+import { defineConfig } from "vite"
+import baseConfig, { getClientEnvVariables, isNodeOnlyExternal } from "./vite.config.js"
+import path from "path"
+import { fileURLToPath } from "url"
+import { dirname } from "path"
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+import { injectCacheKeyPlugin } from "./inject-cache-key-plugin.js"
+import { loadCustomViteConfig } from "./loadCustomViteConfig.js"
+
+export default defineConfig(async () => {
+    const customViteConfig = await loadCustomViteConfig()
+
+    return {
+        ...baseConfig,
+        mode: "production",
+
+        // Add cache key injection plugin first to transform split calls
+        plugins: [
+            injectCacheKeyPlugin(),
+            ...(baseConfig.plugins || []),
+            ...(customViteConfig?.ssrPlugins || []),
+        ],
+
+        build: {
+            ...baseConfig.build,
+            outDir: path.join(process.env.src_path, process.env.BUILD_OUTPUT_PATH || "build"),
+            target: "es2022",
+            minify: "esbuild",
+            sourcemap: false,
+            manifest: false,
+            ssrManifest: false,
+
+            rollupOptions: {
+                // Belt-and-suspenders with ssr.external: ensures the opt-in OTEL /
+                // node-only packages (and their transitive @opentelemetry/* deps) are
+                // never resolved/bundled, even though they may not be installed.
+                external: isNodeOnlyExternal,
+                input: {
+                    // Server entry point for SSR
+                    server: path.join(__dirname, "../server/renderer/index.js"),
+                },
+                output: {
+                    format: "es",
+                    entryFileNames: (chunkInfo) => {
+                        return chunkInfo.name === "server"
+                            ? "server/index.js"
+                            : "server/assets/[name]-[hash].js"
+                    },
+                    chunkFileNames: "server/assets/[name]-[hash].js",
+                    assetFileNames: (assetInfo) => {
+                        const extType = assetInfo.name.split(".").pop()
+                        if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
+                            return "server/assets/images/[name]-[hash][extname]"
+                        }
+                        if (/woff2?|eot|ttf|otf/i.test(extType)) {
+                            return "server/assets/fonts/[name]-[hash][extname]"
+                        }
+                        if (/css/i.test(extType)) {
+                            return "server/assets/css/[name]-[hash][extname]"
+                        }
+                        return "server/assets/[name]-[hash][extname]"
+                    },
+                },
+            },
+
+            chunkSizeWarningLimit: 2000,
+        },
+
+        // Optimization for production
+        esbuild: {
+            legalComments: "none",
+        },
+
+        // Production-specific define
+        define: {
+            ...getClientEnvVariables(),
+            __DEV__: false,
+            "process.env.NODE_ENV": JSON.stringify("production"),
+        },
+    }
+})

package/dist/web-router/components/MetaTag.jsx

@@ -0,0 +1,34 @@
+import React, { useContext, useState, useEffect } from "react"
+import { HelmetProvider, Helmet } from "react-helmet-async"
+import { OneMgRouterContext } from "../context.jsx"
+import { useRouterData } from "./RouterDataProvider.jsx"
+import { deleteHeadTagsByDataAttribute, getMetaData } from "../utils/metaDataUtils.jsx"
+import { useLocation } from "react-router-dom"
+
+/**
+ * @description renders meta tags component assigned to setMetaData
+ */
+export const MetaTag = () => {
+    const { matchedRoutes } = useContext(OneMgRouterContext)
+    const routeData = useRouterData()
+    const location = useLocation()
+    const [metaTags, setMetaTags] = useState([<meta key={0}></meta>])
+
+    useEffect(() => {
+        const mergedMetaTags = getMetaData(matchedRoutes, routeData)
+        if (Array.isArray(mergedMetaTags) && mergedMetaTags.length > 0) {
+            setMetaTags(mergedMetaTags)
+        }
+        return () => deleteHeadTagsByDataAttribute("catalyst")
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [location])
+
+    if (Array.isArray(metaTags) && metaTags.length >= 0) {
+        return (
+            <HelmetProvider>
+                <Helmet>{metaTags}</Helmet>
+            </HelmetProvider>
+        )
+    }
+    return <></>
+}