Adapter Blueprint

Swoff communicates with your framework through standard browser APIs: window events and CustomEvent details. If you know how to listen to a DOM event and expose reactive state in your framework, you can create an adapter.

No Swoff internals required.

The contract

Window events

These are the "sockets" Swoff provides. Listen with window.addEventListener(eventName, handler).

Window properties

Swoff sets these properties on window for synchronous access:

Adapter template

Every adapter follows the same pattern. Here's a minimal useSwoffFetch for any reactive framework:

// 1. Define the reactive state shape
interface CachedFetchState<T> {
  data: T | null;
  isLoading: boolean;
  error: Error | null;
  fromCache: boolean;
}

// 2. Create adapter using your framework's reactive primitives
//    React: useState + useEffect
//    Vue:   ref + onMounted
//    Svelte: writable + onMount

function useSwoffFetch(url: string) {
  // Initialize reactive state
  // Call swoff fetch on mount / url change
  // Listen to cache-invalidated to refetch
  // Return reactive state
}

The 16 hooks available in the React ecosystem show the complete pattern — inspect the generated files in swoff/adapters/ for reference.

Adapter list

These are the standard adapters. Each maps directly to the events above:

Prerequisites

• Basic knowledge of your framework's reactive system (hooks, refs, stores, signals)
• Familiarity with window.addEventListener and CustomEvent
• The generated swoff/ directory in your project

How to add a new framework

1. Create a file for your framework (e.g., frameworks/solid.mdx)
2. Document the swoff.config.json values specific to that framework
3. Link to this Blueprint for the adapter implementation
4. Update frameworks/meta.json to include your file