@praxisjs/composables 0.1.5 → 1.0.0

package/src/dom.ts

@@ -1,93 +1,140 @@
-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 = () => {};
+
+  setup() {
+    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);
+    return { width, height };
+  }
 
-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 = () => {};
+
+  constructor(target: HTMLElement | Window = window) {
+    super();
+    this._target = target;
+  }
+
+  setup() {
+    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);
+    return { x, y };
+  }
+
+  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;
+
+  constructor(private readonly ref: { current: HTMLElement | null }) {
+    super();
+  }
+
+  setup() {
+    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);
+      }
+    });
+    return { width, height };
+  }
+
+  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;
+
+  constructor(
+    private readonly ref: { current: HTMLElement | null },
+    private readonly options?: IntersectionObserverInit,
+  ) {
+    super();
+  }
+
+  setup() {
+    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);
+    });
+    return { visible };
+  }
+
+  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;
+
+  constructor(private readonly ref: { current: HTMLElement | null }) {
+    super();
+  }
+
+  setup() {
+    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);
+      };
+    });
+    return { focused };
+  }
 }

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";

package/src/utilities.ts

@@ -1,123 +1,156 @@
+import { Composable } from "@praxisjs/core";
 import { signal, computed } from "@praxisjs/core/internal";
 import type { Signal, Computed } from "@praxisjs/shared";
 
-export function useClipboard(resetDelay = 2000) {
-  const copied = signal(false);
-  const content = signal("");
-  async function copy(text: string): Promise<void> {
-    try {
-      await navigator.clipboard.writeText(text);
-      content.set(text);
-      copied.set(true);
-      setTimeout(() => {
-        copied.set(false);
-      }, resetDelay);
-    } catch {
-      console.warn("[useClipboard] Falha ao copiar");
-    }
-  }
-  return {
-    copy,
-    copied: computed(() => copied()),
-    content: computed(() => content()),
-  };
+export interface PaginationOptions {
+  total: number;
+  pageSize: number;
+  initial?: number;
 }
 
-export function useGeolocation(options?: PositionOptions) {
-  const lat = signal<number | null>(null);
-  const lng = signal<number | null>(null);
-  const error = signal<GeolocationPositionError | null>(null);
-  const loading = signal(true);
-  navigator.geolocation.getCurrentPosition(
-    (pos) => {
-      lat.set(pos.coords.latitude);
-      lng.set(pos.coords.longitude);
-      loading.set(false);
-    },
-    (err) => {
-      error.set(err);
-      loading.set(false);
-    },
-    options,
-  );
-  return {
-    lat: computed(() => lat()),
-    lng: computed(() => lng()),
-    error: computed(() => error()),
-    loading: computed(() => loading()),
-  };
+export class Clipboard extends Composable {
+  declare copied: boolean;
+  declare content: string;
+  declare copy: (text: string) => Promise<void>;
+
+  constructor(private readonly resetDelay = 2000) {
+    super();
+  }
+
+  setup() {
+    const copied = signal(false);
+    const content = signal("");
+    const resetDelay = this.resetDelay;
+
+    const copy = async (text: string): Promise<void> => {
+      try {
+        await navigator.clipboard.writeText(text);
+        content.set(text);
+        copied.set(true);
+        setTimeout(() => { copied.set(false); }, resetDelay);
+      } catch {
+        console.warn("[Clipboard] Falha ao copiar");
+      }
+    };
+
+    return { copied, content, copy };
+  }
 }
 
-export function useTimeAgo(
-  source:
-    | Signal<Date | number>
-    | Computed<Date | number>
-    | (() => Date | number),
-  locale = "pt-BR",
-): Computed<string> {
-  const read = typeof source === "function" ? source : source;
-  const tick = signal(Date.now());
-  setInterval(() => {
-    tick.set(Date.now());
-  }, 60_000);
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
-
-  return 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");
-  });
+export class Geolocation extends Composable {
+  declare lat: number | null;
+  declare lng: number | null;
+  declare error: GeolocationPositionError | null;
+  declare loading: boolean;
+
+  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);
+
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        lat.set(pos.coords.latitude);
+        lng.set(pos.coords.longitude);
+        loading.set(false);
+      },
+      (err) => {
+        error.set(err);
+        loading.set(false);
+      },
+      this.options,
+    );
+
+    return { lat, lng, error, loading };
+  }
 }
 
-export interface PaginationOptions {
-  total: number;
-  pageSize: number;
-  initial?: number;
+export class TimeAgo extends Composable {
+  declare value: string;
+
+  private _interval?: ReturnType<typeof setInterval>;
+
+  constructor(
+    private readonly source:
+      | Signal<Date | number>
+      | Computed<Date | number>
+      | (() => Date | number),
+    private readonly locale = "pt-BR",
+  ) {
+    super();
+  }
+
+  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 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");
+    });
+
+    return { value };
+  }
+
+  onUnmount() {
+    clearInterval(this._interval);
+  }
 }
 
-export function usePagination(
-  options: PaginationOptions | (() => PaginationOptions),
-) {
-  const getOpts = typeof options === "function" ? options : () => options;
-  const _page = signal(getOpts().initial ?? 1);
-  const totalPages = computed(() =>
-    Math.ceil(getOpts().total / getOpts().pageSize),
-  );
-  const page = computed(() => Math.min(_page(), totalPages()));
-  const offset = computed(() => (page() - 1) * getOpts().pageSize);
-  const hasNext = computed(() => page() < totalPages());
-  const hasPrev = computed(() => page() > 1);
-  return {
-    page,
-    totalPages,
-    offset,
-    hasNext,
-    hasPrev,
-    pageSize: computed(() => getOpts().pageSize),
-    pages: computed(() =>
-      Array.from({ length: totalPages() }, (_, i) => i + 1),
-    ),
-    next() {
-      if (hasNext()) _page.update((p) => p + 1);
-    },
-    prev() {
-      if (hasPrev()) _page.update((p) => p - 1);
-    },
-    goTo(p: number) {
-      _page.set(Math.max(1, Math.min(p, totalPages())));
-    },
-    first() {
-      _page.set(1);
-    },
-    last() {
-      _page.set(totalPages());
-    },
-  };
+export class Pagination extends Composable {
+  declare page: number;
+  declare totalPages: number;
+  declare offset: number;
+  declare hasNext: boolean;
+  declare hasPrev: boolean;
+  declare pageSize: number;
+  declare pages: number[];
+  declare next: () => void;
+  declare prev: () => void;
+  declare goTo: (p: number) => void;
+  declare first: () => void;
+  declare last: () => void;
+
+  constructor(private readonly options: PaginationOptions) {
+    super();
+  }
+
+  setup() {
+    const opts = this.options;
+    const _page = signal(opts.initial ?? 1);
+    const totalPages = computed(() => Math.ceil(opts.total / opts.pageSize));
+    const page = computed(() => Math.min(_page(), totalPages()));
+    const offset = computed(() => (page() - 1) * opts.pageSize);
+    const hasNext = computed(() => page() < totalPages());
+    const hasPrev = computed(() => page() > 1);
+
+    return {
+      page,
+      totalPages,
+      offset,
+      hasNext,
+      hasPrev,
+      pageSize: computed(() => opts.pageSize),
+      pages: computed(() => Array.from({ length: totalPages() }, (_, i) => i + 1)),
+      next: () => { if (hasNext()) _page.update((p) => p + 1); },
+      prev: () => { if (hasPrev()) _page.update((p) => p - 1); },
+      goTo: (p: number) => { _page.set(Math.max(1, Math.min(p, totalPages()))); },
+      first: () => { _page.set(1); },
+      last: () => { _page.set(totalPages()); },
+    };
+  }
 }