From 920167ccf2303d373b28a1cac9c1de1b2ddcfe96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E5=B9=BF?= Date: Wed, 28 Feb 2024 17:07:18 +0800 Subject: [PATCH 1/4] build: added new debugging command dev to support single or multiple demo debugging --- package.json | 3 +- .../arcodesign/components/slider/demo/mark.md | 15 ++++--- scripts/dev/dev.js | 7 ++++ .../DemoGeneratePlugin/generate-demo.js | 40 ++++++++++++++++--- scripts/sites/webpack.dev.mobile.js | 7 +++- 5 files changed, 59 insertions(+), 13 deletions(-) create mode 100644 scripts/dev/dev.js diff --git a/package.json b/package.json index 4d1fa1a0..838d61ff 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,8 @@ "lint-staged": "lint-staged", "site:home": "cross-env NODE_ENV=production webpack --progress --config scripts/sites/webpack.prod.home.js", "site:mobile": "cross-env NODE_ENV=production webpack --progress --config scripts/sites/webpack.prod.mobile.js", - "site:pc": "cross-env NODE_ENV=production webpack --progress --config scripts/sites/webpack.prod.pc.js" + "site:pc": "cross-env NODE_ENV=production webpack --progress --config scripts/sites/webpack.prod.pc.js", + "dev": "node scripts/dev/dev.js $@" }, "author": "taoyiyue@bytedance.com", "license": "MIT", diff --git a/packages/arcodesign/components/slider/demo/mark.md b/packages/arcodesign/components/slider/demo/mark.md index 63567bcc..3271e09b 100644 --- a/packages/arcodesign/components/slider/demo/mark.md +++ b/packages/arcodesign/components/slider/demo/mark.md @@ -6,13 +6,18 @@ import { Slider } from '@arco-design/mobile-react'; export default function SliderDemo() { + const [fontSize, setFontSize] = React.useState(0); return ( { + if (typeof value === 'number') { + setFontSize(value); + } + }} /> ); } diff --git a/scripts/dev/dev.js b/scripts/dev/dev.js new file mode 100644 index 00000000..9d74d0a3 --- /dev/null +++ b/scripts/dev/dev.js @@ -0,0 +1,7 @@ +const childProcess = require('child_process'); +const { argv } = process; + +childProcess.execSync( + `cross-env NODE_ENV=development COMPONENTS=${argv[2]} DEMOS=${argv[3]} webpack-dev-server --progress --config scripts/sites/webpack.dev.mobile.js`, + { stdio: 'inherit' }, +); diff --git a/scripts/sites/plugins/DemoGeneratePlugin/generate-demo.js b/scripts/sites/plugins/DemoGeneratePlugin/generate-demo.js index 579803bf..c961ffbc 100644 --- a/scripts/sites/plugins/DemoGeneratePlugin/generate-demo.js +++ b/scripts/sites/plugins/DemoGeneratePlugin/generate-demo.js @@ -19,10 +19,27 @@ const sitePath = path.join(rootPath, siteFolder); const compositeCompPath = path.join(rootPath, compositeCompFolder); const compositePath = path.join(rootPath, compositeFolder); -function renderSource({ comp, demoName, depsCompSet, language, compileEnv, demoPath, sitePath }) { +function renderSource({ + comp, + demoName, + depsCompSet, + language, + compileEnv, + demoPath, + sitePath, + devComponents = [], + devDemos = [], +}) { if (!/^\w+.*\w+$/g.test(demoName)) return; const docPath = path.join(sitePath, comp); + // 是当前组件且不是当前开发 demo 不用设置渲染内容 + const notDevDemo = devComponents.includes(comp) && !devDemos.includes(demoName); const demo = fs.readFileSync(path.join(demoPath, `${demoName}.md`), 'utf8'); + const newDemo = notDevDemo ? demo.replace(/\(\) \{([\s\S]*?)\}\n```/g, '() { return null }\n```') : demo; + if (devComponents.includes(comp) && !devDemos.includes(demoName)) { + console.log(demo) + console.log(newDemo) + } const renderer = new marked.Renderer(); const compNpmReg = new RegExp(compPackageName, 'g'); const utilsNpmReg = new RegExp(utilsPackageName, 'g'); @@ -40,7 +57,6 @@ function renderSource({ comp, demoName, depsCompSet, language, compileEnv, demoP .replace(compNpmReg, `../../../../../${compFolder}`) .replace(utilsNpmReg, `../../../../../${utilsFolder}`) .replace(/\/esm\//g, '/')}`); - fs.mkdirpSync(docPath); const demoFileName = compileEnv === 'vite' ? `${filename}.jsx` : `${filename}.js`; const demoFilePath = path.join(docPath, demoFileName); @@ -64,6 +80,9 @@ function renderSource({ comp, demoName, depsCompSet, language, compileEnv, demoP }; renderer.heading = (text, level) => { + if (notDevDemo) { + return ''; + } if (level === 2) { return `
${utils.getReadMeTextByLang(text, language)}
`; @@ -75,10 +94,13 @@ function renderSource({ comp, demoName, depsCompSet, language, compileEnv, demoP }; renderer.paragraph = text => { + if (notDevDemo) { + return ''; + } return `

${utils.getReadMeTextByLang(text, language)}

`; }; - const result = marked(demo, { renderer }); + const result = marked(newDemo, { renderer }); return { order, @@ -168,7 +190,9 @@ function generateSiteDemo({ compileComps = [], language = 'ch', depsCompSet, - compileEnv + compileEnv, + devComponents, + devDemos, } = {}) { const readmeRoutes = {}; let compNames; @@ -224,7 +248,9 @@ function generateSiteDemo({ language, compileEnv, demoPath, - sitePath + sitePath, + devComponents, + devDemos, }); importStr += `import ${importDemoName} from './_${importDemoName}';`; demoSource.push({ @@ -500,6 +526,8 @@ function generateDemo({ languages = ['ch', 'en'], compileComps = [], compileEnv = 'webpack', + devComponents, + devDemos, } = {}) { const depsCompSet = new Set(); if (compileComps.length) { @@ -516,7 +544,7 @@ function generateDemo({ console.log(`>>> Start generate demo entry files...`); languages.forEach(language => { generateSiteCompositeDemo({ depsCompSet, language, compileEnv }); - generateSiteDemo({ depsCompSet, language, compileComps, compileEnv }); + generateSiteDemo({ depsCompSet, language, compileComps, compileEnv, devComponents, devDemos }); }); if (compileComps.length) { generateRootDemo(depsCompSet); diff --git a/scripts/sites/webpack.dev.mobile.js b/scripts/sites/webpack.dev.mobile.js index e787c4c4..d95626f3 100644 --- a/scripts/sites/webpack.dev.mobile.js +++ b/scripts/sites/webpack.dev.mobile.js @@ -12,6 +12,9 @@ const compileComps = (process.env.FILTER_COMP || '').split(' ') .filter(e => e) .map(utils.getFolderName); +const devComponents = (process.env.COMPONENTS || '').split(','); +const devDemos = (process.env.DEMOS || '').split(','); + const devConfig = merge(baseConfig, { mode: 'development', entry: { @@ -64,7 +67,9 @@ const devConfig = merge(baseConfig, { plugins: [ new VConsolePlugin({ enable: true }), new DemoGeneratePlugin({ - compileComps + compileComps, + devComponents, + devDemos, }), new TokenGeneratePlugin(), new HtmlWebpackPlugin({ From 798f93256e6d367ce089fe2e23ae42569de8fb32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E5=B9=BF?= Date: Wed, 28 Feb 2024 17:09:53 +0800 Subject: [PATCH 2/4] refactor: delete log --- scripts/sites/plugins/DemoGeneratePlugin/generate-demo.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/scripts/sites/plugins/DemoGeneratePlugin/generate-demo.js b/scripts/sites/plugins/DemoGeneratePlugin/generate-demo.js index c961ffbc..4c5f9c82 100644 --- a/scripts/sites/plugins/DemoGeneratePlugin/generate-demo.js +++ b/scripts/sites/plugins/DemoGeneratePlugin/generate-demo.js @@ -36,10 +36,6 @@ function renderSource({ const notDevDemo = devComponents.includes(comp) && !devDemos.includes(demoName); const demo = fs.readFileSync(path.join(demoPath, `${demoName}.md`), 'utf8'); const newDemo = notDevDemo ? demo.replace(/\(\) \{([\s\S]*?)\}\n```/g, '() { return null }\n```') : demo; - if (devComponents.includes(comp) && !devDemos.includes(demoName)) { - console.log(demo) - console.log(newDemo) - } const renderer = new marked.Renderer(); const compNpmReg = new RegExp(compPackageName, 'g'); const utilsNpmReg = new RegExp(utilsPackageName, 'g'); From 45f8e4015ac988c1a041cc44ffd34620b63b8e9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E5=B9=BF?= Date: Thu, 29 Feb 2024 19:23:21 +0800 Subject: [PATCH 3/4] refactor: add comment --- scripts/dev/dev.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/scripts/dev/dev.js b/scripts/dev/dev.js index 9d74d0a3..7795123e 100644 --- a/scripts/dev/dev.js +++ b/scripts/dev/dev.js @@ -1,6 +1,8 @@ const childProcess = require('child_process'); const { argv } = process; +// 单组件-单 demo 测试命令：npm run dev slider marks +// 多组件-多 demo 测试命令：npm run dev slider,tabs marks,basic childProcess.execSync( `cross-env NODE_ENV=development COMPONENTS=${argv[2]} DEMOS=${argv[3]} webpack-dev-server --progress --config scripts/sites/webpack.dev.mobile.js`, { stdio: 'inherit' }, From d4df577e935f26db20452f71b94bf9b919d568c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E5=B9=BF?= Date: Thu, 29 Feb 2024 20:33:15 +0800 Subject: [PATCH 4/4] refactor: optimize code --- package.json | 2 +- .../arcodesign/components/slider/demo/mark.md | 15 +++++---------- scripts/dev/{dev.js => dev-demo.js} | 4 ++-- .../plugins/DemoGeneratePlugin/generate-demo.js | 2 +- 4 files changed, 9 insertions(+), 14 deletions(-) rename scripts/dev/{dev.js => dev-demo.js} (65%) diff --git a/package.json b/package.json index 838d61ff..fb397c5e 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "site:home": "cross-env NODE_ENV=production webpack --progress --config scripts/sites/webpack.prod.home.js", "site:mobile": "cross-env NODE_ENV=production webpack --progress --config scripts/sites/webpack.prod.mobile.js", "site:pc": "cross-env NODE_ENV=production webpack --progress --config scripts/sites/webpack.prod.pc.js", - "dev": "node scripts/dev/dev.js $@" + "dev:demo": "node scripts/dev/dev-demo.js $@" }, "author": "taoyiyue@bytedance.com", "license": "MIT", diff --git a/packages/arcodesign/components/slider/demo/mark.md b/packages/arcodesign/components/slider/demo/mark.md index 3271e09b..63567bcc 100644 --- a/packages/arcodesign/components/slider/demo/mark.md +++ b/packages/arcodesign/components/slider/demo/mark.md @@ -6,18 +6,13 @@ import { Slider } from '@arco-design/mobile-react'; export default function SliderDemo() { - const [fontSize, setFontSize] = React.useState(0); return ( { - if (typeof value === 'number') { - setFontSize(value); - } - }} + showMarks + useMarkOnly + max={20} + marks={[0, 5, 10, 15, 20]} + defaultValue={5} /> ); } diff --git a/scripts/dev/dev.js b/scripts/dev/dev-demo.js similarity index 65% rename from scripts/dev/dev.js rename to scripts/dev/dev-demo.js index 7795123e..f2683932 100644 --- a/scripts/dev/dev.js +++ b/scripts/dev/dev-demo.js @@ -1,8 +1,8 @@ const childProcess = require('child_process'); const { argv } = process; -// 单组件-单 demo 测试命令：npm run dev slider marks -// 多组件-多 demo 测试命令：npm run dev slider,tabs marks,basic +// 单组件 - 单 demo 测试命令：npm run dev:demo slider mark +// 多组件 - 多 demo 测试命令：npm run dev:demo slider,tabs mark,basic childProcess.execSync( `cross-env NODE_ENV=development COMPONENTS=${argv[2]} DEMOS=${argv[3]} webpack-dev-server --progress --config scripts/sites/webpack.dev.mobile.js`, { stdio: 'inherit' }, diff --git a/scripts/sites/plugins/DemoGeneratePlugin/generate-demo.js b/scripts/sites/plugins/DemoGeneratePlugin/generate-demo.js index 4c5f9c82..988507bf 100644 --- a/scripts/sites/plugins/DemoGeneratePlugin/generate-demo.js +++ b/scripts/sites/plugins/DemoGeneratePlugin/generate-demo.js @@ -35,7 +35,7 @@ function renderSource({ // 是当前组件且不是当前开发 demo 不用设置渲染内容 const notDevDemo = devComponents.includes(comp) && !devDemos.includes(demoName); const demo = fs.readFileSync(path.join(demoPath, `${demoName}.md`), 'utf8'); - const newDemo = notDevDemo ? demo.replace(/\(\) \{([\s\S]*?)\}\n```/g, '() { return null }\n```') : demo; + const newDemo = notDevDemo ? demo.replace(/export default ([\s\S]*?)\(\) \{([\s\S]*?)\}\n```/g, 'export default $1() { return null }\n```') : demo; const renderer = new marked.Renderer(); const compNpmReg = new RegExp(compPackageName, 'g'); const utilsNpmReg = new RegExp(utilsPackageName, 'g');