create-fate 1.0.3 → 1.3.0

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

@@ -0,0 +1,161 @@
+#!/usr/bin/env NODE_ENV=development node --no-warnings --experimental-specifier-resolution=node --loader ts-node/esm --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';
+import { auth } from '../lib/auth.tsx';
+import prisma from './prisma.tsx';
+
+console.log(styleText('bold', '› Seeding database...'));
+
+try {
+  console.log(styleText('bold', `Creating users`));
+
+  for (const data of users) {
+    const { user } = await auth.api.createUser({
+      body: data,
+    });
+
+    console.log(`  Created user ${styleText('blue', user.name)}.`);
+  }
+
+  const seededUsers = await prisma.user.findMany();
+  const usersByEmail = new Map(seededUsers.map((user) => [user.email, user]));
+
+  console.log(styleText('bold', `Creating categories and tags`));
+
+  const createdCategories = await Promise.all(
+    categories.map((category) =>
+      prisma.category.create({
+        data: category,
+      }),
+    ),
+  );
+  const createdTags = await Promise.all(
+    tags.map((tag) =>
+      prisma.tag.create({
+        data: tag,
+      }),
+    ),
+  );
+
+  const categoriesByName = new Map(createdCategories.map((category) => [category.name, category]));
+  const tagsByName = new Map(createdTags.map((tag) => [tag.name, tag]));
+
+  console.log(styleText('bold', `Seeding posts and comments`));
+
+  const createdPosts = await Promise.all(
+    posts.map((post) => {
+      const author = usersByEmail.get(post.authorEmail);
+
+      if (!author) {
+        throw new Error(`Missing seeded user for ${post.authorEmail}.`);
+      }
+
+      const category = categoriesByName.get(post.category);
+      const tagConnections = post.tags
+        .map((name) => tagsByName.get(name))
+        .filter(Boolean)
+        .map((tag) => ({ id: tag!.id }));
+
+      return prisma.post.create({
+        data: {
+          authorId: author.id,
+          categoryId: category?.id,
+          content: post.content,
+          likes: post.likes,
+          tags: tagConnections.length
+            ? {
+                connect: tagConnections,
+              }
+            : undefined,
+          title: post.title,
+        },
+      });
+    }),
+  );
+
+  let index = 0;
+  for (const comment of comments) {
+    const post = createdPosts[index % createdPosts.length];
+    const author = randomEntry(seededUsers);
+
+    await prisma.comment.create({
+      data: {
+        authorId: author?.id,
+        content: comment,
+        postId: post.id,
+      },
+    });
+
+    index++;
+  }
+
+  console.log(
+    styleText(
+      ['green', 'bold'],
+      `✓ Created ${createdPosts.length} posts and ${comments.length} comments.`,
+    ),
+  );
+
+  console.log(styleText('bold', `Creating community events`));
+
+  const createdEvents = await Promise.all(
+    events.map((event) => {
+      const host = usersByEmail.get(event.hostEmail);
+
+      if (!host) {
+        throw new Error(`Missing seeded user for ${event.hostEmail}.`);
+      }
+
+      const attendees = event.attendees
+        .map((attendee) => {
+          const attendeeUser = usersByEmail.get(attendee.userEmail);
+
+          if (!attendeeUser) {
+            throw new Error(`Missing seeded user for ${attendee.userEmail}.`);
+          }
+
+          return {
+            notes: attendee.notes,
+            status: attendee.status,
+            userId: attendeeUser.id,
+          };
+        })
+        .filter(Boolean);
+
+      return prisma.event.create({
+        data: {
+          attendees: attendees.length
+            ? {
+                create: attendees,
+              }
+            : undefined,
+          capacity: event.capacity,
+          description: event.description,
+          endAt: event.endAt,
+          hostId: host.id,
+          livestreamUrl: event.livestreamUrl,
+          location: event.location,
+          name: event.name,
+          startAt: event.startAt,
+          topics: [...event.topics],
+          type: event.type,
+        },
+      });
+    }),
+  );
+
+  console.log(
+    styleText(
+      ['green', 'bold'],
+      `✓ Created ${createdEvents.length} events with ${events.reduce(
+        (total, event) => total + event.attendees.length,
+        0,
+      )} attendee records.`,
+    ),
+  );
+
+  console.log(styleText(['green', 'bold'], '✓ Done.'));
+} finally {
+  await prisma.$disconnect();
+}

package/templates/fate/graphql/server/src/user/SessionUser.tsx

@@ -0,0 +1,17 @@
+import { User } from '../prisma/prisma-client/client.ts';
+
+export type SessionUser = Pick<User, '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/graphql/server/src/user/isAdmin.tsx

@@ -0,0 +1,3 @@
+export default function isAdmin({ role }: { role: string }): boolean {
+  return role.split(',').includes('admin');
+}

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

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowImportingTsExtensions": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["esnext"],
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "noEmit": true,
+    "noImplicitOverride": true,
+    "noUnusedLocals": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "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"
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+import nkzw from '@nkzw/oxlint-config';
+import { defineConfig } from 'vite-plus';
+
+export default defineConfig({
+  fmt: {
+    experimentalSortImports: {
+      newlinesBetween: false,
+    },
+    experimentalSortPackageJson: {
+      sortScripts: true,
+    },
+    ignorePatterns: ['coverage/', 'dist/', 'pnpm-lock.yaml', 'src/graphql/schema.graphql'],
+    singleQuote: true,
+  },
+  lint: {
+    extends: [nkzw],
+    ignorePatterns: ['dist/', 'src/prisma/pothos-types.ts', 'src/prisma/prisma-client/**'],
+    options: { typeAware: true, typeCheck: true },
+    overrides: [
+      {
+        files: ['scripts/**/*.tsx', 'src/app.tsx', 'src/index.tsx', 'src/prisma/seed.tsx'],
+        rules: {
+          'no-console': 'off',
+        },
+      },
+    ],
+    rules: {
+      'import-x-js/no-extraneous-dependencies': [
+        'error',
+        {
+          devDependencies: [
+            './prisma.config.ts',
+            './scripts/**/*.tsx',
+            './src/__tests__/**/*.tsx',
+            './vite.config.ts',
+          ],
+        },
+      ],
+    },
+  },
+  pack: {
+    entry: ['./src/app.tsx'],
+    outputOptions: { codeSplitting: false, entryFileNames: 'index.js' },
+  },
+  run: {
+    tasks: {
+      'test:all': {
+        command: 'vp check && vp test',
+      },
+    },
+  },
+  staged: {
+    '*': 'vp check --fix',
+  },
+});

package/templates/fate/graphql/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowImportingTsExtensions": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "noEmit": true,
+    "noImplicitOverride": true,
+    "noUnusedLocals": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "es2017",
+    "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
+    }
+  }
+}

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

@@ -0,0 +1,80 @@
+import { join } from 'node:path';
+import nkzw from '@nkzw/oxlint-config';
+import dotenv from 'dotenv';
+import { defineConfig } from 'vite-plus';
+
+const root = process.cwd();
+
+dotenv.config({
+  path: join(root, './server', '.env'),
+  quiet: true,
+});
+
+export default defineConfig({
+  fmt: {
+    experimentalSortImports: {
+      newlinesBetween: false,
+    },
+    experimentalSortPackageJson: {
+      sortScripts: true,
+    },
+    experimentalTailwindcss: {
+      stylesheet: 'client/src/App.css',
+    },
+    ignorePatterns: [
+      'coverage/',
+      'dist/',
+      '.fate/',
+      'client/dist/',
+      'client/src/translations/',
+      'server/dist/',
+      'server/src/graphql/schema.graphql',
+      'pnpm-lock.yaml',
+    ],
+    singleQuote: true,
+  },
+  lint: {
+    extends: [nkzw],
+    ignorePatterns: [
+      'coverage',
+      'dist',
+      '.fate',
+      'client/dist',
+      'server/dist',
+      'server/src/graphql/schemaImportMap.tsx',
+      'server/src/prisma/pothos-types.ts',
+      'server/src/prisma/prisma-client/**',
+      'vite.config.ts.timestamp-*',
+      'client/vite.config.ts.timestamp-*',
+      'server/vite.config.ts.timestamp-*',
+    ],
+    options: { typeAware: true, typeCheck: true },
+    overrides: [
+      {
+        files: [
+          'server/scripts/**/*.tsx',
+          'server/src/app.tsx',
+          'server/src/index.tsx',
+          'server/src/prisma/seed.tsx',
+          '**/__tests__/**',
+        ],
+        rules: {
+          'no-console': 'off',
+        },
+      },
+    ],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+  run: {
+    tasks: {
+      'test:all': {
+        command: 'vp check && vp test',
+      },
+    },
+  },
+  staged: {
+    '*': 'vp check --fix',
+  },
+});

package/templates/fate/graphql-client/.env.example

@@ -0,0 +1,3 @@
+VITE_GRAPHQL_URL="https://api.example.com/graphql"
+VITE_GRAPHQL_LIVE_URL=""
+

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

@@ -0,0 +1,3 @@
+Run `vp run test:all` to verify changes.
+
+Run `vp check --fix` to fix formatting and lint errors.

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

@@ -0,0 +1,69 @@
+# _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.
+
+## Existing GraphQL Template
+
+Use this template when you want to use _fate_ with an existing GraphQL server.
+
+```bash
+vp create fate my-app --template graphql-client
+```
+
+## Connect Your Server
+
+Set the GraphQL endpoint in `.env`:
+
+```bash
+VITE_GRAPHQL_URL="https://api.example.com/graphql"
+```
+
+If your server supports GraphQL SSE, set the live endpoint too:
+
+```bash
+VITE_GRAPHQL_LIVE_URL="https://api.example.com/graphql/stream"
+```
+
+Then edit `src/fate/graphql.ts`. This file is the mapping layer between your GraphQL schema and _fate_:
+
+- `dataView(...)` describes the fields React components are allowed to select.
+- `Root` describes the root GraphQL fields _fate_ can request.
+- `fateGraphQL.roots` maps _fate_ root names to GraphQL field names.
+- `fateGraphQL.mutations` maps _fate_ mutation names to GraphQL mutation fields.
+
+The sample assumes your GraphQL server exposes:
+
+- `viewer`
+- `posts(first:, after:)`
+- `node(id:)` or `nodes(ids:)`
+- Relay-style connections with `edges`, `cursor`, `node`, and `pageInfo`
+- Entity objects with stable `id` and `__typename`
+
+Replace the sample `User` and `Post` views with your own schema types.
+
+## Development
+
+Install dependencies:
+
+```bash
+vp install
+```
+
+Generate the _fate_ client:
+
+```bash
+vp run fate:generate
+```
+
+Start the app:
+
+```bash
+vp run dev
+```
+
+Common commands:
+
+- `vp run dev` starts the client.
+- `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.

package/templates/fate/graphql-client/_gitignore

@@ -0,0 +1,14 @@
+.fate/
+**/.fate/
+.void/
+**/.void/
+.eslintcache
+.pnpm-debug.log
+**/node_modules/
+node_modules/
+.env
+coverage/
+dist/
+pnpm-lock.yaml
+tsconfig.tsbuildinfo
+vite.config.ts.timestamp-*

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

@@ -0,0 +1,62 @@
+{
+  "name": "fate-app",
+  "version": "0.0.1",
+  "private": true,
+  "description": "fate is a modern data client for React.",
+  "author": "Christoph Nakazawa <christoph.pojer@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/nkzw-tech/fate.git"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "vp build",
+    "dev": "vp dev",
+    "dev:setup": "vp run prepare:void && vp run fate:generate",
+    "fate:generate": "vp exec fate generate",
+    "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",
+    "react-fate": "latest",
+    "void": "^0.7.13"
+  },
+  "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",
+    "vite": "catalog:",
+    "vite-plus": "catalog:",
+    "vitest": "catalog:"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
+  "engines": {
+    "node": ">=24.0.0",
+    "pnpm": ">=11.0.0"
+  },
+  "packageManager": "pnpm@11.0.6"
+}

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

@@ -0,0 +1,69 @@
+import { ConnectionRef, useListView, useRequest } from 'react-fate';
+import { postDataView, userDataView } from '../src/fate/graphql.ts';
+
+const PostConnectionView = {
+  args: { first: 10 },
+  items: {
+    node: postDataView,
+  },
+  pagination: {
+    hasNext: true,
+  },
+};
+
+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>
+      {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>
+      ))}
+    </section>
+  );
+};
+
+export default function HomePage() {
+  const { posts, viewer } = useRequest({
+    posts: { list: PostConnectionView },
+    viewer: { view: userDataView },
+  });
+
+  return (
+    <main className="mx-auto min-h-screen max-w-4xl space-y-8 px-6 py-16">
+      <header className="space-y-3">
+        <p className="text-sm font-semibold tracking-wide text-blue-600 uppercase dark:text-blue-400">
+          fate + GraphQL
+        </p>
+        <h1 className="text-4xl font-semibold tracking-tight text-slate-950 dark:text-white">
+          Use fate with an existing GraphQL server
+        </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.
+        </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}
+      <PostList posts={posts} />
+    </main>
+  );
+}

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

@@ -0,0 +1,41 @@
+import '../src/App.css';
+import { ReactNode, Suspense, useMemo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { FateClient } from 'react-fate';
+import { createFateClient } from 'react-fate/client';
+
+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...
+  </main>
+);
+
+export default function Layout({ children }: { children: ReactNode }) {
+  const fate = useMemo(
+    () =>
+      createFateClient({
+        live: graphQLLiveURL ? { url: graphQLLiveURL } : false,
+        url: graphQLURL,
+      }),
+    [],
+  );
+
+  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>
+  );
+}

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

@@ -0,0 +1,38 @@
+packages:
+  - .
+
+allowBuilds:
+  '@swc/core': 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
+
+minimumReleaseAgeExclude:
+  - '@voidzero-dev/vite-plus-core'
+  - '@voidzero-dev/vite-plus-test'
+  - vite-plus
+
+onlyBuiltDependencies:
+  - '@swc/core'
+  - '@tailwindcss/oxide'
+  - esbuild
+  - msgpackr-extract
+  - sharp
+  - workerd
+
+overrides:
+  vite: 'catalog:'
+  vitest: 'catalog:'
+
+peerDependencyRules:
+  allowAny:
+    - vite
+    - vitest
+  allowedVersions:
+    vite: '*'
+    vitest: '*'