diff --git a/.babelrc.js b/.babelrc.js index 2330e30..441eec9 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -22,6 +22,7 @@ module.exports = { development: true, }, ], + // "@lingui/babel-preset-react", [ "@babel/preset-typescript" ] diff --git a/README-cn.md b/README-cn.md index 8f766ed..ad3af72 100644 --- a/README-cn.md +++ b/README-cn.md @@ -41,8 +41,5 @@ https://zhuanlan.zhihu.com/p/268890371 https://zhuanlan.zhihu.com/p/141738683 -## 使用注意 - -由于 Antdesign 4 部分组件对react 18 的支持不够理想，使用时暂不建议升级至react18.. 致谢：[qiujie8092916](https://github.com/qiujie8092916) 提供typescript版 \ No newline at end of file diff --git a/README.md b/README.md index b13c621..9951f50 100644 --- a/README.md +++ b/README.md @@ -40,8 +40,5 @@ motivation： https://zhuanlan.zhihu.com/p/141738683 -## Documentation - -Since some of Ant Design 4's components is not well support for react 18, it is not recommended to upgrade to react 18.. Thanks：[qiujie8092916](https://github.com/qiujie8092916) offer the typescript edition \ No newline at end of file diff --git a/package.json b/package.json index 8f797b7..9ebb86f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antdfront", - "version": "2.1.1", + "version": "2.3.0", "description": "Antdfront is a set of multi tab experimental react microfrontend template", "main": "webpack.config.js", "scripts": { @@ -78,25 +78,28 @@ "@babel/preset-env": "^7.16.11", "@babel/preset-react": "^7.16.7", "@babel/preset-typescript": "^7.16.7", - "@lingui/cli": "^3.13.2", - "@lingui/macro": "^3.13.2", + "@lingui/cli": "^3.13.3", + "@lingui/macro": "^3.13.3", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", "@svgr/webpack": "^6.2.1", - "@types/lodash": "^4.14.181", + "@types/lingui__core": "^3.0.0", + "@types/lingui__macro": "^3.0.0", + "@types/lingui__react": "^3.0.0", + "@types/lodash": "^4.14.182", "@types/qs": "^6.9.7", - "@types/react": "^17.0.43", - "@types/react-dom": "^17.0.14", - "@typescript-eslint/eslint-plugin": "^5.19.0", - "@typescript-eslint/parser": "^5.19.0", - "@umijs/babel-plugin-auto-css-modules": "^3.5.22", - "babel-loader": "^8.2.4", + "@types/react": "^18.0.6", + "@types/react-dom": "^18.0.2", + "@typescript-eslint/eslint-plugin": "^5.20.0", + "@typescript-eslint/parser": "^5.20.0", + "@umijs/babel-plugin-auto-css-modules": "^3.5.23", + "babel-loader": "^8.2.5", "babel-plugin-dynamic-import-node": "^2.3.3", - "babel-plugin-import": "^1.13.3", + "babel-plugin-import": "^1.13.5", "babel-plugin-lodash": "^3.3.4", "babel-plugin-macros": "^3.1.0", "babel-plugin-named-asset-import": "^0.3.8", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", - "browserslist": "^4.20.2", + "browserslist": "^4.20.3", "case-sensitive-paths-webpack-plugin": "^2.4.0", "circular-dependency-plugin": "^5.2.2", "compression-webpack-plugin": "^9.2.0", @@ -105,7 +108,7 @@ "cross-port-killer": "^1.4.0", "css-loader": "^6.7.1", "css-minimizer-webpack-plugin": "^3.4.1", - "eslint": "^8.13.0", + "eslint": "^8.14.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-base": "^15.0.0", "eslint-config-prettier": "^8.5.0", @@ -116,7 +119,7 @@ "eslint-plugin-compat": "^4.0.2", "eslint-plugin-html": "^6.2.0", "eslint-plugin-import": "^2.26.0", - "eslint-plugin-jest": "^26.1.4", + "eslint-plugin-jest": "^26.1.5", "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-markdown": "^2.2.1", "eslint-plugin-prettier": "^4.0.0", @@ -131,7 +134,7 @@ "jest": "^27.5.1", "less": "^4.1.2", "less-loader": "^10.2.0", - "lint-staged": "12.3.7", + "lint-staged": "12.4.0", "mini-css-extract-plugin": "^2.6.0", "mockjs": "^1.1.0", "node-sass": "^7.0.1", @@ -149,11 +152,11 @@ "react-dev-utils": "^12.0.1", "react-refresh": "^0.12.0", "resolve-url-loader": "^5.0.0", - "sass": "^1.50.0", + "sass": "^1.50.1", "sass-loader": "^12.6.0", "source-map-loader": "^3.0.1", "style-loader": "^3.3.1", - "stylelint": "^14.6.1", + "stylelint": "^14.7.1", "stylelint-config-recommended": "^7.0.0", "stylelint-config-styled-components": "^0.1.1", "stylelint-processor-styled-components": "^1.10.0", @@ -171,31 +174,31 @@ }, "dependencies": { "@ant-design/icons": "^4.7.0", - "@ant-design/pro-card": "^1.19.3", - "@ant-design/pro-descriptions": "^1.10.64", - "@ant-design/pro-field": "^1.34.3", - "@ant-design/pro-form": "^1.63.0", - "@ant-design/pro-layout": "^6.34.10", - "@ant-design/pro-list": "^1.21.51", - "@ant-design/pro-table": "^2.71.4", + "@ant-design/pro-card": "^1.20.0", + "@ant-design/pro-descriptions": "^1.10.68", + "@ant-design/pro-field": "^1.34.6", + "@ant-design/pro-form": "^1.65.0", + "@ant-design/pro-layout": "^6.36.1", + "@ant-design/pro-list": "^1.21.56", + "@ant-design/pro-table": "^2.72.1", "@babel/runtime": "^7.17.9", "@koale/useworker": "^4.0.2", - "@lingui/core": "^3.13.2", - "@lingui/react": "^3.13.2", - "ahooks": "^3.3.0", - "antd": "^4.19.5", + "@lingui/core": "^3.13.3", + "@lingui/react": "^3.13.3", + "ahooks": "^3.3.8", + "antd": "^4.20.0", "classnames": "^2.3.1", "history": "^5.3.0", "lodash": "^4.17.21", "nano-memoize": "^1.3.0", - "nanoid": "^3.3.2", + "nanoid": "^3.3.3", "qiankun": "^2.7.0", "qs": "^6.10.3", - "react": "^17.0.0", + "react": "^18.0.0", "react-avatar-editor": "^12.0.0", - "react-dom": "^17.0.0", + "react-dom": "^18.0.0", "react-router-dom": "^6.3.0", - "recoil": "^0.7.1", + "recoil": "^0.7.2", "typescript": "^4.6.3", "umi-request": "^1.4.0" }, diff --git a/src/components/TabRoute/index.tsx b/src/components/TabRoute/index.tsx index ce92c48..4e90882 100644 --- a/src/components/TabRoute/index.tsx +++ b/src/components/TabRoute/index.tsx @@ -1,9 +1,9 @@ -import { i18n } from "@lingui/core"; -import { useCreation, useMemoizedFn } from "ahooks"; + +import { useMemoizedFn } from "ahooks"; import { Tabs } from "antd"; import _ from "lodash"; import memoized from "nano-memoize"; -import React, { Suspense, useRef } from "react"; +import React, { Suspense, useEffect, useRef } from "react"; // import Lru from "@/utils/lru"; import type { Location } from "react-router-dom"; // import { useWhyDidYouUpdate } from 'ahooks'; @@ -72,7 +72,7 @@ const TabRoute: React.FC = ({ routeConfig, matchPath }) => { /* * const updateTabList = */ - useCreation(() => { + useEffect(() => { const tab = tabList.current.get(matchPath); const newTab: TabObjectType = { name: routeConfig.name, @@ -136,7 +136,7 @@ const TabRoute: React.FC = ({ routeConfig, matchPath }) => { onEdit={(targetKey) => closeTab(targetKey)} > {[...tabList.current.values()].map((item) => ( - + }>{item.page} ))} diff --git a/src/index.tsx b/src/index.tsx index db19171..252682e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,9 +1,9 @@ import { start } from "qiankun"; -// react 18 -// import * as ReactDOMClient from 'react-dom/client'; // react 17 import React,{ Suspense } from "react"; -import ReactDom from "react-dom"; +// import ReactDom from "react-dom"; +// react 18 +import * as ReactDOMClient from 'react-dom/client'; import PageLoading from "@/components/PageLoading"; import { BrowserRouter } from "react-router-dom"; import { RecoilRoot } from "recoil"; @@ -18,16 +18,8 @@ runMock(); const initalContainer = document.getElementById("root") as Element; // react 18 -// const root = ReactDOMClient.createRoot(initalContainer); -// root.render( -// -// -// -// -// , -// ); - -ReactDom.render( +const root = ReactDOMClient.createRoot(initalContainer); +root.render( } > @@ -35,9 +27,19 @@ ReactDom.render( , - initalContainer, ); +// ReactDom.render( +// +// +// } > +// +// +// +// , +// initalContainer, +// ); + if ("serviceWorker" in navigator) { window.addEventListener("load", () => { navigator.serviceWorker diff --git a/src/layouts/BasicLayout.tsx b/src/layouts/BasicLayout.tsx index 7c27d14..dc5d2d2 100644 --- a/src/layouts/BasicLayout.tsx +++ b/src/layouts/BasicLayout.tsx @@ -1,6 +1,7 @@ import ProLayout, { SettingDrawer } from "@ant-design/pro-layout"; import defaultSettings from "@ant-design/pro-layout/es/defaultSettings"; -import { useCreation, useSafeState } from "ahooks"; +// import { useCreation, useSafeState } from "ahooks"; +import { useSafeState } from "ahooks"; import _ from "lodash"; import memoized from "nano-memoize"; import React, { Suspense } from "react"; @@ -25,10 +26,11 @@ import styles from "./BasicLayout.less"; // 从config里 把 匹配的信息 调出来 // 放这因为activekey 在 prolayout 和 tabroute之间共享。 -const pickRoutes = memoized((routes: DynamicRouteType[], pathname: string) => { +const pickRoutes = memoized((routes: DynamicRouteType[], pathname: string,locale: string) => { const matches = matchRoutes(routes, { pathname }); const routeConfig: any = matches ? matches[matches.length - 1].route : null; return { + locale, // just for cache routeConfig, // matchPath: matches ? matches.map(match => _.replace(match.route.path,'/*','')).join('/') : null // 解决下微端/*路径的问题 matchPath: routeConfig ? _.replace(routeConfig.key, "/*", "") : '', @@ -57,9 +59,9 @@ const BasicLayout: React.FC = () => { // [orgRoute, locale], // ); - const feedToProlayoutRoute = useCreation(() => _.cloneDeep(route), [locale]); + // const feedToProlayoutRoute = useCreation(() => _.cloneDeep(route), [locale,route]); - const { routeConfig, matchPath } = pickRoutes(route, location.pathname); + const { routeConfig, matchPath } = pickRoutes(route, location.pathname,locale); return (
@@ -67,7 +69,8 @@ const BasicLayout: React.FC = () => { style={{ height: "100vh", }} - menuDataRender={() => feedToProlayoutRoute} + // menuDataRender={() => feedToProlayoutRoute} + menuDataRender={() => route} menuItemRender={(item:any, dom:any) => (
{ diff --git a/tsconfig.json b/tsconfig.json index 5064250..b257d0d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,6 +21,9 @@ "@/*": ["./src/*"] } }, + "types": [ + "./node_modules/@lingui/macro/global", + ], "include": [ "src/**/*", "tests/**/*", diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js index c21fb07..fb565e7 100644 --- a/webpack/webpack.config.js +++ b/webpack/webpack.config.js @@ -75,18 +75,18 @@ const { swSrc } = paths; // const appPackageJson = require(paths.appPackageJson); -// const hasJsxRuntime = (() => { -// if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") { -// return false; -// } - -// try { -// require.resolve("react/jsx-runtime"); -// return true; -// } catch (e) { -// return false; -// } -// })(); +const hasJsxRuntime = (() => { + // if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") { + // return false; + // } + + try { + require.resolve("react/jsx-runtime"); + return true; + } catch (e) { + return false; + } +})(); // This is the production and development configuration. // It is focused on developer experience, fast rebuilds, and a minimal bundle.