chore: share component render in scripts (#41603)

* chore: share component render in scripts

* chore: code clean

package.json

@@ -75,7 +75,7 @@
     "lint:demo": "eslint components/*/demo/*.md",
     "lint:deps": "antd-tools run deps-lint",
     "lint:md": "remark . -f -q",
-    "lint:style": "ts-node --project tsconfig.node.json scripts/check-cssinjs.js",
+    "lint:style": "ts-node --project tsconfig.node.json scripts/check-cssinjs",
     "lint:script": "eslint . --ext .js,.jsx,.ts,.tsx --cache",
     "pre-publish": "npm run test-all -- --skip-build",
     "prettier": "prettier -c --write **/* --cache",

scripts/check-cssinjs.js

@@ -1,15 +1,14 @@
 /* eslint-disable import/no-unresolved,no-console,global-require,import/no-dynamic-require */
 const chalk = require('chalk');
-const React = require('react');
-const ReactDOMServer = require('react-dom/server');
-const glob = require('glob');
-const path = require('path');
 const {
   StyleProvider,
   logicalPropertiesLinter,
   legacyNotSelectorLinter,
   parentSelectorLinter,
 } = require('@ant-design/cssinjs');
+const React = require('react');
+const ReactDOMServer = require('react-dom/server');
+const { generateCssinjs } = require('./generate-cssinjs');
 
 console.log(chalk.green(`🔥 Checking CSS-in-JS...`));
 
@@ -24,37 +23,17 @@ console.error = (msg) => {
   }
 };
 
-const EmptyElement = React.createElement('div');
-
-const styleFiles = glob.globSync(
-  path.join(
-    process.cwd(),
-    'components/!(version|config-provider|icon|auto-complete|col|row|time-picker)/style/index.?(ts|tsx)',
-  ),
-);
-
-styleFiles.forEach((file) => {
-  let useStyle = () => {};
-  if (file.includes('grid')) {
-    const { useColStyle, useRowStyle } = require(file);
-    useStyle = () => {
-      useRowStyle();
-      useColStyle();
-    };
-  } else {
-    useStyle = require(file).default;
-  }
-  const Component = () => {
-    useStyle('check');
-    return EmptyElement;
-  };
-  ReactDOMServer.renderToString(
-    React.createElement(
-      StyleProvider,
-      { linters: [logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter] },
-      React.createElement(Component),
-    ),
-  );
+generateCssinjs({
+  key: 'check',
+  render: (Component) => {
+    ReactDOMServer.renderToString(
+      React.createElement(
+        StyleProvider,
+        { linters: [logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter] },
+        React.createElement(Component),
+      ),
+    );
+  },
 });
 
 if (errorCount > 0) {

scripts/collect-token-statistic.js

@@ -1,61 +1,38 @@
 /* eslint-disable import/no-unresolved,no-console,global-require,import/no-dynamic-require */
-
 const chalk = require('chalk');
 const React = require('react');
 const ReactDOMServer = require('react-dom/server');
 const fs = require('fs-extra');
-const glob = require('glob');
-const path = require('path');
 const ProgressBar = require('progress');
 const { statistic } = require('../components/theme/util/statistic');
 const { DesignTokenContext } = require('../components/theme/internal');
 const seedToken = require('../components/theme/themes/seed');
+const { generateCssinjs, filenames } = require('./generate-cssinjs');
 
 console.log(chalk.green(`🔥 Collecting token statistics...`));
 
-const EmptyElement = React.createElement('div');
-
-const styleFiles = glob.globSync(
-  path.join(
-    process.cwd(),
-    'components/!(version|config-provider|icon|auto-complete|col|row|time-picker)/style/index.?(ts|tsx)',
-  ),
-);
-
 const bar = new ProgressBar('🚀 Collecting by component: [:bar] :component (:current/:total)', {
   complete: '=',
   incomplete: ' ',
-  total: styleFiles.length,
+  total: filenames.length,
 });
 
-styleFiles.forEach((file) => {
-  const pathArr = file.split('/');
-  const styleIndex = pathArr.lastIndexOf('style');
-  const componentName = pathArr[styleIndex - 1];
-  bar.tick(1, { component: componentName });
-  let useStyle = () => {};
-  if (file.includes('grid')) {
-    const { useColStyle, useRowStyle } = require(file);
-    useStyle = () => {
-      useRowStyle();
-      useColStyle();
-    };
-  } else {
-    useStyle = require(file).default;
-  }
-  const Component = () => {
-    useStyle('file');
-    return EmptyElement;
-  };
-  ReactDOMServer.renderToString(React.createElement(Component));
-  // Render wireframe
-  ReactDOMServer.renderToString(
-    React.createElement(
-      DesignTokenContext.Provider,
-      { value: { token: { ...seedToken, wireframe: true } } },
-      React.createElement(Component),
-    ),
-  );
+generateCssinjs({
+  key: 'file',
+  beforeRender: (componentName) => {
+    bar.tick(1, { component: componentName });
+  },
+  render: (Component) => {
+    ReactDOMServer.renderToString(React.createElement(Component));
+    // Render wireframe
+    ReactDOMServer.renderToString(
+      React.createElement(
+        DesignTokenContext.Provider,
+        { value: { token: { ...seedToken, wireframe: true } } },
+        React.createElement(Component),
+      ),
+    );
+  },
 });
 
 (() => {

scripts/generate-cssinjs.js

@@ -0,0 +1,42 @@
+const React = require('react');
+const glob = require('glob');
+const path = require('path');
+
+const styleFiles = glob.globSync(
+  path.join(
+    process.cwd(),
+    'components/!(version|config-provider|icon|auto-complete|col|row|time-picker)/style/index.?(ts|tsx)',
+  ),
+);
+
+module.exports = {
+  generateCssinjs({ key, beforeRender, render }) {
+    const EmptyElement = React.createElement('div');
+
+    styleFiles.forEach((file) => {
+      let useStyle = () => {};
+      if (file.includes('grid')) {
+        // eslint-disable-next-line global-require,import/no-dynamic-require
+        const { useColStyle, useRowStyle } = require(file);
+        useStyle = () => {
+          useRowStyle();
+          useColStyle();
+        };
+      } else {
+        // eslint-disable-next-line global-require,import/no-dynamic-require
+        useStyle = require(file).default;
+      }
+      const Component = () => {
+        useStyle(key);
+        return EmptyElement;
+      };
+
+      const pathArr = file.split('/');
+      const styleIndex = pathArr.lastIndexOf('style');
+      const componentName = pathArr[styleIndex - 1];
+      beforeRender?.(componentName);
+      render(Component);
+    });
+  },
+  filenames: styleFiles,
+};