chore: Migrate CJS to ESM (#41809)

* add devDependencies

* rerun ci

* rerun ci

* update

* update

* fix

* chore: update

* fix

* fix

---------

Co-authored-by: MadCcc <1075746765@qq.com>

components/tabs/demo/position.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
 import type { RadioChangeEvent } from 'antd';
 import { Radio, Space, Tabs } from 'antd';
+import React, { useState } from 'react';
 
 type TabPosition = 'left' | 'right' | 'top' | 'bottom';
 

package.json

@@ -55,11 +55,11 @@
     "clean-lockfiles": "rm -rf package-lock.json yarn.lock",
     "collect-token-statistic": "ts-node --project tsconfig.node.json scripts/collect-token-statistic.js",
     "token-meta": "node scripts/generate-token-meta.js",
-    "prestart": "npm run version & npm run collect-token-statistic & npm run token-meta",
+    "prestart": "npm run version && npm run collect-token-statistic && npm run token-meta",
-    "precompile": "npm run version & npm run collect-token-statistic & npm run token-meta",
+    "precompile": "npm run prestart",
     "pretest": "npm run version",
     "predist": "npm run version",
-    "presite": "npm run version & npm run collect-token-statistic & npm run token-meta",
+    "presite": "npm run prestart",
     "compile": "npm run clean && antd-tools run compile",
     "changelog": "git fetch origin && node ./scripts/print-changelog",
     "predeploy": "antd-tools run clean && npm run site && cp CNAME _site && npm run site:test",
@@ -95,7 +95,7 @@
     "site:test": "jest --config .jest.site.js --no-cache --force-exit",
     "test-image": "jest --config .jest.image.js --no-cache -i -u",
     "argos": "node ./scripts/argos-upload.js",
-    "version": "node ./scripts/generate-version",
+    "version": "ts-node --esm --project tsconfig.node.json scripts/generate-version.ts",
     "install-react-16": "npm i --no-save --legacy-peer-deps react@16 react-dom@16 @testing-library/react@12",
     "install-react-17": "npm i --no-save --legacy-peer-deps react@17 react-dom@17 @testing-library/react@12",
     "install-react-18": "npm i --no-save --legacy-peer-deps react@18 react-dom@18"
@@ -169,11 +169,14 @@
     "@qixian.cs/github-contributors-list": "^1.1.0",
     "@size-limit/file": "^8.1.0",
     "@stackblitz/sdk": "^1.3.0",
+    "@swc/core": "^1.3.50",
+    "@swc/helpers": "^0.5.0",
     "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.2",
     "@types/gtag.js": "^0.0.12",
+    "@types/isomorphic-fetch": "^0.0.36",
     "@types/jest": "^29.0.0",
     "@types/jest-axe": "^3.5.3",
     "@types/jest-environment-puppeteer": "^5.0.0",
@@ -181,7 +184,9 @@
     "@types/jquery": "^3.5.14",
     "@types/lodash": "^4.14.139",
     "@types/lz-string": "^1.3.34",
+    "@types/node": "^18.15.11",
     "@types/prismjs": "^1.26.0",
+    "@types/progress": "^2.0.5",
     "@types/puppeteer": "^7.0.4",
     "@types/qs": "^6.9.7",
     "@types/react": "^18.0.0",
@@ -269,6 +274,7 @@
     "react-router-dom": "^6.0.2",
     "react-sticky-box": "^2.0.0",
     "react-window": "^1.8.5",
+    "regenerator-runtime": "^0.13.11",
     "remark": "^14.0.1",
     "remark-cli": "^11.0.0",
     "remark-lint": "^9.0.0",

scripts/css-variable-sync.js

@@ -1,224 +0,0 @@
-/**
- * ZombieJ: Since we still need mainly maintain the `default.less`. Create a script that generate
- * `variable.less` from the `default.less`
- */
-
-const fse = require('fs-extra');
-const path = require('path');
-const chalk = require('chalk');
-
-const folderPath = path.resolve(__dirname, '..', 'components', 'style', 'themes');
-const targetPath = path.resolve(folderPath, 'variable.less');
-
-const defaultContent = fse.readFileSync(path.resolve(folderPath, 'default.less'), 'utf8');
-
-// const variableContent = fse.readFileSync(
-//   path.resolve(__dirname, '..', 'components', 'style', 'themes', 'variable.less'),
-//   'utf8',
-// );
-
-let variableContent = defaultContent;
-
-function replaceVariable(key, value) {
-  variableContent = variableContent.replace(new RegExp(`@${key}:[^;]*;`), `@${key}: ${value};`);
-}
-
-function replaceVariableContent(key, content) {
-  const lines = variableContent.split(/\n/);
-  const startIndex = lines.findIndex((line) =>
-    line.includes(`[CSS-VARIABLE-REPLACE-BEGIN: ${key}]`),
-  );
-  const endIndex = lines.findIndex((line) => line.includes(`[CSS-VARIABLE-REPLACE-END: ${key}]`));
-
-  if (startIndex !== -1 && endIndex !== -1) {
-    variableContent = [...lines.slice(0, startIndex), content, ...lines.slice(endIndex + 1)].join(
-      '\n',
-    );
-  }
-}
-
-replaceVariable('theme', 'variable');
-
-replaceVariableContent(
-  'html-variables',
-  `
-html {
-  @base-primary: @blue-6;
-
-  // ========= Primary Color =========
-  --@{ant-prefix}-primary-color: @base-primary;
-  --@{ant-prefix}-primary-color-hover: color(~\`colorPalette('@{base-primary}', 5) \`);
-  --@{ant-prefix}-primary-color-active: color(~\`colorPalette('@{base-primary}', 7) \`);
-  --@{ant-prefix}-primary-color-outline: fade(@base-primary, @outline-fade);
-
-  // Legacy
-  @legacy-primary-1: color(~\`colorPalette('@{base-primary}', 1) \`);
-
-  --@{ant-prefix}-primary-1: @legacy-primary-1;
-  --@{ant-prefix}-primary-2: color(~\`colorPalette('@{base-primary}', 2) \`);
-  --@{ant-prefix}-primary-3: color(~\`colorPalette('@{base-primary}', 3) \`);
-  --@{ant-prefix}-primary-4: color(~\`colorPalette('@{base-primary}', 4) \`);
-  --@{ant-prefix}-primary-5: color(~\`colorPalette('@{base-primary}', 5) \`);
-  --@{ant-prefix}-primary-6: @base-primary;
-  --@{ant-prefix}-primary-7: color(~\`colorPalette('@{base-primary}', 7) \`);
-
-  // Deprecated
-  --@{ant-prefix}-primary-color-deprecated-pure: ~'';
-  --@{ant-prefix}-primary-color-deprecated-l-35: lighten(@base-primary, 35%);
-  --@{ant-prefix}-primary-color-deprecated-l-20: lighten(@base-primary, 20%);
-  --@{ant-prefix}-primary-color-deprecated-t-20: tint(@base-primary, 20%);
-  --@{ant-prefix}-primary-color-deprecated-t-50: tint(@base-primary, 50%);
-  --@{ant-prefix}-primary-color-deprecated-f-12: fade(@base-primary, 12%);
-  --@{ant-prefix}-primary-color-active-deprecated-f-30: fade(@legacy-primary-1, 30%);
-  --@{ant-prefix}-primary-color-active-deprecated-d-02: darken(@legacy-primary-1, 2%);
-
-  // ========= Success Color =========
-  --@{ant-prefix}-success-color: @green-6;
-  --@{ant-prefix}-success-color-hover: color(~\`colorPalette('@{green-6}', 5) \`);
-  --@{ant-prefix}-success-color-active: color(~\`colorPalette('@{green-6}', 7) \`);
-  --@{ant-prefix}-success-color-outline: fade(@green-6, @outline-fade);
-  --@{ant-prefix}-success-color-deprecated-bg: ~\`colorPalette('@{green-6}', 1) \`;
-  --@{ant-prefix}-success-color-deprecated-border: ~\`colorPalette('@{green-6}', 3) \`;
-
-  // ========== Error Color ==========
-  --@{ant-prefix}-error-color: @red-5;
-  --@{ant-prefix}-error-color-hover: color(~\`colorPalette('@{red-5}', 5) \`);
-  --@{ant-prefix}-error-color-active: color(~\`colorPalette('@{red-5}', 7) \`);
-  --@{ant-prefix}-error-color-outline: fade(@red-5, @outline-fade);
-  --@{ant-prefix}-error-color-deprecated-bg: ~\`colorPalette('@{red-5}', 1) \`;
-  --@{ant-prefix}-error-color-deprecated-border: ~\`colorPalette('@{red-5}', 3) \`;
-
-  // ========= Warning Color =========
-  --@{ant-prefix}-warning-color: @gold-6;
-  --@{ant-prefix}-warning-color-hover: color(~\`colorPalette('@{gold-6}', 5) \`);
-  --@{ant-prefix}-warning-color-active: color(~\`colorPalette('@{gold-6}', 7) \`);
-  --@{ant-prefix}-warning-color-outline: fade(@gold-6, @outline-fade);
-  --@{ant-prefix}-warning-color-deprecated-bg: ~\`colorPalette('@{gold-6}', 1) \`;
-  --@{ant-prefix}-warning-color-deprecated-border: ~\`colorPalette('@{gold-6}', 3) \`;
-
-  // ========== Info Color ===========
-  --@{ant-prefix}-info-color: @base-primary;
-  --@{ant-prefix}-info-color-deprecated-bg: ~\`colorPalette('@{base-primary}', 1) \`;
-  --@{ant-prefix}-info-color-deprecated-border: ~\`colorPalette('@{base-primary}', 3) \`;
-}
-`.trim(),
-);
-
-// >>> Primary
-replaceVariable('primary-color', "~'var(--@{ant-prefix}-primary-color)'");
-replaceVariable('primary-color-hover', "~'var(--@{ant-prefix}-primary-color-hover)'");
-replaceVariable('primary-color-active', "~'var(--@{ant-prefix}-primary-color-active)'");
-replaceVariable('primary-color-outline', "~'var(--@{ant-prefix}-primary-color-outline)'");
-
-replaceVariable('processing-color', '@primary-color');
-
-// >>> Info
-replaceVariable('info-color', "~'var(--@{ant-prefix}-info-color)'");
-replaceVariable('info-color-deprecated-bg', "~'var(--@{ant-prefix}-info-color-deprecated-bg)'");
-replaceVariable(
-  'info-color-deprecated-border',
-  "~'var(--@{ant-prefix}-info-color-deprecated-border)'",
-);
-
-// >>> Success
-replaceVariable('success-color', "~'var(--@{ant-prefix}-success-color)'");
-replaceVariable('success-color-hover', "~'var(--@{ant-prefix}-success-color-hover)'");
-replaceVariable('success-color-active', "~'var(--@{ant-prefix}-success-color-active)'");
-replaceVariable('success-color-outline', "~'var(--@{ant-prefix}-success-color-outline)'");
-replaceVariable(
-  'success-color-deprecated-bg',
-  "~'var(--@{ant-prefix}-success-color-deprecated-bg)'",
-);
-replaceVariable(
-  'success-color-deprecated-border',
-  "~'var(--@{ant-prefix}-success-color-deprecated-border)'",
-);
-
-// >>> Warning
-replaceVariable('warning-color', "~'var(--@{ant-prefix}-warning-color)'");
-replaceVariable('warning-color-hover', "~'var(--@{ant-prefix}-warning-color-hover)'");
-replaceVariable('warning-color-active', "~'var(--@{ant-prefix}-warning-color-active)'");
-replaceVariable('warning-color-outline', "~'var(--@{ant-prefix}-warning-color-outline)'");
-replaceVariable(
-  'warning-color-deprecated-bg',
-  "~'var(--@{ant-prefix}-warning-color-deprecated-bg)'",
-);
-replaceVariable(
-  'warning-color-deprecated-border',
-  "~'var(--@{ant-prefix}-warning-color-deprecated-border)'",
-);
-
-// >>> Error
-replaceVariable('error-color', "~'var(--@{ant-prefix}-error-color)'");
-replaceVariable('error-color-hover', "~'var(--@{ant-prefix}-error-color-hover)'");
-replaceVariable('error-color-active', "~'var(--@{ant-prefix}-error-color-active)'");
-replaceVariable('error-color-outline', "~'var(--@{ant-prefix}-error-color-outline)'");
-replaceVariable('error-color-deprecated-bg', "~'var(--@{ant-prefix}-error-color-deprecated-bg)'");
-replaceVariable(
-  'error-color-deprecated-border',
-  "~'var(--@{ant-prefix}-error-color-deprecated-border)'",
-);
-
-// >>> Primary Level Color
-replaceVariable('primary-1', "~'var(--@{ant-prefix}-primary-1)'");
-replaceVariable('primary-2', "~'var(--@{ant-prefix}-primary-2)'");
-replaceVariable('primary-3', "~'var(--@{ant-prefix}-primary-3)'");
-replaceVariable('primary-4', "~'var(--@{ant-prefix}-primary-4)'");
-replaceVariable('primary-5', "~'var(--@{ant-prefix}-primary-5)'");
-replaceVariable('primary-6', "~'var(--@{ant-prefix}-primary-6)'");
-replaceVariable('primary-7', "~'var(--@{ant-prefix}-primary-7)'");
-
-// Link
-replaceVariable('link-hover-color', '@primary-color-hover');
-replaceVariable('link-active-color', '@primary-color-active');
-
-replaceVariable(
-  'table-selected-row-hover-bg',
-  "~'var(--@{ant-prefix}-primary-color-active-deprecated-d-02)'",
-);
-
-replaceVariable(
-  'picker-basic-cell-hover-with-range-color',
-  "~'var(--@{ant-prefix}-primary-color-deprecated-l-35)'",
-);
-replaceVariable(
-  'picker-date-hover-range-border-color',
-  "~'var(--@{ant-prefix}-primary-color-deprecated-l-20)'",
-);
-
-replaceVariable(
-  'calendar-column-active-bg',
-  "~'var(--@{ant-prefix}-primary-color-active-deprecated-f-30)'",
-);
-
-replaceVariable(
-  'slider-handle-color-focus',
-  "~'var(--@{ant-prefix}-primary-color-deprecated-t-20)'",
-);
-replaceVariable(
-  'slider-handle-color-focus-shadow',
-  "~'var(--@{ant-prefix}-primary-color-deprecated-f-12)'",
-);
-replaceVariable(
-  'slider-dot-border-color-active',
-  "~'var(--@{ant-prefix}-primary-color-deprecated-t-50)'",
-);
-
-replaceVariable(
-  'transfer-item-selected-hover-bg',
-  "~'var(--@{ant-prefix}-primary-color-active-deprecated-d-02)'",
-);
-
-replaceVariable('alert-success-border-color', '@success-color-deprecated-border');
-replaceVariable('alert-success-bg-color', '@success-color-deprecated-bg');
-replaceVariable('alert-info-border-color', '@info-color-deprecated-border');
-replaceVariable('alert-info-bg-color', '@info-color-deprecated-bg');
-replaceVariable('alert-warning-border-color', '@warning-color-deprecated-border');
-replaceVariable('alert-warning-bg-color', '@warning-color-deprecated-bg');
-replaceVariable('alert-error-border-color', '@error-color-deprecated-border');
-replaceVariable('alert-error-bg-color', '@error-color-deprecated-bg');
-
-fse.writeFileSync(targetPath, variableContent, 'utf8');
-
-// eslint-disable-next-line no-console
-console.log(chalk.green('Success! Replaced path:'), targetPath);

scripts/generate-version.js → scripts/generate-version.ts

@@ -1,7 +1,8 @@
-const fs = require('fs-extra');
+import fs from 'fs';
-const path = require('path');
+import path from 'path';
+import localPackage from '../package.json';
 
-const { version } = require('../package.json');
+const { version } = localPackage;
 
 fs.writeFileSync(
   path.join(__dirname, '..', 'components', 'version', 'version.ts'),

scripts/tmp-mv-dumi-site.js

@@ -1,23 +0,0 @@
-/**
- * 将 demo 迁移到临时文件夹，以供 v5-site-upgrade 使用。
- * 升级 v5 完毕后可删除。
- */
-
-const glob = require('glob');
-const fs = require('fs-extra');
-const path = require('path');
-
-const tmpFolder = `~demo`;
-
-glob('components/**/*.md', (er, files) => {
-  fs.ensureDirSync(tmpFolder);
-  fs.emptyDirSync(tmpFolder);
-
-  files.forEach((file) => {
-    const tmpFilePath = path.resolve(tmpFolder, file);
-    const tmpFolderPath = path.dirname(tmpFilePath);
-    fs.ensureDirSync(tmpFolderPath);
-
-    fs.copyFileSync(file, tmpFilePath);
-  });
-});

tsconfig.node.json

@@ -1,7 +1,11 @@
 {
   "extends": "./tsconfig.json",
+  "ts-node": {
+    "swc": true
+  },
   "compilerOptions": {
     "module": "CommonJS",
-    "types": ["node"]
+    "types": ["node"],
+    "resolveJsonModule": true
   }
 }