@praxisjs/composables 1.0.5 → 1.1.0

package/src/browser.ts

@@ -16,7 +16,9 @@ export class MediaQuery extends Composable {
     if (this._view) return this._view;
     this._mql = window.matchMedia(this.query);
     const matches = signal(this._mql.matches);
-    this._handler = (e) => { matches.set(e.matches); };
+    this._handler = (e) => {
+      matches.set(e.matches);
+    };
     this._mql.addEventListener("change", this._handler);
     this._view = { matches };
     return this._view;
@@ -42,7 +44,9 @@ export class ColorScheme extends Composable {
     this._mql = window.matchMedia("(prefers-color-scheme: dark)");
     const isDark = signal(this._mql.matches);
     const isLight = computed(() => !isDark());
-    this._handler = (e) => { isDark.set(e.matches); };
+    this._handler = (e) => {
+      isDark.set(e.matches);
+    };
     this._mql.addEventListener("change", this._handler);
     this._view = { isDark, isLight };
     return this._view;
@@ -59,15 +63,17 @@ export class Mouse extends Composable {
   declare x: number;
   declare y: number;
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  private _handler = (_e: MouseEvent) => {};
+  private _handler!: (e: MouseEvent) => void;
   private _view?: Record<string, unknown>;
 
   setup() {
     if (this._view) return this._view;
     const x = signal(0);
     const y = signal(0);
-    this._handler = (e) => { x.set(e.clientX); y.set(e.clientY); };
+    this._handler = (e) => {
+      x.set(e.clientX);
+      y.set(e.clientY);
+    };
     window.addEventListener("mousemove", this._handler);
     this._view = { x, y };
     return this._view;
@@ -83,8 +89,7 @@ export class KeyCombo extends Composable {
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   private _keydownHandler = (_e: KeyboardEvent) => {};
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  private _keyupHandler = () => {};
+  private _keyupHandler!: () => void;
   private _view?: Record<string, unknown>;
 
   constructor(private readonly combo: string) {
@@ -93,7 +98,10 @@ export class KeyCombo extends Composable {
 
   setup() {
     if (this._view) return this._view;
-    const parts = this.combo.toLowerCase().split("+").map((p) => p.trim());
+    const parts = this.combo
+      .toLowerCase()
+      .split("+")
+      .map((p) => p.trim());
     const pressed = signal(false);
 
     const modifiers = ["ctrl", "shift", "alt", "meta"];
@@ -101,7 +109,9 @@ export class KeyCombo extends Composable {
 
     // A combo with no non-modifier key is invalid and should never fire
     if (!key) {
-      this._keyupHandler = () => { pressed.set(false); };
+      this._keyupHandler = () => {
+        pressed.set(false);
+      };
       window.addEventListener("keydown", this._keydownHandler);
       window.addEventListener("keyup", this._keyupHandler);
       this._view = { pressed };
@@ -117,7 +127,9 @@ export class KeyCombo extends Composable {
         pressed.set(true);
       }
     };
-    this._keyupHandler = () => { pressed.set(false); };
+    this._keyupHandler = () => {
+      pressed.set(false);
+    };
 
     window.addEventListener("keydown", this._keydownHandler);
     window.addEventListener("keyup", this._keyupHandler);
@@ -148,13 +160,17 @@ export class Idle extends Composable {
     const reset = () => {
       idle.set(false);
       clearTimeout(this._timer);
-      this._timer = setTimeout(() => { idle.set(true); }, this.timeout);
+      this._timer = setTimeout(() => {
+        idle.set(true);
+      }, this.timeout);
     };
 
-    ["mousemove", "keydown", "click", "scroll", "touchstart"].forEach((event) => {
-      window.addEventListener(event, reset, { passive: true });
-      this._listeners.push([event, reset]);
-    });
+    ["mousemove", "keydown", "click", "scroll", "touchstart"].forEach(
+      (event) => {
+        window.addEventListener(event, reset, { passive: true });
+        this._listeners.push([event, reset]);
+      },
+    );
 
     reset();
     this._view = { idle };

package/src/dom.ts

@@ -1,12 +1,11 @@
 import { Composable } from "@praxisjs/core";
-import { signal, effect } from "@praxisjs/core/internal";
+import { signal } from "@praxisjs/core/internal";
 
 export class WindowSize extends Composable {
   declare width: number;
   declare height: number;
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  private _handler = () => {};
+  private _handler!: () => void;
   private _view?: Record<string, unknown>;
 
   setup() {
@@ -31,31 +30,48 @@ export class ScrollPosition extends Composable {
   declare x: number;
   declare y: number;
 
-  private readonly _target: HTMLElement | Window;
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  private _handler = () => {};
-  private _view?: Record<string, unknown>;
+  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;
 
-  constructor(target: HTMLElement | Window = window) {
+  constructor(target: HTMLElement | Window | { current: HTMLElement | null } = window) {
     super();
-    this._target = target;
+    if (typeof target === "object" && "current" in target) {
+      this._ref = target as { current: HTMLElement | null };
+    } else {
+      this._staticTarget = target;
+    }
+  }
+
+  private get _target(): HTMLElement | Window {
+    return this._ref ? (this._ref.current ?? window) : (this._staticTarget ?? window);
   }
 
   setup() {
-    if (this._view) return this._view;
-    const x = signal(0);
-    const y = signal(0);
+    this._x = signal(0);
+    this._y = signal(0);
+    return { x: this._x, y: this._y };
+  }
+
+  onMount() {
+    if (this._mounted) return;
+    this._mounted = true;
     const t = this._target;
     this._handler = () => {
-      x.set(t === window ? window.scrollX : (t as HTMLElement).scrollLeft);
-      y.set(t === window ? window.scrollY : (t as HTMLElement).scrollTop);
+      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);
-    this._view = { x, y };
-    return this._view;
+    // 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);
   }
 
   onUnmount() {
+    this._mounted = false;
     this._target.removeEventListener("scroll", this._handler);
   }
 }
@@ -65,6 +81,8 @@ 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>;
 
   constructor(private readonly ref: { current: HTMLElement | null }) {
@@ -73,23 +91,24 @@ export class ElementSize extends Composable {
 
   setup() {
     if (this._view) return this._view;
-    const width = signal(0);
-    const height = signal(0);
+    this._width = signal(0);
+    this._height = signal(0);
     this._observer = new ResizeObserver(([entry]) => {
-      width.set(entry.contentRect.width);
-      height.set(entry.contentRect.height);
-    });
-    effect(() => {
-      if (this.ref.current) {
-        this._observer?.observe(this.ref.current);
-        width.set(this.ref.current.offsetWidth);
-        height.set(this.ref.current.offsetHeight);
-      }
+      this._width.set(entry.contentRect.width);
+      this._height.set(entry.contentRect.height);
     });
-    this._view = { width, height };
+    this._view = { width: this._width, height: this._height };
     return this._view;
   }
 
+  onMount() {
+    const el = this.ref.current;
+    if (!el) return;
+    this._observer?.observe(el);
+    this._width.set(el.offsetWidth);
+    this._height.set(el.offsetHeight);
+  }
+
   onUnmount() {
     this._observer?.disconnect();
   }
@@ -99,6 +118,7 @@ export class Intersection extends Composable {
   declare visible: boolean;
 
   private _observer?: IntersectionObserver;
+  private _visible!: ReturnType<typeof signal<boolean>>;
   private _view?: Record<string, unknown>;
 
   constructor(
@@ -110,17 +130,19 @@ export class Intersection extends Composable {
 
   setup() {
     if (this._view) return this._view;
-    const visible = signal(false);
+    this._visible = signal(false);
     this._observer = new IntersectionObserver(([entry]) => {
-      visible.set(entry.isIntersecting);
+      this._visible.set(entry.isIntersecting);
     }, this.options);
-    effect(() => {
-      if (this.ref.current) this._observer?.observe(this.ref.current);
-    });
-    this._view = { visible };
+    this._view = { visible: this._visible };
     return this._view;
   }
 
+  onMount() {
+    const el = this.ref.current;
+    if (el) this._observer?.observe(el);
+  }
+
   onUnmount() {
     this._observer?.disconnect();
   }
@@ -129,28 +151,34 @@ export class Intersection extends Composable {
 export class Focus extends Composable {
   declare focused: boolean;
 
-  private _view?: Record<string, unknown>;
+  private _focused!: ReturnType<typeof signal<boolean>>;
+  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() {
-    if (this._view) return this._view;
-    const focused = signal(false);
-    effect(() => {
-      const el = this.ref.current;
-      if (!el) return;
-      const onFocus = () => { focused.set(true); };
-      const onBlur = () => { focused.set(false); };
-      el.addEventListener("focus", onFocus);
-      el.addEventListener("blur", onBlur);
-      return () => {
-        el.removeEventListener("focus", onFocus);
-        el.removeEventListener("blur", onBlur);
-      };
-    });
-    this._view = { focused };
-    return this._view;
+    this._focused = signal(false);
+    return { focused: this._focused };
+  }
+
+  onMount() {
+    if (this._mounted) return;
+    this._mounted = true;
+    const el = this.ref.current;
+    if (!el) return;
+    el.addEventListener("focus", this._onFocus);
+    el.addEventListener("blur", this._onBlur);
+  }
+
+  onUnmount() {
+    this._mounted = false;
+    const el = this.ref.current;
+    if (!el) return;
+    el.removeEventListener("focus", this._onFocus);
+    el.removeEventListener("blur", this._onBlur);
   }
 }

package/src/index.ts

@@ -13,3 +13,4 @@ export {
   Pagination,
   type PaginationOptions,
 } from "./utilities";
+export { VirtualList, type VirtualItem } from "./list";

package/src/list.ts

@@ -0,0 +1,77 @@
+import { Composable } from "@praxisjs/core";
+import { computed, signal } from "@praxisjs/core/internal";
+
+export interface VirtualItem<T> {
+  item: T;
+  index: number;
+}
+
+export class VirtualList<T = unknown> extends Composable {
+  declare visibleItems: Array<VirtualItem<T>>;
+  declare totalHeight: number;
+  declare offsetTop: number;
+  declare offsetBottom: number;
+
+  private readonly _scrollTop = signal(0);
+  private readonly _viewHeight = signal(600);
+  private _scrollCleanup?: () => void;
+
+  constructor(
+    private readonly containerRef: { current: HTMLElement | null },
+    private readonly getItems: () => T[],
+    private readonly itemHeight: number,
+    private readonly buffer = 3,
+  ) {
+    super();
+  }
+
+  setup() {
+    const { _scrollTop, _viewHeight, itemHeight, buffer, getItems } = this;
+
+    const items = computed(getItems);
+    const total = computed(() => items().length);
+
+    const startIdx = computed(() =>
+      Math.max(0, Math.floor(_scrollTop() / itemHeight) - buffer),
+    );
+    const endIdx = computed(() =>
+      Math.min(
+        total() - 1,
+        Math.ceil((_scrollTop() + _viewHeight()) / itemHeight) + buffer,
+      ),
+    );
+
+    const visibleItems = computed<Array<VirtualItem<T>>>(() => {
+      const arr = items();
+      const result: Array<VirtualItem<T>> = [];
+      for (let i = startIdx(); i <= endIdx(); i++) {
+        result.push({ item: arr[i], index: i });
+      }
+      return result;
+    });
+
+    const totalHeight = computed(() => total() * itemHeight);
+    const offsetTop = computed(() => startIdx() * itemHeight);
+    const offsetBottom = computed(() =>
+      Math.max(0, total() - 1 - endIdx()) * itemHeight,
+    );
+
+    return { visibleItems, totalHeight, offsetTop, offsetBottom };
+  }
+
+  onMount() {
+    const el = this.containerRef.current;
+    if (!el) return;
+
+    const h = el.clientHeight;
+    if (h > 0) this._viewHeight.set(h);
+
+    const handler = () => { this._scrollTop.set(el.scrollTop); };
+    el.addEventListener("scroll", handler);
+    this._scrollCleanup = () => { el.removeEventListener("scroll", handler); };
+  }
+
+  onUnmount() {
+    this._scrollCleanup?.();
+  }
+}