Skip to content

Svelte and Solid ​

bash
npm install @flattype/svelte @flattype/models

Svelte (3, 4 and 5). The stores follow the Svelte store contract, so $store just works:

svelte
<script lang="ts">
  import { createFlat } from "@flattype/svelte";
  import { derived, writable } from "svelte/store";

  const api = createFlat({ baseURL: "/api", headers: () => ({ authorization: `Bearer ${token}` }) });

  const users = api.store("/users", { model: User, list: true });            // $users.data: User[] | undefined
  const id = writable(1);
  const user = api.store(derived(id, (i) => `/users/${i}`), { model: User }); // the URL can be a store
  const events = api.streamStore("/export", { model: Row, table: "rows" });   // rows while downloading
</script>

{#each $users.data ?? [] as u (u.id)}<li>{u.fullName}</li>{/each}
<p>{$events.done ? "Done" : `Loading… ${$events.rows.length}`}</p>

Solid (@flattype/svelte/solid):

tsx
import { createFlatResource, createFlatStream } from "@flattype/svelte/solid";

const [user, { refetch }] = createFlatResource(() => `/users/${props.id}`, { baseURL: "/api", model: User });
const events = createFlatStream(() => "/api/export", { model: Row, table: "rows" });

<Suspense fallback={<Spinner />}>
  <Show when={user()}>{(u) => <h2>{u().fullName}</h2>}</Show>
</Suspense>;
APIWhat it does
flatStore(url, options)A store of { data, error, loading } plus refetch(). Lazy: it fetches on the first subscriber and aborts when the last one leaves. A URL store change aborts the old request
flatStreamStore(url, options)A store of { rows, done, error } plus restart(). One update per network chunk
modelStore(source, Model)Maps another store's value to a model
createFlatResource(() => url, options)A Solid resource, for <Suspense> and <ErrorBoundary>. Aborts on change and on cleanup
createFlatStream(() => url, options)rows, done and error accessors plus restart()

The stores also work in Solid, or anywhere else, through the store contract: from(flatStore(...)). Runnable apps with Playwright tests in three browsers are in examples/svelte-app and examples/solid-app.

Released under the MIT License.