Bump react to v18, and highlight.js to v11 (#327)

Author: PavelVanecek

package-lock.json

@@ -25,8 +25,8 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@types/lodash": "^4.17.18",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
     "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/parser": "^8.34.1",
@@ -52,12 +52,12 @@
     "d3-scale": "^3.2.3",
     "d3-scale-chromatic": "^1.3.3",
     "d3-shape": "^2.0.0",
-    "highlight.js": "~9.8.0",
+    "highlight.js": "^11.11.1",
     "lodash": "^4.17.20",
     "monaco-editor": "^0.52.2",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-monaco-editor": "^0.58.0",
     "react-router": "^4.3.1",
@@ -68,17 +68,5 @@
     "scroll-behavior": "^0.9.12",
     "simple-line-icons": "^2.5.5"
   },
-  "license": "MIT",
-  "overrides": {
-    "@reduxjs/toolkit": {
-      ".": "^1.9.7",
-      "dependencies": {
-        "react": "17.0.1"
-      }
-    },
-    "react-redux": {
-      ".": "^8.1.3",
-      "react": "17.0.1"
-    }
-  }
+  "license": "MIT"
 }

package.json

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-unresolved */
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
 // @ts-ignore
@@ -37,4 +37,9 @@ loader.config({ monaco });
 
 loader.init().then(/* ... */);
 
-ReactDOM.render(<Root />, document.getElementById('app'));
+const container = document.getElementById('app');
+if (container == null) {
+  throw new Error('Container element with id "app" not found');
+}
+const root = createRoot(container);
+root.render(<Root />);

src/app.tsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { RouteComponentProps, withRouter } from 'react-router';
 import Helmet from 'react-helmet';
@@ -12,7 +12,9 @@ const locales = [
   { locale: 'zh-CN', text: '中文' },
 ];
 
-type FrameProps = RouteComponentProps;
+type FrameProps = RouteComponentProps & {
+  children: ReactNode;
+};
 
 class Frame extends Component<FrameProps> {
   renderLocaleSwitch(curLocale: string) {

src/layouts/Frame.tsx

@@ -1,9 +1,10 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, ReactNode } from 'react';
 // @ts-ignore
 import hljs from 'highlight.js';
 
 type HighlightProps = {
   className?: string;
+  children: ReactNode;
 };
 
 class Highlight extends PureComponent<HighlightProps> {
@@ -26,7 +27,7 @@ class Highlight extends PureComponent<HighlightProps> {
     if (domNode == null) {
       return;
     }
-    const nodes = domNode.querySelectorAll('pre code');
+    const nodes: NodeListOf<HTMLElement> = domNode.querySelectorAll('pre code');
 
     if (nodes.length > 0) {
       for (let i = 0; i < nodes.length; i++) {