create-fate 1.15.0 → 1.16.0

package/README.md

@@ -6,10 +6,11 @@ Create a new fate app:
 vp create fate
 ```
 
-The generated app is installed and the fate client is generated during creation.
+Dependencies are installed during creation. Templates that use a server also generate the fate client.
 
 Choose between these templates:
 
+- `client-only` uses Void Pages Routing with local state persisted in IndexedDB.
 - `void`: Void pages router with Drizzle, live updates, and native Cloudflare deployment.
 - `drizzle`: tRPC with Drizzle.
 - `graphql`: GraphQL with Prisma.

package/bin/create-fate.mjs

@@ -7,6 +7,11 @@ import { URL } from 'node:url';
 import { cancel, intro, isCancel, outro, select, text } from '@clack/prompts';
 
 const variants = {
+  'client-only': {
+    description: 'Void pages with local state saved in IndexedDB',
+    label: 'Client Only',
+    template: 'client-only',
+  },
   drizzle: {
     description: 'tRPC with Drizzle',
     label: 'Drizzle',
@@ -50,11 +55,17 @@ const frontendFrameworks = {
   },
 };
 
-const fateDependencyNames = ['@nkzw/fate', 'react-fate', 'void-fate', 'vue-fate'];
+const fateDependencyNames = [
+  '@nkzw/fate',
+  '@nkzw/fate-indexeddb',
+  'react-fate',
+  'void-fate',
+  'vue-fate',
+];
 
 const usage = () => {
   process.stdout
-    .write(`Usage: create-fate [directory] [--template void|drizzle|graphql|graphql-client|http|prisma] [--framework react|vue]
+    .write(`Usage: create-fate [directory] [--template ${Object.keys(variants).join('|')}] [--framework react|vue]
 
 Create a new fate app.
 
@@ -329,6 +340,13 @@ const updatePackageJsonFiles = (rootDir, dir, packageName, fateDependencyVersion
 const readPackageJson = (filePath) => JSON.parse(fs.readFileSync(filePath, 'utf8'));
 
 const writePackageJson = (filePath, json) => {
+  for (const section of ['dependencies', 'devDependencies', 'peerDependencies']) {
+    if (json[section]) {
+      json[section] = Object.fromEntries(
+        Object.entries(json[section]).sort(([left], [right]) => left.localeCompare(right)),
+      );
+    }
+  }
   fs.writeFileSync(filePath, `${JSON.stringify(json, null, 2)}\n`);
 };
 
@@ -548,7 +566,7 @@ const vueTemplatePackage = () =>
   path.resolve(packageRoot, 'templates', 'fate', '_shared', 'vue-app');
 
 const frontendRootForVariant = (targetPath, selectedVariant) =>
-  selectedVariant === 'void' || selectedVariant === 'graphql-client'
+  ['client-only', 'graphql-client', 'void'].includes(selectedVariant)
     ? targetPath
     : path.join(targetPath, 'client');
 
@@ -558,6 +576,35 @@ const removeIfExists = (entryPath) => {
   }
 };
 
+const configureClientOnlyVue = (targetPath) => {
+  const pages = path.join(targetPath, 'pages');
+  for (const file of fs.readdirSync(pages)) {
+    if (file.endsWith('.tsx')) {
+      removeIfExists(path.join(pages, file));
+    }
+  }
+  fs.cpSync(path.resolve(packageRoot, 'templates/fate/_shared/client-only-vue'), targetPath, {
+    recursive: true,
+  });
+  const packagePath = path.join(targetPath, 'package.json');
+  const packageJson = readPackageJson(packagePath);
+  const vuePackageJson = readPackageJson(path.join(vueTemplatePackage(), 'package.json'));
+  removePackageEntries(packageJson.dependencies, reactPackageEntries);
+  removePackageEntries(packageJson.devDependencies, reactPackageEntries);
+  for (const name of ['@void/vue', 'vue', 'vue-fate']) {
+    packageJson.dependencies[name] = vuePackageJson.dependencies[name];
+  }
+  writePackageJson(packagePath, packageJson);
+  const agentsPath = path.join(targetPath, 'AGENTS.md');
+  fs.writeFileSync(
+    agentsPath,
+    fs
+      .readFileSync(agentsPath, 'utf8')
+      .replaceAll('react-fate', 'vue-fate')
+      .replaceAll('React', 'Vue'),
+  );
+};
+
 const removeReactFrontend = (frontendRoot, selectedVariant) => {
   if (selectedVariant === 'void' || selectedVariant === 'graphql-client') {
     for (const entry of [
@@ -834,10 +881,10 @@ const configureVueTemplate = (targetPath, selectedVariant) => {
       selectedVariant === 'void' || selectedVariant === 'graphql-client'
         ? "['**/.cloudflare/**', '.fate', '.void', '.void-wrangler.jsonc', 'dist', 'node_modules', 'vite.config.ts.timestamp-*']"
         : "['**/.cloudflare/**', '.fate', '.void', 'dist', 'node_modules', '../dist', 'vite.config.ts.timestamp-*']",
-    __TSCONFIG_EXTENDS__:
+    '"__TSCONFIG_EXTENDS__"':
       selectedVariant === 'void' || selectedVariant === 'graphql-client'
-        ? './.void/tsconfig.json'
-        : '../tsconfig.json',
+        ? '"./.void/tsconfig.json"'
+        : '["../tsconfig.json", "./.void/tsconfig.json"]',
     '"__TSCONFIG_INCLUDE__"':
       selectedVariant === 'void'
         ? `[
@@ -918,23 +965,12 @@ const setupProject = (targetPath, selectedVariant) => {
     runCommand('vp', ['run', 'fbtee:all'], frontendRoot);
   }
 
-  switch (selectedVariant) {
-    case 'graphql':
-    case 'prisma':
-      runCommand('vp', ['run', '--filter', '@app/server', 'dev:setup'], targetPath);
-      runCommand('vp', ['run', 'fate:generate'], targetPath);
-      break;
-    case 'graphql-client':
-      runCommand('vp', ['run', 'prepare:void'], 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;
+  if (selectedVariant === 'graphql' || selectedVariant === 'prisma') {
+    runCommand('vp', ['run', '--filter', '@app/server', 'dev:setup'], targetPath);
+  }
+  runCommand('vp', ['run', 'prepare:void'], frontendRoot);
+  if (selectedVariant !== 'client-only') {
+    runCommand('vp', ['run', 'fate:generate'], targetPath);
   }
 };
 
@@ -1004,7 +1040,11 @@ const main = async () => {
     );
   }
   if (selectedFramework === 'vue') {
-    configureVueTemplate(targetPath, selectedVariant);
+    if (selectedVariant === 'client-only') {
+      configureClientOnlyVue(targetPath);
+    } else {
+      configureVueTemplate(targetPath, selectedVariant);
+    }
   }
   restoreTemplateFileNames(targetPath);
   if (selectedFramework === 'vue') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fate",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "Create a new fate app.",
   "homepage": "https://github.com/nkzw-tech/fate",
   "license": "MIT",

package/templates/fate/_shared/client-only-vue/pages/about.vue

@@ -0,0 +1,6 @@
+<template>
+  <h1>About</h1>
+  <p>
+    fate saves your tasks in this browser. You can reload the page and pick up where you left off.
+  </p>
+</template>

package/templates/fate/_shared/client-only-vue/pages/index.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useFateClient, useRequest, useView } from 'vue-fate';
+import { WorkspaceView } from '../src/state.ts';
+
+const fate = useFateClient();
+const request = useRequest({ workspace: { view: WorkspaceView } });
+const state = useView(WorkspaceView, () => request.data.value?.workspace);
+const title = ref('');
+const pending = ref(false);
+const error = ref('');
+await request.ready();
+await state.ready();
+
+const run = async (mutate: () => Promise<{ error?: Error }>) => {
+  pending.value = true;
+  error.value = '';
+  try {
+    const result = await mutate();
+    if (result.error) {
+      error.value = result.error.message;
+    }
+  } catch (cause) {
+    error.value = cause instanceof Error ? cause.message : String(cause);
+  } finally {
+    pending.value = false;
+  }
+};
+
+const add = () => {
+  if (title.value.trim()) {
+    void run(async () => {
+      const result = await fate.mutations.task.add({ input: { title: title.value } });
+      if (!result.error) {
+        title.value = '';
+      }
+      return result;
+    });
+  }
+};
+</script>
+
+<template>
+  <h1>Tasks</h1>
+  <p>{{ state?.progress }}</p>
+  <form @submit.prevent="add">
+    <input v-model="title" aria-label="Task title" required />
+    <button :disabled="pending" type="submit">Add task</button>
+  </form>
+  <p v-if="error" role="alert">{{ error }}</p>
+  <ul>
+    <li v-for="task in state?.tasks" :key="task.id">
+      <label>
+        <input
+          :checked="task.done"
+          :disabled="pending"
+          type="checkbox"
+          @change="run(() => fate.mutations.task.toggle({ input: { id: task.id } }))"
+        />
+        {{ task.title }}
+      </label>
+      <button
+        :aria-label="`Remove ${task.title}`"
+        :disabled="pending"
+        type="button"
+        @click="run(() => fate.mutations.task.remove({ input: { id: task.id } }))"
+      >
+        Remove
+      </button>
+    </li>
+  </ul>
+</template>

package/templates/fate/_shared/client-only-vue/pages/layout.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import '../src/style.css';
+import { Link } from '@void/vue';
+import { onErrorCaptured, ref } from 'vue';
+import { FateClient } from 'vue-fate';
+import { getTaskClient } from '../src/state.ts';
+
+const client = getTaskClient();
+const error = ref('');
+onErrorCaptured((cause) => {
+  error.value = String(cause);
+  return false;
+});
+</script>
+
+<template>
+  <nav aria-label="Main navigation">
+    <Link href="/">Tasks</Link>
+    <Link href="/about">About</Link>
+  </nav>
+  <main>
+    <p v-if="error" role="alert">{{ error }}</p>
+    <FateClient v-else :client="client">
+      <Suspense>
+        <slot />
+        <template #fallback><p>Restoring tasks…</p></template>
+      </Suspense>
+    </FateClient>
+  </main>
+</template>

package/templates/fate/_shared/client-only-vue/vite.config.ts

@@ -0,0 +1,12 @@
+import { voidVue } from '@void/vue/plugin';
+import { defineConfig } from 'vite-plus';
+import { voidPlugin } from 'void';
+
+export default defineConfig({
+  fmt: { ignorePatterns: ['.void/', 'dist/', 'pnpm-lock.yaml'], singleQuote: true },
+  lint: {
+    ignorePatterns: ['.void/', 'dist/'],
+    options: { typeAware: true, typeCheck: true },
+  },
+  plugins: [voidPlugin(), voidVue()],
+});

package/templates/fate/_shared/vue-app/package.json

@@ -22,13 +22,13 @@
     "@nkzw/core": "^1.3.1",
     "@nkzw/define-env": "^1.1.0",
     "@trpc/client": "^11.19.0",
-    "@void/vue": "^1.6.1",
+    "@void/vue": "^1.7.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dotenv": "^18.0.9",
     "graphql-sse": "^2.6.3",
     "tailwind-merge": "^3.7.0",
-    "void": "^1.6.1",
+    "void": "^1.7.0",
     "vue": "^3.5.44",
     "vue-fate": "latest"
   },

package/templates/fate/_shared/vue-app/pages/post/[id].vue

@@ -5,7 +5,7 @@ import { PostView } from '../../src/fateViews.ts';
 import PostCard from '../../src/ui/PostCard.vue';
 import Section from '../../src/ui/Section.vue';
 
-const params = useParams<{ id: string }>();
+const params = useParams<'/post/[id]'>();
 const id = params.id;
 
 if (!id) {

package/templates/fate/_shared/vue-app/void.json

@@ -1,5 +1,8 @@
 {
   "pages": {
     "router": true
+  },
+  "routing": {
+    "typedRoutes": true
   }
 }

package/templates/fate/client-only/AGENTS.md

@@ -0,0 +1,5 @@
+# Client-only fate
+
+Use `node_modules/react-fate/docs/` for bundled guidance on building React applications with fate. Start with `index.md`.
+
+Client definitions and mutations live in `src/state.ts`. Run `vp run dev:setup` after changing Void routes. Run `vp run test:all` and `vp run build` to verify changes.

package/templates/fate/client-only/README.md

@@ -0,0 +1,25 @@
+# Client-only fate
+
+A task list with Void Pages Routing, `react-fate`, and IndexedDB. Try adding, completing, or removing a task, then reload to see the saved state. The About page demonstrates navigation between static routes.
+
+## Development
+
+```sh
+vp install
+vp run dev:setup
+vp run dev
+```
+
+The app's schema, views, and mutations live in `src/state.ts`. The project uses Void route types from `void prepare`. fate registers the client schema at runtime.
+
+## Deployment
+
+Build static files into `dist/client/` with `vp run build`. Serve that directory with a static host that resolves clean URLs to the corresponding HTML files.
+
+To deploy directly to Cloudflare, run:
+
+```sh
+vp exec void deploy --platform cloudflare
+```
+
+Void deploys both pages as static assets. IndexedDB holds each browser's task data.

package/templates/fate/client-only/_gitignore

@@ -0,0 +1,6 @@
+node_modules/
+.void/
+.void-wrangler.jsonc
+.cloudflare/
+dist/
+*.tsbuildinfo

package/templates/fate/client-only/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "fate-app",
+  "version": "0.0.1",
+  "private": true,
+  "description": "fate is a modern data client for the web.",
+  "author": "Christoph Nakazawa <christoph.pojer@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/nkzw-tech/fate.git"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "vp build",
+    "dev": "vp dev",
+    "dev:setup": "vp run prepare:void",
+    "prepare:void": "void prepare",
+    "test:all": "vp check"
+  },
+  "dependencies": {
+    "@nkzw/fate": "latest",
+    "@nkzw/fate-indexeddb": "latest",
+    "@void/react": "^1.7.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "react-error-boundary": "^6.1.6",
+    "react-fate": "latest",
+    "void": "^1.7.0",
+    "zod": "^4.6.7"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "typescript": "^7.0.2",
+    "vite": "catalog:",
+    "vite-plus": "catalog:"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
+  "engines": {
+    "node": "^24.22.0 || >=26.12.0",
+    "pnpm": ">=11.0.0"
+  },
+  "packageManager": "pnpm@12.6.0"
+}

package/templates/fate/client-only/pages/about.server.ts

@@ -0,0 +1 @@
+export const ssr = false;

package/templates/fate/client-only/pages/about.tsx

@@ -0,0 +1,11 @@
+export default function About() {
+  return (
+    <>
+      <h1>About</h1>
+      <p>
+        fate saves your tasks in this browser. You can reload the page and pick up where you left
+        off.
+      </p>
+    </>
+  );
+}

package/templates/fate/client-only/pages/index.server.ts

@@ -0,0 +1 @@
+export const ssr = false;

package/templates/fate/client-only/pages/index.tsx

@@ -0,0 +1,82 @@
+import { useState, type FormEvent } from 'react';
+import { useFateClient, useRequest, useView } from 'react-fate';
+import { WorkspaceView } from '../src/state.ts';
+
+export default function Tasks() {
+  const fate = useFateClient();
+  const { workspace } = useRequest({ workspace: { view: WorkspaceView } });
+  const { progress, tasks } = useView(WorkspaceView, workspace);
+  const [title, setTitle] = useState('');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState('');
+
+  const run = async (mutate: () => Promise<{ error?: Error }>) => {
+    setPending(true);
+    setError('');
+    try {
+      const result = await mutate();
+      if (result.error) {
+        setError(result.error.message);
+      }
+    } catch (error) {
+      setError(error instanceof Error ? error.message : String(error));
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const add = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (title.trim()) {
+      void run(async () => {
+        const result = await fate.mutations.task.add({ input: { title } });
+        if (!result.error) {
+          setTitle('');
+        }
+        return result;
+      });
+    }
+  };
+
+  return (
+    <>
+      <h1>Tasks</h1>
+      <p>{progress}</p>
+      <form onSubmit={add}>
+        <input
+          aria-label="Task title"
+          onChange={(event) => setTitle(event.target.value)}
+          required
+          value={title}
+        />
+        <button disabled={pending} type="submit">
+          Add task
+        </button>
+      </form>
+      {error && <p role="alert">{error}</p>}
+      <ul>
+        {tasks.map(({ done, id, title }) => (
+          <li key={id}>
+            <label>
+              <input
+                checked={done}
+                disabled={pending}
+                onChange={() => void run(() => fate.mutations.task.toggle({ input: { id } }))}
+                type="checkbox"
+              />
+              {title}
+            </label>
+            <button
+              aria-label={`Remove ${title}`}
+              disabled={pending}
+              onClick={() => void run(() => fate.mutations.task.remove({ input: { id } }))}
+              type="button"
+            >
+              Remove
+            </button>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

package/templates/fate/client-only/pages/layout.tsx

@@ -0,0 +1,24 @@
+import '../src/style.css';
+import { Link } from '@void/react';
+import { Suspense, type PropsWithChildren } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { FateClient } from 'react-fate';
+import { getTaskClient } from '../src/state.ts';
+
+export default function Layout({ children }: PropsWithChildren) {
+  return (
+    <>
+      <nav aria-label="Main navigation">
+        <Link href="/">Tasks</Link>
+        <Link href="/about">About</Link>
+      </nav>
+      <main>
+        <ErrorBoundary fallbackRender={({ error }) => <p role="alert">{String(error)}</p>}>
+          <FateClient client={getTaskClient()}>
+            <Suspense fallback={<p>Restoring tasks…</p>}>{children}</Suspense>
+          </FateClient>
+        </ErrorBoundary>
+      </main>
+    </>
+  );
+}

package/templates/fate/client-only/pnpm-workspace.yaml

@@ -0,0 +1,24 @@
+packages:
+  - .
+
+allowBuilds:
+  better-sqlite3: false
+  esbuild: true
+  workerd: true
+
+catalog:
+  vite: npm:@voidzero-dev/vite-plus-core@1.4.0
+  vite-plus: 1.4.0
+
+minimumReleaseAgeExclude:
+  - '@voidzero-dev/vite-plus-core'
+  - vite-plus
+
+overrides:
+  vite: 'catalog:'
+
+peerDependencyRules:
+  allowAny:
+    - vite
+  allowedVersions:
+    vite: '*'

package/templates/fate/client-only/src/state.ts

@@ -0,0 +1,79 @@
+import {
+  clientSchema,
+  computed,
+  createClient,
+  dataView,
+  field,
+  list,
+  view,
+  type EntityOf,
+} from '@nkzw/fate';
+import { createIndexedDBStorage } from '@nkzw/fate-indexeddb';
+import { createPersistence } from '@nkzw/fate/persistence';
+import { z } from 'zod';
+
+type TaskData = { done: boolean; id: string; title: string };
+type WorkspaceData = { id: string; tasks: Array<TaskData> };
+const task = dataView<TaskData>('Task')({ done: true, id: true, title: true });
+const workspace = dataView<WorkspaceData>('Workspace')({
+  id: true,
+  progress: computed({
+    resolve: (_item: WorkspaceData, { done = [] }) =>
+      `${done.filter(Boolean).length} of ${done.length} complete`,
+    select: { done: field('tasks.done') },
+  }),
+  tasks: list(task),
+});
+const schema = clientSchema({
+  roots: { workspace: { id: 'main', type: 'Workspace' } },
+  types: {
+    Task: { defaults: (id) => ({ done: false, id, title: '' }), view: task },
+    Workspace: {
+      defaults: (id) => ({
+        id,
+        tasks: [{ done: false, id: 'welcome', title: 'Add your first task' }],
+      }),
+      view: workspace,
+    },
+  },
+});
+
+const createTaskClient = () =>
+  createClient({
+    persistence: createPersistence({ key: 'tasks', storage: createIndexedDBStorage() }),
+  }).registerClientSchema(schema, (builder) => ({
+    'task.add': builder.mutation('Task', {
+      input: z.object({ title: z.string().trim().min(1) }),
+      resolve: ({ input, store }) => {
+        const task = store.create('Task', { id: crypto.randomUUID(), title: input.title });
+        store.update('Workspace', 'main', {
+          tasks: [...(store.get('Workspace', 'main')?.tasks ?? []), task],
+        });
+        return task;
+      },
+    }),
+    'task.remove': builder.mutation('Task', {
+      input: z.object({ id: z.string() }),
+      resolve: ({ input, store }) => store.delete('Task', input.id),
+    }),
+    'task.toggle': builder.mutation('Task', {
+      input: z.object({ id: z.string() }),
+      resolve: ({ input, store }) =>
+        store.update('Task', input.id, { done: !store.get('Task', input.id)?.done }),
+    }),
+  }));
+
+type TaskClient = ReturnType<typeof createTaskClient>;
+let client: TaskClient | undefined;
+export const getTaskClient = () => (client ??= createTaskClient());
+
+export const WorkspaceView = view<EntityOf<TaskClient, 'Workspace'>>()({
+  progress: true,
+  tasks: { done: true, id: true, title: true },
+});
+
+declare module '@nkzw/fate' {
+  interface ClientRegistration {
+    client: TaskClient;
+  }
+}

package/templates/fate/client-only/src/style.css

@@ -0,0 +1,42 @@
+:root {
+  color-scheme: light dark;
+  font-family: system-ui, sans-serif;
+}
+
+body {
+  margin: 0 auto;
+  max-width: 38rem;
+  padding: 2rem 1rem;
+}
+
+nav,
+form,
+li {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+}
+
+form input {
+  flex: 1;
+}
+
+input,
+button {
+  font: inherit;
+  padding: 0.4rem;
+}
+
+li {
+  border-bottom: 1px solid GrayText;
+  justify-content: space-between;
+  padding: 0.75rem 0;
+}
+
+ul {
+  padding: 0;
+}
+
+[aria-current='page'] {
+  font-weight: bold;
+}

package/templates/fate/client-only/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "extends": "./.void/tsconfig.json",
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "noImplicitOverride": true,
+    "noUnusedLocals": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2022",
+    "types": ["vite/client", "void/env"]
+  },
+  "include": [
+    ".void/**/*.d.ts",
+    "pages/**/*.ts",
+    "pages/**/*.tsx",
+    "pages/**/*.vue",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "vite.config.ts",
+    "void.config.ts"
+  ]
+}

package/templates/fate/client-only/vite.config.ts

@@ -0,0 +1,12 @@
+import { voidReact } from '@void/react/plugin';
+import { defineConfig } from 'vite-plus';
+import { voidPlugin } from 'void';
+
+export default defineConfig({
+  fmt: { ignorePatterns: ['.void/', 'dist/', 'pnpm-lock.yaml'], singleQuote: true },
+  lint: {
+    ignorePatterns: ['.void/', 'dist/'],
+    options: { typeAware: true, typeCheck: true },
+  },
+  plugins: [voidPlugin(), voidReact()],
+});

package/templates/fate/client-only/void.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'void/config';
+
+export default defineConfig({
+  head: {
+    htmlAttrs: { lang: 'en' },
+    meta: [{ content: 'width=device-width, initial-scale=1', name: 'viewport' }],
+    title: 'Tasks',
+  },
+  output: 'static',
+  routing: { typedRoutes: true },
+});

package/templates/fate/drizzle/client/package.json

@@ -11,12 +11,13 @@
   "scripts": {
     "build": "vp run fbtee:all && vp build",
     "dev": "vp dev",
-    "dev:setup": "vp run fbtee:all",
+    "dev:setup": "vp run fbtee:all && vp run prepare:void",
     "fate:generate": "vp exec fate generate",
     "fbtee:all": "vp run fbtee:collect && vp run fbtee:translate",
     "fbtee:collect": "vp exec fbtee collect",
     "fbtee:prepare": "vp run fbtee:collect && vp exec fbtee prepare-translations --source-strings source_strings.json --output-dir translations --locales de-DE ja-JP",
     "fbtee:translate": "vp exec fbtee translate --source-strings source_strings.json --output-dir src/translations --output-locale-style=bcp47",
+    "prepare:void": "void prepare",
     "start": "node start.mjs"
   },
   "dependencies": {
@@ -27,7 +28,7 @@
     "@nkzw/stack": "^2.3.2",
     "@radix-ui/react-slot": "^1.5.0",
     "@trpc/client": "^11.19.0",
-    "@void/react": "^1.6.1",
+    "@void/react": "^1.7.0",
     "better-auth": "^1.7.14",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -38,7 +39,7 @@
     "react-error-boundary": "^6.1.6",
     "react-fate": "latest",
     "tailwind-merge": "^3.7.0",
-    "void": "^1.6.1"
+    "void": "^1.7.0"
   },
   "devDependencies": {
     "@nkzw/fbtee-compiler": "^5.0.0",

package/templates/fate/drizzle/client/pages/post/[id].tsx

@@ -4,7 +4,7 @@ import { PostCard, PostView } from '../../src/ui/PostCard.tsx';
 import Section from '../../src/ui/Section.tsx';
 
 export default function PostPage() {
-  const { id } = useParams<{ id: string }>();
+  const { id } = useParams<'/post/[id]'>();
 
   if (!id) {
     throw new Error('fate: Post ID is required.');

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

@@ -1,9 +1,11 @@
 import { Link as VoidLink } from '@void/react';
 import type { ComponentProps } from 'react';
 
-export type LinkProps = Omit<ComponentProps<typeof VoidLink>, 'href'> & {
-  href?: string;
-  to?: string;
+type VoidLinkProps = ComponentProps<typeof VoidLink>;
+
+export type LinkProps = Omit<VoidLinkProps, 'href'> & {
+  href?: VoidLinkProps['href'];
+  to?: VoidLinkProps['href'];
 };
 
 export default function Link({ href, to, ...props }: LinkProps) {

package/templates/fate/drizzle/client/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": ["../tsconfig.json", "./.void/tsconfig.json"],
+  "compilerOptions": {
+    "types": ["vite/client", "void/env"]
+  },
+  "include": [
+    ".fate/**/*.ts",
+    ".void/**/*.d.ts",
+    "pages/**/*.ts",
+    "pages/**/*.tsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "env.ts",
+    "vite.config.ts"
+  ]
+}

package/templates/fate/drizzle/client/void.json

@@ -25,5 +25,8 @@
         "href": "/icon.svg"
       }
     ]
+  },
+  "routing": {
+    "typedRoutes": true
   }
 }

package/templates/fate/graphql/client/package.json

@@ -11,12 +11,13 @@
   "scripts": {
     "build": "vp run fbtee:all && vp build",
     "dev": "vp dev",
-    "dev:setup": "vp run fbtee:all",
+    "dev:setup": "vp run fbtee:all && vp run prepare:void",
     "fate:generate": "vp exec fate generate",
     "fbtee:all": "vp run fbtee:collect && vp run fbtee:translate",
     "fbtee:collect": "vp exec fbtee collect",
     "fbtee:prepare": "vp run fbtee:collect && vp exec fbtee prepare-translations --source-strings source_strings.json --output-dir translations --locales de-DE ja-JP",
     "fbtee:translate": "vp exec fbtee translate --source-strings source_strings.json --output-dir src/translations --output-locale-style=bcp47",
+    "prepare:void": "void prepare",
     "start": "node start.mjs"
   },
   "dependencies": {
@@ -26,7 +27,7 @@
     "@nkzw/define-env": "^1.1.0",
     "@nkzw/stack": "^2.3.2",
     "@radix-ui/react-slot": "^1.5.0",
-    "@void/react": "^1.6.1",
+    "@void/react": "^1.7.0",
     "better-auth": "^1.7.14",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -38,7 +39,7 @@
     "react-error-boundary": "^6.1.6",
     "react-fate": "latest",
     "tailwind-merge": "^3.7.0",
-    "void": "^1.6.1"
+    "void": "^1.7.0"
   },
   "devDependencies": {
     "@nkzw/fbtee-compiler": "^5.0.0",

package/templates/fate/graphql/client/pages/post/[id].tsx

@@ -4,7 +4,7 @@ import { PostCard, PostView } from '../../src/ui/PostCard.tsx';
 import Section from '../../src/ui/Section.tsx';
 
 export default function PostPage() {
-  const { id } = useParams<{ id: string }>();
+  const { id } = useParams<'/post/[id]'>();
 
   if (!id) {
     throw new Error('fate: Post ID is required.');

package/templates/fate/graphql/client/src/ui/Link.tsx

@@ -1,9 +1,11 @@
 import { Link as VoidLink } from '@void/react';
 import type { ComponentProps } from 'react';
 
-export type LinkProps = Omit<ComponentProps<typeof VoidLink>, 'href'> & {
-  href?: string;
-  to?: string;
+type VoidLinkProps = ComponentProps<typeof VoidLink>;
+
+export type LinkProps = Omit<VoidLinkProps, 'href'> & {
+  href?: VoidLinkProps['href'];
+  to?: VoidLinkProps['href'];
 };
 
 export default function Link({ href, to, ...props }: LinkProps) {

package/templates/fate/graphql/client/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": ["../tsconfig.json", "./.void/tsconfig.json"],
+  "compilerOptions": {
+    "types": ["vite/client", "void/env"]
+  },
+  "include": [
+    ".fate/**/*.ts",
+    ".void/**/*.d.ts",
+    "pages/**/*.ts",
+    "pages/**/*.tsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "env.ts",
+    "vite.config.ts"
+  ]
+}

package/templates/fate/graphql/client/void.json

@@ -25,5 +25,8 @@
         "href": "/icon.svg"
       }
     ]
+  },
+  "routing": {
+    "typedRoutes": true
   }
 }

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

@@ -24,19 +24,6 @@ export default defineConfig({
         },
       },
     ],
-    rules: {
-      'import-x-js/no-extraneous-dependencies': [
-        'error',
-        {
-          devDependencies: [
-            './prisma.config.ts',
-            './scripts/**/*.tsx',
-            './src/__tests__/**/*.tsx',
-            './vite.config.ts',
-          ],
-        },
-      ],
-    },
   },
   pack: {
     deps: { resolveDepSubpath: true },

package/templates/fate/graphql-client/package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@nkzw/fate": "latest",
-    "@void/react": "^1.6.1",
+    "@void/react": "^1.7.0",
     "fbtee": "^5.0.0",
     "graphql-sse": "^2.6.3",
     "lucide-react": "^1.61.0",
@@ -31,7 +31,7 @@
     "react-dom": "^19.3.1",
     "react-error-boundary": "^6.1.6",
     "react-fate": "latest",
-    "void": "^1.6.1"
+    "void": "^1.7.0"
   },
   "devDependencies": {
     "@nkzw/eslint-plugin": "^2.0.0",

package/templates/fate/graphql-client/void.json

@@ -25,5 +25,8 @@
   "worker": {
     "compatibility_date": "2025-12-01",
     "compatibility_flags": ["nodejs_compat", "no_handle_cross_request_promise_resolution"]
+  },
+  "routing": {
+    "typedRoutes": true
   }
 }

package/templates/fate/http/client/package.json

@@ -11,12 +11,13 @@
   "scripts": {
     "build": "vp run fbtee:all && vp build",
     "dev": "vp dev",
-    "dev:setup": "vp run fbtee:all",
+    "dev:setup": "vp run fbtee:all && vp run prepare:void",
     "fate:generate": "vp exec fate generate",
     "fbtee:all": "vp run fbtee:collect && vp run fbtee:translate",
     "fbtee:collect": "vp exec fbtee collect",
     "fbtee:prepare": "vp run fbtee:collect && vp exec fbtee prepare-translations --source-strings source_strings.json --output-dir translations --locales de-DE ja-JP",
     "fbtee:translate": "vp exec fbtee translate --source-strings source_strings.json --output-dir src/translations --output-locale-style=bcp47",
+    "prepare:void": "void prepare",
     "start": "node start.mjs"
   },
   "dependencies": {
@@ -26,7 +27,7 @@
     "@nkzw/define-env": "^1.1.0",
     "@nkzw/stack": "^2.3.2",
     "@radix-ui/react-slot": "^1.5.0",
-    "@void/react": "^1.6.1",
+    "@void/react": "^1.7.0",
     "better-auth": "^1.7.14",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -37,7 +38,7 @@
     "react-error-boundary": "^6.1.6",
     "react-fate": "latest",
     "tailwind-merge": "^3.7.0",
-    "void": "^1.6.1"
+    "void": "^1.7.0"
   },
   "devDependencies": {
     "@nkzw/fbtee-compiler": "^5.0.0",

package/templates/fate/http/client/pages/post/[id].tsx

@@ -4,7 +4,7 @@ import { PostCard, PostView } from '../../src/ui/PostCard.tsx';
 import Section from '../../src/ui/Section.tsx';
 
 export default function PostPage() {
-  const { id } = useParams<{ id: string }>();
+  const { id } = useParams<'/post/[id]'>();
 
   if (!id) {
     throw new Error('fate: Post ID is required.');

package/templates/fate/http/client/src/ui/Link.tsx

@@ -1,9 +1,11 @@
 import { Link as VoidLink } from '@void/react';
 import type { ComponentProps } from 'react';
 
-export type LinkProps = Omit<ComponentProps<typeof VoidLink>, 'href'> & {
-  href?: string;
-  to?: string;
+type VoidLinkProps = ComponentProps<typeof VoidLink>;
+
+export type LinkProps = Omit<VoidLinkProps, 'href'> & {
+  href?: VoidLinkProps['href'];
+  to?: VoidLinkProps['href'];
 };
 
 export default function Link({ href, to, ...props }: LinkProps) {

package/templates/fate/http/client/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": ["../tsconfig.json", "./.void/tsconfig.json"],
+  "compilerOptions": {
+    "types": ["vite/client", "void/env"]
+  },
+  "include": [
+    ".fate/**/*.ts",
+    ".void/**/*.d.ts",
+    "pages/**/*.ts",
+    "pages/**/*.tsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "env.ts",
+    "vite.config.ts"
+  ]
+}

package/templates/fate/http/client/void.json

@@ -25,5 +25,8 @@
         "href": "/icon.svg"
       }
     ]
+  },
+  "routing": {
+    "typedRoutes": true
   }
 }

package/templates/fate/prisma/client/package.json

@@ -11,12 +11,13 @@
   "scripts": {
     "build": "vp run fbtee:all && vp build",
     "dev": "vp dev",
-    "dev:setup": "vp run fbtee:all",
+    "dev:setup": "vp run fbtee:all && vp run prepare:void",
     "fate:generate": "vp exec fate generate",
     "fbtee:all": "vp run fbtee:collect && vp run fbtee:translate",
     "fbtee:collect": "vp exec fbtee collect",
     "fbtee:prepare": "vp run fbtee:collect && vp exec fbtee prepare-translations --source-strings source_strings.json --output-dir translations --locales de-DE ja-JP",
     "fbtee:translate": "vp exec fbtee translate --source-strings source_strings.json --output-dir src/translations --output-locale-style=bcp47",
+    "prepare:void": "void prepare",
     "start": "node start.mjs"
   },
   "dependencies": {
@@ -27,7 +28,7 @@
     "@nkzw/stack": "^2.3.2",
     "@radix-ui/react-slot": "^1.5.0",
     "@trpc/client": "^11.19.0",
-    "@void/react": "^1.6.1",
+    "@void/react": "^1.7.0",
     "better-auth": "^1.7.14",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -38,7 +39,7 @@
     "react-error-boundary": "^6.1.6",
     "react-fate": "latest",
     "tailwind-merge": "^3.7.0",
-    "void": "^1.6.1"
+    "void": "^1.7.0"
   },
   "devDependencies": {
     "@nkzw/fbtee-compiler": "^5.0.0",

package/templates/fate/prisma/client/pages/post/[id].tsx

@@ -4,7 +4,7 @@ import { PostCard, PostView } from '../../src/ui/PostCard.tsx';
 import Section from '../../src/ui/Section.tsx';
 
 export default function PostPage() {
-  const { id } = useParams<{ id: string }>();
+  const { id } = useParams<'/post/[id]'>();
 
   if (!id) {
     throw new Error('fate: Post ID is required.');

package/templates/fate/prisma/client/src/ui/Link.tsx

@@ -1,9 +1,11 @@
 import { Link as VoidLink } from '@void/react';
 import type { ComponentProps } from 'react';
 
-export type LinkProps = Omit<ComponentProps<typeof VoidLink>, 'href'> & {
-  href?: string;
-  to?: string;
+type VoidLinkProps = ComponentProps<typeof VoidLink>;
+
+export type LinkProps = Omit<VoidLinkProps, 'href'> & {
+  href?: VoidLinkProps['href'];
+  to?: VoidLinkProps['href'];
 };
 
 export default function Link({ href, to, ...props }: LinkProps) {

package/templates/fate/prisma/client/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": ["../tsconfig.json", "./.void/tsconfig.json"],
+  "compilerOptions": {
+    "types": ["vite/client", "void/env"]
+  },
+  "include": [
+    ".fate/**/*.ts",
+    ".void/**/*.d.ts",
+    "pages/**/*.ts",
+    "pages/**/*.tsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "env.ts",
+    "vite.config.ts"
+  ]
+}

package/templates/fate/prisma/client/void.json

@@ -25,5 +25,8 @@
         "href": "/icon.svg"
       }
     ]
+  },
+  "routing": {
+    "typedRoutes": true
   }
 }

package/templates/fate/void/package.json

@@ -29,7 +29,7 @@
     "@nkzw/fate": "latest",
     "@nkzw/stack": "^2.3.2",
     "@radix-ui/react-slot": "^1.5.0",
-    "@void/react": "^1.6.1",
+    "@void/react": "^1.7.0",
     "better-auth": "^1.7.15",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -41,7 +41,7 @@
     "react-error-boundary": "^6.1.6",
     "react-fate": "latest",
     "tailwind-merge": "^3.7.0",
-    "void": "^1.6.1",
+    "void": "^1.7.0",
     "void-fate": "latest",
     "zod": "^4.6.7"
   },

package/templates/fate/void/pages/category/[id].tsx

@@ -4,7 +4,7 @@ import CategoryCard, { CategoryView } from '../../src/ui/CategoryCard.tsx';
 import Section from '../../src/ui/Section.tsx';
 
 export default function CategoryPage() {
-  const { id } = useParams<{ id: string }>();
+  const { id } = useParams<'/category/[id]'>();
 
   if (!id) {
     throw new Error('fate: Category ID is required.');

package/templates/fate/void/pages/post/[id].tsx

@@ -4,7 +4,7 @@ import { PostCard, PostView } from '../../src/ui/PostCard.tsx';
 import Section from '../../src/ui/Section.tsx';
 
 export default function PostPage() {
-  const { id } = useParams<{ id: string }>();
+  const { id } = useParams<'/post/[id]'>();
 
   if (!id) {
     throw new Error('fate: Post ID is required.');