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

package/dist/server/expressServer.js

@@ -1,5 +1,250 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _path=_interopRequireDefault(require("path"));var _fs=_interopRequireDefault(require("fs"));var _express=_interopRequireDefault(require("express"));var _bodyParser=_interopRequireDefault(require("body-parser"));var _compression=_interopRequireDefault(require("compression"));var _cookieParser=_interopRequireDefault(require("cookie-parser"));var _expressStaticGzip=_interopRequireDefault(require("express-static-gzip"));var _renderer=_interopRequireDefault(require("@catalyst/server/renderer"));var _server=require("@catalyst/template/server/server.js");var _validator=require("@catalyst/server/utils/validator");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e};}const env=process.env.NODE_ENV||"development";const app=(0,_express.default)();const sendBuiltPublicFile=(res,fileName,headers={})=>{const publicFilePath=_path.default.join(process.env.src_path,`./${process.env.BUILD_OUTPUT_PATH}/public`,fileName);if(!_fs.default.existsSync(publicFilePath)){res.status(404).end();return;}res.set(headers);res.sendFile(publicFilePath);};app.get("/catalyst-sw.js",(_req,res)=>{sendBuiltPublicFile(res,"catalyst-sw.js",{"Content-Type":"application/javascript; charset=utf-8","Cache-Control":"no-cache, no-store, must-revalidate","Service-Worker-Allowed":"/"});});app.get("/catalyst-offline-manifest.json",(_req,res)=>{sendBuiltPublicFile(res,"catalyst-offline-manifest.json",{"Content-Type":"application/json; charset=utf-8","Cache-Control":"no-cache, no-store, must-revalidate"});});app.get("/offline.html",(_req,res)=>{sendBuiltPublicFile(res,"offline.html",{"Content-Type":"text/html; charset=utf-8","Cache-Control":"no-cache, no-store, must-revalidate"});});// This middleware is being used to extract the body of the request
-app.use(_bodyParser.default.json({limit:"100kb"}));// Handles "bytestream array" content types sent as raw application/* bodies
-app.use(_bodyParser.default.raw({type:"application/*",limit:"100kb"}));app.use((0,_cookieParser.default)());if((0,_validator.validateMiddleware)(_server.addMiddlewares))(0,_server.addMiddlewares)(app);app.use((0,_compression.default)());// Serve pre-compressed static assets (brotli preferred) from the build output directory
-if(env==="production"){app.use(process.env.PUBLIC_STATIC_ASSET_PATH,(0,_expressStaticGzip.default)(_path.default.join(process.env.src_path,`./${process.env.BUILD_OUTPUT_PATH}/public`),{enableBrotli:true,orderPreference:["br","gzip","deflate"]}));}else{app.use(process.env.PUBLIC_STATIC_ASSET_PATH,_express.default.static(_path.default.join(process.env.src_path,`./${process.env.BUILD_OUTPUT_PATH}/public`)));}// Catch-all: every non-asset request is handled by the SSR renderer
-app.use("*",_renderer.default);var _default=exports.default=app;
+import path from "path"
+import express from "express"
+import bodyParser from "body-parser"
+import compression from "compression"
+import cookieParser from "cookie-parser"
+import expressStaticGzip from "express-static-gzip"
+import { createServer as createViteServer } from "vite"
+import util from "node:util"
+import pc from "picocolors"
+import fs from "fs"
+const { cyan, yellow, green } = pc
+
+import { validateMiddleware, safeCall } from "./utils/validator.js"
+import { botDetectionMiddleware } from "./utils/botDetectionMiddleware.js"
+const { addMiddlewares } = await import(path.join(process.env.src_path, "server/server.js"))
+
+// OpenTelemetry is opt-in (OTEL_ENABLE) — mirrors server/renderer/handler.jsx.
+// Passthrough no-op middleware when disabled or packages aren't installed.
+let responseFlushMiddleware = () => (_req, _res, next) => next()
+if (process.env.OTEL_ENABLE === true) {
+    try {
+        const otel = await import("../otel.js")
+        responseFlushMiddleware = otel.responseFlushMiddleware
+    } catch {
+        // otel packages not installed — continue without the flush span
+    }
+}
+
+const SSR_SERVICE = process.env.SERVICE_NAME || `pwa-${process.env.APPLICATION}-node-server`
+
+// ─── Load app-defined server lifecycle hooks ──────────────────────────────────
+let onServerError
+try {
+    const hooks = await import(path.join(process.env.src_path, "server/index.js"))
+    onServerError = hooks.onServerError
+} catch {
+    // No hooks file — onServerError remains undefined
+}
+
+// ─── Process-level error handlers ─────────────────────────────────────────────
+
+function safeStringify(err) {
+    try {
+        return JSON.stringify(err)
+    } catch (e) {
+        console.log("error in safeStringify", e)
+        return err
+    }
+}
+
+process.on("uncaughtException", (err, origin) => {
+    console.log(process.stderr.fd)
+    console.log(`Caught exception: ${err}\n` + `Exception origin: ${origin}`)
+})
+
+process.on("uncaughtExceptionMonitor", (err, origin) => {
+    console.log(err, origin)
+})
+
+process.on("unhandledRejection", (err) => console.log("unhandledRejection in Catalyst", safeStringify(err)))
+
+process.on("SIGINT", function () {
+    console.log("SIGINT")
+    process.exit(0)
+})
+
+process.on("message", function (msg) {
+    if (msg == "shutdown") {
+        console.log("Closing all connections...")
+        setTimeout(function () {
+            console.log("Finished closing connections")
+            process.exit(0)
+        }, 1500)
+    }
+})
+
+import { fileURLToPath } from "url"
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const isProduction = process.env.NODE_ENV === "production"
+
+function serveBuildFile(app, buildPath, urlPath, fileName, headers = {}) {
+    app.get(urlPath, (_req, res, next) => {
+        const filePath = path.join(buildPath, fileName)
+        if (!fs.existsSync(filePath)) return next()
+        res.set(headers)
+        res.sendFile(filePath)
+    })
+}
+
+async function createServer() {
+    const port = process.env.NODE_SERVER_PORT ?? 3005
+    const host = process.env.NODE_SERVER_HOSTNAME ?? "localhost"
+    const app = express()
+
+    // This middleware is being used to extract the body of the request
+    app.use(bodyParser.json())
+
+    // // This middleware has been added to accommodate "byetstream array"
+    app.use(bodyParser.raw({ type: "application/*" }))
+
+    // This middleware is being used to parse cookies!
+    app.use(cookieParser())
+
+    // All the middlewares defined by the user will run here.
+    if (validateMiddleware(addMiddlewares)) addMiddlewares(app)
+
+    // response.compress + response.flush spans straddle compression — they
+    // attribute the time past the `handler` span (gzip/brotli, then egress).
+    // MUST be mounted immediately before compression() so its outer res.end
+    // hook reliably wraps compression's patch (no-op when OTEL off).
+    app.use(responseFlushMiddleware(SSR_SERVICE, "response.flush", "response.compress"))
+
+    // The middleware will attempt to compress response bodies for all request that traverse through the middleware
+    app.use(compression())
+
+    let vite
+
+    if (isProduction) {
+        // In production, serve built assets. Build manifests themselves are
+        // loaded once at startup by ./manifestCache.js — handler reads from
+        // that singleton instead of attaching them to every `req`.
+        const buildPath = path.join(process.env.src_path, process.env.BUILD_OUTPUT_PATH || "build")
+        const publicPath = path.join(buildPath, "client", "assets")
+        const publicAssetBase = `/${(process.env.PUBLIC_STATIC_ASSET_PATH || "/assets/")
+            .replace(/^\/+|\/+$/g, "")
+            .replace(/\/+/g, "/")}/client/assets`
+
+        serveBuildFile(app, buildPath, "/catalyst-offline-manifest.json", "catalyst-offline-manifest.json", {
+            "cache-control": "no-store",
+        })
+        serveBuildFile(app, buildPath, "/catalyst-sw.js", "catalyst-sw.js", {
+            "cache-control": "no-cache",
+            "service-worker-allowed": "/",
+        })
+        serveBuildFile(app, buildPath, "/offline.html", "offline.html", {
+            "cache-control": "no-cache",
+        })
+
+        // Serve static assets — prefers pre-compressed .br / .gz files generated at build time
+        app.use(
+            publicAssetBase,
+            expressStaticGzip(publicPath, {
+                enableBrotli: true,
+                orderPreference: ["br", "gz"],
+                serveStatic: {
+                    maxAge: "1y",
+                    etag: true,
+                    lastModified: true,
+                },
+            })
+        )
+    } else {
+        // In development, use Vite middleware
+        vite = await createViteServer({
+            configFile: "./dist/vite/vite.config.js",
+            server: {
+                middlewareMode: true,
+            },
+            appType: "custom",
+            root: process.env.src_path,
+        })
+        app.use(vite.middlewares)
+    }
+
+    // In production, resolve the render module once at startup so the ESM
+    // loader and lazy-chunk cache are not re-entered on every request.
+    let productionRender
+    if (isProduction) {
+        const serverPath = path.join(
+            process.env.src_path,
+            process.env.BUILD_OUTPUT_PATH || "build",
+            "server",
+            "server.js"
+        )
+        if (fs.existsSync(serverPath)) {
+            productionRender = await import(serverPath)
+        } else {
+            const rendererPath = path.join(
+                process.env.src_path,
+                process.env.BUILD_OUTPUT_PATH || "build",
+                "server",
+                "index.js"
+            )
+            productionRender = await import(rendererPath)
+        }
+    }
+
+    app.use(botDetectionMiddleware)
+
+    app.use("*", async (req, res, next) => {
+        try {
+            let render
+
+            if (isProduction) {
+                render = productionRender
+            } else {
+                // In development, load through Vite SSR per-request to support HMR
+                const rendererPath = path.join(__dirname, "./renderer/index.js")
+                render = await vite.ssrLoadModule(rendererPath)
+            }
+
+            // Render your app
+            if (render && render.default) {
+                await render.default(req, res, next)
+            } else {
+                console.error("Renderer not found or invalid")
+                res.status(500).send("Error loading renderer")
+            }
+        } catch (err) {
+            console.error("SSR Error:", err)
+            if (vite) {
+                vite.ssrFixStacktrace(err)
+            }
+            res.status(500).send("Internal Server Error")
+        }
+    })
+
+    app.listen({ port, host }, (error) => {
+        const { APPLICATION, NODE_SERVER_HOSTNAME, NODE_SERVER_PORT } = process.env
+
+        if (error) {
+            console.log("An error occured while starting the Application server : ", error)
+            safeCall(onServerError)
+            return
+        }
+
+        if (process.env.NODE_ENV === "development") console.log(green("Compiled successfully!"))
+
+        console.log(`\nYou can now view ${APPLICATION} in the browser.\n`)
+        console.log(
+            util.format("\tLocal:".padEnd(8), cyan(`http://${NODE_SERVER_HOSTNAME}:${NODE_SERVER_PORT}`))
+        )
+
+        if (process.env.NODE_ENV === "development") {
+            console.log("\nNote that the development build is not optimized.")
+            console.log("To create a production build, use " + cyan("npm run build"))
+        } else {
+            console.log(
+                green(`\nProduction server running in ${isProduction ? "production" : "development"} mode`)
+            )
+        }
+
+        console.log("\nFind out more about deployment here:")
+        console.log(yellow("\n https://catalyst.1mg.com/public_docs/content/deployment\n"))
+    })
+}
+
+createServer()

package/dist/server/manifestCache.js

@@ -0,0 +1,36 @@
+import fs from "fs"
+import path from "path"
+
+let manifest = null
+let assetManifest = null
+let loaded = false
+
+const isProduction = process.env.NODE_ENV === "production"
+
+function loadManifests() {
+    if (loaded) return
+
+    if (!isProduction) return
+
+    const buildPath = path.join(process.env.src_path, process.env.BUILD_OUTPUT_PATH || "build")
+    try {
+        const manifestPath = path.join(buildPath, ".vite", "manifest.json")
+        const assetManifestPath = path.join(buildPath, ".vite", "asset-categories.json")
+
+        if (fs.existsSync(manifestPath)) {
+            manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"))
+        }
+        if (fs.existsSync(assetManifestPath)) {
+            assetManifest = JSON.parse(fs.readFileSync(assetManifestPath, "utf-8"))
+        }
+        loaded = true
+    } catch (error) {
+        loaded = false
+        console.warn("Could not load build manifests:", error.message)
+    }
+}
+
+loadManifests()
+
+export const getManifest = () => manifest
+export const getAssetManifest = () => assetManifest

package/dist/server/renderer/ChunkExtractor.js

@@ -0,0 +1,144 @@
+/**
+ * ChunkExtractor — collects JS and CSS assets needed for the current SSR render.
+ *
+ * Two buckets:
+ *   critical  — loaded in <head> (inline CSS via <style>, entry + route JS)
+ *   deferred  — injected after </body> via onAllReady (external <link> CSS)
+ *
+ * Critical CSS is inlined as <style> to avoid FOUC/CLS.
+ * With natural Vite code-splitting (no mega "main" chunk), critical CSS stays small (~15-25KB).
+ */
+export class ChunkExtractor {
+    constructor({ manifest = {}, assetManifest = {} } = {}) {
+        this.manifest = manifest
+        this.assetManifest = assetManifest
+        this.components = new Set()
+
+        const baseUrl = `${process.env.PUBLIC_STATIC_ASSET_URL || ""}${process.env.PUBLIC_STATIC_ASSET_PATH || ""}`
+        this.publicPath = `${baseUrl.replace(/\/+$/, "")}/`
+
+        // JS tracked as full URLs, CSS tracked as relative file paths (for disk reading)
+        this.critical = { js: new Set(), css: new Set() }
+        this.deferred = { js: new Set(), css: new Set() }
+        this._allCssPaths = new Set() // dedup across buckets
+
+        this._loadEssentialEntrypoints()
+
+        if (typeof global !== "undefined") {
+            global.__CHUNK_EXTRACTOR__ = this
+        }
+    }
+
+    // ── Build-time essential chunks (entry + static deps) ──────────────
+    _loadEssentialEntrypoints() {
+        for (const [, entry] of Object.entries(this.assetManifest.essential || {})) {
+            this._addAssets(entry, this.critical)
+        }
+    }
+
+    // ── Route-matched split chunks → critical (blocks first paint) ─────
+    preloadRouteCss(allMatches = []) {
+        const list = allMatches == null ? [] : Array.isArray(allMatches) ? allMatches : []
+        for (const match of list) {
+            const route = match?.route
+            if (!route) continue
+
+            const component = route.Component || route.component
+            const cacheKey = component?.__cacheKey
+            if (!cacheKey) continue
+
+            const entry =
+                this.assetManifest.ssrTrue?.[cacheKey] ||
+                this.assetManifest.ssrFalse?.[cacheKey] ||
+                this.manifest[cacheKey]
+
+            if (entry) {
+                this._addAssets(entry, this.critical)
+            }
+        }
+    }
+
+    // ── Components discovered during render → deferred ─────────────────
+    addComponent(cacheKey) {
+        this.components.add(cacheKey)
+
+        // Try assetManifest first by raw cacheKey — addSourcePathAliases writes
+        // source-path entries here even when the chunk is anonymous in manifest.json
+        // (shared / multi-importer dynamic chunks). Falling back to manifest.json
+        // last keeps the existing prefix-match behavior intact.
+        let entry =
+            this.assetManifest.ssrTrue?.[cacheKey] ||
+            this.assetManifest.ssrFalse?.[cacheKey] ||
+            this.manifest[cacheKey]
+
+        if (!entry) {
+            const resolvedKey = Object.keys(this.manifest).find((k) => k.startsWith(cacheKey + "."))
+            if (resolvedKey) {
+                entry =
+                    this.assetManifest.ssrTrue?.[resolvedKey] ||
+                    this.assetManifest.ssrFalse?.[resolvedKey] ||
+                    this.manifest[resolvedKey]
+            }
+        }
+
+        if (entry) {
+            this._addAssets(entry, this.deferred)
+        }
+    }
+
+    // ── Internal: add JS URLs + CSS file paths to a bucket ─────────────
+    _addAssets(manifestEntry, bucket) {
+        if (!manifestEntry?.file) return
+
+        const jsUrl = this._toUrl(manifestEntry.file)
+
+        // Skip if already tracked in either bucket
+        if (this.critical.js.has(jsUrl) || this.deferred.js.has(jsUrl)) return
+
+        bucket.js.add(jsUrl)
+
+        // Collect direct + transitive CSS as relative file paths (not URLs)
+        const cssPart = Array.isArray(manifestEntry.css) ? manifestEntry.css : []
+        const allCssPart = Array.isArray(manifestEntry.allCss) ? manifestEntry.allCss : []
+        const cssFiles = [...cssPart, ...allCssPart]
+        for (const cssFile of cssFiles) {
+            if (!this._allCssPaths.has(cssFile)) {
+                this._allCssPaths.add(cssFile)
+                bucket.css.add(cssFile)
+            }
+        }
+    }
+
+    _toUrl(filePath) {
+        const cleaned = filePath.replace(/^\/+/, "")
+        return `${this.publicPath}${cleaned}`
+    }
+
+    _toCssUrl(filePath) {
+        const cleaned = filePath.replace(/^\/+/, "")
+        return `${this.publicPath}${cleaned}`
+    }
+
+    // ── Public getters ─────────────────────────────────────────────────
+    /** Critical: CSS as relative file paths (for inlining from disk), JS as URLs */
+    getCriticalAssets() {
+        return {
+            js: Array.from(this.critical.js),
+            css: Array.from(this.critical.css),
+        }
+    }
+
+    /** Deferred: CSS as URLs (external <link>), JS as URLs */
+    getDeferredAssets() {
+        return {
+            js: Array.from(this.deferred.js),
+            css: Array.from(this.deferred.css),
+        }
+    }
+
+    getRenderedComponentKeys() {
+        return Array.from(this.components)
+    }
+}
+
+export default ChunkExtractor

package/dist/server/renderer/document/Body.jsx

@@ -0,0 +1,59 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const DEFAULT_SAFE_AREA = { top: 0, right: 0, bottom: 0, left: 0 }
+/**
+ * Body component which will be used in page component
+ * @param {object} jsx - page jsx code
+ * @param {object} statusCode - document request status code
+ * @param {object} initialState - initial state object for redux store
+ * @param {object} fetcherData - contains data from executing serverFetcher function
+ * @param {object} children - contains any child elements defined within the component
+ */
+export function Body(props) {
+    const {
+        jsx = "",
+        statusCode = "",
+        initialState = {},
+
+        fetcherData = {},
+        children,
+        safeArea = DEFAULT_SAFE_AREA,
+        nativeWebView = false,
+    } = props
+
+    return (
+        <body>
+            <script
+                /* eslint-disable-next-line risxss/catch-potential-xss-react */
+                dangerouslySetInnerHTML={{
+                    __html: `window.__SAFE_AREA_INITIAL__ = ${JSON.stringify(safeArea)}; window.__CATALYST_NATIVE_WEBVIEW__ = ${nativeWebView ? "true" : "false"}`,
+                }}
+            />
+            {process.env.NODE_ENV === "development" && <script type="module" src="/client/index.js"></script>}
+            {jsx}
+            <script
+                /* eslint-disable */
+                dangerouslySetInnerHTML={{
+                    __html: `
+                    window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
+                    window.__STATUS_CODE__ = ${JSON.stringify(statusCode || null)}
+                    window.__ROUTER_INITIAL_DATA__ = ${JSON.stringify(fetcherData)}
+            `,
+                }}
+            />
+
+            {children}
+        </body>
+    )
+}
+
+Body.propTypes = {
+    initialState: PropTypes.object,
+    jsx: PropTypes.any,
+    statusCode: PropTypes.string,
+    fetcherData: PropTypes.object,
+    children: PropTypes.node,
+    safeArea: PropTypes.object,
+    nativeWebView: PropTypes.bool,
+}

package/dist/server/renderer/document/FastRefresh.jsx

@@ -0,0 +1,20 @@
+import React from "react"
+
+/* eslint-disable risxss/catch-potential-xss-react */
+const FastRefresh = () => {
+    return (
+        <script
+            type="module"
+            dangerouslySetInnerHTML={{
+                __html: `
+        import { injectIntoGlobalHook } from "/@react-refresh";
+        injectIntoGlobalHook(window);
+        window.$RefreshReg$ = () => {};
+        window.$RefreshSig$ = () => (type) => type;
+        `,
+            }}
+        />
+    )
+}
+
+export default FastRefresh

package/dist/server/renderer/document/Head.jsx

@@ -0,0 +1,60 @@
+import React from "react"
+import PropTypes from "prop-types"
+import FastRefresh from "../../../vite/FastRefresh.jsx"
+
+/**
+ * Head component — inlines critical CSS as <style> and renders JS as <script type="module">.
+ * Critical CSS is small (~15-25KB) thanks to natural Vite code-splitting.
+ * Route-cached deferred CSS is inlined here on repeat visits; new deferred CSS still appends after body.
+ */
+export function Head(props) {
+    const {
+        inlineCss,
+        deferredRouteInlineCss,
+        jsScripts,
+        criticalPreloadLinks,
+        deferredPreloadLinks,
+        metaTags,
+        isBot,
+        publicAssetPath,
+        children,
+    } = props
+
+    return (
+        <head>
+            <meta charSet="utf-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1" />
+            {process.env.NODE_ENV === "development" && <FastRefresh />}
+
+            {publicAssetPath && <link rel="preconnect" href={publicAssetPath} />}
+            {publicAssetPath && <link rel="dns-prefetch" href={publicAssetPath} />}
+            {!isBot && criticalPreloadLinks}
+            {/* Warm-cache modulepreloads from prior SSRs (URLs not in critical scripts) */}
+            {!isBot && deferredPreloadLinks}
+            {metaTags && metaTags}
+
+            {/* Inline critical CSS — prevents FOUC/CLS */}
+            {inlineCss && <style dangerouslySetInnerHTML={{ __html: inlineCss }} />}
+
+            {/* Deferred CSS from prior SSRs on this route — avoids late layout from post-body <style> */}
+            {deferredRouteInlineCss && <style dangerouslySetInnerHTML={{ __html: deferredRouteInlineCss }} />}
+
+            {/* JS modules */}
+            {!isBot && jsScripts}
+
+            {children}
+        </head>
+    )
+}
+
+Head.propTypes = {
+    isBot: PropTypes.bool,
+    inlineCss: PropTypes.string,
+    deferredRouteInlineCss: PropTypes.string,
+    jsScripts: PropTypes.array,
+    criticalPreloadLinks: PropTypes.array,
+    deferredPreloadLinks: PropTypes.array,
+    metaTags: PropTypes.array,
+    publicAssetPath: PropTypes.string,
+    children: PropTypes.node,
+}

package/dist/server/renderer/document/index.jsx

@@ -0,0 +1,2 @@
+export * from "./Head.jsx"
+export * from "./Body.jsx"