Svelte and Solid ​
bash
npm install @flattype/svelte @flattype/modelsSvelte (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>;| API | What 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.