utils: add clamp & createStaticStore

Author: thetarnav

packages/utils/src/index.ts

@@ -1,5 +1,5 @@
-import { getOwner, onCleanup, createSignal, Accessor, DEV, untrack } from "solid-js";
-import type { BaseOptions } from "solid-js/types/reactive/signal";
+import { getOwner, onCleanup, createSignal, Accessor, DEV, untrack, batch } from "solid-js";
+import type { BaseOptions, Signal } from "solid-js/types/reactive/signal";
 import { isServer } from "solid-js/web";
 import type {
   AnyClass,
@@ -10,7 +10,9 @@ import type {
   Trigger,
   TriggerCache,
   AnyObject,
-  AnyFunction
+  AnyFunction,
+  SetterValue,
+  AnyStatic
 } from "./types";
 
 export * from "./types";
@@ -45,6 +47,8 @@ export function isObject(value: any): value is AnyObject {
 
 export const compare = (a: any, b: any): number => (a < b ? -1 : a > b ? 1 : 0);
 
+export const clamp = (n:number, min: number, max: number) => Math.min(Math.max(n, min), max)
+
 /**
  * Accesses the value of a MaybeAccessor
  * @example
@@ -303,3 +307,63 @@ export function createTriggerCache<T>(options?: BaseOptions): TriggerCache<T> {
     }
   };
 }
+
+export type StaticStoreSetter<T extends Readonly<AnyStatic>> = {
+  (setter: (prev: T) => Partial<T>): T;
+  (state: Partial<T>): T;
+  <K extends keyof T>(key: K, state: SetterValue<T[K]>): T;
+};
+
+/**
+ * A shallowly wrapped reactive store object. It behaves similarly to the creatStore, but with limited features to keep it simple. Designed to be used for reactive objects with static keys, but dynamic values, like reactive Event State, location, etc.
+ * @param init initial value of the store
+ * @returns
+ * ```ts
+ * [access: Readonly<T>, write: StaticStoreSetter<T>]
+ * ```
+ */
+export function createStaticStore<T extends Readonly<AnyStatic>>(
+  init: T
+): [access: T, write: StaticStoreSetter<T>] {
+  const copy = { ...init };
+  const store = {} as T;
+  const cache = new Map<PropertyKey, Signal<any>>();
+
+  const getValue = <K extends keyof T>(key: K): T[K] => {
+    const saved = cache.get(key);
+    if (saved) return saved[0]();
+    const signal = createSignal<any>(copy[key], {
+      name: typeof key === "string" ? key : undefined
+    });
+    cache.set(key, signal);
+    delete copy[key];
+    return signal[0]();
+  };
+
+  const setValue = <K extends keyof T>(key: K, value: SetterValue<any>): void => {
+    const saved = cache.get(key);
+    if (saved) return saved[1](value);
+    if (key in copy) copy[key] = accessWith(value, [copy[key]]);
+  };
+
+  for (const key of keys(init)) {
+    store[key] = undefined as any;
+    Object.defineProperty(store, key, {
+      get: getValue.bind(void 0, key)
+    });
+  }
+
+  const setter = (a: ((prev: T) => Partial<T>) | Partial<T> | keyof T, b?: SetterValue<any>) => {
+    if (isObject(a))
+      untrack(() => {
+        batch(() => {
+          for (const [key, value] of entries(accessWith(a, store) as Partial<T>))
+            setValue(key as keyof T, () => value);
+        });
+      });
+    else setValue(a, b);
+    return store;
+  };
+
+  return [store, setter];
+}

packages/utils/test/index.test.ts

@@ -1,4 +1,65 @@
-import { createComputed, createEffect, createRoot } from "solid-js";
-import { createStore } from "solid-js/store";
-import { destore } from "../src";
-import { test } from "uvu";
+import { createComputed, createRoot } from "solid-js";
+import { createStaticStore } from "../src";
+import { suite } from "uvu";
+import * as assert from "uvu/assert";
+
+const tss = suite("createStaticStore");
+
+tss("individual keys only update when changed", () =>
+  createRoot(dispose => {
+    const _shape = {
+      a: 1,
+      b: 2,
+      c: 3,
+      d: [0, 1, 2]
+    };
+    const [state, setState] = createStaticStore(_shape);
+
+    assert.equal(state, _shape);
+    assert.equal(_shape, { a: 1, b: 2, c: 3, d: [0, 1, 2] }, "original input shouldn't be mutated");
+
+    setState({
+      a: 9,
+      d: [3, 2, 1]
+    });
+
+    assert.equal(state, { a: 9, b: 2, c: 3, d: [3, 2, 1] });
+    assert.equal(_shape, { a: 1, b: 2, c: 3, d: [0, 1, 2] }, "original input shouldn't be mutated");
+
+    let aUpdates = -1;
+    createComputed(() => {
+      state.a;
+      aUpdates++;
+    });
+    assert.is(aUpdates, 0);
+
+    setState({
+      b: 3
+    });
+    assert.is(aUpdates, 0);
+    setState("a", 4);
+    assert.is(aUpdates, 1);
+
+    dispose();
+  })
+);
+
+// tss("able to listen to key, not yet added", () =>
+//   createRoot(dispose => {
+//     const _shape = {};
+//     const [state, setState] = createShallowStore<{ a?: number }>(_shape);
+
+//     let captured: any[] = [];
+//     createComputed(() => captured.push(state.a));
+
+//     assert.equal(captured, [undefined]);
+
+//     setState("a", 1);
+
+//     assert.equal(captured, [undefined, 1]);
+
+//     dispose();
+//   })
+// );
+
+tss.run();

packages/utils/tsconfig.json

@@ -1,5 +1,12 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["./src"],
-  "exclude": ["node_modules", "./dist"]
-}
+  "include": [
+    "./src",
+    "./test",
+    "./dev"
+  ],
+  "exclude": [
+    "node_modules",
+    "./dist"
+  ]
+}