chore: add css var builg
tangjinzhou
parent
414338bafd
commit
d3a1be04fb
|
|
@ -0,0 +1,195 @@
|
|||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const defaultVars = require('./scripts/default-vars');
|
||||
const darkVars = require('./scripts/dark-vars');
|
||||
const compactVars = require('./scripts/compact-vars');
|
||||
|
||||
function generateThemeFileContent(theme) {
|
||||
return `const { ${theme}ThemeSingle } = require('./theme');\nconst defaultTheme = require('./default-theme');\n
|
||||
module.exports = {
|
||||
...defaultTheme,
|
||||
...${theme}ThemeSingle
|
||||
}`;
|
||||
}
|
||||
|
||||
// We need compile additional content for antd user
|
||||
function finalizeCompile() {
|
||||
if (fs.existsSync(path.join(__dirname, './lib'))) {
|
||||
// Build a entry less file to dist/antd.less
|
||||
const componentsPath = path.join(process.cwd(), 'components');
|
||||
let componentsLessContent = '';
|
||||
// Build components in one file: lib/style/components.less
|
||||
fs.readdir(componentsPath, (err, files) => {
|
||||
files.forEach(file => {
|
||||
if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) {
|
||||
componentsLessContent += `@import "../${path.posix.join(
|
||||
file,
|
||||
'style',
|
||||
'index-pure.less',
|
||||
)}";\n`;
|
||||
}
|
||||
});
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'lib', 'style', 'components.less'),
|
||||
componentsLessContent,
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function buildThemeFile(theme, vars) {
|
||||
// Build less entry file: dist/antd.${theme}.less
|
||||
if (theme !== 'default') {
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'dist', `antd.${theme}.less`),
|
||||
`@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`,
|
||||
);
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(`Built a entry less file to dist/antd.${theme}.less`);
|
||||
} else {
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'dist', `default-theme.js`),
|
||||
`module.exports = ${JSON.stringify(vars, null, 2)};\n`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Build ${theme}.js: dist/${theme}-theme.js, for less-loader
|
||||
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'dist', `theme.js`),
|
||||
`const ${theme}ThemeSingle = ${JSON.stringify(vars, null, 2)};\n`,
|
||||
{
|
||||
flag: 'a',
|
||||
},
|
||||
);
|
||||
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'dist', `${theme}-theme.js`),
|
||||
generateThemeFileContent(theme),
|
||||
);
|
||||
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(`Built a ${theme} theme js file to dist/${theme}-theme.js`);
|
||||
}
|
||||
|
||||
function finalizeDist() {
|
||||
if (fs.existsSync(path.join(__dirname, './dist'))) {
|
||||
// Build less entry file: dist/antd.less
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'dist', 'antd.less'),
|
||||
'@import "../lib/style/default.less";\n@import "../lib/style/components.less";',
|
||||
);
|
||||
// eslint-disable-next-line no-console
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'dist', 'theme.js'),
|
||||
`const defaultTheme = require('./default-theme.js');\n`,
|
||||
);
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('Built a entry less file to dist/antd.less');
|
||||
buildThemeFile('default', defaultVars);
|
||||
buildThemeFile('dark', darkVars);
|
||||
buildThemeFile('compact', compactVars);
|
||||
buildThemeFile('variable', {});
|
||||
fs.writeFileSync(
|
||||
path.join(process.cwd(), 'dist', `theme.js`),
|
||||
`
|
||||
function getThemeVariables(options = {}) {
|
||||
let themeVar = {
|
||||
'hack': \`true;@import "\${require.resolve('antd/lib/style/color/colorPalette.less')}";\`,
|
||||
...defaultTheme
|
||||
};
|
||||
if(options.dark) {
|
||||
themeVar = {
|
||||
...themeVar,
|
||||
...darkThemeSingle
|
||||
}
|
||||
}
|
||||
if(options.compact){
|
||||
themeVar = {
|
||||
...themeVar,
|
||||
...compactThemeSingle
|
||||
}
|
||||
}
|
||||
return themeVar;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
darkThemeSingle,
|
||||
compactThemeSingle,
|
||||
getThemeVariables
|
||||
}`,
|
||||
{
|
||||
flag: 'a',
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function isComponentStyleEntry(file) {
|
||||
return file.path.match(/style(\/|\\)index\.tsx/);
|
||||
}
|
||||
|
||||
function needTransformStyle(content) {
|
||||
return content.includes('../../style/index.less') || content.includes('./index.less');
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
compile: {
|
||||
includeLessFile: [/(\/|\\)components(\/|\\)style(\/|\\)default.less$/],
|
||||
transformTSFile(file) {
|
||||
if (isComponentStyleEntry(file)) {
|
||||
let content = file.contents.toString();
|
||||
|
||||
if (needTransformStyle(content)) {
|
||||
const cloneFile = file.clone();
|
||||
|
||||
// Origin
|
||||
content = content.replace('../../style/index.less', '../../style/default.less');
|
||||
cloneFile.contents = Buffer.from(content);
|
||||
|
||||
return cloneFile;
|
||||
}
|
||||
}
|
||||
},
|
||||
transformFile(file) {
|
||||
if (isComponentStyleEntry(file)) {
|
||||
const indexLessFilePath = file.path.replace('index.tsx', 'index.less');
|
||||
|
||||
if (fs.existsSync(indexLessFilePath)) {
|
||||
// We put origin `index.less` file to `index-pure.less`
|
||||
const pureFile = file.clone();
|
||||
pureFile.contents = Buffer.from(fs.readFileSync(indexLessFilePath, 'utf8'));
|
||||
pureFile.path = pureFile.path.replace('index.tsx', 'index-pure.less');
|
||||
|
||||
// Rewrite `index.less` file with `root-entry-name`
|
||||
const indexLessFile = file.clone();
|
||||
indexLessFile.contents = Buffer.from(
|
||||
[
|
||||
// Inject variable
|
||||
'@root-entry-name: default;',
|
||||
// Point to origin file
|
||||
"@import './index-pure.less';",
|
||||
].join('\n\n'),
|
||||
);
|
||||
indexLessFile.path = indexLessFile.path.replace('index.tsx', 'index.less');
|
||||
|
||||
return [indexLessFile, pureFile];
|
||||
}
|
||||
}
|
||||
|
||||
return [];
|
||||
},
|
||||
lessConfig: {
|
||||
modifyVars: {
|
||||
'root-entry-name': 'default',
|
||||
},
|
||||
},
|
||||
finalize: finalizeCompile,
|
||||
},
|
||||
dist: {
|
||||
finalize: finalizeDist,
|
||||
},
|
||||
generateThemeFileContent,
|
||||
bail: true,
|
||||
};
|
||||
|
|
@ -76,3 +76,5 @@ vetur/
|
|||
report.html
|
||||
|
||||
site/src/router/demoRoutes.js
|
||||
|
||||
components/version/version.tsx
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
// Read all the api from current documents
|
||||
|
||||
const glob = require('glob');
|
||||
const fs = require('fs');
|
||||
|
||||
const COMPONENT_NAME = /components\/([^/]*)/;
|
||||
const PROP_NAME = /^\s*\|\s*([^\s|]*)/;
|
||||
|
||||
const components = {};
|
||||
|
||||
function mappingPropLine(component, line) {
|
||||
const propMatch = line.match(PROP_NAME);
|
||||
if (!propMatch) return;
|
||||
|
||||
const propName = propMatch[1];
|
||||
if (!/^[a-z]/.test(propName)) return;
|
||||
|
||||
components[component] = Array.from(new Set([...(components[component] || []), propName]));
|
||||
}
|
||||
|
||||
function apiReport(entities) {
|
||||
const apis = {};
|
||||
Object.keys(entities).forEach(component => {
|
||||
const apiList = entities[component];
|
||||
apiList.forEach(api => {
|
||||
if (typeof apis[api] === 'function') {
|
||||
apis[api] = [];
|
||||
}
|
||||
apis[api] = [...(apis[api] || []), component];
|
||||
});
|
||||
});
|
||||
|
||||
return apis;
|
||||
}
|
||||
|
||||
function printReport(apis) {
|
||||
const apiList = Object.keys(apis).map(api => ({
|
||||
name: api,
|
||||
componentList: apis[api],
|
||||
}));
|
||||
apiList.sort((a, b) => b.componentList.length - a.componentList.length);
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('| name | components | comments |');
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('| ---- | ---------- | -------- |');
|
||||
apiList.forEach(({ name, componentList }) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('|', name, '|', componentList.join(', '), '| |');
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = () => {
|
||||
glob('components/*/*.md', (error, files) => {
|
||||
files.forEach(filePath => {
|
||||
// Read md file to parse content
|
||||
const content = fs.readFileSync(filePath, 'utf8');
|
||||
const component = filePath.match(COMPONENT_NAME)[1];
|
||||
|
||||
// Parse lines to get API
|
||||
const lines = content.split(/[\r\n]+/);
|
||||
lines.forEach(line => {
|
||||
mappingPropLine(component, line);
|
||||
});
|
||||
});
|
||||
|
||||
printReport(apiReport(components));
|
||||
});
|
||||
};
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
'use strict';
|
||||
|
||||
require('colorful').colorful();
|
||||
require('colorful').isatty = true;
|
||||
const gulp = require('gulp');
|
||||
const program = require('commander');
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
'use strict';
|
||||
|
||||
const runCmd = require('./runCmd');
|
||||
|
||||
module.exports = function (done) {
|
||||
if (process.env.NPM_CLI) {
|
||||
done(process.env.NPM_CLI);
|
||||
return;
|
||||
}
|
||||
runCmd('which', ['tnpm'], code => {
|
||||
let npm = 'npm';
|
||||
if (!code) {
|
||||
npm = 'tnpm';
|
||||
}
|
||||
done(npm);
|
||||
});
|
||||
};
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/* eslint-disable no-console */
|
||||
const { getProjectPath } = require('./utils/projectHelper');
|
||||
const { getProjectPath, getConfig } = require('./utils/projectHelper');
|
||||
const runCmd = require('./runCmd');
|
||||
const getBabelCommonConfig = require('./getBabelCommonConfig');
|
||||
const merge2 = require('merge2');
|
||||
|
|
@ -26,6 +26,7 @@ const stripCode = require('gulp-strip-code');
|
|||
const compareVersions = require('compare-versions');
|
||||
const getTSCommonConfig = require('./getTSCommonConfig');
|
||||
const replaceLib = require('./replaceLib');
|
||||
const sortApiTable = require('./sortApiTable');
|
||||
|
||||
const packageJson = require(getProjectPath('package.json'));
|
||||
const tsDefaultReporter = ts.reporter.defaultReporter();
|
||||
|
|
@ -49,11 +50,17 @@ function dist(done) {
|
|||
}
|
||||
|
||||
const info = stats.toJson();
|
||||
const { dist: { finalize } = {}, bail } = getConfig();
|
||||
|
||||
if (stats.hasErrors()) {
|
||||
console.error(info.errors);
|
||||
(info.errors || []).forEach(error => {
|
||||
console.error(error);
|
||||
});
|
||||
// https://github.com/ant-design/ant-design/pull/31662
|
||||
if (bail) {
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
if (stats.hasWarnings()) {
|
||||
console.warn(info.warnings);
|
||||
}
|
||||
|
|
@ -68,6 +75,11 @@ function dist(done) {
|
|||
version: false,
|
||||
});
|
||||
console.log(buildInfo);
|
||||
// Additional process of dist finalize
|
||||
if (finalize) {
|
||||
console.log('[Dist] Finalization...');
|
||||
finalize();
|
||||
}
|
||||
done(0);
|
||||
});
|
||||
}
|
||||
|
|
@ -103,7 +115,7 @@ function babelify(js, modules) {
|
|||
if (modules === false) {
|
||||
babelConfig.plugins.push(replaceLib);
|
||||
}
|
||||
let stream = js.pipe(babel(babelConfig)).pipe(
|
||||
const stream = js.pipe(babel(babelConfig)).pipe(
|
||||
through2.obj(function z(file, encoding, next) {
|
||||
this.push(file.clone());
|
||||
if (file.path.match(/\/style\/index\.(js|jsx|ts|tsx)$/)) {
|
||||
|
|
@ -128,33 +140,40 @@ function babelify(js, modules) {
|
|||
next();
|
||||
}),
|
||||
);
|
||||
if (modules === false) {
|
||||
stream = stream.pipe(
|
||||
stripCode({
|
||||
start_comment: '@remove-on-es-build-begin',
|
||||
end_comment: '@remove-on-es-build-end',
|
||||
}),
|
||||
);
|
||||
}
|
||||
return stream.pipe(gulp.dest(modules === false ? esDir : libDir));
|
||||
}
|
||||
|
||||
function compile(modules) {
|
||||
const { compile: { transformTSFile, transformFile, includeLessFile = [] } = {} } = getConfig();
|
||||
rimraf.sync(modules !== false ? libDir : esDir);
|
||||
|
||||
// =============================== LESS ===============================
|
||||
const less = gulp
|
||||
.src(['components/**/*.less'])
|
||||
.pipe(
|
||||
through2.obj(function (file, encoding, next) {
|
||||
this.push(file.clone());
|
||||
// Replace content
|
||||
const cloneFile = file.clone();
|
||||
const content = file.contents.toString().replace(/^\uFEFF/, '');
|
||||
|
||||
cloneFile.contents = Buffer.from(content);
|
||||
|
||||
// Clone for css here since `this.push` will modify file.path
|
||||
const cloneCssFile = cloneFile.clone();
|
||||
|
||||
this.push(cloneFile);
|
||||
|
||||
// Transform less file
|
||||
if (
|
||||
file.path.match(/\/style\/index\.less$/) ||
|
||||
file.path.match(/\/style\/v2-compatible-reset\.less$/)
|
||||
file.path.match(/(\/|\\)style(\/|\\)index\.less$/) ||
|
||||
file.path.match(/(\/|\\)style(\/|\\)v2-compatible-reset\.less$/) ||
|
||||
includeLessFile.some(regex => file.path.match(regex))
|
||||
) {
|
||||
transformLess(file.path)
|
||||
transformLess(cloneCssFile.contents.toString(), cloneCssFile.path)
|
||||
.then(css => {
|
||||
file.contents = Buffer.from(css);
|
||||
file.path = file.path.replace(/\.less$/, '.css');
|
||||
this.push(file);
|
||||
cloneCssFile.contents = Buffer.from(css);
|
||||
cloneCssFile.path = cloneCssFile.path.replace(/\.less$/, '.css');
|
||||
this.push(cloneCssFile);
|
||||
next();
|
||||
})
|
||||
.catch(e => {
|
||||
|
|
@ -170,6 +189,25 @@ function compile(modules) {
|
|||
.src(['components/**/*.@(png|svg)'])
|
||||
.pipe(gulp.dest(modules === false ? esDir : libDir));
|
||||
let error = 0;
|
||||
|
||||
// =============================== FILE ===============================
|
||||
let transformFileStream;
|
||||
|
||||
if (transformFile) {
|
||||
transformFileStream = gulp
|
||||
.src(['components/**/*.tsx'])
|
||||
.pipe(
|
||||
through2.obj(function (file, encoding, next) {
|
||||
let nextFile = transformFile(file) || file;
|
||||
nextFile = Array.isArray(nextFile) ? nextFile : [nextFile];
|
||||
nextFile.forEach(f => this.push(f));
|
||||
next();
|
||||
}),
|
||||
)
|
||||
.pipe(gulp.dest(modules === false ? esDir : libDir));
|
||||
}
|
||||
|
||||
// ================================ TS ================================
|
||||
const source = [
|
||||
'components/**/*.js',
|
||||
'components/**/*.jsx',
|
||||
|
|
@ -179,7 +217,29 @@ function compile(modules) {
|
|||
'!components/*/__tests__/*',
|
||||
];
|
||||
|
||||
const tsResult = gulp.src(source).pipe(
|
||||
// Strip content if needed
|
||||
let sourceStream = gulp.src(source);
|
||||
if (modules === false) {
|
||||
sourceStream = sourceStream.pipe(
|
||||
stripCode({
|
||||
start_comment: '@remove-on-es-build-begin',
|
||||
end_comment: '@remove-on-es-build-end',
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
if (transformTSFile) {
|
||||
sourceStream = sourceStream.pipe(
|
||||
through2.obj(function (file, encoding, next) {
|
||||
let nextFile = transformTSFile(file) || file;
|
||||
nextFile = Array.isArray(nextFile) ? nextFile : [nextFile];
|
||||
nextFile.forEach(f => this.push(f));
|
||||
next();
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
const tsResult = sourceStream.pipe(
|
||||
ts(tsConfig, {
|
||||
error(e) {
|
||||
tsDefaultReporter.error(e);
|
||||
|
|
@ -199,7 +259,7 @@ function compile(modules) {
|
|||
tsResult.on('end', check);
|
||||
const tsFilesStream = babelify(tsResult.js, modules);
|
||||
const tsd = tsResult.dts.pipe(gulp.dest(modules === false ? esDir : libDir));
|
||||
return merge2([less, tsFilesStream, tsd, assets]);
|
||||
return merge2([less, tsFilesStream, tsd, assets, transformFileStream].filter(s => s));
|
||||
}
|
||||
|
||||
function tag() {
|
||||
|
|
@ -420,7 +480,11 @@ gulp.task(
|
|||
const npmArgs = getNpmArgs();
|
||||
if (npmArgs) {
|
||||
for (let arg = npmArgs.shift(); arg; arg = npmArgs.shift()) {
|
||||
if (/^pu(b(l(i(sh?)?)?)?)?$/.test(arg) && npmArgs.indexOf('--with-antd-tools') < 0) {
|
||||
if (
|
||||
/^pu(b(l(i(sh?)?)?)?)?$/.test(arg) &&
|
||||
npmArgs.indexOf('--with-antd-tools') < 0 &&
|
||||
!process.env.npm_config_with_antd_tools
|
||||
) {
|
||||
reportError();
|
||||
done(1);
|
||||
return;
|
||||
|
|
@ -430,3 +494,11 @@ gulp.task(
|
|||
done();
|
||||
}),
|
||||
);
|
||||
|
||||
gulp.task(
|
||||
'sort-api-table',
|
||||
gulp.series(done => {
|
||||
sortApiTable();
|
||||
done();
|
||||
}),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,19 @@ function replacePath(path) {
|
|||
path.node.source.value = esModule;
|
||||
}
|
||||
}
|
||||
|
||||
// @ant-design/icons-vue/xxx => @ant-design/icons-vue/es/icons/xxx
|
||||
const antdIconMatcher = /@ant-design\/icons-vue\/([^/]*)$/;
|
||||
if (path.node.source && antdIconMatcher.test(path.node.source.value)) {
|
||||
const esModule = path.node.source.value.replace(
|
||||
antdIconMatcher,
|
||||
(_, iconName) => `@ant-design/icons-vue/es/icons/${iconName}`,
|
||||
);
|
||||
const esPath = dirname(getProjectPath('node_modules', esModule));
|
||||
if (fs.existsSync(esPath)) {
|
||||
path.node.source.value = esModule;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function replaceLib() {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,17 @@
|
|||
'use strict';
|
||||
|
||||
const isWindows = require('is-windows');
|
||||
const getRunCmdEnv = require('./utils/getRunCmdEnv');
|
||||
|
||||
function runCmd(cmd, _args, fn) {
|
||||
const args = _args || [];
|
||||
|
||||
if (isWindows()) {
|
||||
args.unshift(cmd);
|
||||
args.unshift('/c');
|
||||
cmd = process.env.ComSpec;
|
||||
}
|
||||
|
||||
const runner = require('child_process').spawn(cmd, args, {
|
||||
// keep color
|
||||
stdio: 'inherit',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,165 @@
|
|||
const program = require('commander');
|
||||
const majo = require('majo');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const chalk = require('chalk');
|
||||
|
||||
const unified = require('unified');
|
||||
const parse = require('remark-parse');
|
||||
const stringify = require('remark-stringify');
|
||||
|
||||
const yamlConfig = require('remark-yaml-config');
|
||||
const frontmatter = require('remark-frontmatter');
|
||||
|
||||
let fileAPIs = {};
|
||||
const remarkWithYaml = unified()
|
||||
.use(parse)
|
||||
.use(stringify, {
|
||||
paddedTable: false,
|
||||
listItemIndent: 1,
|
||||
stringLength: () => 3,
|
||||
})
|
||||
.use(frontmatter)
|
||||
.use(yamlConfig);
|
||||
|
||||
const stream = majo.majo();
|
||||
|
||||
function getCellValue(node) {
|
||||
return node.children[0].children[0].value;
|
||||
}
|
||||
|
||||
// from small to large
|
||||
const sizeBreakPoints = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
|
||||
|
||||
const whiteMethodList = ['afterChange', 'beforeChange'];
|
||||
|
||||
const groups = {
|
||||
isDynamic: val => /^on[A-Z]/.test(val) || whiteMethodList.indexOf(val) > -1,
|
||||
isSize: val => sizeBreakPoints.indexOf(val) > -1,
|
||||
};
|
||||
|
||||
function asciiSort(prev, next) {
|
||||
if (prev > next) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (prev < next) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
// follow the alphabet order
|
||||
function alphabetSort(nodes) {
|
||||
// use toLowerCase to keep `case insensitive`
|
||||
return nodes.sort((...comparison) =>
|
||||
asciiSort(...comparison.map(val => getCellValue(val).toLowerCase())),
|
||||
);
|
||||
}
|
||||
|
||||
function sizeSort(nodes) {
|
||||
return nodes.sort((...comparison) =>
|
||||
asciiSort(...comparison.map(val => sizeBreakPoints.indexOf(getCellValue(val).toLowerCase()))),
|
||||
);
|
||||
}
|
||||
|
||||
function sort(ast, filename) {
|
||||
const nameMatch = filename.match(/^components\/([^/]*)\//);
|
||||
const componentName = nameMatch[1];
|
||||
fileAPIs[componentName] = fileAPIs[componentName] || {
|
||||
static: new Set(),
|
||||
size: new Set(),
|
||||
dynamic: new Set(),
|
||||
};
|
||||
|
||||
ast.children.forEach(child => {
|
||||
const staticProps = [];
|
||||
// prefix with `on`
|
||||
const dynamicProps = [];
|
||||
// one of ['xs', 'sm', 'md', 'lg', 'xl']
|
||||
const sizeProps = [];
|
||||
|
||||
// find table markdown type
|
||||
if (child.type === 'table') {
|
||||
// slice will create new array, so sort can affect the original array.
|
||||
// slice(1) cut down the thead
|
||||
child.children.slice(1).forEach(node => {
|
||||
const value = getCellValue(node);
|
||||
if (groups.isDynamic(value)) {
|
||||
dynamicProps.push(node);
|
||||
fileAPIs[componentName].dynamic.add(value);
|
||||
} else if (groups.isSize(value)) {
|
||||
sizeProps.push(node);
|
||||
fileAPIs[componentName].size.add(value);
|
||||
} else {
|
||||
staticProps.push(node);
|
||||
fileAPIs[componentName].static.add(value);
|
||||
}
|
||||
});
|
||||
|
||||
// eslint-disable-next-line
|
||||
child.children = [
|
||||
child.children[0],
|
||||
...alphabetSort(staticProps),
|
||||
...sizeSort(sizeProps),
|
||||
...alphabetSort(dynamicProps),
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
return ast;
|
||||
}
|
||||
|
||||
function sortAPI(md, filename) {
|
||||
return remarkWithYaml.stringify(sort(remarkWithYaml.parse(md), filename));
|
||||
}
|
||||
|
||||
function sortMiddleware(ctx) {
|
||||
Object.keys(ctx.files).forEach(filename => {
|
||||
const content = ctx.fileContents(filename);
|
||||
ctx.writeContents(filename, sortAPI(content, filename));
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = () => {
|
||||
fileAPIs = {};
|
||||
|
||||
program
|
||||
.version('0.1.0')
|
||||
.option(
|
||||
'-f, --file [file]',
|
||||
'Specify which file to be transformed',
|
||||
// default value
|
||||
'components/**/index.+(zh-CN|en-US).md',
|
||||
)
|
||||
.option('-o, --output [output]', 'Specify component api output path', '~component-api.json')
|
||||
.parse(process.argv);
|
||||
// Get the markdown file all need to be transformed
|
||||
|
||||
/* eslint-disable no-console */
|
||||
stream
|
||||
.source(program.file)
|
||||
.use(sortMiddleware)
|
||||
.dest('.')
|
||||
.then(() => {
|
||||
if (program.output) {
|
||||
const data = {};
|
||||
Object.keys(fileAPIs).forEach(componentName => {
|
||||
data[componentName] = {
|
||||
static: [...fileAPIs[componentName].static],
|
||||
size: [...fileAPIs[componentName].size],
|
||||
dynamic: [...fileAPIs[componentName].dynamic],
|
||||
};
|
||||
});
|
||||
|
||||
const reportPath = path.resolve(program.output);
|
||||
fs.writeFileSync(reportPath, JSON.stringify(data, null, 2), 'utf8');
|
||||
console.log(chalk.cyan(`API list file: ${reportPath}`));
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
console.log(chalk.green(`sort ant-design-vue api successfully!`));
|
||||
});
|
||||
/* eslint-enable no-console */
|
||||
};
|
||||
|
|
@ -1,16 +1,14 @@
|
|||
const less = require('less');
|
||||
const { readFileSync } = require('fs');
|
||||
const path = require('path');
|
||||
const postcss = require('postcss');
|
||||
const NpmImportPlugin = require('less-plugin-npm-import');
|
||||
const autoprefixer = require('autoprefixer');
|
||||
const NpmImportPlugin = require('less-plugin-npm-import');
|
||||
const { getConfig } = require('./utils/projectHelper');
|
||||
|
||||
function transformLess(lessFile, config = {}) {
|
||||
function transformLess(lessContent, lessFilePath, config = {}) {
|
||||
const { cwd = process.cwd() } = config;
|
||||
const resolvedLessFile = path.resolve(cwd, lessFile);
|
||||
|
||||
let data = readFileSync(resolvedLessFile, 'utf-8');
|
||||
data = data.replace(/^\uFEFF/, '');
|
||||
const { compile: { lessConfig } = {} } = getConfig();
|
||||
const resolvedLessFile = path.resolve(cwd, lessFilePath);
|
||||
|
||||
// Do less compile
|
||||
const lessOpts = {
|
||||
|
|
@ -18,13 +16,12 @@ function transformLess(lessFile, config = {}) {
|
|||
filename: resolvedLessFile,
|
||||
plugins: [new NpmImportPlugin({ prefix: '~' })],
|
||||
javascriptEnabled: true,
|
||||
...lessConfig,
|
||||
};
|
||||
return less
|
||||
.render(data, lessOpts)
|
||||
.render(lessContent, lessOpts)
|
||||
.then(result => postcss([autoprefixer]).process(result.css, { from: undefined }))
|
||||
.then(r => {
|
||||
return r.css;
|
||||
});
|
||||
.then(r => r.css);
|
||||
}
|
||||
|
||||
module.exports = transformLess;
|
||||
|
|
|
|||
|
|
@ -24,13 +24,13 @@ class CleanUpStatsPlugin {
|
|||
|
||||
apply(compiler) {
|
||||
compiler.hooks.done.tap('CleanUpStatsPlugin', stats => {
|
||||
const { children } = stats.compilation;
|
||||
const { children, warnings } = stats.compilation;
|
||||
if (Array.isArray(children)) {
|
||||
stats.compilation.children = children.filter(child => this.shouldPickStatChild(child));
|
||||
}
|
||||
// if (Array.isArray(warnings)) {
|
||||
// stats.compilation.warnings = warnings.filter(message => this.shouldPickWarning(message));
|
||||
// }
|
||||
if (Array.isArray(warnings)) {
|
||||
stats.compilation.warnings = warnings.filter(message => this.shouldPickWarning(message));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@
|
|||
|
||||
// NOTE: the following code was partially adopted from https://github.com/iarna/in-publish
|
||||
module.exports = function getNpmArgs() {
|
||||
// https://github.com/iarna/in-publish/pull/14
|
||||
if (process.env.npm_command) {
|
||||
return [process.env.npm_command];
|
||||
}
|
||||
|
||||
let npmArgv = null;
|
||||
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
const path = require('path');
|
||||
const isWindows = require('is-windows');
|
||||
|
||||
module.exports = function getRunCmdEnv() {
|
||||
const env = {};
|
||||
|
|
@ -14,7 +15,9 @@ module.exports = function getRunCmdEnv() {
|
|||
.filter(v => v.slice(0, 1).pop().toLowerCase() === 'path')
|
||||
.forEach(v => {
|
||||
const key = v.slice(0, 1).pop();
|
||||
env[key] = env[key] ? `${nodeModulesBinDir}:${env[key]}` : nodeModulesBinDir;
|
||||
env[key] = env[key]
|
||||
? `${nodeModulesBinDir}${isWindows() ? ';' : ':'}${env[key]}`
|
||||
: nodeModulesBinDir;
|
||||
});
|
||||
return env;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ function resolve(moduleName) {
|
|||
|
||||
// We need hack the require to ensure use package module first
|
||||
// For example, `typescript` is required by `gulp-typescript` but provided by `antd`
|
||||
// we do not need for ant-design-vue
|
||||
let injected = false;
|
||||
function injectRequire() {
|
||||
if (injected) return;
|
||||
|
|
@ -45,9 +46,35 @@ function getConfig() {
|
|||
return {};
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否存在可用的browserslist config
|
||||
* https://github.com/browserslist/browserslist#queries
|
||||
* @returns
|
||||
*/
|
||||
function isThereHaveBrowserslistConfig() {
|
||||
try {
|
||||
const packageJson = require(getProjectPath('package.json'));
|
||||
if (packageJson.browserslist) {
|
||||
return true;
|
||||
}
|
||||
} catch (e) {
|
||||
//
|
||||
}
|
||||
if (fs.existsSync(getProjectPath('.browserslistrc'))) {
|
||||
return true;
|
||||
}
|
||||
if (fs.existsSync(getProjectPath('browserslist'))) {
|
||||
return true;
|
||||
}
|
||||
// parent项目的配置支持，需要再补充
|
||||
// ROWSERSLIST ROWSERSLIST_ENV 变量的形式，需要再补充。
|
||||
return false;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getProjectPath,
|
||||
resolve,
|
||||
injectRequire,
|
||||
getConfig,
|
||||
isThereHaveBrowserslistConfig,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
// We convert less import in es/lib to css file path
|
||||
function cssInjection(content) {
|
||||
return content
|
||||
.replace(/\/style\/?'/g, "/style/css'")
|
||||
.replace(/\/style\/?"/g, '/style/css"')
|
||||
.replace(/\.less/g, '.css');
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
cssInjection,
|
||||
};
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import pkg from '../../package.json';
|
||||
|
||||
const { version } = pkg;
|
||||
/* eslint import/no-unresolved: 0 */
|
||||
// @ts-ignore
|
||||
import version from './version';
|
||||
|
||||
export default version;
|
||||
|
|
|
|||
25
package.json
25
package.json
|
|
@ -30,14 +30,14 @@
|
|||
],
|
||||
"scripts": {
|
||||
"predev": "node node_modules/esbuild/install.js",
|
||||
"dev": "yarn predev && yarn routes && vite serve site",
|
||||
"dev": "npm run version && yarn predev && yarn routes && vite serve site",
|
||||
"test": "cross-env NODE_ENV=test jest --config .jest.js",
|
||||
"compile": "node antd-tools/cli/run.js compile",
|
||||
"generator-webtypes": "tsc -p antd-tools/generator-types/tsconfig.json && node antd-tools/generator-types/index.js",
|
||||
"pub": "node --max_old_space_size=8192 antd-tools/cli/run.js pub",
|
||||
"pub-with-ci": "node antd-tools/cli/run.js pub-with-ci",
|
||||
"pub": "npm run version && node --max_old_space_size=8192 antd-tools/cli/run.js pub",
|
||||
"pub-with-ci": "npm run version && node antd-tools/cli/run.js pub-with-ci",
|
||||
"prepublishOnly": "node antd-tools/cli/run.js guard",
|
||||
"pre-publish": "node ./scripts/prepub && npm run generator-webtypes",
|
||||
"pre-publish": "npm run generator-webtypes",
|
||||
"prettier": "prettier -c --write **/*",
|
||||
"pretty-quick": "pretty-quick",
|
||||
"dist": "node --max_old_space_size=8192 antd-tools/cli/run.js dist",
|
||||
|
|
@ -54,8 +54,17 @@
|
|||
"vue-tsc": "vue-tsc --noEmit",
|
||||
"site": "yarn routes && ./node_modules/vite/bin/vite.js build site --base=https://next.antdv.com/",
|
||||
"pub:site": "npm run site && node site/scripts/pushToOSS.js",
|
||||
"prepare": "husky install"
|
||||
"prepare": "husky install",
|
||||
"version": "node ./scripts/generate-version",
|
||||
"sort-api": "node antd-tools/cli/run.js sort-api-table"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 0.5%",
|
||||
"last 2 versions",
|
||||
"Firefox ESR",
|
||||
"not dead",
|
||||
"not IE 11"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/vueComponent/ant-design-vue.git"
|
||||
|
|
@ -162,6 +171,7 @@
|
|||
"html-webpack-plugin": "^5.3.1",
|
||||
"husky": "^6.0.0",
|
||||
"ignore-emit-webpack-plugin": "^2.0.6",
|
||||
"is-windows": "^1.0.2",
|
||||
"jest": "^26.0.0",
|
||||
"jest-environment-jsdom-fifteen": "^1.0.2",
|
||||
"jest-serializer-vue": "^2.0.0",
|
||||
|
|
@ -174,6 +184,7 @@
|
|||
"less-plugin-npm-import": "^2.1.0",
|
||||
"less-vars-to-js": "^1.3.0",
|
||||
"lint-staged": "^11.0.0",
|
||||
"majo": "^0.10.1",
|
||||
"markdown-it": "^8.4.2",
|
||||
"markdown-it-anchor": "^8.0.4",
|
||||
"markdown-it-container": "^3.0.0",
|
||||
|
|
@ -197,6 +208,10 @@
|
|||
"query-string": "^7.0.1",
|
||||
"querystring": "^0.2.0",
|
||||
"raw-loader": "^4.0.2",
|
||||
"remark-frontmatter": "^2.0.0",
|
||||
"remark-parse": "^8.0.0",
|
||||
"remark-stringify": "^8.0.0",
|
||||
"remark-yaml-config": "^4.1.0",
|
||||
"reqwest": "^2.0.5",
|
||||
"rimraf": "^3.0.0",
|
||||
"rucksack-css": "^1.0.2",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,222 @@
|
|||
/**
|
||||
* 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);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
const fs = require('fs-extra');
|
||||
const path = require('path');
|
||||
|
||||
const { version } = require('../package.json');
|
||||
|
||||
fs.writeFileSync(
|
||||
path.join(__dirname, '..', 'components', 'version', 'version.tsx'),
|
||||
`export default '${version}'`,
|
||||
'utf8',
|
||||
);
|
||||
|
|
@ -1,8 +1,36 @@
|
|||
// This config is for building dist files
|
||||
const chalk = require('chalk');
|
||||
const RemovePlugin = require('remove-files-webpack-plugin');
|
||||
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
|
||||
const { ESBuildMinifyPlugin } = require('esbuild-loader');
|
||||
const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
|
||||
const getWebpackConfig = require('./antd-tools/getWebpackConfig');
|
||||
const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');
|
||||
const darkVars = require('./scripts/dark-vars');
|
||||
const compactVars = require('./scripts/compact-vars');
|
||||
|
||||
function injectLessVariables(config, variables) {
|
||||
(Array.isArray(config) ? config : [config]).forEach(conf => {
|
||||
conf.module.rules.forEach(rule => {
|
||||
// filter less rule
|
||||
if (rule.test instanceof RegExp && rule.test.test('.less')) {
|
||||
const lessRule = rule.use[rule.use.length - 1];
|
||||
if (lessRule.options.lessOptions) {
|
||||
lessRule.options.lessOptions.modifyVars = {
|
||||
...lessRule.options.lessOptions.modifyVars,
|
||||
...variables,
|
||||
};
|
||||
} else {
|
||||
lessRule.options.modifyVars = {
|
||||
...lessRule.options.modifyVars,
|
||||
...variables,
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return config;
|
||||
}
|
||||
|
||||
function addLocales(webpackConfig) {
|
||||
let packageName = 'antd-with-locales';
|
||||
|
|
@ -22,13 +50,42 @@ function externalDayjs(config) {
|
|||
};
|
||||
}
|
||||
|
||||
function injectWarningCondition(config) {
|
||||
config.module.rules.forEach(rule => {
|
||||
// Remove devWarning if needed
|
||||
if (rule.test.test('test.tsx')) {
|
||||
rule.use = [
|
||||
...rule.use,
|
||||
{
|
||||
loader: 'string-replace-loader',
|
||||
options: {
|
||||
search: 'devWarning(',
|
||||
replace: "if (process.env.NODE_ENV !== 'production') devWarning(",
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function processWebpackThemeConfig(themeConfig, theme, vars) {
|
||||
themeConfig.forEach(config => {
|
||||
externalDayjs(config);
|
||||
|
||||
// rename default entry to ${theme} entry
|
||||
Object.keys(config.entry).forEach(entryName => {
|
||||
config.entry[entryName.replace('antd', `antd.${theme}`)] = config.entry[entryName];
|
||||
const originPath = config.entry[entryName];
|
||||
let replacedPath = [...originPath];
|
||||
|
||||
// We will replace `./index` to `./index-style-only` since theme dist only use style file
|
||||
if (originPath.length === 1 && originPath[0] === './index') {
|
||||
replacedPath = ['./index-style-only'];
|
||||
} else {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(chalk.red('🆘 Seems entry has changed! It should be `./index`'));
|
||||
}
|
||||
|
||||
config.entry[entryName.replace('antd', `antd.${theme}`)] = replacedPath;
|
||||
delete config.entry[entryName];
|
||||
});
|
||||
|
||||
|
|
@ -45,14 +102,41 @@ function processWebpackThemeConfig(themeConfig, theme, vars) {
|
|||
}
|
||||
});
|
||||
|
||||
const themeReg = new RegExp(`${theme}(.min)?\\.js(\\.map)?$`);
|
||||
// apply ${theme} less variables
|
||||
injectLessVariables(config, vars);
|
||||
|
||||
// ignore emit ${theme} entry js & js.map file
|
||||
config.plugins.push(new IgnoreEmitPlugin(themeReg));
|
||||
config.plugins.push(
|
||||
new RemovePlugin({
|
||||
after: {
|
||||
root: './dist',
|
||||
include: [
|
||||
`antd.${theme}.js`,
|
||||
`antd.${theme}.js.map`,
|
||||
`antd.${theme}.min.js`,
|
||||
`antd.${theme}.min.js.map`,
|
||||
],
|
||||
log: false,
|
||||
logWarning: false,
|
||||
},
|
||||
}),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
const webpackConfig = getWebpackConfig(false);
|
||||
const webpackDarkConfig = getWebpackConfig(false);
|
||||
const legacyEntryVars = {
|
||||
'root-entry-name': 'default',
|
||||
};
|
||||
const webpackConfig = injectLessVariables(getWebpackConfig(false), legacyEntryVars);
|
||||
const webpackDarkConfig = injectLessVariables(getWebpackConfig(false), legacyEntryVars);
|
||||
const webpackCompactConfig = injectLessVariables(getWebpackConfig(false), legacyEntryVars);
|
||||
const webpackVariableConfig = injectLessVariables(getWebpackConfig(false), {
|
||||
'root-entry-name': 'variable',
|
||||
});
|
||||
|
||||
webpackConfig.forEach(config => {
|
||||
injectWarningCondition(config);
|
||||
});
|
||||
|
||||
if (process.env.RUN_ENV === 'PRODUCTION') {
|
||||
webpackConfig.forEach(config => {
|
||||
|
|
@ -60,7 +144,13 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
|
|||
addLocales(config);
|
||||
// Reduce non-minified dist files size
|
||||
config.optimization.usedExports = true;
|
||||
|
||||
// use esbuild
|
||||
if (process.env.ESBUILD || process.env.CSB_REPO) {
|
||||
config.optimization.minimizer[0] = new ESBuildMinifyPlugin({
|
||||
target: 'es2015',
|
||||
css: true,
|
||||
});
|
||||
}
|
||||
config.plugins.push(
|
||||
new BundleAnalyzerPlugin({
|
||||
analyzerMode: 'static',
|
||||
|
|
@ -68,9 +158,25 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
|
|||
reportFilename: '../report.html',
|
||||
}),
|
||||
);
|
||||
|
||||
if (!process.env.NO_DUP_CHECK) {
|
||||
config.plugins.push(
|
||||
new DuplicatePackageCheckerPlugin({
|
||||
verbose: true,
|
||||
emitError: true,
|
||||
}),
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
processWebpackThemeConfig(webpackDarkConfig, 'dark', darkVars);
|
||||
processWebpackThemeConfig(webpackCompactConfig, 'compact', compactVars);
|
||||
processWebpackThemeConfig(webpackVariableConfig, 'variable', {});
|
||||
}
|
||||
|
||||
module.exports = webpackConfig.concat(webpackDarkConfig);
|
||||
module.exports = [
|
||||
...webpackConfig,
|
||||
...webpackDarkConfig,
|
||||
...webpackCompactConfig,
|
||||
...webpackVariableConfig,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,149 +0,0 @@
|
|||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const VueLoaderPlugin = require('vue-loader/dist/plugin').default;
|
||||
const WebpackBar = require('webpackbar');
|
||||
const path = require('path');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
|
||||
const babelConfig = {
|
||||
cacheDirectory: true,
|
||||
presets: [
|
||||
[
|
||||
'@babel/preset-env',
|
||||
{
|
||||
targets: {
|
||||
browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'not ie 11'],
|
||||
},
|
||||
},
|
||||
],
|
||||
'@babel/preset-typescript',
|
||||
],
|
||||
plugins: [
|
||||
[
|
||||
'babel-plugin-import',
|
||||
{
|
||||
libraryName: 'ant-design-vue',
|
||||
libraryDirectory: '', // default: lib
|
||||
style: true,
|
||||
},
|
||||
],
|
||||
['@vue/babel-plugin-jsx', { mergeProps: false, enableObjectSlots: false }],
|
||||
'@babel/plugin-proposal-optional-chaining',
|
||||
'@babel/plugin-transform-object-assign',
|
||||
'@babel/plugin-proposal-object-rest-spread',
|
||||
'@babel/plugin-proposal-export-default-from',
|
||||
'@babel/plugin-proposal-export-namespace-from',
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
],
|
||||
};
|
||||
|
||||
/** @type {import('webpack').Configuration} */
|
||||
|
||||
module.exports = {
|
||||
mode: 'development',
|
||||
entry: {
|
||||
app: './examples/index.js',
|
||||
},
|
||||
stats: {
|
||||
warningsFilter: /export .* was not found in/,
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.md$/,
|
||||
loader: 'raw-loader',
|
||||
},
|
||||
{
|
||||
test: /\.(vue)$/,
|
||||
loader: 'vue-loader',
|
||||
},
|
||||
{
|
||||
test: /\.(ts|tsx)?$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: babelConfig,
|
||||
},
|
||||
{
|
||||
loader: 'ts-loader',
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
appendTsSuffixTo: ['\\.vue$'],
|
||||
happyPackMode: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /pickr.*js/,
|
||||
options: babelConfig,
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]?[hash]',
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
use: [
|
||||
{ loader: 'style-loader' },
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: { sourceMap: true },
|
||||
},
|
||||
{
|
||||
loader: 'less-loader',
|
||||
options: {
|
||||
lessOptions: {
|
||||
sourceMap: true,
|
||||
javascriptEnabled: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
options: {},
|
||||
},
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'ant-design-vue/es': path.join(__dirname, './components'),
|
||||
'ant-design-vue': path.join(__dirname, './components'),
|
||||
vue$: 'vue/dist/vue.runtime.esm-bundler.js',
|
||||
},
|
||||
extensions: ['.ts', '.tsx', '.js', '.jsx', '.vue', '.md'],
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: {
|
||||
rewrites: [{ from: /./, to: '/index.html' }],
|
||||
},
|
||||
hot: true,
|
||||
open: true,
|
||||
},
|
||||
devtool: 'inline-cheap-module-source-map',
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].css',
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'examples/index.html',
|
||||
filename: 'index.html',
|
||||
inject: true,
|
||||
}),
|
||||
new VueLoaderPlugin(),
|
||||
new WebpackBar(),
|
||||
],
|
||||
};
|
||||
Loading…
Reference in New Issue