vite-plugin-ssr-config 1.0.3 → 1.0.4

package/README.md

@@ -16,18 +16,19 @@ For more detailed information and resources related to `vite-plugin-ssr-config`,
 To add this plugin to your project, run the following commands:
 
 ```bash
-yarn add vite-plugin-ssr-config vite-plugin-pages react-router-dom -D
+yarn add vite-plugin-ssr-config vite-plugin-web-routes -D
+```
+```bash
+yarn add react-query react-router express
 ```
 
 This will install:
 
 - vite-plugin-ssr-config: The plugin for server-side rendering (SSR) with Vite.
-- vite-plugin-pages: Automatically generate route files for your pages.
-- react-router-dom: The routing library for React, used to manage navigation within the app.
+- vite-plugin-web-routes: Automatically generate route files for your pages.
+- react-query: Delegate Hydrated State
+- react-router: The routing library for React, used to manage navigation within the app.
 
-```bash
-yarn add react-router-dom
-```
 
 ## Basic Configuration Example
 
@@ -36,11 +37,19 @@ To use the plugin, you need to integrate it with Vite’s `defineConfig` method
 ```typescript
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import pages from "vite-plugin-pages";
+import web from "vite-plugin-web-routes";
 import ssr from "vite-plugin-ssr-config";
 
 export default defineConfig({
-  plugins: [react(), pages(), ssr()],
+  plugins: [
+    react(),
+    web({
+      moduleFile: '.ssr/routes.tsx'
+    }),
+    ssr({
+      chacheDir: '.ssr'
+    })
+  ],
 });
 ```
 
@@ -49,15 +58,6 @@ export default defineConfig({
 The following default values are provided for each configurable attribute in the plugin:
 
 ```typescript
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import pages from "vite-plugin-pages";
-import ssr from "vite-plugin-ssr-config";
-
-export default defineConfig({
-  plugins: [
-    react(),
-    pages(),
     ssr({
       root: process.cwd(), // Root directory, typically the project root.
 
@@ -92,9 +92,7 @@ export default defineConfig({
       // Config callbacks
       clientBuild: (config: UserConfig) => config, // Client-side Vite configuration.
       serverBuild: (config: UserConfig) => config, // Server-side Vite configuration.
-    }),
-  ],
-});
+    })
 ```
 
 > Important Note: PageServer uses `suspense: true` in all requests to ensure proper SSR rendering. On the other hand, PageBrowser uses `suspense: false` to allow smooth client-side navigation. This setup guarantees correct SSR rendering while preventing flickering and inconsistencies between the server-rendered content and the client-side state during hydration.

package/dist/index.cjs

@@ -61,7 +61,7 @@ var assertSSRConfig = (ssrOpts = {}) => {
     serverOutDir = "dist/",
     serverMinify = false,
     serverBuild = (config) => config,
-    clientOutDir = "dist/client",
+    clientOutDir = "dist/public",
     clientMinify = true,
     clientBuild = (config) => config
   } = ssrOpts;
@@ -140,9 +140,22 @@ var copyFilesDirectory = (origin, target, {
     }
   });
 };
+var readManifest = (dir) => {
+  const candidates = [
+    import_path.default.resolve(dir, ".vite/manifest.json"),
+    import_path.default.resolve(dir, "manifest.json")
+  ];
+  const manifestFile = candidates.find((file) => import_fs_extra.default.existsSync(file));
+  if (!manifestFile) {
+    throw new Error(
+      `manifest.json not found in:
+${candidates.join("\n")}`
+    );
+  }
+  return import_fs_extra.default.readJsonSync(manifestFile);
+};
 
 // src/plugin-build/build.ts
-var import_fs_extra2 = __toESM(require("fs-extra"), 1);
 var import_path2 = __toESM(require("path"), 1);
 var import_vite = require("vite");
 var doBuildServer = async (ssrConfig2, viteConfig) => {
@@ -167,9 +180,7 @@ var doBuildServer = async (ssrConfig2, viteConfig) => {
   const { base = "/" } = viteConfig;
   const ssrServerFile = import_path2.default.resolve(root, server);
   const ssrPublicDir = import_path2.default.relative(serverOutDir, clientOutDir);
-  const manifestFile = import_path2.default.resolve(`${clientOutDir}/manifest.json`);
-  const manifestContent = import_fs_extra2.default.readFileSync(manifestFile, "utf-8");
-  const manifest = JSON.parse(manifestContent);
+  const manifest = readManifest(clientOutDir);
   const manifestOut = manifest[entryClient].file;
   const ssrEntryClientURL = finalUrl(base, manifestOut);
   const ssrFiles = [
@@ -258,7 +269,6 @@ var doBuildClient = async (ssrConfig2, viteConfig) => {
       write: true,
       manifest: true,
       minify: clientMinify,
-      target: "modules",
       emptyOutDir: false,
       outDir: clientOutDir,
       rollupOptions: {
@@ -402,7 +412,7 @@ var pluginResolve = (ssrConfig2) => {
 };
 
 // src/plugin-serve/index.ts
-var import_fs_extra3 = __toESM(require("fs-extra"), 1);
+var import_fs_extra2 = __toESM(require("fs-extra"), 1);
 var import_path4 = __toESM(require("path"), 1);
 var pluginServe = (ssrConfig2) => {
   const { entryClient, root } = ssrConfig2;
@@ -424,10 +434,10 @@ var pluginServe = (ssrConfig2) => {
       return async () => {
         devServer.middlewares.use(async (req, res, next) => {
           const indexHtmlPath = import_path4.default.join(root, req.url, "index.html");
-          if (import_fs_extra3.default.existsSync(indexHtmlPath)) {
+          if (import_fs_extra2.default.existsSync(indexHtmlPath)) {
             return devServer.transformIndexHtml(
               req.url,
-              import_fs_extra3.default.readFileSync(indexHtmlPath, "utf-8")
+              import_fs_extra2.default.readFileSync(indexHtmlPath, "utf-8")
             ).then((html) => {
               res.setHeader("Content-Type", "text/html");
               res.setHeader("Pragma", "no-cache");

package/dist/index.js

@@ -25,7 +25,7 @@ var assertSSRConfig = (ssrOpts = {}) => {
     serverOutDir = "dist/",
     serverMinify = false,
     serverBuild = (config) => config,
-    clientOutDir = "dist/client",
+    clientOutDir = "dist/public",
     clientMinify = true,
     clientBuild = (config) => config
   } = ssrOpts;
@@ -103,9 +103,22 @@ var copyFilesDirectory = (origin, target, {
     }
   });
 };
+var readManifest = (dir) => {
+  const candidates = [
+    path.resolve(dir, ".vite/manifest.json"),
+    path.resolve(dir, "manifest.json")
+  ];
+  const manifestFile = candidates.find((file) => fs.existsSync(file));
+  if (!manifestFile) {
+    throw new Error(
+      `manifest.json not found in:
+${candidates.join("\n")}`
+    );
+  }
+  return fs.readJsonSync(manifestFile);
+};
 
 // src/plugin-build/build.ts
-import fs2 from "fs-extra";
 import path2 from "path";
 import { build, mergeConfig } from "vite";
 var doBuildServer = async (ssrConfig2, viteConfig) => {
@@ -130,9 +143,7 @@ var doBuildServer = async (ssrConfig2, viteConfig) => {
   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 manifest = readManifest(clientOutDir);
   const manifestOut = manifest[entryClient].file;
   const ssrEntryClientURL = finalUrl(base, manifestOut);
   const ssrFiles = [
@@ -221,7 +232,6 @@ var doBuildClient = async (ssrConfig2, viteConfig) => {
       write: true,
       manifest: true,
       minify: clientMinify,
-      target: "modules",
       emptyOutDir: false,
       outDir: clientOutDir,
       rollupOptions: {
@@ -365,7 +375,7 @@ var pluginResolve = (ssrConfig2) => {
 };
 
 // src/plugin-serve/index.ts
-import fs3 from "fs-extra";
+import fs2 from "fs-extra";
 import path4 from "path";
 var pluginServe = (ssrConfig2) => {
   const { entryClient, root } = ssrConfig2;
@@ -387,10 +397,10 @@ var pluginServe = (ssrConfig2) => {
       return async () => {
         devServer.middlewares.use(async (req, res, next) => {
           const indexHtmlPath = path4.join(root, req.url, "index.html");
-          if (fs3.existsSync(indexHtmlPath)) {
+          if (fs2.existsSync(indexHtmlPath)) {
             return devServer.transformIndexHtml(
               req.url,
-              fs3.readFileSync(indexHtmlPath, "utf-8")
+              fs2.readFileSync(indexHtmlPath, "utf-8")
             ).then((html) => {
               res.setHeader("Content-Type", "text/html");
               res.setHeader("Pragma", "no-cache");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-ssr-config",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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": [
@@ -40,10 +40,14 @@
   },
   "dependencies": {
     "dotenv-local": "^1.0.2",
-    "fs-extra": "^11.2.0"
+    "fs-extra": "^11.2.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-router": "^7.17.0",
+    "react-router-dom": "^7.17.0"
   },
   "peerDependencies": {
-    "vite": "^2 || ^3 || ^4 || ^5 || ^6"
+    "vite": ">=4.0.0"
   },
   "devDependencies": {
     "@types/express": "^5.0.0",

package/ssr/entryClient.jsx

@@ -1,25 +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);
-      },
-    }
-  );
-});
+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

@@ -1,18 +1,28 @@
 import { PageServer } from "@ssr/pageServer.jsx";
 import { StrictMode } from "react";
+import { Transform } from "stream";
 import { renderToPipeableStream } from "react-dom/server";
 
-const renderDefault = async (request, response, next) => {
-  let hydratedState = {};
-  const setHydratedState = (state) => {
-    hydratedState = state;
+const createRequestContext = () => {
+  return {
+    state: {},
+    setHydratedState(partial) {
+      this.state = {
+        ...this.state,
+        ...partial,
+      };
+    },
   };
+};
+
+const renderDefault = async (request, response, next) => {
+  const context = createRequestContext();
   const { pipe } = renderToPipeableStream(
     <StrictMode>
       <PageServer
         path={request.originalUrl}
         hydratedState={""} // Access is Not Allowed
-        setHydratedState={setHydratedState}
+        setHydratedState={context.setHydratedState.bind(context)}
       />
     </StrictMode>,
     {
@@ -22,13 +32,30 @@ const renderDefault = async (request, response, next) => {
       },
       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>`
-        );
+        let injected = false;
+        const transform = new Transform({
+          transform(chunk, encoding, callback) {
+            if (!injected) {
+              const stateScript = `<script>window.__HYDRATED_STATE__ = "${btoa(JSON.stringify(context.state))}";</script>`;
+              const str = chunk.toString();
+              const idx = str.lastIndexOf("</head>");
+              if (idx !== -1) {
+                injected = true;
+                const out = str.slice(0, idx) + stateScript + str.slice(idx);
+                callback(null, out);
+                return;
+              }
+            }
+            callback(null, chunk);
+          },
+        });
+        try {
+          response.setHeader("content-type", "text/html");
+        } catch (error) {
+          console.error("Set-Header Context-Type text/html Error:", error);
+        }
+        transform.pipe(response);
+        pipe(transform);
       },
       onShellError: (error) => {
         // console.log(request.originalUrl, "onShellError", error);
@@ -37,7 +64,7 @@ const renderDefault = async (request, response, next) => {
         // console.log(request.originalUrl, "onError", error, errorInfo);
         next(error);
       },
-    }
+    },
   );
 };
 

package/ssr/pageBrowser.jsx

@@ -2,7 +2,7 @@ import { ErrorBoundary } from "@ssr/errorBoundary.jsx";
 import { RootRoutes } from "@ssr/rootRoutes.jsx";
 import { StrictMode, Suspense } from "react";
 import { QueryClient, QueryClientProvider, hydrate } from "react-query";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from "react-router";
 
 const queryClient = new QueryClient({
   defaultOptions: {

package/ssr/pageServer.jsx

@@ -2,7 +2,7 @@ import { ErrorBoundary } from "@ssr/errorBoundary.jsx";
 import { RootRoutes } from "@ssr/rootRoutes.jsx";
 import { StrictMode, Suspense } from "react";
 import { dehydrate, QueryClient, QueryClientProvider } from "react-query";
-import { StaticRouter } from "react-router-dom/server";
+import { StaticRouter } from "react-router";
 
 export const PageServer = ({ path, hydratedState, setHydratedState }) => {
   const queryServer = new QueryClient({

package/ssr/root.jsx

@@ -1,6 +1,6 @@
 import { LiveReload } from "@ssr/liveReload.jsx";
 import { ViteScripts } from "@ssr/viteScripts.jsx";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 
 export const RootDocument = () => {
   return (

package/ssr/rootRoutes.jsx

@@ -1,7 +1,7 @@
 import { RootDocument } from "@ssr/root.jsx";
 import React from "react";
-import { useRoutes } from "react-router-dom";
-import routes from "~react-pages";
+import { useRoutes } from "react-router";
+import routes from "./routes";
 
 export const RootRoutes = (props) => {
   const newRoutes = [