create-fate 0.0.0 → 1.0.0

package/templates/fate/void/src/ui/UserCard.tsx

@@ -0,0 +1,129 @@
+import safeParse from '@nkzw/core/safeParse.js';
+import Stack, { VStack } from '@nkzw/stack';
+import { ChangeEvent, useActionState, useState } from 'react';
+import { useFateClient, useView, view, ViewRef } from 'react-fate';
+import { User } from '../fate/server.ts';
+import { Button } from '../ui/Button.tsx';
+import Card from '../ui/Card.tsx';
+import AuthClient from '../user/AuthClient.tsx';
+import H2 from './H2.tsx';
+import Input from './Input.tsx';
+
+export type SessionUser = {
+  id?: string | null;
+  name?: string | null;
+  username?: string | null;
+};
+
+export const UserView = view<User>()({
+  id: true,
+  name: true,
+  username: true,
+});
+
+export const UserCardView = view<User>()({
+  email: true,
+  id: true,
+  name: true,
+  username: true,
+});
+
+const UserNameForm = ({ user }: { user: SessionUser }) => {
+  const fate = useFateClient();
+  const [name, setName] = useState(user.name ?? '');
+  const [error, setError] = useState<string | null>(null);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setError(null);
+    setName(event.target.value);
+  };
+
+  const [, submitAction, isPending] = useActionState(async () => {
+    const id = user?.id;
+    if (!id) {
+      return;
+    }
+
+    const newName = name.trim();
+    setName(newName);
+
+    if (newName === user.name) {
+      setError(null);
+      return;
+    }
+
+    try {
+      setError(null);
+      await fate.mutations.user.update({
+        input: { name: newName },
+        optimistic: {
+          id,
+          username: newName,
+        },
+        view: UserView,
+      });
+      await AuthClient.updateUser({ name });
+    } catch (error) {
+      setError(
+        (error instanceof Error &&
+          error.message &&
+          safeParse<Array<{ message: string }>>(error.message)?.[0]?.message) ||
+          'Failed to update user name.',
+      );
+    }
+  }, null);
+
+  const trimmedName = name.trim();
+  const originalName = user.name ?? '';
+  const isSaveDisabled = !user.id || !trimmedName || trimmedName === originalName || isPending;
+
+  return (
+    <div>
+      <VStack action={submitAction} as="form" gap={12}>
+        <h3 className="font-semibold">Update Name</h3>
+        <label className="sr-only" htmlFor="header-username">
+          Username
+        </label>
+        <Input
+          aria-describedby={error ? 'header-username-error' : undefined}
+          aria-invalid={error ? 'true' : undefined}
+          className="w-48"
+          disabled={isPending}
+          id="header-username"
+          name="name"
+          onChange={handleChange}
+          placeholder="Name"
+          title={error ?? undefined}
+          value={name}
+        />
+        <div>
+          <Button disabled={isSaveDisabled} size="sm" type="submit" variant="secondary">
+            Save
+          </Button>
+        </div>
+      </VStack>
+      {error ? <span id="header-username-error">{error}</span> : null}
+    </div>
+  );
+};
+
+export default function UserCard({ viewer: viewerRef }: { viewer: ViewRef<'User'> }) {
+  const viewer = useView(UserCardView, viewerRef);
+
+  return (
+    <Card>
+      <VStack between className="h-full" gap={16}>
+        <VStack gap={16}>
+          <H2>Your account</H2>
+          <Stack alignCenter between gap={16}>
+            <p className="text-sm text-muted-foreground">
+              Signed in as {viewer.name}
+              {viewer.email ? ` <${viewer.email}>` : null}.
+            </p>
+          </Stack>
+        </VStack>
+        <UserNameForm user={viewer} />
+      </VStack>
+    </Card>
+  );
+}

package/templates/fate/void/src/user/AuthClient.tsx

@@ -0,0 +1 @@
+export { auth as default } from 'void/client';

package/templates/fate/void/src/user/SessionUser.tsx

@@ -0,0 +1,17 @@
+import type { UserRow } from '../../db/schema.ts';
+
+export type SessionUser = Pick<UserRow, 'role' | 'id' | 'username'>;
+
+export function toSessionUser({
+  email,
+  id,
+  role,
+  username,
+}: Readonly<{
+  email: string | null | undefined;
+  id: string;
+  role?: string | null | undefined;
+  username?: string | null | undefined;
+}>): SessionUser {
+  return { id, role: role || '', username: username || email || '' };
+}

package/templates/fate/void/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "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",
+    "db/**/*.ts",
+    "db/**/*.tsx",
+    "middleware/**/*.ts",
+    "pages/**/*.ts",
+    "pages/**/*.tsx",
+    "routes/**/*.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
+}

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

@@ -0,0 +1,83 @@
+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({
+  environments: {
+    void_worker: {
+      optimizeDeps: {
+        include: [
+          '@nkzw/core/safeParse.js',
+          '@nkzw/stack',
+          '@radix-ui/react-slot',
+          '@void/react',
+          '@void/react/pages-server',
+          'better-auth',
+          'better-auth/adapters/drizzle',
+          'better-auth/plugins',
+          'class-variance-authority',
+          'clsx',
+          'drizzle-orm',
+          'lucide-react',
+          'react',
+          'react-error-boundary',
+          'react/jsx-dev-runtime',
+          'react/jsx-runtime',
+          'tailwind-merge',
+          'void/schema-d1',
+          'zod',
+        ],
+      },
+    },
+  },
+  fmt: {
+    experimentalSortImports: {
+      newlinesBetween: false,
+    },
+    experimentalSortPackageJson: {
+      sortScripts: true,
+    },
+    experimentalTailwindcss: {
+      stylesheet: 'src/App.css',
+    },
+    ignorePatterns: ['.fate/', '.void/', 'dist/', 'node_modules/', 'pnpm-lock.yaml'],
+    singleQuote: true,
+  },
+  lint: {
+    ignorePatterns: ['.fate', '.void', 'dist', 'node_modules', 'vite.config.ts.timestamp-*'],
+    options: { typeAware: true, typeCheck: true },
+    overrides: [
+      {
+        files: ['db/seed.ts', 'src/fate/__tests__/**'],
+        rules: {
+          'no-console': 'off',
+        },
+      },
+    ],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+  plugins: [
+    ...(lazyPlugins(() => [
+      babel({
+        presets: [reactCompilerPreset()],
+      }),
+      tailwindcss(),
+      ...(isTest ? [] : [voidPlugin(), voidReact()]),
+    ]) ?? []),
+    fate({
+      module: './src/fate/server.ts',
+      transport: 'void',
+    }),
+  ],
+  resolve: { conditions: ['@nkzw/source'] },
+  server: { port: 6001 },
+  ssr: { noExternal: ['void-fate'] },
+});

package/templates/fate/void/void.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "./node_modules/void/schema.json",
+  "auth": {
+    "providers": ["email"]
+  },
+  "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/void/wrangler.jsonc

@@ -0,0 +1,16 @@
+{
+  "durable_objects": {
+    "bindings": [
+      {
+        "name": "VOID_LIVE",
+        "class_name": "VoidLiveStreamDurableObject",
+      },
+    ],
+  },
+  "migrations": [
+    {
+      "tag": "live-v1",
+      "new_sqlite_classes": ["VoidLiveStreamDurableObject"],
+    },
+  ],
+}