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

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

* chore: update NODE_ENV

* chore: fix cjs config

* chore: fix build

* chore: fix mobile preview

* chore: fix mobile preview

* chore: adjust code

* chore: code style

Author: liweijie0812

package.json

@@ -32,7 +32,7 @@
     "site:build": "cd site && vite build",
     "site:serve": "cd site && vite preview",
     "site:intranet": "cd site && vite build --mode intranet",
-    "site:preview": "cd site && cross-env NODE_ENV=development vite build --mode preview",
+    "site:preview": "cd site && vite build --mode preview",
     "postsite:preview": "cp _site/index.html _site/404.html",
     "lint": "eslint --ext .ts,.tsx ./ --max-warnings 0",
     "lint:fix": "eslint --ext .ts,.tsx ./ --max-warnings 0 --fix",

site/.env.preview

@@ -0,0 +1 @@
+NODE_ENV=development

site/vite.config.js site/vite.config.mjssite/vite.config.js renamed to site/vite.config.mjs

@@ -4,9 +4,11 @@ import { defineConfig } from 'vite';
 import replace from '@rollup/plugin-replace';
 import react from '@vitejs/plugin-react';
 import { VitePWA } from 'vite-plugin-pwa';
-import tdocPlugin from './plugin-tdoc';
 import pwaConfig from './pwaConfig';
 
+import changelog2Json from './web/plugins/changelog-to-json';
+import tdocPlugin from './web/plugins/plugin-tdoc';
+
 const publicPathMap = {
   preview: '/',
   intranet: '/mobile-react/',
@@ -63,6 +65,7 @@ export default ({ mode }) =>
     plugins: [
       react(),
       tdocPlugin(),
+      changelog2Json(),
       VitePWA(pwaConfig),
       disableTreeShakingPlugin(['style/']),
       replace({ __DATE__: new Date().toISOString() }),

site/web/plugins/changelog-to-json/index.js

@@ -0,0 +1,32 @@
+import { promises } from 'fs';
+import path from 'path';
+
+import generateChangelogJson from '../../../../src/_common/docs/plugins/changelog-to-json';
+
+const outputPath = path.resolve(__dirname, '../../../../_site/changelog.json');
+const changelogPath = path.resolve(__dirname, '../../../../CHANGELOG.md');
+
+export default function changelog2Json() {
+  let config;
+  return {
+    name: 'changelog-to-json',
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+    configureServer(server) {
+      // 开发模式时拦截请求
+      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 (config.env.PROD || config.env.MODE === 'preview') {
+        const json = await generateChangelogJson(changelogPath, 'mobile');
+        await promises.writeFile(outputPath, JSON.stringify(json));
+      }
+    },
+  };
+}

site/plugin-tdoc/demo.js site/web/plugins/plugin-tdoc/demo.jssite/plugin-tdoc/demo.js renamed to site/web/plugins/plugin-tdoc/demo.js

@@ -4,9 +4,10 @@ import path from 'path';
 import matter from 'gray-matter';
 import camelCase from 'camelcase';
 
-import testCoverage from '../test-coverage';
+import testCoverage from '../../../test-coverage';
 
 import { transformSync } from '@babel/core';
+import babelPresetReact from '@babel/preset-react';
 
 export default function mdToReact(options) {
   const mdSegment = customRender(options);
@@ -152,7 +153,7 @@ export default function mdToReact(options) {
     generatorOpts: {
       decoratorsBeforeExport: true,
     },
-    presets: [require('@babel/preset-react')],
+    presets: [babelPresetReact],
   });
 
   return { code: result.code, map: result.map };
@@ -231,12 +232,13 @@ function customRender({ source, file, md }) {
   }
 
   // 移动端路由地址
+  // console.log('process.env', process.env);
   const prefix = process.env.NODE_ENV === 'development' ? `/mobile.html` : `/mobile-react/mobile.html`;
   mdSegment.mobileUrl = `${prefix}#/${componentName}`;
 
   // 设计指南内容 不展示 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.js site/web/plugins/plugin-tdoc/index.jssite/plugin-tdoc/index.js renamed to site/web/plugins/plugin-tdoc/index.js

@@ -17,8 +17,8 @@ export default {
 
     // 统一换成 common 文档内容
     if (fileName && source.includes(':: BASE_DOC ::')) {
-      const localeDocPath = path.resolve(__dirname, `../../src/_common/docs/mobile/api/${fileName}`);
-      const defaultDocPath = path.resolve(__dirname, `../../src/_common/docs/mobile/api/${componentName}.md`);
+      const localeDocPath = path.resolve(__dirname, `../../../../src/_common/docs/mobile/api/${fileName}`);
+      const defaultDocPath = path.resolve(__dirname, `../../../../src/_common/docs/mobile/api/${componentName}.md`);
 
       let baseDoc = '';
       if (fs.existsSync(localeDocPath)) {