create-fate 1.0.0-rc.0 → 1.0.0

package/README.md

@@ -6,6 +6,8 @@ Create a new fate app:
 vp create fate my-app
 ```
 
+The generated app is installed and the fate client is generated during creation.
+
 Choose between these templates:
 
 - `void`: Void pages router with Drizzle.

package/bin/create-fate.mjs

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+import { spawnSync } from 'node:child_process';
 import fs from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
@@ -37,6 +38,7 @@ Create a new fate app.
 
 Options:
   --template, -t  Template variant to create
+  --no-setup      Skip dependency installation and fate client generation
   --help, -h      Show this help message
 `);
 };
@@ -49,6 +51,7 @@ const normalizePackageName = (name) =>
     .replaceAll(/^-+|-+$/g, '') || 'my-app';
 
 const parseArgs = (args) => {
+  let setup = true;
   let targetDir;
   let variant;
 
@@ -58,6 +61,11 @@ const parseArgs = (args) => {
       return { help: true };
     }
 
+    if (arg === '--no-setup') {
+      setup = false;
+      continue;
+    }
+
     if (arg === '--template' || arg === '-t' || arg === '--variant') {
       variant = args[++index];
       continue;
@@ -81,7 +89,7 @@ const parseArgs = (args) => {
     throw new Error(`Unexpected argument: ${arg}`);
   }
 
-  return { targetDir, variant };
+  return { setup, targetDir, variant };
 };
 
 const validateTargetDir = (value) => {
@@ -267,6 +275,70 @@ const restoreTemplateFileNames = (dir) => {
   }
 };
 
+const copyExampleEnvFiles = (dir) => {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const entryPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      copyExampleEnvFiles(entryPath);
+      continue;
+    }
+
+    if (!entry.name.endsWith('.env.example')) {
+      continue;
+    }
+
+    const envPath = path.join(dir, entry.name.slice(0, -'.example'.length));
+    if (!fs.existsSync(envPath)) {
+      fs.copyFileSync(entryPath, envPath);
+    }
+  }
+};
+
+const runCommand = (command, args, cwd) => {
+  const result = spawnSync(command, args, {
+    cwd,
+    shell: process.platform === 'win32',
+    stdio: 'inherit',
+  });
+
+  if (result.error) {
+    throw result.error;
+  }
+
+  if (result.status !== 0) {
+    throw new Error(`Command failed: ${[command, ...args].join(' ')}`);
+  }
+};
+
+const setupProject = (targetPath, selectedVariant) => {
+  runCommand('vp', ['install'], targetPath);
+
+  switch (selectedVariant) {
+    case 'prisma':
+      runCommand('vp', ['run', '--filter', '@app/server', 'dev:setup'], targetPath);
+      runCommand('vp', ['run', 'fate:generate'], targetPath);
+      break;
+    case 'void':
+      runCommand('vp', ['run', 'prepare:void'], targetPath);
+      runCommand('vp', ['run', 'fate:generate'], targetPath);
+      break;
+    default:
+      runCommand('vp', ['run', 'fate:generate'], targetPath);
+      break;
+  }
+};
+
+const printReadme = (targetPath) => {
+  const readmePath = path.join(targetPath, 'README.md');
+  if (!fs.existsSync(readmePath)) {
+    return;
+  }
+
+  process.stdout.write(`\nNext steps are in README.md. Follow these instructions:\n\n`);
+  process.stdout.write(fs.readFileSync(readmePath, 'utf8'));
+  process.stdout.write('\n');
+};
+
 const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 
 const resolveTemplateRoot = (template) => {
@@ -310,6 +382,7 @@ const main = async () => {
   fs.mkdirSync(targetPath, { recursive: true });
   fs.cpSync(templateRoot, targetPath, { recursive: true });
   restoreTemplateFileNames(targetPath);
+  copyExampleEnvFiles(targetPath);
   updatePackageJsonFiles(
     targetPath,
     targetPath,
@@ -317,12 +390,18 @@ const main = async () => {
     fateDependencyVersions,
   );
 
+  if (options.setup) {
+    setupProject(targetPath, selectedVariant);
+  }
+
   const message = `Created ${variants[selectedVariant].label} fate app in ${targetDir}`;
   if (interactive) {
     outro(message);
   } else {
     process.stdout.write(`${message}\n`);
   }
+
+  printReadme(targetPath);
 };
 
 try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fate",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0",
   "description": "Create a new fate app.",
   "homepage": "https://github.com/nkzw-tech/fate",
   "license": "MIT",
@@ -22,7 +22,7 @@
   ],
   "type": "module",
   "dependencies": {
-    "@clack/prompts": "^0.11.0"
+    "@clack/prompts": "^1.4.0"
   },
   "engines": {
     "node": ">=24.0.0"

package/templates/fate/drizzle/README.md

@@ -57,10 +57,25 @@ Next to [_fate_](https://fate.technology), it comes with the following technolog
 
 You'll need Node.js 24+ and [Vite+](https://viteplus.dev/guide/).
 
-- Run `vp install`.
-- Copy `server/.env.example` to `server/.env`.
-- Set up a Postgres database locally or run `docker-compose up -d` to start Postgres in a Docker container.
-- Postgres setup:
+Install dependencies:
+
+```bash
+vp install
+```
+
+Review `server/.env`, which is copied from `server/.env.example` when the app is created. The default local values expect:
+
+- Postgres at `postgresql://fate:echo@localhost:5432/fate`.
+- The server at `http://localhost:9000`.
+- The client at `http://localhost:5173`.
+
+Start Postgres with Docker:
+
+```bash
+docker-compose up -d
+```
+
+Alternatively, create the database manually:
 
 ```SQL
 CREATE ROLE fate WITH LOGIN PASSWORD 'echo';
@@ -68,10 +83,30 @@ CREATE DATABASE fate;
 ALTER DATABASE fate OWNER TO fate;
 ```
 
-Then, at the root of the project, run:
+Then set up the schema, seed data, translations, and generated fate client:
+
+```bash
+vp run dev:setup
+```
+
+Start the app:
+
+```bash
+vp run dev
+```
+
+The client runs at `http://localhost:5173` and the server runs at `http://localhost:9000`. tRPC requests go to `/trpc`; fate live updates use the SSE endpoint under `/fate/live`.
+
+## Development
+
+Common commands from the project root:
 
-- `vp run dev:setup` to create the database tables and seed initial data.
-- Run `vp run fate:generate` to regenerate the fate client code.
-- Run `vp test` to run all tests.
-- Run `vp run dev` to run the client and server.
-- Visit `http://localhost:5173` to see the app in action.
+- `vp run dev` starts the client and server together.
+- `vp run dev:client` starts only the client.
+- `vp run dev:server` starts only the server.
+- `vp run dev:setup` pushes the Drizzle schema, seeds the database, runs fbtee setup, and regenerates the fate client.
+- `vp run fate:generate` regenerates `client/.fate/client.generated.ts` after changing server views, roots, or routers.
+- `vp run drizzle` opens Drizzle Kit commands for the server package.
+- `vp check --fix` formats, lints, and type-checks the workspace.
+- `vp test` runs the test suite.
+- `vp run build` builds the client and server.

package/templates/fate/drizzle/_gitignore

@@ -12,6 +12,8 @@ client/source_strings.json
 client/src/translations/
 coverage/
 dist/
+server/.env
+server/.prod.env
 server/dist/
 server/src/prisma/prisma-client/
 tsconfig.tsbuildinfo

package/templates/fate/drizzle/client/pages/layout.tsx

@@ -53,6 +53,16 @@ export default function Layout({ children }: { children: ReactNode }) {
             url: `${env('SERVER_URL')}/trpc`,
           }),
         ],
+        liveUrl: `${env('SERVER_URL')}/fate`,
+        ...(userId
+          ? {
+              fetch: (input: RequestInfo | URL, init?: RequestInit) =>
+                fetch(input, {
+                  ...init,
+                  credentials: 'include',
+                }),
+            }
+          : null),
       }),
     [userId],
   );

package/templates/fate/drizzle/client/src/ui/PostCard.tsx

@@ -11,7 +11,7 @@ import {
   useState,
 } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { useFateClient, useListView, useView, view, ViewRef } from 'react-fate';
+import { useFateClient, useLiveListView, useLiveView, useView, view, ViewRef } from 'react-fate';
 import { Button } from '../ui/Button.tsx';
 import Card from '../ui/Card.tsx';
 import AuthClient from '../user/AuthClient.tsx';
@@ -25,6 +25,9 @@ const CommentConnectionView = {
   items: {
     node: CommentView,
   },
+  live: {
+    append: 'visible',
+  },
 };
 
 export const PostView = view<Post>()({
@@ -123,9 +126,9 @@ const CommentInput = ({
 
 export function PostCard({ detail, post: postRef }: { detail?: boolean; post: ViewRef<'Post'> }) {
   const fate = useFateClient();
-  const post = useView(PostView, postRef);
+  const post = useLiveView(PostView, postRef);
   const author = useView(UserView, post.author);
-  const [comments, loadNext] = useListView(CommentConnectionView, post.comments);
+  const [comments, loadNext] = useLiveListView(CommentConnectionView, post.comments);
 
   const [likeResult, likeAction, likeIsPending] = useActionState(fate.actions.post.like, null);
 

package/templates/fate/drizzle/client/vite.config.ts

@@ -6,7 +6,7 @@ import { reactCompilerPreset } from '@vitejs/plugin-react';
 import { voidReact } from '@void/react/plugin';
 import dotenv from 'dotenv';
 import { fate } from 'react-fate/vite';
-import { defineConfig } from 'vite-plus';
+import { defineConfig, lazyPlugins } from 'vite-plus';
 import { voidPlugin } from 'void';
 
 const root = process.cwd();
@@ -24,12 +24,14 @@ if (!process.env.VITE_SERVER_URL) {
 export default defineConfig({
   build: { outDir: join(root, '../dist/client') },
   plugins: [
-    babel({
-      presets: [fbteePreset, reactCompilerPreset()],
-    }),
-    tailwindcss(),
-    voidPlugin(),
-    voidReact(),
+    ...(lazyPlugins(() => [
+      babel({
+        presets: [fbteePreset, reactCompilerPreset()],
+      }),
+      tailwindcss(),
+      voidPlugin(),
+      voidReact(),
+    ]) ?? []),
     fate({
       module: '@app/server/src/router.ts',
     }),

package/templates/fate/drizzle/package.json

@@ -14,7 +14,7 @@
     "dev": "npm-run-all --parallel dev:client dev:server",
     "dev:client": "cd client && vp dev",
     "dev:server": "cd server && vp run dev",
-    "dev:setup": "vp run --filter '@app/client' --filter '@app/server' dev:setup",
+    "dev:setup": "vp run --filter '@app/client' --filter '@app/server' dev:setup && vp run fate:generate",
     "drizzle": "vp run --filter '@app/server' drizzle",
     "fate:generate": "vp run --filter '@app/client' fate:generate",
     "prepare": "vp config"

package/templates/fate/drizzle/server/src/app.tsx

@@ -1,6 +1,7 @@
 #!/usr/bin/env NODE_ENV=development node_modules/.bin/nodemon -q -I --exec node --no-warnings --experimental-specifier-resolution=node --loader ts-node/esm --env-file .env
 import { styleText } from 'node:util';
 import { trpcServer } from '@hono/trpc-server';
+import { createHonoFateHandler } from '@nkzw/fate/server';
 import { Hono } from 'hono';
 import { cors } from 'hono/cors';
 import { connectDatabase } from './drizzle/db.ts';
@@ -8,6 +9,7 @@ import { auth } from './lib/auth.ts';
 import { clientOrigin, resolveCorsOrigin } from './lib/origins.ts';
 import { appRouter } from './router.ts';
 import { createContext } from './trpc/context.ts';
+import { fateServer } from './trpc/init.ts';
 
 try {
   await connectDatabase();
@@ -33,6 +35,8 @@ app.use(
   }),
 );
 
+app.all('/fate/*', createHonoFateHandler(fateServer));
+
 app.on(['POST', 'GET'], '/api/auth/*', ({ req }) => auth.handler(req.raw));
 
 app.all('/*', (context) => context.redirect(clientOrigin));

package/templates/fate/drizzle/server/src/router.ts

@@ -11,4 +11,5 @@ export const appRouter = router({
 
 export type AppRouter = typeof appRouter;
 
+export { fateServer } from './trpc/init.ts';
 export * from './trpc/views.ts';

package/templates/fate/drizzle/server/src/trpc/init.ts

@@ -1,5 +1,7 @@
+import { createFateServer, createLiveEventBus } from '@nkzw/fate/server';
 import { createDrizzleFate } from '@nkzw/fate/server/drizzle';
 import { initTRPC } from '@trpc/server';
+import type { Context } from 'hono';
 import db from '../drizzle/db.ts';
 import schema from '../drizzle/schema.ts';
 import type { AppContext } from './context.ts';
@@ -10,6 +12,7 @@ const t = initTRPC.context<AppContext>().create();
 export const router = t.router;
 export const procedure = t.procedure;
 export const middleware = t.middleware;
+export const live = createLiveEventBus();
 
 export const fate = createDrizzleFate<AppContext, typeof procedure>({
   db,
@@ -17,3 +20,32 @@ export const fate = createDrizzleFate<AppContext, typeof procedure>({
   schema,
   views: Root,
 });
+
+export const fateServer = createFateServer<AppContext>({
+  context: async ({ adapterContext }) => {
+    const { createContext } = await import('./context.ts');
+    return createContext({ context: adapterContext as Context });
+  },
+  live,
+  queries: {
+    viewer: {
+      resolve: ({
+        ctx,
+        input,
+      }: {
+        ctx: AppContext;
+        input: { args?: Record<string, unknown>; select: Array<string> };
+      }) =>
+        ctx.sessionUser
+          ? fate.resolveById({
+              ctx,
+              id: ctx.sessionUser.id,
+              input,
+              view: Root.viewer,
+            })
+          : null,
+    },
+  },
+  roots: Root,
+  sources: fate,
+});

package/templates/fate/drizzle/server/src/trpc/routers/comment.ts

@@ -9,7 +9,7 @@ import {
   findCommentPostId,
   postExists,
 } from '../../drizzle/queries.ts';
-import { fate, procedure, router } from '../init.ts';
+import { fate, live, procedure, router } from '../init.ts';
 import type { CommentItem } from '../views.ts';
 import { commentDataView, postSummaryDataView } from '../views.ts';
 
@@ -68,6 +68,9 @@ export const commentRouter = router({
         });
       }
 
+      live.connection('Post.comments', { id: input.postId }).appendNode('Comment', commentId);
+      live.update('Post', input.postId, { changed: ['commentCount', 'comments'] });
+
       return result as CommentItem & { post?: { commentCount: number } };
     }),
   delete: procedure
@@ -102,6 +105,9 @@ export const commentRouter = router({
         view: postSummaryDataView,
       });
 
+      live.connection('Post.comments', { id: postId }).deleteEdge('Comment', input.id);
+      live.update('Post', postId, { changed: ['commentCount', 'comments'] });
+
       return {
         id: input.id,
         post,

package/templates/fate/drizzle/server/src/trpc/routers/post.ts

@@ -2,7 +2,7 @@ import { connectionArgs } from '@nkzw/fate/server';
 import { TRPCError } from '@trpc/server';
 import { z } from 'zod';
 import { likePostRecord, unlikePostRecord } from '../../drizzle/queries.ts';
-import { fate, procedure, router } from '../init.ts';
+import { fate, live, procedure, router } from '../init.ts';
 import { Post, postDataView } from '../views.ts';
 
 export const postRouter = router({
@@ -58,6 +58,8 @@ export const postRouter = router({
         });
       }
 
+      live.update('Post', input.id, { changed: ['likes'] });
+
       return post as Post;
     }),
   unlike: procedure
@@ -90,6 +92,8 @@ export const postRouter = router({
         });
       }
 
+      live.update('Post', input.id, { changed: ['likes'] });
+
       return post as Post;
     }),
 });

package/templates/fate/drizzle/server/vite.config.ts

@@ -3,6 +3,6 @@ import { defineConfig } from 'vite-plus';
 export default defineConfig({
   pack: {
     entry: ['./src/app.tsx'],
-    outputOptions: { file: 'dist/index.js' },
+    outputOptions: { codeSplitting: false, file: 'dist/index.js' },
   },
 });

package/templates/fate/http/README.md

@@ -57,10 +57,25 @@ Next to [_fate_](https://fate.technology), it comes with the following technolog
 
 You'll need Node.js 24+ and [Vite+](https://viteplus.dev/guide/).
 
-- Run `vp install`.
-- Copy `server/.env.example` to `server/.env`.
-- Set up a Postgres database locally or run `docker-compose up -d` to start Postgres in a Docker container.
-- Postgres setup:
+Install dependencies:
+
+```bash
+vp install
+```
+
+Review `server/.env`, which is copied from `server/.env.example` when the app is created. The default local values expect:
+
+- Postgres at `postgresql://fate:echo@localhost:5432/fate`.
+- The server at `http://localhost:9000`.
+- The client at `http://localhost:5173`.
+
+Start Postgres with Docker:
+
+```bash
+docker-compose up -d
+```
+
+Alternatively, create the database manually:
 
 ```SQL
 CREATE ROLE fate WITH LOGIN PASSWORD 'echo';
@@ -68,10 +83,30 @@ CREATE DATABASE fate;
 ALTER DATABASE fate OWNER TO fate;
 ```
 
-Then, at the root of the project, run:
+Then set up the schema, seed data, translations, and generated fate client:
+
+```bash
+vp run dev:setup
+```
+
+Start the app:
+
+```bash
+vp run dev
+```
+
+The client runs at `http://localhost:5173` and the server runs at `http://localhost:9000`. Native fate requests go to `/fate`; live updates use the SSE endpoint under `/fate/live`.
+
+## Development
+
+Common commands from the project root:
 
-- `vp run dev:setup` to create the database tables and seed initial data.
-- Run `vp run fate:generate` to regenerate the fate client code.
-- Run `vp test` to run all tests.
-- Run `vp run dev` to run the client and server.
-- Visit `http://localhost:5173` to see the app in action.
+- `vp run dev` starts the client and server together.
+- `vp run dev:client` starts only the client.
+- `vp run dev:server` starts only the server.
+- `vp run dev:setup` pushes the Drizzle schema, seeds the database, runs fbtee setup, and regenerates the fate client.
+- `vp run fate:generate` regenerates `client/.fate/client.generated.ts` after changing server views, roots, or mutations.
+- `vp run drizzle` opens Drizzle Kit commands for the server package.
+- `vp check --fix` formats, lints, and type-checks the workspace.
+- `vp test` runs the test suite.
+- `vp run build` builds the client and server.

package/templates/fate/http/_gitignore

@@ -12,6 +12,8 @@ client/source_strings.json
 client/src/translations/
 coverage/
 dist/
+server/.env
+server/.prod.env
 server/dist/
 server/src/prisma/prisma-client/
 tsconfig.tsbuildinfo

package/templates/fate/http/client/vite.config.ts

@@ -6,7 +6,7 @@ import { reactCompilerPreset } from '@vitejs/plugin-react';
 import { voidReact } from '@void/react/plugin';
 import dotenv from 'dotenv';
 import { fate } from 'react-fate/vite';
-import { defineConfig } from 'vite-plus';
+import { defineConfig, lazyPlugins } from 'vite-plus';
 import { voidPlugin } from 'void';
 
 const root = process.cwd();
@@ -24,12 +24,14 @@ if (!process.env.VITE_SERVER_URL) {
 export default defineConfig({
   build: { outDir: join(root, '../dist/client') },
   plugins: [
-    babel({
-      presets: [fbteePreset, reactCompilerPreset()],
-    }),
-    tailwindcss(),
-    voidPlugin(),
-    voidReact(),
+    ...(lazyPlugins(() => [
+      babel({
+        presets: [fbteePreset, reactCompilerPreset()],
+      }),
+      tailwindcss(),
+      voidPlugin(),
+      voidReact(),
+    ]) ?? []),
     fate({
       module: '@app/server/src/router.ts',
       transport: 'native',

package/templates/fate/http/package.json

@@ -14,7 +14,7 @@
     "dev": "npm-run-all --parallel dev:client dev:server",
     "dev:client": "cd client && vp dev",
     "dev:server": "cd server && vp run dev",
-    "dev:setup": "vp run --filter '@app/client' --filter '@app/server' dev:setup",
+    "dev:setup": "vp run --filter '@app/client' --filter '@app/server' dev:setup && vp run fate:generate",
     "drizzle": "vp run --filter '@app/server' drizzle",
     "fate:generate": "vp run --filter '@app/client' fate:generate",
     "prepare": "vp config"

package/templates/fate/prisma/README.md

@@ -57,10 +57,25 @@ Next to [_fate_](https://fate.technology), it comes with the following technolog
 
 You'll need Node.js 24+ and [Vite+](https://viteplus.dev/guide/).
 
-- Run `vp install`.
-- Copy `server/.env.example` to `server/.env`.
-- Set up a Postgres database locally or run `docker-compose up -d` to start Postgres in a Docker container.
-- Postgres setup:
+Install dependencies:
+
+```bash
+vp install
+```
+
+Review `server/.env`, which is copied from `server/.env.example` when the app is created. The default local values expect:
+
+- Postgres at `postgresql://fate:echo@localhost:5432/fate`.
+- The server at `http://localhost:9000`.
+- The client at `http://localhost:5173`.
+
+Start Postgres with Docker:
+
+```bash
+docker-compose up -d
+```
+
+Alternatively, create the database manually:
 
 ```SQL
 CREATE ROLE fate WITH LOGIN PASSWORD 'echo';
@@ -68,12 +83,44 @@ CREATE DATABASE fate;
 ALTER DATABASE fate OWNER TO fate;
 ```
 
-Then, at the root of the project, run:
+For local development, push the Prisma schema and seed the database:
+
+```bash
+vp run prisma db push
+vp run prisma db seed
+```
+
+If you prefer migration files, use Prisma's migration workflow instead:
+
+```bash
+vp run prisma migrate dev --name init
+vp run prisma db seed
+```
+
+Then generate local files:
+
+```bash
+vp run dev:setup
+```
+
+Start the app:
+
+```bash
+vp run dev
+```
+
+The client runs at `http://localhost:5173` and the server runs at `http://localhost:9000`. tRPC requests go to `/trpc`.
+
+## Development
+
+Common commands from the project root:
 
-- `vp run prisma migrate dev` to create the database and run the migrations.
-- You might want to run `vp run prisma migrate reset` and `vp run prisma db seed` to seed the database with initial data.
-- Run `vp run dev:setup` to generate the Prisma client.
-- Run `vp run fate:generate` to regenerate the fate client code.
-- Run `vp test` to run all tests.
-- Run `vp run dev` to run the client and server.
-- Visit `http://localhost:5173` to see the app in action.
+- `vp run dev` starts the client and server together.
+- `vp run dev:client` starts only the client.
+- `vp run dev:server` starts only the server.
+- `vp run dev:setup` generates the Prisma client, runs fbtee setup, and regenerates the fate client.
+- `vp run fate:generate` regenerates `client/.fate/client.generated.ts` after changing server views, roots, or routers.
+- `vp run prisma` runs Prisma CLI commands in the server package.
+- `vp check --fix` formats, lints, and type-checks the workspace.
+- `vp test` runs the test suite.
+- `vp run build` builds the client and server.

package/templates/fate/prisma/_gitignore

@@ -12,6 +12,8 @@ client/source_strings.json
 client/src/translations/
 coverage/
 dist/
+server/.env
+server/.prod.env
 server/dist/
 server/src/prisma/prisma-client/
 tsconfig.tsbuildinfo

package/templates/fate/prisma/client/vite.config.ts

@@ -6,7 +6,7 @@ import { reactCompilerPreset } from '@vitejs/plugin-react';
 import { voidReact } from '@void/react/plugin';
 import dotenv from 'dotenv';
 import { fate } from 'react-fate/vite';
-import { defineConfig } from 'vite-plus';
+import { defineConfig, lazyPlugins } from 'vite-plus';
 import { voidPlugin } from 'void';
 
 const root = process.cwd();
@@ -24,12 +24,14 @@ if (!process.env.VITE_SERVER_URL) {
 export default defineConfig({
   build: { outDir: join(root, '../dist/client') },
   plugins: [
-    babel({
-      presets: [fbteePreset, reactCompilerPreset()],
-    }),
-    tailwindcss(),
-    voidPlugin(),
-    voidReact(),
+    ...(lazyPlugins(() => [
+      babel({
+        presets: [fbteePreset, reactCompilerPreset()],
+      }),
+      tailwindcss(),
+      voidPlugin(),
+      voidReact(),
+    ]) ?? []),
     fate({
       module: '@app/server/src/router.ts',
     }),

package/templates/fate/prisma/package.json

@@ -14,7 +14,7 @@
     "dev": "npm-run-all --parallel dev:client dev:server",
     "dev:client": "cd client && vp dev",
     "dev:server": "cd server && vp run dev",
-    "dev:setup": "vp run --filter '@app/client' --filter '@app/server' dev:setup",
+    "dev:setup": "vp run --filter '@app/client' --filter '@app/server' dev:setup && vp run fate:generate",
     "fate:generate": "vp run --filter '@app/client' fate:generate",
     "prepare": "vp config",
     "prisma": "vp run --filter '@app/server' prisma"

package/templates/fate/void/README.md

@@ -6,13 +6,50 @@ Create a new fate app with Vite+:
 vp create fate my-app --template void
 ```
 
-This template uses the Void pages router with Drizzle, `void-fate`, `react-fate`, Better Auth, and Tailwind.
+This template uses the Void pages router with Drizzle, `void-fate`, `react-fate`, Better Auth, Tailwind, and React Compiler.
+
+## Folder Structure
+
+- `pages/` - Void page routes.
+- `routes/` - API routes, including fate RPC and live SSE routes.
+- `src/` - Shared application, fate, UI, and auth code.
+- `db/` - Drizzle schema, migrations, queries, and seed data.
 
 ## Initial Setup
 
 You'll need Node.js 24+ and [Vite+](https://viteplus.dev/guide/).
 
-- Run `vp install`.
-- Run `vp run dev:setup` to prepare Void, seed the local database, and generate the fate client.
-- Run `vp test` to run all tests.
-- Run `vp run dev` to run the app.
+Install dependencies:
+
+```bash
+vp install
+```
+
+Set up Void local files, seed the local database, and regenerate the fate client:
+
+```bash
+vp run dev:setup
+```
+
+Start the app:
+
+```bash
+vp run dev
+```
+
+The app runs at `http://localhost:6001`. Fate RPC requests go to `/fate`; live updates use the SSE route at `/fate-live`.
+
+## Development
+
+Common commands from the project root:
+
+- `vp run dev` starts the Void app.
+- `vp run dev:setup` prepares Void, seeds the local database, and regenerates the fate client.
+- `vp run prepare:void` regenerates Void local files.
+- `vp run fate:generate` regenerates `.fate/client.generated.ts` after changing `src/fate/server.ts` or views.
+- `vp run db:generate` generates Drizzle migration files from `db/schema.ts`.
+- `vp run db:migrate` applies database migrations.
+- `vp run db:seed` seeds the local database.
+- `vp check --fix` formats, lints, and type-checks the workspace.
+- `vp test` runs the test suite.
+- `vp run build` builds the app.

package/templates/fate/void/package.json

@@ -40,10 +40,13 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@rolldown/plugin-babel": "^0.2.3",
     "@tailwindcss/vite": "^4.2.4",
     "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "babel-plugin-react-compiler": "^1.0.0",
     "tailwindcss": "^4.2.4",
     "ts-node": "^10.9.2",
     "vite": "catalog:",

package/templates/fate/void/vite.config.ts

@@ -1,7 +1,9 @@
+import babel from '@rolldown/plugin-babel';
 import tailwindcss from '@tailwindcss/vite';
+import { reactCompilerPreset } from '@vitejs/plugin-react';
 import { voidReact } from '@void/react/plugin';
 import { fate } from 'react-fate/vite';
-import { defineConfig } from 'vite-plus';
+import { defineConfig, lazyPlugins } from 'vite-plus';
 import { voidPlugin } from 'void';
 
 const isTest = process.env.NODE_ENV === 'test' || process.env.VITEST;
@@ -63,8 +65,13 @@ export default defineConfig({
     },
   },
   plugins: [
-    tailwindcss(),
-    ...(isTest ? [] : [voidPlugin(), voidReact()]),
+    ...(lazyPlugins(() => [
+      babel({
+        presets: [reactCompilerPreset()],
+      }),
+      tailwindcss(),
+      ...(isTest ? [] : [voidPlugin(), voidReact()]),
+    ]) ?? []),
     fate({
       module: './src/fate/server.ts',
       transport: 'void',