feat(site): add changelog for each component page (#3725)

* feat(site): add changelog for each component page

* fix: support English and Chinese punctuation in description parsing

* refactor: add mapping for parent and child components

* chore: introduce plugin via common repository

* fix: resolve conflicts

* fix: fix dependency version mismatch

* ci: add install-script

---------

Co-authored-by: anlyyao <anly_yaw@163.com>

Author: RylanBot

.github/workflows/pr-compressed-size.yml

@@ -14,4 +14,5 @@ jobs:
       - uses: preactjs/compressed-size-action@v2
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          install-script: 'npm install'
           pattern: './miniprogram_dist/**/*.{js,wxs,wxml,json}'

CHANGELOG.md

@@ -8,7 +8,9 @@ docClass: timeline
 
 ## 🌈 1.9.5 `2025-06-13` 
 ### 🚀 Features
-- `Picker`: 新增 `content` 插槽，用于处理空数据场景；支持点击选中 @anlyyao ([#3711](https://github.com/Tencent/tdesign-miniprogram/pull/3711))([#3712](https://github.com/Tencent/tdesign-miniprogram/pull/3712))
+- `Picker`: 
+  - 新增 `content` 插槽，用于处理空数据场景 @anlyyao ([#3711](https://github.com/Tencent/tdesign-miniprogram/pull/3711))
+  - 支持点击选中 @anlyyao ([#3712](https://github.com/Tencent/tdesign-miniprogram/pull/3712))
 - `Fab`: 未显示传入 `icon` 和 `text` 时将启用默认插槽，用于自定义悬浮按钮内容，此时 `buttonProps` 将失效 @novlan1 ([#3684](https://github.com/Tencent/tdesign-miniprogram/pull/3684))
 - `Upload`: 新增 `preview` 属性，用于关闭/开启图片预览 @anlyyao ([#3714](https://github.com/Tencent/tdesign-miniprogram/pull/3714))
 ### 🐞 Bug Fixes

package.json

@@ -26,9 +26,9 @@
     "lintfix": "eslint '{src,example}/**/*.{js,ts}' --fix",
     "lint": "eslint '{src,example}/**/*.{js,ts}'",
     "format": "prettier {src,example,script}/**/*.{js,ts,wxss,less,wxml,html,json,md,wxs} --write",
-    "site": "cd site && vite build",
-    "site:dev": "cd site && vite",
-    "site:intranet": "cd site && vite build --mode intranet",
+    "site": "cd site && vite build --configLoader runner",
+    "site:dev": "cd site && vite --configLoader runner",
+    "site:intranet": "cd site && vite build --mode intranet --configLoader runner",
     "site:prerender": "node script/prerender.mjs",
     "cover": "jest --coverage",
     "test": "jest && jest -c jest.e2e.config.js",
@@ -58,8 +58,8 @@
     "@types/node": "^20.14.11",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "~5.35.0",
-    "@vitejs/plugin-vue": "^2.3.3",
-    "@vitejs/plugin-vue-jsx": "^1.1.7",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue-jsx": "^4.2.0",
     "@vue/compiler-sfc": "^3.2.4",
     "axios": "^1.1.3",
     "babel-jest": "^26.6.3",
@@ -110,12 +110,12 @@
     "stylelint": "^13.13.1",
     "tdesign-icons-view": "^0.3.6",
     "tdesign-publish-cli": "^0.0.12",
-    "tdesign-site-components": "^0.15.2",
+    "tdesign-site-components": "^0.16.0",
     "tdesign-theme-generator": "^1.1.0",
     "tinycolor2": "^1.4.2",
     "tslib": "^2.8.1",
     "typescript": "~4.7.2",
-    "vite": "^2.7.6",
+    "vite": "^6.2.3",
     "vite-plugin-tdoc": "^2.0.1",
     "vue": "^3.2.4",
     "vue-router": "^4.0.11"

site/plugins/changelog-to-json/index.ts

@@ -0,0 +1,32 @@
+import { promises } from 'fs';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+import type { ViteDevServer } from 'vite';
+import generateChangelogJson from '../../../src/_common/docs/plugins/changelog-to-json';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const outputPath = path.resolve(__dirname, '../../dist/changelog.json');
+const changelogPath = path.resolve(__dirname, '../../../CHANGELOG.md');
+
+export default function changelog2Json() {
+  return {
+    name: 'changelog-to-json',
+    configureServer(server: ViteDevServer) {
+      // 开发模式时拦截请求
+      server.middlewares.use('/changelog.json', async (_, res) => {
+        const json = await generateChangelogJson(changelogPath, 'mobile');
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify(json));
+      });
+    },
+    async closeBundle() {
+      // 生产构建时写入物理文件
+      if (process.env.NODE_ENV === 'production') {
+        const json = await generateChangelogJson(changelogPath, 'mobile');
+        await promises.writeFile(outputPath, JSON.stringify(json));
+      }
+    },
+  };
+}

site/plugin-tdoc/component.vue site/plugins/plugin-tdoc/component.vuesite/plugin-tdoc/component.vue renamed to site/plugins/plugin-tdoc/component.vue

@@ -1,7 +1,9 @@
 import fs from 'fs';
 import path from 'path';
+import { fileURLToPath } from 'url';
 import matter from 'gray-matter';
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const componentPath = path.join(__dirname, './component.vue').replaceAll('\\', '/');
 
 const DEFAULT_TABS = [
@@ -67,7 +69,7 @@ function customRender({ source, file, md }: any) {
 
   // 设计指南内容 不展示 design Tab 则不解析
   if (pageData.isComponent && pageData.tdDocTabs.some((item) => item.tab === 'design')) {
-    const designDocPath = path.resolve(__dirname, `../../src/_common/docs/mobile/design/${componentName}.md`);
+    const designDocPath = path.resolve(__dirname, `../../../src/_common/docs/mobile/design/${componentName}.md`);
 
     if (fs.existsSync(designDocPath)) {
       const designMd = fs.readFileSync(designDocPath, 'utf-8');

site/plugin-tdoc/index.ts site/plugins/plugin-tdoc/index.tssite/plugin-tdoc/index.ts renamed to site/plugins/plugin-tdoc/index.ts

@@ -12,7 +12,7 @@ export default {
     demoCodesImports = {};
 
     // 增加渲染规则
-    md.renderer.rules.html_block = function (tokens: string, idx: number) {
+    md.renderer.rules.html_block = function (tokens: any[], idx: number) {
       const { content } = tokens[idx];
       if (content.startsWith('<img') && content.indexOf('qrcode') === -1) {
         return '';
@@ -25,6 +25,7 @@ export default {
     source = source.replace(/{{\s+(.+)\s+}}/g, (_: string, demoDirName: string) => {
       const demoPath = path.resolve(resourceDir, `./_example/${demoDirName}`);
       if (!fs.existsSync(demoPath)) {
+        // eslint-disable-next-line no-console
         console.log('\x1B[36m%s\x1B[0m', `${name} 组件需要实现 _example/${demoDirName} 示例!`);
         return '\n<h3>DEMO (🚧建设中）...</h3>';
       }

site/plugin-tdoc/md-to-vue.ts site/plugins/plugin-tdoc/md-to-vue.tssite/plugin-tdoc/md-to-vue.ts renamed to site/plugins/plugin-tdoc/md-to-vue.ts

@@ -1,9 +1,15 @@
-import * as path from 'path';
+import path from 'path';
+import { fileURLToPath } from 'url';
 import { defineConfig } from 'vite';
+
+import rollupResolve from '@rollup/plugin-node-resolve';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
-import rollupResolve from '@rollup/plugin-node-resolve';
-import createTDesignPlugin from './plugin-tdoc';
+
+import changelog2Json from './plugins/changelog-to-json';
+import createTDesignPlugin from './plugins/plugin-tdoc';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const publicPathMap: Record<string, string> = {
   preview: '/',
@@ -55,6 +61,7 @@ export default ({ mode }: any) => {
       }),
       vueJsx(),
       createTDesignPlugin(),
+      changelog2Json(),
     ],
   });
 };