create-fate 1.4.0 → 1.5.1

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>
+  );
+}

package/templates/fate/graphql-client/translations/de-DE.json

@@ -0,0 +1,225 @@
+{
+  "fb-locale": "de-DE",
+  "translations": {
+    "IYUmtYxQtGdt1MucjXrsVA==": {
+      "description": "Label with meaning 'at least number'",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{number}+",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "ZIF1WhVQwt7WZJvFTEbMWw==": {
+      "description": "Label with meaning 'less than number'",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "<{number}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "Oc/9PrbjfyLHS60BXceD1A==": {
+      "description": "A list of items of various types, for example: \"San Francisco; London; Tokyo\". {previous items} and {following items} are themselves lists that contain one or more items.",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{previous items}; {following items}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "AXXbKEUZuc0ji1IClRrOOw==": {
+      "description": "A list of items of various types separated by bullets, for example: \"San Francisco \\u2022 London \\u2022 Tokyo\". {previous items} and {following items} are themselves lists that contain one or more items.",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{previous items} • {following items}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "89ACgPMtnwlLDSeqhLBx2Q==": {
+      "description": "A list of items of various types separated by commas, for example: \"San Francisco, London, Tokyo\". {previous items} and {following items} are themselves lists that contain one or more items.",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{previous items}, {following items}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "5hL7VXOBVnetm46YAjpX0g==": {
+      "description": "A list of items of various types with a serial comma, for example: \"item1, item2, and item3\"",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{list of items} und {last item}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "icNetEL/crQv/PS6yhySVQ==": {
+      "description": "A list of items of various types, for example: \"item1, item2, item3 and item4\"",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{list of items} und {last item}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "8kLAQ3ffiiFnQ/bWPqXfuQ==": {
+      "description": "A list of items of various types with a serial comma, for example: \"item1, item2, or item3\"",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{list of items} oder {last item}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "8eSaAzrWtAqn9ktNKfkaEg==": {
+      "description": "A list of items of various types, for example: \"item1, item2, item3 or item4\"",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{list of items} oder {last item}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "+IBI7kr/mMKdzp+3stDvkw==": {
+      "description": "A list of items of various types, for example: \"San Francisco; London; Tokyo\". {previous items} itself contains one or more items.",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{previous items}; {last item}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "55IeE8c0qqtjTU0lo7q9AA==": {
+      "description": "A list of items of various types separated by bullets, for example: \"San Francisco \\u2022 London \\u2022 Tokyo\". {previous items} contains one or more items.",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{list of items} • {last item}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "6PRJS0QalZfvaN8CkKCUCw==": {
+      "description": "A list of items of various types, for example: \"item1, item2, item3, item4\"",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{list of items}, {last item}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "6/ZbJcEx19aXKls64qknkg==": {
+      "description": "Locale switcher button",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "Sprache ändern",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "wfNswo3mwqgq+8bQUCJAPA==": {
+      "description": "index: Viewer",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "Angemeldete Person",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "mMgxQsJPII8/aJtwXOPsNw==": {
+      "description": "index: Posts",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "Beiträge",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "LyADov8X2C8AsE0BOJ73Mg==": {
+      "description": "index: Use fate with an existing GraphQL server",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "fate mit einem bestehenden GraphQL-Server verwenden",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "wlLz2xe9I3pIUzeg46KuVw==": {
+      "description": "layout: Loading...",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "Lädt…",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "4QjroIHQHerlYYiN65OAqQ==": {
+      "description": "GraphQL client setup instructions",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "Ersetze die Beispiel-Views in {=src/fate/graphql.ts} durch deine Schematypen und setze {=VITE_GRAPHQL_URL} auf deine API.",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "wDeH760jWvob7b0UD/ldjw==": {
+      "description": "In the phrase: \"Replace the sample views in {=src/fate/graphql.ts} with your schema types and point {=VITE_GRAPHQL_URL} at your API.\"",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "src/fate/graphql.ts",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "T4saJreAWC68v2UUSToqoA==": {
+      "description": "In the phrase: \"Replace the sample views in {=src/fate/graphql.ts} with your schema types and point {=VITE_GRAPHQL_URL} at your API.\"",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "VITE_GRAPHQL_URL",
+          "variations": {}
+        }
+      ],
+      "types": []
+    }
+  }
+}

package/templates/fate/graphql-client/translations/ja-JP.json

@@ -0,0 +1,225 @@
+{
+  "fb-locale": "ja-JP",
+  "translations": {
+    "IYUmtYxQtGdt1MucjXrsVA==": {
+      "description": "Label with meaning 'at least number'",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{number}+",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "ZIF1WhVQwt7WZJvFTEbMWw==": {
+      "description": "Label with meaning 'less than number'",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "<{number}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "Oc/9PrbjfyLHS60BXceD1A==": {
+      "description": "A list of items of various types, for example: \"San Francisco; London; Tokyo\". {previous items} and {following items} are themselves lists that contain one or more items.",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{previous items}; {following items}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "AXXbKEUZuc0ji1IClRrOOw==": {
+      "description": "A list of items of various types separated by bullets, for example: \"San Francisco \\u2022 London \\u2022 Tokyo\". {previous items} and {following items} are themselves lists that contain one or more items.",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{previous items} • {following items}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "89ACgPMtnwlLDSeqhLBx2Q==": {
+      "description": "A list of items of various types separated by commas, for example: \"San Francisco, London, Tokyo\". {previous items} and {following items} are themselves lists that contain one or more items.",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{previous items}, {following items}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "5hL7VXOBVnetm46YAjpX0g==": {
+      "description": "A list of items of various types with a serial comma, for example: \"item1, item2, and item3\"",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{list of items}、そして {last item}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "icNetEL/crQv/PS6yhySVQ==": {
+      "description": "A list of items of various types, for example: \"item1, item2, item3 and item4\"",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{list of items} と {last item}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "8kLAQ3ffiiFnQ/bWPqXfuQ==": {
+      "description": "A list of items of various types with a serial comma, for example: \"item1, item2, or item3\"",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{list of items}、または {last item}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "8eSaAzrWtAqn9ktNKfkaEg==": {
+      "description": "A list of items of various types, for example: \"item1, item2, item3 or item4\"",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{list of items} または {last item}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "+IBI7kr/mMKdzp+3stDvkw==": {
+      "description": "A list of items of various types, for example: \"San Francisco; London; Tokyo\". {previous items} itself contains one or more items.",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{previous items}; {last item}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "55IeE8c0qqtjTU0lo7q9AA==": {
+      "description": "A list of items of various types separated by bullets, for example: \"San Francisco \\u2022 London \\u2022 Tokyo\". {previous items} contains one or more items.",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{list of items} • {last item}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "6PRJS0QalZfvaN8CkKCUCw==": {
+      "description": "A list of items of various types, for example: \"item1, item2, item3, item4\"",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{list of items}、{last item}",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "6/ZbJcEx19aXKls64qknkg==": {
+      "description": "Locale switcher button",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "言語を変更",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "wfNswo3mwqgq+8bQUCJAPA==": {
+      "description": "index: Viewer",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "ログインユーザー",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "mMgxQsJPII8/aJtwXOPsNw==": {
+      "description": "index: Posts",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "投稿",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "LyADov8X2C8AsE0BOJ73Mg==": {
+      "description": "index: Use fate with an existing GraphQL server",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "既存の GraphQL サーバーで fate を使う",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "wlLz2xe9I3pIUzeg46KuVw==": {
+      "description": "layout: Loading...",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "読み込み中…",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "4QjroIHQHerlYYiN65OAqQ==": {
+      "description": "GraphQL client setup instructions",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "{=src/fate/graphql.ts} のサンプルビューを自分のスキーマ型に置き換え、{=VITE_GRAPHQL_URL} を自分の API に設定してください。",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "wDeH760jWvob7b0UD/ldjw==": {
+      "description": "In the phrase: \"Replace the sample views in {=src/fate/graphql.ts} with your schema types and point {=VITE_GRAPHQL_URL} at your API.\"",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "src/fate/graphql.ts",
+          "variations": {}
+        }
+      ],
+      "types": []
+    },
+    "T4saJreAWC68v2UUSToqoA==": {
+      "description": "In the phrase: \"Replace the sample views in {=src/fate/graphql.ts} with your schema types and point {=VITE_GRAPHQL_URL} at your API.\"",
+      "tokens": [],
+      "translations": [
+        {
+          "translation": "VITE_GRAPHQL_URL",
+          "variations": {}
+        }
+      ],
+      "types": []
+    }
+  }
+}

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

@@ -1,4 +1,5 @@
 import nkzw from '@nkzw/oxlint-config';
+import fbtee from '@nkzw/vite-plugin-fbtee';
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { voidReact } from '@void/react/plugin';
@@ -60,6 +61,7 @@ export default defineConfig({
   },
   plugins: [
     ...(lazyPlugins(() => [
+      fbtee(),
       tailwindcss(),
       ...(isTest
         ? [react({ compiler: true })]

package/templates/fate/http/README.md

@@ -104,3 +104,14 @@ Common commands from the project root:
 - `vp check --fix` formats, lints, and type-checks the workspace.
 - `vp test` runs the test suite.
 - `vp run build` builds the client and server.
+
+## 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 `client/` 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.
+
+Run `vp run start` in `client/` to serve the built frontend. Set `PORT` to change its default port of 3000, and run the backend separately.

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

@@ -9,11 +9,15 @@
   },
   "type": "module",
   "scripts": {
-    "build": "vp build",
+    "build": "vp run fbtee:all && vp build",
     "dev": "vp dev",
     "dev:setup": "vp run fbtee:all",
     "fate:generate": "vp exec fate generate",
-    "fbtee:all": "vpx fbtee collect && vpx fbtee translate"
+    "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",
+    "start": "node start.mjs"
   },
   "dependencies": {
     "@app/server": "workspace:*",
@@ -26,7 +30,7 @@
     "better-auth": "1.7.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "fbtee": "^3.1.0",
+    "fbtee": "^4.0.0",
     "lucide-react": "^1.34.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
@@ -36,8 +40,8 @@
     "void": "^0.10.12"
   },
   "devDependencies": {
-    "@nkzw/fbtee-cli": "^3.1.0",
-    "@nkzw/vite-plugin-fbtee": "^3.1.0",
+    "@nkzw/fbtee-cli": "^4.0.0",
+    "@nkzw/vite-plugin-fbtee": "^4.0.0",
     "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^26.4.0",
     "@types/react": "^19.2.18",

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

@@ -1,14 +1,12 @@
+import Stack from '@nkzw/stack';
 /// <reference types="fbtee/ReactTypes.d.ts" />
-
 import '../src/App.css';
-import Stack from '@nkzw/stack';
-import { createLocaleContext } from 'fbtee';
 import { ReactNode, Suspense, useMemo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { FateClient } from 'react-fate';
 import { createFateClient } from 'react-fate/client';
-import AvailableLanguages from '../src/lib/AvailableLanguages.tsx';
 import env from '../src/lib/env.tsx';
+import LocaleContext from '../src/lib/LocaleContext.tsx';
 import Card from '../src/ui/Card.tsx';
 import Error from '../src/ui/Error.tsx';
 import Header from '../src/ui/Header.tsx';
@@ -23,18 +21,6 @@ const Thinking = () => (
   </Section>
 );
 
-const LocaleContext = createLocaleContext({
-  availableLanguages: AvailableLanguages,
-  clientLocales: [navigator.language, ...navigator.languages],
-  loadLocale: async (locale: string) => {
-    if (locale !== 'en_US' && AvailableLanguages.has(locale)) {
-      return (await import(`../src/translations/${locale}.json`)).default[locale];
-    }
-
-    return {};
-  },
-});
-
 export default function Layout({ children }: { children: ReactNode }) {
   const { data: session } = AuthClient.useSession();
   const userId = session?.user.id;

package/templates/fate/http/client/src/lib/AvailableLanguages.tsx

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