feat: vercel template

create-farc/bin.ts

@@ -8,7 +8,13 @@ const pkg = require('../package.json')
 
 const cli = cac('create-farc')
 
-cli.usage('[options]').option('-n, --name [name]', 'Name of project')
+cli
+  .usage('[options]')
+  .option('-n, --name [name]', 'Name of project.')
+  .option(
+    '-t, --template [template]',
+    'Project template to use. Templates: default, vercel',
+  )
 
 cli.help()
 cli.version(pkg.version)

create-farc/create.ts

@@ -1,18 +1,16 @@
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { intro, log, outro, text } from '@clack/prompts'
+import { intro, log, outro, select, text } from '@clack/prompts'
 import { default as fs } from 'fs-extra'
 import { default as pc } from 'picocolors'
 
-export type CreateParameters = { name: string }
+export type CreateParameters = { name: string; template: 'default' | 'vercel' }
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
 export async function create(params: CreateParameters) {
   intro('Welcome to Farc!')
 
-  const templateDir = resolve(__dirname, '../templates/default')
-
   const displayName =
     params.name ||
     ((await text({
@@ -27,6 +25,19 @@ export async function create(params: CreateParameters) {
 
   const destDir = resolve(process.cwd(), name)
 
+  const templateName =
+    params.template ||
+    ((await select({
+      message: 'Choose a template',
+      options: [
+        { value: 'default', label: 'Default' },
+        { value: 'vercel', label: 'Vercel' },
+      ],
+      initialValue: 'default',
+    })) as string)
+
+  const templateDir = resolve(__dirname, `../templates/${templateName}`)
+
   // Copy contents
   fs.copySync(templateDir, destDir)
 

create-farc/templates/default/package.json

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

create-farc/templates/vercel/README.md

@@ -0,0 +1 @@
+This is a [Farc](https://farc.dev) project bootstrapped with `create-farc`.

create-farc/templates/vercel/_gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# production
+/docs/dist
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# typescript
+*.tsbuildinfo
+
+# vercel
+.vercel

create-farc/templates/vercel/api/index.tsx

@@ -0,0 +1,67 @@
+import { Button, Farc, TextInput } from 'farc'
+import { handle } from 'hono/vercel'
+
+const app = new Farc({ basePath: '/api' })
+
+export const config = {
+  // runtime: 'edge', // Uncomment to use Edge Runtime
+}
+
+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 { serve } = await import('bun')
+  const server = serve(app)
+  console.log(`𝑭𝒂𝒓𝒄 ▶︎ http://localhost:${server.port}/dev`)
+}

create-farc/templates/vercel/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "example",
+  "private": true,
+  "scripts": {
+    "dev": "bun run --hot api/index.tsx",
+    "build": "farc vercel-build"
+  },
+  "dependencies": {
+    "bun": "latest",
+    "farc": "main",
+    "hono": "^4"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  }
+}

create-farc/templates/vercel/tsconfig.json

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