chore(fullstack): add ssg example (#1184)

hi-ogawa · web-flow · commit e910e36447d5 · 2025-10-03T18:57:04.000+09:00
~e2e is failing. It looks like `srvx` (preview server) isn't killed properly between tests.~ Fixed by using `tree-kill` https://github.com/pkrumins/node-tree-kill
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "react-dom": "^19.1.0",
     "react-server-dom-webpack": "^19.1.0",
     "tinyexec": "^1.0.1",
+    "tree-kill": "^1.2.2",
     "tsdown": "^0.12.9",
     "typescript": "^5.8.3",
     "vite": "^7.1.5",
diff --git a/packages/fullstack/README.md b/packages/fullstack/README.md
@@ -4,7 +4,7 @@
 
 This is a proposal to introduce a new API to allow non-client environment to access assets information commonly required for SSR.
 
-Currently, it is prototyped in my package `@hiogawa/vite-plugin-fullstack` and it provides `import.meta.vite.assets` function with a following signature:
+Currently, it is prototyped in my package `@hiogawa/vite-plugin-fullstack`, which provides `import.meta.vite.assets` function with a following signature:
 
 ```ts
 function assets({
@@ -134,7 +134,7 @@ See [./examples](./examples) for concrete usages.
 | --- | --- |
 | [Basic](./examples/basic/) | [stackblitz](https://stackblitz.com/github/hi-ogawa/vite-plugins/tree/main/packages/fullstack/examples/basic) |
 | [React Router](./examples/react-router/) | [stackblitz](https://stackblitz.com/github/hi-ogawa/vite-plugins/tree/main/packages/fullstack/examples/react-router) |
-| [Vue Router](./examples/vue-router/) | [stackblitz](https://stackblitz.com/github/hi-ogawa/vite-plugins/tree/main/packages/fullstack/examples/vue-router) |
+| [Vue Router / SSG](./examples/vue-router/) | [stackblitz](https://stackblitz.com/github/hi-ogawa/vite-plugins/tree/main/packages/fullstack/examples/vue-router) |
 | [Nitro](https://github.com/hi-ogawa/nitro-vite-examples/tree/10-02-feat_add_vue-router-ssr_example/examples/vue-router-ssr) | [stackblitz](https://stackblitz.com/github/hi-ogawa/nitro-vite-examples/tree/10-02-feat_add_vue-router-ssr_example/examples/vue-router-ssr) |
 | [Cloudflare](./examples/cloudflare/) | - |
 
diff --git a/packages/fullstack/e2e/fixture.ts b/packages/fullstack/e2e/fixture.ts
@@ -1,10 +1,11 @@
 import assert from "node:assert";
-import { type SpawnOptions, spawn } from "node:child_process";
+import { type SpawnOptions } from "node:child_process";
 import fs from "node:fs";
 import path from "node:path";
 import { stripVTControlCharacters, styleText } from "node:util";
 import test from "@playwright/test";
 import { x } from "tinyexec";
+import treeKill from "tree-kill"; // need to kill srvx's worker process
 
 function runCli(options: { command: string; label?: string } & SpawnOptions) {
   const [name, ...args] = options.command.split(" ");
@@ -43,11 +44,7 @@ function runCli(options: { command: string; label?: string } & SpawnOptions) {
   }
 
   function kill() {
-    if (process.platform === "win32") {
-      spawn("taskkill", ["/pid", String(child.pid), "/t", "/f"]);
-    } else {
-      child.kill();
-    }
+    treeKill(child.pid!);
   }
 
   return { proc: child, done, findPort, kill };
diff --git a/packages/fullstack/e2e/helper.ts b/packages/fullstack/e2e/helper.ts
@@ -13,7 +13,11 @@ export async function waitForHydration(page: Page, selector = "body") {
           .evaluate(
             (el) =>
               el &&
-              Object.keys(el).some((key) => key.startsWith("__reactFiber")),
+              Object.keys(el).some(
+                (key) =>
+                  key.startsWith("__reactFiber") ||
+                  key.startsWith("__vue_app__"),
+              ),
           ),
       { timeout: 3000 },
     )
diff --git a/packages/fullstack/e2e/vue-router.test.ts b/packages/fullstack/e2e/vue-router.test.ts
@@ -0,0 +1,59 @@
+import { expect, test } from "@playwright/test";
+import { type Fixture, useFixture } from "./fixture";
+import { expectNoReload, waitForHydration } from "./helper";
+
+test.describe("dev", () => {
+  const f = useFixture({ root: "examples/vue-router", mode: "dev" });
+  defineTest(f);
+});
+
+test.describe("build", () => {
+  const f = useFixture({ root: "examples/vue-router", mode: "build" });
+  defineTest(f);
+});
+
+test.describe("build ssg", () => {
+  const f = useFixture({
+    root: "examples/vue-router",
+    mode: "build",
+    command: "pnpm preview-ssg",
+    buildCommand: "pnpm build-ssg",
+  });
+  defineTest(f);
+});
+
+function defineTest(f: Fixture) {
+  test("basic", async ({ page }) => {
+    await page.goto(f.url());
+    await using _ = await expectNoReload(page);
+
+    const errors: Error[] = [];
+    page.on("pageerror", (error) => {
+      errors.push(error);
+    });
+
+    // hydration
+    await waitForHydration(page, "#root");
+    expect(errors).toEqual([]); // no hydration mismatch
+
+    // client
+    await expect(page.locator(".counter-card")).toContainText("Count: 0");
+    await page.getByRole("button", { name: "Increment" }).click();
+    await expect(page.locator(".counter-card")).toContainText("Count: 1");
+
+    // css
+    // - styles.css
+    await expect(page.getByRole("button", { name: "Increment" })).toHaveCSS(
+      "background-color",
+      "rgb(83, 91, 242)",
+    );
+    // - index.vue (scoped css)
+    await expect(
+      page.getByRole("heading", { name: "Vue Router Custom Framework" }),
+    ).toHaveCSS("color", "rgb(100, 108, 255)");
+
+    expect(errors).toEqual([]);
+  });
+
+  // TODO: hmr
+}
diff --git a/packages/fullstack/examples/basic/package.json b/packages/fullstack/examples/basic/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    "preview": "srvx -s ../client dist/ssr/index.js"
+    "preview": "srvx --prod -s ../client dist/ssr/index.js"
   },
   "devDependencies": {
     "@hiogawa/vite-plugin-fullstack": "latest",
diff --git a/packages/fullstack/examples/island/package.json b/packages/fullstack/examples/island/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    "preview": "srvx -s ../client dist/ssr/index.js"
+    "preview": "srvx --prod -s ../client dist/ssr/index.js"
   },
   "devDependencies": {
     "@hiogawa/vite-plugin-fullstack": "latest",
diff --git a/packages/fullstack/examples/react-router/package.json b/packages/fullstack/examples/react-router/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    "preview": "srvx -s ../client dist/ssr/index.js"
+    "preview": "srvx --prod -s ../client dist/ssr/index.js"
   },
   "devDependencies": {
     "@hiogawa/vite-plugin-fullstack": "latest",
diff --git a/packages/fullstack/examples/vue-router/package.json b/packages/fullstack/examples/vue-router/package.json
@@ -5,12 +5,15 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    "preview": "srvx -s ../client dist/ssr/index.js"
+    "preview": "srvx --prod -s ../client dist/ssr/index.js",
+    "build-ssg": "TEST_SSG=1 vite build",
+    "preview-ssg": "TEST_SSG=1 sirv dist/client"
   },
   "devDependencies": {
     "@hiogawa/vite-plugin-fullstack": "latest",
     "@unhead/vue": "^2.0.17",
     "@vitejs/plugin-vue": "^6.0.1",
+    "sirv-cli": "^3.0.1",
     "srvx": "^0.8.7",
     "vite": "^7.1.5",
     "vite-plugin-devtools-json": "^1.0.0",
diff --git a/packages/fullstack/examples/vue-router/src/routes/index.vue b/packages/fullstack/examples/vue-router/src/routes/index.vue
@@ -31,7 +31,7 @@ function increment() {
 }
 
 .hero h1 {
-  color: #646cff;
+  color: rgb(100, 108, 255);
 }
 
 .counter-card {
diff --git a/packages/fullstack/examples/vue-router/src/styles.css b/packages/fullstack/examples/vue-router/src/styles.css
@@ -29,7 +29,7 @@ h1 {
 }
 
 button {
-  background: #646cff;
+  background: rgb(83, 91, 242);
   color: white;
   border: none;
   padding: 0.5rem 1rem;
diff --git a/packages/fullstack/examples/vue-router/vite.config.ts b/packages/fullstack/examples/vue-router/vite.config.ts
@@ -1,7 +1,11 @@
+import fs from "node:fs";
+import path from "node:path";
+import { Readable } from "node:stream";
+import { pathToFileURL } from "node:url";
 import fullstack from "@hiogawa/vite-plugin-fullstack";
 // import inspect from "vite-plugin-inspect";
 import vue from "@vitejs/plugin-vue";
-import { defineConfig } from "vite";
+import { type Plugin, type ResolvedConfig, defineConfig } from "vite";
 import devtoolsJson from "vite-plugin-devtools-json";
 
 export default defineConfig((_env) => ({
@@ -11,6 +15,10 @@ export default defineConfig((_env) => ({
     vue(),
     devtoolsJson(),
     fullstack(),
+    !!process.env.TEST_SSG &&
+      ssgPlugin({
+        paths: ["/", "/about"],
+      }),
   ],
   environments: {
     client: {
@@ -41,3 +49,58 @@ export default defineConfig((_env) => ({
     },
   },
 }));
+
+type SsgPluginOptions = {
+  paths: string[];
+};
+
+function ssgPlugin(pluginOpts: SsgPluginOptions): Plugin {
+  return {
+    name: "ssg",
+    buildApp: {
+      order: "post",
+      async handler(builder) {
+        await renderStatic(pluginOpts, builder.config);
+      },
+    },
+  };
+}
+
+async function renderStatic(
+  pluginOpts: SsgPluginOptions,
+  config: ResolvedConfig,
+) {
+  console.log("[ssg] started");
+
+  // import server entry
+  const entryPath = path.join(config.environments.ssr.build.outDir, "index.js");
+  const entry: typeof import("./src/framework/entry.server") = await import(
+    pathToFileURL(entryPath).href
+  );
+
+  // render html
+  const baseDir = config.environments.client.build.outDir;
+  for (const staticPatch of pluginOpts.paths) {
+    config.logger.info(" -> " + staticPatch);
+    const response = await entry.default.fetch(
+      new Request(new URL(staticPatch, "http://ssg.local")),
+    );
+    await writeFileStream(
+      path.join(baseDir, normalizeHtmlFilePath(staticPatch)),
+      response.body!,
+    );
+  }
+  console.log("[ssg] finished in (TODO) ms");
+}
+
+async function writeFileStream(filePath: string, stream: ReadableStream) {
+  await fs.promises.mkdir(path.dirname(filePath), { recursive: true });
+  await fs.promises.writeFile(filePath, Readable.fromWeb(stream as any));
+}
+
+function normalizeHtmlFilePath(p: string) {
+  if (p.endsWith("/")) {
+    return p + "index.html";
+  }
+  return p + ".html";
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ function increment() {`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`.hero h1 {`
`34`		`- color: #646cff;`
	`34`	`+ color: rgb(100, 108, 255);`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`.counter-card {`