void-fate

Void adapter for fate.

void-fate contains the server route helpers, SSE live transport, and React client wrapper needed to use fate in a Void app without keeping adapter glue in application code.

Deploy the same app to your own Cloudflare account or the Void platform.

New Project

For a new Void app, start from the Void template:

vp create fate -- --template void

Use Vue instead of React with:

vp create fate -- --template void --framework vue

Existing Project

For an existing Void project, add the packages directly:

pnpm add @nkzw/fate react-fate void-fate void @void/react

Cloudflare Deployment

From the project root:

vp exec void deploy --platform cloudflare

The Void template includes the VOID_LIVE Durable Object binding and class migration. Void provisions resources, applies checked-in database migrations, and deploys the app directly to your Cloudflare account. Commit the resource IDs saved in wrangler.jsonc.

After changing your database schema or auth configuration, run vp exec void db generate and review and commit the migrations before deploying. See the Cloudflare integration for migration instructions for existing apps.

Vite

Use the regular react-fate Vite plugin with the Void transport.

import { fate } from 'react-fate/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    fate({
      module: './src/fate/server.ts',
      transport: 'void',
    }),
  ],
});

Server

Create a fate live publish facade and pass its live instance to the fate server. Define the Void stream separately so defineLiveStream is called once from a single server-only module.

// src/fate/live.ts
import { defineLiveStream } from 'void/live';

export const fateStream = defineLiveStream({
  allowAnonymousControl: true,
  id: 'fate',
});

// src/fate/server.ts
import { createFateServer } from '@nkzw/fate/server';
import { createVoidFateLive } from 'void-fate/server';

export const fateLive = createVoidFateLive();

export const fateServer = createFateServer({
  live: fateLive.live,
  // context,
  // roots,
  // sources,
});

Routes

Add one route for RPC requests and one route for the SSE live transport.

// routes/fate.ts
import { defineVoidFateRoute } from 'void-fate/server';
import { fateStream } from '../src/fate/live.ts';
import { fateLive, fateServer } from '../src/fate/server.ts';

export const { GET, POST } = defineVoidFateRoute(fateServer, fateLive, {
  stream: fateStream,
});

// routes/fate-live.ts
import { defineVoidFateLiveRoute } from 'void-fate/server';
import { fateStream } from '../src/fate/live.ts';

export const { GET, POST } = defineVoidFateLiveRoute(fateStream);

The default paths are /fate for RPC and /fate-live for live updates.

React

Use VoidFateClient in your app layout. The react-fate Vite plugin wires the fate client APIs for the Void transport.

import type { ReactNode } from 'react';
import { VoidFateClient } from 'void-fate/react';

export default function Layout({
  children,
  origin,
  userId,
}: {
  children: ReactNode;
  origin: string;
  userId?: string;
}) {
  return (
    <VoidFateClient origin={origin} userId={userId}>
      {children}
    </VoidFateClient>
  );
}

Custom Paths

The defaults are intended to work without configuration. If your Void routes use different paths, update the route filenames and pass the matching paths to the client.

<VoidFateClient livePath="/custom-live" origin={origin} rpcPath="/custom-fate" userId={userId}>
  {children}
</VoidFateClient>

void-fate uses Server-Sent Events for live updates. It does not use WebSockets.