feat: add useMutationObserver

Author: jquense

package.json

@@ -46,32 +46,32 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@4c/babel-preset": "^7.2.1",
-    "@4c/cli": "^1.0.3",
-    "@4c/jest-preset": "^1.4.3",
-    "@4c/rollout": "^2.0.3",
-    "@4c/tsconfig": "^0.3.0",
-    "@babel/cli": "^7.7.0",
-    "@babel/core": "^7.7.2",
+    "@4c/babel-preset": "^7.3.3",
+    "@4c/cli": "^2.0.1",
+    "@4c/jest-preset": "^1.5.0",
+    "@4c/rollout": "^2.1.2",
+    "@4c/tsconfig": "^0.3.1",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.7",
     "@babel/preset-typescript": "^7.7.2",
-    "@types/enzyme": "^3.10.3",
-    "@types/jest": "^24.0.23",
-    "@types/react": "^16.9.12",
-    "babel-jest": "^24.9.0",
+    "@types/enzyme": "^3.10.5",
+    "@types/jest": "^25.1.4",
+    "@types/react": "^16.9.23",
+    "babel-jest": "^25.1.0",
     "cherry-pick": "^0.5.0",
     "codecov": "^3.6.5",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "eslint": "^6.7.0",
-    "husky": "^3.1.0",
-    "jest": "^24.9.0",
-    "lint-staged": "^9.4.3",
+    "husky": "^4.2.3",
+    "jest": "^25.1.0",
+    "lint-staged": "^10.0.8",
     "mq-polyfill": "^1.1.8",
     "prettier": "^1.19.1",
-    "react": "^16.9.0",
-    "react-dom": "^16.12.0",
-    "rimraf": "^3.0.0",
-    "typescript": "^3.7.2"
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^3.8.3"
   },
   "readme": "ERROR: No README data found!",
   "_id": "@restart/hooks@0.3.20"

src/useMutationObserver.ts

@@ -0,0 +1,69 @@
+import useEffect from './useIsomorphicEffect'
+
+/**
+ * Efficiently observe size changes on an element. Depends on the `ResizeObserver` api,
+ * and polyfills are needed in older browsers.
+ *
+ * ```ts
+ * const [element, attachRef] = useCallbackRef(null);
+ *
+ * useMutationObserver(element, { subtree: true }, (records) => {
+ *
+ * });
+ *
+ * return (
+ *   <div ref={attachRef} />
+ * )
+ * ```
+ *
+ * @param element The DOM element to observe
+ * @param config The observer configuration
+ * @param callback A callback fired when a mutation occurs
+ */
+function useMutationObserver(
+  element: Element | null | undefined,
+  config: MutationObserverInit,
+  callback: MutationCallback,
+): void {
+  const {
+    attributeFilter,
+    attributeOldValue,
+    attributes,
+    characterData,
+    characterDataOldValue,
+    childList,
+    subtree,
+  } = config
+
+  useEffect(() => {
+    if (!element) return
+
+    const observer = new MutationObserver(callback)
+
+    observer.observe(element, {
+      attributeFilter,
+      attributeOldValue,
+      attributes,
+      characterData,
+      characterDataOldValue,
+      childList,
+      subtree,
+    })
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [
+    element,
+    callback,
+    attributeFilter?.join(','),
+    attributeOldValue,
+    attributes,
+    characterData,
+    characterDataOldValue,
+    childList,
+    subtree,
+  ])
+}
+
+export default useMutationObserver

test/useMutationObserver.test.tsx

@@ -0,0 +1,41 @@
+import useMutationObserver from '../src/useMutationObserver'
+import useCallbackRef from '../src/useCallbackRef'
+import React from 'react'
+import { mount } from 'enzyme'
+
+describe('useMutationObserver', () => {
+  it('should add a mutation observer', async () => {
+    const teardown = jest.fn()
+    const spy = jest.fn(() => teardown)
+
+    function Wrapper(props) {
+      const [el, attachRef] = useCallbackRef()
+
+      useMutationObserver(el, { attributes: true }, spy)
+
+      return <div ref={attachRef} {...props} />
+    }
+
+    const wrapper = mount(<Wrapper />)
+
+    expect(spy).toHaveBeenCalledTimes(0)
+
+    wrapper.setProps({ role: 'button' })
+
+    await Promise.resolve()
+
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    expect(spy).toHaveBeenCalledWith(
+      [
+        expect.objectContaining({
+          type: 'attributes',
+          attributeName: 'role',
+        }),
+      ],
+      expect.anything(),
+    )
+    // coverage on the teardown
+    wrapper.unmount()
+  })
+})