@yiin/reactive-proxy-state 1.0.16 → 1.0.17

package/dist/computed.d.ts

@@ -1,13 +1,16 @@
+import { WatchEffectStopHandle } from './watch-effect';
 import { Ref, isRefSymbol } from './ref';
 declare const isComputedSymbol: unique symbol;
 export interface ComputedRef<T = any> extends Omit<Ref<T>, 'value'> {
     readonly value: T;
     readonly [isComputedSymbol]: true;
     readonly [isRefSymbol]: true;
+    readonly effect: WatchEffectStopHandle<T>;
 }
 export interface WritableComputedRef<T> extends Ref<T> {
     readonly [isComputedSymbol]: true;
     readonly [isRefSymbol]: true;
+    readonly effect: WatchEffectStopHandle<T>;
 }
 type ComputedGetter<T> = () => T;
 type ComputedSetter<T> = (v: T) => void;

package/dist/index.js

@@ -58,6 +58,26 @@ function deepEqual(a, b, seen = globalSeen) {
   let result;
   if (Array.isArray(a)) {
     result = a.length === b.length && a.every((val, idx) => deepEqual(val, b[idx], seen));
+  } else if (a instanceof Map && b instanceof Map) {
+    result = a.size === b.size;
+    if (result) {
+      for (const [key, value] of a) {
+        if (!b.has(key) || !deepEqual(value, b.get(key), seen)) {
+          result = false;
+          break;
+        }
+      }
+    }
+  } else if (a instanceof Set && b instanceof Set) {
+    result = a.size === b.size;
+    if (result) {
+      for (const value of a) {
+        if (!b.has(value)) {
+          result = false;
+          break;
+        }
+      }
+    }
   } else {
     const keysA = Object.keys(a);
     const keysB = Object.keys(b);
@@ -120,7 +140,8 @@ function traverse(value, seen = new Set) {
       traverse(value[i], seen);
     }
   } else if (value instanceof Set || value instanceof Map) {
-    for (const v of value) {
+    const rawValue = value.__v_raw || value;
+    for (const v of rawValue) {
       if (Array.isArray(v)) {
         traverse(v[0], seen);
         traverse(v[1], seen);
@@ -465,12 +486,17 @@ function flushEffects() {
       }
     }
     for (const effect of effectsToRun) {
-      if (effect.active) {
-        if (effect.options?.scheduler) {
-          effect.options.scheduler(effect.run);
-        } else {
-          effect.run();
-        }
+      if (!effect.active)
+        continue;
+      if (effect.options?.scheduler) {
+        effect.options.scheduler(effect.run);
+      }
+    }
+    for (const effect of effectsToRun) {
+      if (!effect.active)
+        continue;
+      if (!effect.options?.scheduler) {
+        effect.run();
       }
     }
   } finally {
@@ -714,6 +740,9 @@ function wrapSet(set, emit, path = []) {
         track(target, "size");
         return target.size;
       }
+      if (prop === "constructor") {
+        return Set;
+      }
       const value = Reflect.get(target, prop, receiver);
       if (typeof value === "function") {
         return value.bind(target);
@@ -952,6 +981,9 @@ function wrapMap(map, emit, path = []) {
         track(target, "size");
         return target.size;
       }
+      if (prop === "constructor") {
+        return Map;
+      }
       const value = Reflect.get(target, prop, receiver);
       if (typeof value === "function") {
         return value.bind(target);
@@ -1320,35 +1352,6 @@ function reactive(obj, emit, path = []) {
   globalSeen.set(obj, proxy);
   return proxy;
 }
-// src/watch.ts
-function watch(sourceInput, callback, options = {}) {
-  const { immediate = false, deep = true } = options;
-  const source = typeof sourceInput === "function" ? sourceInput : () => sourceInput;
-  let oldValue;
-  let initialized = false;
-  const stopEffect = watchEffect(() => {
-    const currentValue = source();
-    if (deep) {
-      traverse(currentValue);
-    }
-    if (initialized) {
-      let hasChanged = false;
-      hasChanged = deep || currentValue !== oldValue;
-      if (hasChanged) {
-        const prevOldValue = oldValue;
-        oldValue = deep ? deepClone(currentValue) : currentValue;
-        callback(currentValue, prevOldValue);
-      }
-    } else {
-      oldValue = deep ? deepClone(currentValue) : currentValue;
-      initialized = true;
-      if (immediate) {
-        callback(currentValue, undefined);
-      }
-    }
-  }, { lazy: false });
-  return stopEffect;
-}
 // src/ref.ts
 var isRefSymbol = Symbol("isRef");
 function ref(value) {
@@ -1402,6 +1405,7 @@ function toRef(object, key) {
 function triggerRef(ref2) {
   trigger(ref2, "value");
 }
+
 // src/computed.ts
 var isComputedSymbol = Symbol("isComputed");
 function computed(getterOrOptions) {
@@ -1444,13 +1448,82 @@ function computed(getterOrOptions) {
       } else {
         console.warn("computed value is read-only");
       }
-    }
+    },
+    effect: stopHandle
   };
   return computedRef;
 }
 function isComputed(c) {
   return !!(c && c[isComputedSymbol]);
 }
+
+// src/watch.ts
+function watch(source, callback, options = {}) {
+  const { immediate = false, deep = true } = options;
+  const isMultiSource = Array.isArray(source);
+  const getter = () => {
+    if (isMultiSource) {
+      return source.map((s) => {
+        if (isRef(s))
+          return s.value;
+        if (isComputed(s))
+          return s.value;
+        if (typeof s === "function")
+          return s();
+        return s;
+      });
+    }
+    if (isRef(source))
+      return source.value;
+    if (isComputed(source))
+      return source.value;
+    if (typeof source === "function")
+      return source();
+    return source;
+  };
+  let oldValue;
+  let initialized = false;
+  const stopEffect = watchEffect(() => {
+    let currentValue = getter();
+    if (deep) {
+      traverse(currentValue);
+    }
+    const job = () => {
+      if (initialized) {
+        let hasChanged = false;
+        if (isMultiSource) {
+          if (!Array.isArray(oldValue) || currentValue.length !== oldValue.length) {
+            hasChanged = true;
+          } else {
+            hasChanged = currentValue.some((val, i) => {
+              return deep ? !deepEqual(val, oldValue[i]) : val !== oldValue[i];
+            });
+          }
+        } else {
+          hasChanged = deep ? !deepEqual(currentValue, oldValue) : currentValue !== oldValue;
+        }
+        if (hasChanged) {
+          const prevOldValue = oldValue;
+          if (isMultiSource) {
+            currentValue = getter();
+          }
+          const valueToClone = currentValue && typeof currentValue === "object" && currentValue.__v_raw ? currentValue.__v_raw : currentValue;
+          oldValue = deep ? deepClone(valueToClone) : currentValue;
+          callback(currentValue, prevOldValue);
+        }
+      } else {
+        const valueToClone = currentValue && typeof currentValue === "object" && currentValue.__v_raw ? currentValue.__v_raw : currentValue;
+        oldValue = deep ? deepClone(valueToClone) : currentValue;
+        initialized = true;
+        if (immediate) {
+          callback(currentValue, undefined);
+        }
+      }
+    };
+    job();
+  });
+  return stopEffect;
+}
 export {
   wrapperCache,
   wrapSet,

package/dist/types.d.ts

@@ -12,3 +12,11 @@ export interface StateEvent {
     oldValues?: any[];
 }
 export type EmitFunction = (event: StateEvent) => void;
+import { Ref } from './ref';
+import { ComputedRef } from './computed';
+export type BaseWatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T);
+export type WatchSource<T = any> = BaseWatchSource<T> | T;
+export type UnwrapWatchSource<T> = T extends BaseWatchSource<infer V> ? V : T extends object ? T : T;
+export type UnwrapWatchSources<T> = {
+    -readonly [K in keyof T]: UnwrapWatchSource<T[K]>;
+};

package/dist/watch.d.ts

@@ -1,14 +1,11 @@
-type WatchCallback<T = any> = (newValue: T, oldValue: T | undefined) => void;
-type WatchSource<T = any> = () => T;
-type WatchSourceInput<T = any> = WatchSource<T> | T;
+import { WatchSource, UnwrapWatchSource, UnwrapWatchSources } from './types';
+type WatchCallback<T, O> = (newValue: T, oldValue: O) => void;
 type WatchStopHandle = () => void;
 export interface WatchOptions {
     immediate?: boolean;
     deep?: boolean;
 }
-/**
- * watches a reactive source (getter function or reactive object/ref)
- * and runs a callback when the source's value changes.
- */
-export declare function watch<T = any>(sourceInput: WatchSourceInput<T>, callback: WatchCallback<T>, options?: WatchOptions): WatchStopHandle;
+export declare function watch<T extends readonly WatchSource<unknown>[], Immediate extends Readonly<boolean> = false>(sources: [...T], callback: WatchCallback<UnwrapWatchSources<T>, Immediate extends true ? (UnwrapWatchSources<T> | undefined) : UnwrapWatchSources<T>>, options?: WatchOptions): WatchStopHandle;
+export declare function watch<T, Immediate extends Readonly<boolean> = false>(source: () => T, callback: WatchCallback<T, Immediate extends true ? T | undefined : T>, options?: WatchOptions): WatchStopHandle;
+export declare function watch<T, Immediate extends Readonly<boolean> = false>(source: WatchSource<T>, callback: WatchCallback<UnwrapWatchSource<T>, Immediate extends true ? (UnwrapWatchSource<T> | undefined) : UnwrapWatchSource<T>>, options?: WatchOptions): WatchStopHandle;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yiin/reactive-proxy-state",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "author": "Yiin <stanislovas@yiin.lt>",
   "repository": {
     "type": "git",