create-fate 1.3.3 → 1.5.0

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

@@ -9,9 +9,17 @@ dotenv.config({
   quiet: true,
 });
 
+const databaseUrl = process.env.DATABASE_URL;
+if (!databaseUrl) {
+  throw new Error('Missing DATABASE_URL.');
+}
+
 export default defineConfig({
+  datasource: {
+    url: databaseUrl,
+  },
   migrations: {
-    seed: `node --no-warnings --experimental-specifier-resolution=node --loader ts-node/esm --env-file .env src/prisma/seed.tsx`,
+    seed: `node --no-warnings --experimental-specifier-resolution=node --import @oxc-node/core/register --env-file .env src/prisma/seed.tsx`,
   },
   schema: './src/prisma/schema.prisma',
 });

package/templates/fate/graphql/server/scripts/generate-graphql.tsx

@@ -1,4 +1,4 @@
-#!/usr/bin/env node --no-warnings --experimental-specifier-resolution=node --loader ts-node/esm
+#!/usr/bin/env node --no-warnings --experimental-specifier-resolution=node --import @oxc-node/core/register
 import { createHash } from 'node:crypto';
 import { writeFileSync } from 'node:fs';
 import { join, posix, relative, sep } from 'node:path';

package/templates/fate/graphql/server/src/index.tsx

@@ -1,4 +1,4 @@
-#!/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
+#!/usr/bin/env NODE_ENV=development node_modules/.bin/nodemon -q -I --exec node --no-warnings --experimental-specifier-resolution=node --import @oxc-node/core/register --env-file .env
 import { parseArgs, styleText } from 'node:util';
 import { serve } from '@hono/node-server';
 import parseInteger from '@nkzw/core/parseInteger.js';

package/templates/fate/graphql/server/src/prisma/schema.prisma

@@ -69,6 +69,7 @@ model Account {
   id                    String    @unique @default(uuid(7))
   accountId             String
   providerId            String
+  issuer                String
   userId                String
   user                  User      @relation(fields: [userId], references: [id], onDelete: Cascade)
   accessToken           String?
@@ -81,7 +82,7 @@ model Account {
   createdAt             DateTime
   updatedAt             DateTime
 
-  @@unique([providerId, accountId])
+  @@unique([issuer, accountId])
   @@map("account")
 }
 

package/templates/fate/graphql/server/src/prisma/seed.tsx

@@ -1,4 +1,4 @@
-#!/usr/bin/env NODE_ENV=development node --no-warnings --experimental-specifier-resolution=node --loader ts-node/esm --env-file .env
+#!/usr/bin/env NODE_ENV=development node --no-warnings --experimental-specifier-resolution=node --import @oxc-node/core/register --env-file .env
 import { styleText } from 'node:util';
 import randomEntry from '@nkzw/core/randomEntry.js';
 import { categories, comments, events, posts, tags, users } from '../../../seedData.ts';

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

@@ -19,15 +19,5 @@
     "target": "es2022"
   },
   "exclude": ["node_modules", "src/prisma/pothos-types.ts", "src/prisma/prisma-client"],
-  "include": ["**/*.ts", "**/*.tsx"],
-  "ts-node": {
-    "transpileOnly": true,
-    "transpiler": "ts-node/transpilers/swc",
-    "files": true,
-    "compilerOptions": {
-      "module": "esnext",
-      "isolatedModules": false,
-      "target": "es2022"
-    }
-  }
+  "include": ["../seedData.ts", "**/*.ts", "**/*.tsx"]
 }

package/templates/fate/graphql/tsconfig.json

@@ -20,14 +20,5 @@
     "types": ["vite/client"]
   },
   "exclude": ["**/.void/**/*.ts", "node_modules"],
-  "include": ["**/.fate/*.ts", "**/*.ts", "**/*.tsx"],
-  "ts-node": {
-    "transpileOnly": true,
-    "transpiler": "ts-node/transpilers/swc",
-    "files": true,
-    "compilerOptions": {
-      "module": "esnext",
-      "isolatedModules": false
-    }
-  }
+  "include": ["**/.fate/*.ts", "**/*.ts", "**/*.tsx"]
 }

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

@@ -67,3 +67,12 @@ Common commands:
 - `vp run fate:generate` refreshes _fate_ client support after changing `src/fate/graphql.ts`.
 - `vp check --fix` formats, lints, and type-checks the project.
 - `vp run test:all` verifies the project.
+
+## Translations
+
+The React app uses fbtee 4 with its native Oxc Vite plugin and CLI. Setup and builds generate the runtime translation files automatically.
+
+- Wrap UI text in `<fbt desc="Translator context">Text</fbt>`; use `fbs('Text', 'Translator context')` from `fbtee` for string attributes such as placeholders.
+- Run `vp run fbtee:collect` in the app root to extract strings, then `vp run fbtee:prepare` to update the editable German and Japanese files in `translations/`.
+- Translate entries marked `"status": "new"`, remove that status when finished, and run `vp run fbtee:translate` (or `vp run fbtee:all`). Commit `translations/`; runtime files in `src/translations/` are generated and ignored.
+- Add locales to `src/lib/AvailableLanguages.tsx` and the `fbtee:prepare` script. The language selector remembers the choice. Server rendering starts in English and restores the browser preference after hydration.

package/templates/fate/graphql-client/_gitignore

@@ -12,3 +12,6 @@ dist/
 pnpm-lock.yaml
 tsconfig.tsbuildinfo
 vite.config.ts.timestamp-*
+.enum_manifest.json
+source_strings.json
+src/translations/

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

@@ -10,41 +10,44 @@
   },
   "type": "module",
   "scripts": {
-    "build": "vp build",
+    "build": "vp run fbtee:all && vp build",
     "dev": "vp dev",
-    "dev:setup": "vp run prepare:void && vp run fate:generate",
+    "dev:setup": "vp run fbtee:all && vp run prepare:void && vp run fate:generate",
     "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",
     "test:all": "vp check && vp test"
   },
   "dependencies": {
     "@nkzw/fate": "latest",
-    "@void/react": "^0.7.13",
-    "graphql-sse": "^2.6.0",
-    "lucide-react": "^1.14.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "react-error-boundary": "^6.1.1",
+    "@void/react": "^0.10.12",
+    "fbtee": "^4.0.0",
+    "graphql-sse": "^2.6.1",
+    "lucide-react": "^1.34.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-error-boundary": "^6.1.3",
     "react-fate": "latest",
-    "void": "^0.7.13"
+    "void": "^0.10.12"
   },
   "devDependencies": {
     "@nkzw/eslint-plugin": "^2.0.0",
-    "@nkzw/oxlint-config": "^1.2.1",
-    "@rolldown/plugin-babel": "^0.2.3",
-    "@swc/core": "^1.15.33",
-    "@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",
+    "@nkzw/fbtee-cli": "^4.0.0",
+    "@nkzw/oxlint-config": "^2.0.1",
+    "@nkzw/vite-plugin-fbtee": "^4.0.0",
+    "@oxc-node/core": "^0.1.0",
+    "@swc/core": "^1.16.1",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.4.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "@vitejs/plugin-react": "^6.1.0",
+    "oxc-transform-react": "^0.147.0",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^7.0.2",
     "vite": "catalog:",
     "vite-plus": "catalog:",
     "vitest": "catalog:"

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

@@ -1,34 +1,71 @@
-import { ConnectionRef, useListView, useRequest } from 'react-fate';
-import { postDataView, userDataView } from '../src/fate/graphql.ts';
+import { ConnectionRef, useListView, useRequest, useView, view, ViewRef } from 'react-fate';
+import type { Post, User } from '../src/fate/graphql.ts';
+
+const UserView = view<User>()({
+  id: true,
+  name: true,
+  username: true,
+});
+
+const PostView = view<Post>()({
+  author: UserView,
+  title: true,
+});
 
 const PostConnectionView = {
   args: { first: 10 },
   items: {
-    node: postDataView,
+    node: PostView,
   },
   pagination: {
     hasNext: true,
   },
 };
 
+const UserName = ({ user: userRef }: { user: ViewRef<'User'> }) => {
+  const user = useView(UserView, userRef);
+
+  return user.name ?? user.username ?? user.id;
+};
+
+const PostItem = ({ post: postRef }: { post: ViewRef<'Post'> }) => {
+  const post = useView(PostView, postRef);
+
+  return (
+    <article className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+      <h3 className="text-lg font-semibold">{post.title}</h3>
+      {post.author ? (
+        <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+          <UserName user={post.author} />
+        </p>
+      ) : null}
+    </article>
+  );
+};
+
+const Viewer = ({ viewer: viewerRef }: { viewer: ViewRef<'User'> }) => {
+  return (
+    <section className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+      <h2 className="text-sm font-medium text-slate-500 dark:text-slate-400">
+        <fbt desc="index: Viewer">Viewer</fbt>
+      </h2>
+      <p className="mt-2 text-lg font-semibold">
+        <UserName user={viewerRef} />
+      </p>
+    </section>
+  );
+};
+
 const PostList = ({ posts: postsRef }: { posts: ConnectionRef<'Post'> }) => {
   const [posts] = useListView(PostConnectionView, postsRef);
 
   return (
     <section className="space-y-4">
-      <h2 className="text-2xl font-semibold">Posts</h2>
+      <h2 className="text-2xl font-semibold">
+        <fbt desc="index: Posts">Posts</fbt>
+      </h2>
       {posts.map(({ node }) => (
-        <article
-          className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"
-          key={node.id}
-        >
-          <h3 className="text-lg font-semibold">{node.title}</h3>
-          {node.author ? (
-            <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
-              {node.author.name ?? node.author.username ?? node.author.id}
-            </p>
-          ) : null}
-        </article>
+        <PostItem key={node.id} post={node} />
       ))}
     </section>
   );
@@ -37,7 +74,7 @@ const PostList = ({ posts: postsRef }: { posts: ConnectionRef<'Post'> }) => {
 export default function HomePage() {
   const { posts, viewer } = useRequest({
     posts: { list: PostConnectionView },
-    viewer: { view: userDataView },
+    viewer: { view: UserView },
   });
 
   return (
@@ -47,22 +84,19 @@ export default function HomePage() {
           fate + GraphQL
         </p>
         <h1 className="text-4xl font-semibold tracking-tight text-slate-950 dark:text-white">
-          Use fate with an existing GraphQL server
+          <fbt desc="index: Use fate with an existing GraphQL server">
+            Use fate with an existing GraphQL server
+          </fbt>{' '}
         </h1>
         <p className="max-w-2xl text-slate-600 dark:text-slate-300">
-          Replace the sample views in <code>src/fate/graphql.ts</code> with your schema types and
-          point <code>VITE_GRAPHQL_URL</code> at your API.
+          <fbt desc="GraphQL client setup instructions">
+            Replace the sample views in <code>src/fate/graphql.ts</code> with your schema types and
+            point <code>VITE_GRAPHQL_URL</code> at your API.
+          </fbt>
         </p>
       </header>
 
-      {viewer ? (
-        <section className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
-          <h2 className="text-sm font-medium text-slate-500 dark:text-slate-400">Viewer</h2>
-          <p className="mt-2 text-lg font-semibold">
-            {viewer.name ?? viewer.username ?? viewer.id}
-          </p>
-        </section>
-      ) : null}
+      {viewer ? <Viewer viewer={viewer} /> : null}
       <PostList posts={posts} />
     </main>
   );

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

@@ -1,15 +1,17 @@
-import '../src/App.css';
 import { ReactNode, Suspense, useMemo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import '../src/App.css';
 import { FateClient } from 'react-fate';
 import { createFateClient } from 'react-fate/client';
+import LocaleContext from '../src/lib/LocaleContext.tsx';
+import LocaleSwitcher from '../src/ui/LocaleSwitcher.tsx';
 
 const graphQLURL = import.meta.env.VITE_GRAPHQL_URL;
 const graphQLLiveURL = import.meta.env.VITE_GRAPHQL_LIVE_URL;
 
 const Loading = () => (
   <main className="mx-auto flex min-h-screen max-w-4xl items-center px-6 py-16 text-slate-500">
-    Loading...
+    <fbt desc="layout: Loading...">Loading...</fbt>{' '}
   </main>
 );
 
@@ -24,18 +26,23 @@ export default function Layout({ children }: { children: ReactNode }) {
   );
 
   return (
-    <FateClient client={fate}>
-      <ErrorBoundary
-        fallbackRender={({ error }) => (
-          <main className="mx-auto min-h-screen max-w-4xl px-6 py-16">
-            <div className="rounded-lg border border-red-200 bg-red-50 p-5 text-red-950 dark:border-red-900 dark:bg-red-950 dark:text-red-50">
-              {error instanceof Error ? error.message : String(error)}
-            </div>
-          </main>
-        )}
-      >
-        <Suspense fallback={<Loading />}>{children}</Suspense>
-      </ErrorBoundary>
-    </FateClient>
+    <LocaleContext>
+      <div className="mx-auto max-w-4xl px-6 pt-6">
+        <LocaleSwitcher />
+      </div>
+      <FateClient client={fate}>
+        <ErrorBoundary
+          fallbackRender={({ error }) => (
+            <main className="mx-auto min-h-screen max-w-4xl px-6 py-16">
+              <div className="rounded-lg border border-red-200 bg-red-50 p-5 text-red-950 dark:border-red-900 dark:bg-red-950 dark:text-red-50">
+                {error instanceof Error ? error.message : String(error)}
+              </div>
+            </main>
+          )}
+        >
+          <Suspense fallback={<Loading />}>{children}</Suspense>
+        </ErrorBoundary>
+      </FateClient>
+    </LocaleContext>
   );
 }

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

@@ -3,29 +3,31 @@ packages:
 
 allowBuilds:
   '@swc/core': true
+  better-sqlite3: true
   esbuild: true
   sharp: true
   workerd: true
 
 catalog:
-  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
+  vite: npm:@voidzero-dev/vite-plus-core@^0.3.0
+  vite-plus: ^0.3.0
+  vitest: ^4.1.11
 
 minimumReleaseAgeExclude:
   - '@voidzero-dev/vite-plus-core'
-  - '@voidzero-dev/vite-plus-test'
   - vite-plus
 
 onlyBuiltDependencies:
   - '@swc/core'
   - '@tailwindcss/oxide'
+  - better-sqlite3
   - esbuild
   - msgpackr-extract
   - sharp
   - workerd
 
 overrides:
+  better-auth: 1.7.2
   vite: 'catalog:'
   vitest: 'catalog:'
 

package/templates/fate/graphql-client/src/lib/AvailableLanguages.tsx

@@ -0,0 +1,5 @@
+export default new Map([
+  ['en-US', 'English'],
+  ['de-DE', 'Deutsch (German)'],
+  ['ja-JP', '日本語 (Japanese)'],
+]);

package/templates/fate/graphql-client/src/lib/LocaleContext.tsx

@@ -0,0 +1,61 @@
+/// <reference types="fbtee/ReactTypes.d.ts" />
+
+import { createLocaleContext, useLocaleContext } from 'fbtee';
+import { ReactNode, startTransition, useEffect, useState } from 'react';
+import AvailableLanguages from './AvailableLanguages.tsx';
+
+const Context = createLocaleContext({
+  availableLanguages: AvailableLanguages,
+  // Keep the server and first client render identical; restore preferences after hydration.
+  clientLocales: ['en-US'],
+  fallbackLocale: 'en-US',
+  loadLocale: async (locale) => {
+    if (locale !== 'en-US' && AvailableLanguages.has(locale)) {
+      return (await import(`../translations/${locale}.json`)).default[locale];
+    }
+    return {};
+  },
+});
+
+function RestoreLocale({ restored, onRestore }: { restored: boolean; onRestore: () => void }) {
+  const { locale, setLocale } = useLocaleContext();
+  useEffect(() => {
+    if (restored) return;
+    onRestore();
+    let savedLocale: string | null = null;
+    try {
+      savedLocale = localStorage.getItem('fbtee:locale');
+    } catch {
+      // Browser storage can be unavailable.
+    }
+    const preferred = [savedLocale, ...navigator.languages, navigator.language]
+      .filter((value): value is string => !!value)
+      .map((value) => value.replaceAll('_', '-'));
+    const nextLocale = preferred
+      .map((value) =>
+        AvailableLanguages.has(value)
+          ? value
+          : [...AvailableLanguages.keys()].find(
+              (available) => available.split('-')[0] === value.split('-')[0],
+            ),
+      )
+      .find(Boolean);
+    if (nextLocale && nextLocale !== locale) {
+      startTransition(() => setLocale(nextLocale));
+    }
+  }, [locale, setLocale, restored, onRestore]);
+  useEffect(() => {
+    document.documentElement.lang = locale;
+  }, [locale]);
+  return null;
+}
+
+export default function LocaleContext({ children }: { children: ReactNode }) {
+  const [restored, setRestored] = useState(false);
+  return (
+    <Context>
+      <RestoreLocale restored={restored} onRestore={() => setRestored(true)} />
+      {children}
+    </Context>
+  );
+}

package/templates/fate/graphql-client/src/ui/LocaleSwitcher.tsx

@@ -0,0 +1,34 @@
+import { useLocaleContext } from 'fbtee';
+import { startTransition } from 'react';
+import AvailableLanguages from '../lib/AvailableLanguages.tsx';
+
+export default function LocaleSwitcher() {
+  const { locale, localeChangeIsPending, setLocale } = useLocaleContext();
+  return (
+    <label className="inline-flex items-center gap-2 text-sm">
+      <span className="sr-only">
+        <fbt desc="Locale switcher button">Change Language</fbt>
+      </span>
+      <select
+        className="rounded-md border border-gray-300 bg-background px-2 py-1 text-foreground"
+        disabled={localeChangeIsPending}
+        onChange={(event) => {
+          const nextLocale = event.target.value;
+          try {
+            localStorage.setItem('fbtee:locale', nextLocale);
+          } catch {
+            // Changing the language still works without browser storage.
+          }
+          startTransition(() => setLocale(nextLocale));
+        }}
+        value={locale}
+      >
+        {[...AvailableLanguages].map(([value, name]) => (
+          <option key={value} value={value}>
+            {name}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}