@mmstack/primitives 20.0.1 → 20.0.3

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 });
@@ -349,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, {
@@ -386,7 +386,7 @@ function elementVisibility(target = inject(ElementRef), opt) {
         if (!s)
             return false;
         return s.isIntersecting;
-    });
+    }, ...(ngDevMode ? [{ debugName: "visible" }] : []));
     return base;
 }
 
@@ -451,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) => {
@@ -460,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];
@@ -518,11 +524,11 @@ function mapArray(source, map, opt) {
  * }
  * ```
  */
-function mediaQuery(query, debugName) {
+function mediaQuery(query, debugName = 'mediaQuery') {
     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, { debugName: debugName });
     const handleChange = (event) => {
         state.set(event.matches);
     };
@@ -632,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 });
@@ -706,12 +712,12 @@ function mousePosition(opt) {
             x: 0,
             y: 0,
         }), {
-            debugName: opt?.debugName,
+            debugName: opt?.debugName ?? 'mousePosition',
         });
         base.unthrottled = base;
         return base;
     }
-    const { target = window, coordinateSpace = 'client', touch = false, debugName, throttle = 100, } = opt ?? {};
+    const { target = window, coordinateSpace = 'client', touch = false, debugName = 'mousePosition', throttle = 100, } = opt ?? {};
     const eventTarget = target instanceof ElementRef ? target.nativeElement : target;
     if (!eventTarget) {
         if (isDevMode())
@@ -772,18 +778,18 @@ const serverDate = new Date();
  * @param debugName Optional debug name for the signal.
  * @returns A `NetworkStatusSignal` instance.
  */
-function networkStatus(debugName) {
+function networkStatus(debugName = 'networkStatus') {
     if (isPlatformServer(inject(PLATFORM_ID))) {
         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());
@@ -839,11 +845,11 @@ function networkStatus(debugName) {
  * }
  * ```
  */
-function pageVisibility(debugName) {
+function pageVisibility(debugName = 'pageVisibility') {
     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));
@@ -901,12 +907,12 @@ function scrollPosition(opt) {
             x: 0,
             y: 0,
         }), {
-            debugName: opt?.debugName,
+            debugName: opt?.debugName ?? 'scrollPosition',
         });
         base.unthrottled = base;
         return base;
     }
-    const { target = window, throttle = 100, debugName } = opt || {};
+    const { target = window, throttle = 100, debugName = 'scrollPosition', } = opt || {};
     let element;
     let getScrollPosition;
     if (target instanceof Window) {
@@ -992,12 +998,12 @@ function windowSize(opt) {
         const base = computed(() => ({
             width: 1024,
             height: 768,
-        }), { debugName: opt?.debugName });
+        }), { debugName: opt?.debugName ?? 'windowSize' });
         base.unthrottled = base;
         return base;
     }
     const sizeSignal = throttled({ width: window.innerWidth, height: window.innerHeight }, {
-        debugName: opt?.debugName,
+        debugName: opt?.debugName ?? 'windowSize',
         equal: (a, b) => a.width === b.width && a.height === b.height,
         ms: opt?.throttle ?? 100,
     });
@@ -1139,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(() => {
@@ -1417,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;
 }