create-fate 1.0.3 → 1.3.0

package/templates/fate/graphql-client/public/icon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#111827" />
+  <path
+    d="M18 18h28v6H25v10h17v6H25v16h-7V18Z"
+    fill="#fff"
+  />
+</svg>
+

package/templates/fate/graphql-client/src/App.css

@@ -0,0 +1,28 @@
+@import 'tailwindcss';
+
+body {
+  margin: 0;
+  background: #f8fafc;
+  color: #111827;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #0f172a;
+    color: #f8fafc;
+  }
+}

package/templates/fate/graphql-client/src/fate/graphql.ts

@@ -0,0 +1,52 @@
+import { graphqlMutation } from '@nkzw/fate';
+import { dataView, list, type Entity } from '@nkzw/fate/server';
+
+type GraphQLUser = {
+  id: string;
+  name?: string | null;
+  username?: string | null;
+};
+
+type GraphQLPost = {
+  author?: GraphQLUser | null;
+  id: string;
+  title: string;
+};
+
+export const userDataView = dataView<GraphQLUser>('User')({
+  id: true,
+  name: true,
+  username: true,
+});
+
+export const postDataView = dataView<GraphQLPost>('Post')({
+  author: userDataView,
+  id: true,
+  title: true,
+});
+
+export type User = Entity<typeof userDataView, 'User'>;
+export type Post = Entity<
+  typeof postDataView,
+  'Post',
+  {
+    author: User | null;
+  }
+>;
+
+export const Root = {
+  posts: list(postDataView),
+  viewer: userDataView,
+};
+
+export const fateGraphQL = {
+  mutations: {
+    'post.like': graphqlMutation<Post, { id: string }, Post>('Post', {
+      field: 'postLike',
+    }),
+  },
+  roots: {
+    posts: { field: 'posts' },
+    viewer: { field: 'viewer' },
+  },
+} as const;

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

@@ -0,0 +1,30 @@
+{
+  "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": [
+    ".fate/**/*.ts",
+    ".void/**/*.d.ts",
+    "pages/**/*.ts",
+    "pages/**/*.tsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
+}

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

@@ -0,0 +1,87 @@
+import nkzw from '@nkzw/oxlint-config';
+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, lazyPlugins } from 'vite-plus';
+import { voidPlugin } from 'void';
+
+const isTest = process.env.NODE_ENV === 'test' || process.env.VITEST;
+
+export default defineConfig({
+  optimizeDeps: {
+    exclude: ['@nkzw/fate/client', 'react-fate/client'],
+  },
+  environments: {
+    void_worker: {
+      optimizeDeps: {
+        exclude: [
+          '@nkzw/fate',
+          '@nkzw/fate/client',
+          '@nkzw/fate/server',
+          '@void/react',
+          '@void/react/pages-server',
+          'lucide-react',
+          'react-error-boundary',
+          'react-fate',
+          'react-fate/client',
+        ],
+      },
+    },
+  },
+  fmt: {
+    experimentalSortImports: {
+      newlinesBetween: false,
+    },
+    experimentalSortPackageJson: {
+      sortScripts: true,
+    },
+    experimentalTailwindcss: {
+      stylesheet: 'src/App.css',
+    },
+    ignorePatterns: ['.fate/', '.void/', 'dist/', 'node_modules/', 'pnpm-lock.yaml'],
+    singleQuote: true,
+  },
+  lint: {
+    extends: [nkzw],
+    ignorePatterns: ['.fate', '.void', 'dist', 'node_modules', 'vite.config.ts.timestamp-*'],
+    options: { typeAware: true, typeCheck: true },
+    overrides: [
+      {
+        files: ['src/fate/graphql.ts'],
+        rules: {
+          'no-console': 'off',
+        },
+      },
+    ],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+  plugins: [
+    ...(lazyPlugins(() => [
+      babel({
+        presets: [reactCompilerPreset()],
+      }),
+      tailwindcss(),
+      ...(isTest ? [] : [voidPlugin(), voidReact()]),
+    ]) ?? []),
+    fate({
+      module: './src/fate/graphql.ts',
+      transport: 'graphql',
+    }),
+  ],
+  run: {
+    tasks: {
+      'test:all': {
+        command: 'vp check && vp test',
+      },
+    },
+  },
+  server: { port: 6001 },
+  ssr: { noExternal: ['@nkzw/fate', 'react-fate'] },
+  staged: {
+    '*': 'vp check --fix',
+  },
+});

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

@@ -0,0 +1,29 @@
+{
+  "$schema": "./node_modules/void/schema.json",
+  "head": {
+    "title": "fate",
+    "titleTemplate": "%s | fate",
+    "htmlAttrs": {
+      "lang": "en"
+    },
+    "meta": [
+      {
+        "charset": "utf-8"
+      },
+      {
+        "name": "viewport",
+        "content": "width=device-width, initial-scale=1"
+      }
+    ],
+    "link": [
+      {
+        "rel": "icon",
+        "href": "/icon.svg"
+      }
+    ]
+  },
+  "worker": {
+    "compatibility_date": "2025-12-01",
+    "compatibility_flags": ["nodejs_compat", "no_handle_cross_request_promise_resolution"]
+  }
+}

package/templates/fate/http/README.md

@@ -1,16 +1,10 @@
-<p align="center">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="/public/fate-logo-dark.svg">
-    <source media="(prefers-color-scheme: light)" srcset="/public/fate-logo.svg">
-    <img alt="Logo" src="/public/fate-logo.svg" width="50%">
-  </picture>
-</p>
+# _fate_
 
 **_fate_** is a modern data client for React inspired by [Relay](https://relay.dev/) and [GraphQL](https://graphql.org/). It combines view composition, normalized caching, data masking, Async React features, and type-safe data fetching.
 
 Check out [fate.technology](https://fate.technology) for documentation, examples, and guides.
 
-# _fate_ Quick Start Template
+## Quick Start Template
 
 Create a new fate app with Vite+:
 

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

@@ -36,7 +36,7 @@ const LocaleContext = createLocaleContext({
 });
 
 export default function Layout({ children }: { children: ReactNode }) {
-  const { data: session, isPending } = AuthClient.useSession();
+  const { data: session } = AuthClient.useSession();
   const userId = session?.user.id;
 
   const fate = useMemo(
@@ -57,7 +57,7 @@ export default function Layout({ children }: { children: ReactNode }) {
       <div className="min-h-screen bg-background text-foreground">
         <div className="min-h-screen bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.08),transparent_35%),radial-gradient(circle_at_80%_0,rgba(99,102,241,0.08),transparent_28%)]">
           <Header />
-          {isPending ? (
+          {session ? (
             <Thinking />
           ) : (
             <FateClient client={fate} key={userId}>

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

@@ -4,6 +4,7 @@ import { cx } from 'class-variance-authority';
 import { fbs } from 'fbtee';
 import {
   KeyboardEvent,
+  Suspense,
   startTransition,
   useActionState,
   useCallback,
@@ -11,7 +12,15 @@ import {
   useState,
 } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { useFateClient, useListView, useView, view, ViewRef } from 'react-fate';
+import {
+  defer,
+  type Deferred,
+  useListView,
+  useFateClient,
+  useView,
+  view,
+  ViewRef,
+} from 'react-fate';
 import { Button } from '../ui/Button.tsx';
 import Card from '../ui/Card.tsx';
 import AuthClient from '../user/AuthClient.tsx';
@@ -30,13 +39,36 @@ const CommentConnectionView = {
 export const PostView = view<Post>()({
   author: UserView,
   commentCount: true,
-  comments: CommentConnectionView,
+  comments: defer(CommentConnectionView),
   content: true,
   id: true,
   likes: true,
   title: true,
 });
 
+const PostComments = ({
+  comments,
+  post,
+}: {
+  comments: Deferred<{ items: ReadonlyArray<{ node: ViewRef<'Comment'> }> }>;
+  post: { commentCount: number; id: string; title: string };
+}) => {
+  const [items, loadNext] = useListView(CommentConnectionView, comments);
+
+  return items.length > 0 ? (
+    <VStack gap={12}>
+      {items.map(({ node }) => (
+        <CommentCard comment={node} key={node.id} post={post} />
+      ))}
+      {loadNext ? (
+        <Button onClick={loadNext} variant="ghost">
+          <fbt desc="Load more comments button">Load more comments</fbt>
+        </Button>
+      ) : null}
+    </VStack>
+  ) : null;
+};
+
 const CommentInput = ({
   error,
   post,
@@ -125,7 +157,6 @@ export function PostCard({ detail, post: postRef }: { detail?: boolean; post: Vi
   const fate = useFateClient();
   const post = useView(PostView, postRef);
   const author = useView(UserView, post.author);
-  const [comments, loadNext] = useListView(CommentConnectionView, post.comments);
 
   const [likeResult, likeAction, likeIsPending] = useActionState(fate.actions.post.like, null);
 
@@ -259,18 +290,9 @@ export function PostCard({ detail, post: postRef }: { detail?: boolean; post: Vi
               </fbt:plural>
             </fbt>
           </h4>
-          {comments.length > 0 ? (
-            <VStack gap={12}>
-              {comments.map(({ node }) => (
-                <CommentCard comment={node} key={node.id} post={post} />
-              ))}
-              {loadNext ? (
-                <Button onClick={loadNext} variant="ghost">
-                  <fbt desc="Load more comments button">Load more comments</fbt>
-                </Button>
-              ) : null}
-            </VStack>
-          ) : null}
+          <Suspense fallback={null}>
+            <PostComments comments={post.comments} post={post} />
+          </Suspense>
           <ErrorBoundary fallbackRender={({ error }) => <CommentInput error={error} post={post} />}>
             <CommentInput post={post} />
           </ErrorBoundary>

package/templates/fate/http/pnpm-workspace.yaml

@@ -11,9 +11,14 @@ allowBuilds:
   workerd: true
 
 catalog:
-  vite: npm:@voidzero-dev/vite-plus-core@^0.1.20
-  vite-plus: ^0.1.20
-  vitest: npm:@voidzero-dev/vite-plus-test@^0.1.20
+  vite: npm:@voidzero-dev/vite-plus-core@^0.1.23
+  vite-plus: ^0.1.23
+  vitest: npm:@voidzero-dev/vite-plus-test@^0.1.23
+
+minimumReleaseAgeExclude:
+  - '@voidzero-dev/vite-plus-core'
+  - '@voidzero-dev/vite-plus-test'
+  - vite-plus
 
 onlyBuiltDependencies:
   - '@swc/core'
@@ -24,6 +29,7 @@ onlyBuiltDependencies:
   - unrs-resolver
 
 overrides:
+  kysely: 0.28.17
   vite: 'catalog:'
   vitest: 'catalog:'
 

package/templates/fate/http/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, entryFileNames: 'index.js' },
   },
 });

package/templates/fate/prisma/README.md

@@ -1,16 +1,10 @@
-<p align="center">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="/public/fate-logo-dark.svg">
-    <source media="(prefers-color-scheme: light)" srcset="/public/fate-logo.svg">
-    <img alt="Logo" src="/public/fate-logo.svg" width="50%">
-  </picture>
-</p>
+# _fate_
 
 **_fate_** is a modern data client for React inspired by [Relay](https://relay.dev/) and [GraphQL](https://graphql.org/). It combines view composition, normalized caching, data masking, Async React features, and type-safe data fetching.
 
 Check out [fate.technology](https://fate.technology) for documentation, examples, and guides.
 
-# _fate_ Quick Start Template
+## Quick Start Template
 
 Create a new fate app with Vite+:
 

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

@@ -37,7 +37,7 @@ const LocaleContext = createLocaleContext({
 });
 
 export default function Layout({ children }: { children: ReactNode }) {
-  const { data: session, isPending } = AuthClient.useSession();
+  const { data: session } = AuthClient.useSession();
   const userId = session?.user.id;
 
   const fate = useMemo(
@@ -62,7 +62,7 @@ export default function Layout({ children }: { children: ReactNode }) {
       <div className="min-h-screen bg-background text-foreground">
         <div className="min-h-screen bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.08),transparent_35%),radial-gradient(circle_at_80%_0,rgba(99,102,241,0.08),transparent_28%)]">
           <Header />
-          {isPending ? (
+          {session ? (
             <Thinking />
           ) : (
             <FateClient client={fate} key={userId}>

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

@@ -4,6 +4,7 @@ import { cx } from 'class-variance-authority';
 import { fbs } from 'fbtee';
 import {
   KeyboardEvent,
+  Suspense,
   startTransition,
   useActionState,
   useCallback,
@@ -11,7 +12,15 @@ import {
   useState,
 } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { useFateClient, useListView, useView, view, ViewRef } from 'react-fate';
+import {
+  defer,
+  type Deferred,
+  useListView,
+  useFateClient,
+  useView,
+  view,
+  ViewRef,
+} from 'react-fate';
 import { Button } from '../ui/Button.tsx';
 import Card from '../ui/Card.tsx';
 import AuthClient from '../user/AuthClient.tsx';
@@ -30,13 +39,36 @@ const CommentConnectionView = {
 export const PostView = view<Post>()({
   author: UserView,
   commentCount: true,
-  comments: CommentConnectionView,
+  comments: defer(CommentConnectionView),
   content: true,
   id: true,
   likes: true,
   title: true,
 });
 
+const PostComments = ({
+  comments,
+  post,
+}: {
+  comments: Deferred<{ items: ReadonlyArray<{ node: ViewRef<'Comment'> }> }>;
+  post: { commentCount: number; id: string; title: string };
+}) => {
+  const [items, loadNext] = useListView(CommentConnectionView, comments);
+
+  return items.length > 0 ? (
+    <VStack gap={12}>
+      {items.map(({ node }) => (
+        <CommentCard comment={node} key={node.id} post={post} />
+      ))}
+      {loadNext ? (
+        <Button onClick={loadNext} variant="ghost">
+          <fbt desc="Load more comments button">Load more comments</fbt>
+        </Button>
+      ) : null}
+    </VStack>
+  ) : null;
+};
+
 const CommentInput = ({
   error,
   post,
@@ -125,7 +157,6 @@ export function PostCard({ detail, post: postRef }: { detail?: boolean; post: Vi
   const fate = useFateClient();
   const post = useView(PostView, postRef);
   const author = useView(UserView, post.author);
-  const [comments, loadNext] = useListView(CommentConnectionView, post.comments);
 
   const [likeResult, likeAction, likeIsPending] = useActionState(fate.actions.post.like, null);
 
@@ -259,18 +290,9 @@ export function PostCard({ detail, post: postRef }: { detail?: boolean; post: Vi
               </fbt:plural>
             </fbt>
           </h4>
-          {comments.length > 0 ? (
-            <VStack gap={12}>
-              {comments.map(({ node }) => (
-                <CommentCard comment={node} key={node.id} post={post} />
-              ))}
-              {loadNext ? (
-                <Button onClick={loadNext} variant="ghost">
-                  <fbt desc="Load more comments button">Load more comments</fbt>
-                </Button>
-              ) : null}
-            </VStack>
-          ) : null}
+          <Suspense fallback={null}>
+            <PostComments comments={post.comments} post={post} />
+          </Suspense>
           <ErrorBoundary fallbackRender={({ error }) => <CommentInput error={error} post={post} />}>
             <CommentInput post={post} />
           </ErrorBoundary>

package/templates/fate/prisma/pnpm-workspace.yaml

@@ -12,9 +12,14 @@ allowBuilds:
   workerd: true
 
 catalog:
-  vite: npm:@voidzero-dev/vite-plus-core@^0.1.20
-  vite-plus: ^0.1.20
-  vitest: npm:@voidzero-dev/vite-plus-test@^0.1.20
+  vite: npm:@voidzero-dev/vite-plus-core@^0.1.23
+  vite-plus: ^0.1.23
+  vitest: npm:@voidzero-dev/vite-plus-test@^0.1.23
+
+minimumReleaseAgeExclude:
+  - '@voidzero-dev/vite-plus-core'
+  - '@voidzero-dev/vite-plus-test'
+  - vite-plus
 
 onlyBuiltDependencies:
   - '@prisma/client'
@@ -27,6 +32,7 @@ onlyBuiltDependencies:
   - unrs-resolver
 
 overrides:
+  kysely: 0.28.17
   vite: 'catalog:'
   vitest: 'catalog:'
 

package/templates/fate/prisma/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, entryFileNames: 'index.js' },
   },
 });

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

@@ -41,7 +41,7 @@ export default defineConfig({
       'client/dist',
       'server/dist',
       'server/src/prisma/pothos-types.ts',
-      'server/src/prisma/prisma-client/*',
+      'server/src/prisma/prisma-client/**',
       'vite.config.ts.timestamp-*',
       'client/vite.config.ts.timestamp-*',
       'server/vite.config.ts.timestamp-*',

package/templates/fate/void/package.json

@@ -17,7 +17,8 @@
     "dev": "vp dev",
     "dev:setup": "vp run prepare:void && vp run db:seed && vp run fate:generate",
     "fate:generate": "vp exec fate generate",
-    "prepare:void": "void prepare"
+    "prepare:void": "void prepare",
+    "test:all": "vp check && vp test"
   },
   "dependencies": {
     "@nkzw/core": "^1.3.1",
@@ -40,17 +41,24 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@nkzw/eslint-plugin": "^2.0.0",
+    "@nkzw/oxlint-config": "^1.2.1",
     "@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",
+    "@typescript/native-preview": "7.0.0-dev.20260505.1",
     "@vitejs/plugin-react": "^6.0.1",
     "babel-plugin-react-compiler": "^1.0.0",
+    "eslint-plugin-no-only-tests": "^3.4.0",
+    "eslint-plugin-perfectionist": "^5.9.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "tailwindcss": "^4.2.4",
     "ts-node": "^10.9.2",
     "vite": "catalog:",
-    "vite-plus": "catalog:"
+    "vite-plus": "catalog:",
+    "vitest": "catalog:"
   },
   "browserslist": [
     ">0.2%",

package/templates/fate/void/pages/login.tsx

@@ -3,7 +3,7 @@ import { useRouter, useShared } from '@void/react';
 import { ExternalLinkIcon } from 'lucide-react';
 import { useActionState, useEffect, useState } from 'react';
 import type { SharedData } from '../src/lib/shared.ts';
-import { Button } from '../src/ui/Button.tsx';
+import { AsyncButton } from '../src/ui/Button.tsx';
 import Card from '../src/ui/Card.tsx';
 import H2 from '../src/ui/H2.tsx';
 import Input from '../src/ui/Input.tsx';
@@ -71,9 +71,9 @@ export default function LoginPage() {
                   value={password}
                 />
                 <div>
-                  <Button type="submit" variant="outline">
+                  <AsyncButton type="submit" variant="outline">
                     Sign In
-                  </Button>
+                  </AsyncButton>
                 </div>
               </VStack>
             </Stack>

package/templates/fate/void/pnpm-workspace.yaml

@@ -2,18 +2,22 @@ packages:
   - .
 
 allowBuilds:
-  '@swc/core': true
   better-sqlite3: true
   esbuild: true
   sharp: true
   workerd: true
 
 catalog:
-  vite: npm:@voidzero-dev/vite-plus-core@0.1.20
-  vite-plus: 0.1.20
+  vite: npm:@voidzero-dev/vite-plus-core@^0.1.23
+  vite-plus: ^0.1.23
+  vitest: npm:@voidzero-dev/vite-plus-test@^0.1.23
+
+minimumReleaseAgeExclude:
+  - '@voidzero-dev/vite-plus-core'
+  - '@voidzero-dev/vite-plus-test'
+  - vite-plus
 
 onlyBuiltDependencies:
-  - '@swc/core'
   - '@tailwindcss/oxide'
   - better-sqlite3
   - esbuild
@@ -22,10 +26,14 @@ onlyBuiltDependencies:
   - workerd
 
 overrides:
+  kysely: 0.28.17
   vite: 'catalog:'
+  vitest: 'catalog:'
 
 peerDependencyRules:
   allowAny:
     - vite
+    - vitest
   allowedVersions:
     vite: '*'
+    vitest: '*'