hi-ogawa · hi-ogawa · May 8, 2024 · May 6, 2024 · May 6, 2024 · May 6, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,31 @@
+name: ci
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+concurrency:
+  group: ci-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  vue-server:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./vue-server
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: corepack enable
+      - run: pnpm i
+      - run: pnpm lint-check
+      - run: pnpm tsc
+      - run: pnpm test
+      - run: pnpm exec playwright install chromium
+      - run: pnpm test-e2e
+      - run: pnpm build
+      - run: pnpm test-e2e-preview
diff --git a/vue-server/.gitignore b/vue-server/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+dist
+test-results
+.vite-node
+.wrangler
diff --git a/vue-server/README.md b/vue-server/README.md
@@ -0,0 +1,10 @@
+# vue-server
+
+https://vue-server-demo.hiro18181.workers.dev/
+
+## references
+
+- https://github.com/hi-ogawa/js-utils/pull/227
+- https://github.com/nuxt/nuxt/issues/19772#issuecomment-1519023944
+- https://github.com/vuejs/core/blob/c0c9432b64091fa15fd8619cfb06828735356a42/packages/runtime-core/src/vnode.ts#L428
+- https://vuejs.org/guide/extras/render-function.html
diff --git a/vue-server/biome.json b/vue-server/biome.json
@@ -0,0 +1,7 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.7.2/schema.json",
+	"files": {
+		"ignore": ["dist", ".wrangler", "test-results"]
+	},
+	"linter": { "enabled": false }
+}
diff --git a/vue-server/e2e/basic.test.ts b/vue-server/e2e/basic.test.ts
@@ -0,0 +1,49 @@
+import { type Page, expect, test } from "@playwright/test";
+import { testNoJs, waitForHydration } from "./helper";
+
+test("basic @js", async ({ page }) => {
+	await page.goto("/");
+	await waitForHydration(page);
+	await page.getByRole("heading", { name: "Vue Server Component" }).click();
+	await page.getByText("typeof window = undefined").click();
+	await page.getByText("Count: 0").click();
+	await page.getByRole("button", { name: "+" }).click();
+	await page.getByText("Count: 1").click();
+	await page.getByRole("button", { name: "-" }).click();
+	await page.getByText("Count: 0").click();
+});
+
+testNoJs("basic @nojs", async ({ page }) => {
+	await page.goto("/");
+	await page.getByRole("heading", { name: "Vue Server Component" }).click();
+	await page.getByText("typeof window = undefined").click();
+	await page.getByText("Count: 0").click();
+});
+
+test("navigation @js", async ({ page }) => {
+	await page.goto("/");
+	await waitForHydration(page);
+	await testNavigation(page, { js: true });
+});
+
+testNoJs("navigation @nojs", async ({ page }) => {
+	await page.goto("/");
+	await testNavigation(page, { js: false });
+});
+
+async function testNavigation(page: Page, options: { js: boolean }) {
+	await page.getByPlaceholder("(test)").fill("hello");
+	await page.getByRole("link", { name: "SFC" }).click();
+	await page.waitForURL("/sfc");
+	await page.getByRole("heading", { name: "Server SFC" }).click();
+	await page.getByRole("button", { name: "client counter 0" }).first().click();
+	if (options.js) {
+		await page
+			.getByRole("button", { name: "client counter 1" })
+			.first()
+			.click();
+	}
+	await expect(page.getByPlaceholder("(test)")).toHaveValue(
+		options.js ? "hello" : "",
+	);
+}
diff --git a/vue-server/e2e/helper.ts b/vue-server/e2e/helper.ts
@@ -0,0 +1,9 @@
+import test, { type Page, expect } from "@playwright/test";
+
+export const testNoJs = test.extend({
+	javaScriptEnabled: ({}, use) => use(false),
+});
+
+export async function waitForHydration(page: Page) {
+	await expect(page.getByText("[mounted: 1]")).toBeVisible();
+}
diff --git a/vue-server/index.html b/vue-server/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>vue server demo</title>
+    <meta
+      name="viewport"
+      content="width=device-width, height=device-height, initial-scale=1.0"
+    />
+  </head>
+  <body>
+    <script type="module" src="/src/demo/entry-browser"></script>
+  </body>
+</html>
diff --git a/vue-server/misc/cloudflare-workers/README.md b/vue-server/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/vue-server/misc/cloudflare-workers/build.sh b/vue-server/misc/cloudflare-workers/build.sh
@@ -0,0 +1,25 @@
+#!/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"' \
+  --define:__VUE_OPTIONS_API__='false' \
+  --define:__VUE_PROD_DEVTOOLS__='false' \
+  --define:__VUE_PROD_HYDRATION_MISMATCH_DETAILS__='false' \
+  --log-override:ignored-bare-import=silent \
+  --bundle \
+  --format=esm \
+  --platform=browser
diff --git a/vue-server/misc/cloudflare-workers/wrangler.toml b/vue-server/misc/cloudflare-workers/wrangler.toml
@@ -0,0 +1,7 @@
+name = "vue-server-demo"
+
+main = "dist/server/index.js"
+assets = "dist/client"
+workers_dev = true
+compatibility_date = "2024-01-01"
+compatibility_flags = ["nodejs_compat"]
diff --git a/vue-server/package.json b/vue-server/package.json
@@ -0,0 +1,41 @@
+{
+	"name": "experiments-vue-server",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build && vite build --ssr",
+		"preview": "vite preview",
+		"tsc": "tsc -b",
+		"tsc-dev": "tsc -b --watch --preserveWatchOutput",
+		"test": "vitest",
+		"test-e2e": "playwright test",
+		"test-e2e-preview": "E2E_PREVIEW=1 playwright test",
+		"lint": "biome check --apply .",
+		"lint-check": "biome check .",
+		"cf-build": "SERVER_ENTRY=/src/demo/adapters/cloudflare-workers.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/shared": "^3.4.26",
+		"highlight.js": "^11.9.0",
+		"vue": "^3.4.26"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^1.7.2",
+		"@hattip/adapter-node": "^0.0.45",
+		"@hiogawa/utils": "1.6.4-pre.2",
+		"@hiogawa/vite-plugin-ssr-middleware": "^0.0.3",
+		"@playwright/test": "^1.44.0",
+		"@types/node": "^20.12.10",
+		"@vitejs/plugin-vue": "^5.0.4",
+		"esbuild": "^0.21.0",
+		"happy-dom": "^14.10.1",
+		"typescript": "^5.4.5",
+		"vite": "^5.2.11",
+		"vitest": "^1.6.0",
+		"wrangler": "^3.53.1"
+	},
+	"packageManager": "pnpm@9.0.6+sha512.f6d863130973207cb7a336d6b439a242a26ac8068077df530d6a86069419853dc1ffe64029ec594a9c505a3a410d19643c870aba6776330f5cfddcf10a9c1617"
+}
diff --git a/vue-server/playwright.config.ts b/vue-server/playwright.config.ts
@@ -0,0 +1,32 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const port = Number(process.env.E2E_PORT || 6174);
+const isPreview = Boolean(process.env.E2E_PREVIEW);
+const command = isPreview
+	? `pnpm preview --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"],
+				viewport: null,
+				deviceScaleFactor: undefined,
+			},
+		},
+	],
+	webServer: {
+		command,
+		port,
+	},
+	grepInvert: isPreview ? /@dev/ : /@build/,
+	forbidOnly: !!process.env["CI"],
+	retries: process.env["CI"] ? 2 : 0,
+	reporter: "list",
+});