Add set of nanostores utils: for writing effect in better way than nanostores allows out of the box, for creating atom which works like intersection observer and other tiny utils

Author: psd-coder

src/lib/nanostores/createIntersectionObserverAtom.ts

@@ -0,0 +1,49 @@
+import { atom, onMount, type ReadableAtom } from "nanostores";
+
+import { effect } from "./effect";
+import { type ToAtom, toAtom } from "./toAtom";
+
+interface IntersectionObserverAtomOptions<E extends HTMLElement, Mapped> {
+  element: ToAtom<E | null>;
+  initialValue: Mapped;
+  mapper: (entry: IntersectionObserverEntry) => Mapped;
+  observerOptions?: ReadableAtom<IntersectionObserverInit> | IntersectionObserverInit;
+}
+
+export function createIntersectionObserverAtom<E extends HTMLElement, Mapped>({
+  element,
+  initialValue,
+  mapper,
+  observerOptions,
+}: IntersectionObserverAtomOptions<E, Mapped>): {
+  $atom: ReadableAtom<Mapped>;
+  intersectionObserver: IntersectionObserver | null;
+} {
+  const $result = atom(initialValue);
+  const $element = toAtom(element);
+  const $observerOptions = toAtom(observerOptions);
+  let intersectionObserver: IntersectionObserver | null = null;
+
+  onMount($result, () => {
+    return effect([$element, $observerOptions], (element, observerOptions) => {
+      if (!element) {
+        return;
+      }
+
+      intersectionObserver = new IntersectionObserver((entries) => {
+        const entry = entries[0];
+
+        if (entry) {
+          $result.set(mapper(entry));
+        }
+      }, observerOptions);
+      intersectionObserver.observe(element);
+
+      return () => {
+        intersectionObserver?.disconnect();
+      };
+    });
+  });
+
+  return { $atom: $result, intersectionObserver };
+}

src/lib/nanostores/effect.ts

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-invalid-void-type */
+import type { AnyStore, Store, StoreValue } from "nanostores";
+
+export type StoreValues<Stores extends AnyStore[]> = {
+  [Index in keyof Stores]: StoreValue<Stores[Index]>;
+};
+
+export function effect<S extends Store>(
+  store: S,
+  callback: (value: StoreValue<S>) => VoidFunction | void,
+): VoidFunction;
+export function effect<Stores extends Store[]>(
+  stores: [...Stores],
+  callback: (...values: StoreValues<Stores>) => VoidFunction | void,
+): VoidFunction;
+export function effect<Stores extends Store[]>(
+  stores: [...Stores],
+  callback: (...values: StoreValues<Stores>) => VoidFunction | void,
+): VoidFunction {
+  const storesArr = (Array.isArray(stores) ? stores : [stores]) as [...Stores];
+  let storesUnsubscribe: VoidFunction[] = [];
+  let callbackUnsubscribe: VoidFunction | void = undefined;
+
+  function runCallback() {
+    callbackUnsubscribe?.();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    const values = storesArr.map((store) => store.get()) as StoreValues<Stores>;
+    callbackUnsubscribe = callback(...values);
+  }
+
+  function unsubscribe() {
+    for (const unsubscribe of storesUnsubscribe) {
+      unsubscribe();
+    }
+    callbackUnsubscribe?.();
+  }
+
+  storesUnsubscribe = storesArr.map((store) => store.listen(runCallback));
+  runCallback();
+
+  return unsubscribe;
+}

src/lib/nanostores/isAtom.ts

@@ -0,0 +1,11 @@
+import type { Atom } from "nanostores";
+
+export function isAtom(value: unknown): value is Atom<unknown> {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "get" in value &&
+    "listen" in value &&
+    "subscribe" in value
+  );
+}

src/lib/nanostores/toAtom.ts

@@ -0,0 +1,9 @@
+import { type Atom, atom } from "nanostores";
+
+import { isAtom } from "./isAtom";
+
+export type ToAtom<V> = Atom<V> | V;
+
+export function toAtom<V>(value: ToAtom<V>): Atom<V> {
+  return isAtom(value) ? value : atom(value);
+}