@altano/use-element-observer 2.0.0 → 2.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 CHANGED
@@ -1,2 +1,32 @@
1
- export * from "./useElementObserver";
2
- //# sourceMappingURL=index.d.ts.map
1
+ import React from 'react';
2
+
3
+ interface Context {
4
+ mountedElements: Set<Element>;
5
+ }
6
+ declare const ElementObserverContext: React.Context<Context | null>;
7
+ interface Options {
8
+ selector: string;
9
+ tree: React.ReactNode;
10
+ useWrapperDiv?: boolean | undefined;
11
+ }
12
+ /**
13
+ * Allows observing mount/unmount of elements that match a given selector in the
14
+ * given React tree. Tree must be static: only the mounting of the tree itself
15
+ * is monitored. If the tree's DOM is dynamically changed those mounts and
16
+ * unmounts will not be detected.
17
+ *
18
+ * @param tree The React tree to observe.
19
+ * @param onMount The callback that will be passed any elements in the tree that
20
+ * match the given selector, as they mount.
21
+ * @param onUnmount The callback that will be passed any elements in the tree
22
+ * that match the given selector, as they unmount.
23
+ * @param selector The css selector used to select which elements are observed.
24
+ * @param useWrapperDiv If `true`, a 'div' will wrap the observed children. If
25
+ * `false`, `children` must be a single child element that can take a ref (which
26
+ * will be overwritten).
27
+ * @returns A tuple of: (1) set of elements and (2) the observed tree to be
28
+ * rendered.
29
+ */
30
+ declare function useElementObserver({ tree, selector, useWrapperDiv, }: Options): [Set<Element>, React.ReactElement];
31
+
32
+ export { ElementObserverContext, type Options, useElementObserver };
package/package.json CHANGED
@@ -1,65 +1,70 @@
1
1
  {
2
2
  "name": "@altano/use-element-observer",
3
- "version": "2.0.0",
3
+ "version": "2.0.2",
4
4
  "description": "Intersection-Observer-based Scroll Spy React Hook",
5
- "type": "module",
5
+ "homepage": "https://github.com/altano/npm-packages/tree/main/packages/use-element-observer",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/altano/npm-packages",
9
+ "directory": "packages/use-element-observer"
10
+ },
11
+ "license": "ISC",
12
+ "author": {
13
+ "name": "Alan Norbauer",
14
+ "email": "altano@gmail.com",
15
+ "url": "https://alan.norbauer.com"
16
+ },
6
17
  "sideEffects": false,
18
+ "type": "module",
7
19
  "exports": "./dist/index.js",
8
20
  "types": "./dist/index.d.ts",
9
21
  "files": [
10
22
  "dist/**/*.js",
11
23
  "dist/**/*.d.ts"
12
24
  ],
13
- "author": {
14
- "name": "Alan Norbauer",
15
- "email": "altano@gmail.com",
16
- "url": "https://alan.norbauer.com"
17
- },
18
- "license": "ISC",
19
- "repository": {
20
- "type": "git",
21
- "url": "https://github.com/altano/npm-packages",
22
- "directory": "packages/use-element-observer"
23
- },
24
- "homepage": "https://github.com/altano/npm-packages/tree/main/packages/use-element-observer",
25
25
  "dependencies": {
26
26
  "@uidotdev/usehooks": "^2.4.1"
27
27
  },
28
- "peerDependencies": {
29
- "react": "^18"
30
- },
31
28
  "devDependencies": {
29
+ "@arethetypeswrong/cli": "^0.15.4",
32
30
  "@testing-library/jest-dom": "^6.4.2",
33
31
  "@testing-library/react": "^14.2.2",
34
32
  "@types/react": "^18.2.64",
35
33
  "@types/react-dom": "^18.2.21",
36
- "@vitejs/plugin-react": "^4.2.1",
37
- "@vitest/coverage-v8": "^1.4.0",
38
- "eslint": "^8.57.0",
39
- "jsdom": "^24.0.0",
40
- "prettier": "^3.2.5",
41
- "react": "^18.2.0",
42
- "typescript": "^5.4.2",
43
- "vitest": "^1.4.0",
34
+ "@vitest/coverage-v8": "^3.0.9",
35
+ "depcheck": "^1.4.7",
36
+ "eslint": "^9.22.0",
37
+ "jsdom": "^25.0.1",
38
+ "prettier": "^3.3.3",
39
+ "react": "^18.3.1",
40
+ "typescript": "^5.8.2",
41
+ "vite": "^6.2.3",
42
+ "vitest": "^3.0.9",
43
+ "@altano/build-config": "0.0.0",
44
+ "@altano/testing": "0.0.0",
44
45
  "@altano/tsconfig": "0.0.0",
45
- "eslint-config-altano": "0.0.0"
46
+ "@altano/vitest-plugins": "1.0.0"
47
+ },
48
+ "peerDependencies": {
49
+ "react": "18.x.x"
46
50
  },
47
51
  "publishConfig": {
48
52
  "access": "public"
49
53
  },
50
54
  "scripts": {
51
55
  "build": "tsup --config build-config/tsup.config.browser.ts",
52
- "build:types": "tsc --project tsconfig.declarations.json",
56
+ "check:exports": "attw --pack . --ignore-rules=cjs-resolves-to-esm",
57
+ "check:types:src": "tsc --noEmit",
58
+ "check:types:test": "tsc --noEmit --project ./tests/tsconfig.json",
59
+ "check:unused-dependencies": "depcheck",
53
60
  "clean": "rm -rf .turbo && rm -rf .tsbuildinfo && rm -rf node_modules && rm -rf dist",
54
61
  "dev": "pnpm run build --watch",
55
62
  "format": "prettier --check src",
56
63
  "format:fix": "prettier --write src",
57
- "lint": "eslint package.json src/**/*.ts*",
64
+ "lint": "eslint",
58
65
  "lint:fix": "TIMING=1 pnpm lint --fix",
59
66
  "lint:timing": "TIMING=1 pnpm lint",
60
67
  "test:unit": "vitest --run",
61
- "test:unit:watch": "vitest",
62
- "typecheck:src": "tsc --noEmit",
63
- "typecheck:test": "tsc --noEmit --project ./tests/tsconfig.json"
68
+ "test:unit:watch": "vitest"
64
69
  }
65
70
  }
@@ -1,7 +0,0 @@
1
- import React from "react";
2
- export declare function Observer({ children, selector, useWrapperDiv, }: {
3
- children: React.ReactNode;
4
- selector: string;
5
- useWrapperDiv: boolean;
6
- }): React.ReactElement;
7
- //# sourceMappingURL=Observer.d.ts.map
@@ -1,31 +0,0 @@
1
- import React from "react";
2
- interface Context {
3
- mountedElements: Set<Element>;
4
- }
5
- export declare const ElementObserverContext: React.Context<Context | null>;
6
- export interface Options {
7
- selector: string;
8
- tree: React.ReactNode;
9
- useWrapperDiv?: boolean;
10
- }
11
- /**
12
- * Allows observing mount/unmount of elements that match a given selector in the
13
- * given React tree. Tree must be static: only the mounting of the tree itself
14
- * is monitored. If the tree's DOM is dynamically changed those mounts and
15
- * unmounts will not be detected.
16
- *
17
- * @param tree The React tree to observe.
18
- * @param onMount The callback that will be passed any elements in the tree that
19
- * match the given selector, as they mount.
20
- * @param onUnmount The callback that will be passed any elements in the tree
21
- * that match the given selector, as they unmount.
22
- * @param selector The css selector used to select which elements are observed.
23
- * @param useWrapperDiv If `true`, a 'div' will wrap the observed children. If
24
- * `false`, `children` must be a single child element that can take a ref (which
25
- * will be overwritten).
26
- * @returns A tuple of: (1) set of elements and (2) the observed tree to be
27
- * rendered.
28
- */
29
- export declare function useElementObserver({ tree, selector, useWrapperDiv, }: Options): [Set<Element>, React.ReactElement];
30
- export {};
31
- //# sourceMappingURL=useElementObserver.d.ts.map
@@ -1,7 +0,0 @@
1
- import React from "react";
2
- export interface Callbacks<T> {
3
- onMount: (e: T) => void;
4
- onUnmount: (e: T) => void;
5
- }
6
- export declare function useMountRef<T>({ onMount, onUnmount, }: Callbacks<T>): React.Ref<T>;
7
- //# sourceMappingURL=useMountRef.d.ts.map