@altano/use-element-observer 4.0.2 → 4.0.4

package/dist/index.d.ts

@@ -1,19 +1,15 @@
 import React from "react";
-
-//#region src/types.d.ts
 type ReactElementWithRef = React.ReactElement<{
   ref: React.Ref<Element>;
 }>;
-//#endregion
-//#region src/useElementObserver.d.ts
 interface Context {
   mountedElements: Set<Element>;
 }
-declare const ElementObserverContext: React.Context<Context | null>;
-type Options = ChildOptions & {
+export declare const ElementObserverContext: React.Context<Context | null>;
+export type Options = ChildOptions & {
   selector: string;
 };
-type ChildOptions = {
+export type ChildOptions = {
   useWrapperDiv: false;
   tree: ReactElementWithRef;
 } | {
@@ -24,28 +20,23 @@ type ChildOptions = {
   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];
-//#endregion
-export { ChildOptions, ElementObserverContext, 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.
+ */
+export declare function useElementObserver({ tree, selector, useWrapperDiv }: Options): [Set<Element>, React.ReactElement];
+export type { ReactElementWithRef };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -2,7 +2,7 @@ import React, { useCallback, useContext, useEffect, useRef } from "react";
 import { useSet } from "@uidotdev/usehooks";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/useMountRef.tsx
+// src/useMountRef.tsx
 function useMountRef({ onMount, onUnmount }) {
 	const newRef = useRef(null);
 	useEffect(() => {
@@ -18,15 +18,15 @@ function useMountRef({ onMount, onUnmount }) {
 	return newRef;
 }
 
-//#endregion
-//#region src/Observer.tsx
+// src/Observer.tsx
 function ObserveChildWithWrapperDiv({ children, onMount, onUnmount }) {
+	const ref = useMountRef({
+		onMount,
+		onUnmount
+	});
 	return /* @__PURE__ */ jsx("div", {
 		style: { display: "inherit" },
-		ref: useMountRef({
-			onMount,
-			onUnmount
-		}),
+		ref,
 		children
 	});
 }
@@ -56,8 +56,7 @@ function Observer({ children, selector, useWrapperDiv }) {
 	});
 }
 
-//#endregion
-//#region src/useElementObserver.tsx
+// src/useElementObserver.tsx
 const ElementObserverContext = React.createContext(null);
 /**
 * Allows observing mount/unmount of elements that match a given selector in the
@@ -93,6 +92,5 @@ function useElementObserver({ tree, selector, useWrapperDiv }) {
 	})];
 }
 
-//#endregion
 export { ElementObserverContext, useElementObserver };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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,aAC6B;CAC7B,MAAM,SAAS,OAAU,KAAK;AAC9B,iBAAgB;EACd,MAAM,MAAM,OAAO;AACnB,MAAI,OAAO,KACT,cAAmB;AAErB,UAAQ,IAAI;AACZ,eAAmB,UAAU,IAAI;IAChC;EAAC;EAAQ;EAAS;EAAU,CAAC;AAChC,QAAO;;;;;ACXT,SAAS,2BAA2B,EAClC,UACA,SACA,aACqE;AAErE,QACE,oBAAC,OAAD;EAAK,OAAO,EAAE,SAAS,WAAW;EAAE,KAF1B,YAA4B;GAAE;GAAS;GAAW,CAAC;EAG1D;EACG;;AAIV,SAAS,aAAa,EACpB,UACA,SACA,aACyE;CACzE,MAAM,SAAS,YAAY;EAAE;EAAS;EAAW,CAAC;AAClD,QAAO,MAAM,aAAa,UAAU,EAAE,KAAK,QAAQ,CAAC;;AAmBtD,SAAgB,SAAS,EACvB,UACA,UACA,iBAC8B;CAC9B,MAAM,UAAU,WAAW,uBAAuB;AAClD,KAAI,WAAW,KACb,OAAM,IAAI,MAAM,4BAA4B;CAE9C,MAAM,EAAE,oBAAoB;CAC5B,MAAM,UAAU,aACb,QAAiB;AAChB,QAAM,KAAK,IAAI,iBAAiB,SAAS,CAAC,CAAC,SAAS,MAClD,gBAAgB,IAAI,EAAE,CACvB;IAEH,CAAC,UAAU,gBAAgB,CAC5B;CACD,MAAM,YAAY,kBACV,gBAAgB,OAAO,EAC7B,CAAC,gBAAgB,CAClB;AACD,QAAO,gBACL,oBAAC,4BAAD;EAAqC;EAAoB;EACtD;EAC0B,IAE7B,oBAAC,cAAD;EAAuB;EAAoB;EACxC;EACY;;;;;ACjEnB,MAAa,yBACX,MAAM,cAA8B,KAAK;;;;;;;;;;;;;;;;;;;AAsC3C,SAAgB,mBAAmB,EACjC,MACA,UACA,iBAC8C;CAG9C,MAAM,kBAAkB,QAAiB;AAczC,QAAO,CAAC,iBAZN,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO,EAAE,iBAAiB;YACxD,iBAAiB,QAAQ,kBAAkB,OAC1C,oBAAC,UAAD;GAAoB;GAAU,eAAe;aAC1C;GACQ,IAEX,oBAAC,UAAD;GAAoB;GAAU,eAAe;aAC1C;GACQ;EAEmB,EAEE"}
+{"version":3,"file":"index.js","names":[],"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,aAC6B;CAC7B,MAAM,SAAS,OAAU,IAAI;CAC7B,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,OAAO,MACT,aAAmB,CAAC;EAEtB,QAAQ,GAAG;EACX,aAAmB,UAAU,GAAG;CAClC,GAAG;EAAC;EAAQ;EAAS;CAAS,CAAC;CAC/B,OAAO;AACT;;;ACZA,SAAS,2BAA2B,EAClC,UACA,SACA,aACqE;CACrE,MAAM,MAAM,YAA4B;EAAE;EAAS;CAAU,CAAC;CAC9D,OACE,oBAAC,OAAD;EAAK,OAAO,EAAE,SAAS,UAAU;EAAQ;EACtC;CACE;AAET;AAEA,SAAS,aAAa,EACpB,UACA,SACA,aACyE;CACzE,MAAM,SAAS,YAAY;EAAE;EAAS;CAAU,CAAC;CACjD,OAAO,MAAM,aAAa,UAAU,EAAE,KAAK,OAAO,CAAC;AACrD;AAkBA,SAAgB,SAAS,EACvB,UACA,UACA,iBAC8B;CAC9B,MAAM,UAAU,WAAW,sBAAsB;CACjD,IAAI,WAAW,MACb,MAAM,IAAI,MAAM,2BAA2B;CAE7C,MAAM,EAAE,oBAAoB;CAC5B,MAAM,UAAU,aACb,QAAiB;EAChB,MAAM,KAAK,IAAI,iBAAiB,QAAQ,CAAC,CAAC,CAAC,SAAS,MAClD,gBAAgB,IAAI,CAAC,CACvB;CACF,GACA,CAAC,UAAU,eAAe,CAC5B;CACA,MAAM,YAAY,kBACV,gBAAgB,MAAM,GAC5B,CAAC,eAAe,CAClB;CACA,OAAO,gBACL,oBAAC,4BAAD;EAAqC;EAAoB;EACtD;CACyB,KAE5B,oBAAC,cAAD;EAAuB;EAAoB;EACxC;CACW;AAElB;;;ACnEA,MAAa,yBACX,MAAM,cAA8B,IAAI;;;;;;;;;;;;;;;;;;;AAsC1C,SAAgB,mBAAmB,EACjC,MACA,UACA,iBAC8C;CAG9C,MAAM,kBAAkB,OAAgB;CAcxC,OAAO,CAAC,iBAAiB,oBAZtB,uBAAuB,UAAxB;EAAiC,OAAO,EAAE,gBAAgB;YACvD,iBAAiB,QAAQ,kBAAkB,OAC1C,oBAAC,UAAD;GAAoB;GAAU,eAAe;aAC1C;EACO,KAEV,oBAAC,UAAD;GAAoB;GAAU,eAAe;aAC1C;EACO;CAEmB,CAEC,CAAC;AACvC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altano/use-element-observer",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "Intersection-Observer-based Scroll Spy React Hook",
   "homepage": "https://github.com/altano/npm-packages/tree/main/packages/use-element-observer",
   "repository": {
@@ -11,7 +11,7 @@
   "license": "ISC",
   "author": {
     "name": "Alan Norbauer",
-    "email": "altano@gmail.com",
+    "email": "alan@norbauer.com",
     "url": "https://alan.norbauer.com"
   },
   "sideEffects": false,
@@ -27,20 +27,20 @@
     "@uidotdev/usehooks": "^2.4.1"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.18.2",
-    "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.10",
-    "@types/react-dom": "^19.2.3",
-    "@vitest/coverage-v8": "^4.1.0",
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitest/coverage-v8": "^5.1.0",
     "depcheck": "^1.4.7",
-    "eslint": "^9.39.4",
-    "jsdom": "^26.1.0",
-    "prettier": "^3.8.1",
-    "react": "^19.2.4",
-    "tsdown": "^0.21.4",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vitest": "^4.1.0",
+    "eslint": "^10.14.0",
+    "jsdom": "^30.1.3",
+    "prettier": "3.9.10",
+    "react": "^19.3.1",
+    "tsdown": "^0.23.5",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.5",
+    "vitest": "^5.1.0",
     "@altano/build-config": "0.0.1",
     "@altano/testing": "0.0.1",
     "@altano/tsconfig": "0.0.1"
@@ -52,15 +52,15 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsdown --config-loader unrun --config ../build-config/tsdown.config.browser.ts",
+    "build": "tsdown",
     "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",
     "clean": "rm -rf .turbo && rm -rf .tsbuildinfo && rm -rf node_modules && rm -rf dist",
     "dev": "pnpm run build --watch",
-    "format": "prettier --check src",
-    "format:fix": "prettier --write src",
+    "format": "prettier --check .",
+    "format:fix": "prettier --write .",
     "lint": "eslint",
     "lint:fix": "TIMING=1 pnpm lint --fix",
     "lint:timing": "TIMING=1 pnpm lint",