feat: remove resize observer ponyfill (#159)

BREAKING CHANGE: removes the resize observer ponyfill.

Moving forward people will have to include their own global polyfill if they need one.

.github/workflows/release.yml

@@ -21,35 +21,29 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [20.x]
     steps:
       - name: Checkout
         uses: actions/checkout@v2
         with:
           fetch-depth: 0
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2.0.1
+        uses: pnpm/action-setup@v3
         with:
-          version: 6.14.3
+          version: 9.0.6
       - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - name: Cache node_modules
-        id: cache-node-modules
-        uses: actions/cache@v2
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/pnpm-lock.yaml') }}
+          cache: "pnpm"
       - name: Install
-        if: steps.cache-node-modules.outputs.cache-hit != 'true'
         run: pnpm install --reporter=silent
       - name: ✅ Check types
         run: pnpm check-types
       - name: 🧹 Lint
-        run: pnpm lint -- --quiet
+        run: pnpm lint --quiet
       - name: 🧪 Test
-        run: pnpm test -- --coverage --silent
+        run: pnpm run test --coverage --silent
       - name: Publish tests to Codecov
         if: always()
         uses: codecov/codecov-action@v2
@@ -64,7 +58,8 @@ jobs:
         if: "github.event_name == 'push'"
         run: git add .
       - name: 🚀 Release
+        if: "github.event_name == 'push'"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: pnpx -y semantic-release
+        run: pnpx semantic-release

README.md

@@ -40,7 +40,7 @@ usage requiring little code is possible.
 - [x] **Easy to use** It takes two minutes to start creating your own masonry grid with this component.
       [For real, check out the demo on **CodeSandbox**](https://codesandbox.io/s/0oyxozv75v).
 - [x] **Blazing™ fast** This component can seamlessly render tens of thousands of grid cells
-      without lag via its virtualization algorithm and underlying 
+      without lag via its virtualization algorithm and underlying
       [data structures](https://www.scaler.com/topics/data-structures/what-is-data-structure/). For example, it uses
       a [red black interval tree](https://www.geeksforgeeks.org/interval-tree/) to determine which cells to
       render, based upon the scroll position and size of the window the grid is rendered in. Interval trees
@@ -52,8 +52,7 @@ usage requiring little code is possible.
       `Infinity` value to the `overscanBy` prop, though this would be a terrible idea for large lists.
 - [x] **Autosizing** The default [`<Masonry>`](#masonry) component will automatically resize itself and its
       items if the content of the grid cells changes or resizes. For example, when an image lazily loads this
-      component will automatically do the work of recalculating the size of that grid cell using
-      [`@juggle/resize-observer`](https://www.npmjs.com/package/@juggle/resize-observer). That said, you
+      component will automatically do the work of recalculating the size of that grid cell. That said, you
       should try to premeasure things (including images) as often as possible in order to achieve the best
       user experience.
 

docs/v2.md

@@ -49,8 +49,7 @@ and further inspired by [react-window](https://github.com/bvaughn/react-window).
   this would be a terrible idea for large lists.
 - **Autosizing** The grid will automatically resize itself and its items if the content of the
   grid items changes or resizes. For example, when an image lazily loads this component will
-  automatically do the work of recalculating the size of that grid item using
-  [`@juggle/resize-observer`](https://www.npmjs.com/package/@juggle/resize-observer).
+  automatically do the work of recalculating the size of that grid item.
 
 ## Quick Start
 

package.json

@@ -7,6 +7,18 @@
   "homepage": "https://github.com/jaredLunde/masonic#readme",
   "repository": "github:jaredLunde/masonic",
   "bugs": "https://github.com/jaredLunde/masonic/issues",
+  "exports": {
+    ".": {
+      "browser": "./dist/module/index.js",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/main/index.js",
+      "umd": "./dist/umd/masonic.js",
+      "source": "./src/index.tsx",
+      "types": "./types/index.d.ts",
+      "default": "./dist/main/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
   "files": [
@@ -35,7 +47,6 @@
     "@essentials/memoize-one": "^1.1.0",
     "@essentials/one-key-map": "^1.2.0",
     "@essentials/request-timeout": "^1.3.0",
-    "@juggle/resize-observer": "^3.3.1",
     "@react-hook/event": "^1.2.3",
     "@react-hook/latest": "^1.0.3",
     "@react-hook/passive-layout-effect": "^1.2.1",
@@ -58,19 +69,21 @@
     "@shopify/jest-dom-mocks": "^3.0.7",
     "@swc-node/core": "^1.6.0",
     "@swc-node/jest": "^1.3.2",
+    "@swc/core": "^1.5.0",
     "@testing-library/jest-dom": "latest",
     "@testing-library/react": "latest",
     "@testing-library/react-hooks": "latest",
     "@testing-library/user-event": "latest",
-    "@types/jest": "latest",
+    "@types/jest": "^27.4.0",
+    "@types/node": "^20.12.7",
     "@types/react": "latest",
     "@types/react-dom": "latest",
     "@typescript-eslint/eslint-plugin": "^5.1.0",
     "cz-conventional-changelog": "latest",
     "eslint": "^7.32.0",
     "eslint-config-lunde": "latest",
     "husky": "latest",
-    "jest": "latest",
+    "jest": "^27.4.7",
     "lint-staged": "latest",
     "lundle": "latest",
     "node-fetch": "^2.6.0",
@@ -79,7 +92,7 @@
     "react": "latest",
     "react-dom": "latest",
     "react-test-renderer": "latest",
-    "typescript": "latest"
+    "typescript": "^4.5.4"
   },
   "keywords": [
     "grid component",
@@ -123,19 +136,6 @@
     "test",
     "*.config.js"
   ],
-  "exports": {
-    ".": {
-      "browser": "./dist/module/index.js",
-      "import": "./dist/esm/index.mjs",
-      "require": "./dist/main/index.js",
-      "umd": "./dist/umd/masonic.js",
-      "source": "./src/index.tsx",
-      "types": "./types/index.d.ts",
-      "default": "./dist/main/index.js"
-    },
-    "./package.json": "./package.json",
-    "./": "./"
-  },
   "jest": {
     "collectCoverageFrom": [
       "**/src/**/*.{ts,tsx}"
@@ -175,7 +175,7 @@
   },
   "lint-staged": {
     "package.json": [
-      "pnpx -y prettier-package-json --write"
+      "pnpx prettier-package-json --write"
     ],
     "**/*.{ts,tsx,js,jsx}": [
       "eslint --ext .ts,.tsx,.js,.jsx --fix",