Svelte 5

Rune-based reactive wrappers using $state and $effect. Input is a getter () => Input for reactive dependency tracking. Generated as .svelte.ts (required for rune syntax).

Setup

toml
# metaxy.config.toml
[output]
svelte = "src/lib/rpc.svelte.ts"

or via CLI

sh
metaxy generate --svelte-output src/lib/rpc.svelte.ts

createQuery

ts
import { createQuery } from './rpc.svelte';
import { rpc } from './client';

// Void input
const time = createQuery(rpc, 'time');

// Reactive input — refetches when name changes
let name = $state('World');
const hello = createQuery(rpc, 'hello', () => name);

// With options
const users = createQuery(rpc, 'list_users', () => page, {
  enabled: () => page > 0,
  refetchInterval: 30000,
  placeholderData: [],
  onSuccess: (data) => console.log(data),
});

// Access state
hello.data              // T | undefined
hello.error             // RpcError | undefined
hello.status            // "idle" | "loading" | "success" | "error"
hello.isLoading         // boolean
hello.isSuccess         // boolean
hello.isError           // boolean
hello.isPlaceholderData // boolean (true until first real fetch)
hello.refetch()         // manual refetch

createMutation

ts
import { createMutation } from './rpc.svelte';

const echo = createMutation(rpc, 'echo', {
  onSuccess: (data) => console.log('Done:', data),
  onError: (err) => console.error(err),
  onSettled: () => console.log('Finished'),
});

// Fire-and-forget
echo.mutate({ message: 'Hello', uppercase: true });

// Await the result
const result = await echo.mutateAsync({ message: 'Hello', uppercase: true });

// Access state
echo.data       // T | undefined
echo.error      // RpcError | undefined
echo.isLoading  // boolean
echo.isSuccess  // boolean
echo.isError    // boolean
echo.reset()    // clear state

visit GitHub to learn more about metaxy