@altano/use-element-observer 3.0.0 → 4.0.1

package/dist/index.d.ts

@@ -1,44 +1,51 @@
-import React from 'react';
+import React from "react";
 
+//#region src/types.d.ts
 type ReactElementWithRef = React.ReactElement<{
-    ref: React.Ref<Element>;
+  ref: React.Ref<Element>;
 }>;
-
+//#endregion
+//#region src/useElementObserver.d.ts
 interface Context {
-    mountedElements: Set<Element>;
+  mountedElements: Set<Element>;
 }
 declare const ElementObserverContext: React.Context<Context | null>;
 type Options = ChildOptions & {
-    selector: string;
+  selector: string;
 };
 type ChildOptions = {
-    useWrapperDiv: false;
-    tree: ReactElementWithRef;
+  useWrapperDiv: false;
+  tree: ReactElementWithRef;
 } | {
-    useWrapperDiv: true;
-    tree: React.ReactNode;
+  useWrapperDiv: true;
+  tree: React.ReactNode;
 } | {
-    useWrapperDiv?: undefined;
-    tree: React.ReactNode;
+  useWrapperDiv?: undefined;
+  tree: React.ReactNode;
 };
 /**
- * Allows observing mount/unmount of elements that match a given selector in the
- * given React tree. Tree must be static: only the mounting of the tree itself
- * is monitored. If the tree's DOM is dynamically changed those mounts and
- * unmounts will not be detected.
- *
- * @param tree The React tree to observe.
- * @param onMount The callback that will be passed any elements in the tree that
- * match the given selector, as they mount.
- * @param onUnmount The callback that will be passed any elements in the tree
- * that match the given selector, as they unmount.
- * @param selector The css selector used to select which elements are observed.
- * @param useWrapperDiv If `true`, a 'div' will wrap the observed children. If
- * `false`, `children` must be a single child element that can take a ref (which
- * will be overwritten).
- * @returns A tuple of: (1) set of elements and (2) the observed tree to be
- * rendered.
- */
-declare function useElementObserver({ tree, selector, useWrapperDiv, }: Options): [Set<Element>, React.ReactElement];
-
-export { type ChildOptions, ElementObserverContext, type Options, type ReactElementWithRef, useElementObserver };
+* Allows observing mount/unmount of elements that match a given selector in the
+* given React tree. Tree must be static: only the mounting of the tree itself
+* is monitored. If the tree's DOM is dynamically changed those mounts and
+* unmounts will not be detected.
+*
+* @param tree The React tree to observe.
+* @param onMount The callback that will be passed any elements in the tree that
+* match the given selector, as they mount.
+* @param onUnmount The callback that will be passed any elements in the tree
+* that match the given selector, as they unmount.
+* @param selector The css selector used to select which elements are observed.
+* @param useWrapperDiv If `true`, a 'div' will wrap the observed children. If
+* `false`, `children` must be a single child element that can take a ref (which
+* will be overwritten).
+* @returns A tuple of: (1) set of elements and (2) the observed tree to be
+* rendered.
+*/
+declare function useElementObserver({
+  tree,
+  selector,
+  useWrapperDiv
+}: Options): [Set<Element>, React.ReactElement];
+//#endregion
+export { ChildOptions, ElementObserverContext, Options, ReactElementWithRef, useElementObserver };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,85 +1,100 @@
-// src/useElementObserver.tsx
-import React3 from "react";
+import React, { useCallback, useContext, useEffect, useRef } from "react";
 import { useSet } from "@uidotdev/usehooks";
+import { jsx } from "react/jsx-runtime";
 
-// src/Observer.tsx
-import React2, { useCallback, useContext } from "react";
-
-// src/useMountRef.tsx
-import { useEffect, useRef } from "react";
-function useMountRef({
-  onMount,
-  onUnmount
-}) {
-  const newRef = useRef(null);
-  useEffect(() => {
-    const ref = newRef.current;
-    if (ref == null) {
-      return () => {
-      };
-    }
-    onMount(ref);
-    return () => onUnmount(ref);
-  }, [newRef, onMount, onUnmount]);
-  return newRef;
+//#region src/useMountRef.tsx
+function useMountRef({ onMount, onUnmount }) {
+	const newRef = useRef(null);
+	useEffect(() => {
+		const ref = newRef.current;
+		if (ref == null) return () => {};
+		onMount(ref);
+		return () => onUnmount(ref);
+	}, [
+		newRef,
+		onMount,
+		onUnmount
+	]);
+	return newRef;
 }
 
-// src/Observer.tsx
-import { jsx } from "react/jsx-runtime";
-function ObserveChildWithWrapperDiv({
-  children,
-  onMount,
-  onUnmount
-}) {
-  const ref = useMountRef({ onMount, onUnmount });
-  return /* @__PURE__ */ jsx("div", { style: { display: "inherit" }, ref, children });
+//#endregion
+//#region src/Observer.tsx
+function ObserveChildWithWrapperDiv({ children, onMount, onUnmount }) {
+	const ref = useMountRef({
+		onMount,
+		onUnmount
+	});
+	return /* @__PURE__ */ jsx("div", {
+		style: { display: "inherit" },
+		ref,
+		children
+	});
 }
-function ObserveChild({
-  children,
-  onMount,
-  onUnmount
-}) {
-  const newRef = useMountRef({ onMount, onUnmount });
-  return React2.cloneElement(children, { ref: newRef });
+function ObserveChild({ children, onMount, onUnmount }) {
+	const newRef = useMountRef({
+		onMount,
+		onUnmount
+	});
+	return React.cloneElement(children, { ref: newRef });
 }
-function Observer({
-  children,
-  selector,
-  useWrapperDiv
-}) {
-  const context = useContext(ElementObserverContext);
-  if (context == null) {
-    throw new Error("Observer context was null");
-  }
-  const { mountedElements } = context;
-  const onMount = useCallback(
-    (ref) => {
-      Array.from(ref.querySelectorAll(selector)).forEach(
-        (e) => mountedElements.add(e)
-      );
-    },
-    [selector, mountedElements]
-  );
-  const onUnmount = useCallback(
-    () => mountedElements.clear(),
-    [mountedElements]
-  );
-  return useWrapperDiv ? /* @__PURE__ */ jsx(ObserveChildWithWrapperDiv, { onMount, onUnmount, children }) : /* @__PURE__ */ jsx(ObserveChild, { onMount, onUnmount, children });
+function Observer({ children, selector, useWrapperDiv }) {
+	const context = useContext(ElementObserverContext);
+	if (context == null) throw new Error("Observer context was null");
+	const { mountedElements } = context;
+	const onMount = useCallback((ref) => {
+		Array.from(ref.querySelectorAll(selector)).forEach((e) => mountedElements.add(e));
+	}, [selector, mountedElements]);
+	const onUnmount = useCallback(() => mountedElements.clear(), [mountedElements]);
+	return useWrapperDiv ? /* @__PURE__ */ jsx(ObserveChildWithWrapperDiv, {
+		onMount,
+		onUnmount,
+		children
+	}) : /* @__PURE__ */ jsx(ObserveChild, {
+		onMount,
+		onUnmount,
+		children
+	});
 }
 
-// src/useElementObserver.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ElementObserverContext = React3.createContext(null);
-function useElementObserver({
-  tree,
-  selector,
-  useWrapperDiv
-}) {
-  const mountedElements = useSet();
-  const observedTree = /* @__PURE__ */ jsx2(ElementObserverContext.Provider, { value: { mountedElements }, children: useWrapperDiv == null || useWrapperDiv === true ? /* @__PURE__ */ jsx2(Observer, { selector, useWrapperDiv: true, children: tree }) : /* @__PURE__ */ jsx2(Observer, { selector, useWrapperDiv: false, children: tree }) });
-  return [mountedElements, observedTree];
+//#endregion
+//#region src/useElementObserver.tsx
+const ElementObserverContext = React.createContext(null);
+/**
+* Allows observing mount/unmount of elements that match a given selector in the
+* given React tree. Tree must be static: only the mounting of the tree itself
+* is monitored. If the tree's DOM is dynamically changed those mounts and
+* unmounts will not be detected.
+*
+* @param tree The React tree to observe.
+* @param onMount The callback that will be passed any elements in the tree that
+* match the given selector, as they mount.
+* @param onUnmount The callback that will be passed any elements in the tree
+* that match the given selector, as they unmount.
+* @param selector The css selector used to select which elements are observed.
+* @param useWrapperDiv If `true`, a 'div' will wrap the observed children. If
+* `false`, `children` must be a single child element that can take a ref (which
+* will be overwritten).
+* @returns A tuple of: (1) set of elements and (2) the observed tree to be
+* rendered.
+*/
+function useElementObserver({ tree, selector, useWrapperDiv }) {
+	const mountedElements = useSet();
+	const observedTree = /* @__PURE__ */ jsx(ElementObserverContext.Provider, {
+		value: { mountedElements },
+		children: useWrapperDiv == null || useWrapperDiv === true ? /* @__PURE__ */ jsx(Observer, {
+			selector,
+			useWrapperDiv: true,
+			children: tree
+		}) : /* @__PURE__ */ jsx(Observer, {
+			selector,
+			useWrapperDiv: false,
+			children: tree
+		})
+	});
+	return [mountedElements, observedTree];
 }
-export {
-  ElementObserverContext,
-  useElementObserver
-};
+
+//#endregion
+export { ElementObserverContext, useElementObserver };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ref: Element","ElementObserverContext: React.Context<Context | null>"],"sources":["../src/useMountRef.tsx","../src/Observer.tsx","../src/useElementObserver.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nexport interface Callbacks<T> {\n  onMount: (e: T) => void;\n  onUnmount: (e: T) => void;\n}\n\nexport function useMountRef<T>({\n  onMount,\n  onUnmount,\n}: Callbacks<T>): React.Ref<T> {\n  const newRef = useRef<T>(null);\n  useEffect(() => {\n    const ref = newRef.current;\n    if (ref == null) {\n      return (): void => {};\n    }\n    onMount(ref);\n    return (): void => onUnmount(ref);\n  }, [newRef, onMount, onUnmount]);\n  return newRef;\n}\n","import React, { useCallback, useContext } from \"react\";\nimport { useMountRef, type Callbacks } from \"./useMountRef\";\nimport { ElementObserverContext } from \"./useElementObserver\";\nimport type { ReactElementWithRef } from \"./types\";\n\ninterface ChildrenAndCallbacks<T, ChildType> extends Callbacks<T> {\n  children: ChildType;\n}\n\nfunction ObserveChildWithWrapperDiv({\n  children,\n  onMount,\n  onUnmount,\n}: ChildrenAndCallbacks<Element, React.ReactNode>): React.ReactElement {\n  const ref = useMountRef<HTMLDivElement>({ onMount, onUnmount });\n  return (\n    <div style={{ display: \"inherit\" }} ref={ref}>\n      {children}\n    </div>\n  );\n}\n\nfunction ObserveChild({\n  children,\n  onMount,\n  onUnmount,\n}: ChildrenAndCallbacks<Element, ReactElementWithRef>): React.ReactElement {\n  const newRef = useMountRef({ onMount, onUnmount });\n  return React.cloneElement(children, { ref: newRef });\n}\n\ntype Options =\n  | {\n      // If we're using a wrapper div...\n      useWrapperDiv: true;\n      // ... the children can be any ReactNode\n      children: React.ReactNode;\n      selector: string;\n    }\n  | {\n      // But if we're not using a wrapper div...\n      useWrapperDiv: false;\n      // The child must be a single ReactElement that takes a ref\n      children: ReactElementWithRef;\n      selector: string;\n    };\n\nexport function Observer({\n  children,\n  selector,\n  useWrapperDiv,\n}: Options): React.ReactElement {\n  const context = useContext(ElementObserverContext);\n  if (context == null) {\n    throw new Error(\"Observer context was null\");\n  }\n  const { mountedElements } = context;\n  const onMount = useCallback(\n    (ref: Element) => {\n      Array.from(ref.querySelectorAll(selector)).forEach((e) =>\n        mountedElements.add(e),\n      );\n    },\n    [selector, mountedElements],\n  );\n  const onUnmount = useCallback(\n    () => mountedElements.clear(),\n    [mountedElements],\n  );\n  return useWrapperDiv ? (\n    <ObserveChildWithWrapperDiv onMount={onMount} onUnmount={onUnmount}>\n      {children}\n    </ObserveChildWithWrapperDiv>\n  ) : (\n    <ObserveChild onMount={onMount} onUnmount={onUnmount}>\n      {children}\n    </ObserveChild>\n  );\n}\n","import React from \"react\";\nimport { useSet } from \"@uidotdev/usehooks\";\nimport { Observer } from \"./Observer\";\nimport type { ReactElementWithRef } from \"./types\";\n\nexport type { ReactElementWithRef };\n\ninterface Context {\n  mountedElements: Set<Element>;\n}\n\nexport const ElementObserverContext: React.Context<Context | null> =\n  React.createContext<Context | null>(null);\n\nexport type Options = ChildOptions & {\n  selector: string;\n};\n\nexport type ChildOptions =\n  | {\n      useWrapperDiv: false;\n      tree: ReactElementWithRef;\n    }\n  | {\n      useWrapperDiv: true;\n      tree: React.ReactNode;\n    }\n  | {\n      useWrapperDiv?: undefined;\n      tree: React.ReactNode;\n    };\n\n/**\n * Allows observing mount/unmount of elements that match a given selector in the\n * given React tree. Tree must be static: only the mounting of the tree itself\n * is monitored. If the tree's DOM is dynamically changed those mounts and\n * unmounts will not be detected.\n *\n * @param tree The React tree to observe.\n * @param onMount The callback that will be passed any elements in the tree that\n * match the given selector, as they mount.\n * @param onUnmount The callback that will be passed any elements in the tree\n * that match the given selector, as they unmount.\n * @param selector The css selector used to select which elements are observed.\n * @param useWrapperDiv If `true`, a 'div' will wrap the observed children. If\n * `false`, `children` must be a single child element that can take a ref (which\n * will be overwritten).\n * @returns A tuple of: (1) set of elements and (2) the observed tree to be\n * rendered.\n */\nexport function useElementObserver({\n  tree,\n  selector,\n  useWrapperDiv,\n}: Options): [Set<Element>, React.ReactElement] {\n  // TODO: Re-compute on every render to catch mutations? Add mutation observer\n  // to catch changes to grandchildren?\n  const mountedElements = useSet<Element>();\n  const observedTree = (\n    <ElementObserverContext.Provider value={{ mountedElements }}>\n      {useWrapperDiv == null || useWrapperDiv === true ? (\n        <Observer selector={selector} useWrapperDiv={true}>\n          {tree}\n        </Observer>\n      ) : (\n        <Observer selector={selector} useWrapperDiv={false}>\n          {tree}\n        </Observer>\n      )}\n    </ElementObserverContext.Provider>\n  );\n  return [mountedElements, observedTree];\n}\n"],"mappings":";;;;;AAOA,SAAgB,YAAe,EAC7B,SACA,WACa,EAAgB;CAC7B,MAAM,SAAS,OAAU,KAAK;AAC9B,WAAU,MAAM;EACd,MAAM,MAAM,OAAO;AACnB,MAAI,OAAO,KACT,QAAO,MAAY,CAAE;AAEvB,UAAQ,IAAI;AACZ,SAAO,MAAY,UAAU,IAAI;CAClC,GAAE;EAAC;EAAQ;EAAS;CAAU,EAAC;AAChC,QAAO;AACR;;;;ACZD,SAAS,2BAA2B,EAClC,UACA,SACA,WAC+C,EAAsB;CACrE,MAAM,MAAM,YAA4B;EAAE;EAAS;CAAW,EAAC;AAC/D,wBACE,IAAC;EAAI,OAAO,EAAE,SAAS,UAAW;EAAO;EACtC;GACG;AAET;AAED,SAAS,aAAa,EACpB,UACA,SACA,WACmD,EAAsB;CACzE,MAAM,SAAS,YAAY;EAAE;EAAS;CAAW,EAAC;AAClD,QAAO,MAAM,aAAa,UAAU,EAAE,KAAK,OAAQ,EAAC;AACrD;AAkBD,SAAgB,SAAS,EACvB,UACA,UACA,eACQ,EAAsB;CAC9B,MAAM,UAAU,WAAW,uBAAuB;AAClD,KAAI,WAAW,KACb,OAAM,IAAI,MAAM;CAElB,MAAM,EAAE,iBAAiB,GAAG;CAC5B,MAAM,UAAU,YACd,CAACA,QAAiB;AAChB,QAAM,KAAK,IAAI,iBAAiB,SAAS,CAAC,CAAC,QAAQ,CAAC,MAClD,gBAAgB,IAAI,EAAE,CACvB;CACF,GACD,CAAC,UAAU,eAAgB,EAC5B;CACD,MAAM,YAAY,YAChB,MAAM,gBAAgB,OAAO,EAC7B,CAAC,eAAgB,EAClB;AACD,QAAO,gCACL,IAAC;EAAoC;EAAoB;EACtD;GAC0B,mBAE7B,IAAC;EAAsB;EAAoB;EACxC;GACY;AAElB;;;;ACnED,MAAaC,yBACX,MAAM,cAA8B,KAAK;;;;;;;;;;;;;;;;;;;AAsC3C,SAAgB,mBAAmB,EACjC,MACA,UACA,eACQ,EAAsC;CAG9C,MAAM,kBAAkB,QAAiB;CACzC,MAAM,+BACJ,IAAC,uBAAuB;EAAS,OAAO,EAAE,gBAAiB;YACxD,iBAAiB,QAAQ,kBAAkB,uBAC1C,IAAC;GAAmB;GAAU,eAAe;aAC1C;IACQ,mBAEX,IAAC;GAAmB;GAAU,eAAe;aAC1C;IACQ;GAEmB;AAEpC,QAAO,CAAC,iBAAiB,YAAa;AACvC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altano/use-element-observer",
-  "version": "3.0.0",
+  "version": "4.0.1",
   "description": "Intersection-Observer-based Scroll Spy React Hook",
   "homepage": "https://github.com/altano/npm-packages/tree/main/packages/use-element-observer",
   "repository": {
@@ -20,6 +20,7 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist/**/*.js",
+    "dist/**/*.js.map",
     "dist/**/*.d.ts"
   ],
   "dependencies": {
@@ -30,18 +31,19 @@
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
-    "@vitest/coverage-v8": "^3.1.1",
+    "@vitest/coverage-v8": "^3.1.4",
     "depcheck": "^1.4.7",
     "eslint": "^9.23.0",
     "jsdom": "^26.0.0",
     "prettier": "^3.5.3",
     "react": "^19.1.0",
+    "tsdown": "^0.12.9",
     "typescript": "^5.8.2",
-    "vite": "^6.2.4",
-    "vitest": "^3.1.1",
-    "@altano/build-config": "0.0.0",
-    "@altano/tsconfig": "0.0.0",
-    "@altano/testing": "0.0.0"
+    "vite": "^6.2.6",
+    "vitest": "^3.1.4",
+    "@altano/build-config": "0.0.1",
+    "@altano/testing": "0.0.1",
+    "@altano/tsconfig": "0.0.1"
   },
   "peerDependencies": {
     "react": "19.x.x"
@@ -50,8 +52,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsup --config build-config/tsup.config.browser.ts",
-    "check:exports": "attw --pack . --ignore-rules=cjs-resolves-to-esm",
+    "build": "tsdown --config ../build-config/tsdown.config.browser.ts",
+    "check:exports": "attw --pack . --profile esm-only --quiet",
     "check:types:src": "tsc --noEmit",
     "check:types:test": "tsc --noEmit --project ./tests/tsconfig.json",
     "check:unused-dependencies": "depcheck",