@epoch32/visage 0.0.0 → 1.1.0

package/src/signals/signal.ts

@@ -22,11 +22,13 @@ export class Signal<T> implements IDependency {
   private _value: T;
   private _subscribers: Set<ISubscriber> = new Set();
   private _equals: (a: T, b: T) => boolean;
+  private _onSet?: (val: T) => void;
   version = 0;
 
-  constructor(initialValue: T, equals?: (a: T, b: T) => boolean) {
+  constructor(initialValue: T, equals?: (a: T, b: T) => boolean, onSet?: (val: T) => void) {
     this._value = initialValue;
     this._equals = equals ?? Object.is;
+    this._onSet = onSet;
   }
 
   get(): T {
@@ -58,6 +60,9 @@ export class Signal<T> implements IDependency {
 
     this._value = newValue;
     this.version++;
+    if (this._onSet) {
+      this._onSet(newValue);
+    }
     batch(() => {
       this.notify();
     });
@@ -117,6 +122,43 @@ export class Signal<T> implements IDependency {
  * @param optionsOrEquals - Custom equality comparison function or SignalOptions
  * @returns A writable reactive signal function accessor
  */
+function resolveStorage(storageOption?: "local" | "session" | Storage): Storage | null {
+  if (storageOption && typeof storageOption === "object") {
+    return storageOption;
+  }
+  if (storageOption === "session") {
+    try {
+      if (typeof sessionStorage !== "undefined") return sessionStorage;
+    } catch {}
+    try {
+      if (typeof window !== "undefined" && (window as any).sessionStorage) {
+        return (window as any).sessionStorage;
+      }
+    } catch {}
+    try {
+      if (typeof globalThis !== "undefined" && (globalThis as any).sessionStorage) {
+        return (globalThis as any).sessionStorage;
+      }
+    } catch {}
+    return null;
+  }
+
+  try {
+    if (typeof localStorage !== "undefined") return localStorage;
+  } catch {}
+  try {
+    if (typeof window !== "undefined" && (window as any).localStorage) {
+      return (window as any).localStorage;
+    }
+  } catch {}
+  try {
+    if (typeof globalThis !== "undefined" && (globalThis as any).localStorage) {
+      return (globalThis as any).localStorage;
+    }
+  } catch {}
+  return null;
+}
+
 export function signal<T>(
   initialValue: T,
   optionsOrEquals?: ((a: T, b: T) => boolean) | SignalOptions<T>
@@ -125,7 +167,73 @@ export function signal<T>(
   const isInternal = typeof optionsOrEquals === "object" ? optionsOrEquals?.internal : false;
   const customName = typeof optionsOrEquals === "object" ? optionsOrEquals?.name : undefined;
 
-  const s = new Signal(initialValue, equals);
+  const persistOption = typeof optionsOrEquals === "object" ? optionsOrEquals?.persist : undefined;
+  const persistConfig = persistOption
+    ? typeof persistOption === "string"
+      ? { key: persistOption }
+      : persistOption
+    : undefined;
+
+  let effectiveInitial = initialValue;
+  const storage = persistConfig ? resolveStorage(persistConfig.storage) : null;
+  const serialize = persistConfig?.serialize ?? JSON.stringify;
+  const deserialize = persistConfig?.deserialize ?? JSON.parse;
+
+  if (persistConfig && storage) {
+    try {
+      const stored = storage.getItem(persistConfig.key);
+      if (stored !== null) {
+        effectiveInitial = deserialize(stored);
+      }
+    } catch {
+      // Fallback cleanly to initialValue
+    }
+  }
+
+  let isSyncing = false;
+  const onSet =
+    persistConfig && storage
+      ? (val: T) => {
+          if (isSyncing) return;
+          try {
+            storage.setItem(persistConfig.key, serialize(val));
+          } catch {
+            // Gracefully handle storage quota or access errors
+          }
+        }
+      : undefined;
+
+  const s = new Signal(effectiveInitial, equals, onSet);
+
+  if (
+    persistConfig &&
+    storage &&
+    (persistConfig.syncTabs ?? true) &&
+    typeof window !== "undefined" &&
+    typeof window.addEventListener === "function"
+  ) {
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === persistConfig.key) {
+        try {
+          const nextVal = e.newValue !== null ? deserialize(e.newValue) : initialValue;
+          isSyncing = true;
+          try {
+            s.set(nextVal);
+          } finally {
+            isSyncing = false;
+          }
+        } catch {
+          // Ignore external malformed entries
+        }
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    if (currentScope) {
+      currentScope.addCleanup(() => {
+        window.removeEventListener("storage", onStorage);
+      });
+    }
+  }
 
   const accessor = ((...args: [value?: T]): T => {
     if (args.length === 0) {

package/src/signals/types.ts

@@ -29,10 +29,19 @@ export interface WritableSignal<T> extends ReadonlySignal<T> {
   value: T;
 }
 
+export interface PersistOptions<T> {
+  key: string;
+  storage?: "local" | "session" | Storage;
+  serialize?: (value: T) => string;
+  deserialize?: (raw: string) => T;
+  syncTabs?: boolean;
+}
+
 export interface SignalOptions<T> {
   name?: string;
   equals?: (a: T, b: T) => boolean;
   internal?: boolean;
+  persist?: string | PersistOptions<T>;
 }
 
 export interface ComputedOptions {

package/src/vite/plugin.ts

@@ -57,6 +57,10 @@ export function visage(options: VisagePluginOptions = {}): VisageVitePlugin[] {
           ]
         },
         resolve: {
+          alias: [
+            { find: /^visage\/(.*)/, replacement: "@epoch32/visage/$1" },
+            { find: /^visage$/, replacement: "@epoch32/visage" }
+          ],
           dedupe: ["@epoch32/visage", "visage"]
         }
       };