feat: support mako build (ant-design#49109)

Jinbao1001 · xiaoxiao · zombieJ · web-flow · commit f56a4d68664d · 2024-06-13T20:37:02.000+08:00
* feat: mako build init

* chore: unlock

* dep: overrides dumi@alpha1

* chore: lock

* deps: update dumi version

* test: 查看磁盘

* chore: ping dumi

* chore: update deps

* chore: update deps

* chore: update deps

* chore: fix loading

* chore: ignore lint

* deps: update dumi

* fix: hydrate failed caused by modifyHtml

* deps: update dumi

* deps: update dumi

* deps: update dumi version

---------

Co-authored-by: xiaoxiao &lt;xiaoxiao.lh@antgroup.com&gt;
Co-authored-by: 二货机器人 &lt;smith3816@gmail.com&gt;
Co-authored-by: afc163 &lt;afc163@gmail.com&gt;
diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable global-require */
+/* eslint-disable global-require, import/no-unresolved */
 import React from 'react';
 import { BugOutlined, HistoryOutlined } from '@ant-design/icons';
 import { Button, Drawer, Grid, Popover, Timeline, Typography } from 'antd';
@@ -142,9 +142,11 @@ interface ChangelogInfo {
 }
 
 const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[] => {
+  const logFileName = `components-changelog-${lang}.json`;
+
   const data = useFetch({
     key: `component-changelog-${lang}`,
-    request: () => import(`../../../preset/components-changelog-${lang}.json`),
+    request: () => import(`../../../preset/${logFileName}`),
   });
   return React.useMemo(() => {
     const component = componentPath.replace(/-/g, '');
diff --git a/.dumi/theme/plugin.ts b/.dumi/theme/plugin.ts
@@ -181,26 +181,6 @@ const RoutesPlugin = (api: IApi) => {
       // exclude dynamic route path, to avoid deploy failed by `:id` directory
       .filter((f) => !f.path.includes(':'))
       .map((file) => {
-        let globalStyles = '';
-
-        // Debug for file content: uncomment this if need check raw out
-        // const tmpFileName = `_${file.path.replace(/\//g, '-')}`;
-        // const tmpFilePath = path.join(api.paths.absOutputPath, tmpFileName);
-        // fs.writeFileSync(tmpFilePath, file.content, 'utf8');
-
-        // extract all emotion style tags from body
-        file.content = file.content.replace(
-          /<style (data-emotion|data-sandpack)[\S\s]+?<\/style>/g,
-          (s) => {
-            globalStyles += s;
-
-            return '';
-          },
-        );
-
-        // insert emotion style tags to head
-        file.content = file.content.replace('</head>', `${globalStyles}</head>`);
-
         // 1. 提取 antd-style 样式
         const styles = extractEmotionStyle(file.content);
 
@@ -217,30 +197,6 @@ const RoutesPlugin = (api: IApi) => {
           file.content = addLinkStyle(file.content, cssFile);
         });
 
-        // Insert antd style to head
-        const matchRegex = /<style data-type="antd-cssinjs">([\S\s]+?)<\/style>/;
-        const matchList = file.content.match(matchRegex) || [];
-
-        // Init to order the `@layer`
-        let antdStyle = '@layer global, antd;';
-
-        matchList.forEach((text) => {
-          file.content = file.content.replace(text, '');
-          antdStyle += text.replace(matchRegex, '$1');
-        });
-
-        const cssFile = writeCSSFile('antd', antdStyle, antdStyle);
-        file.content = addLinkStyle(file.content, cssFile, true);
-
-        // Insert antd cssVar to head
-        const cssVarMatchRegex = /<style data-type="antd-css-var"[\S\s]+?<\/style>/;
-        const cssVarMatchList = file.content.match(cssVarMatchRegex) || [];
-
-        cssVarMatchList.forEach((text) => {
-          file.content = file.content.replace(text, '');
-          file.content = file.content.replace('<head>', `<head>${text}`);
-        });
-
         return file;
       }),
   );
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -8,13 +8,20 @@ import { version } from './package.json';
 
 export default defineConfig({
   plugins: ['dumi-plugin-color-chunk'],
+  manifest: {},
   conventionRoutes: {
     // to avoid generate routes for .dumi/pages/index/components/xx
     exclude: [new RegExp('index/components/')],
   },
-  ssr: process.env.NODE_ENV === 'production' ? {} : false,
+  ssr:
+    process.env.NODE_ENV === 'production'
+      ? {
+          builder: 'mako',
+        }
+      : false,
   hash: true,
   mfsu: false,
+  mako: {},
   crossorigin: {},
   outputPath: '_site',
   favicons: ['https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png'],
diff --git a/mako.config.json b/mako.config.json
@@ -0,0 +1,6 @@
+{
+  "optimization": {
+    "skipModules": false,
+    "concatenateModules": false
+  }
+}
diff --git a/package.json b/package.json
@@ -117,18 +117,18 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^7.0.2",
-    "@ant-design/cssinjs": "^1.19.1",
+    "@ant-design/cssinjs": "^1.20.0",
     "@ant-design/icons": "^5.3.7",
     "@ant-design/react-slick": "~1.1.2",
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.7",
     "@ctrl/tinycolor": "^3.6.1",
     "@rc-component/color-picker": "~1.5.3",
     "@rc-component/mutate-observer": "^1.1.0",
     "@rc-component/tour": "~1.15.0",
     "@rc-component/trigger": "^2.2.0",
     "classnames": "^2.5.1",
     "copy-to-clipboard": "^3.3.3",
-    "dayjs": "^1.11.10",
+    "dayjs": "^1.11.11",
     "qrcode.react": "^3.1.0",
     "rc-cascader": "~3.26.0",
     "rc-checkbox": "~3.3.0",
@@ -166,13 +166,13 @@
     "throttle-debounce": "^5.0.0"
   },
   "devDependencies": {
-    "@ant-design/compatible": "^5.1.2",
+    "@ant-design/compatible": "^5.1.3",
     "@ant-design/happy-work-theme": "^1.0.0",
     "@ant-design/tools": "^18.0.2",
     "@antv/g6": "^4.8.24",
-    "@babel/eslint-plugin": "^7.24.5",
-    "@biomejs/biome": "^1.7.2",
-    "@codesandbox/sandpack-react": "^2.13.10",
+    "@babel/eslint-plugin": "^7.24.7",
+    "@biomejs/biome": "^1.8.1",
+    "@codesandbox/sandpack-react": "^2.14.2",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
@@ -183,12 +183,12 @@
     "@madccc/duplicate-package-checker-webpack-plugin": "^1.0.0",
     "@microflash/rehype-figure": "^2.1.0",
     "@npmcli/run-script": "^8.1.0",
-    "@octokit/rest": "^20.1.0",
-    "@qixian.cs/github-contributors-list": "^2.0.1",
-    "@size-limit/file": "^11.1.2",
-    "@stackblitz/sdk": "^1.9.0",
+    "@octokit/rest": "^20.1.1",
+    "@qixian.cs/github-contributors-list": "^2.0.2",
+    "@size-limit/file": "^11.1.4",
+    "@stackblitz/sdk": "^1.10.0",
     "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/adm-zip": "^0.5.5",
@@ -203,19 +203,19 @@
     "@types/jest-axe": "^3.5.9",
     "@types/jest-environment-puppeteer": "^5.0.6",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@types/jquery": "^3.5.29",
-    "@types/jsdom": "^21.1.6",
-    "@types/lodash": "^4.17.0",
+    "@types/jquery": "^3.5.30",
+    "@types/jsdom": "^21.1.7",
+    "@types/lodash": "^4.17.5",
     "@types/minimist": "^1.2.5",
-    "@types/node": "^20.12.7",
+    "@types/node": "^20.14.2",
     "@types/nprogress": "^0.2.3",
     "@types/ora": "^3.2.0",
     "@types/pixelmatch": "^5.2.6",
-    "@types/pngjs": "^6.0.4",
-    "@types/prismjs": "^1.26.3",
+    "@types/pngjs": "^6.0.5",
+    "@types/prismjs": "^1.26.4",
     "@types/progress": "^2.0.7",
     "@types/qs": "^6.9.15",
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.3",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.3.0",
     "@types/react-highlight-words": "^0.20.0",
@@ -225,14 +225,14 @@
     "@types/tar": "^6.1.13",
     "@types/throttle-debounce": "^5.0.2",
     "@types/warning": "^3.0.3",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
-    "adm-zip": "^0.5.12",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
+    "adm-zip": "^0.5.14",
     "ali-oss": "^6.20.0",
-    "antd-img-crop": "^4.21.0",
+    "antd-img-crop": "^4.22.0",
     "antd-style": "^3.6.2",
     "antd-token-previewer": "^2.0.8",
-    "axios": "^1.6.8",
+    "axios": "^1.7.2",
     "chalk": "^4.1.2",
     "cheerio": "1.0.0-rc.12",
     "circular-dependency-plugin": "^5.2.2",
@@ -241,7 +241,7 @@
     "cross-fetch": "^4.0.0",
     "crypto": "^1.0.1",
     "dekko": "^0.2.1",
-    "dumi": "^2.3.2",
+    "dumi": "2.4.0-alpha.12",
     "dumi-plugin-color-chunk": "^1.1.0",
     "esbuild-loader": "^4.1.0",
     "eslint": "^8.57.0",
@@ -250,24 +250,24 @@
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-compat": "^4.2.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.3.0",
+    "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-markdown": "^5.0.0",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-unicorn": "^53.0.0",
     "fast-glob": "^3.3.2",
     "fetch-jsonp": "^1.3.0",
     "fs-extra": "^11.2.0",
     "gh-pages": "^6.1.1",
-    "glob": "^10.3.12",
+    "glob": "^10.4.1",
     "html2sketch": "^1.0.2",
     "http-server": "^14.1.1",
     "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
     "immer": "^10.1.1",
-    "inquirer": "^9.2.20",
+    "inquirer": "^9.2.23",
     "is-ci": "^3.0.1",
     "isomorphic-fetch": "^3.0.0",
     "jest": "^29.7.0",
@@ -278,10 +278,10 @@
     "jest-image-snapshot": "^6.4.0",
     "jest-puppeteer": "^10.0.1",
     "jquery": "^3.7.1",
-    "jsdom": "^24.0.0",
+    "jsdom": "^24.1.0",
     "jsonml-to-react-element": "^1.1.11",
     "jsonml.js": "^0.1.0",
-    "lint-staged": "^15.2.2",
+    "lint-staged": "^15.2.7",
     "lodash": "^4.17.21",
     "lunar-typescript": "^1.7.5",
     "lz-string": "^1.5.0",
@@ -294,15 +294,15 @@
     "ora": "^8.0.1",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.2",
     "prettier-plugin-jsdoc": "^1.3.0",
     "pretty-format": "^29.7.0",
     "prismjs": "^1.29.0",
-    "puppeteer": "^22.7.1",
+    "puppeteer": "^22.11.0",
     "qs": "^6.12.1",
     "rc-footer": "^0.6.8",
     "rc-tween-one": "^3.0.6",
-    "rc-virtual-list": "^3.11.5",
+    "rc-virtual-list": "^3.14.3",
     "react": "^18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-countup": "^6.5.3",
@@ -311,9 +311,9 @@
     "react-fast-marquee": "^1.6.4",
     "react-highlight-words": "^0.20.0",
     "react-infinite-scroll-component": "^6.1.0",
-    "react-intersection-observer": "^9.10.1",
+    "react-intersection-observer": "^9.10.3",
     "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.23.0",
+    "react-router-dom": "^6.23.1",
     "react-sticky-box": "^2.0.5",
     "regenerator-runtime": "^0.14.1",
     "rehype-stringify": "^10.0.0",
@@ -325,25 +325,25 @@
     "remark-preset-lint-recommended": "^7.0.0",
     "remark-rehype": "^11.1.0",
     "runes2": "^1.1.4",
-    "semver": "^7.6.0",
-    "sharp": "^0.33.3",
-    "simple-git": "^3.24.0",
-    "size-limit": "^11.1.2",
+    "semver": "^7.6.2",
+    "sharp": "^0.33.4",
+    "simple-git": "^3.25.0",
+    "size-limit": "^11.1.4",
     "spinnies": "^0.5.1",
-    "stylelint": "^16.4.0",
+    "stylelint": "^16.6.1",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-prettier": "^5.0.0",
     "sylvanas": "^0.6.1",
-    "tar": "^7.0.1",
+    "tar": "^7.2.0",
     "tar-fs": "^3.0.6",
-    "terser": "^5.31.0",
-    "tsx": "^4.15.1",
+    "terser": "^5.31.1",
+    "tsx": "^4.15.4",
     "typedoc": "^0.25.13",
     "typescript": "~5.4.5",
-    "vanilla-jsoneditor": "^0.23.2",
+    "vanilla-jsoneditor": "^0.23.7",
     "vanilla-tilt": "^1.8.1",
-    "webpack": "^5.91.0",
+    "webpack": "^5.92.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "xhr-mock": "^2.5.1"
   },
@@ -354,6 +354,11 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
+  "overrides": {
+    "dumi-plugin-color-chunk": {
+      "dumi": "^2.4.0-alpha.12"
+    }
+  },
   "size-limit": [
     {
       "path": "./dist/antd.min.js",
