feat: vercel serverless

.scripts/postbuild.ts

@@ -0,0 +1,16 @@
+import glob from 'fast-glob'
+
+await rewriteHonoJsx()
+
+async function rewriteHonoJsx() {
+  const files = await glob('./src/_lib/**/*.js')
+  for (const file of files) {
+    const content = await Bun.file(file).text()
+    await Bun.write(
+      file,
+      content
+        .replaceAll('hono/jsx/jsx-runtime', 'farc/jsx/jsx-runtime')
+        .replaceAll('hono/jsx/jsx-dev-runtime', 'farc/jsx/jsx-dev-runtime'),
+    )
+  }
+}

.scripts/preconstruct.ts

@@ -85,7 +85,7 @@ for (const packagePath of packagePaths) {
       await fs.mkdir(distDir, { recursive: true })
 
       // Symlink src to dist file
-      await fs.symlink(srcFilePath, distFilePath, 'file')
+      await fs.symlink(srcFilePath, distFilePath, 'file').catch(() => {})
     }
   }
 }

examples/_dev/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "example",
+  "name": "example-dev",
   "private": true,
   "scripts": {
     "dev": "bun run --hot src/index.tsx"

examples/_dev/src/index.tsx

@@ -1,4 +1,5 @@
 import { Button, Farc, TextInput } from 'farc'
+
 import { app as todoApp } from './todos'
 
 const app = new Farc({

examples/_dev/tsconfig.json

@@ -1,7 +1,23 @@
 {
   "compilerOptions": {
-    "strict": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
     "jsx": "react-jsx",
-    "jsxImportSource": "hono/jsx"
-  }
-}
+    "jsxImportSource": "hono/jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}

examples/vercel/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+
+.vercel

examples/vercel/README.md

@@ -0,0 +1,11 @@
+To install dependencies:
+```sh
+bun install
+```
+
+To run:
+```sh
+bun run dev
+```
+
+open http://localhost:3000

examples/vercel/api/index.tsx

@@ -0,0 +1,66 @@
+import { Button, Farc, TextInput } from 'farc'
+import { handle } from 'hono/vercel'
+
+export const config = {
+  runtime: 'edge',
+}
+
+const app = new Farc({ basePath: '/api' })
+
+app.frame('/', (context) => {
+  const { buttonValue, inputText, status } = context
+  const fruit = inputText || buttonValue
+  return {
+    image: (
+      <div
+        style={{
+          alignItems: 'center',
+          background:
+            status === 'response'
+              ? 'linear-gradient(to right, #432889, #17101F)'
+              : 'black',
+          backgroundSize: '100% 100%',
+          display: 'flex',
+          flexDirection: 'column',
+          flexWrap: 'nowrap',
+          height: '100%',
+          justifyContent: 'center',
+          textAlign: 'center',
+          width: '100%',
+        }}
+      >
+        <div
+          style={{
+            color: 'white',
+            fontSize: 60,
+            fontStyle: 'normal',
+            letterSpacing: '-0.025em',
+            lineHeight: 1.4,
+            marginTop: 30,
+            padding: '0 120px',
+            whiteSpace: 'pre-wrap',
+          }}
+        >
+          {status === 'response'
+            ? `Nice choice.${fruit ? ` ${fruit.toUpperCase()}!!` : ''}`
+            : 'Welcome!'}
+        </div>
+      </div>
+    ),
+    intents: [
+      <TextInput placeholder="Enter custom fruit..." />,
+      <Button value="apples">Apples</Button>,
+      <Button value="oranges">Oranges</Button>,
+      <Button value="bananas">Bananas</Button>,
+      status === 'response' && <Button.Reset>Reset</Button.Reset>,
+    ],
+  }
+})
+
+export const GET = handle(app.hono)
+export const POST = handle(app.hono)
+
+if (process.env.NODE_ENV === 'development') {
+  const server = Bun.serve(app)
+  console.log(`𝑭𝒂𝒓𝒄 ▶︎ http://localhost:${server.port}/dev`)
+}

examples/vercel/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "example-vercel-edge",
+  "type": "module",
+  "scripts": {
+    "build": "farc vercel-build",
+    "start": "bun run --hot api/index.tsx",
+    "deploy": "vercel"
+  },
+  "dependencies": {
+    "farc": "workspace:*",
+    "hono": "^4.0.1"
+  },
+  "devDependencies": {
+    "tsx": "^4.7.1",
+    "typescript": "^5.3.3",
+    "vercel": "^32.4.1"
+  }
+}

examples/vercel/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "NodeNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "NodeNext",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "farc/jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["**/*.ts", "**/*.tsx", "**/*.mtsx"]
+}

package.json

@@ -2,7 +2,7 @@
   "workspaces": ["create-farc", "examples/*", "src"],
   "scripts": {
     "dev": "bun run --hot ./examples/_dev/src/index.tsx",
-    "build": "bun run clean && bun run build:farc && bun run build:create-farc",
+    "build": "bun run clean && bun run build:farc && bun run build:create-farc && bun .scripts/postbuild.ts",
     "build:farc": "tsc --project ./tsconfig.build.json",
     "build:create-farc": "rimraf create-farc/_lib && tsc -p create-farc/tsconfig.build.json",
     "changeset": "changeset",
@@ -22,10 +22,11 @@
     "@types/bun": "latest",
     "@types/fs-extra": "^11.0.4",
     "@vitest/coverage-v8": "^1.2.2",
+    "fast-glob": "^3.3.2",
     "hono": "^4",
     "rimraf": "^5.0.5",
     "typed-htmx": "^0.2.1",
-    "typescript": "^5.0.0",
+    "typescript": "^5.3.3",
     "vitest": "^1.2.2"
   }
 }

src/cli/commands/vercel-build.ts

@@ -0,0 +1,52 @@
+import { extname, normalize, resolve } from 'node:path'
+import glob from 'fast-glob'
+import { ensureDirSync, writeJsonSync } from 'fs-extra/esm'
+
+export async function build() {
+  const files = await glob('./api/**/*.{js,jsx,ts,tsx}')
+  for (const file of files) {
+    const fileDir = normalize(file).replace(extname(file), '')
+    const dir = resolve(
+      process.cwd(),
+      `./.vercel/output/functions/${fileDir}.func`,
+    )
+    ensureDirSync(dir)
+    writeJsonSync(`${dir}/package.json`, { type: 'module' })
+  }
+
+  ensureDirSync('./.vercel/output')
+  ensureDirSync('./.vercel/output/static')
+  writeJsonSync('./.vercel/output/config.json', {
+    version: 3,
+    routes: [
+      {
+        handle: 'filesystem',
+      },
+      {
+        src: '^/api(?:/(.*))$',
+        dest: '/api',
+        check: true,
+      },
+      {
+        src: '^/api(/.*)?$',
+        status: 404,
+      },
+      {
+        handle: 'error',
+      },
+      {
+        status: 404,
+        src: '^(?!/api).*$',
+        dest: '/404.html',
+      },
+      {
+        handle: 'miss',
+      },
+      {
+        src: '^/api/(.+)(?:\\.(?:tsx))$',
+        dest: '/api/$1',
+        check: true,
+      },
+    ],
+  })
+}

src/cli/index.ts

@@ -0,0 +1,14 @@
+#!/usr/bin/env node
+import { cac } from 'cac'
+
+import { build as build_vercel } from './commands/vercel-build.js'
+import { version } from './version.js'
+
+export const cli = cac('farc')
+
+cli.command('vercel-build').action(build_vercel)
+
+cli.help()
+cli.version(version)
+
+cli.parse()

src/cli/version.ts

@@ -0,0 +1 @@
+export const version = '0.0.1'

src/components/Button.tsx

@@ -1,4 +1,4 @@
-import { type HtmlEscapedString } from 'hono/utils/html'
+import type { HtmlEscapedString } from 'hono/utils/html'
 
 export type ButtonProps = {
   children: string