feat: useStore

.changeset/chatty-mayflies-teach.md

@@ -0,0 +1,5 @@
+---
+"runed": minor
+---
+
+feat: `useStore`

packages/runed/src/lib/utilities/Store/Store.svelte.ts

@@ -0,0 +1,38 @@
+import { type Readable, type Writable, get } from "svelte/store";
+
+type ReadableValue<T> = T extends Readable<infer U> ? U : never;
+
+function isWritable(t: Readable<unknown>): t is Writable<unknown> {
+	return "set" in t;
+}
+
+export class Store<T extends Readable<unknown>> {
+	#current = $state() as ReadableValue<T>;
+	#store: T;
+
+	constructor(store: T) {
+		this.#current = get(store) as ReadableValue<T>;
+
+		$effect.pre(() => {
+			return store.subscribe((v) => {
+				this.#current = v as ReadableValue<T>;
+			});
+		});
+		this.#store = store;
+	}
+
+	get current(): ReadableValue<T> {
+		return this.#current;
+	}
+
+	/**
+	 * In case the expected type to set is never, this means that the store is not `writable`.
+	 */
+	set current(v: T extends Writable<unknown> ? ReadableValue<T> : never) {
+		if (isWritable(this.#store)) {
+			this.#store.set(v);
+		} else {
+			throw new Error("Tried setting a readable store");
+		}
+	}
+}

packages/runed/src/lib/utilities/Store/Store.test.svelte.ts

@@ -0,0 +1,28 @@
+import { describe, expect } from "vitest";
+import { get, readable, writable } from "svelte/store";
+import { Store } from "./index.js";
+import { testWithEffect } from "$lib/test/util.svelte.js";
+
+describe("Store", () => {
+	testWithEffect("box of writable store should be settable", () => {
+		const store = writable(0);
+		const count = new Store(store);
+		expect(count.current).toBe(0);
+		expect(get(store)).toBe(0);
+
+		count.current = 1;
+		expect(count.current).toBe(1);
+		expect(get(store)).toBe(1);
+
+		store.set(2);
+		expect(count.current).toBe(2);
+		expect(get(store)).toBe(2);
+	});
+
+	testWithEffect("box of readable store should not be settable", () => {
+		const count = new Store(readable(0));
+		expect(count.current).toBe(0);
+		// @ts-expect-error -- we're testing that the setter is not run
+		expect(() => (count.current = "abc")).toThrow();
+	});
+});

packages/runed/src/lib/utilities/Store/index.ts

@@ -0,0 +1 @@
+export { Store } from "./Store.svelte.js";

packages/runed/src/lib/utilities/index.ts

@@ -9,5 +9,6 @@ export * from "./Previous/index.js";
 export * from "./watch/index.js";
 export * from "./Readable/index.js";
 export * from "./Debounced/index.js";
+export * from "./Store/index.js";
 export * from "./PressedKeys/index.js";
 export * from "./MediaQuery/index.js";

sites/docs/content/utilities/store.md

@@ -0,0 +1,32 @@
+---
+title: Store
+description: Convert a legacy svelte store into rune-powered runeStore state.
+category: Utilities
+---
+
+<script>
+import Demo from '$lib/components/demos/store.svelte';
+</script>
+
+## Demo
+
+<Demo />
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { Store } from "runed";
+	import { writable } from "svelte/store";
+
+	const store = writable(0);
+	const runeStore = new Store(store);
+</script>
+
+<div>
+	<p>Rune: {runeStore.current}</p>
+	<button onclick={() => runeStore.current++}>Increment via runeStore</button>
+	<p>Store: {$store}</p>
+	<button onclick={() => ($store = $store + 1)}>Increment via store</button>
+</div>
+```

sites/docs/src/lib/components/demos/store.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Store } from "runed";
+	import { writable } from "svelte/store";
+
+	const store = writable(0);
+	const runeStore = new Store(store);
+</script>
+
+<div class="rounded-md bg-card p-8">
+	<button
+		class="inline-flex items-center justify-center rounded-md border bg-brand/50
+px-3 py-1.5 text-sm font-medium transition-all hover:bg-brand/25 focus:outline-none active:bg-brand/15"
+		onclick={() => runeStore.current++}>runeStore.current++</button
+	>
+	<pre class="my-4 bg-transparent p-0 font-mono">runeStore.current: {`${runeStore.current}`}</pre>
+	<button
+		class="inline-flex items-center justify-center rounded-md border bg-brand/50
+px-3 py-1.5 text-sm font-medium transition-all hover:bg-brand/25 focus:outline-none active:bg-brand/15"
+		onclick={() => ($store = $store + 1)}>$store = $store + 1</button
+	>
+	<pre class="m-0 mt-4 bg-transparent p-0 font-mono">$store: {`${$store}`}</pre>
+</div>