@praxisjs/composables 0.1.5 → 1.0.1

package/src/browser.ts

@@ -1,63 +1,171 @@
+import { Composable } from "@praxisjs/core";
 import { signal, computed } from "@praxisjs/core/internal";
-import type { Computed } from "@praxisjs/shared";
-
-export function useMediaQuery(query: string): Computed<boolean> {
-  const mql = window.matchMedia(query);
-  const matches = signal(mql.matches);
-  mql.addEventListener("change", (e: MediaQueryListEvent) => {
-    matches.set(e.matches);
-  });
-  return computed(() => matches());
+
+export class MediaQuery extends Composable {
+  declare matches: boolean;
+
+  private _mql?: MediaQueryList;
+  private _handler?: (e: MediaQueryListEvent) => void;
+  private _view?: Record<string, unknown>;
+
+  constructor(private readonly query: string) {
+    super();
+  }
+
+  setup() {
+    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._mql.addEventListener("change", this._handler);
+    this._view = { matches };
+    return this._view;
+  }
+
+  onUnmount() {
+    if (this._mql && this._handler) {
+      this._mql.removeEventListener("change", this._handler);
+    }
+  }
 }
 
-export function useColorScheme() {
-  const isDark = useMediaQuery("(prefers-color-scheme: dark)");
-  const isLight = computed(() => !isDark());
-  return { isDark, isLight };
+export class ColorScheme extends Composable {
+  declare isDark: boolean;
+  declare isLight: boolean;
+
+  private _mql?: MediaQueryList;
+  private _handler?: (e: MediaQueryListEvent) => void;
+  private _view?: Record<string, unknown>;
+
+  setup() {
+    if (this._view) return this._view;
+    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._mql.addEventListener("change", this._handler);
+    this._view = { isDark, isLight };
+    return this._view;
+  }
+
+  onUnmount() {
+    if (this._mql && this._handler) {
+      this._mql.removeEventListener("change", this._handler);
+    }
+  }
 }
 
-export function useMouse() {
-  const x = signal(0);
-  const y = signal(0);
-  window.addEventListener("mousemove", (e) => {
-    x.set(e.clientX);
-    y.set(e.clientY);
-  });
-  return { x: computed(() => x()), y: computed(() => y()) };
+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 _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); };
+    window.addEventListener("mousemove", this._handler);
+    this._view = { x, y };
+    return this._view;
+  }
+
+  onUnmount() {
+    window.removeEventListener("mousemove", this._handler);
+  }
 }
 
-export function useKeyCombo(combo: string): Computed<boolean> {
-  const parts = combo.toLowerCase().split("+");
-  const pressed = signal(false);
-  window.addEventListener("keydown", (e: KeyboardEvent) => {
-    const ctrl = parts.includes("ctrl") ? e.ctrlKey : true;
-    const shift = parts.includes("shift") ? e.shiftKey : true;
-    const alt = parts.includes("alt") ? e.altKey : true;
-    const key = parts.find(
-      (p) => !["ctrl", "shift", "alt", "meta"].includes(p),
-    );
-    if (ctrl && shift && alt && (!key || e.key.toLowerCase() === key))
-      pressed.set(true);
-  });
-  window.addEventListener("keyup", () => {
-    pressed.set(false);
-  });
-  return computed(() => pressed());
+export class KeyCombo extends Composable {
+  declare pressed: boolean;
+
+  // 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 _view?: Record<string, unknown>;
+
+  constructor(private readonly combo: string) {
+    super();
+  }
+
+  setup() {
+    if (this._view) return this._view;
+    const parts = this.combo.toLowerCase().split("+").map((p) => p.trim());
+    const pressed = signal(false);
+
+    const modifiers = ["ctrl", "shift", "alt", "meta"];
+    const key = parts.find((p) => !modifiers.includes(p));
+
+    // A combo with no non-modifier key is invalid and should never fire
+    if (!key) {
+      this._keyupHandler = () => { pressed.set(false); };
+      window.addEventListener("keydown", this._keydownHandler);
+      window.addEventListener("keyup", this._keyupHandler);
+      this._view = { pressed };
+      return this._view;
+    }
+
+    this._keydownHandler = (e) => {
+      const ctrl = parts.includes("ctrl") ? e.ctrlKey : true;
+      const shift = parts.includes("shift") ? e.shiftKey : true;
+      const alt = parts.includes("alt") ? e.altKey : true;
+      const meta = parts.includes("meta") ? e.metaKey : true;
+      if (ctrl && shift && alt && meta && e.key.toLowerCase() === key) {
+        pressed.set(true);
+      }
+    };
+    this._keyupHandler = () => { pressed.set(false); };
+
+    window.addEventListener("keydown", this._keydownHandler);
+    window.addEventListener("keyup", this._keyupHandler);
+    this._view = { pressed };
+    return this._view;
+  }
+
+  onUnmount() {
+    window.removeEventListener("keydown", this._keydownHandler);
+    window.removeEventListener("keyup", this._keyupHandler);
+  }
 }
 
-export function useIdle(timeout = 60_000): Computed<boolean> {
-  const idle = signal(false);
-  let timer: ReturnType<typeof setTimeout>;
-  const reset = () => {
-    idle.set(false);
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      idle.set(true);
-    }, timeout);
-  };
-  ["mousemove", "keydown", "click", "scroll", "touchstart"].forEach((e) => {
-    window.addEventListener(e, reset, { passive: true });
-  });
-  reset();
-  return computed(() => idle());
+export class Idle extends Composable {
+  declare idle: boolean;
+
+  private _listeners: Array<[string, () => void]> = [];
+  private _timer?: ReturnType<typeof setTimeout>;
+  private _view?: Record<string, unknown>;
+
+  constructor(private readonly timeout = 60_000) {
+    super();
+  }
+
+  setup() {
+    if (this._view) return this._view;
+    const idle = signal(false);
+    const reset = () => {
+      idle.set(false);
+      clearTimeout(this._timer);
+      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]);
+    });
+
+    reset();
+    this._view = { idle };
+    return this._view;
+  }
+
+  onUnmount() {
+    clearTimeout(this._timer);
+    this._listeners.forEach(([event, handler]) => {
+      window.removeEventListener(event, handler);
+    });
+    this._listeners = [];
+  }
 }

package/src/dom.ts

@@ -1,93 +1,156 @@
-import { signal, computed, effect } from "@praxisjs/core/internal";
-import type { Computed } from "@praxisjs/shared";
+import { Composable } from "@praxisjs/core";
+import { signal, effect } from "@praxisjs/core/internal";
 
-export function createRef(): { current: HTMLElement | null } {
-  return { current: null };
-}
+export class WindowSize extends Composable {
+  declare width: number;
+  declare height: number;
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private _handler = () => {};
+  private _view?: Record<string, unknown>;
+
+  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;
+  }
 
-export function useElementSize(ref: { current: HTMLElement | null }) {
-  const width = signal(0);
-  const height = signal(0);
-  const observer = new ResizeObserver(([entry]) => {
-    width.set(entry.contentRect.width);
-    height.set(entry.contentRect.height);
-  });
-  effect(() => {
-    if (ref.current) {
-      observer.observe(ref.current);
-      width.set(ref.current.offsetWidth);
-      height.set(ref.current.offsetHeight);
-    }
-  });
-  return {
-    width: computed(() => width()),
-    height: computed(() => height()),
-    stop: () => {
-      observer.disconnect();
-    },
-  };
+  onUnmount() {
+    window.removeEventListener("resize", this._handler);
+  }
 }
 
-export function useWindowSize() {
-  const width = signal(window.innerWidth);
-  const height = signal(window.innerHeight);
-  window.addEventListener("resize", () => {
-    width.set(window.innerWidth);
-    height.set(window.innerHeight);
-  });
-  return { width: computed(() => width()), height: computed(() => height()) };
+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>;
+
+  constructor(target: HTMLElement | Window = window) {
+    super();
+    this._target = target;
+  }
+
+  setup() {
+    if (this._view) return this._view;
+    const x = signal(0);
+    const y = signal(0);
+    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);
+    };
+    t.addEventListener("scroll", this._handler);
+    this._view = { x, y };
+    return this._view;
+  }
+
+  onUnmount() {
+    this._target.removeEventListener("scroll", this._handler);
+  }
 }
 
-export function useScrollPosition(target: HTMLElement | Window = window) {
-  const x = signal(0);
-  const y = signal(0);
-  target.addEventListener("scroll", () => {
-    x.set(
-      target === window ? window.scrollX : (target as HTMLElement).scrollLeft,
-    );
-    y.set(
-      target === window ? window.scrollY : (target as HTMLElement).scrollTop,
-    );
-  });
-  return { x: computed(() => x()), y: computed(() => y()) };
+export class ElementSize extends Composable {
+  declare width: number;
+  declare height: number;
+
+  private _observer?: ResizeObserver;
+  private _view?: Record<string, unknown>;
+
+  constructor(private readonly ref: { current: HTMLElement | null }) {
+    super();
+  }
+
+  setup() {
+    if (this._view) return this._view;
+    const width = signal(0);
+    const 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._view = { width, height };
+    return this._view;
+  }
+
+  onUnmount() {
+    this._observer?.disconnect();
+  }
 }
 
-export function useIntersection(
-  ref: { current: HTMLElement | null },
-  options?: IntersectionObserverInit,
-): Computed<boolean> {
-  const visible = signal(false);
-  const observer = new IntersectionObserver(([entry]) => {
-    visible.set(entry.isIntersecting);
-  }, options);
-  effect(() => {
-    if (ref.current) observer.observe(ref.current);
-    return () => {
-      observer.disconnect();
-    };
-  });
-  return computed(() => visible());
+export class Intersection extends Composable {
+  declare visible: boolean;
+
+  private _observer?: IntersectionObserver;
+  private _view?: Record<string, unknown>;
+
+  constructor(
+    private readonly ref: { current: HTMLElement | null },
+    private readonly options?: IntersectionObserverInit,
+  ) {
+    super();
+  }
+
+  setup() {
+    if (this._view) return this._view;
+    const visible = signal(false);
+    this._observer = new IntersectionObserver(([entry]) => {
+      visible.set(entry.isIntersecting);
+    }, this.options);
+    effect(() => {
+      if (this.ref.current) this._observer?.observe(this.ref.current);
+    });
+    this._view = { visible };
+    return this._view;
+  }
+
+  onUnmount() {
+    this._observer?.disconnect();
+  }
 }
 
-export function useFocus(ref: {
-  current: HTMLElement | null;
-}): Computed<boolean> {
-  const focused = signal(false);
-  effect(() => {
-    const el = 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);
-    };
-  });
-  return computed(() => focused());
+export class Focus extends Composable {
+  declare focused: boolean;
+
+  private _view?: Record<string, unknown>;
+
+  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;
+  }
 }

package/src/index.ts

@@ -1,22 +1,15 @@
 export {
-  createRef,
-  useElementSize,
-  useWindowSize,
-  useScrollPosition,
-  useIntersection,
-  useFocus,
+  WindowSize,
+  ScrollPosition,
+  ElementSize,
+  Intersection,
+  Focus,
 } from "./dom";
+export { MediaQuery, ColorScheme, Mouse, KeyCombo, Idle } from "./browser";
 export {
-  useMediaQuery,
-  useColorScheme,
-  useMouse,
-  useKeyCombo,
-  useIdle,
-} from "./browser";
-export {
-  useClipboard,
-  useGeolocation,
-  useTimeAgo,
-  usePagination,
+  Clipboard,
+  Geolocation,
+  TimeAgo,
+  Pagination,
+  type PaginationOptions,
 } from "./utilities";
-export type { PaginationOptions } from "./utilities";