fix: Removed resize-observer-polyfill in favour of @juggle/resize-observer.

The latter is better maintained, and does not include now-unnecessary
ResizeObserver type definitions that also conflicts with newer Typescript versions.
I consider this a breaking change because there may be unexpected differences between the polyfills.

Also updated all dependencies.
Removed the ResizeObserver type definition, as TS now includes it.

Author: ZeeCoder

.github/workflows/testing.yml

@@ -20,9 +20,6 @@ jobs:
           node-version: '12.x'
       - name: Installing Dependencies
         run: yarn install --frozen-lockfile
-      - name: Removing Conflicting TypeScript ResizeObserver definition
-        # Without this, running `tsc -p tests` fails, not sure how else to fix it.
-        run: rm node_modules/resize-observer-polyfill/src/index.d.ts
       - name: Checking File Size
         run: yarn check:size
       - name: Checking Types

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install lint-staged

README.md

@@ -241,13 +241,32 @@ By default the library provides transpiled ES5 modules in CJS / ESM module forma
 Polyfilling is recommended to be done in the host app, and not within imported
 libraries, as that way consumers have control over the exact polyfills being used.
 
-That said, there's a [polyfilled](https://github.com/que-etc/resize-observer-polyfill)
-CJS module that can be used for convenience (Not affecting globals):
+That said, there's a [polyfilled](https://github.com/juggle/resize-observer)
+CJS module that can be used for convenience:
 
-```js
+```ts
 import useResizeObserver from "use-resize-observer/polyfilled";
 ```
 
+Note that using the above will use the polyfill, [even if the native ResizeObserver is available](https://github.com/juggle/resize-observer#basic-usage).
+
+To use the polyfill as a fallback instead only when the native RO is unavailable, you can polyfill yourself instead,
+either in your app's entry file, or you could create a local useResizeObserver module, like so:
+
+```ts
+// useResizeObserver.ts
+import { ResizeObserver } from "@juggle/resize-observer";
+import useResizeObserver from "use-resize-observer";
+
+if (!window.ResizeObserver) {
+  window.ResizeObserver = ResizeObserver;
+}
+
+export default useResizeObserver;
+```
+
+The same technique can also be used to provide any of your preferred ResizeObserver polyfills out there.
+
 ## Related
 
 - [@zeecoder/container-query](https://github.com/ZeeCoder/container-query)

karma.conf.js

@@ -21,7 +21,7 @@ module.exports = function (karmaConfig) {
 
   const config = {
     basePath: ".",
-    frameworks: ["jasmine"],
+    frameworks: ["jasmine", "webpack"],
     files: [
       {
         pattern: testFilePattern,

package.json

@@ -42,12 +42,8 @@
     "karma:watch": "karma start",
     "prepublish": "yarn build",
     "test:bs:modern": "yarn karma:run --useBrowserStack",
-    "test:bs:ie": "yarn karma:run --useBrowserStack --runIeTests"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    "test:bs:ie": "yarn karma:run --useBrowserStack --runIeTests",
+    "prepare": "husky install"
   },
   "lint-staged": {
     "*.{js,ts,md}": [
@@ -81,35 +77,35 @@
     "@semantic-release/github": "^7.1.1",
     "@semantic-release/npm": "^7.0.6",
     "@semantic-release/release-notes-generator": "^9.0.1",
-    "@size-limit/preset-small-lib": "^4.4.5",
-    "@testing-library/react": "^11.0.4",
-    "@types/karma": "^5.0.0",
-    "@types/karma-jasmine": "^3.1.0",
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.6",
+    "@size-limit/preset-small-lib": "^5.0.1",
+    "@testing-library/react": "^12.0.0",
+    "@types/karma": "^6.3.1",
+    "@types/karma-jasmine": "^4.0.1",
+    "@types/react": "^17.0.15",
+    "@types/react-dom": "^17.0.9",
     "babel-loader": "^8.1.0",
-    "delay": "^4.1.0",
-    "husky": "^4.2.5",
-    "karma": "^5.0.1",
+    "delay": "^5.0.0",
+    "husky": "^7.0.0",
+    "karma": "^6.3.4",
     "karma-browserstack-launcher": "^1.6.0",
     "karma-chrome-launcher": "^3.0.0",
-    "karma-firefox-launcher": "^1.3.0",
+    "karma-firefox-launcher": "^2.1.1",
     "karma-jasmine": "^4.0.1",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.32",
-    "karma-webpack": "^4.0.2",
-    "lint-staged": "^10.1.3",
+    "karma-webpack": "^5.0.0",
+    "lint-staged": "^11.1.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
-    "react": "^16.9.0",
+    "react": "^17.0.2",
     "react-app-polyfill": "^2.0.0",
-    "react-dom": "^16.9.0",
+    "react-dom": "^17.0.2",
     "rollup": "^2.6.1",
     "semantic-release": "^17.2.2",
-    "size-limit": "^4.4.5",
+    "size-limit": "^5.0.1",
     "typescript": "^4.0.3"
   },
   "dependencies": {
-    "resize-observer-polyfill": "^1.5.1"
+    "@juggle/resize-observer": "^3.3.1"
   }
 }

rollup.config.js

@@ -25,10 +25,10 @@ const getConfig = ({ polyfill = false } = {}) => {
         exports: "default",
       },
     ];
-    config.external.push("resize-observer-polyfill");
+    config.external.push("@juggle/resize-observer");
     config.plugins.push(
       inject({
-        ResizeObserver: "resize-observer-polyfill",
+        ResizeObserver: ["@juggle/resize-observer", "ResizeObserver"],
       })
     );
   } else {

src/ResizeObserver.d.ts

@@ -7,9 +7,7 @@ import {
   render,
 } from "../utils";
 import useResizeObserver from "../../polyfilled";
-import delay from "../utils/delay";
-// @ts-ignore
-import ROP from "resize-observer-polyfill";
+import { ResizeObserver as ROP } from "@juggle/resize-observer";
 import awaitNextFrame from "../utils/awaitNextFrame";
 
 /**