Svelte x xignal

Install

npm i xignal @xignal/svelte

Usage

Basic

// ./signal.ts

import * as xignal from "xignal";

export const count = xignal.state(0);
export const doubled = xignal.computed(() => count.get() * 2);

useSignalValue

<!-- ./Counter.svelte -->

<script lang="ts">
import { useSignalValue } from "@xignal/svelte";

import { count, doubled } from "./signal";

const countValue = useSignalValue(count);
const doubledValue = useSignalValue(doubled);
</script>
    
<div>
  <div>count { countValue.get }</div>
  <div>doubled { doubledValue.get }</div>
</div>

useSignalState

<script lang="ts">
import { useSignalState } from "@xignal/svelte";

import { count } from "./signal";

const [countValue, countUpdate] = useSignalState(count);
</script>

Utils

import { createStateWithUseSignalValue, createComputedWithUseSignalValue } from "@xignal/svelte";

const [count, useCount] = createStateWithUseSignalValue(0);
const [doubled, useDoubled] = createComputedWithUseSignalValue(() => count.get() * 2);

License

MIT