@praxisjs/composables 1.2.0 → 1.2.2

package/src/dom.ts

@@ -1,28 +1,36 @@
 import { Composable } from "@praxisjs/core";
-import { signal } from "@praxisjs/core/internal";
+import { endBatch, signal, startBatch } from "@praxisjs/core/internal";
+
+const hasWindow = typeof window !== "undefined";
+
+// Listeners and observers start in onMount and stop in onUnmount: setup() runs when the component
+// is constructed, which also happens for components that never mount (and on the server).
 
 export class WindowSize extends Composable {
   declare width: number;
   declare height: number;
 
-  private _handler!: () => void;
-  private _view?: Record<string, unknown>;
+  private readonly _width = signal(hasWindow ? window.innerWidth : 0);
+  private readonly _height = signal(hasWindow ? window.innerHeight : 0);
+
+  private readonly _onResize = () => {
+    startBatch();
+    this._width.set(window.innerWidth);
+    this._height.set(window.innerHeight);
+    endBatch();
+  };
 
   setup() {
-    if (this._view) return this._view;
-    const width = signal(window.innerWidth);
-    const height = signal(window.innerHeight);
-    this._handler = () => {
-      width.set(window.innerWidth);
-      height.set(window.innerHeight);
-    };
-    window.addEventListener("resize", this._handler);
-    this._view = { width, height };
-    return this._view;
+    return { width: this._width, height: this._height };
+  }
+
+  onMount() {
+    this._onResize();
+    window.addEventListener("resize", this._onResize);
   }
 
   onUnmount() {
-    window.removeEventListener("resize", this._handler);
+    window.removeEventListener("resize", this._onResize);
   }
 }
 
@@ -32,10 +40,23 @@ export class ScrollPosition extends Composable {
 
   private readonly _ref?: { current: HTMLElement | null };
   private readonly _staticTarget?: HTMLElement | Window;
-  private _handler!: () => void;
-  private _x!: ReturnType<typeof signal<number>>;
-  private _y!: ReturnType<typeof signal<number>>;
-  private _mounted = false;
+  private readonly _x = signal(0);
+  private readonly _y = signal(0);
+  private _target: HTMLElement | Window | null = null;
+
+  private readonly _onScroll = () => {
+    const t = this._target;
+    if (t === null) return;
+    startBatch();
+    if (t === window) {
+      this._x.set(window.scrollX);
+      this._y.set(window.scrollY);
+    } else {
+      this._x.set((t as HTMLElement).scrollLeft);
+      this._y.set((t as HTMLElement).scrollTop);
+    }
+    endBatch();
+  };
 
   constructor(
     target: HTMLElement | Window | { current: HTMLElement | null } = window,
@@ -49,47 +70,26 @@ export class ScrollPosition extends Composable {
   }
 
   private _resolveTarget(): HTMLElement | Window {
-    if (this._ref) {
-      if (this._ref.current !== null) {
-        return this._ref.current;
-      }
-
-      return window;
-    }
-
-    if (this._staticTarget !== undefined) {
-      return this._staticTarget;
-    }
-
-    const fallback: HTMLElement | Window = window;
-    return fallback;
+    if (this._ref) return this._ref.current ?? window;
+    return this._staticTarget ?? window;
   }
 
   setup() {
-    this._x = signal(0);
-    this._y = signal(0);
     return { x: this._x, y: this._y };
   }
 
   onMount() {
-    if (this._mounted) return;
-    this._mounted = true;
+    if (this._target !== null) return;
+    // Kept so onUnmount detaches from the same target even if the ref changed meanwhile.
     const t = this._resolveTarget();
-    this._handler = () => {
-      this._x.set(
-        t === window ? window.scrollX : (t as HTMLElement).scrollLeft,
-      );
-      this._y.set(t === window ? window.scrollY : (t as HTMLElement).scrollTop);
-    };
-    t.addEventListener("scroll", this._handler);
-    // set initial values
-    this._x.set(t === window ? window.scrollX : (t as HTMLElement).scrollLeft);
-    this._y.set(t === window ? window.scrollY : (t as HTMLElement).scrollTop);
+    this._target = t;
+    t.addEventListener("scroll", this._onScroll);
+    this._onScroll();
   }
 
   onUnmount() {
-    this._mounted = false;
-    this._resolveTarget().removeEventListener("scroll", this._handler);
+    this._target?.removeEventListener("scroll", this._onScroll);
+    this._target = null;
   }
 }
 
@@ -98,32 +98,31 @@ export class ElementSize extends Composable {
   declare height: number;
 
   private _observer?: ResizeObserver;
-  private _width!: ReturnType<typeof signal<number>>;
-  private _height!: ReturnType<typeof signal<number>>;
-  private _view?: Record<string, unknown>;
+  private readonly _width = signal(0);
+  private readonly _height = signal(0);
 
   constructor(private readonly ref: { current: HTMLElement | null }) {
     super();
   }
 
   setup() {
-    if (this._view) return this._view;
-    this._width = signal(0);
-    this._height = signal(0);
-    this._observer = new ResizeObserver(([entry]) => {
-      this._width.set(entry.contentRect.width);
-      this._height.set(entry.contentRect.height);
-    });
-    this._view = { width: this._width, height: this._height };
-    return this._view;
+    return { width: this._width, height: this._height };
   }
 
   onMount() {
     const el = this.ref.current;
     if (!el) return;
-    this._observer?.observe(el);
+    this._observer ??= new ResizeObserver(([entry]) => {
+      startBatch();
+      this._width.set(entry.contentRect.width);
+      this._height.set(entry.contentRect.height);
+      endBatch();
+    });
+    this._observer.observe(el);
+    startBatch();
     this._width.set(el.offsetWidth);
     this._height.set(el.offsetHeight);
+    endBatch();
   }
 
   onUnmount() {
@@ -135,8 +134,7 @@ export class Intersection extends Composable {
   declare visible: boolean;
 
   private _observer?: IntersectionObserver;
-  private _visible!: ReturnType<typeof signal<boolean>>;
-  private _view?: Record<string, unknown>;
+  private readonly _visible = signal(false);
 
   constructor(
     private readonly ref: { current: HTMLElement | null },
@@ -146,18 +144,16 @@ export class Intersection extends Composable {
   }
 
   setup() {
-    if (this._view) return this._view;
-    this._visible = signal(false);
-    this._observer = new IntersectionObserver(([entry]) => {
-      this._visible.set(entry.isIntersecting);
-    }, this.options);
-    this._view = { visible: this._visible };
-    return this._view;
+    return { visible: this._visible };
   }
 
   onMount() {
     const el = this.ref.current;
-    if (el) this._observer?.observe(el);
+    if (!el) return;
+    this._observer ??= new IntersectionObserver(([entry]) => {
+      this._visible.set(entry.isIntersecting);
+    }, this.options);
+    this._observer.observe(el);
   }
 
   onUnmount() {
@@ -168,38 +164,40 @@ export class Intersection extends Composable {
 export class Focus extends Composable {
   declare focused: boolean;
 
-  private _focused!: ReturnType<typeof signal<boolean>>;
+  private readonly _focused = signal(false);
+  private _el: HTMLElement | null = null;
+
   private readonly _onFocus = () => {
     this._focused.set(true);
   };
   private readonly _onBlur = () => {
     this._focused.set(false);
   };
-  private _mounted = false;
 
   constructor(private readonly ref: { current: HTMLElement | null }) {
     super();
   }
 
   setup() {
-    this._focused = signal(false);
     return { focused: this._focused };
   }
 
   onMount() {
-    if (this._mounted) return;
-    this._mounted = true;
+    if (this._el !== null) return;
     const el = this.ref.current;
     if (!el) return;
+    // Kept so onUnmount detaches from the same element even if the ref changed meanwhile.
+    this._el = el;
     el.addEventListener("focus", this._onFocus);
     el.addEventListener("blur", this._onBlur);
+    this._focused.set(el.ownerDocument.activeElement === el);
   }
 
   onUnmount() {
-    this._mounted = false;
-    const el = this.ref.current;
-    if (!el) return;
+    const el = this._el;
+    if (el === null) return;
     el.removeEventListener("focus", this._onFocus);
     el.removeEventListener("blur", this._onBlur);
+    this._el = null;
   }
 }

package/src/list.ts

@@ -1,5 +1,5 @@
 import { Composable } from "@praxisjs/core";
-import { computed, signal } from "@praxisjs/core/internal";
+import { computed, endBatch, signal, startBatch } from "@praxisjs/core/internal";
 
 export interface VirtualItem<T> {
   item: T;
@@ -14,7 +14,17 @@ export class VirtualList<T = unknown> extends Composable {
 
   private readonly _scrollTop = signal(0);
   private readonly _viewHeight = signal(600);
-  private _scrollCleanup?: () => void;
+  private _el: HTMLElement | null = null;
+  private _observer?: ResizeObserver;
+
+  private readonly _onScroll = () => {
+    if (this._el) this._scrollTop.set(this._el.scrollTop);
+  };
+
+  private readonly _onResize = () => {
+    const h = this._el?.clientHeight ?? 0;
+    if (h > 0) this._viewHeight.set(h);
+  };
 
   constructor(
     private readonly containerRef: { current: HTMLElement | null },
@@ -43,8 +53,9 @@ export class VirtualList<T = unknown> extends Composable {
 
     const visibleItems = computed<Array<VirtualItem<T>>>(() => {
       const arr = items();
+      const end = endIdx();
       const result: Array<VirtualItem<T>> = [];
-      for (let i = startIdx(); i <= endIdx(); i++) {
+      for (let i = startIdx(); i <= end; i++) {
         result.push({ item: arr[i], index: i });
       }
       return result;
@@ -61,17 +72,25 @@ export class VirtualList<T = unknown> extends Composable {
 
   onMount() {
     const el = this.containerRef.current;
-    if (!el) return;
+    if (!el || this._el) return;
+    this._el = el;
 
-    const h = el.clientHeight;
-    if (h > 0) this._viewHeight.set(h);
+    startBatch();
+    this._onResize();
+    this._scrollTop.set(el.scrollTop);
+    endBatch();
 
-    const handler = () => { this._scrollTop.set(el.scrollTop); };
-    el.addEventListener("scroll", handler);
-    this._scrollCleanup = () => { el.removeEventListener("scroll", handler); };
+    el.addEventListener("scroll", this._onScroll, { passive: true });
+    // The visible window follows the container's height when it is resized, not only at mount.
+    if (typeof ResizeObserver !== "undefined") {
+      this._observer ??= new ResizeObserver(this._onResize);
+      this._observer.observe(el);
+    }
   }
 
   onUnmount() {
-    this._scrollCleanup?.();
+    this._el?.removeEventListener("scroll", this._onScroll);
+    this._observer?.disconnect();
+    this._el = null;
   }
 }

package/src/upload.ts

@@ -1,5 +1,5 @@
 import { Composable } from "@praxisjs/core";
-import { signal, computed } from "@praxisjs/core/internal";
+import { computed, peek, signal } from "@praxisjs/core/internal";
 import type { Signal, Computed } from "@praxisjs/shared";
 
 export interface FileValidationOptions {
@@ -143,7 +143,8 @@ function createSelection(options: FileSelectionOptions) {
   const add = (incoming: FileList | File[] | null | undefined): void => {
     const list = toFileArray(incoming);
     if (list.length === 0) return;
-    const current = multiple ? files() : [];
+    // Untracked: add() may be called from an effect, which must not subscribe to the list.
+    const current = multiple ? peek(files) : [];
     const { accepted, rejected } = validateFiles(list, current.length, validation);
     errors.set(rejected);
     if (accepted.length === 0) return;
@@ -280,10 +281,19 @@ export class FileUpload extends Composable {
     const errors = signal<FileError[]>([]);
     let nextId = 0;
 
+    // Every internal read is untracked: these run from callers' effects (add, retry, start) and
+    // must not subscribe them to the list, or each progress update would re-run them.
+    const current = () => peek(items);
+
     const patch = (id: string, changes: Partial<UploadItem>) => {
-      items.update((list) => list.map((i) => (i.id === id ? { ...i, ...changes } : i)));
+      const list = current();
+      const index = list.findIndex((i) => i.id === id);
+      if (index === -1) return;
+      const next = list.slice();
+      next[index] = { ...list[index], ...changes };
+      items.set(next);
     };
-    const find = (id: string) => items().find((i) => i.id === id);
+    const find = (id: string) => current().find((i) => i.id === id);
 
     const finish = (id: string, changes: Partial<UploadItem>) => {
       this._requests.delete(id);
@@ -305,8 +315,14 @@ export class FileUpload extends Composable {
       const headers = typeof opts.headers === "function" ? opts.headers() : opts.headers;
       for (const [key, value] of Object.entries(headers ?? {})) xhr.setRequestHeader(key, value);
 
+      // Progress events arrive far more often than the rounded percentage changes.
+      let progress = 0;
       xhr.upload.onprogress = (e) => {
-        if (e.lengthComputable) patch(item.id, { progress: Math.round((e.loaded / e.total) * 100) });
+        if (!e.lengthComputable) return;
+        const next = Math.round((e.loaded / e.total) * 100);
+        if (next === progress) return;
+        progress = next;
+        patch(item.id, { progress });
       };
       xhr.onload = () => {
         if (xhr.status >= 200 && xhr.status < 300) {
@@ -333,8 +349,9 @@ export class FileUpload extends Composable {
 
     const pump = () => {
       if (this._destroyed) return;
-      let running = items().filter((i) => i.status === "uploading").length;
-      for (const item of items()) {
+      // Every running upload has its request in the map.
+      let running = this._requests.size;
+      for (const item of current()) {
         if (running >= concurrency) break;
         if (item.status === "pending") {
           running++;
@@ -356,11 +373,11 @@ export class FileUpload extends Composable {
     const add = (incoming: FileList | File[] | null | undefined) => {
       const list = toFileArray(incoming);
       if (list.length === 0) return;
-      const { accepted, rejected } = validateFiles(list, items().length, opts);
+      const { accepted, rejected } = validateFiles(list, current().length, opts);
       errors.set(rejected);
       if (accepted.length === 0) return;
-      items.update((current) => [
-        ...current,
+      items.update((list) => [
+        ...list,
         ...accepted.map((file): UploadItem => ({
           id: `upload-${String(++nextId)}`,
           file,
@@ -394,9 +411,11 @@ export class FileUpload extends Composable {
         items.update((list) => list.filter((i) => i.id !== id));
       },
       clear: () => {
-        abortAll();
+        // Emptied first: aborting fires onabort, which pumps and would otherwise start the
+        // pending uploads that are about to be discarded.
         items.set([]);
         errors.set([]);
+        abortAll();
       },
     };
   }

package/src/utilities.ts

@@ -1,5 +1,13 @@
 import { Composable } from "@praxisjs/core";
-import { signal, computed } from "@praxisjs/core/internal";
+import {
+  computed,
+  createEffect,
+  disposeEffect,
+  endBatch,
+  signal,
+  startBatch,
+  type EffectNode,
+} from "@praxisjs/core/internal";
 import type { Signal, Computed } from "@praxisjs/shared";
 
 export interface PaginationOptions {
@@ -27,8 +35,10 @@ export class Clipboard extends Composable {
     const copy = async (text: string): Promise<void> => {
       try {
         await navigator.clipboard.writeText(text);
+        startBatch();
         content.set(text);
         copied.set(true);
+        endBatch();
         clearTimeout(this._resetTimer);
         this._resetTimer = setTimeout(() => { copied.set(false); }, resetDelay);
       } catch {
@@ -50,34 +60,42 @@ export class Geolocation extends Composable {
   declare error: GeolocationPositionError | null;
   declare loading: boolean;
 
-  private _active = true;
+  private readonly _lat = signal<number | null>(null);
+  private readonly _lng = signal<number | null>(null);
+  private readonly _error = signal<GeolocationPositionError | null>(null);
+  private readonly _loading = signal(true);
+  private _active = false;
 
   constructor(private readonly options?: PositionOptions) {
     super();
   }
 
   setup() {
-    const lat = signal<number | null>(null);
-    const lng = signal<number | null>(null);
-    const error = signal<GeolocationPositionError | null>(null);
-    const loading = signal(true);
+    return { lat: this._lat, lng: this._lng, error: this._error, loading: this._loading };
+  }
 
+  // Requested on mount rather than in setup(), which also runs for components that never mount.
+  onMount() {
+    if (this._active) return;
+    this._active = true;
     navigator.geolocation.getCurrentPosition(
       (pos) => {
         if (!this._active) return;
-        lat.set(pos.coords.latitude);
-        lng.set(pos.coords.longitude);
-        loading.set(false);
+        startBatch();
+        this._lat.set(pos.coords.latitude);
+        this._lng.set(pos.coords.longitude);
+        this._loading.set(false);
+        endBatch();
       },
       (err) => {
         if (!this._active) return;
-        error.set(err);
-        loading.set(false);
+        startBatch();
+        this._error.set(err);
+        this._loading.set(false);
+        endBatch();
       },
       this.options,
     );
-
-    return { lat, lng, error, loading };
   }
 
   onUnmount() {
@@ -85,10 +103,58 @@ export class Geolocation extends Composable {
   }
 }
 
+const SECOND = 1_000;
+const MINUTE = 60_000;
+const HOUR = 3_600_000;
+const DAY = 86_400_000;
+const MONTH = 2_592_000_000;
+// setTimeout fires immediately for delays above 2^31 - 1 ms.
+const MAX_DELAY = 2_147_483_647;
+
+interface TimeUnit {
+  /** The unit applies while |diff| is below this. */
+  below: number;
+  size: number;
+  name: Intl.RelativeTimeFormatUnit;
+}
+
+const UNITS: TimeUnit[] = [
+  { below: MINUTE, size: SECOND, name: "second" },
+  { below: HOUR, size: MINUTE, name: "minute" },
+  { below: DAY, size: HOUR, name: "hour" },
+  { below: MONTH, size: DAY, name: "day" },
+  { below: Infinity, size: MONTH, name: "month" },
+];
+
+function unitIndex(diff: number): number {
+  const abs = Math.abs(diff);
+  let i = 0;
+  while (abs >= UNITS[i].below) i++;
+  return i;
+}
+
+/**
+ * Milliseconds until the text for `diff` (target − now, shrinking as time passes) changes: the
+ * next rounding step within its unit, or the moment it crosses into another unit.
+ */
+export function msUntilChange(diff: number): number {
+  const i = unitIndex(diff);
+  const { size, below } = UNITS[i];
+  // Math.round(x) changes once x falls below its value minus one half.
+  let wait = diff - (Math.round(diff / size) - 0.5) * size + 1;
+  if (diff > 0) {
+    if (i > 0) wait = Math.min(wait, diff - UNITS[i - 1].below + 1);
+  } else if (below !== Infinity) {
+    wait = Math.min(wait, diff + below);
+  }
+  return Math.min(Math.max(Math.ceil(wait), 1), MAX_DELAY);
+}
+
 export class TimeAgo extends Composable {
   declare value: string;
 
-  private _interval?: ReturnType<typeof setInterval>;
+  private readonly _tick = signal(0);
+  private _effect?: EffectNode;
 
   constructor(
     private readonly source:
@@ -101,28 +167,39 @@ export class TimeAgo extends Composable {
   }
 
   setup() {
-    const tick = signal(Date.now());
-    this._interval = setInterval(() => { tick.set(Date.now()); }, 60_000);
-
     const rtf = new Intl.RelativeTimeFormat(this.locale, { numeric: "auto" });
     const read = this.source;
+    const tick = this._tick;
 
     const value = computed(() => {
       void tick();
       const diff = new Date(read() as Date).getTime() - Date.now();
-      const abs = Math.abs(diff);
-      if (abs < 60_000) return rtf.format(Math.round(diff / 1000), "second");
-      if (abs < 3_600_000) return rtf.format(Math.round(diff / 60_000), "minute");
-      if (abs < 86_400_000) return rtf.format(Math.round(diff / 3_600_000), "hour");
-      if (abs < 2_592_000_000) return rtf.format(Math.round(diff / 86_400_000), "day");
-      return rtf.format(Math.round(diff / 2_592_000_000), "month");
+      const { size, name } = UNITS[unitIndex(diff)];
+      return rtf.format(Math.round(diff / size), name);
     });
 
     return { value };
   }
 
+  // One timer for the exact moment the text changes, instead of polling: re-armed whenever it
+  // fires or the source changes.
+  onMount() {
+    if (this._effect) return;
+    const read = this.source;
+    const tick = this._tick;
+    this._effect = createEffect(() => {
+      tick();
+      const diff = new Date(read() as Date).getTime() - Date.now();
+      // An invalid date has no next change; a NaN delay would fire at once, over and over.
+      if (Number.isNaN(diff)) return;
+      const timer = setTimeout(() => { tick.update((n) => n + 1); }, msUntilChange(diff));
+      return () => { clearTimeout(timer); };
+    });
+  }
+
   onUnmount() {
-    clearInterval(this._interval);
+    if (this._effect) disposeEffect(this._effect);
+    this._effect = undefined;
   }
 }
 

package/dist/__tests__/browser.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=browser.test.d.ts.map

package/dist/__tests__/browser.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"browser.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/browser.test.ts"],"names":[],"mappings":""}