feat: support hono/jsx client, add e2e, add an example (#10)

* feat: support hono/jsx client, add e2e, add an example * install playwright on CI
honojs · Jan 18, 2024 · fb1fb82 · fb1fb82
1 parent 27e844f
commit fb1fb82
Show file tree

Hide file tree

Showing 31 changed files with 2,911 additions and 64 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -14,5 +14,6 @@ jobs:
         with:
           node-version: 20.x
       - run: yarn install --frozen-lockfile
+      - run: npx playwright install --with-deps
       - run: yarn build
       - run: yarn test
diff --git a/examples/basic/.gitignore b/examples/basic/.gitignore
@@ -0,0 +1 @@
+.yarn/*
diff --git a/examples/basic/app/client.ts b/examples/basic/app/client.ts
@@ -0,0 +1,3 @@
+import { createClient } from 'honox/client'
+
+createClient()
diff --git a/examples/basic/app/global.d.ts b/examples/basic/app/global.d.ts
@@ -0,0 +1,16 @@
+// eslint-disable-next-line node/no-extraneous-import
+import 'hono'
+
+type Head = {
+  title?: string
+}
+
+declare module 'hono' {
+  interface Env {
+    Variables: {}
+    Bindings: {}
+  }
+  interface ContextRenderer {
+    (content: string | Promise<string>, head?: Head): Response | Promise<Response>
+  }
+}
diff --git a/examples/basic/app/islands/counter.tsx b/examples/basic/app/islands/counter.tsx
@@ -0,0 +1,11 @@
+import { useState } from 'hono/jsx'
+
+export default function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  )
+}
diff --git a/examples/basic/app/routes/_renderer.tsx b/examples/basic/app/routes/_renderer.tsx
@@ -0,0 +1,24 @@
+import { jsxRenderer } from 'hono/jsx-renderer'
+
+export default jsxRenderer(
+  ({ children, title }) => {
+    return (
+      <html lang='en'>
+        <head>
+          <meta charset='UTF-8' />
+          <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+          {title ? <title>{title}</title> : <></>}
+          {import.meta.env.PROD ? (
+            <script type='module' src='/static/client.js'></script>
+          ) : (
+            <script type='module' src='/app/client.ts'></script>
+          )}
+        </head>
+        <body>{children}</body>
+      </html>
+    )
+  },
+  {
+    docType: true,
+  }
+)
diff --git a/examples/basic/app/routes/index.tsx b/examples/basic/app/routes/index.tsx
@@ -0,0 +1,15 @@
+import { createRoute } from 'honox/factory'
+import Counter from '../islands/counter'
+
+export default createRoute((c) => {
+  const name = c.req.query('name') ?? 'Hono'
+  return c.render(
+    <div>
+      <h1>Hello, {name}!</h1>
+      <Counter />
+    </div>,
+    {
+      title: name,
+    }
+  )
+})
diff --git a/examples/basic/app/server.ts b/examples/basic/app/server.ts
@@ -0,0 +1,11 @@
+import { serveStatic } from 'hono/cloudflare-pages'
+import { showRoutes } from 'hono/dev'
+import { createApp } from 'honox/server'
+
+const app = createApp({
+  init: (app) => app.get('/static/*', serveStatic()),
+})
+
+showRoutes(app)
+
+export default app
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "basic",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vite build --mode client",
+    "preview": "wrangler pages dev ./dist",
+    "deploy": "$npm_execpath build && wrangler pages deploy ./dist"
+  },
+  "private": true,
+  "dependencies": {
+    "honox": "^0.0.0"
+  },
+  "devDependencies": {
+    "vite": "^5.0.10",
+    "wrangler": "^3.22.1"
+  },
+  "resolutions": {
+    "honox": "portal:../.."
+  }
+}
diff --git a/examples/basic/tsconfig.json b/examples/basic/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "lib": [
+      "esnext"
+    ],
+    "types": [
+      "vite/client"
+    ],
+    "jsx": "react-jsx",
+    "jsxImportSource": "hono/jsx"
+  },
+}
diff --git a/examples/basic/vite.config.ts b/examples/basic/vite.config.ts
@@ -0,0 +1,33 @@
+import honox from 'honox/vite'
+import { defineConfig } from '../../node_modules/vite'
+
+export default defineConfig(({ mode }) => {
+  if (mode === 'client') {
+    return {
+      build: {
+        rollupOptions: {
+          input: ['./app/client.ts'],
+          output: {
+            entryFileNames: 'static/client.js',
+            chunkFileNames: 'static/assets/[name]-[hash].js',
+            assetFileNames: 'static/assets/[name].[ext]',
+          },
+        },
+        emptyOutDir: false,
+        copyPublicDir: false,
+      },
+    }
+  } else {
+    return {
+      build: {
+        rollupOptions: {
+          output: {
+            entryFileNames: '_worker.js',
+          },
+        },
+        minify: true,
+      },
+      plugins: [honox()],
+    }
+  }
+})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { createClient } from 'honox/client'

		createClient()