create-fate 1.4.0 → 1.5.0

package/bin/create-fate.mjs

@@ -591,7 +591,13 @@ const removeIfExists = (entryPath) => {
 
 const removeReactFrontend = (frontendRoot, selectedVariant) => {
   if (selectedVariant === 'void' || selectedVariant === 'graphql-client') {
-    for (const entry of ['pages', 'src/ui']) {
+    for (const entry of [
+      'pages',
+      'src/ui',
+      'translations',
+      'src/lib/LocaleContext.tsx',
+      'src/lib/AvailableLanguages.tsx',
+    ]) {
       removeIfExists(path.join(frontendRoot, entry));
     }
     removeIfExists(path.join(frontendRoot, 'src', 'App.css'));
@@ -617,9 +623,22 @@ const configureVuePackageJson = (frontendRoot, selectedVariant, originalPackageJ
           ...originalPackageJson.devDependencies,
           ...vuePackageJson.devDependencies,
         },
+        scripts: {
+          ...originalPackageJson.scripts,
+          build: vuePackageJson.scripts.build,
+          'dev:setup': originalPackageJson.scripts['dev:setup'].replace('vp run fbtee:all && ', ''),
+        },
       }
     : vuePackageJson;
 
+  if (packageJson.scripts) {
+    for (const name of Object.keys(packageJson.scripts)) {
+      if (name.startsWith('fbtee:')) {
+        delete packageJson.scripts[name];
+      }
+    }
+  }
+
   removePackageEntries(packageJson.dependencies, reactPackageEntries);
   removePackageEntries(packageJson.devDependencies, reactPackageEntries);
 
@@ -709,6 +728,11 @@ const configureVueReadme = (targetPath, selectedVariant) => {
   fs.writeFileSync(
     readmePath,
     readme
+      .replace(/\n## Translations\n[\s\S]*$/, '')
+      .replaceAll(/^- \[fbtee\].*\n/gm, '')
+      .replaceAll('runs fbtee setup, and ', '')
+      .replaceAll('fbtee setup, and ', '')
+      .replaceAll(', fbtee setup,', ',')
       .replaceAll(
         `vp create fate my-app --template ${selectedVariant}`,
         `vp create fate my-app --template ${selectedVariant} --framework vue`,
@@ -879,6 +903,11 @@ const runCommand = (command, args, cwd) => {
 const setupProject = (targetPath, selectedVariant) => {
   runCommand('vp', ['install'], targetPath);
 
+  const frontendRoot = frontendRootForVariant(targetPath, selectedVariant);
+  if (readPackageJson(path.join(frontendRoot, 'package.json')).scripts?.['fbtee:all']) {
+    runCommand('vp', ['run', 'fbtee:all'], frontendRoot);
+  }
+
   switch (selectedVariant) {
     case 'cloudflare':
       runCommand('vp', ['run', '--filter', '@app/server', 'dev:setup'], targetPath);

package/package.json

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

package/templates/fate/cloudflare/README.md

@@ -124,3 +124,14 @@ VITE_SERVER_URL="https://<your-worker>.<your-subdomain>.workers.dev" pnpm run de
 ```
 
 If you deploy the client to a hosted origin, add that origin to `server/src/lib/origins.ts`.
+
+## 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/cloudflare/client/package.json

@@ -9,14 +9,19 @@
   },
   "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:*",
+    "@hono/node-server": "^2.1.1",
     "@nkzw/core": "^1.3.1",
     "@nkzw/define-env": "^1.1.0",
     "@nkzw/stack": "^2.3.2",
@@ -26,7 +31,7 @@
     "cf-fate": "latest",
     "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 +41,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/cloudflare/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/cloudflare/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)'],
 ]);

package/templates/fate/cloudflare/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/cloudflare/client/src/ui/LocaleSwitcher.tsx

@@ -1,52 +1,34 @@
-import { VStack } from '@nkzw/stack';
-import { cx } from 'class-variance-authority';
 import { useLocaleContext } from 'fbtee';
-import { Languages } from 'lucide-react';
+import { startTransition } from 'react';
 import AvailableLanguages from '../lib/AvailableLanguages.tsx';
-import { Button } from './Button.tsx';
-import Card from './Card.tsx';
 
 export default function LocaleSwitcher() {
-  const { locale: currentLocale, setLocale } = useLocaleContext();
-
+  const { locale, localeChangeIsPending, setLocale } = useLocaleContext();
   return (
-    <>
-      <Button asChild size="sm" variant="ghost">
-        <button popoverTarget="locale-switcher" popoverTargetAction="show" type="button">
-          <Languages className="h-4 w-4" />
-          <span className="hidden sm:inline">
-            <fbt desc="Locale switcher button">Change Language</fbt>
-          </span>
-        </button>
-      </Button>
-      <Card
-        className="translate-y-50 justify-self-center border-slate-100 bg-white shadow transition-all dark:bg-black"
-        id="locale-switcher"
-        popover="auto"
+    <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}
       >
-        <VStack alignCenter center className="w-64" gap={12} padding={16}>
-          {[...AvailableLanguages.entries()].map(([locale, name]) => (
-            <Button
-              action={() => {
-                setLocale(locale);
-                localStorage.setItem('fbtee:locale', locale);
-              }}
-              asChild
-              className={cx(
-                'transition-background border-slate-200 bg-transparent duration-150 hover:border-slate-300 hover:bg-slate-200 dark:hover:bg-slate-900 dark:text-white active:py-2',
-                {
-                  'bg-slate-100 dark:bg-slate-900': currentLocale === locale,
-                },
-              )}
-              key={locale}
-              size="sm"
-              variant="outline"
-            >
-              <a className="w-full flex-1 cursor-pointer p-2">{name}</a>
-            </Button>
-          ))}
-        </VStack>
-      </Card>
-    </>
+        {[...AvailableLanguages].map(([value, name]) => (
+          <option key={value} value={value}>
+            {name}
+          </option>
+        ))}
+      </select>
+    </label>
   );
 }

package/templates/fate/cloudflare/client/start.mjs

@@ -0,0 +1,11 @@
+import { readFileSync } from 'node:fs';
+import process from 'node:process';
+import { fileURLToPath, URL } from 'node:url';
+
+const dist = new URL('./dist/', import.meta.url);
+// Void's Node renderer reads this manifest to emit client scripts and styles.
+globalThis.__VITE_MANIFEST__ = JSON.parse(
+  readFileSync(new URL('client/.vite/manifest.json', dist), 'utf8'),
+);
+process.chdir(fileURLToPath(dist));
+await import(new URL('ssr/index.js', dist).href);