@mmstack/primitives 20.0.0 → 20.0.2

package/fesm2022/mmstack-primitives.mjs

@@ -101,7 +101,7 @@ function debounced(initial, opt) {
  */
 function debounce(source, opt) {
     const ms = opt?.ms ?? 0;
-    const trigger = signal(false);
+    const trigger = signal(false, ...(ngDevMode ? [{ debugName: "trigger" }] : []));
     let timeout;
     try {
         const destroyRef = opt?.destroyRef ?? inject(DestroyRef, { optional: true });
@@ -136,25 +136,112 @@ function debounce(source, opt) {
     return writable;
 }
 
+const { is } = Object;
+function mutable(initial, opt) {
+    const baseEqual = opt?.equal ?? is;
+    let trigger = false;
+    const equal = (a, b) => {
+        if (trigger)
+            return false;
+        return baseEqual(a, b);
+    };
+    const sig = signal(initial, {
+        ...opt,
+        equal,
+    });
+    const internalUpdate = sig.update;
+    sig.mutate = (updater) => {
+        trigger = true;
+        internalUpdate(updater);
+        trigger = false;
+    };
+    sig.inline = (updater) => {
+        sig.mutate((prev) => {
+            updater(prev);
+            return prev;
+        });
+    };
+    return sig;
+}
+/**
+ * Type guard function to check if a given `WritableSignal` is a `MutableSignal`.  This is useful
+ * for situations where you need to conditionally use the `mutate` or `inline` methods.
+ *
+ * @typeParam T - The type of the signal's value (optional, defaults to `any`).
+ * @param value - The `WritableSignal` to check.
+ * @returns `true` if the signal is a `MutableSignal`, `false` otherwise.
+ *
+ * @example
+ * const mySignal = signal(0);
+ * const myMutableSignal = mutable(0);
+ *
+ * if (isMutable(mySignal)) {
+ *   mySignal.mutate(x => x + 1); // This would cause a type error, as mySignal is not a MutableSignal.
+ * }
+ *
+ * if (isMutable(myMutableSignal)) {
+ *   myMutableSignal.mutate(x => x + 1); // This is safe.
+ * }
+ */
+function isMutable(value) {
+    return 'mutate' in value && typeof value.mutate === 'function';
+}
+
 function derived(source, optOrKey, opt) {
     const isArray = Array.isArray(untracked(source)) && typeof optOrKey === 'number';
     const from = typeof optOrKey === 'object' ? optOrKey.from : (v) => v[optOrKey];
     const onChange = typeof optOrKey === 'object'
         ? optOrKey.onChange
         : isArray
-            ? (next) => {
-                source.update((cur) => {
-                    const newArray = [...cur];
-                    newArray[optOrKey] = next;
-                    return newArray;
-                });
-            }
-            : (next) => {
-                source.update((cur) => ({ ...cur, [optOrKey]: next }));
-            };
+            ? isMutable(source)
+                ? (next) => {
+                    source.mutate((cur) => {
+                        cur[optOrKey] = next;
+                        return cur;
+                    });
+                }
+                : (next) => {
+                    source.update((cur) => {
+                        const newArray = [...cur];
+                        newArray[optOrKey] = next;
+                        return newArray;
+                    });
+                }
+            : isMutable(source)
+                ? (next) => {
+                    source.mutate((cur) => {
+                        cur[optOrKey] = next;
+                        return cur;
+                    });
+                }
+                : (next) => {
+                    source.update((cur) => ({ ...cur, [optOrKey]: next }));
+                };
     const rest = typeof optOrKey === 'object' ? optOrKey : opt;
-    const sig = toWritable(computed(() => from(source()), rest), (newVal) => onChange(newVal));
+    let baseEqual = rest?.equal ?? Object.is;
+    let trigger = false;
+    const equal = isMutable(source)
+        ? (a, b) => {
+            if (trigger)
+                return false;
+            return baseEqual(a, b);
+        }
+        : baseEqual;
+    const sig = toWritable(computed(() => from(source()), { ...rest, equal }), (newVal) => onChange(newVal));
     sig.from = from;
+    if (isMutable(source)) {
+        sig.mutate = (updater) => {
+            trigger = true;
+            sig.update(updater);
+            trigger = false;
+        };
+        sig.inline = (updater) => {
+            sig.mutate((prev) => {
+                updater(prev);
+                return prev;
+            });
+        };
+    }
     return sig;
 }
 /**
@@ -262,7 +349,7 @@ function elementVisibility(target = inject(ElementRef), opt) {
         const base = computed(() => undefined, {
             debugName: opt?.debugName,
         });
-        base.visible = computed(() => false);
+        base.visible = computed(() => false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
         return base;
     }
     const state = signal(undefined, {
@@ -299,7 +386,7 @@ function elementVisibility(target = inject(ElementRef), opt) {
         if (!s)
             return false;
         return s.isIntersecting;
-    });
+    }, ...(ngDevMode ? [{ debugName: "visible" }] : []));
     return base;
 }
 
@@ -364,7 +451,7 @@ function elementVisibility(target = inject(ElementRef), opt) {
  */
 function mapArray(source, map, opt) {
     const data = isSignal(source) ? source : computed(source);
-    const len = computed(() => data().length);
+    const len = computed(() => data().length, ...(ngDevMode ? [{ debugName: "len" }] : []));
     return linkedSignal({
         source: () => len(),
         computation: (len, prev) => {
@@ -373,7 +460,13 @@ function mapArray(source, map, opt) {
             if (len === prev.value.length)
                 return prev.value;
             if (len < prev.value.length) {
-                return prev.value.slice(0, len);
+                const slice = prev.value.slice(0, len);
+                if (opt?.onDestroy) {
+                    for (let i = len; i < prev.value.length; i++) {
+                        opt.onDestroy?.(prev.value[i]);
+                    }
+                }
+                return slice;
             }
             else {
                 const next = [...prev.value];
@@ -387,57 +480,6 @@ function mapArray(source, map, opt) {
     });
 }
 
-const { is } = Object;
-function mutable(initial, opt) {
-    const baseEqual = opt?.equal ?? is;
-    let trigger = false;
-    const equal = (a, b) => {
-        if (trigger)
-            return false;
-        return baseEqual(a, b);
-    };
-    const sig = signal(initial, {
-        ...opt,
-        equal,
-    });
-    const internalUpdate = sig.update;
-    sig.mutate = (updater) => {
-        trigger = true;
-        internalUpdate(updater);
-        trigger = false;
-    };
-    sig.inline = (updater) => {
-        sig.mutate((prev) => {
-            updater(prev);
-            return prev;
-        });
-    };
-    return sig;
-}
-/**
- * Type guard function to check if a given `WritableSignal` is a `MutableSignal`.  This is useful
- * for situations where you need to conditionally use the `mutate` or `inline` methods.
- *
- * @typeParam T - The type of the signal's value (optional, defaults to `any`).
- * @param value - The `WritableSignal` to check.
- * @returns `true` if the signal is a `MutableSignal`, `false` otherwise.
- *
- * @example
- * const mySignal = signal(0);
- * const myMutableSignal = mutable(0);
- *
- * if (isMutable(mySignal)) {
- *   mySignal.mutate(x => x + 1); // This would cause a type error, as mySignal is not a MutableSignal.
- * }
- *
- * if (isMutable(myMutableSignal)) {
- *   myMutableSignal.mutate(x => x + 1); // This is safe.
- * }
- */
-function isMutable(value) {
-    return 'mutate' in value && typeof value.mutate === 'function';
-}
-
 /**
  * Creates a read-only signal that reactively tracks whether a CSS media query
  * string currently matches.
@@ -486,7 +528,7 @@ function mediaQuery(query, debugName) {
     if (isPlatformServer(inject(PLATFORM_ID)))
         return computed(() => false, { debugName });
     const mediaQueryList = window.matchMedia(query);
-    const state = signal(mediaQueryList.matches, { debugName });
+    const state = signal(mediaQueryList.matches, ...(ngDevMode ? [{ debugName: "state", debugName }] : [{ debugName }]));
     const handleChange = (event) => {
         state.set(event.matches);
     };
@@ -596,7 +638,7 @@ function throttled(initial, opt) {
  */
 function throttle(source, opt) {
     const ms = opt?.ms ?? 0;
-    const trigger = signal(false);
+    const trigger = signal(false, ...(ngDevMode ? [{ debugName: "trigger" }] : []));
     let timeout;
     try {
         const destroyRef = opt?.destroyRef ?? inject(DestroyRef, { optional: true });
@@ -741,13 +783,13 @@ function networkStatus(debugName) {
         const sig = computed(() => true, {
             debugName,
         });
-        sig.since = computed(() => serverDate);
+        sig.since = computed(() => serverDate, ...(ngDevMode ? [{ debugName: "since" }] : []));
         return sig;
     }
-    const state = signal(navigator.onLine, {
-        debugName,
-    });
-    const since = signal(new Date());
+    const state = signal(navigator.onLine, ...(ngDevMode ? [{ debugName: "state", debugName }] : [{
+            debugName,
+        }]));
+    const since = signal(new Date(), ...(ngDevMode ? [{ debugName: "since" }] : []));
     const goOnline = () => {
         state.set(true);
         since.set(new Date());
@@ -807,7 +849,7 @@ function pageVisibility(debugName) {
     if (isPlatformServer(inject(PLATFORM_ID))) {
         return computed(() => 'visible', { debugName });
     }
-    const visibility = signal(document.visibilityState, { debugName });
+    const visibility = signal(document.visibilityState, ...(ngDevMode ? [{ debugName: "visibility", debugName }] : [{ debugName }]));
     const onVisibilityChange = () => visibility.set(document.visibilityState);
     document.addEventListener('visibilitychange', onVisibilityChange);
     inject(DestroyRef).onDestroy(() => document.removeEventListener('visibilitychange', onVisibilityChange));
@@ -1103,16 +1145,23 @@ function stored(fallback, { key, store: providedStore, serialize = JSON.stringif
         equal,
     };
     const initialKey = untracked(keySig);
-    const internal = signal(getValue(initialKey), {
-        ...opt,
-        equal: (a, b) => {
-            if (a === null && b === null)
-                return true;
-            if (a === null || b === null)
-                return false;
-            return equal(a, b);
-        },
-    });
+    const internal = signal(getValue(initialKey), ...(ngDevMode ? [{ debugName: "internal", ...opt,
+            equal: (a, b) => {
+                if (a === null && b === null)
+                    return true;
+                if (a === null || b === null)
+                    return false;
+                return equal(a, b);
+            } }] : [{
+            ...opt,
+            equal: (a, b) => {
+                if (a === null && b === null)
+                    return true;
+                if (a === null || b === null)
+                    return false;
+                return equal(a, b);
+            },
+        }]));
     let prevKey = initialKey;
     if (onKeyChange === 'store') {
         effect(() => {
@@ -1381,9 +1430,9 @@ function withHistory(source, opt) {
         history.set([]);
         redoArray.set([]);
     };
-    internal.canUndo = computed(() => history().length > 0);
-    internal.canRedo = computed(() => redoArray().length > 0);
-    internal.canClear = computed(() => internal.canUndo() || internal.canRedo());
+    internal.canUndo = computed(() => history().length > 0, ...(ngDevMode ? [{ debugName: "canUndo" }] : []));
+    internal.canRedo = computed(() => redoArray().length > 0, ...(ngDevMode ? [{ debugName: "canRedo" }] : []));
+    internal.canClear = computed(() => internal.canUndo() || internal.canRedo(), ...(ngDevMode ? [{ debugName: "canClear" }] : []));
     return internal;
 }