chore: port vercel/app-playground (#3)

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: ci
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+concurrency:
+  group: ci-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  vercel-app-playground:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./vercel-app-playground
+    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 exec playwright install chromium
+      - run: pnpm test-e2e
+      - run: pnpm build
+      - run: pnpm test-e2e-preview

vercel-app-playground/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.vercel
+test-results

vercel-app-playground/.prettierignore

@@ -0,0 +1,4 @@
+pnpm-lock.yaml
+dist
+.vercel
+test-results

vercel-app-playground/README.md

@@ -0,0 +1,15 @@
+Porting https://github.com/vercel/app-playground to Vite ([`@hiogawa/react-server`](https://github.com/hi-ogawa/vite-plugins/tree/main/packages/react-server))
+
+https://rsc-on-vite-vercel-app-playground.vercel.app
+
+```sh
+pnpm dev
+
+# local preview
+pnpm build
+pnpm preview
+
+# deploy to vercel edge
+pnpm vc-build
+pnpm vc-release
+```

vercel-app-playground/e2e/basic.test.ts

@@ -0,0 +1,28 @@
+import { Page, expect, test } from '@playwright/test';
+import { testNoJs, waitForHydration } from './helper';
+
+test('layouts @js', async ({ page }) => {
+  await page.goto('/');
+  await waitForHydration(page);
+  await testLayouts(page, { js: true });
+});
+
+testNoJs('layouts @nojs', async ({ page }) => {
+  await page.goto('/');
+  await testLayouts(page, { js: false });
+});
+
+async function testLayouts(page: Page, options: { js: boolean }) {
+  await page
+    .getByRole('link', { name: 'Nested Layouts Create UI that' })
+    .click();
+  await page.waitForURL('/layouts');
+
+  await page.getByRole('link', { name: 'Electronics' }).click();
+  await page.getByRole('heading', { name: 'All Electronics' }).click();
+  await page.waitForURL('/layouts/electronics');
+
+  await page.getByRole('link', { name: 'Phones' }).click();
+  await page.getByRole('heading', { name: 'Phones' }).click();
+  await page.waitForURL('/layouts/electronics/phones');
+}

vercel-app-playground/e2e/helper.ts

@@ -0,0 +1,12 @@
+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.locator('#hydrated')).toHaveAttribute(
+    'data-hydrated',
+    'true',
+  );
+}

vercel-app-playground/misc/vercel-edge/.vc-config.json

@@ -0,0 +1,4 @@
+{
+  "runtime": "edge",
+  "entrypoint": "index.js"
+}

vercel-app-playground/misc/vercel-edge/README.md

@@ -0,0 +1,9 @@
+# vercel-edge
+
+build script for `--prebuilt` deploy
+
+```sh
+# initial project setup
+vercel projects add rsc-on-vite-vercel-app-playground
+vercel link -p rsc-on-vite-vercel-app-playground
+```

vercel-app-playground/misc/vercel-edge/build.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+set -eu -o pipefail
+
+# https://vercel.com/docs/build-output-api/v3/primitives#edge-functions
+
+# .vercel/
+#   project.json
+#   output/
+#     config.json
+#     static/
+#       assets/            = dist/client/assets
+#     functions/
+#       index.func/
+#         .vc-config.json
+#         index.js         = dist/server/index.js
+
+this_dir="$(dirname "${BASH_SOURCE[0]}")"
+
+# clean
+rm -rf .vercel/output
+mkdir -p .vercel/output
+
+# config.json
+cp "$this_dir/config.json" .vercel/output/config.json
+
+# static
+mkdir -p .vercel/output/static
+cp -r dist/client/. .vercel/output/static
+rm -rf .vercel/output/static/.vite
+
+# functions
+mkdir -p .vercel/output/functions/index.func
+cp "$this_dir/.vc-config.json" .vercel/output/functions/index.func/.vc-config.json
+npx esbuild dist/server/index.js \
+  --outfile=.vercel/output/functions/index.func/index.js \
+  --metafile=dist/server/esbuild-metafile.json \
+  --define:process.env.NODE_ENV='"production"' \
+  --log-override:ignored-bare-import=silent \
+  --bundle \
+  --minify \
+  --format=esm \
+  --platform=browser

vercel-app-playground/misc/vercel-edge/config.json

@@ -0,0 +1,18 @@
+{
+  "version": 3,
+  "routes": [
+    {
+      "src": "^/assets/(.*)$",
+      "headers": {
+        "cache-control": "public, immutable, max-age=31536000"
+      }
+    },
+    {
+      "handle": "filesystem"
+    },
+    {
+      "src": ".*",
+      "dest": "/"
+    }
+  ]
+}

vercel-app-playground/package.json

@@ -0,0 +1,56 @@
+{
+  "private": true,
+  "type": "module",
+  "imports": {
+    "#/*": "./src/*"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "vc-build": "SSR_ENTRY=/src/adapters/vercel-edge vite build && bash misc/vercel-edge/build.sh",
+    "vc-release": "vercel deploy --prebuilt --prod .",
+    "test-e2e": "playwright test",
+    "test-e2e-preview": "E2E_PREVIEW=1 playwright test",
+    "tsc": "tsc -b",
+    "tsc-dev": "tsc -b --watch --preserveWatchOutput",
+    "lint": "prettier --cache --write --ignore-unknown .",
+    "lint-check": "prettier --cache --check --ignore-unknown ."
+  },
+  "dependencies": {
+    "@heroicons/react": "2.1.3",
+    "@hiogawa/react-server": "latest",
+    "@hiogawa/utils-node": "^0.0.1",
+    "clsx": "2.1.1",
+    "date-fns": "3.6.0",
+    "dinero.js": "2.0.0-alpha.10",
+    "ms": "3.0.0-canary.1",
+    "react": "19.0.0-rc-8f3c0525f9-20240521",
+    "react-dom": "19.0.0-rc-8f3c0525f9-20240521",
+    "react-server-dom-webpack": "19.0.0-rc-8f3c0525f9-20240521",
+    "server-only": "0.0.1",
+    "use-count-up": "3.0.1"
+  },
+  "devDependencies": {
+    "@hattip/adapter-node": "^0.0.44",
+    "@hiogawa/vite-plugin-ssr-middleware": "latest",
+    "@playwright/test": "^1.44.1",
+    "@tailwindcss/forms": "0.5.7",
+    "@tailwindcss/typography": "0.5.12",
+    "@types/ms": "0.7.34",
+    "@types/node": "20.12.7",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
+    "@vercel/git-hooks": "1.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "10.4.19",
+    "esbuild": "^0.21.4",
+    "postcss": "8.4.38",
+    "prettier": "3.2.5",
+    "prettier-plugin-tailwindcss": "0.5.14",
+    "tailwindcss": "3.4.3",
+    "typescript": "5.4.5",
+    "vite": "latest"
+  },
+  "packageManager": "pnpm@9.1.2+sha512.127dc83b9ea10c32be65d22a8efb4a65fb952e8fefbdfded39bdc3c97efc32d31b48b00420df2c1187ace28c921c902f0cb5a134a4d032b8b5295cbfa2c681e2"
+}

vercel-app-playground/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',
+});