mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

chore: share component render in scripts (#41603)

Browse Source 
* chore: share component render in scripts

* chore: code clean
This commit is contained in:
MadCcc 2023-04-03 11:59:25 +08:00 committed by GitHub
parent bf9eff66d7
commit fd53ce6258
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 75 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

49
scripts/check-cssinjs.js
View File

@ -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) {

59
scripts/collect-token-statistic.js
View File

@ -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),
),
);
},
});
(() => {

42
scripts/generate-cssinjs.js Normal file
View File

@ -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,
};