aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json90
-rw-r--r--package.json8
-rw-r--r--src/components/NoticeComponent.tsx1
-rw-r--r--src/components/NoticeTextSectionComponent.tsx3
-rw-r--r--src/components/SponsorTimeEditComponent.tsx1
-rw-r--r--src/components/options/CategorySkipOptionsComponent.tsx1
-rw-r--r--src/components/options/KeybindComponent.tsx8
-rw-r--r--src/components/options/UnsubmittedVideoListItem.tsx1
-rw-r--r--src/options.ts5
-rw-r--r--src/render/CategoryChooser.tsx9
-rw-r--r--src/render/SkipNotice.tsx11
-rw-r--r--src/render/UnsubmittedVideos.tsx8
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<KeybindProps, KeybindState> {
constructor(props: KeybindProps) {
@@ -56,11 +57,12 @@ class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
dialog = parent.document.createElement("div");
dialog.id = "keybind-dialog";
parent.document.body.prepend(dialog);
- ReactDOM.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />, dialog);
+ root = createRoot(dialog);
+ root.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => 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(
- <CategoryChooserComponent ref={this.ref} />,
- element
+ const root = createRoot(element);
+ root.render(
+ <CategoryChooserComponent ref={this.ref} />
);
}
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<SkipNoticeComponent>;
+ 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(
<SkipNoticeComponent segments={segments}
autoSkip={autoSkip}
startReskip={startReskip}
@@ -50,8 +52,7 @@ class SkipNotice {
closeListener={() => 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(
- <UnsubmittedVideosComponent ref={this.ref} />,
- element
+ const root = createRoot(element);
+ root.render(
+ <UnsubmittedVideosComponent ref={this.ref} />
);
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 02:03:35 +0000