chore: setup vue example (#35)

* chore: setup vue example * chore: readme * chore: tweak * chore: no jsx * chore: tsc * test: e2e * chore: fix preview * test: tweak * chore: readme * chore: ssr stream * chore: dev workerd * chore: fix deps * chore: readme
hi-ogawa · Apr 17, 2024 · 8a00769 · 8a00769
1 parent c4d707f
commit 8a00769
Show file tree

Hide file tree

Showing 22 changed files with 491 additions and 7 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -25,3 +25,7 @@ jobs:
       - run: pnpm -C examples/react-server test-e2e
       - run: pnpm -C examples/react-server build
       - run: pnpm -C examples/react-server test-e2e-preview
+      - run: pnpm -C examples/vue-ssr test-e2e
+      - run: pnpm -C examples/vue-ssr build
+      - run: pnpm -C examples/vue-ssr test-e2e-preview
+      - run: pnpm -C examples/vue-ssr test-e2e-workerd
diff --git a/README.md b/README.md
@@ -9,4 +9,5 @@ pnpm -C examples/react-ssr dev
 pnpm -C examples/react-ssr-workerd dev
 pnpm -C examples/react-server dev
 pnpm -C examples/workerd-cli cli
+pnpm -C examples/vue-ssr dev-workerd
 ```
diff --git a/examples/vue-ssr/README.md b/examples/vue-ssr/README.md
@@ -0,0 +1,3 @@
+# vue-ssr
+
+https://vite-environment-examples-vue-ssr.hiro18181.workers.dev/
diff --git a/examples/vue-ssr/e2e/basic.test.ts b/examples/vue-ssr/e2e/basic.test.ts
@@ -0,0 +1,10 @@
+import { test, expect } from "@playwright/test";
+
+test("basic", async ({ page }) => {
+  const res = await page.goto("/");
+  expect(await res?.text()).toContain("hydrated: false");
+  await expect(page.locator("#root")).toContainText("hydrated: true");
+  await expect(page.locator("#root")).toContainText("Count: 0");
+  await page.getByRole("button", { name: "+" }).click();
+  await expect(page.locator("#root")).toContainText("Count: 1");
+});
diff --git a/examples/vue-ssr/index.html b/examples/vue-ssr/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>vue-ssr</title>
+    <meta
+      name="viewport"
+      content="width=device-width, height=device-height, initial-scale=1.0"
+    />
+  </head>
+  <body>
+    <script src="/src/entry-client" type="module"></script>
+  </body>
+</html>
diff --git a/examples/vue-ssr/misc/cloudflare-workers/README.md b/examples/vue-ssr/misc/cloudflare-workers/README.md
@@ -0,0 +1,4 @@
+# cloudflare-workers
+
+copied from
+https://github.com/hi-ogawa/vite-plugins/tree/992368d0c2f23dbb6c2d8c67a7ce0546d610a671/packages/react-server/examples/basic/misc/cloudflare-workers
diff --git a/examples/vue-ssr/misc/cloudflare-workers/build.sh b/examples/vue-ssr/misc/cloudflare-workers/build.sh
@@ -0,0 +1,23 @@
+#!/bin/bash
+set -eu -o pipefail
+
+cd "$(dirname "${BASH_SOURCE[0]}")"
+
+# clean
+rm -rf dist
+mkdir -p dist/server dist/client
+
+# static
+cp -r ../../dist/client/. dist/client
+rm -rf dist/client/index.html
+
+# server (bundle by ourselve instead of relying on wrangler)
+npx esbuild ../../dist/server/index.js \
+  --outfile=dist/server/index.js \
+  --metafile=dist/esbuild-metafile.json \
+  --define:process.env.NODE_ENV='"production"' \
+  --log-override:ignored-bare-import=silent \
+  --bundle \
+  --minify \
+  --format=esm \
+  --platform=browser
diff --git a/examples/vue-ssr/misc/cloudflare-workers/wrangler.toml b/examples/vue-ssr/misc/cloudflare-workers/wrangler.toml
@@ -0,0 +1,6 @@
+name = "vite-environment-examples-vue-ssr"
+
+main = "dist/server/index.js"
+assets = "dist/client"
+workers_dev = true
+compatibility_date = "2024-01-01"
diff --git a/examples/vue-ssr/package.json b/examples/vue-ssr/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@hiogawa/vite-environment-examples-react-ssr",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev-workerd": "vite --config vite.config.workerd.ts",
+    "build": "vite build --all",
+    "preview": "vite preview",
+    "tsc": "vue-tsc -b",
+    "tsc-dev": "vue-tsc -b --watch --preserveWatchOutput",
+    "test-e2e": "playwright test",
+    "test-e2e-preview": "E2E_PREVIEW=1 playwright test",
+    "test-e2e-workerd": "E2E_WORKERD=1 playwright test",
+    "cf-build": "SERVER_ENTRY=/src/adapters/workerd.ts pnpm build && bash misc/cloudflare-workers/build.sh",
+    "cf-preview": "cd misc/cloudflare-workers && wrangler dev",
+    "cf-release": "cd misc/cloudflare-workers && wrangler deploy"
+  },
+  "dependencies": {
+    "vue": "^3.4.23"
+  },
+  "devDependencies": {
+    "@hiogawa/vite-plugin-workerd": "workspace:*",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "vue-tsc": "^2.0.13"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}
diff --git a/examples/vue-ssr/playwright.config.ts b/examples/vue-ssr/playwright.config.ts
@@ -0,0 +1,28 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const port = Number(process.env["E2E_PORT"] || 6174);
+const command = process.env["E2E_PREVIEW"]
+  ? `pnpm preview --port ${port} --strict-port`
+  : process.env["E2E_WORKERD"]
+    ? `pnpm dev-workerd --port ${port} --strict-port`
+    : `pnpm dev --port ${port} --strict-port`;
+
+export default defineConfig({
+  testDir: "e2e",
+  use: {
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: devices["Desktop Chrome"],
+    },
+  ],
+  webServer: {
+    command,
+    port,
+  },
+  forbidOnly: !!process.env["CI"],
+  retries: process.env["CI"] ? 2 : 0,
+  reporter: "list",
+});
diff --git a/examples/vue-ssr/public/favicon.ico b/examples/vue-ssr/public/favicon.ico
diff --git a/examples/vue-ssr/src/adapters/node.tsx b/examples/vue-ssr/src/adapters/node.tsx
@@ -0,0 +1,4 @@
+import { createMiddleware } from "@hattip/adapter-node/native-fetch";
+import { handler } from "../entry-server";
+
+export default createMiddleware((ctx) => handler(ctx.request));
diff --git a/examples/vue-ssr/src/adapters/workerd.ts b/examples/vue-ssr/src/adapters/workerd.ts
@@ -0,0 +1,5 @@
+import { handler } from "../entry-server";
+
+export default {
+  fetch: handler,
+};
diff --git a/examples/vue-ssr/src/entry-client.ts b/examples/vue-ssr/src/entry-client.ts
@@ -0,0 +1,9 @@
+import { createSSRApp } from "vue";
+import Page from "./routes/page.vue";
+
+async function main() {
+  const app = createSSRApp(Page);
+  app.mount("#root");
+}
+
+main();
diff --git a/examples/vue-ssr/src/entry-server.ts b/examples/vue-ssr/src/entry-server.ts
@@ -0,0 +1,25 @@
+import { renderToWebStream } from "vue/server-renderer";
+import { createSSRApp } from "vue";
+import Page from "./routes/page.vue";
+
+export async function handler(_req: Request) {
+  const app = createSSRApp(Page);
+  const ssrStream = renderToWebStream(app);
+  const html = (await import("virtual:index-html")).default;
+  const htmlStream = ssrStream.pipeThrough(injectSsr(html));
+  return new Response(htmlStream, { headers: { "content-type": "text/html" } });
+}
+
+function injectSsr(html: string) {
+  let [pre, post] = html.split("<body>") as [string, string];
+  pre = pre + `<body><div id="root">`;
+  post = `</div>` + post;
+  return new TransformStream<Uint8Array, Uint8Array>({
+    start(controller) {
+      controller.enqueue(new TextEncoder().encode(pre));
+    },
+    flush(controller) {
+      controller.enqueue(new TextEncoder().encode(post));
+    },
+  });
+}
diff --git a/examples/vue-ssr/src/routes/page.vue b/examples/vue-ssr/src/routes/page.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+
+const count = ref(0);
+const hydrated = ref(false);
+
+onMounted(() => {
+  hydrated.value = true;
+});
+</script>
+
+<template>
+  <div>hydrated: {{ hydrated }}</div>
+  <div>Count: {{ count }}</div>
+  <button type="button" @click="count--">-1</button>
+  <button type="button" @click="count++">+1</button>
+</template>
diff --git a/examples/vue-ssr/src/types/virtual.d.ts b/examples/vue-ssr/src/types/virtual.d.ts
@@ -0,0 +1,4 @@
+declare module "virtual:index-html" {
+  const src: string;
+  export default src;
+}
diff --git a/examples/vue-ssr/src/types/vue.d.ts b/examples/vue-ssr/src/types/vue.d.ts
@@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/examples/vue-ssr/tsconfig.json b/examples/vue-ssr/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@tsconfig/strictest/tsconfig.json",
+  "include": ["src", "vite.config.ts", "e2e", "playwright.config.ts"],
+  "compilerOptions": {
+    "exactOptionalPropertyTypes": false,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "types": ["vite/client"]
+  }
+}
diff --git a/examples/vue-ssr/vite.config.ts b/examples/vue-ssr/vite.config.ts
@@ -0,0 +1,41 @@
+import { defineConfig } from "vite";
+import {
+  vitePluginSsrMiddleware,
+  vitePluginVirtualIndexHtml,
+} from "../react-ssr/vite.config";
+import vue from "@vitejs/plugin-vue";
+import { resolve } from "path";
+
+export default defineConfig((_env) => ({
+  clearScreen: false,
+  appType: "custom",
+  plugins: [
+    vue(),
+    vitePluginSsrMiddleware({
+      entry: process.env["SERVER_ENTRY"] || "/src/adapters/node",
+      preview: resolve("./dist/server/index.js"),
+    }),
+    vitePluginVirtualIndexHtml(),
+  ],
+  environments: {
+    client: {
+      build: {
+        minify: false,
+        sourcemap: true,
+        outDir: "dist/client",
+      },
+    },
+    ssr: {
+      build: {
+        outDir: "dist/server",
+      },
+    },
+  },
+
+  builder: {
+    async buildEnvironments(builder, build) {
+      await build(builder.environments["client"]!);
+      await build(builder.environments["ssr"]!);
+    },
+  },
+}));
diff --git a/examples/vue-ssr/vite.config.workerd.ts b/examples/vue-ssr/vite.config.workerd.ts
@@ -0,0 +1,29 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { vitePluginWorkerd } from "@hiogawa/vite-plugin-workerd";
+import { vitePluginVirtualIndexHtml } from "../react-ssr/vite.config";
+import { Log } from "miniflare";
+
+export default defineConfig((_env) => ({
+  clearScreen: false,
+  appType: "custom",
+  plugins: [
+    vue(),
+    vitePluginWorkerd({
+      entry: "/src/adapters/workerd.ts",
+      miniflare: {
+        log: new Log(),
+        compatibilityDate: "2024-01-01",
+      },
+    }),
+    vitePluginVirtualIndexHtml(),
+  ],
+  environments: {
+    workerd: {
+      webCompatible: true,
+      resolve: {
+        noExternal: true,
+      },
+    },
+  },
+}));