state-ref Svelte Connector (connectSvelte)

Usage with Svelte

While React and Preact's useProfile function directly returns stateRef, SvelteConnect returns Svelte's built-in reactive Writable synchronized with the stateRef state value.

Below is a usage example.

profileStore.ts

import { connectSvelte } from "@stateref/connect-svelte";
// ... same as React example
export const useProfileStore = connectSvelte(watch);

UserComponent.svelte

<script lang="ts">
import { useProfileStore } from 'profileStore';
const age = useProfileStore<number>(stateRef => stateRef.john.age);

function handleClick() {
  age.update(n => n + 1);
}
</script>

<button on:click={handleClick}>
    john's age is {$age}
</button>

If Writable needs to reference and modify an object from the store, the copyable function is available to assist with copyOnWrite.

import { copyable } from "state-ref";
const profileObj = useProfileRef(stateRef => stateRef);

function handleClick() {
   profileObj.update(n => copyable(n).john.age.writeCopy(n.john.age + 1));
}

You can customize it by referring to the connectSvelte implementation code.

npm

• state-ref
• connect-react
• connect-preact
• connect-solid
• connect-svelte
• connect-vue
• lithent