From 83e7076870010a253581609c031234f7f9a88eb3 Mon Sep 17 00:00:00 2001
From: Jan Amann <jan@amann.work>
Date: Fri, 6 Dec 2024 11:19:02 +0100
Subject: [PATCH 1/3] feat: Support React 19
---
package.json | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/package.json b/package.json
index f30f1a3..8da43fb 100644
--- a/package.json
+++ b/package.json
@@ -72,8 +72,8 @@
"package.json"
],
"peerDependencies": {
- "react": "16.8.0 - 18",
- "react-dom": "16.8.0 - 18"
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
},
"devDependencies": {
"@babel/core": "^7.7.7",
From 7a266a2a004947cf4e270cf6b4477377c6d4ac9e Mon Sep 17 00:00:00 2001
From: Jan Amann <jan@amann.work>
Date: Tue, 28 Jan 2025 09:47:43 +0100
Subject: [PATCH 2/3] Update dev dependency of React to 19, fix type issues
---
package.json | 8 ++---
src/index.ts | 4 +--
src/utils/useResolvedElement.ts | 6 ++--
yarn.lock | 56 ++++++++++++++++-----------------
4 files changed, 37 insertions(+), 37 deletions(-)
diff --git a/package.json b/package.json
index 8da43fb..56b0aa6 100644
--- a/package.json
+++ b/package.json
@@ -95,8 +95,8 @@
"@types/jest": "^28.1.1",
"@types/karma": "^6.3.1",
"@types/karma-jasmine": "^4.0.1",
- "@types/react": "^18.0.8",
- "@types/react-dom": "^18.0.3",
+ "@types/react": "^19.0.0",
+ "@types/react-dom": "^19.0.0",
"@typescript-eslint/eslint-plugin": "^5.27.1",
"@typescript-eslint/parser": "^5.27.1",
"babel-loader": "^8.1.0",
@@ -117,9 +117,9 @@
"lint-staged": "^13.0.1",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
- "react": "^18.0.0",
+ "react": "^19.0.0",
"react-app-polyfill": "^3.0.0",
- "react-dom": "^18.0.0",
+ "react-dom": "^19.0.0",
"rollup": "^2.6.1",
"semantic-release": "^19.0.3",
"size-limit": "^5.0.1",
diff --git a/src/index.ts b/src/index.ts
index 21d1350..d3c8ea7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -38,7 +38,7 @@ export type RoundingFunction = (n: number) => number;
function useResizeObserver<T extends Element>(
opts: {
- ref?: RefObject<T> | T | null | undefined;
+ ref?: RefObject<T | null | undefined> | T | null | undefined;
onResize?: ResizeHandler;
box?: ResizeObserverBoxOptions;
round?: RoundingFunction;
@@ -57,7 +57,7 @@ function useResizeObserver<T extends Element>(
box?: ResizeObserverBoxOptions;
round?: RoundingFunction;
instance: ResizeObserver;
- }>();
+ }>(undefined);
const [size, setSize] = useState<{
width?: number;
diff --git a/src/utils/useResolvedElement.ts b/src/utils/useResolvedElement.ts
index d2acd46..bcc980b 100644
--- a/src/utils/useResolvedElement.ts
+++ b/src/utils/useResolvedElement.ts
@@ -7,10 +7,10 @@ type SubscriberResponse = SubscriberCleanupFunction | void;
// refs to such extent, but then composing hooks and components could not opt out of unnecessary renders.
export default function useResolvedElement<T extends Element>(
subscriber: (element: T) => SubscriberResponse,
- refOrElement?: T | RefObject<T> | null
+ refOrElement?: T | RefObject<T | null | undefined> | null
): RefCallback<T> {
const lastReportRef = useRef<{
- element: T | null;
+ element: T | null | undefined;
subscriber: typeof subscriber;
cleanup?: SubscriberResponse;
} | null>(null);
@@ -28,7 +28,7 @@ export default function useResolvedElement<T extends Element>(
const cbElement = cbElementRef.current;
const refOrElement = refOrElementRef.current;
// Ugly ternary. But smaller than an if-else block.
- const element: T | null = cbElement
+ const element: T | null | undefined = cbElement
? cbElement
: refOrElement
? refOrElement instanceof Element
diff --git a/yarn.lock b/yarn.lock
index 6a30a29..3578c81 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1996,14 +1996,19 @@
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
-"@types/react-dom@^18.0.0", "@types/react-dom@^18.0.3":
+"@types/react-dom@^18.0.0":
version "18.0.5"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.5.tgz#330b2d472c22f796e5531446939eacef8378444a"
integrity sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==
dependencies:
"@types/react" "*"
-"@types/react@*", "@types/react@^18.0.8":
+"@types/react-dom@^19.0.0":
+ version "19.0.3"
+ resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.0.3.tgz#0804dfd279a165d5a0ad8b53a5b9e65f338050a4"
+ integrity sha512-0Knk+HJiMP/qOZgMyNFamlIjw9OFCsyC2ZbigmEEyXXixgre6IQpm/4V+r3qH4GC1JPvRJKInw+on2rV6YZLeA==
+
+"@types/react@*":
version "18.0.12"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.12.tgz#cdaa209d0a542b3fcf69cf31a03976ec4cdd8840"
integrity sha512-duF1OTASSBQtcigUvhuiTB1Ya3OvSy+xORCiEf20H0P0lzx+/KeVsA99U5UjLXSbyo1DRJDlLKqTeM1ngosqtg==
@@ -2012,6 +2017,13 @@
"@types/scheduler" "*"
csstype "^3.0.2"
+"@types/react@^19.0.0":
+ version "19.0.8"
+ resolved "https://registry.yarnpkg.com/@types/react/-/react-19.0.8.tgz#7098e6159f2a61e4f4cef2c1223c044a9bec590e"
+ integrity sha512-9P/o1IGdfmQxrujGbIMDyYaaCykhLKc0NGCtYcECNUr9UAaDe4gwvV9bR6tvd5Br1SG0j+PBpbKr2UYY8CwqSw==
+ dependencies:
+ csstype "^3.0.2"
+
"@types/resolve@1.17.1":
version "1.17.1"
resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -6276,7 +6288,7 @@ jest@^28.1.1:
import-local "^3.0.2"
jest-cli "^28.1.1"
-"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+js-tokens@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
@@ -6833,13 +6845,6 @@ log4js@^6.4.1:
rfdc "^1.3.0"
streamroller "^3.1.1"
-loose-envify@^1.1.0:
- version "1.4.0"
- resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
- integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
- dependencies:
- js-tokens "^3.0.0 || ^4.0.0"
-
lru-cache@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -8713,13 +8718,12 @@ react-app-polyfill@^3.0.0:
regenerator-runtime "^0.13.9"
whatwg-fetch "^3.6.2"
-react-dom@^18.0.0:
- version "18.1.0"
- resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
- integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
+react-dom@^19.0.0:
+ version "19.0.0"
+ resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0.tgz#43446f1f01c65a4cd7f7588083e686a6726cfb57"
+ integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
dependencies:
- loose-envify "^1.1.0"
- scheduler "^0.22.0"
+ scheduler "^0.25.0"
react-is@^17.0.1:
version "17.0.2"
@@ -8731,12 +8735,10 @@ react-is@^18.0.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
-react@^18.0.0:
- version "18.1.0"
- resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
- integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
- dependencies:
- loose-envify "^1.1.0"
+react@^19.0.0:
+ version "19.0.0"
+ resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
+ integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
read-cmd-shim@^3.0.0:
version "3.0.0"
@@ -9116,12 +9118,10 @@ saxes@^5.0.1:
dependencies:
xmlchars "^2.2.0"
-scheduler@^0.22.0:
- version "0.22.0"
- resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
- integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
- dependencies:
- loose-envify "^1.1.0"
+scheduler@^0.25.0:
+ version "0.25.0"
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0.tgz#336cd9768e8cceebf52d3c80e3dcf5de23e7e015"
+ integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==
schema-utils@^1.0.0:
version "1.0.0"
From 8a37ec8a91e863981047926154c8481358102019 Mon Sep 17 00:00:00 2001
From: Jan Amann <jan@amann.work>
Date: Mon, 24 Feb 2025 10:07:04 +0100
Subject: [PATCH 3/3] Add matrix strategy to test both 18 and 19
---
.github/workflows/testing.yml | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml
index c964234..c83e398 100644
--- a/.github/workflows/testing.yml
+++ b/.github/workflows/testing.yml
@@ -7,6 +7,9 @@ on:
jobs:
testing:
runs-on: ubuntu-latest
+ strategy:
+ matrix:
+ react-version: [18, 19]
env:
BS_ACCESS_KEY: ${{ secrets.BS_ACCESS_KEY }}
BS_USERNAME: ${{ secrets.BS_USERNAME }}
@@ -20,6 +23,8 @@ jobs:
node-version: 14
- name: Installing Dependencies
run: yarn install --frozen-lockfile
+ - name: Install React ${{ matrix.react-version }}
+ run: yarn add react@${{ matrix.react-version }} react-dom@${{ matrix.react-version }} --dev
- name: Checking File Size
run: yarn check:size
- name: Checking Linting Rules