@stage-kit/svelte

Thin Svelte 5 adapter for @stage-kit/core: reactively switch between unit variants (e.g. account-type-specific setup) with a single $effect, race-safe and SSR-safe. This is the only package in the stage-kit family that imports svelte — the core primitive it wraps has no framework dependency at all.

npm install @stage-kit/core @stage-kit/svelte

<script lang="ts">
	import { useSwitcher } from '@stage-kit/svelte';
	import { connected, producer, consumer } from './dashboard-units';

	let { auth } = $props();

	// Synchronous, SSR-safe — runs on both server and browser.
	const connectedCtx = connected.init({ auth });
	const initialKey = auth.isProducer ? 'producer' : 'consumer';
	const initialVariant =
		(initialKey === 'producer' ? producer : consumer).init?.(connectedCtx) ?? connectedCtx;

	// Reactive from here on — browser-only, since $effect never runs
	// during SSR. Switching destroys the outgoing variant and initializes
	// the incoming one; `connectedCtx` is never re-created.
	const variant = useSwitcher(
		() => (auth.isProducer ? 'producer' : 'consumer'),
		(key) => (key === 'producer' ? producer : consumer),
		{ parent: connectedCtx, seed: { key: initialKey, ctx: initialVariant } }
	);
</script>

{variant.current.invitations.count}

Full usage examples, SSR considerations, and the exact semantics of a failed switch live in docs/README.md at the root of this repository.