Merge pull request #495 from cynecx/readonly-state

improve typings for state setter by utilizing readonly
solidjs · Jun 19, 2021 · 99b3182 · 99b3182
2 parents 3f0ffff + 140c88a
commit 99b3182
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 8 deletions.
diff --git a/packages/solid/src/reactive/state.ts b/packages/solid/src/reactive/state.ts
@@ -228,12 +228,33 @@ export function updatePath(current: StateNode, path: any[], traversed: (number |
   } else setProperty(current, part, value);
 }
 
+export declare type Readonly<T> = { readonly [K in keyof T]: DeepReadonly<T[K]> };
+export declare type DeepReadonly<T> = T extends [infer A]
+  ? Readonly<[A]>
+  : T extends [infer A, infer B]
+  ? Readonly<[A, B]>
+  : T extends [infer A, infer B, infer C]
+  ? Readonly<[A, B, C]>
+  : T extends [infer A, infer B, infer C, infer D]
+  ? Readonly<[A, B, C, D]>
+  : T extends [infer A, infer B, infer C, infer D, infer E]
+  ? Readonly<[A, B, C, D, E]>
+  : T extends [infer A, infer B, infer C, infer D, infer E, infer F]
+  ? Readonly<[A, B, C, D, E, F]>
+  : T extends [infer A, infer B, infer C, infer D, infer E, infer F, infer G]
+  ? Readonly<[A, B, C, D, E, F, G]>
+  : T extends [infer A, infer B, infer C, infer D, infer E, infer F, infer G, infer H]
+  ? Readonly<[A, B, C, D, E, F, G, H]>
+  : T extends object
+  ? Readonly<T>
+  : T;
+
 export type StateSetter<T> =
   | Partial<T>
   | ((
-      prevState: T extends NotWrappable ? T : State<T>,
+      prevState: T extends NotWrappable ? T : State<DeepReadonly<T>>,
       traversed?: (string | number)[]
-    ) => Partial<T> | void);
+    ) => Partial<T | DeepReadonly<T>> | void);
 export type StatePathRange = { from?: number; to?: number; by?: number };
 
 export type ArrayFilterFn<T> = (

diff --git a/packages/solid/src/reactive/stateModifiers.ts b/packages/solid/src/reactive/stateModifiers.ts
@@ -1,4 +1,13 @@
-import { setProperty, unwrap, isWrappable, State, NotWrappable, StateNode, $RAW } from "./state";
+import {
+  setProperty,
+  unwrap,
+  isWrappable,
+  State,
+  NotWrappable,
+  StateNode,
+  DeepReadonly,
+  $RAW,
+} from "./state";
 
 export type ReconcileOptions = {
   key?: string | null;
@@ -106,10 +115,13 @@ function applyState(
 export function reconcile<T>(
   value: T | State<T>,
   options: ReconcileOptions = {}
-): (state: T extends NotWrappable ? T : State<T>) => T extends NotWrappable ? T : State<T> {
+): (
+  state: T extends NotWrappable ? T : State<DeepReadonly<T>>
+) => T extends NotWrappable ? T : State<T> {
   const { merge, key = "id" } = options,
     v = unwrap(value);
-  return state => {
+  return s => {
+    const state = s as T extends NotWrappable ? T : State<T>;
     if (!isWrappable(state) || !isWrappable(v)) return v as T extends NotWrappable ? T : State<T>;
     applyState(v, { state }, "state", merge, key);
     return state;
@@ -137,9 +149,12 @@ const setterTraps: ProxyHandler<StateNode> = {
 // Immer style mutation style
 export function produce<T>(
   fn: (state: T) => void
-): (state: T extends NotWrappable ? T : State<T>) => T extends NotWrappable ? T : State<T> {
-  return state => {
-    if (isWrappable(state)) fn((new Proxy(state as object, setterTraps) as unknown) as T);
+): (
+  state: T extends NotWrappable ? T : State<DeepReadonly<T>>
+) => T extends NotWrappable ? T : State<T> {
+  return s => {
+    const state = s as T extends NotWrappable ? T : State<T>;
+    if (isWrappable(state)) fn(new Proxy(state as object, setterTraps) as unknown as T);
     return state;
   };
 }