create-fate 1.0.3 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fate",
-  "version": "1.0.3",
+  "version": "1.3.0",
   "description": "Create a new fate app.",
   "homepage": "https://github.com/nkzw-tech/fate",
   "license": "MIT",
@@ -22,7 +22,7 @@
   ],
   "type": "module",
   "dependencies": {
-    "@clack/prompts": "^1.4.0"
+    "@clack/prompts": "^1.5.0"
   },
   "engines": {
     "node": ">=24.0.0"

package/templates/fate/README.md

@@ -3,6 +3,9 @@
 This directory is the canonical source for fate project scaffolds.
 
 - `void/` contains the Void pages router + Drizzle template.
+- `cloudflare/` contains the Cloudflare Workers + D1 + Drizzle template.
 - `drizzle/` contains the tRPC + Drizzle template.
+- `graphql/` contains the GraphQL + Prisma template.
+- `graphql-client/` contains the existing GraphQL server template.
 - `http/` contains the native HTTP + Drizzle template.
 - `prisma/` contains the tRPC + Prisma template.

package/templates/fate/_shared/vue-app/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@app/client",
+  "version": "0.0.1",
+  "private": true,
+  "description": "fate is a modern data client for Vue.",
+  "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"
+  },
+  "dependencies": {
+    "@nkzw/core": "^1.3.1",
+    "@nkzw/define-env": "^1.1.0",
+    "@trpc/client": "^11.17.0",
+    "@void/vue": "^0.9.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dotenv": "^17.4.2",
+    "graphql-sse": "^2.6.0",
+    "lucide-vue-next": "^0.561.0",
+    "tailwind-merge": "^3.5.0",
+    "void": "^0.9.2",
+    "vue": "^3.5.24",
+    "vue-fate": "latest"
+  },
+  "devDependencies": {
+    "@nkzw/eslint-plugin": "^2.0.0",
+    "@nkzw/oxlint-config": "^1.2.1",
+    "@swc/core": "^1.15.33",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/node": "^25.6.0",
+    "@typescript/native-preview": "7.0.0-dev.20260505.1",
+    "eslint-plugin-no-only-tests": "^3.4.0",
+    "eslint-plugin-perfectionist": "^5.9.0",
+    "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"
+  ]
+}

package/templates/fate/_shared/vue-app/pages/index.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useListView, useRequest } from 'vue-fate';
+import { PostView, UserView } from '../src/fateViews.ts';
+import Button from '../src/ui/Button.vue';
+import Card from '../src/ui/Card.vue';
+import PostCard from '../src/ui/PostCard.vue';
+import Section from '../src/ui/Section.vue';
+import UserCard from '../src/ui/UserCard.vue';
+
+const PostConnectionView = {
+  args: { first: 10 },
+  items: {
+    node: PostView,
+  },
+  pagination: {
+    hasNext: true,
+  },
+};
+
+const request = useRequest({
+  posts: { list: PostConnectionView },
+  viewer: { view: UserView },
+});
+const { posts: postsRef, viewer } = await request.ready();
+const [posts, loadNext] = useListView(PostConnectionView, postsRef);
+</script>
+
+<template>
+  <Section :gap="32">
+    <div class="grid gap-8 lg:grid-cols-[1.6fr_1fr] lg:items-stretch">
+      <Card class="border border-white/20 bg-linear-to-r from-blue-500 to-sky-500 text-white">
+        <div class="space-y-3">
+          <p class="text-xs font-semibold tracking-widest uppercase">
+            <span class="lowercase italic">fate</span> demo
+          </p>
+          <h1 class="text-3xl leading-tight font-semibold text-balance lg:text-4xl">
+            fate is a modern data client for Vue inspired by Relay and GraphQL.
+          </h1>
+          <p class="text-sm text-white/80 lg:text-base">
+            This template uses Vue-native fate composables, normalized caching, data masking, and
+            type-safe data fetching.
+          </p>
+        </div>
+      </Card>
+      <UserCard v-if="viewer" :viewer="viewer" />
+    </div>
+    <div v-if="posts.length" class="flex flex-col gap-4">
+      <h2 class="pl-5 text-2xl font-semibold tracking-tight">Latest posts</h2>
+      <div class="flex flex-col gap-4">
+        <PostCard v-for="{ node } in posts" :key="node.id" :post="node" />
+      </div>
+      <div v-if="loadNext" class="flex justify-center">
+        <Button :action="loadNext" variant="ghost">Load more posts</Button>
+      </div>
+    </div>
+  </Section>
+</template>

package/templates/fate/_shared/vue-app/pages/layout.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import '../src/App.css';
+import { computed } from 'vue';
+import { FateClient } from 'vue-fate';
+import { createFateClient } from 'vue-fate/client';
+/* __CLIENT_IMPORTS__ */
+import ErrorBoundary from '../src/ui/ErrorBoundary.vue';
+import Header from '../src/ui/Header.vue';
+import Thinking from '../src/ui/Thinking.vue';
+
+const fate = computed(() => createFateClient(__CREATE_FATE_OPTIONS__));
+</script>
+
+<template>
+  <div class="min-h-screen bg-background text-foreground">
+    <div
+      class="min-h-screen bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.08),transparent_35%),radial-gradient(circle_at_80%_0,rgba(99,102,241,0.08),transparent_28%)]"
+    >
+      <Header />
+      <FateClient :client="fate">
+        <ErrorBoundary>
+          <Suspense timeout="0">
+            <slot />
+            <template #fallback>
+              <Thinking />
+            </template>
+          </Suspense>
+        </ErrorBoundary>
+      </FateClient>
+    </div>
+  </div>
+</template>

package/templates/fate/_shared/vue-app/pages/post/[id].vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useParams } from '@void/vue';
+import { useRequest } from 'vue-fate';
+import { PostView } from '../../src/fateViews.ts';
+import PostCard from '../../src/ui/PostCard.vue';
+import Section from '../../src/ui/Section.vue';
+
+const params = useParams<{ id: string }>();
+const id = params.id;
+
+if (!id) {
+  throw new Error('fate: Post ID is required.');
+}
+
+const { post } = await useRequest({
+  post: { id, view: PostView },
+}).ready();
+</script>
+
+<template>
+  <Section>
+    <PostCard :post="post" />
+  </Section>
+</template>

package/templates/fate/_shared/vue-app/src/App.css

@@ -0,0 +1,63 @@
+@import 'tailwindcss';
+
+body {
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
+
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-border: hsl(var(--border));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --border: 0 0% 89.8%;
+    --muted-foreground: 0 0% 40%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: 0 0% 3.9%;
+      --foreground: 0 0% 98%;
+      --card: 0 0% 3.9%;
+      --card-foreground: 0 0% 98%;
+      --border: 0 0% 14.9%;
+      --muted-foreground: 0 0% 63.9%;
+      --primary: 0 0% 98%;
+      --primary-foreground: 0 0% 9%;
+      --secondary: 0 0% 14.9%;
+      --secondary-foreground: 0 0% 98%;
+    }
+  }
+}
+
+.squircle {
+  border-radius: 32px;
+  corner-shape: squircle;
+}

package/templates/fate/_shared/vue-app/src/fateViews.ts

@@ -0,0 +1,14 @@
+import type { Post, User } from '__FATE_TYPE_MODULE__';
+import { view } from 'vue-fate';
+
+export const UserView = view<User>()({
+  id: true,
+  name: true,
+  username: true,
+});
+
+export const PostView = view<Post>()({
+  author: UserView,
+  id: true,
+  title: true,
+});

package/templates/fate/_shared/vue-app/src/lib/cx.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export default function cx(...inputs: Array<ClassValue>) {
+  return twMerge(clsx(inputs));
+}

package/templates/fate/_shared/vue-app/src/lib/env.ts

@@ -0,0 +1,3 @@
+import defineEnv from '@nkzw/define-env';
+
+export default defineEnv(__ENV_KEYS__, __ENV_VALUES__);

package/templates/fate/_shared/vue-app/src/ui/Button.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { cva, type VariantProps } from 'class-variance-authority';
+import { computed, ref } from 'vue';
+import cx from '../lib/cx.ts';
+
+const buttonVariants = cva(
+  'squircle inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50',
+  {
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        default: 'h-10 px-3 py-2',
+        sm: 'h-9 px-2',
+      },
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        ghost: 'hover:bg-secondary hover:text-secondary-foreground',
+        outline: 'border border-border bg-background hover:bg-secondary',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      },
+    },
+  },
+);
+
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+const props = withDefaults(
+  defineProps<{
+    action?: () => Promise<unknown> | unknown;
+    class?: string;
+    disabled?: boolean;
+    size?: ButtonVariants['size'];
+    type?: 'button' | 'submit';
+    variant?: ButtonVariants['variant'];
+  }>(),
+  {
+    type: 'button',
+  },
+);
+
+const isPending = ref(false);
+const classes = computed(() =>
+  cx(buttonVariants({ size: props.size, variant: props.variant }), props.class),
+);
+
+const onClick = async () => {
+  if (!props.action || isPending.value || props.disabled) {
+    return;
+  }
+
+  isPending.value = true;
+  try {
+    await props.action();
+  } finally {
+    isPending.value = false;
+  }
+};
+</script>
+
+<template>
+  <button :class="classes" :disabled="disabled || isPending" :type="type" @click="onClick">
+    <slot />
+  </button>
+</template>

package/templates/fate/_shared/vue-app/src/ui/Card.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import cx from '../lib/cx.ts';
+
+const props = defineProps<{ class?: string }>();
+
+const classes = computed(() =>
+  cx('rounded-lg border border-border bg-card p-5 text-card-foreground shadow-sm', props.class),
+);
+</script>
+
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>

package/templates/fate/_shared/vue-app/src/ui/Error.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{ error?: unknown }>();
+</script>
+
+<template>
+  <div class="text-sm text-red-600 dark:text-red-400">
+    {{ error instanceof Error ? error.message : 'Something went wrong.' }}
+  </div>
+</template>

package/templates/fate/_shared/vue-app/src/ui/ErrorBoundary.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { onErrorCaptured, ref } from 'vue';
+import Card from './Card.vue';
+import Error from './Error.vue';
+import Section from './Section.vue';
+
+const error = ref<unknown>(null);
+
+onErrorCaptured((capturedError) => {
+  error.value = capturedError;
+  return false;
+});
+</script>
+
+<template>
+  <Section v-if="error">
+    <Card>
+      <Error :error="error" />
+    </Card>
+  </Section>
+  <slot v-else />
+</template>

package/templates/fate/_shared/vue-app/src/ui/Header.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Link } from '@void/vue';
+import { Search } from 'lucide-vue-next';
+import Button from './Button.vue';
+</script>
+
+<template>
+  <header
+    class="sticky top-0 z-50 border-b border-white/60 bg-white/60 backdrop-blur dark:border-neutral-800 dark:bg-neutral-950/70"
+  >
+    <div class="container mx-auto flex h-16 max-w-5xl items-center justify-between gap-4 px-6">
+      <Link class="flex items-center gap-3" href="/">
+        <div
+          class="squircle flex h-10 w-10 items-center justify-center bg-linear-to-br from-gray-100 to-gray-200 text-gray-500 shadow-lg shadow-gray-500/20"
+        >
+          f
+        </div>
+        <div>
+          <span
+            class="bg-linear-to-r from-gray-500 to-gray-900 bg-clip-text text-xl font-semibold text-transparent dark:from-gray-200 dark:to-white"
+          >
+            <span class="italic">fate</span>
+          </span>
+          <p class="hidden text-xs text-muted-foreground sm:block">A modern data client for Vue.</p>
+        </div>
+      </Link>
+      <Button size="sm" variant="ghost">
+        <Link class="inline-flex items-center gap-2" href="/">
+          <Search class="h-4 w-4" />
+          <span class="hidden sm:inline">Home</span>
+        </Link>
+      </Button>
+    </div>
+  </header>
+</template>

package/templates/fate/_shared/vue-app/src/ui/Link.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Link as VoidLink } from '@void/vue';
+
+defineProps<{
+  class?: string;
+  href?: string;
+  to?: string;
+}>();
+</script>
+
+<template>
+  <VoidLink :class="$props.class" :href="href ?? to ?? '/'">
+    <slot />
+  </VoidLink>
+</template>

package/templates/fate/_shared/vue-app/src/ui/PostCard.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { ViewRef } from 'vue-fate';
+import { useView } from 'vue-fate';
+import { PostView, UserView } from '../fateViews.ts';
+import Card from './Card.vue';
+import Link from './Link.vue';
+
+const props = defineProps<{
+  post: ViewRef<'Post'>;
+}>();
+
+const post = useView(PostView, () => props.post);
+const author = useView(UserView, () => post.value?.author ?? null);
+</script>
+
+<template>
+  <Card v-if="post">
+    <article class="space-y-3">
+      <div>
+        <Link class="text-lg font-semibold hover:underline" :href="`/post/${post.id}`">
+          {{ post.title }}
+        </Link>
+        <p v-if="author" class="mt-1 text-sm text-muted-foreground">
+          By {{ author.name ?? author.username ?? author.id }}
+        </p>
+      </div>
+    </article>
+  </Card>
+</template>

package/templates/fate/_shared/vue-app/src/ui/Section.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import cx from '../lib/cx.ts';
+
+const props = defineProps<{
+  class?: string;
+  gap?: number;
+}>();
+
+const classes = computed(() =>
+  cx('container mx-auto flex max-w-5xl flex-col px-4 py-6 lg:px-8 lg:py-10', props.class),
+);
+</script>
+
+<template>
+  <section :class="classes" :style="{ gap: `${gap ?? 16}px` }">
+    <slot />
+  </section>
+</template>

package/templates/fate/_shared/vue-app/src/ui/Thinking.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Section from './Section.vue';
+</script>
+
+<template>
+  <Section>
+    <div class="flex animate-pulse items-center justify-center py-12 text-gray-500 italic">
+      Thinking...
+    </div>
+  </Section>
+</template>

package/templates/fate/_shared/vue-app/src/ui/UserCard.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ViewRef } from 'vue-fate';
+import { useView } from 'vue-fate';
+import { UserView } from '../fateViews.ts';
+import Card from './Card.vue';
+
+const props = defineProps<{
+  viewer: ViewRef<'User'>;
+}>();
+
+const viewer = useView(UserView, () => props.viewer);
+</script>
+
+<template>
+  <Card v-if="viewer">
+    <div class="space-y-2">
+      <h2 class="text-sm font-medium text-muted-foreground">Viewer</h2>
+      <p class="text-lg font-semibold">
+        {{ viewer.name ?? viewer.username ?? viewer.id }}
+      </p>
+    </div>
+  </Card>
+</template>

package/templates/fate/_shared/vue-app/src/vue-shims.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default component;
+}

package/templates/fate/_shared/vue-app/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "__TSCONFIG_EXTENDS__",
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "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": "__TSCONFIG_INCLUDE__"
+}

package/templates/fate/_shared/vue-app/vite.config.ts

@@ -0,0 +1,58 @@
+import { join } from 'node:path';
+import nkzw from '@nkzw/oxlint-config';
+import tailwindcss from '@tailwindcss/vite';
+import { voidVue } from '@void/vue/plugin';
+import dotenv from 'dotenv';
+import { defineConfig, lazyPlugins } from 'vite-plus';
+import { voidPlugin } from 'void';
+import { fate } from 'vue-fate/vite';
+
+const root = process.cwd();
+__DOTENV_CONFIG__;
+
+export default defineConfig({
+  /* __BUILD_CONFIG__ */
+  optimizeDeps: {
+    exclude: ['@nkzw/fate/client', 'vue-fate/client'],
+  },
+  fmt: {
+    experimentalSortImports: {
+      newlinesBetween: false,
+    },
+    experimentalSortPackageJson: {
+      sortScripts: true,
+    },
+    experimentalTailwindcss: {
+      stylesheet: 'src/App.css',
+    },
+    ignorePatterns: __FMT_IGNORE_PATTERNS__,
+    singleQuote: true,
+  },
+  lint: {
+    extends: [nkzw],
+    ignorePatterns: __LINT_IGNORE_PATTERNS__,
+    options: { typeAware: true, typeCheck: true },
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+  plugins: [
+    ...(lazyPlugins(() => [tailwindcss(), voidPlugin(), voidVue()]) ?? []),
+    fate({
+      module: '__FATE_MODULE__',
+      /* __FATE_TRANSPORT__ */
+    }),
+  ],
+  run: {
+    tasks: {
+      'test:all': {
+        command: 'vp check && vp test',
+      },
+    },
+  },
+  server: { port: 6001 },
+  ssr: { noExternal: ['@nkzw/fate', 'vue-fate'] },
+  staged: {
+    '*': 'vp check --fix',
+  },
+});

package/templates/fate/_shared/vue-app/void.json

@@ -0,0 +1,5 @@
+{
+  "pages": {
+    "router": true
+  }
+}

package/templates/fate/cloudflare/.github/workflows/push.yml

@@ -0,0 +1,27 @@
+name: test
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [24]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: voidzero-dev/setup-vp@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: true
+          run-install: true
+      - run: |
+          vp run dev:setup
+          vp run test:all
+          vp run build