fix!: persisted is now persisted-store and queryParam is now query-param-store which is a breaking change if you use deep imports for either - filenames were changed to make work with Kitbook updates

Author: jacob-8

src/lib/index.ts

@@ -42,5 +42,5 @@ export { default as DataList } from './ui/DataList.svelte';
 export { default as MultiSelect } from './ui/MultiSelect.svelte';
 
 export { default as QueryParam } from './stores/QueryParam.svelte';
-export { createPersistedStore } from './stores/persisted.js';
-export { createQueryParamStore, type QueryParamStore } from './stores/queryParam.js';
+export { createPersistedStore } from './stores/persisted-store.js';
+export { createQueryParamStore, type QueryParamStore } from './stores/query-param-store.js';

src/lib/stores/QueryParam.composition

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import QueryParam from '$lib/stores/QueryParam.svelte';
+  import Button from '$lib/ui/Button.svelte';
+  const persist: 'localStorage' | 'sessionStorage' = 'localStorage';
+</script>
+
+<QueryParam key="first" replaceState startWith="hello" {persist} let:value let:set let:remove on:value={(e) => console.log(e.detail)}>
+  <pre class="pl-3">{JSON.stringify(value, null, 2)}</pre>
+  <Button href="/stores/1-query-param-component?first=123">nav to 123</Button>
+  <Button onclick={() => set('hey')}>Set to 'hey'</Button>
+  <Button onclick={remove}>Remove</Button>
+</QueryParam>
+
+<QueryParam key="text" startWith="hey" persist="localStorage" let:value let:set on:value={(e) => console.log(e.detail)}>
+  <input type="text" {value} on:input={(e) => set(e.currentTarget.value)} placeholder="Type here" />
+  <input type="text" {value} on:input={(e) => set(e.currentTarget.value)} placeholder="Type here" />
+  <pre class="pl-3">{JSON.stringify(value, null, 2)}</pre>
+</QueryParam>
+

src/lib/stores/QueryParam.md

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher, onDestroy } from 'svelte';
   import type { Unsubscriber } from 'svelte/store';
-  import { createQueryParamStore, type QueryParamStoreOptions } from './queryParam';
+  import { createQueryParamStore, type QueryParamStoreOptions } from './query-param-store';
 
   export let key: string;
   export let replaceState = true;

src/lib/stores/QueryParam.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { createPersistedStore } from '$lib';
+  import Button from '$lib/ui/Button.svelte';
+
+  const showSomething = createPersistedStore<boolean>('myCustomKeyName', true, true);
+  const showSomethingElse = createPersistedStore<boolean>('myCustomKeyName2', true, true);
+</script>
+
+{$showSomething}
+<Button onclick={() => ($showSomething = !$showSomething)}>Toggle showSomething</Button>,
+{$showSomethingElse}
+<Button onclick={() => ($showSomethingElse = !$showSomethingElse)}>Toggle showSomethingElse</Button>

src/lib/stores/persisted-store.composition

@@ -1,26 +1,9 @@
-<script lang="ts">
-  import { createPersistedStore } from '$lib';
-  import Button from '$lib/ui/Button.svelte';
-  import { Story } from 'kitbook';
-
-  const showSomething = createPersistedStore<boolean>('myCustomKeyName', true, true);
-  const showSomethingElse = createPersistedStore<boolean>('myCustomKeyName2', true, true);
-</script>
-
-<!-- prettier-ignore -->
 # Persisted Store
 
-Useful for user settings that don't need saved in a database. First argument is the key, second is the value, and add an optional true third argument to sync across tabs.
+Useful for user settings that don't need saved in a database, but just in `localStorage`. First argument is the key, second is the value, and add an optional true third argument to sync across tabs.
 
 `const showSomething = createPersistedStore<boolean>('myCustomKeyName', true, true);`
 
 The type definition will be automatically inferred from the value passed in, though you can explicitly type it as seen in the example here to enforce a desired type.
 
-<Story name="tab synced">
-  {$showSomething}
-  <Button onclick={() => ($showSomething = !$showSomething)}>Toggle showSomething</Button>,
-  {$showSomethingElse}
-  <Button onclick={() => ($showSomethingElse = !$showSomethingElse)}>Toggle showSomethingElse</Button>
-</Story>
-
-Tab syncing can be seen if you open this page in two tabs and toggle the value.
+Tab syncing can be seen if you open this page in two tabs and toggle the value (you can observe the two iframes in sync below, but tab persistence is what you're really after).

src/lib/stores/persisted-store.md

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { createPersistedStore } from '$lib';
+  import Button from '$lib/ui/Button.svelte';
+
+  const showSomething = createPersistedStore<boolean>('myCustomKeyName', true, true);
+  const showSomethingElse = createPersistedStore<boolean>('myCustomKeyName2', true, true);
+</script>
+
+{$showSomething}
+<Button onclick={() => ($showSomething = !$showSomething)}>Toggle showSomething</Button>,
+{$showSomethingElse}
+<Button onclick={() => ($showSomethingElse = !$showSomethingElse)}>Toggle showSomethingElse</Button>

src/lib/stores/persisted.ts renamed to src/lib/stores/persisted-store.ts

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import Button from '$lib/ui/Button.svelte';
+  
+  import { createQueryParamStore } from './query-param-store';
+  const item = createQueryParamStore<string | number | boolean | any[] | typeof object>({ key: 'item', log: true, replaceState: true, persist: 'localStorage', 'startWith': 'foo' });
+
+  const object = {
+    foo: 'hi there',
+    bar: {
+      blah: 123,
+      quux: [1, 2, 3],
+    },
+  };
+</script>
+
+<!-- # Query Param Store -->
+
+<!-- Update by changing URL: -->
+<Button href="?compositionName=default">No query param</Button>
+<Button href="?compositionName=default&item=">no value</Button>
+<Button href="?compositionName=default&item=123">nav to 123</Button>
+<Button href="?compositionName=default&item=1234">nav to 1234</Button>
+
+<!-- Update by setting store value: -->
+<Button onclick={() => ($item = '')}>Set to empty string</Button>
+<Button onclick={() => ($item = 12345)}>Set to 12345</Button>
+<Button onclick={() => ($item = 123456)}>Set to 123456</Button>
+<Button onclick={() => ($item = 0)}>Set to 0</Button>
+<Button onclick={() => ($item = object)}>Set to object</Button>
+<Button onclick={() => ($item = [1, 'hi', object])}>Set to array w/ object</Button>
+<Button onclick={() => ($item = 'Hello world? & some = that')}>Set to String with characters needing escaped</Button>
+<Button onclick={() => ($item = null)}>Set to null</Button>
+<Button onclick={() => ($item = undefined)}>Set to undefined</Button>
+<Button onclick={() => ($item = false)}>Set to false</Button>
+<Button onclick={() => item.remove()}>Remove function</Button>
+
+<pre>{JSON.stringify($item, null, 2)}</pre>

src/lib/stores/persisted.synced.composition

@@ -1,42 +1,5 @@
-<script lang="ts">
-  import Button from '$lib/ui/Button.svelte';
-  
-  import { createQueryParamStore } from '$lib/stores/queryParam';
-  const item = createQueryParamStore({ key: 'item', log: true, replaceState: true, persist: 'localStorage', 'startWith': 'foo' });
-
-  const object = {
-    foo: 'hi there',
-    bar: {
-      blah: 123,
-      quux: [1, 2, 3],
-    },
-  };
-</script>
-
 # Query Param Store
 
-Update by changing URL:
-<Button href="/stores/0-query-param">No query param</Button>
-<Button href="/stores/0-query-param?item=">no value</Button>
-<Button href="/stores/0-query-param?item=123">nav to 123</Button>
-<Button href="/stores/0-query-param?item=1234">nav to 1234</Button>
-
-Update by setting store value:
-<Button onclick={() => ($item = '')}>Set to empty string</Button>
-<Button onclick={() => ($item = 12345)}>Set to 12345</Button>
-<Button onclick={() => ($item = 123456)}>Set to 123456</Button>
-<Button onclick={() => ($item = 0)}>Set to 0</Button>
-<Button onclick={() => ($item = object)}>Set to object</Button>
-<Button onclick={() => ($item = [1, 'hi', object])}>Set to array w/ object</Button>
-<Button onclick={() => ($item = 'Hello world? & some = that')}>Set to String with characters needing escaped</Button>
-<Button onclick={() => ($item = null)}>Set to null</Button>
-<Button onclick={() => ($item = undefined)}>Set to undefined</Button>
-<Button onclick={() => ($item = false)}>Set to false</Button>
-<Button onclick={() => item.remove()}>Remove function</Button>
-
-<pre>{JSON.stringify($item, null, 2)}</pre>
-
-<!-- prettier-ignore -->
 - server/client side query params based store
 - Must be initialized from within a `.svelte` file and not a `.ts` file (see https://github.com/sveltejs/kit/issues/2381) because only components can access the `$page` store. Listening to the URL won't work because we want this to work server-side as well.
 - Only works with SvelteKit as it relies on kit imports. Feel to copy the code and create your own that works with other Svelte frameworks. If needed, refer to the inspiration repos for this tool: [svelte-pathfinder](https://github.com/sveltetools/svelte-pathfinder) and [svelte-store-router](https://github.com/zyxd/svelte-store-router)