fix: make NestJS examples work again

ci/ci.test.ts

@@ -11,7 +11,7 @@ import { kill } from "node:process";
 const TEST_HOST = "http://localhost:3000";
 
 const browser = await puppeteer.launch({
-	// headless: false,
+	headless: "new",
 	defaultViewport: { width: 1200, height: 800 },
 });
 

examples/fastify-vite-plugin-ssr/renderer/_default.page.client.tsx

@@ -1,17 +1,17 @@
-import ReactDOM from "react-dom";
 import React from "react";
 import { PageWrapper } from "./PageWrapper";
 import type { PageContext } from "./types";
-import type { PageContextBuiltInClient } from "vite-plugin-ssr/types";
+import { PageContextBuiltInClientWithClientRouting } from "vite-plugin-ssr/types";
+import { hydrateRoot } from "react-dom/client";
 
 export async function render(
-	pageContext: PageContextBuiltInClient & PageContext,
+	pageContext: PageContextBuiltInClientWithClientRouting & PageContext,
 ) {
 	const { Page, pageProps } = pageContext;
-	ReactDOM.hydrate(
+	hydrateRoot(
+		document.getElementById("page-view")!,
 		<PageWrapper pageContext={pageContext}>
 			<Page {...pageProps} />
 		</PageWrapper>,
-		document.getElementById("page-view"),
 	);
 }

examples/nestjs-vite-plugin-ssr/package.json

@@ -18,7 +18,7 @@
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
     "cross-env": "^7.0.3",
-    "rollup-plugin-swc3": "^0.9.1",
+    "rollup-plugin-swc3": "^0.8.2",
     "typescript": "^5.1.6",
     "vavite": "1.8.3",
     "vite": "^4.4.4",

examples/nestjs-vite-plugin-ssr/renderer/_default.page.client.tsx

@@ -1,28 +1,16 @@
-import { Root, hydrateRoot, createRoot } from "react-dom/client";
-import type { PageContextBuiltInClient } from "vite-plugin-ssr/client/router";
-import type { PageContext } from "./types";
 import { PageWrapper } from "./PageWrapper";
+import type { PageContext } from "./types";
+import { PageContextBuiltInClientWithClientRouting } from "vite-plugin-ssr/types";
+import { hydrateRoot } from "react-dom/client";
 
-export { render };
-
-export const clientRouting = true;
-let root: Root | null = null;
-
-async function render(pageContext: PageContextBuiltInClient & PageContext) {
+export async function render(
+	pageContext: PageContextBuiltInClientWithClientRouting & PageContext,
+) {
 	const { Page, pageProps } = pageContext;
-	const page = (
+	hydrateRoot(
+		document.getElementById("page-view")!,
 		<PageWrapper pageContext={pageContext}>
 			<Page {...pageProps} />
-		</PageWrapper>
+		</PageWrapper>,
 	);
-	const container = document.getElementById("page-view")!;
-	if (container.innerHTML === "" || !pageContext.isHydration) {
-		if (!root) {
-			root = createRoot(container);
-		}
-		root.render(page);
-		// SSR
-	} else {
-		root = hydrateRoot(container, page);
-	}
 }

examples/nestjs-vite-plugin-ssr/renderer/_default.page.server.tsx

@@ -1,54 +1,48 @@
-import { renderToPipeableStream } from "react-dom/server";
-// @ts-expect-error - no types
-import reactStreaming from "react-streaming/server";
-import { escapeInject } from "vite-plugin-ssr/server";
-import type { PageContextBuiltIn } from "vite-plugin-ssr";
-import type { PageContext } from "./types";
-
-import logoUrl from "./logo.svg";
+import ReactDOMServer from "react-dom/server";
 import { PageWrapper } from "./PageWrapper";
+import { escapeInject, dangerouslySkipEscape } from "vite-plugin-ssr/server";
+import logoUrl from "./logo.svg";
+import type { PageContext } from "./types";
+import type { PageContextBuiltIn } from "vite-plugin-ssr/types";
 
 export { render };
 
 // See https://vite-plugin-ssr.com/data-fetching
-export const passToClient = ["pageProps"];
+export const passToClient = ["pageProps", "urlPathname"];
 
 async function render(pageContext: PageContextBuiltIn & PageContext) {
+	const { Page, pageProps } = pageContext;
+	const pageHtml = ReactDOMServer.renderToString(
+		<PageWrapper pageContext={pageContext}>
+			<Page {...pageProps} />
+		</PageWrapper>,
+	);
+
+	// See https://vite-plugin-ssr.com/html-head
 	const { documentProps } = pageContext;
-	const title = (documentProps && documentProps.title) || "App";
-	let stream;
+	const title = (documentProps && documentProps.title) || "Vite SSR app";
+	const desc =
+		(documentProps && documentProps.description) ||
+		"App using Vite + vite-plugin-ssr";
 
-	if (pageContext.Page) {
-		const { Page, pageProps } = pageContext;
-		stream = await reactStreaming.renderToStream(
-			<PageWrapper pageContext={pageContext}>
-				<Page {...pageProps} />
-			</PageWrapper>,
-			{
-				disable: false,
-				webStream: false,
-				renderToPipeableStream,
-			},
-		);
-	} else {
-		stream = "";
-	}
-	// See https://vite-plugin-ssr.com/head
-	return {
-		documentHtml: escapeInject`<!DOCTYPE html>
+	const documentHtml = escapeInject`<!DOCTYPE html>
     <html lang="en">
       <head>
-        <meta name="color-scheme" content="dark light" />
-        <meta name="description" content="App" />
         <meta charset="UTF-8" />
         <link rel="icon" href="${logoUrl}" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="${desc}" />
         <title>${title}</title>
       </head>
-      <body style="height: 100vh;">
-        <div id="page-view" style="height: 100%; overflow: hidden;">${stream}</div>
+      <body>
+        <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
       </body>
-    </html>`,
-		pageContext: {},
+    </html>`;
+
+	return {
+		documentHtml,
+		pageContext: {
+			// We can add some `pageContext` here, which is useful if we want to do page redirection https://vite-plugin-ssr.com/page-redirection
+		},
 	};
 }

examples/nestjs/package.json

@@ -14,7 +14,7 @@
     "@swc/core": "^1.3.69",
     "@types/express": "^4.17.17",
     "@types/node": "^20.4.2",
-    "rollup-plugin-swc3": "^0.9.1",
+    "rollup-plugin-swc3": "^0.8.2",
     "typescript": "^5.1.6",
     "vavite": "1.8.3",
     "vite": "^4.4.4"

examples/vite-plugin-ssr/renderer/_default.page.client.tsx

@@ -1,17 +1,17 @@
-import ReactDOM from "react-dom";
 import React from "react";
 import { PageWrapper } from "./PageWrapper";
 import type { PageContext } from "./types";
-import type { PageContextBuiltInClient } from "vite-plugin-ssr/types";
+import { PageContextBuiltInClientWithClientRouting } from "vite-plugin-ssr/types";
+import { hydrateRoot } from "react-dom/client";
 
 export async function render(
-	pageContext: PageContextBuiltInClient & PageContext,
+	pageContext: PageContextBuiltInClientWithClientRouting & PageContext,
 ) {
 	const { Page, pageProps } = pageContext;
-	ReactDOM.hydrate(
+	hydrateRoot(
+		document.getElementById("page-view")!,
 		<PageWrapper pageContext={pageContext}>
 			<Page {...pageProps} />
 		</PageWrapper>,
-		document.getElementById("page-view"),
 	);
 }

packages/connect/package.json

@@ -4,17 +4,17 @@
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./entry-standalone": {
-      "import": "./dist/entry-standalone.mjs"
+      "import": "./dist/entry-standalone.js"
     },
     "./entry-standalone-bundled-sirv": {
-      "import": "./dist/entry-standalone-bundled-sirv.mjs"
+      "import": "./dist/entry-standalone-bundled-sirv.js"
     },
     "./entry-standalone-imported-sirv": {
-      "import": "./dist/entry-standalone-imported-sirv.mjs"
+      "import": "./dist/entry-standalone-imported-sirv.js"
     }
   },
   "typesVersions": {

packages/connect/src/index.ts

@@ -67,9 +67,9 @@ export default function vaviteConnect(
 							dirname,
 							clientAssetsDir
 								? bundleSirv
-									? "entry-standalone-bundled-sirv.mjs"
-									: "entry-standalone-imported-sirv.mjs"
-								: "entry-standalone.mjs",
+									? "entry-standalone-bundled-sirv.js"
+									: "entry-standalone-imported-sirv.js"
+								: "entry-standalone.js",
 						)
 						.replace(/\\/g, "/");
 				}

packages/expose-vite-dev-server/package.json

@@ -8,15 +8,11 @@
   ],
   "exports": {
     ".": {
-      "import": {
-        "default": "./dist/index.mjs"
-      },
-      "require": {
-        "default": "./dist/index.js"
-      }
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./vite-dev-server": {
-      "import": "./dist/vite-dev-server.mjs"
+      "import": "./dist/vite-dev-server.js"
     }
   },
   "typesVersions": {

packages/reloader/package.json

@@ -8,12 +8,12 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./http-dev-server": {
-      "import": "./dist/http-dev-server.mjs",
-      "require": "./dist/http-dev-server.js"
+      "import": "./dist/http-dev-server.js",
+      "require": "./dist/http-dev-server.cjs"
     }
   },
   "typesVersions": {

packages/reloader/src/http-dev-server.ts

@@ -1,4 +1,5 @@
 import type { Server } from "node:http";
 
-declare const httpDevServer: Server | undefined;
+const httpDevServer: Server | undefined = undefined;
+
 export default httpDevServer;

packages/vavite/src/http-dev-server.ts

@@ -1,4 +1,5 @@
 import type { Server } from "node:http";
 
-declare const httpDevServer: Server | undefined;
+const httpDevServer: Server | undefined = undefined;
+
 export default httpDevServer;