fea: update react 18 & upgrade dependency.

Author: jaywcjlove

package.json

@@ -16,43 +16,43 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "~7.17.2",
-    "@codemirror/lang-javascript": "~0.19.7",
-    "@codemirror/lang-json": "~0.19.2",
-    "@codemirror/lang-css": "~0.19.3",
-    "@codemirror/lang-html": "~0.19.4",
-    "@codemirror/lang-xml": "~0.19.2",
-    "@codemirror/legacy-modes": "~0.19.0",
+    "@babel/runtime": "^7.18.9",
+    "@codemirror/lang-javascript": "^6.0.2",
+    "@codemirror/lang-json": "^6.0.0",
+    "@codemirror/lang-css": "^6.0.0",
+    "@codemirror/lang-html": "^6.1.0",
+    "@codemirror/lang-xml": "^6.0.0",
+    "@codemirror/legacy-modes": "^6.1.0",
     "@rematch/core": "~2.2.0",
     "@rematch/loading": "~2.1.2",
-    "@uiw/react-codemirror": "~4.5.1",
-    "@uiw/react-github-corners": "~1.5.3",
-    "@uiw/react-markdown-preview": "~3.4.7",
-    "@uiw/reset.css": "~1.0.5",
-    "axios": "~0.26.0",
-    "rehype-rewrite": "~3.0.4",
-    "rehype-video": "~1.2.0",
-    "react": "~17.0.2",
-    "react-dom": "~17.0.2",
+    "@uiw/react-codemirror": "^4.11.4",
+    "@uiw/react-github-corners": "^1.5.14",
+    "@uiw/react-markdown-preview": "^4.0.23",
+    "@uiw/reset.css": "^1.0.6",
+    "axios": "^0.27.2",
+    "rehype-rewrite": "^3.0.6",
+    "rehype-video": "^1.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-redux": "~7.2.6",
-    "react-router-dom": "~6.2.1",
-    "uiw": "~4.12.2"
+    "react-router-dom": "^6.3.0",
+    "uiw": "^4.21.14"
   },
   "engines": {
-    "node": "^14.0.0"
+    "node": "^16.0.0"
   },
   "lint-staged": {
     "*.{js,jsx,tsx,ts,less,md,json}": "prettier --write"
   },
   "devDependencies": {
-    "@kkt/less-modules": "~7.1.1",
-    "@types/react": "~17.0.39",
-    "@types/react-dom": "~17.0.11",
-    "@types/react-redux": "~7.1.22",
-    "husky": "~7.0.4",
-    "lint-staged": "~12.3.4",
-    "prettier": "~2.5.1",
-    "kkt": "~7.1.5"
+    "@kkt/less-modules": "^7.2.0",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-redux": "^7.1.24",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "kkt": "^7.2.0"
   },
   "eslintConfig": {
     "extends": [

src/index.tsx

@@ -1,5 +1,5 @@
 import { Suspense } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import Loader from '@uiw/react-loader';
 import { HashRouter, Route, Routes } from 'react-router-dom';
@@ -38,10 +38,12 @@ function App() {
   );
 }
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container!);
+
+root.render(
   <Provider store={store}>
     <GitHubCorners size={54} target="_parent" href="https://github.com/uiwjs/npm-unpkg" />
     <App />
-  </Provider>,
-  document.getElementById('root'),
+  </Provider>
 );

src/pages/Preview/Content.tsx

@@ -3,8 +3,9 @@ import { useSelector } from 'react-redux';
 import Loader from '@uiw/react-loader';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import rehypeVideo from 'rehype-video';
-import CodeMirror, { Extension } from '@uiw/react-codemirror';
-import { StreamLanguage } from '@codemirror/stream-parser';
+import CodeMirror from '@uiw/react-codemirror';
+import {  Extension } from '@codemirror/state';
+import { StreamLanguage } from '@codemirror/language';
 import { stylus } from '@codemirror/legacy-modes/mode/stylus';
 import { yaml } from '@codemirror/legacy-modes/mode/yaml';
 import { toml } from '@codemirror/legacy-modes/mode/toml';

src/routers.ts

@@ -1,25 +1,25 @@
-import { lazy } from 'react';
+import React, { lazy } from 'react';
 import { RouteObject } from 'react-router-dom';
 
 export const routes: RouteObject[] = [
   {
     path: '/',
-    element: lazy(() => import('./pages/Home')),
+    element: lazy(() => import('./pages/Home')) as unknown as React.ReactNode,
   },
   {
     path: '/pkg/:name',
-    element: lazy(() => import('./pages/Preview')),
+    element: lazy(() => import('./pages/Preview')) as unknown as React.ReactNode,
   },
   {
     path: '/pkg/:name/file/:filename/*',
-    element: lazy(() => import('./pages/Preview')),
+    element: lazy(() => import('./pages/Preview')) as unknown as React.ReactNode,
   },
   {
     path: '/pkg/:org/:name',
-    element: lazy(() => import('./pages/Preview')),
+    element: lazy(() => import('./pages/Preview')) as unknown as React.ReactNode,
   },
   {
     path: '/pkg/:org/:name/file/:filename/*',
-    element: lazy(() => import('./pages/Preview')),
+    element: lazy(() => import('./pages/Preview')) as unknown as React.ReactNode,
   },
 ];