@altano/use-element-observer 4.0.1 → 4.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/index.js +6 -8
- package/dist/index.js.map +1 -1
- package/package.json +15 -15
package/dist/index.d.ts
CHANGED
|
@@ -47,5 +47,5 @@ declare function useElementObserver({
|
|
|
47
47
|
useWrapperDiv
|
|
48
48
|
}: Options): [Set<Element>, React.ReactElement];
|
|
49
49
|
//#endregion
|
|
50
|
-
export { ChildOptions, ElementObserverContext, Options, ReactElementWithRef, useElementObserver };
|
|
50
|
+
export { ChildOptions, ElementObserverContext, Options, type ReactElementWithRef, useElementObserver };
|
|
51
51
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.js
CHANGED
|
@@ -21,13 +21,12 @@ function useMountRef({ onMount, onUnmount }) {
|
|
|
21
21
|
//#endregion
|
|
22
22
|
//#region src/Observer.tsx
|
|
23
23
|
function ObserveChildWithWrapperDiv({ children, onMount, onUnmount }) {
|
|
24
|
-
const ref = useMountRef({
|
|
25
|
-
onMount,
|
|
26
|
-
onUnmount
|
|
27
|
-
});
|
|
28
24
|
return /* @__PURE__ */ jsx("div", {
|
|
29
25
|
style: { display: "inherit" },
|
|
30
|
-
ref
|
|
26
|
+
ref: useMountRef({
|
|
27
|
+
onMount,
|
|
28
|
+
onUnmount
|
|
29
|
+
}),
|
|
31
30
|
children
|
|
32
31
|
});
|
|
33
32
|
}
|
|
@@ -80,7 +79,7 @@ const ElementObserverContext = React.createContext(null);
|
|
|
80
79
|
*/
|
|
81
80
|
function useElementObserver({ tree, selector, useWrapperDiv }) {
|
|
82
81
|
const mountedElements = useSet();
|
|
83
|
-
|
|
82
|
+
return [mountedElements, /* @__PURE__ */ jsx(ElementObserverContext.Provider, {
|
|
84
83
|
value: { mountedElements },
|
|
85
84
|
children: useWrapperDiv == null || useWrapperDiv === true ? /* @__PURE__ */ jsx(Observer, {
|
|
86
85
|
selector,
|
|
@@ -91,8 +90,7 @@ function useElementObserver({ tree, selector, useWrapperDiv }) {
|
|
|
91
90
|
useWrapperDiv: false,
|
|
92
91
|
children: tree
|
|
93
92
|
})
|
|
94
|
-
});
|
|
95
|
-
return [mountedElements, observedTree];
|
|
93
|
+
})];
|
|
96
94
|
}
|
|
97
95
|
|
|
98
96
|
//#endregion
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[
|
|
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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@altano/use-element-observer",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.2",
|
|
4
4
|
"description": "Intersection-Observer-based Scroll Spy React Hook",
|
|
5
5
|
"homepage": "https://github.com/altano/npm-packages/tree/main/packages/use-element-observer",
|
|
6
6
|
"repository": {
|
|
@@ -27,20 +27,20 @@
|
|
|
27
27
|
"@uidotdev/usehooks": "^2.4.1"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@arethetypeswrong/cli": "^0.
|
|
31
|
-
"@testing-library/react": "^16.2
|
|
32
|
-
"@types/react": "^19.
|
|
33
|
-
"@types/react-dom": "^19.
|
|
34
|
-
"@vitest/coverage-v8": "^
|
|
30
|
+
"@arethetypeswrong/cli": "^0.18.2",
|
|
31
|
+
"@testing-library/react": "^16.3.2",
|
|
32
|
+
"@types/react": "^19.2.10",
|
|
33
|
+
"@types/react-dom": "^19.2.3",
|
|
34
|
+
"@vitest/coverage-v8": "^4.1.0",
|
|
35
35
|
"depcheck": "^1.4.7",
|
|
36
|
-
"eslint": "^9.
|
|
37
|
-
"jsdom": "^26.
|
|
38
|
-
"prettier": "^3.
|
|
39
|
-
"react": "^19.
|
|
40
|
-
"tsdown": "^0.
|
|
41
|
-
"typescript": "^5.
|
|
42
|
-
"vite": "^
|
|
43
|
-
"vitest": "^
|
|
36
|
+
"eslint": "^9.39.4",
|
|
37
|
+
"jsdom": "^26.1.0",
|
|
38
|
+
"prettier": "^3.8.1",
|
|
39
|
+
"react": "^19.2.4",
|
|
40
|
+
"tsdown": "^0.21.4",
|
|
41
|
+
"typescript": "^5.9.3",
|
|
42
|
+
"vite": "^7.3.1",
|
|
43
|
+
"vitest": "^4.1.0",
|
|
44
44
|
"@altano/build-config": "0.0.1",
|
|
45
45
|
"@altano/testing": "0.0.1",
|
|
46
46
|
"@altano/tsconfig": "0.0.1"
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"access": "public"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
|
-
"build": "tsdown --config ../build-config/tsdown.config.browser.ts",
|
|
55
|
+
"build": "tsdown --config-loader unrun --config ../build-config/tsdown.config.browser.ts",
|
|
56
56
|
"check:exports": "attw --pack . --profile esm-only --quiet",
|
|
57
57
|
"check:types:src": "tsc --noEmit",
|
|
58
58
|
"check:types:test": "tsc --noEmit --project ./tests/tsconfig.json",
|