@nkzw/fate 1.0.3 → 1.2.0

package/docs/{guide/server-integration.md → integrations/server.md}

@@ -1,9 +1,10 @@
 # Server Integration
 
-Until now, we have focused on the client-side API of fate. You'll need a backend that follows fate's data protocol so the Vite plugin can wire the typed fate APIs into your app. _fate_ currently ships two server paths:
+Until now, we have focused on the client-side API of fate. You'll need a backend that can be wired into fate's typed request model so the Vite plugin can connect the typed fate APIs to your app. _fate_ currently ships three integration paths:
 
 - The native fate protocol, which is transport-agnostic and can be hosted by any Fetch-compatible server.
 - The tRPC adapter, which keeps compatibility with existing tRPC backends.
+- The [GraphQL transport](graphql.md), which maps fate views and roots to an existing GraphQL schema.
 
 _fate_ currently provides database adapters for Prisma and Drizzle, but the framework itself is not coupled to a particular ORM. The adapters plug into the same source execution runtime and can be exposed through the native protocol or through tRPC.
 
@@ -184,7 +185,9 @@ app.post('/fate/live', handler);
 
 Configure the Vite plugin with the native transport:
 
-```tsx
+::: code-group
+
+```tsx [React]
 import { fate } from 'react-fate/vite';
 import { defineConfig } from 'vite';
 
@@ -198,9 +201,29 @@ export default defineConfig({
 });
 ```
 
+```ts [Vue]
+import vue from '@vitejs/plugin-vue';
+import { fate } from 'vue-fate/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    fate({
+      module: '@your-org/server/fate.ts',
+      transport: 'native',
+    }),
+  ],
+});
+```
+
+:::
+
 With the native transport, the Vite plugin handles the HTTP transport setup. If you need to create a client manually, use `createFateClient` with the same route:
 
-```tsx
+::: code-group
+
+```tsx [React]
 import { createFateClient } from 'react-fate/client';
 
 const client = createFateClient({
@@ -208,6 +231,16 @@ const client = createFateClient({
 });
 ```
 
+```ts [Vue]
+import { createFateClient } from 'vue-fate/client';
+
+const client = createFateClient({
+  url: '/fate',
+});
+```
+
+:::
+
 The HTTP transport batches operations issued in the same microtask into one `POST /fate` request. Live views use one `GET /fate/live` SSE stream per fate client and `POST /fate/live` control messages when views subscribe or unsubscribe.
 
 ### Custom Queries
@@ -584,7 +617,9 @@ export * from './views.ts';
 
 Configure the fate Vite plugin with your server module:
 
-```tsx
+::: code-group
+
+```tsx [React]
 import { fate } from 'react-fate/vite';
 import { defineConfig } from 'vite';
 
@@ -597,11 +632,28 @@ export default defineConfig({
 });
 ```
 
+```ts [Vue]
+import vue from '@vitejs/plugin-vue';
+import { fate } from 'vue-fate/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    fate({
+      module: '@your-org/server/trpc/router.ts',
+    }),
+  ],
+});
+```
+
+:::
+
 _Note: fate uses the specified server module name to find the server types it needs. Make sure that the module is available to the client package's Vite config._
 
 During development, the plugin watches the server module and the files it imports. When one of those files changes, fate updates the internal client wiring and invalidates `@nkzw/fate/client` in Vite's module graph.
 
-For a barebones client without React, import the plugin from `@nkzw/fate/vite` and the client APIs from `@nkzw/fate/client`. The plugin wires the same server types for the selected import path.
+For a barebones client without a framework adapter, import the plugin from `@nkzw/fate/vite` and the client APIs from `@nkzw/fate/client`. The plugin wires the same server types for the selected import path.
 
 The plugin writes project-local types under `.fate/`. If your TypeScript config does not already include dot-directories, extend the generated config:
 
@@ -613,9 +665,11 @@ The plugin writes project-local types under `.fate/`. If your TypeScript config
 
 ## Creating a _fate_ Client
 
-Now that the Vite plugin has connected the types, create a fate client instance and provide it to your React app with the `FateClient` context provider:
+Now that the Vite plugin has connected the types, create a fate client instance and provide it to your app with the `FateClient` provider:
 
-```tsx
+::: code-group
+
+```tsx [React]
 import { httpBatchLink } from '@trpc/client';
 import { FateClient } from 'react-fate';
 import { createFateClient } from 'react-fate/client';
@@ -641,4 +695,37 @@ export function App() {
 }
 ```
 
+```vue [Vue]
+<script setup lang="ts">
+import { httpBatchLink } from '@trpc/client';
+import { computed } from 'vue';
+import { FateClient } from 'vue-fate';
+import { createFateClient } from 'vue-fate/client';
+import AppRoutes from './AppRoutes.vue';
+
+const fate = computed(() =>
+  createFateClient({
+    links: [
+      httpBatchLink({
+        fetch: (input, init) =>
+          fetch(input, {
+            ...init,
+            credentials: 'include',
+          }),
+        url: `${env('SERVER_URL')}/trpc`,
+      }),
+    ],
+  }),
+);
+</script>
+
+<template>
+  <FateClient :client="fate">
+    <AppRoutes />
+  </FateClient>
+</template>
+```
+
+:::
+
 _And you are all set. Happy building!_

package/docs/{guide/void-integration.md → integrations/void.md}

@@ -7,15 +7,25 @@ setup without copying its adapter glue.
 
 ## Install
 
-```sh
-pnpm add @nkzw/fate react-fate void-fate void
+::: code-group
+
+```sh [React]
+pnpm add @nkzw/fate react-fate void-fate void @void/react
+```
+
+```sh [Vue]
+pnpm add @nkzw/fate vue-fate void-fate void @void/vue
 ```
 
+:::
+
 ## Vite
 
-Use the regular `react-fate` Vite plugin with the Void transport:
+Use the framework adapter's Vite plugin with the Void transport:
 
-```tsx
+::: code-group
+
+```tsx [React]
 import { voidReact } from '@void/react/plugin';
 import { fate } from 'react-fate/vite';
 import { defineConfig } from 'vite-plus';
@@ -33,6 +43,26 @@ export default defineConfig({
 });
 ```
 
+```ts [Vue]
+import { voidVue } from '@void/vue/plugin';
+import { fate } from 'vue-fate/vite';
+import { defineConfig } from 'vite-plus';
+import { voidPlugin } from 'void';
+
+export default defineConfig({
+  plugins: [
+    voidPlugin(),
+    voidVue(),
+    fate({
+      module: './src/fate/server.ts',
+      transport: 'void',
+    }),
+  ],
+});
+```
+
+:::
+
 The Void transport uses `/fate` for RPC requests and `/fate-live` for live
 updates by default. In SSR, it calls the exported fate server directly. In the
 browser, it uses fetch and the SSE live endpoint.
@@ -104,12 +134,14 @@ export const { GET, POST } = defineVoidFateLiveRoute(fateServer, fateLive);
 The live route handles `GET /fate-live` SSE connections and `POST /fate-live`
 control messages. `void-fate` does not use WebSockets.
 
-## React Layout
+## Layout
 
-Wrap your app with `VoidFateClient` from `void-fate/react`. It creates and
-provides the fate client through `react-fate`:
+Wrap your app with the Void fate client for your framework. It creates and
+provides the fate client through the matching adapter.
 
-```tsx
+::: code-group
+
+```tsx [React]
 import { useShared } from '@void/react';
 import type { ReactNode } from 'react';
 import { VoidFateClient } from 'void-fate/react';
@@ -128,9 +160,36 @@ export default function Layout({ children }: { children: ReactNode }) {
 }
 ```
 
-`userId` is optional, but passing it lets `VoidFateClient` recreate the client
-when the signed-in user changes. Browser requests include credentials when a
-`userId` is present.
+```vue [Vue]
+<script setup lang="ts">
+import { useShared } from '@void/vue';
+import { computed } from 'vue';
+import { FateClient } from 'vue-fate';
+import { createFateClient } from 'vue-fate/client';
+import type { SharedData } from '../src/lib/shared.ts';
+
+const shared = useShared<SharedData>();
+
+const fate = computed(() =>
+  createFateClient({
+    origin: typeof window === 'undefined' ? shared.origin : window.location.origin,
+    userId: shared.auth.user?.id,
+  }),
+);
+</script>
+
+<template>
+  <FateClient :client="fate">
+    <slot />
+  </FateClient>
+</template>
+```
+
+:::
+
+`userId` is optional, but passing it lets the client be recreated when the
+signed-in user changes. Browser requests include credentials when a `userId` is
+present.
 
 ## Custom Paths
 
@@ -143,12 +202,35 @@ export const fateLive = createVoidFateLive({
 });
 ```
 
-```tsx
+::: code-group
+
+```tsx [React]
 <VoidFateClient livePath="/custom-fate-live" origin={origin} rpcPath="/custom-fate" userId={userId}>
   {children}
 </VoidFateClient>
 ```
 
+```vue [Vue]
+<script setup lang="ts">
+const fate = computed(() =>
+  createFateClient({
+    livePath: '/custom-fate-live',
+    origin,
+    rpcPath: '/custom-fate',
+    userId,
+  }),
+);
+</script>
+
+<template>
+  <FateClient :client="fate">
+    <slot />
+  </FateClient>
+</template>
+```
+
+:::
+
 The route helper does not own the route path. Make sure your Void route filename
 or router configuration matches the paths you pass to the client.
 

package/lib/{executor-BqwHdN3n.d.mts → executor-Dh-MLUXc.d.mts}

@@ -1,4 +1,4 @@
-import { q as QueryProcedure, t as AnyRecord } from "./types-Dz46PXr3.mjs";
+import { r as AnyRecord, rt as QueryProcedure } from "./transport-BjGm__3t.mjs";
 import { z } from "zod";
 
 //#region src/server/dataView.d.ts

package/lib/graphqlTransport-B3cbhvJX.d.mts

@@ -0,0 +1,74 @@
+import { C as MutationShape, f as Entity, j as TypeConfig, t as Transport } from "./transport-BjGm__3t.mjs";
+
+//#region src/graphqlTransport.d.ts
+type TransportMutations = Record<string, MutationShape>;
+type EmptyTransportMutations = Record<never, MutationShape>;
+type FetchLike = (input: string | URL | Request, init?: RequestInit) => Promise<Response>;
+type HeadersFactory = HeadersInit | (() => HeadersInit | Promise<HeadersInit>);
+type EventSourceConstructor = new (url: string, options?: {
+  withCredentials?: boolean;
+}) => {
+  addEventListener(type: string, listener: (event: Event) => void): void;
+  close(): void;
+  removeEventListener(type: string, listener: (event: Event) => void): void;
+};
+type GraphQLRootConfig = {
+  connection?: 'relay';
+  field?: string;
+  type: string;
+};
+type GraphQLMutationDefinition<T extends Entity = Entity, Input = unknown, Output = unknown> = Readonly<{
+  __fateGraphQLMutation?: {
+    input: Input;
+    output: Output;
+  };
+  entity: T['__typename'];
+  field: string;
+  inputArg?: false | string;
+}>;
+type GraphQLMutationInput<Definition> = Definition extends GraphQLMutationDefinition<any, infer Input, any> ? Input : never;
+type GraphQLMutationOutput<Definition> = Definition extends GraphQLMutationDefinition<any, any, infer Output> ? Output : never;
+type GraphQLMutationMap<Mutations> = Mutations extends Record<string, GraphQLMutationDefinition> ? { [K in keyof Mutations]: {
+  input: GraphQLMutationInput<Mutations[K]>;
+  output: GraphQLMutationOutput<Mutations[K]>;
+} } : EmptyTransportMutations;
+type GraphQLMutationRuntimeConfig = {
+  entity: string;
+  field: string;
+  inputArg?: false | string;
+};
+type GraphQLLiveOptions = {
+  connectionField?: string;
+  entityField?: string;
+  url?: string | URL;
+  withCredentials?: boolean;
+};
+type GraphQLTransportOptions<Mutations extends TransportMutations = EmptyTransportMutations> = {
+  decodeNodeId?: (type: string, id: string | number) => string | number;
+  encodeNodeId?: (type: string, id: string | number) => string | number;
+  eventSource?: EventSourceConstructor;
+  fetch?: FetchLike;
+  headers?: HeadersFactory;
+  live?: boolean | GraphQLLiveOptions;
+  mutations?: Record<Extract<keyof Mutations, string>, GraphQLMutationRuntimeConfig>;
+  roots?: Record<string, GraphQLRootConfig>;
+  types: ReadonlyArray<Omit<TypeConfig, 'getId'> & Partial<Pick<TypeConfig, 'getId'>>>;
+  url: string | URL;
+};
+declare function graphqlMutation<T extends Entity, Input, Output>(entity: T['__typename'], options: {
+  field: string;
+  inputArg?: false | string;
+}): GraphQLMutationDefinition<T, Input, Output>;
+declare function createGraphQLTransport<Mutations extends TransportMutations = EmptyTransportMutations>({
+  decodeNodeId,
+  encodeNodeId,
+  fetch: fetchImpl,
+  headers,
+  live,
+  mutations,
+  roots,
+  types: typeConfigs,
+  url
+}: GraphQLTransportOptions<Mutations>): Transport<Mutations>;
+//#endregion
+export { GraphQLTransportOptions as a, GraphQLMutationOutput as i, GraphQLMutationInput as n, createGraphQLTransport as o, GraphQLMutationMap as r, graphqlMutation as s, GraphQLMutationDefinition as t };