From 55c84662c02cd4c5fb0795128dd4966192228fc5 Mon Sep 17 00:00:00 2001 From: Michael C Date: Fri, 7 Oct 2022 19:28:29 -0400 Subject: [PATCH 1/3] add some changes that are rendering properly --- package-lock.json | 90 ++++++++++--------- package.json | 8 +- src/components/NoticeComponent.tsx | 1 + src/components/NoticeTextSectionComponent.tsx | 3 +- src/components/SponsorTimeEditComponent.tsx | 1 + .../options/CategorySkipOptionsComponent.tsx | 1 + src/components/options/KeybindComponent.tsx | 8 +- .../options/UnsubmittedVideoListItem.tsx | 1 + src/options.ts | 5 +- src/render/CategoryChooser.tsx | 9 +- src/render/SkipNotice.tsx | 11 +-- src/render/UnsubmittedVideos.tsx | 8 +- 12 files changed, 79 insertions(+), 67 deletions(-) diff --git a/package-lock.json b/package-lock.json index 16f6fdad..c92982f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,15 +27,15 @@ ], "license": "LGPL-3.0-or-later", "dependencies": { - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.2.0", + "react-dom": "^18.2.0" }, "devDependencies": { "@types/chrome": "^0.0.197", "@types/firefox-webext-browser": "^94.0.1", "@types/jest": "^29.1.2", - "@types/react": "^17.0.47", - "@types/react-dom": "^17.0.17", + "@types/react": "^18.0.21", + "@types/react-dom": "^18.0.6", "@types/selenium-webdriver": "^4.1.5", "@types/wicg-mediasession": "^1.1.4", "@typescript-eslint/eslint-plugin": "^5.39.0", @@ -1942,9 +1942,9 @@ "dev": true }, "node_modules/@types/react": { - "version": "17.0.47", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.47.tgz", - "integrity": "sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==", + "version": "18.0.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz", + "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==", "dev": true, "dependencies": { "@types/prop-types": "*", @@ -1953,12 +1953,12 @@ } }, "node_modules/@types/react-dom": { - "version": "17.0.17", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.17.tgz", - "integrity": "sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==", + "version": "18.0.6", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz", + "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==", "dev": true, "dependencies": { - "@types/react": "^17" + "@types/react": "*" } }, "node_modules/@types/responselike": { @@ -10299,6 +10299,7 @@ "node_modules/object-assign": { "version": "4.1.1", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -11071,26 +11072,26 @@ } }, "node_modules/react": { - "version": "17.0.2", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" }, "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "17.0.2", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "dependencies": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.23.0" }, "peerDependencies": { - "react": "17.0.2" + "react": "^18.2.0" } }, "node_modules/react-is": { @@ -11471,11 +11472,11 @@ } }, "node_modules/scheduler": { - "version": "0.20.2", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "node_modules/schema-utils": { @@ -15065,9 +15066,9 @@ "dev": true }, "@types/react": { - "version": "17.0.47", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.47.tgz", - "integrity": "sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==", + "version": "18.0.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz", + "integrity": "sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==", "dev": true, "requires": { "@types/prop-types": "*", @@ -15076,12 +15077,12 @@ } }, "@types/react-dom": { - "version": "17.0.17", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.17.tgz", - "integrity": "sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==", + "version": "18.0.6", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz", + "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==", "dev": true, "requires": { - "@types/react": "^17" + "@types/react": "*" } }, "@types/responselike": { @@ -21217,7 +21218,8 @@ }, "object-assign": { "version": "4.1.1", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true }, "object-inspect": { "version": "1.12.0", @@ -21792,20 +21794,20 @@ } }, "react": { - "version": "17.0.2", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "react-dom": { - "version": "17.0.2", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "requires": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.23.0" } }, "react-is": { @@ -22099,11 +22101,11 @@ } }, "scheduler": { - "version": "0.20.2", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "schema-utils": { diff --git a/package.json b/package.json index 2fc6ec2a..fc1a14f9 100644 --- a/package.json +++ b/package.json @@ -4,15 +4,15 @@ "description": "", "main": "background.js", "dependencies": { - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.2.0", + "react-dom": "^18.2.0" }, "devDependencies": { "@types/chrome": "^0.0.197", "@types/firefox-webext-browser": "^94.0.1", "@types/jest": "^29.1.2", - "@types/react": "^17.0.47", - "@types/react-dom": "^17.0.17", + "@types/react": "^18.0.21", + "@types/react-dom": "^18.0.6", "@types/selenium-webdriver": "^4.1.5", "@types/wicg-mediasession": "^1.1.4", "@typescript-eslint/eslint-plugin": "^5.39.0", diff --git a/src/components/NoticeComponent.tsx b/src/components/NoticeComponent.tsx index ec8139fa..affe10a9 100644 --- a/src/components/NoticeComponent.tsx +++ b/src/components/NoticeComponent.tsx @@ -36,6 +36,7 @@ export interface NoticeProps { zIndex?: number, style?: React.CSSProperties biggerCloseButton?: boolean; + children?: React.ReactNode } export interface NoticeState { diff --git a/src/components/NoticeTextSectionComponent.tsx b/src/components/NoticeTextSectionComponent.tsx index 122d0fde..713def35 100644 --- a/src/components/NoticeTextSectionComponent.tsx +++ b/src/components/NoticeTextSectionComponent.tsx @@ -4,7 +4,8 @@ export interface NoticeTextSelectionProps { icon?: string, text: string, idSuffix: string, - onClick?: (event: React.MouseEvent) => unknown + onClick?: (event: React.MouseEvent) => unknown, + children?: React.ReactNode } export interface NoticeTextSelectionState { diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx index 9519c1f8..4741cacc 100644 --- a/src/components/SponsorTimeEditComponent.tsx +++ b/src/components/SponsorTimeEditComponent.tsx @@ -23,6 +23,7 @@ export interface SponsorTimeEditProps { submissionNotice: SubmissionNoticeComponent; categoryList?: Category[]; categoryChangeListener?: (index: number, category: Category) => void; + children?: React.ReactNode; } export interface SponsorTimeEditState { diff --git a/src/components/options/CategorySkipOptionsComponent.tsx b/src/components/options/CategorySkipOptionsComponent.tsx index a7aa55d9..cc37e14e 100644 --- a/src/components/options/CategorySkipOptionsComponent.tsx +++ b/src/components/options/CategorySkipOptionsComponent.tsx @@ -13,6 +13,7 @@ export interface CategorySkipOptionsProps { category: Category; defaultColor?: string; defaultPreviewColor?: string; + children?: React.ReactNode[]; } export interface CategorySkipOptionsState { diff --git a/src/components/options/KeybindComponent.tsx b/src/components/options/KeybindComponent.tsx index 34345301..4d49c7f4 100644 --- a/src/components/options/KeybindComponent.tsx +++ b/src/components/options/KeybindComponent.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot, Root } from 'react-dom/client'; import Config from "../../config"; import { Keybind } from "../../types"; import KeybindDialogComponent from "./KeybindDialogComponent"; @@ -14,6 +14,7 @@ export interface KeybindState { } let dialog; +let root: Root; class KeybindComponent extends React.Component { constructor(props: KeybindProps) { @@ -56,11 +57,12 @@ class KeybindComponent extends React.Component { dialog = parent.document.createElement("div"); dialog.id = "keybind-dialog"; parent.document.body.prepend(dialog); - ReactDOM.render( this.closeEditDialog(updateWith)} />, dialog); + root = createRoot(dialog); + root.render( this.closeEditDialog(updateWith)} />); } closeEditDialog(updateWith: Keybind): void { - ReactDOM.unmountComponentAtNode(dialog); + root.unmount(); dialog.remove(); if (updateWith != null) this.setState({keybind: updateWith}); diff --git a/src/components/options/UnsubmittedVideoListItem.tsx b/src/components/options/UnsubmittedVideoListItem.tsx index d670461d..f96a6818 100644 --- a/src/components/options/UnsubmittedVideoListItem.tsx +++ b/src/components/options/UnsubmittedVideoListItem.tsx @@ -5,6 +5,7 @@ import { exportTimes, exportTimesAsHashParam } from "../../utils/exporter"; export interface UnsubmittedVideosListItemProps { videoID: string; + children?: React.ReactNode[]; } export interface UnsubmittedVideosListItemState { diff --git a/src/options.ts b/src/options.ts index c9596abb..888e7aaf 100644 --- a/src/options.ts +++ b/src/options.ts @@ -1,5 +1,5 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot } from 'react-dom/client'; import Config from "./config"; import * as CompileConfig from "../config.json"; @@ -258,7 +258,8 @@ async function init() { break; } case "keybind-change": { - ReactDOM.render(React.createElement(KeybindComponent, {option: option}), optionsElements[i].querySelector("div")); + const root = createRoot(optionsElements[i].querySelector("div")); + root.render(React.createElement(KeybindComponent, {option: option})); break; } case "display": { diff --git a/src/render/CategoryChooser.tsx b/src/render/CategoryChooser.tsx index 0f5d557f..5b708a3f 100644 --- a/src/render/CategoryChooser.tsx +++ b/src/render/CategoryChooser.tsx @@ -1,5 +1,6 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot } from 'react-dom/client'; + import CategoryChooserComponent from "../components/options/CategoryChooserComponent"; class CategoryChooser { @@ -9,9 +10,9 @@ class CategoryChooser { constructor(element: Element) { this.ref = React.createRef(); - ReactDOM.render( - , - element + const root = createRoot(element); + root.render( + ); } diff --git a/src/render/SkipNotice.tsx b/src/render/SkipNotice.tsx index f5a81033..b1be46a2 100644 --- a/src/render/SkipNotice.tsx +++ b/src/render/SkipNotice.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot, Root } from 'react-dom/client'; import Utils from "../utils"; const utils = new Utils(); @@ -18,6 +18,7 @@ class SkipNotice { noticeElement: HTMLDivElement; skipNoticeRef: React.MutableRefObject; + root: Root; constructor(segments: SponsorTime[], autoSkip = false, contentContainer: ContentContainer, unskipTime: number = null, startReskip = false) { this.skipNoticeRef = React.createRef(); @@ -41,7 +42,8 @@ class SkipNotice { referenceNode.prepend(this.noticeElement); - ReactDOM.render( + this.root = createRoot(this.noticeElement); + this.root.render( this.close()} smaller={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAll || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAutoSkip && autoSkip)} - unskipTime={unskipTime} />, - this.noticeElement + unskipTime={unskipTime} /> ); } @@ -62,7 +63,7 @@ class SkipNotice { } close(): void { - ReactDOM.unmountComponentAtNode(this.noticeElement); + this.root.unmount(); this.noticeElement.remove(); diff --git a/src/render/UnsubmittedVideos.tsx b/src/render/UnsubmittedVideos.tsx index 26796754..3b3b3855 100644 --- a/src/render/UnsubmittedVideos.tsx +++ b/src/render/UnsubmittedVideos.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot } from 'react-dom/client'; import UnsubmittedVideosComponent from "../components/options/UnsubmittedVideosComponent"; class UnsubmittedVideos { @@ -9,9 +9,9 @@ class UnsubmittedVideos { constructor(element: Element) { this.ref = React.createRef(); - ReactDOM.render( - , - element + const root = createRoot(element); + root.render( + ); } From fda4a03541bcd9a9892cf879daa67caa9fa803d6 Mon Sep 17 00:00:00 2001 From: Michael C Date: Fri, 7 Oct 2022 19:51:05 -0400 Subject: [PATCH 2/3] fix more components --- src/render/ChapterVote.tsx | 11 +++++------ src/render/GenericNotice.tsx | 14 ++++++++------ src/render/RectangleTooltip.tsx | 13 +++++++------ src/render/SubmissionNotice.tsx | 12 +++++++----- src/render/Tooltip.tsx | 13 +++++++------ 5 files changed, 34 insertions(+), 29 deletions(-) diff --git a/src/render/ChapterVote.tsx b/src/render/ChapterVote.tsx index 1a3f8999..9112d719 100644 --- a/src/render/ChapterVote.tsx +++ b/src/render/ChapterVote.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot, Root } from 'react-dom/client'; import ChapterVoteComponent, { ChapterVoteState } from "../components/ChapterVoteComponent"; import { VoteResponse } from "../messageTypes"; import { Category, SegmentUUID, SponsorTime } from "../types"; @@ -7,6 +7,7 @@ import { Category, SegmentUUID, SponsorTime } from "../types"; export class ChapterVote { container: HTMLElement; ref: React.RefObject; + root: Root; unsavedState: ChapterVoteState; @@ -19,10 +20,8 @@ export class ChapterVote { this.container.id = "chapterVote"; this.container.style.height = "100%"; - ReactDOM.render( - , - this.container - ); + this.root = createRoot(this.container); + this.root.render(); } getContainer(): HTMLElement { @@ -30,7 +29,7 @@ export class ChapterVote { } close(): void { - ReactDOM.unmountComponentAtNode(this.container); + this.root.unmount(); this.container.remove(); } diff --git a/src/render/GenericNotice.tsx b/src/render/GenericNotice.tsx index 63a4c879..4e01bcac 100644 --- a/src/render/GenericNotice.tsx +++ b/src/render/GenericNotice.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot, Root } from 'react-dom/client'; import NoticeComponent from "../components/NoticeComponent"; import Utils from "../utils"; @@ -35,6 +35,7 @@ export default class GenericNotice { noticeElement: HTMLDivElement; noticeRef: React.MutableRefObject; idSuffix: string; + root: Root; constructor(contentContainer: ContentContainer, idSuffix: string, options: NoticeOptions) { this.noticeRef = React.createRef(); @@ -49,11 +50,13 @@ export default class GenericNotice { referenceNode.prepend(this.noticeElement); - this.update(options); + this.root = createRoot(this.noticeElement); + + this.update(options); } update(options: NoticeOptions): void { - ReactDOM.render( + this.root.render( : null} - , - this.noticeElement + ); } @@ -137,7 +139,7 @@ export default class GenericNotice { } close(): void { - ReactDOM.unmountComponentAtNode(this.noticeElement); + this.root.unmount(); this.noticeElement.remove(); } diff --git a/src/render/RectangleTooltip.tsx b/src/render/RectangleTooltip.tsx index ea019db7..571a2788 100644 --- a/src/render/RectangleTooltip.tsx +++ b/src/render/RectangleTooltip.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot, Root } from 'react-dom/client'; export interface RectangleTooltipProps { text: string, @@ -20,7 +20,7 @@ export interface RectangleTooltipProps { export class RectangleTooltip { text: string; container: HTMLDivElement; - + root: Root; timer: NodeJS.Timeout; constructor(props: RectangleTooltipProps) { @@ -32,6 +32,7 @@ export class RectangleTooltip { this.text = props.text; props.fontSize ??= "10px"; + this.container = document.createElement('div'); props.htmlId ??= "sponsorRectangleTooltip" + props.text; this.container.id = props.htmlId; @@ -47,7 +48,8 @@ export class RectangleTooltip { this.timer = setTimeout(() => this.close(), props.timeout * 1000); } - ReactDOM.render( + this.root = createRoot(this.container); + this.root.render(
-
, - this.container + ) } close(): void { - ReactDOM.unmountComponentAtNode(this.container); + this.root.unmount(); this.container.remove(); if (this.timer) clearTimeout(this.timer); diff --git a/src/render/SubmissionNotice.tsx b/src/render/SubmissionNotice.tsx index 9164666d..295d8e2b 100644 --- a/src/render/SubmissionNotice.tsx +++ b/src/render/SubmissionNotice.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot, Root } from 'react-dom/client'; import Utils from "../utils"; const utils = new Utils(); @@ -17,6 +17,8 @@ class SubmissionNotice { noticeElement: HTMLDivElement; + root: Root; + constructor(contentContainer: ContentContainer, callback: () => unknown) { this.noticeRef = React.createRef(); @@ -30,13 +32,13 @@ class SubmissionNotice { referenceNode.prepend(this.noticeElement); - ReactDOM.render( + this.root = createRoot(this.noticeElement); + this.root.render( this.close(false)} />, - this.noticeElement + closeListener={() => this.close(false)} /> ); } @@ -46,7 +48,7 @@ class SubmissionNotice { close(callRef = true): void { if (callRef) this.noticeRef.current.cancel(); - ReactDOM.unmountComponentAtNode(this.noticeElement); + this.root.unmount(); this.noticeElement.remove(); } diff --git a/src/render/Tooltip.tsx b/src/render/Tooltip.tsx index dd9a26cc..7c89dd8e 100644 --- a/src/render/Tooltip.tsx +++ b/src/render/Tooltip.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; +import { createRoot, Root } from 'react-dom/client'; import { ButtonListener } from "../types"; export interface TooltipProps { @@ -26,6 +26,7 @@ export class Tooltip { container: HTMLDivElement; timer: NodeJS.Timeout; + root: Root; constructor(props: TooltipProps) { props.bottomOffset ??= "70px"; @@ -54,8 +55,9 @@ export class Tooltip { } const backgroundColor = `rgba(28, 28, 28, ${props.opacity})`; - - ReactDOM.render( + + this.root = createRoot(this.container); + this.root.render(
@@ -93,8 +95,7 @@ export class Tooltip { {chrome.i18n.getMessage("GotIt")} : null} -
, - this.container +
) } @@ -120,7 +121,7 @@ export class Tooltip { } close(): void { - ReactDOM.unmountComponentAtNode(this.container); + this.root.unmount(); this.container.remove(); if (this.timer) clearTimeout(this.timer); From 81e85c19ae88c78d90610e94df6ce3a771234711 Mon Sep 17 00:00:00 2001 From: Michael C Date: Fri, 7 Oct 2022 20:06:03 -0400 Subject: [PATCH 3/3] fix typings and revert spacing --- src/components/options/CategorySkipOptionsComponent.tsx | 2 +- src/components/options/UnsubmittedVideoListItem.tsx | 2 +- src/render/RectangleTooltip.tsx | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/options/CategorySkipOptionsComponent.tsx b/src/components/options/CategorySkipOptionsComponent.tsx index cc37e14e..486a43ed 100644 --- a/src/components/options/CategorySkipOptionsComponent.tsx +++ b/src/components/options/CategorySkipOptionsComponent.tsx @@ -13,7 +13,7 @@ export interface CategorySkipOptionsProps { category: Category; defaultColor?: string; defaultPreviewColor?: string; - children?: React.ReactNode[]; + children?: React.ReactNode; } export interface CategorySkipOptionsState { diff --git a/src/components/options/UnsubmittedVideoListItem.tsx b/src/components/options/UnsubmittedVideoListItem.tsx index f96a6818..b2150457 100644 --- a/src/components/options/UnsubmittedVideoListItem.tsx +++ b/src/components/options/UnsubmittedVideoListItem.tsx @@ -5,7 +5,7 @@ import { exportTimes, exportTimesAsHashParam } from "../../utils/exporter"; export interface UnsubmittedVideosListItemProps { videoID: string; - children?: React.ReactNode[]; + children?: React.ReactNode; } export interface UnsubmittedVideosListItemState { diff --git a/src/render/RectangleTooltip.tsx b/src/render/RectangleTooltip.tsx index 571a2788..06cbd251 100644 --- a/src/render/RectangleTooltip.tsx +++ b/src/render/RectangleTooltip.tsx @@ -32,7 +32,6 @@ export class RectangleTooltip { this.text = props.text; props.fontSize ??= "10px"; - this.container = document.createElement('div'); props.htmlId ??= "sponsorRectangleTooltip" + props.text; this.container.id = props.htmlId;