`providePersister`

The providePersister function registers a Persister with a given Id into the current Provider context.

providePersister(
  persisterId: string,
  persister: AnyPersister,
): void

	Type	Description
`persisterId`	`string`	The `Id` to register the `Persister` under.
`persister`	`AnyPersister`	The `Persister` to register.
returns	`void`	This has no return value.

Example

This example registers a TinyBase object dynamically in a Provider context.

Registrar.svelte

<svelte:options runes={true} />

<script>
  import {providePersister} from 'tinybase/ui-svelte';

  let {persister} = $props();

  providePersister('registered', persister);
</script>

Reader.svelte

<svelte:options runes={true} />

<script>
  import {getPersisterIds} from 'tinybase/ui-svelte';

  const ids = getPersisterIds();
</script>

{JSON.stringify(getPersisterIds().current)}

App.svelte

<svelte:options runes={true} />

<script>
  import {Provider} from 'tinybase/ui-svelte';
  import Reader from './Reader.svelte';
  import Registrar from './Registrar.svelte';

  let {persister} = $props();
</script>

<Provider>
  <Registrar {persister} />
  <Reader />
</Provider>

import {flushSync, mount} from 'svelte';
import {createStore} from 'tinybase';
import {createCustomPersister} from 'tinybase/persisters';
import App from './App.svelte';

const store = createStore().setCell('pets', 'fido', 'species', 'dog');
const persister = createCustomPersister(
  store,
  async () => undefined,
  async () => {},
  () => undefined,
  () => {},
);
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {persister}}));
flushSync();
console.log(app.textContent);
// -> ' ["registered"]'

Since

v8.1.0