From ccd68e0c1421da6a56ac9865e525d828ccb7dcda Mon Sep 17 00:00:00 2001 From: Damien Erambert Date: Thu, 16 Jan 2025 11:59:54 -0800 Subject: [PATCH 1/3] Declare `relative-element` under React.JSX to fix React 19 compatibility Fixes https://github.com/github/relative-time-element/issues/304 I had to add a `@ts-expect-error` comment since otherwise the typechecker would complain about missing `react` as a dependency. --- src/relative-time-element-define.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/relative-time-element-define.ts b/src/relative-time-element-define.ts index 34e5a59..b130fda 100644 --- a/src/relative-time-element-define.ts +++ b/src/relative-time-element-define.ts @@ -22,6 +22,10 @@ declare global { interface HTMLElementTagNameMap { 'relative-time': RelativeTimeElement } +} + +// @ts-expect-error This is needed for consumers using React 19 and above but TypeScript complains because `react` isn't a dependency of the project. +declare module 'react' { namespace JSX { interface IntrinsicElements { ['relative-time']: JSXBase['span'] & Partial> From 755e2e6bda079115b3e66c45c437b52c8f6b027f Mon Sep 17 00:00:00 2001 From: Damien Erambert Date: Fri, 17 Jan 2025 08:58:58 -0800 Subject: [PATCH 2/3] add @types/react as peerDep --- package-lock.json | 28 ++++++++++++++++++++++++++++ package.json | 3 +++ src/relative-time-element-define.ts | 1 - 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 49ca1dd..361689d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,9 @@ "eslint-plugin-custom-elements": "^0.0.8", "eslint-plugin-github": "^4.7.0", "typescript": "^5.0.4" + }, + "peerDependencies": { + "@types/react": "18 || 19" } }, "node_modules/@babel/code-frame": { @@ -902,6 +905,13 @@ "integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==", "dev": true }, + "node_modules/@types/prop-types": { + "version": "15.7.14", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", + "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", + "license": "MIT", + "peer": true + }, "node_modules/@types/qs": { "version": "6.9.7", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz", @@ -914,6 +924,17 @@ "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==", "dev": true }, + "node_modules/@types/react": { + "version": "18.3.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz", + "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/resolve": { "version": "1.20.2", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", @@ -2693,6 +2714,13 @@ "node": ">= 8" } }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "license": "MIT", + "peer": true + }, "node_modules/custom-elements-manifest": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz", diff --git a/package.json b/package.json index 628a903..de71e87 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,9 @@ "eslint-plugin-github": "^4.7.0", "typescript": "^5.0.4" }, + "peerDependencies": { + "@types/react": "18 || 19" + }, "eslintIgnore": [ "dist/" ], diff --git a/src/relative-time-element-define.ts b/src/relative-time-element-define.ts index b130fda..47c3f91 100644 --- a/src/relative-time-element-define.ts +++ b/src/relative-time-element-define.ts @@ -24,7 +24,6 @@ declare global { } } -// @ts-expect-error This is needed for consumers using React 19 and above but TypeScript complains because `react` isn't a dependency of the project. declare module 'react' { namespace JSX { interface IntrinsicElements { From 812968de38ed82d350c83ab3fa6d3acb1516d95a Mon Sep 17 00:00:00 2001 From: Damien Erambert Date: Fri, 17 Jan 2025 09:53:46 -0800 Subject: [PATCH 3/3] Update package.json Co-authored-by: Keith Cirkel --- package.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/package.json b/package.json index de71e87..4f06073 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,11 @@ "peerDependencies": { "@types/react": "18 || 19" }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + }, "eslintIgnore": [ "dist/" ],