ogygia — SSR islands for SvelteKit

<script>
  import Panel from '$lib/Panel.svelte' with {
    wake: 'load'
  };
</script>

<Panel />

live island

<script>
  import Chart from '$lib/Chart.svelte' with {
    wake: 'visible'
  };
</script>

<Chart />

each wakes on its own trigger

<script>
  // a frozen subtree inside an island: SSR HTML, ships no client JS
  import Snapshot from '$lib/Snapshot.svelte' with {
    wake: 'none'
  };
</script>

<Snapshot value={42} />

frozen · 0 KB JS

<script>
  import Greeting from '$lib/Greeting.svelte' with {
    render: 'deferred'
  };
</script>

<Greeting salutation="Aloha">
  {#snippet ogygiaFallback()}
    <p>loading…</p>
  {/snippet}
</Greeting>

server HTML, fetched late

<script>
  // the server picks the component; the client just paints it
  import { Region } from 'ogygia';
  import { search } from './search.remote';

  let q = $state('svelte');
  let result = $state(null);
</script>

<button onclick={async () => (result = await search(q))}>
  Search
</button>

{#if result}
  <Region of={result} />
{/if}

server chooses the component

// tick.remote.ts — the server pushes rendered HTML each second.
// `yield` awaits the partial, so its HTML rides the ticket (no fetch).
export const liveTick = query.live(async function* () {
  let n = 1;
  while (true) {
    yield region(Tick, { n: n++, at: new Date().toISOString() });
    await new Promise((r) => setTimeout(r, 1000));
  }
});

// the island just paints the latest tick — static partials morph in place
<Region of={liveTick().current} />

server pushes HTML · morphs in place

// cart.svelte.ts — a live class that can cross island boundaries
export class Cart {
  items = $state([]);
  get count() { return this.items.length; }
  add(item) { this.items.push(item); }

  // the whole opt-in: how this instance travels as a prop
  static wire = import.meta.og.wire({
    encode: (c) => $state.snapshot(c.items),
    decode: (items) => Object.assign(new Cart(), { items }),
  });
}

// page.svelte — one instance, handed to two separate islands
const cart = new Cart();
<CartCount {cart} />   <!-- reads cart.count -->
<AddButton {cart} />   <!-- calls cart.add() -->
// click Add → the count island repaints. One live object, two islands.

one live object · two islands

// collections.server.ts — one server-only definition
import { content } from 'ogygia/content';

export const docs = content({
  loader: import.meta.og.loader.markdown('./docs/**/*.svx'),
  schema
});

// docs.remote.ts — expose it over the wire, bodies stripped
export const docNav = withRemotes(docs).list({
  map: (e) => ({ slug: e.id, title: e.data.title })
});

live over the wire · no bodies shipped