vite-plugin-ssr-config 1.0.3

package/dist/index.js

@@ -0,0 +1,452 @@
+// src/index.ts
+import path5 from "path";
+
+// src/model.ts
+var assertSSRConfig = (ssrOpts = {}) => {
+  let {
+    root = process.cwd(),
+    disableBuild = false,
+    //Main Entry
+    entryClient = ".ssr/entryClient.jsx",
+    entryRender = ".ssr/entryRender.jsx",
+    rootDocument = ".ssr/root.jsx",
+    //Server
+    server = ".ssr/server.js",
+    handler = ".ssr/handler.js",
+    //SSR
+    pageServer = ".ssr/pageServer.jsx",
+    pageBrowser = ".ssr/pageBrowser.jsx",
+    rootRoutes = ".ssr/rootRoutes.jsx",
+    errorBoundary = ".ssr/errorBoundary.jsx",
+    //Scripts
+    liveReload = ".ssr/liveReload.jsx",
+    viteScripts = ".ssr/viteScripts.jsx",
+    //Out directories
+    serverOutDir = "dist/",
+    serverMinify = false,
+    serverBuild = (config) => config,
+    clientOutDir = "dist/client",
+    clientMinify = true,
+    clientBuild = (config) => config
+  } = ssrOpts;
+  return {
+    root,
+    disableBuild,
+    entryClient,
+    entryRender,
+    rootDocument,
+    server,
+    handler,
+    pageServer,
+    pageBrowser,
+    rootRoutes,
+    errorBoundary,
+    liveReload,
+    viteScripts,
+    serverOutDir,
+    serverMinify,
+    serverBuild,
+    clientOutDir,
+    clientMinify,
+    clientBuild
+  };
+};
+
+// src/utils.ts
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+var finalUrl = (base, name) => {
+  return path.join(base, name).replaceAll("\\", "/");
+};
+var getPluginDirectory = () => {
+  if (typeof __dirname === "undefined") {
+    const filename = fileURLToPath(import.meta.url);
+    return path.dirname(filename);
+  } else {
+    return __dirname;
+  }
+};
+var findDirPlugin = (dirname, max = 5) => {
+  const basedir = getPluginDirectory();
+  let relative = "/";
+  let dirPath = "";
+  for (var i = 0; i < max; i++) {
+    dirPath = path.join(basedir, relative, dirname);
+    if (fs.existsSync(dirPath)) {
+      return dirPath;
+    }
+    relative += "../";
+  }
+  throw Error(`Not found: ${dirPath}`);
+};
+var cleanDirectory = (target) => {
+  if (fs.existsSync(target)) {
+    fs.rmSync(target, { recursive: true, force: true });
+  }
+  fs.mkdirSync(target, { recursive: true });
+};
+var copyFilesDirectory = (origin, target, {
+  files = [],
+  oldId = "",
+  newId = ""
+}) => {
+  files.forEach((file) => {
+    const sourceFilePath = path.join(origin, file);
+    const targetFilePath = path.join(target, file);
+    if (oldId !== newId) {
+      let fileContent = fs.readFileSync(sourceFilePath, "utf-8");
+      fileContent = fileContent.replace(new RegExp(oldId, "g"), newId);
+      fs.writeFileSync(targetFilePath, fileContent, "utf-8");
+    } else {
+      fs.copySync(sourceFilePath, targetFilePath, { overwrite: true });
+    }
+  });
+};
+
+// src/plugin-build/build.ts
+import fs2 from "fs-extra";
+import path2 from "path";
+import { build, mergeConfig } from "vite";
+var doBuildServer = async (ssrConfig2, viteConfig) => {
+  const {
+    root,
+    serverMinify,
+    serverOutDir,
+    entryClient,
+    clientOutDir,
+    server,
+    handler,
+    serverBuild,
+    rootDocument,
+    entryRender,
+    pageServer,
+    pageBrowser,
+    rootRoutes,
+    errorBoundary,
+    liveReload,
+    viteScripts
+  } = ssrConfig2;
+  const { base = "/" } = viteConfig;
+  const ssrServerFile = path2.resolve(root, server);
+  const ssrPublicDir = path2.relative(serverOutDir, clientOutDir);
+  const manifestFile = path2.resolve(`${clientOutDir}/manifest.json`);
+  const manifestContent = fs2.readFileSync(manifestFile, "utf-8");
+  const manifest = JSON.parse(manifestContent);
+  const manifestOut = manifest[entryClient].file;
+  const ssrEntryClientURL = finalUrl(base, manifestOut);
+  const ssrFiles = [
+    handler,
+    rootDocument,
+    entryClient,
+    entryRender,
+    pageServer,
+    pageBrowser,
+    rootRoutes,
+    errorBoundary,
+    liveReload,
+    viteScripts
+  ];
+  const baseConfig = {
+    appType: "custom",
+    base,
+    root,
+    publicDir: "private",
+    define: {
+      "process.env.SSR_BASENAME": JSON.stringify(base),
+      "process.env.SSR_PUBLIC_DIR": JSON.stringify(ssrPublicDir),
+      "process.env.SSR_ENTRY_CLIENT": JSON.stringify(ssrEntryClientURL),
+      "process.env.SSR": JSON.stringify(true)
+    },
+    ssr: {
+      noExternal: []
+    },
+    build: {
+      outDir: serverOutDir,
+      ssr: ssrServerFile,
+      write: true,
+      minify: serverMinify,
+      target: "esnext",
+      emptyOutDir: false,
+      rollupOptions: {
+        external: viteConfig.build?.rollupOptions?.external,
+        output: {
+          format: "es",
+          entryFileNames: "app.js",
+          chunkFileNames: "bin/[name]-[hash].js",
+          assetFileNames: "assets/[name]-[hash].[ext]",
+          manualChunks: (id) => {
+            const isSsr = ssrFiles.find(
+              (it) => id.startsWith(it) || id.endsWith(it)
+            );
+            if (isSsr) {
+              return "ssr";
+            }
+            if (id.startsWith("virtual")) {
+              return "virtual";
+            }
+          }
+        },
+        onwarn: (warning, handler2) => {
+          if (warning.code === "UNUSED_EXTERNAL_IMPORT" && warning.ids.some((id) => id.includes("node_modules"))) {
+            return;
+          }
+          handler2(warning);
+        }
+      }
+    }
+  };
+  const customConfig = await serverBuild(baseConfig);
+  const finalConfig = mergeConfig(baseConfig, customConfig);
+  await build(finalConfig);
+};
+var doBuildClient = async (ssrConfig2, viteConfig) => {
+  const { base = "/" } = viteConfig;
+  const { root, clientMinify, clientOutDir, entryClient, clientBuild } = ssrConfig2;
+  const preloadFiles = [
+    "modulepreload",
+    "commonjsHelpers",
+    "vite/",
+    "installHook"
+  ];
+  const baseConfig = {
+    root,
+    appType: "custom",
+    base,
+    define: {
+      "process.env.SSR_BASENAME": JSON.stringify(base),
+      "process.env.SSR": JSON.stringify(false)
+    },
+    build: {
+      write: true,
+      manifest: true,
+      minify: clientMinify,
+      target: "modules",
+      emptyOutDir: false,
+      outDir: clientOutDir,
+      rollupOptions: {
+        external: viteConfig.build?.rollupOptions?.external,
+        input: {
+          main: path2.resolve(root, entryClient)
+        },
+        output: {
+          format: "es",
+          entryFileNames: `assets/[name]-[hash].js`,
+          chunkFileNames: `chunks/[name]-[hash].js`,
+          assetFileNames: `assets/[name]-[hash].[ext]`,
+          manualChunks: (id) => {
+            const isInternal = preloadFiles.find((it) => id.includes(it));
+            if (isInternal) {
+              return "preload";
+            }
+            if (id.includes("node_modules")) {
+              return "vendor";
+            }
+          }
+        }
+      }
+    }
+  };
+  const customConfig = await clientBuild(baseConfig);
+  const finalConfig = mergeConfig(baseConfig, customConfig);
+  await build(finalConfig);
+};
+
+// src/plugin-build/index.ts
+var pluginBuildSkip = () => {
+  const ENTRY_NONE = "____.html";
+  return {
+    name: "vite-plugin-ssr-config:skip",
+    enforce: "pre",
+    apply: "build",
+    config: () => {
+      if (process.env.IS_SSR_KIT_BUILD) return {};
+      return {
+        build: {
+          emptyOutDir: true,
+          copyPublicDir: false,
+          write: false,
+          rollupOptions: {
+            input: {
+              main: ENTRY_NONE
+            }
+          }
+        }
+      };
+    },
+    resolveId: (id) => {
+      if (id === ENTRY_NONE) {
+        return id;
+      }
+      return null;
+    },
+    load: (id) => {
+      if (id === ENTRY_NONE) {
+        return "";
+      }
+      return null;
+    }
+  };
+};
+var pluginBuildSSR = (ssrConfig2) => {
+  let viteConfig = {};
+  return {
+    name: "vite-plugin-ssr-config:build",
+    enforce: "pre",
+    apply: "build",
+    configResolved: (config) => {
+      viteConfig = config;
+    },
+    buildStart: async () => {
+      if (process.env.IS_SSR_KIT_BUILD) return;
+      process.env.IS_SSR_KIT_BUILD = "true";
+      cleanDirectory(ssrConfig2.clientOutDir);
+      cleanDirectory(ssrConfig2.serverOutDir);
+      viteConfig.logger.info("");
+      viteConfig.logger.info("\x1B[1m\x1B[31mCLIENT BUILD\x1B[0m");
+      await doBuildClient(ssrConfig2, viteConfig);
+      viteConfig.logger.info("");
+      viteConfig.logger.info("\x1B[1m\x1B[31mSERVER BUILD\x1B[0m");
+      await doBuildServer(ssrConfig2, viteConfig);
+      viteConfig.logger.info("");
+    }
+  };
+};
+var pluginBuild = (ssrConfig2) => {
+  if (ssrConfig2.disableBuild) {
+    return null;
+  }
+  return [pluginBuildSkip(), pluginBuildSSR(ssrConfig2)];
+};
+
+// src/plugin-resolve/index.ts
+import path3 from "path";
+var pluginResolve = (ssrConfig2) => {
+  let {
+    root,
+    server,
+    handler,
+    rootDocument,
+    entryClient,
+    entryRender,
+    pageServer,
+    pageBrowser,
+    rootRoutes,
+    errorBoundary,
+    liveReload,
+    viteScripts
+  } = ssrConfig2;
+  const absoluteFile = (name) => {
+    return path3.join(root, name);
+  };
+  return {
+    name: "vite-plugin-ssr-config:resolve",
+    enforce: "pre",
+    config: () => {
+      return {
+        resolve: {
+          alias: {
+            "@ssr/server.js": absoluteFile(server),
+            "@ssr/handler.js": absoluteFile(handler),
+            "@ssr/root.jsx": absoluteFile(rootDocument),
+            "@ssr/entryClient.jsx": absoluteFile(entryClient),
+            "@ssr/entryRender.jsx": absoluteFile(entryRender),
+            "@ssr/pageServer.jsx": absoluteFile(pageServer),
+            "@ssr/pageBrowser.jsx": absoluteFile(pageBrowser),
+            "@ssr/rootRoutes.jsx": absoluteFile(rootRoutes),
+            "@ssr/errorBoundary.jsx": absoluteFile(errorBoundary),
+            "@ssr/liveReload.jsx": absoluteFile(liveReload),
+            "@ssr/viteScripts.jsx": absoluteFile(viteScripts)
+          }
+        }
+      };
+    }
+  };
+};
+
+// src/plugin-serve/index.ts
+import fs3 from "fs-extra";
+import path4 from "path";
+var pluginServe = (ssrConfig2) => {
+  const { entryClient, root } = ssrConfig2;
+  return {
+    name: "vite-plugin-ssr-config:serve",
+    enforce: "post",
+    apply: "serve",
+    config: ({ base = "/" }) => {
+      const ssrClientEntry = finalUrl(base, entryClient);
+      return {
+        appType: "custom",
+        define: {
+          "process.env.SSR_BASENAME": JSON.stringify(base),
+          "process.env.SSR_ENTRY_CLIENT": JSON.stringify(ssrClientEntry)
+        }
+      };
+    },
+    configureServer: async (devServer) => {
+      return async () => {
+        devServer.middlewares.use(async (req, res, next) => {
+          const indexHtmlPath = path4.join(root, req.url, "index.html");
+          if (fs3.existsSync(indexHtmlPath)) {
+            return devServer.transformIndexHtml(
+              req.url,
+              fs3.readFileSync(indexHtmlPath, "utf-8")
+            ).then((html) => {
+              res.setHeader("Content-Type", "text/html");
+              res.setHeader("Pragma", "no-cache");
+              res.setHeader("Expires", "0");
+              res.end(html);
+            });
+          }
+          next();
+        });
+        devServer.middlewares.use(async (req, res, next) => {
+          try {
+            process.env.SSR = true;
+            const mod = await devServer.ssrLoadModule("@ssr/handler.js", {
+              fixStacktrace: true
+            });
+            await mod.handler(req, res, next);
+          } catch (error) {
+            next(error);
+          }
+        });
+      };
+    }
+  };
+};
+
+// src/index.ts
+var ssrConfig = (opts = {}) => {
+  const ssrConfig2 = assertSSRConfig(opts);
+  const cacheOrigin = findDirPlugin("ssr");
+  const cacheTarget = path5.join(ssrConfig2.root, ".ssr");
+  cleanDirectory(cacheTarget);
+  copyFilesDirectory(cacheOrigin, cacheTarget, {
+    files: [
+      "entryClient.jsx",
+      "entryRender.jsx",
+      "errorBoundary.jsx",
+      "handler.js",
+      "liveReload.jsx",
+      "pageBrowser.jsx",
+      "pageServer.jsx",
+      "root.jsx",
+      "rootRoutes.jsx",
+      "server.js",
+      "viteScripts.jsx"
+    ]
+  });
+  return [
+    pluginResolve(ssrConfig2),
+    pluginServe(ssrConfig2),
+    pluginBuild(ssrConfig2)
+  ];
+};
+var ssr = ssrConfig;
+var index_default = ssrConfig;
+export {
+  index_default as default,
+  ssr,
+  ssrConfig
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "vite-plugin-ssr-config",
+  "version": "1.0.3",
+  "license": "MIT",
+  "description": "A powerful Vite plugin designed to enable Server-Side Rendering (SSR) for React applications. It provides a comprehensive solution for bundling both SSR and CSR, with built-in support for React Router and React Query for efficient API handling and page rendering.",
+  "keywords": [
+    "vite",
+    "vite plugin",
+    "ssr",
+    "react",
+    "react-router",
+    "react-query",
+    "server",
+    "express"
+  ],
+  "author": "Willyams Yujra",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist/",
+    "ssr/",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yracnet/vite-plugin-ssr-config.git"
+  },
+  "homepage": "https://github.com/yracnet/vite-plugin-ssr-config",
+  "bugs": "https://github.com/yracnet/vite-plugin-ssr-config/issues",
+  "scripts": {
+    "build": "tsup",
+    "prepublish": "yarn build",
+    "prepack": "yarn build"
+  },
+  "dependencies": {
+    "dotenv-local": "^1.0.2",
+    "fs-extra": "^11.2.0"
+  },
+  "peerDependencies": {
+    "vite": "^2 || ^3 || ^4 || ^5 || ^6"
+  },
+  "devDependencies": {
+    "@types/express": "^5.0.0",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^22.10.2",
+    "express": "^4.21.2",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vite": "^4.0.0"
+  }
+}

package/ssr/entryClient.jsx

@@ -0,0 +1,25 @@
+import { PageBrowser } from "@ssr/pageBrowser.jsx";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+startTransition(() => {
+  const hydratedState = JSON.parse(atob(window.__HYDRATED_STATE__));
+  const setHydratedState = () => {
+    throw Error("Changes Not Allowed");
+  };
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <PageBrowser
+        hydratedState={hydratedState}
+        setHydratedState={setHydratedState}
+      />
+    </StrictMode>,
+    {
+      onRecoverableError: (error, { componentStack }) => {
+        const logs = componentStack?.split("\n");
+        console.log("Error:", error, logs);
+      },
+    }
+  );
+});

package/ssr/entryRender.jsx

@@ -0,0 +1,44 @@
+import { PageServer } from "@ssr/pageServer.jsx";
+import { StrictMode } from "react";
+import { renderToPipeableStream } from "react-dom/server";
+
+const renderDefault = async (request, response, next) => {
+  let hydratedState = {};
+  const setHydratedState = (state) => {
+    hydratedState = state;
+  };
+  const { pipe } = renderToPipeableStream(
+    <StrictMode>
+      <PageServer
+        path={request.originalUrl}
+        hydratedState={""} // Access is Not Allowed
+        setHydratedState={setHydratedState}
+      />
+    </StrictMode>,
+    {
+      bootstrapScripts: [],
+      onShellReady: () => {
+        // console.log(request.originalUrl, "onShellReady");
+      },
+      onAllReady: () => {
+        // console.log(request.originalUrl, "onAllReady");
+        response.setHeader("content-type", "text/html");
+        pipe(response);
+        response.write(
+          `<script>window.__HYDRATED_STATE__ = "${btoa(
+            JSON.stringify(hydratedState)
+          )}";</script>`
+        );
+      },
+      onShellError: (error) => {
+        // console.log(request.originalUrl, "onShellError", error);
+      },
+      onError: (error, errorInfo) => {
+        // console.log(request.originalUrl, "onError", error, errorInfo);
+        next(error);
+      },
+    }
+  );
+};
+
+export const render = renderDefault;