upgrade: storage package upgrade for Solid 2.0

.changeset/eleven-buttons-jump.md

@@ -0,0 +1,5 @@
+---
+"@solid-primitives/storage": major
+---
+
+**`makePersisted`** - simplify setter, Solid 2.0 adaption, simpler types using function overloads

packages/storage/package.json

@@ -64,7 +64,6 @@
     }
   },
   "scripts": {
-    "dev": "node --import=@nothing-but/node-resolve-ts --experimental-transform-types ../../scripts/dev.ts",
     "build": "node --import=@nothing-but/node-resolve-ts --experimental-transform-types ../../scripts/build.ts",
     "vitest": "vitest -c ../../configs/vitest.config.ts",
     "test": "pnpm run vitest",
@@ -82,17 +81,16 @@
   },
   "peerDependencies": {
     "@tauri-apps/plugin-store": "*",
-    "solid-js": "^1.6.12"
+    "@solidjs/web": "^2.0.0-beta.14",
+    "solid-js": "^2.0.0-beta.14"
   },
   "peerDependenciesMeta": {
-    "solid-start": {
-      "optional": true
-    },
     "@tauri-apps/plugin-store": {
       "optional": true
     }
   },
   "devDependencies": {
-    "solid-js": "^1.9.7"
+    "solid-js": "2.0.0-beta.14",
+    "@solidjs/web": "2.0.0-beta.14"
   }
 }

packages/storage/src/cookies.ts

@@ -1,4 +1,4 @@
-import { getRequestEvent, isServer, type RequestEvent } from "solid-js/web";
+import { getRequestEvent, isServer, type RequestEvent } from "@solidjs/web";
 import { type SyncStorageWithOptions } from "./index.js";
 import { addWithOptionsMethod, addClearMethod } from "./tools.js";
 

packages/storage/src/persisted.ts

@@ -1,8 +1,6 @@
-import type { Accessor, Setter, Signal } from "solid-js";
-import { createUniqueId, untrack } from "solid-js";
-import { isServer, isDev } from "solid-js/web";
-import type { SetStoreFunction, Store } from "solid-js/store";
-import { reconcile } from "solid-js/store";
+import type { Signal, StoreSetter, Store } from "solid-js";
+import { action, createUniqueId, latest, untrack, reconcile, snapshot, DEV } from "solid-js";
+import { isServer } from "@solid-primitives/utils";
 
 export type SyncStorage = {
   getItem: (key: string) => string | null;
@@ -58,137 +56,155 @@ export type PersistenceSyncAPI = [
   update: (key: string, value: string | null | undefined) => void,
 ];
 
-export type PersistenceOptions<T, O extends Record<string, any> | undefined> = {
+export type PersistenceOptions<
+  S extends Signal<any> | [Store<any>, StoreSetter<any>] | readonly [Store<any>, StoreSetter<any>],
+  O extends Record<string, any> | undefined,
+  T = S extends Signal<infer T> ? T : S extends [Store<infer T>, StoreSetter<infer T>] ? T : never
+> = {
   name?: string;
   serialize?: (data: T) => string;
   deserialize?: (data: string) => T;
   sync?: PersistenceSyncAPI;
+  action?: (signal: S) => Parameters<typeof action>[0];
 } & (undefined extends O
   ? { storage?: SyncStorage | AsyncStorage }
   : {
       storage: SyncStorageWithOptions<O> | AsyncStorageWithOptions<O>;
       storageOptions?: O;
     });
 
-export type SignalInput = Signal<any> | [Store<any>, SetStoreFunction<any>];
-
-export type SignalType<S extends SignalInput> =
-  S extends Signal<infer T> ? T : S extends [Store<infer T>, SetStoreFunction<infer T>] ? T : never;
+export type PersistedState<S, I = Promise<string> | string | null> = S extends [any, any] ? [...S, I] : never;
 
-export type PersistedState<S extends SignalInput> =
-  S extends Signal<infer T>
-    ? [get: Accessor<T>, set: Setter<T>, init: Promise<string> | string | null]
-    : S extends [Store<infer T>, SetStoreFunction<infer T>]
-      ? [get: Store<T>, set: SetStoreFunction<T>, init: Promise<string> | string | null]
-      : never;
+export type StoreTuple<T> = [Store<T>, StoreSetter<T>]; 
 
 /**
  * Persists a signal, store or similar API
- *  ```ts
- *  const [getter, setter] = makePersisted(createSignal("data"), options);
- *  const options = {
- *    storage: cookieStorage,  // can be any synchronous or asynchronous storage
- *    storageOptions: { ... }, // for storages with options, otherwise not needed
- *    name: "solid-data",      // optional
- *    serialize: (value: string) => value, // optional
- *    deserialize: (data: string) => data, // optional
- *  };
- *  ```
- *  Can be used with `createSignal` or `createStore`. The initial value from the storage will overwrite the initial
- *  value of the signal or store unless overwritten. Overwriting a signal with `null` or `undefined` will remove the
- *  item from the storage.
+ * ```ts
+ * const [getter, setter] = makePersisted(createSignal("data"), options);
+ * const options = {
+ *   storage: cookieStorage,  // can be any synchronous or asynchronous storage
+ *   storageOptions: { ... }, // for storages with options, otherwise not needed
+ *   name: "solid-data",      // optional
+ *   serialize: (value: string) => value, // optional
+ *   deserialize: (data: string) => data, // optional
+ *   action: (setter: Setter<T>) => Setter<T> // optional, to be put inside action
+ * };
+ * ```
+ * Can be used with `createSignal`, `createStore`, `createOptimistic`, or `createOptimisticStore` (for the latter
+ * two, use options.action to wrap the setter). The initial value from the storage will overwrite the initial
+ * value of the signal or store unless overwritten. Overwriting a signal with `null` or `undefined` will remove the
+ * item from the storage.
  *
- * @param {Signal<T> | [get: Store<T>, set: SetStoreFunction<T>]} signal - The signal or store to be persisted.
- * @param {PersistenceOptions<T, O>} options - The options for persistence.
+ * @param {Signal<T> | [get: Store<T>, set: StoreSetter<T>]} signal - The signal or store to be persisted.
+ * @param {PersistenceOptions<Signal<T> | [get: Store<T>, set StoreSetter<T>], O>} options - The options for persistence.
  * @returns {PersistedState<T>} - The persisted signal or store.
  */
-export function makePersisted<S extends SignalInput>(
-  signal: S,
-  options?: PersistenceOptions<SignalType<S>, undefined>,
-): PersistedState<S>;
-export function makePersisted<S extends SignalInput, O extends Record<string, any>>(
-  signal: S,
-  options: PersistenceOptions<SignalType<S>, O>,
-): PersistedState<S>;
+export function makePersisted<T>(
+  signal: Signal<T>,
+  options?: PersistenceOptions<Signal<T>, undefined>,
+): PersistedState<Signal<T>>;
+export function makePersisted<T>(
+  signal: StoreTuple<T>,
+  options?: PersistenceOptions<StoreTuple<T>, undefined>,
+): PersistedState<StoreTuple<T>>;
+export function makePersisted<
+  T,
+  O extends Record<string, any>
+>(signal: Signal<T>, options: PersistenceOptions<Signal<T>, O>): PersistedState<Signal<T>>;
+export function makePersisted<
+  T,
+  O extends Record<string, any>
+>(signal: Signal<T>, options: PersistenceOptions<Signal<T>, O> & { storage: AsyncStorage | AsyncStorageWithOptions<O> }): PersistedState<Signal<T>, Promise<string> | null>;
+export function makePersisted<
+  T,
+  O extends Record<string, any>
+>(signal: StoreTuple<T>, options: PersistenceOptions<StoreTuple<T>, O>): PersistedState<StoreTuple<T>>;
 export function makePersisted<
-  S extends SignalInput,
+  T,
+  O extends Record<string, any>
+>(signal: StoreTuple<T>, options: PersistenceOptions<StoreTuple<T>, O> & { storage: AsyncStorage | AsyncStorageWithOptions<O> }): PersistedState<StoreTuple<T>, Promise<string> | null>;
+export function makePersisted<
+  T,
   O extends Record<string, any> | undefined,
-  T = SignalType<S>,
+  S extends Signal<T> | StoreTuple<T>,
 >(
   signal: S,
-  options: PersistenceOptions<T, O> = {} as PersistenceOptions<T, O>,
+  options: PersistenceOptions<S, O> = {} as PersistenceOptions<S, O>,
 ): PersistedState<S> {
   const storage = options.storage || (globalThis.localStorage as Storage | undefined);
   const name = options.name || `storage-${createUniqueId()}`;
+  const actionFn = options.action && options.action(signal);
+  if (actionFn) {
+    (signal as any)[1] = action(actionFn) as unknown as S[1];
+  }
   if (!storage) {
-    return [signal[0], signal[1], null] as PersistedState<S>;
+    return [signal[0], signal[1], null] as unknown as PersistedState<S>;
   }
   const storageOptions = (options as unknown as { storageOptions: O }).storageOptions;
   const serialize: (data: T) => string = options.serialize || JSON.stringify.bind(JSON);
   const deserialize: (data: string) => T = options.deserialize || JSON.parse.bind(JSON);
   const init = storage.getItem(name, storageOptions);
-  const set =
-    typeof signal[0] === "function"
-      ? (data: string) => {
-          try {
-            const value = deserialize(data);
-            (signal[1] as any)(() => value);
-          } catch (e) {
-            // eslint-disable-next-line no-console
-            if (isDev) console.warn(e);
-          }
+  const isSignal = typeof signal[0] === "function";
+  const set = isSignal
+    ? (data: string) => {
+        try {
+          const value = deserialize(data);
+          (signal[1] as any)(() => value);
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          if (DEV) console.warn(e);
+        }
+      }
+    : (data: string) => {
+        try {
+          const value = deserialize(data);
+          (signal[1] as any)(reconcile(value, () => true));
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          if (DEV) console.warn(e);
         }
-      : (data: string) => {
-          try {
-            const value = deserialize(data);
-            (signal[1] as any)(reconcile(value));
-          } catch (e) {
-            // eslint-disable-next-line no-console
-            if (isDev) console.warn(e);
-          }
-        };
+      };
   let unchanged = true;
 
   if (init instanceof Promise) init.then(data => unchanged && data && set(data));
   else if (init) set(init);
 
+  const getter: () => T = isSignal ? (signal[0] as () => T) : () => snapshot(signal[0] as T);
+
   if (typeof options.sync?.[0] === "function") {
-    const get: () => T =
-      typeof signal[0] === "function" ? (signal[0] as () => T) : () => signal[0] as T;
     options.sync[0]((data: PersistenceSyncData) => {
       if (
         data.key !== name ||
         (!isServer && (data.url || globalThis.location.href) !== globalThis.location.href) ||
-        data.newValue === serialize(untrack(get))
+        data.newValue === serialize(untrack(getter))
       ) {
         return;
       }
       set(data.newValue as string);
     });
   }
 
+  const persist = () => {
+    const next = untrack(() => latest(getter));
+    if (next == null) {
+      storage.removeItem(name, storageOptions);
+      options.sync?.[1](name, null);
+    } else {
+      const serialized = serialize(next);
+      storage.setItem(name, serialized, storageOptions);
+      options.sync?.[1](name, serialized);
+    }
+  };
   return [
-    signal[0],
-    typeof signal[0] === "function"
-      ? (value?: T | ((prev: T) => T)) => {
-          const output = (signal[1] as Setter<T>)(value as any);
-          const serialized: string | null | undefined =
-            value != null ? serialize(output) : (value as null | undefined);
-          options.sync?.[1](name, serialized);
-          if (serialized != null) storage.setItem(name, serialized, storageOptions);
-          else storage.removeItem(name, storageOptions);
-          unchanged = false;
-          return output;
-        }
-      : (...args: any[]) => {
-          (signal[1] as any)(...args);
-          const value = serialize(untrack(() => signal[0]));
-          options.sync?.[1](name, value);
-          storage.setItem(name, value, storageOptions);
-          unchanged = false;
-        },
+    signal[0], 
+    (value: any) => untrack(() => {
+      const output = signal[1](value);
+      persist();
+      unchanged = false;
+      return output instanceof Promise ? output.then((result) => (persist(), result), (err) => { persist(); throw err; }) : output;
+    }),
     init,
-  ] as PersistedState<S>;
+  ] as unknown as PersistedState<S>;
 }
 
 /**
@@ -214,15 +230,15 @@ export const messageSync = (channel: Window | BroadcastChannel = window): Persis
     }),
   (key, newValue) =>
     channel.postMessage(
-      { key, newValue, timeStamp: +new Date(), url: location.href },
+      { key, newValue, timeStamp: Date.now(), url: location.href },
       location.origin,
     ),
 ];
 
 /**
  * wsSync - syncronize persisted storage via web socket
  */
-export const wsSync = (ws: WebSocket, warnOnError: boolean = isDev): PersistenceSyncAPI => [
+export const wsSync = (ws: WebSocket, warnOnError: boolean = !!DEV): PersistenceSyncAPI => [
   (subscriber: PersistenceSyncCallback) =>
     ws.addEventListener("message", (ev: MessageEvent) => {
       try {
@@ -241,7 +257,7 @@ export const wsSync = (ws: WebSocket, warnOnError: boolean = isDev): Persistence
         key,
         newValue,
         timeStamp: +new Date(),
-        ...(isServer ? {} : { url: location.href }),
+        ...(globalThis.window ? { url: location.href } : {}),
       }),
     ),
 ];