@altano/use-element-observer 1.0.5 → 1.0.7

package/{readme.md → README.md}

@@ -1,14 +1,12 @@
 # use-element-observer
 
-![Typed with TypeScript](https://flat.badgen.net/badge/icon/Typed?icon=typescript&label&labelColor=blue&color=555555)
+[![npm](https://badgen.net/npm/v/@altano/use-element-observer)](https://www.npmjs.com/package/@altano/use-element-observer) ![Typed with TypeScript](https://badgen.net/npm/types/@altano/use-element-observer) ![ESM only](https://badgen.net/badge/module/esm%20only?icon=js)
 
 React hook to faciliate observing the mount of elements in a React tree, by selector.
 
 ## Installation
 
-`npm i --save @altano/use-element-observer`
-
-<https://www.npmjs.com/package/@altano/use-element-observer>
+`npm install @altano/use-element-observer`
 
 ## Example
 

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useElementObserver";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,72 @@
+// src/useElementObserver.tsx
+import React, { useCallback, useContext, useEffect, useRef } from "react";
+import { useSet } from "@uidotdev/usehooks";
+import { jsx } from "react/jsx-runtime";
+var ElementObserverContext = React.createContext(null);
+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;
+}
+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 });
+  const child = React.Children.only(children);
+  return React.cloneElement(child, { 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]
+  );
+  const Component = useWrapperDiv ? ObserveChildWithWrapperDiv : ObserveChild;
+  return /* @__PURE__ */ jsx(Component, { onMount, onUnmount, children });
+}
+function useElementObserver({
+  tree,
+  selector,
+  useWrapperDiv = true
+}) {
+  const mountedElements = useSet();
+  const observedTree = /* @__PURE__ */ jsx(ElementObserverContext.Provider, { value: { mountedElements }, children: /* @__PURE__ */ jsx(Observer, { selector, useWrapperDiv, children: tree }) });
+  return [mountedElements, observedTree];
+}
+export {
+  useElementObserver
+};

package/dist/useElementObserver.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import React from "react";
 interface Options {
     selector: string;
@@ -20,8 +19,9 @@ interface Options {
  * @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) array of elements and (2) the observed tree to be
+ * @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 { useElementObserver };
+export declare function useElementObserver({ tree, selector, useWrapperDiv, }: Options): [Set<Element>, React.ReactElement];
+export {};
+//# sourceMappingURL=useElementObserver.d.ts.map

package/package.json

@@ -1,17 +1,15 @@
 {
   "name": "@altano/use-element-observer",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Intersection-Observer-based Scroll Spy React Hook",
-  "main": "dist/useElementObserver.js",
-  "types": "dist/useElementObserver.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "exports": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "dist/**/*"
+    "dist/**/*.js",
+    "dist/**/*.d.ts"
   ],
-  "scripts": {
-    "build": "rollup -c",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "start": "rollup -c --watch"
-  },
   "author": {
     "name": "Alan Norbauer",
     "email": "altano@gmail.com",
@@ -20,32 +18,39 @@
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
-    "url": "https://github.com/altano/npm-packages/tree/master/packages/use-element-observer"
+    "url": "https://github.com/altano/npm-packages",
+    "directory": "packages/use-element-observer"
+  },
+  "homepage": "https://github.com/altano/npm-packages/tree/main/packages/use-element-observer",
+  "dependencies": {
+    "@uidotdev/usehooks": "^2.4.1"
+  },
+  "peerDependencies": {
+    "react": "^18"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^11.0.2",
-    "@rollup/plugin-node-resolve": "^7.1.1",
-    "@rollup/plugin-typescript": "^3.0.0",
-    "@types/react": "^16.9.19",
-    "@typescript-eslint/eslint-plugin": "^2.25.0",
-    "@typescript-eslint/parser": "^2.25.0",
-    "@wessberg/rollup-plugin-ts": "^1.2.16",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-import-resolver-typescript": "^2.0.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-json": "^2.1.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^2.5.1",
-    "prettier": "^2.0.2",
-    "react": "^16",
-    "react-dom": "^16",
-    "react-use": "^13.27.0",
-    "rollup": "^1.31.0",
-    "tslib": "^1.11.1",
-    "typescript": "^3.8.3"
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "eslint": "^8.57.0",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.2",
+    "@altano/tsconfig": "0.0.0",
+    "eslint-config-altano": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm --onSuccess \"pnpm build:types\"",
+    "build:types": "tsc --emitDeclarationOnly --declaration",
+    "dev": "tsup src/index.tsx --watch --format esm",
+    "lint": "eslint src/**/*.ts*",
+    "lint:timing": "TIMING=1 eslint src/**/*.ts*",
+    "lint:fix": "TIMING=1 eslint src/**/*.ts* --fix",
+    "format": "prettier --check src",
+    "format:fix": "prettier --write src",
+    "clean": "rm -rf .turbo && rm -rf .tsbuildinfo && rm -rf node_modules && rm -rf dist"
   }
-}
+}

package/dist/useElementObserver.js

@@ -1,436 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = require('react');
-var React__default = _interopDefault(React);
-
-function unwrapExports (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
-
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
-
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
-***************************************************************************** */
-/* global Reflect, Promise */
-var extendStatics = function (d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) {
-            for (var p in b)
-                if (b.hasOwnProperty(p))
-                    d[p] = b[p];
-        };
-    return extendStatics(d, b);
-};
-function __extends(d, b) {
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-function __rest(s, e) {
-    var t = {};
-    for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-function __decorate(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-function __param(paramIndex, decorator) {
-    return function (target, key) { decorator(target, key, paramIndex); };
-}
-function __metadata(metadataKey, metadataValue) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-        return Reflect.metadata(metadataKey, metadataValue);
-}
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) {
-            try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            }
-        }
-        function rejected(value) {
-            try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            }
-        }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function () {
-            if (t[0] & 1)
-                throw t[1];
-            return t[1];
-        }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f)
-            throw new TypeError("Generator is already executing.");
-        while (_)
-            try {
-                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                    return t;
-                if (y = 0, t)
-                    op = [op[0] & 2, t.value];
-                switch (op[0]) {
-                    case 0:
-                    case 1:
-                        t = op;
-                        break;
-                    case 4:
-                        _.label++;
-                        return { value: op[1], done: false };
-                    case 5:
-                        _.label++;
-                        y = op[1];
-                        op = [0];
-                        continue;
-                    case 7:
-                        op = _.ops.pop();
-                        _.trys.pop();
-                        continue;
-                    default:
-                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                            _ = 0;
-                            continue;
-                        }
-                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                            _.label = op[1];
-                            break;
-                        }
-                        if (op[0] === 6 && _.label < t[1]) {
-                            _.label = t[1];
-                            t = op;
-                            break;
-                        }
-                        if (t && _.label < t[2]) {
-                            _.label = t[2];
-                            _.ops.push(op);
-                            break;
-                        }
-                        if (t[2])
-                            _.ops.pop();
-                        _.trys.pop();
-                        continue;
-                }
-                op = body.call(thisArg, _);
-            }
-            catch (e) {
-                op = [6, e];
-                y = 0;
-            }
-            finally {
-                f = t = 0;
-            }
-        if (op[0] & 5)
-            throw op[1];
-        return { value: op[0] ? op[1] : void 0, done: true };
-    }
-}
-function __exportStar(m, exports) {
-    for (var p in m)
-        if (!exports.hasOwnProperty(p))
-            exports[p] = m[p];
-}
-function __values(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m)
-        return m.call(o);
-    if (o && typeof o.length === "number")
-        return {
-            next: function () {
-                if (o && i >= o.length)
-                    o = void 0;
-                return { value: o && o[i++], done: !o };
-            }
-        };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-}
-function __read(o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m)
-        return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-            ar.push(r.value);
-    }
-    catch (error) {
-        e = { error: error };
-    }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"]))
-                m.call(i);
-        }
-        finally {
-            if (e)
-                throw e.error;
-        }
-    }
-    return ar;
-}
-function __spread() {
-    for (var ar = [], i = 0; i < arguments.length; i++)
-        ar = ar.concat(__read(arguments[i]));
-    return ar;
-}
-function __spreadArrays() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-        s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-}
-function __await(v) {
-    return this instanceof __await ? (this.v = v, this) : new __await(v);
-}
-function __asyncGenerator(thisArg, _arguments, generator) {
-    if (!Symbol.asyncIterator)
-        throw new TypeError("Symbol.asyncIterator is not defined.");
-    var g = generator.apply(thisArg, _arguments || []), i, q = [];
-    return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-    function verb(n) {
-        if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); };
-    }
-    function resume(n, v) {
-        try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        }
-    }
-    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-    function fulfill(value) { resume("next", value); }
-    function reject(value) { resume("throw", value); }
-    function settle(f, v) {
-        if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]);
-    }
-}
-function __asyncDelegator(o) {
-    var i, p;
-    return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-}
-function __asyncValues(o) {
-    if (!Symbol.asyncIterator)
-        throw new TypeError("Symbol.asyncIterator is not defined.");
-    var m = o[Symbol.asyncIterator], i;
-    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-}
-function __makeTemplateObject(cooked, raw) {
-    if (Object.defineProperty) {
-        Object.defineProperty(cooked, "raw", { value: raw });
-    }
-    else {
-        cooked.raw = raw;
-    }
-    return cooked;
-}
-function __importStar(mod) {
-    if (mod && mod.__esModule)
-        return mod;
-    var result = {};
-    if (mod != null)
-        for (var k in mod)
-            if (Object.hasOwnProperty.call(mod, k))
-                result[k] = mod[k];
-    result.default = mod;
-    return result;
-}
-function __importDefault(mod) {
-    return (mod && mod.__esModule) ? mod : { default: mod };
-}
-function __classPrivateFieldGet(receiver, privateMap) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
-    return privateMap.get(receiver);
-}
-function __classPrivateFieldSet(receiver, privateMap, value) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to set private field on non-instance");
-    }
-    privateMap.set(receiver, value);
-    return value;
-}
-
-var tslib_es6 = /*#__PURE__*/Object.freeze({
-	__proto__: null,
-	__extends: __extends,
-	get __assign () { return __assign; },
-	__rest: __rest,
-	__decorate: __decorate,
-	__param: __param,
-	__metadata: __metadata,
-	__awaiter: __awaiter,
-	__generator: __generator,
-	__exportStar: __exportStar,
-	__values: __values,
-	__read: __read,
-	__spread: __spread,
-	__spreadArrays: __spreadArrays,
-	__await: __await,
-	__asyncGenerator: __asyncGenerator,
-	__asyncDelegator: __asyncDelegator,
-	__asyncValues: __asyncValues,
-	__makeTemplateObject: __makeTemplateObject,
-	__importStar: __importStar,
-	__importDefault: __importDefault,
-	__classPrivateFieldGet: __classPrivateFieldGet,
-	__classPrivateFieldSet: __classPrivateFieldSet
-});
-
-var useSet_1 = createCommonjsModule(function (module, exports) {
-Object.defineProperty(exports, "__esModule", { value: true });
-
-/* eslint-disable */
-
-var useSet = function (initialSet) {
-    if (initialSet === void 0) {
-        initialSet = new Set();
-    }
-    var _a = React__default.useState(initialSet), set = _a[0], setSet = _a[1];
-    var stableActions = React__default.useMemo(function () {
-        var add = function (item) { return setSet(function (prevSet) { return new Set(tslib_es6.__spreadArrays(Array.from(prevSet), [item])); }); };
-        var remove = function (item) { return setSet(function (prevSet) { return new Set(Array.from(prevSet).filter(function (i) { return i !== item; })); }); };
-        var toggle = function (item) {
-            return setSet(function (prevSet) {
-                return prevSet.has(item)
-                    ? new Set(Array.from(prevSet).filter(function (i) { return i !== item; }))
-                    : new Set(tslib_es6.__spreadArrays(Array.from(prevSet), [item]));
-            });
-        };
-        return { add: add, remove: remove, toggle: toggle, reset: function () { return setSet(initialSet); } };
-    }, [setSet]);
-    var utils = tslib_es6.__assign({ has: React__default.useCallback(function (item) { return set.has(item); }, [set]) }, stableActions);
-    return [set, utils];
-};
-exports.default = useSet;
-});
-
-var useSet = unwrapExports(useSet_1);
-
-const ElementObserverContext = React__default.createContext(null);
-function useMountRef({ onMount, onUnmount }) {
-    const newRef = React.useRef(null);
-    React.useEffect(() => {
-        const ref = newRef.current;
-        if (ref == null) {
-            return () => { };
-        }
-        onMount(ref);
-        return () => onUnmount(ref);
-    }, [newRef, onMount, onUnmount]);
-    return newRef;
-}
-function ObserveChildWithWrapperDiv({ children, onMount, onUnmount, }) {
-    const ref = useMountRef({ onMount, onUnmount });
-    return (React__default.createElement("div", { style: { display: "inherit" }, ref: ref }, children));
-}
-function ObserveChild({ children, onMount, onUnmount, }) {
-    const newRef = useMountRef({ onMount, onUnmount });
-    const child = React__default.Children.only(children);
-    return React__default.cloneElement(child, { ref: newRef });
-}
-function Observer({ children, selector, useWrapperDiv, }) {
-    const context = React.useContext(ElementObserverContext);
-    if (context == null) {
-        throw new Error("Observer context was null");
-    }
-    const { methods } = context;
-    const { add, reset } = methods;
-    const onMount = React.useCallback((ref) => {
-        Array.from(ref.querySelectorAll(selector)).forEach(add);
-    }, [selector, add]);
-    const onUnmount = React.useCallback(() => reset, [reset]);
-    const Component = useWrapperDiv ? ObserveChildWithWrapperDiv : ObserveChild;
-    return (React__default.createElement(Component, { onMount: onMount, onUnmount: onUnmount }, children));
-}
-/**
- * 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) array of elements and (2) the observed tree to be
- * rendered.
- */
-function useElementObserver({ tree, selector, useWrapperDiv = true, }) {
-    // @TODO Add mutation observer to catch changes to grandchildren?
-    const [mountedElements, methods] = useSet();
-    const observedTree = (React__default.createElement(ElementObserverContext.Provider, { value: { mountedElements, methods } },
-        React__default.createElement(Observer, { selector: selector, useWrapperDiv: useWrapperDiv }, tree)));
-    return [mountedElements, observedTree];
-}
-
-exports.useElementObserver = useElementObserver;