Svelte Integration

@pulse-js/svelte provides a native experience for Svelte 5 Runes while maintaining backward compatibility with Svelte stores.

Installation

npm install @pulse-js/svelte

Svelte 5 Runes (Recommended)

When used in Svelte 5, Pulse primitives behave like standard Runes ($state, $derived).

usePulse with Sources

Returns a reactive object with a .value property.

<script lang="ts">
  import { source } from "@pulse-js/core";
  import { usePulse } from "@pulse-js/svelte";

  const countSource = source(0);
  const count = usePulse(countSource);
</script>

<button onclick={() => countSource.update(n => n + 1)}>
  Count: {count.value}
</button>

The .value property is fully reactive and updates the template automatically when the Source or Guard changes.

usePulse with Guards

Returns a reactive GuardState lookalike that you can use directly in your template.

<script lang="ts">
  import { useGuard } from "@pulse-js/svelte";
  import { authGuard } from "./logic";

  const state = useGuard(authGuard);
</script>

{#if state.status === "ok"}
  <p>Welcome, {state.value.name}</p>
{:else if state.status === "fail"}
  <p style="color: red">Error: {state.reason}</p>
{/if}

Legacy Svelte Stores

If you are using Svelte 4 or prefer the store syntax ($variable), use usePulseStore.

<script lang="ts">
  import { usePulseStore } from "@pulse-js/svelte";
  const count = usePulseStore(mySource);
</script>

<p>Value: {$count}</p>

Vite Configuration

For Svelte 5, you must ensure that Vite correctly resolves the client-side version of Svelte. Add the following to your vite.config.ts:

import { defineConfig } from 'vite'

export default defineConfig({
  // ...
  resolve: {
    conditions: ['browser', 'module', 'jsnext:main', 'jsnext']
  },
  optimizeDeps: {
    // Required for Svelte 5 libraries using Runes
    exclude: ['@pulse-js/svelte']
  }
})