Skip to content

Commit 4c8ea1b

Browse files
authored
chore: add generate-demo-snippet.mjs (#4099)
* chore: add generate-demo-snippet.mjs * docs(Popover): add code snippet link * docs(ColorPicker): add code snippet link * docs(Watermark): add code snippet link
1 parent 0251354 commit 4c8ea1b

File tree

24 files changed

+524
-5
lines changed

24 files changed

+524
-5
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
dist
22
miniprogram_dist
3+
__snippets__
34

45
_wechatide
56
_example

package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@
4040
"generate": "gulp generate --gulpfile script/gulpfile.js --cwd ./",
4141
"changelog": "node script/generate-changelog.js",
4242
"robot": "publish-cli robot-msg",
43-
"qrcode": "pnpm -C packages/tdesign-miniprogram/site qrcode"
43+
"qrcode": "pnpm -C packages/tdesign-miniprogram/site qrcode",
44+
"snippet": "node snippets/generate-demo-snippet.mjs"
4445
},
4546
"author": "tdesign",
4647
"license": "MIT",
@@ -119,4 +120,4 @@
119120
"eslint --fix"
120121
]
121122
}
122-
}
123+
}

packages/components/color-picker/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,13 @@ isComponent: true
1919

2020
## 代码演示
2121

22+
<a href="https://developers.weixin.qq.com/s/uZbgA9mG8Q5m" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
23+
24+
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
25+
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后,依次执行:npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
26+
</blockquote>
27+
28+
2229
### 组件类型
2330

2431
#### 基础颜色选择器

packages/components/popover/README.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,13 @@ isComponent: true
1616
}
1717
```
1818

19-
<!-- ## 代码演示 -->
19+
## 代码演示
2020

21+
<a href="https://developers.weixin.qq.com/s/MbaI79m38K5J" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
22+
23+
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
24+
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后,依次执行:npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
25+
</blockquote>
2126

2227
### 组件类型
2328
带箭头的弹出气泡

packages/components/watermark/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@ isComponent: true
1919

2020
## 代码演示
2121

22-
<!-- <a href="https://developers.weixin.qq.com/s/l0azMimf7CSu" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
22+
<a href="https://developers.weixin.qq.com/s/4MciR9mZ805J" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
2323

2424
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
2525
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后,依次执行:npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
26-
</blockquote> -->
26+
</blockquote>
2727

2828
### 组件类型
2929

snippets/README.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
## tdesign-miniprogram-demo-snippets
2+
3+
TDesign 微信小程序组件库的组件示例代码片段
4+
5+
### 一、组件示例代码片段应有能力/内容
6+
1. 预览效果需要和官网示例保持一致
7+
2. 支持深色模式切换
8+
3. 移除 Skyline 相关内容
9+
10+
### 二、如何生成组件代码片段链接
11+
- 步骤一:通过脚本生成代码片段内容,`node generate-demo-snippets.mjs action-sheet`,执行脚本后会生成 `snippets/__snippets__/tdesign-action-sheet-demo`
12+
- 步骤二:将生成的代码导入开发者工具,打开开发者工具 -> 代码片段 -> + -> 导入文件地址 -> 分享 -> 获取分享链接
13+
> <img width="300" src="https://github.com/Tencent/tdesign-miniprogram/assets/51158141/38d5a9a6-afda-492e-8a0b-6cc65dd2f7ac">
14+
> <img width="300" src="https://github.com/Tencent/tdesign-miniprogram/assets/51158141/1ec33035-3723-4c6b-b8a2-14c874db9e32">
15+
- 步骤三:更新官网组件示例页"在开发者工具中预览效果"标签的链接
16+
> <img width="500" alt="截屏2024-06-24 17 07 20" src="https://github.com/Tencent/tdesign-miniprogram/assets/51158141/1836eb92-de97-47cf-8ffe-73a492a1a485">
17+
18+
19+
### 三、组件代码片段链接表
20+
| 组件 | 描述 | 链接 |
21+
| --------------- | ----------------------------------------------------- | ----------------------------------------------- |
22+
| Button | Button 组件示例页 | https://developers.weixin.qq.com/s/F1cSo7mm75SS |
23+
| Divider | Divider 组件示例页 | https://developers.weixin.qq.com/s/tfHzFbma7IS4 |
24+
| Fab | Fab 组件示例页 | https://developers.weixin.qq.com/s/KNHt9bmB7OSc |
25+
| Icon | Icon 组件示例页 | https://developers.weixin.qq.com/s/wMINibmJ7WSQ |
26+
| Layout | Layout 组件示例页 | https://developers.weixin.qq.com/s/WwISnbmq7RSC |
27+
| Link | Link 组件示例页 | https://developers.weixin.qq.com/s/AtJrPbmK7mSK |
28+
| BackTop | BackTop 组件示例页 | https://developers.weixin.qq.com/s/2aR1demj7aS2 |
29+
| Drawer | Drawer 组件示例页 | https://developers.weixin.qq.com/s/WoE0Rdmj7GSE |
30+
| Indexes | Indexes 组件示例页 | https://developers.weixin.qq.com/s/BH9tQimJ7mSj |
31+
| Navbar | Navbar 组件示例页 | https://developers.weixin.qq.com/s/REHT3emm7kS5 |
32+
| SideBar | SideBar 组件示例页 | https://developers.weixin.qq.com/s/fL9gNim87GSp |
33+
| Steps | Steps 组件示例页 | https://developers.weixin.qq.com/s/3H9EuimQ7JS0 |
34+
| TabBar | TabBar 组件示例页 | https://developers.weixin.qq.com/s/H0G5SdmU7HSh |
35+
| Tabs | Tabs 组件示例页 | https://developers.weixin.qq.com/s/YR98fimt7MSV |
36+
| Calendar | Calendar 组件示例页 | https://developers.weixin.qq.com/s/jb5E2imk7QSV |
37+
| Cascader | Cascader 组件示例页 | https://developers.weixin.qq.com/s/i75I6imI7TSh |
38+
| Checkbox | Checkbox 组件示例页 | https://developers.weixin.qq.com/s/2M5mxim27YSp |
39+
| DateTimePicker | DateTimePicker 组件示例页 | https://developers.weixin.qq.com/s/Am6VDimq73SP |
40+
| Input | Input 组件示例页 | https://developers.weixin.qq.com/s/Id60eimj76Ss |
41+
| Picker | Picker 组件示例页 | https://developers.weixin.qq.com/s/dCCmkymv7aTw |
42+
| Radio | Radio 组件示例页 | https://developers.weixin.qq.com/s/GW6DrimI7hSV |
43+
| Rate | Rate 组件示例页 | https://developers.weixin.qq.com/s/J86K2imu7tSh |
44+
| Search | Search 组件示例页 | https://developers.weixin.qq.com/s/wG6pximT7xSH |
45+
| Slider | Slider 组件示例页 | https://developers.weixin.qq.com/s/2p6gkime7CSn |
46+
| Stepper | Stepper 组件示例页 | https://developers.weixin.qq.com/s/Ot604imU7ESt |
47+
| Switch | Switch 组件示例页 | https://developers.weixin.qq.com/s/ea6Lpim37ISs |
48+
| Textarea | Textarea 组件示例页 | https://developers.weixin.qq.com/s/uw6f3imu7KSJ |
49+
| TreeSelect | TreeSelect 组件示例页 | https://developers.weixin.qq.com/s/Bl64Ximr7LSl |
50+
| Upload | Upload 组件示例页 | https://developers.weixin.qq.com/s/jz6CGimj7NSG |
51+
| Avatar | Avatar 组件示例页 | https://developers.weixin.qq.com/s/a86Sfimw7VSO |
52+
| Badge | Badge 组件示例页 | https://developers.weixin.qq.com/s/TgaeQimG73SD |
53+
| Cell | Cell 组件示例页 | https://developers.weixin.qq.com/s/bz7aGimL72S2 |
54+
| Collapse | Collapse 组件示例页 | https://developers.weixin.qq.com/s/P67sAimx75Sy |
55+
| CountDown | CountDown 组件示例页 | https://developers.weixin.qq.com/s/C37tsims79Sk |
56+
| Empty | Empty 组件示例页 | https://developers.weixin.qq.com/s/yM7PIimR7eSL |
57+
| Footer | Footer 组件示例页 | https://developers.weixin.qq.com/s/1A79mimT7gS4 |
58+
| Grid | Grid 组件示例页 | https://developers.weixin.qq.com/s/6H70dimL7jSK |
59+
| Image | Image 组件示例页 | https://developers.weixin.qq.com/s/wP7zUima7kSF |
60+
| ImageViewer | ImageViewer 组件示例页 | https://developers.weixin.qq.com/s/9k7luimk7nSy |
61+
| Progress | Progress 组件示例页 | https://developers.weixin.qq.com/s/qua7YimQ7tSx |
62+
| Result | Result 组件示例页 | https://developers.weixin.qq.com/s/lw77kim37uSg |
63+
| Skeleton | Skeleton 组件示例页 | https://developers.weixin.qq.com/s/CY7gyimz7GS8 |
64+
| Sticky | Sticky 组件示例页 | https://developers.weixin.qq.com/s/mJ7HTiml7NSM |
65+
| Swiper | Swiper 组件示例页 | https://developers.weixin.qq.com/s/nx7fJiml7QSM |
66+
| Tag | Tag 组件示例页 | https://developers.weixin.qq.com/s/NTaYTim77JSf |
67+
| ActionSheet | ActionSheet 组件示例页 | https://developers.weixin.qq.com/s/EM7cxim37USn |
68+
| Dialog | Dialog 组件示例页 | https://developers.weixin.qq.com/s/Pc8Xtims73Sk |
69+
| DropdownMenu | DropdownMenu 组件示例页 | https://developers.weixin.qq.com/s/T58agimj75SB |
70+
| Loading | Loading 组件示例页 | https://developers.weixin.qq.com/s/Jraocimc7mSr |
71+
| Message | Message 组件示例页 | https://developers.weixin.qq.com/s/Sr8qhimx7bSW |
72+
| NoticeBar | NoticeBar 组件示例页 | https://developers.weixin.qq.com/s/ul8DximQ79SB |
73+
| Overlay | Overlay 组件示例页 | https://developers.weixin.qq.com/s/nS8fQimZ7cSG |
74+
| Popup | Popup 组件示例页 | https://developers.weixin.qq.com/s/AB8Cvim37eS6 |
75+
| PullDownRefresh | PullDownRefresh 组件示例页 | https://developers.weixin.qq.com/s/HH8v1imF7iSf |
76+
| SwipeCell | SwipeCell 组件示例页 | https://developers.weixin.qq.com/s/eK8Acim67mSD |
77+
| Toast | Toast 组件示例页 | https://developers.weixin.qq.com/s/l0azMimf7CSu |
78+
| Popover | Popover 组件示例页 | https://developers.weixin.qq.com/s/MbaI79m38K5J |
79+
| ColorPicker | ColorPicker 组件示例页 | https://developers.weixin.qq.com/s/uZbgA9mG8Q5m |
80+
| Watermark | Watermark 组件示例页 | https://developers.weixin.qq.com/s/4MciR9mZ805J |

snippets/generate-demo-snippet.mjs

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import fs from 'fs';
2+
import path from 'path';
3+
import { fileURLToPath } from 'url';
4+
5+
// 获取当前文件的目录路径
6+
const __filename = fileURLToPath(import.meta.url);
7+
const __dirname = path.dirname(__filename);
8+
9+
// 获取版本号
10+
const getPackageVersion = () => {
11+
const packageJson = JSON.parse(
12+
fs.readFileSync(path.join(__dirname, '../packages/tdesign-miniprogram/package.json'), 'utf8'),
13+
);
14+
return packageJson.version;
15+
};
16+
17+
// 工具函数:同步复制文件
18+
const copyFiles = (fromPath, toPath) => {
19+
try {
20+
fs.cpSync(fromPath, toPath, { recursive: true });
21+
// eslint-disable-next-line no-console
22+
console.log('文件已成功复制:', fromPath, '->', toPath);
23+
} catch (err) {
24+
// eslint-disable-next-line no-console
25+
console.error('复制文件时出错:', err);
26+
throw err;
27+
}
28+
};
29+
30+
// 工具函数:删除指定文件
31+
const removeFiles = (targetPath, filterFiles, saveFileTypes) => {
32+
const files = fs.readdirSync(targetPath);
33+
34+
files.forEach((file) => {
35+
const filePath = path.join(targetPath, file);
36+
const stat = fs.lstatSync(filePath);
37+
38+
if (stat.isDirectory()) {
39+
if (filterFiles.includes(file)) {
40+
fs.rmSync(filePath, { recursive: true });
41+
}
42+
} else {
43+
const fileExtension = file.slice(file.lastIndexOf('.') + 1);
44+
if (!saveFileTypes.includes(fileExtension)) {
45+
fs.unlinkSync(filePath);
46+
}
47+
}
48+
});
49+
};
50+
51+
// 工具函数:替换文件内容
52+
const replaceFileContent = (targetPath, componentName, version) => {
53+
const specialFileContent = [
54+
{
55+
file: 'app.json',
56+
replaceContent: [['pages/button/button', `pages/${componentName}/${componentName}`]],
57+
},
58+
{
59+
file: 'project.private.config.json',
60+
replaceContent: [['tdesign-button-demo', `tdesign-${componentName}-demo`]],
61+
},
62+
{
63+
file: 'package.json',
64+
replaceContent: [
65+
['tdesign-button-demo', `tdesign-${componentName}-demo`],
66+
['tdesign-miniprogram-version', version],
67+
],
68+
},
69+
];
70+
71+
specialFileContent.forEach((item) => {
72+
const filePath = path.join(targetPath, item.file);
73+
let data = fs.readFileSync(filePath, 'utf8');
74+
item.replaceContent.forEach(([oldContent, newContent]) => {
75+
data = data.replaceAll(oldContent, newContent);
76+
});
77+
fs.writeFileSync(filePath, data, 'utf8');
78+
});
79+
};
80+
81+
// 主函数:生成 Demo 代码片段
82+
const generateDemoSnippets = (componentName) => {
83+
if (!componentName) {
84+
// eslint-disable-next-line no-console
85+
console.error('错误:请提供组件名称');
86+
process.exit(1);
87+
}
88+
89+
const VERSION = getPackageVersion();
90+
const filterFiles = ['skyline']; // 需要过滤的示例文件夹
91+
const saveFileTypes = ['js', 'json', 'wxml', 'wxss']; // 需要保存的文件类型
92+
93+
const baseDemoPath = path.resolve(__dirname, './templates');
94+
const snippetsTargetPath = path.resolve(__dirname, './__snippets__/');
95+
const snippetsOriginPath = path.join(path.resolve(__dirname, '../_example/pages'), componentName);
96+
97+
if (!fs.existsSync(snippetsOriginPath)) {
98+
// eslint-disable-next-line no-console
99+
console.log('示例代码路径不存在:', snippetsOriginPath);
100+
return;
101+
}
102+
103+
const targetPath = path.join(snippetsTargetPath, `tdesign-${componentName}-demo`);
104+
105+
// 检查目标路径是否存在,存在则先移除
106+
if (fs.existsSync(targetPath)) {
107+
fs.rmSync(targetPath, { recursive: true, force: true });
108+
}
109+
110+
// 1. 复制基础模板到目标路径
111+
copyFiles(baseDemoPath, targetPath);
112+
113+
// 2. 复制示例代码到目标路径
114+
const cpDemoCodePath = path.join(targetPath, `pages/${componentName}`);
115+
copyFiles(snippetsOriginPath, cpDemoCodePath);
116+
117+
// 3. 清理不需要的文件
118+
removeFiles(cpDemoCodePath, filterFiles, saveFileTypes);
119+
120+
// 4. 替换模板内容
121+
replaceFileContent(targetPath, componentName, VERSION);
122+
123+
// eslint-disable-next-line no-console
124+
console.log(`Demo 片段生成完成: ${componentName}`);
125+
};
126+
127+
/**
128+
* @description 命令行执行: node generate-demo-snippet.mjs button
129+
*/
130+
const COMPONENT_NAME = process.argv[2];
131+
generateDemoSnippets(COMPONENT_NAME);

snippets/templates/.eslintrc.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*
2+
* Eslint config file
3+
* Documentation: https://eslint.org/docs/user-guide/configuring/
4+
* Install the Eslint extension before using this feature.
5+
*/
6+
module.exports = {
7+
env: {
8+
es6: true,
9+
browser: true,
10+
node: true
11+
},
12+
ecmaFeatures: {
13+
modules: true
14+
},
15+
parserOptions: {
16+
ecmaVersion: 2018,
17+
sourceType: 'module'
18+
},
19+
globals: {
20+
wx: true,
21+
App: true,
22+
Page: true,
23+
getCurrentPages: true,
24+
getApp: true,
25+
Component: true,
26+
requirePlugin: true,
27+
requireMiniProgram: true
28+
},
29+
// extends: 'eslint:recommended',
30+
rules: {}
31+
};

snippets/templates/app.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
App({
2+
onLaunch() {}
3+
});

snippets/templates/app.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"darkmode": true,
3+
"themeLocation": "theme.json",
4+
"resolveAlias": {},
5+
"pages": ["pages/button/button"],
6+
"usingComponents": {
7+
"t-demo": "./components/demo-block/index",
8+
"t-demo-header": "./components/demo-header/index",
9+
"t-button": "tdesign-miniprogram/button/button",
10+
"t-icon": "tdesign-miniprogram/icon/icon",
11+
"t-navbar": "tdesign-miniprogram/navbar/navbar"
12+
},
13+
"window": {
14+
"navigationBarTitleText": "TDesign",
15+
"navigationStyle": "custom",
16+
"navigationBarTextStyle": "@navTxtStyle"
17+
},
18+
"sitemapLocation": "sitemap.json",
19+
"lazyCodeLoading": "requiredComponents"
20+
}

0 commit comments

Comments
 (0)