test(react-server): test fresh install (#188)

.github/workflows/ci.yml

@@ -20,7 +20,7 @@ jobs:
       - run: pnpm -C packages/demo build-preview
       - run: E2E_COMMAND='pnpm preview' pnpm -C packages/demo test-e2e
 
-  test-rsc:
+  test-react-server:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -34,6 +34,7 @@ jobs:
       - run: pnpm -C packages/react-server/examples/basic test-e2e
       - run: pnpm -C packages/react-server/examples/basic build
       - run: pnpm -C packages/react-server/examples/basic test-e2e-preview
+      - run: pnpm -C packages/react-server test-e2e
 
   test-vite-node-miniflare:
     runs-on: ubuntu-latest

package.json

@@ -30,7 +30,8 @@
     "tsx": "^3.12.7",
     "typescript": "^5.1.6",
     "vite": "^5.1.0",
-    "vitest": "^1.0.4"
+    "vitest": "^1.0.4",
+    "wrangler": "^3.32.0"
   },
   "packageManager": "pnpm@8.15.4+sha256.cea6d0bdf2de3a0549582da3983c70c92ffc577ff4410cbf190817ddc35137c2",
   "volta": {

packages/react-server/README.md

@@ -16,12 +16,12 @@ npx degit@latest hi-ogawa/vite-plugins/packages/react-server/examples/starter my
 cd my-project
 
 # development
-npm i
-npm run dev
+pnpm i
+pnpm dev
 
 # build and preview
-npm run build
-npm run preview
+pnpm build
+pnpm preview
 ```
 
 ## Conventions

packages/react-server/examples/basic/README.md

@@ -1,6 +1,12 @@
 # react-server basic example
 
-This example currently works only when running inside this monorepo.
-
 - https://rsc-experiment-hiroshi.vercel.app
 - https://rsc-experiment.hiro18181.workers.dev
+
+```sh
+npx degit@latest hi-ogawa/vite-plugins/packages/react-server/examples/basic my-project
+cd my-project
+
+pnpm i
+pnpm dev dev
+```

packages/react-server/examples/basic/package.json

@@ -16,7 +16,7 @@
     "cf-release": "cd misc/cloudflare-workers && wrangler deploy"
   },
   "dependencies": {
-    "@hiogawa/react-server": "workspace:*",
+    "@hiogawa/react-server": "latest",
     "@hiogawa/test-dep-use-client": "file:./deps/use-client",
     "react": "18.3.0-canary-6c3b8dbfe-20240226",
     "react-dom": "18.3.0-canary-6c3b8dbfe-20240226",
@@ -27,12 +27,13 @@
     "@hattip/adapter-node": "^0.0.43",
     "@hiogawa/unocss-preset-antd": "2.2.1-pre.7",
     "@hiogawa/utils": "^1.6.3",
-    "@hiogawa/vite-plugin-ssr-middleware": "workspace:*",
+    "@hiogawa/vite-plugin-ssr-middleware": "latest",
+    "@playwright/test": "^1.36.2",
     "@types/react": "18.2.59",
     "@types/react-dom": "18.2.19",
     "@unocss/postcss": "^0.58.5",
+    "@vitejs/plugin-react": "^4.2.0",
     "unocss": "^0.57.7",
-    "vite": "^5.1.0",
-    "wrangler": "^3.32.0"
+    "vite": "^5.1.0"
   }
 }

packages/react-server/examples/basic/src/routes/test/other/client.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { Link } from "@hiogawa/react-server/client";
+
+export function LinkInClientComponent() {
+  return (
+    <div>
+      <Link className="antd-link" href="/">
+        LinkInClientComponent
+      </Link>
+    </div>
+  );
+}

packages/react-server/examples/basic/src/routes/test/other/page.tsx

@@ -1,3 +1,12 @@
+import { LinkInClientComponent } from "./client";
+
 export default function Page() {
-  return <div>Other Page</div>;
+  return (
+    <div className="flex flex-col gap-2">
+      <h4 className="font-bold">Other Page</h4>
+      <div>
+        <LinkInClientComponent />
+      </div>
+    </div>
+  );
 }

packages/react-server/examples/basic/tsconfig.json

@@ -1,7 +1,16 @@
 {
-  "extends": "../../../../tsconfig.base.json",
-  "include": ["src", "vite.config.ts", "e2e"],
+  "include": ["src", "vite.config.ts"],
   "compilerOptions": {
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
     "types": ["vite/client", "react/experimental"],
     "jsx": "react-jsx"
   }

packages/react-server/examples/basic/vite.config.ts

@@ -24,7 +24,7 @@ export default defineConfig({
   ssr: {
     // needs to inline react-wrap-balancer since its default export
     // is not recognized by NodeJS. See:
-    //   node -e 'import("react-wrap-balancer").then(console.log)
+    //   node -e 'import("react-wrap-balancer").then(console.log)'
     //   https://publint.dev/react-wrap-balancer@1.1.0
     noExternal: ["react-wrap-balancer"],
   },

packages/react-server/examples/starter/README.md

@@ -1,23 +1,23 @@
 # react-server starter example
 
-https://react-server-starter.hiro18181.workers.dev/
+- https://react-server-starter.hiro18181.workers.dev/
 
 ```sh
 # download template
 npx degit@latest hi-ogawa/vite-plugins/packages/react-server/examples/starter my-project
 cd my-project
 
 # development
-npm i
-npm run dev
+pnpm i
+pnpm dev
 
 # build and preview
-npm run build
-npm run preview
+pnpm build
+pnpm preview
 
 # deploy cloudflare workers
 npm i -D wrangler
-npm run cf-build
-npm run cf-preview
-npm run cf-release
+pnpm cf-build
+pnpm cf-preview
+pnpm cf-release
 ```

packages/react-server/examples/starter/tsconfig.json

@@ -2,6 +2,8 @@
   "include": ["src", "vite.config.ts"],
   "compilerOptions": {
     "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "skipLibCheck": true,
     "verbatimModuleSyntax": true,
     "noEmit": true,

packages/react-server/misc/test.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+set -eu -o pipefail
+
+# run examples/basic e2e on fresh installation
+#   bash misc/test.sh
+
+test_dir="/tmp/react-server-test"
+lib_dir="$PWD"
+
+rm -rf "$test_dir"
+cp -r examples/basic "$test_dir"
+
+cd "$test_dir"
+rm -rf dist node_modules
+
+pnpm i "@hiogawa/react-server@file:$lib_dir"
+
+if test "${CI:-}" = "true"; then
+  npx playwright install chromium
+fi
+
+pnpm test-e2e
+pnpm build
+pnpm test-e2e-preview

packages/react-server/package.json

@@ -49,6 +49,7 @@
     "build": "tsup",
     "prepack": "tsup --clean",
     "test": "vitest",
+    "test-e2e": "bash misc/test.sh",
     "release": "pnpm publish --no-git-checks --access public"
   },
   "dependencies": {