update box

Author: abdel-17

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

@@ -1,115 +1,113 @@
-import { Derived, Ref } from "./box.svelte.js";
+import { box, ref } from "./box.svelte.js";
 
 describe("box", () => {
 	it("updates when the referenced value updates", () => {
-		let count = 0;
-		const box = Ref.to(() => count);
-		expect(box.current).toBe(0);
+		let count = $state(0);
+		const boxed = box(() => count);
+		expect(boxed.current).toBe(0);
 
 		count = 1;
-		expect(box.current).toBe(1);
+		expect(boxed.current).toBe(1);
 	});
 
 	it("creates a readonly box when only a getter is passed", () => {
-		const box = Ref.to(() => 0);
-		expect(box.current).toBe(0);
+		const boxed = box(() => 0);
 
 		function set() {
 			// @ts-expect-error It's readonly
-			box.current = 1;
+			boxed.current = 1;
 		}
 
 		expect(set).toThrowError();
 	});
 
 	it("creates a writable box when a getter and setter are passed", () => {
-		let count = 0;
-		const box = Ref.to(
+		let count = $state(0);
+		const boxed = box(
 			() => count,
 			(value) => {
 				count = value;
 			}
 		);
-		expect(box.current).toBe(0);
+		expect(boxed.current).toBe(0);
 
-		box.current = 1;
-		expect(box.current).toBe(1);
+		boxed.current = 1;
+		expect(boxed.current).toBe(1);
 		expect(count).toBe(1);
 
 		count = 2;
-		expect(box.current).toBe(2);
+		expect(boxed.current).toBe(2);
 	});
 
-	it("does not memoize the getter", () => {
-		const fn = vi.fn(() => 0);
-		const box = Ref.to(fn);
+	it("memoizes the getter", () => {
+		let count = $state(0);
+		const fn = vi.fn(() => count);
+		const boxed = box(fn);
 		expect(fn).not.toHaveBeenCalled();
 
-		box.current;
+		boxed.current;
+		expect(fn).toHaveBeenCalledTimes(1);
+
+		boxed.current;
 		expect(fn).toHaveBeenCalledTimes(1);
 
-		box.current;
+		count = 1;
+		boxed.current;
+		expect(fn).toHaveBeenCalledTimes(2);
+
+		boxed.current;
 		expect(fn).toHaveBeenCalledTimes(2);
 	});
 });
 
-describe("Derived", () => {
+describe("ref", () => {
 	it("updates when the referenced value updates", () => {
-		let count = $state(0);
-		const box = Derived.by(() => count);
-		expect(box.current).toBe(0);
+		let count = 0;
+		const boxed = ref(() => count);
+		expect(boxed.current).toBe(0);
 
 		count = 1;
-		expect(box.current).toBe(1);
+		expect(boxed.current).toBe(1);
 	});
 
 	it("creates a readonly box when only a getter is passed", () => {
-		const box = Derived.by(() => 0);
-		expect(box.current).toBe(0);
+		const boxed = ref(() => 0);
 
 		function set() {
 			// @ts-expect-error It's readonly
-			box.current = 1;
+			boxed.current = 1;
 		}
 
 		expect(set).toThrowError();
 	});
 
 	it("creates a writable box when a getter and setter are passed", () => {
-		let count = $state(0);
-		const box = Derived.by(
+		let count = 0;
+		const boxed = ref(
 			() => count,
 			(value) => {
 				count = value;
 			}
 		);
-		expect(box.current).toBe(0);
+		expect(boxed.current).toBe(0);
 
-		box.current = 1;
-		expect(box.current).toBe(1);
+		boxed.current = 1;
+		expect(boxed.current).toBe(1);
 		expect(count).toBe(1);
 
 		count = 2;
-		expect(box.current).toBe(2);
+		expect(boxed.current).toBe(2);
 	});
 
-	it("memoizes the getter", () => {
-		let count = $state(0);
-		const fn = vi.fn(() => count);
-		const box = Derived.by(fn);
+	it("does not memoize the getter", () => {
+		const fn = vi.fn(() => 0);
+		const boxed = ref(fn);
 		expect(fn).not.toHaveBeenCalled();
 
-		box.current;
-		expect(fn).toHaveBeenCalledTimes(1);
-
-		box.current;
+		boxed.current;
 		expect(fn).toHaveBeenCalledTimes(1);
 
-		count = 1;
-		box.current;
-		expect(fn).toHaveBeenCalledTimes(2);
-
-		box.current;
+		boxed.current;
 		expect(fn).toHaveBeenCalledTimes(2);
 	});
 });

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

@@ -11,71 +11,43 @@ export type WritableBox<T> = {
 	readonly set: Setter<T>;
 };
 
-export class Ref<T> implements Box<T> {
-	readonly get: Getter<T>;
-
-	constructor(get: Getter<T>) {
-		this.get = get;
-	}
-
-	static to<T>(get: Getter<T>): Box<T>;
-	static to<T>(get: Getter<T>, set: Setter<T>): WritableBox<T>;
-	static to<T>(get: Getter<T>, set?: Setter<T>): Box<T> {
-		if (set !== undefined) {
-			return new WritableRef(get, set);
-		}
-		return new Ref(get);
-	}
-
-	get current(): T {
-		return this.get();
-	}
+export function box<T>(get: Getter<T>): Box<T>;
+export function box<T>(get: Getter<T>, set: Setter<T>): WritableBox<T>;
+export function box<T>(get: Getter<T>, set?: Setter<T>): Box<T> {
+	const current = $derived.by(get);
+	if (set !== undefined) {
+		return new WritableRef(() => current, set);
+	}
+	return new Ref(() => current);
 }
 
-class WritableRef<T> extends Ref<T> implements WritableBox<T> {
-	readonly set: Setter<T>;
-
-	constructor(get: Getter<T>, set: Setter<T>) {
-		super(get);
-		this.set = set;
-	}
-
-	get current(): T {
-		return this.get();
-	}
-
-	set current(value: T) {
-		this.set(value);
+export function ref<T>(get: Getter<T>): Box<T>;
+export function ref<T>(get: Getter<T>, set: Setter<T>): WritableBox<T>;
+export function ref<T>(get: Getter<T>, set?: Setter<T>): Box<T> {
+	if (set !== undefined) {
+		return new WritableRef(get, set);
 	}
+	return new Ref(get);
 }
 
-export class Derived<T> implements Box<T> {
+class Ref<T> {
 	readonly get: Getter<T>;
 
 	constructor(get: Getter<T>) {
-		const current = $derived.by(get);
-		this.get = () => current;
-	}
-
-	static by<T>(get: Getter<T>): Derived<T>;
-	static by<T>(get: Getter<T>, set: Setter<T>): WritableDerived<T>;
-	static by<T>(get: Getter<T>, set?: Setter<T>): Derived<T> {
-		if (set !== undefined) {
-			return new WritableDerived(get, set);
-		}
-		return new Derived(get);
+		this.get = get;
 	}
 
 	get current(): T {
 		return this.get();
 	}
 }
 
-class WritableDerived<T> extends Derived<T> implements WritableBox<T> {
+class WritableRef<T> {
+	readonly get: Getter<T>;
 	readonly set: Setter<T>;
 
 	constructor(get: Getter<T>, set: Setter<T>) {
-		super(get);
+		this.get = get;
 		this.set = set;
 	}