Chore: 支持react 18 (#71)

* chore(rc-cli): 更新react相关依赖

* refactor: 新增render工具函数支持老版本

* test: 修改单元测试

Author: windole

README.md

@@ -28,14 +28,14 @@
 ## 快速开始
 
 ```jsx
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { Button } from 'rc-ui-lib';
 
 function App() {
   return <Button>Default Button</Button>;
 }
 
-ReactDOM.render(<App />, mountNode);
+ReactDOM.createRoot(mountNode).render(<App />);
 ```
 
 ## 浏览器支持

packages/rc-cli/cjs/jest.config.cjs

@@ -10,6 +10,10 @@ const JEST_STYLE_MOCK_FILE = join(__dirname, 'jest.style-mock.cjs');
 const DEFAULT_CONFIG = {
   testEnvironment: 'jsdom',
   setupFiles: [JEST_SETUP_FILE],
+  setupFilesAfterEnv: [
+    '@testing-library/jest-dom/extend-expect',
+    '<rootDir>/tests/setupAfterEnv.ts',
+  ],
   moduleNameMapper: {
     '\\.(css|less|scss)$': JEST_STYLE_MOCK_FILE,
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':

packages/rc-cli/package.json

@@ -38,7 +38,7 @@
     "@popperjs/core": "^2.11.6",
     "@rollup/pluginutils": "^5.0.2",
     "@testing-library/jest-dom": "^5.15.1",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^13.4.0",
     "@vant/touch-emulator": "^1.3.2",
     "@vitejs/plugin-react": "^2.0.1",
     "address": "^1.1.2",
@@ -57,14 +57,16 @@
     "front-matter": "^4.0.2",
     "fs-extra": "^10.1.0",
     "highlight.js": "^11.6.0",
-    "jest": "^26.6.3",
+    "jest": "^28.1.3",
+    "jest-axe": "^6.0.1",
+    "jest-environment-jsdom": "^28.1.3",
     "less": "^3.12.2",
     "markdown-it": "^12.0.0",
     "markdown-it-anchor": "^6.0.0",
     "ora": "^5.1.0",
     "postcss": "^8.1.7",
     "postcss-load-config": "^3.1.4",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.15.0",
     "release-it": "^15.4.1",
     "rehype-highlight": "^6.0.0",
     "signale": "^1.4.0",
@@ -85,13 +87,13 @@
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^14.11.8",
     "@types/postcss-load-config": "^3.0.1",
-    "@types/react": "^17.0.3",
-    "@types/react-router-dom": "^5.1.7",
+    "@types/react": "^18.2.20",
+    "@types/react-router-dom": "^5.3.3",
     "@types/signale": "^1.4.1",
     "@types/through2": "^2.0.36",
     "@types/vinyl-fs": "^2.4.11",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "release-it": {
     "git": {

packages/rc-cli/site/desktop/App.jsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useEffect, Suspense } from 'react';
-import { Switch, Route, Redirect, useLocation, useHistory } from 'react-router-dom';
+import { Routes, Route, useLocation, useNavigate, Navigate } from 'react-router-dom';
 import { config, packageVersion } from 'site-desktop-shared';
 
 import { isMobile } from '../common';
@@ -10,23 +10,24 @@ import './index.less';
 
 const App = () => {
   const { pathname } = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
+
+  const handleMessage = (event) => {
+    if (event.data.pathname && pathname !== event.data.pathname) {
+      navigate(event.data.pathname);
+    }
+  };
 
   useEffect(() => {
     if (isMobile) {
       window.location.replace(`mobile.html${window.location.hash}`);
     }
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
   }, []);
 
-  window.addEventListener(
-    'message',
-    (event) => {
-      if (event.data.pathname && pathname !== event.data.pathname) {
-        history.push(event.data.pathname);
-      }
-    },
-    false,
-  );
+  window.addEventListener('message', handleMessage, false);
 
   const path = window.location.pathname.replace(/\/index(\.html)?/, '/');
   const simulator = `${path}mobile.html${window.location.hash}`;
@@ -95,20 +96,27 @@ const App = () => {
       currentComponentName={currentComponentName}
     >
       <Suspense fallback={<div style={{ height: '110vh' }}></div>}>
-        <Switch>
+        <Routes>
           {routes.map((route) =>
             route.redirect ? (
-              <Redirect key={route.path} to={route.redirect(pathname)} />
+              <Route
+                key={route.path}
+                path={route.path}
+                element={<Navigate to={route.redirect(pathname)} replace />}
+              />
             ) : (
               <Route
                 key={route.path}
                 exact={route.exact}
                 path={route.path}
-                render={(props) => <route.component {...props} routes={route.routes} />}
+                element={route.component}
+                // render={(props) => (
+                //   <route.component {...props} element={route.component} routes={route.routes} />
+                // )}
               />
             ),
           )}
-        </Switch>
+        </Routes>
       </Suspense>
     </Doc>
   );

packages/rc-cli/site/desktop/main.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { HashRouter } from 'react-router-dom';
 
 import App from './App';
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('app')).render(
   <HashRouter>
     <App />
   </HashRouter>,
-  document.getElementById('app'),
 );

packages/rc-cli/site/desktop/routes.js renamed to packages/rc-cli/site/desktop/routes.jsx

@@ -33,7 +33,6 @@ export function getLangFromRoute(pathname) {
 }
 
 const getRoutes = () => {
-  console.log(documents);
   const routes = [];
   const names = Object.keys(documents);
 
@@ -42,7 +41,7 @@ const getRoutes = () => {
       name: lang,
       exact: true,
       path: `/${lang || ''}`,
-      component: Home,
+      component: <Home />,
       state: { lang },
     });
   }
@@ -55,20 +54,22 @@ const getRoutes = () => {
     }
 
     if (lang) {
+      const Component = lazy(documents[name]);
       routes.push({
         name: `${lang}/${component}`,
         path: `/${lang}/${component}`,
-        component: lazy(documents[name]),
+        component: <Component />,
         state: {
           lang,
           name: component,
         },
       });
     } else {
+      const Component = lazy(documents[name]);
       routes.push({
         name: `${component}`,
         path: `/${component}`,
-        component: lazy(documents[name]),
+        component: <Component />,
         meta: {
           name: component,
         },
@@ -87,6 +88,7 @@ const getRoutes = () => {
       redirect: () => '/',
     });
   }
+
   return routes;
 };
 

packages/rc-cli/site/mobile/App.jsx

@@ -1,5 +1,5 @@
 import React, { useMemo, Suspense } from 'react';
-import { Switch, Route, Redirect, useLocation } from 'react-router-dom';
+import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
 
 import ScrollTop from './components/ScrollTop';
 import DemoNav from './components/DemoNav';
@@ -20,22 +20,27 @@ const App = () => {
       <DemoNav title={title} />
       <ScrollTop />
       <Suspense fallback={<div></div>}>
-        <Switch>
+        <Routes>
           {routes.map((route) => {
             return route.redirect ? (
-              <Redirect key={route.path} to={route.redirect(pathname)} />
+              <Route
+                key={route.path}
+                path={route.path}
+                element={<Navigate to={route.redirect(pathname)} replace />}
+              />
             ) : (
               <Route
                 key={route.path}
                 exact={route.exact}
                 path={route.path}
-                render={(props) => {
-                  return <route.component {...props} meta={route.meta} routes={route.routes} />;
-                }}
+                element={route.component}
+                // render={(props) => {
+                //   return <route.component {...props} meta={route.meta} routes={route.routes} />;
+                // }}
               />
             );
           })}
-        </Switch>
+        </Routes>
       </Suspense>
     </div>
   );

packages/rc-cli/site/mobile/components/DemoHome/index.jsx

@@ -36,4 +36,10 @@ const DemoHome = (props) => {
   );
 };
 
+DemoHome.defaultProps = {
+  meta: {
+    lang: 'zh-CN'
+  }
+}
+
 export default DemoHome;

packages/rc-cli/site/mobile/components/DemoHomeNav/index.jsx

@@ -1,13 +1,13 @@
 import React, { useMemo } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { isMobile } from '../../../common/index.js';
 import ArrowRight from '../ArrowRight';
 import './index.less';
 
 const DemoHomeNav = (props) => {
   const { lang, group } = props;
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const base = useMemo(() => {
     return lang ? `/${lang}` : '';
@@ -22,7 +22,7 @@ const DemoHomeNav = (props) => {
             className="demo-home-nav__block"
             key={navItem.path}
             onClick={() => {
-              history.push(`${base}/${navItem.path}`);
+              navigate(`${base}/${navItem.path}`);
               if (!isMobile && window !== window.top) {
                 window.top.postMessage({ pathname: `${base}/${navItem.path}` }, window.top);
               }

packages/rc-cli/site/mobile/components/DemoNav/index.jsx

@@ -1,20 +1,20 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import './index.less';
 
 const DemoNav = (props) => {
-  const history = useHistory();
+  const navigate = useNavigate();
 
-  const path =
-    'M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z';
   const onBack = () => {
-    if (history.length > 1) {
-      history.goBack();
+    if (navigate.length > 1) {
+      navigate(-1);
     } else {
-      history.replace('/');
+      navigate('/');
     }
   };
+  const path =
+    'M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z';
 
   return props.title ? (
     <div className="demo-nav">