Svelte — examples

Beyond the minimal binding snippet — the patterns examples/svelte is built on: composing a data layer, slicing shared fields, and driving the UI off task state.

A .svelte.ts data layer

Factories run during component init (or in a .svelte.ts module) so runes compile — the returned object exposes plain getters that stay reactive in the template.

incidents.svelte.tsfrontend

export function createIncidents(getQuery: () => QueryArgs) {
  const seed = taskState(initIncidents);
  const pageTask = taskState(incidents.queryIncidents);
  const seedProgress = sharedValue(incidentsMemory, 'signals.seedProgress');
  const metrics = sharedValue(incidentsMemory, 'state.metrics');

  seed.runOnce();
  $effect(() => {
    const q = getQuery();
    if (seed.settled) pageTask.run(q);
  });

  return {
    get ready() { return seed.settled; },
    get seedProgress() { return seedProgress.value ?? 0; },
    get metrics() { return metrics.value ?? null; },
    get page() { return pageTask.data; },
    get isFetching() { return pageTask.pending; },
  };
}

Drive the template

The getters read rune-backed state — conditionals and progress bars update on every worker write.

frontend

<script lang="ts">
  import { createIncidents } from './incidents.svelte';
  const data = createIncidents(() => query);
</script>

{#if !data.ready}
  <progress value={data.seedProgress} max={1} />
{:else if data.isFetching}
  <p>scanning…</p>
{:else}
  <p>{data.page?.rows.length ?? 0} rows</p>
{/if}