chore(docs): 文档构建支持新的组件引入方式

WeBankFinTech · Sep 26, 2023 · 6a6d00e · 6a6d00e
1 parent 8c25b84
commit 6a6d00e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 26 deletions.
diff --git a/docs/.vitepress/components/tag/index.md b/docs/.vitepress/components/tag/index.md
@@ -14,45 +14,62 @@ app.use(FTag);
 
 ### 基础用法
 
---BASIC
+:::demo
+basic.vue
+:::
 
 ### 可移除标签
 
 设置 `closable` 属性可以定义一个标签是否可移除。
 
---CLOSABLE
+:::demo
+closable.vue
+:::
 
 ### 动态编辑标签
 
 动态编辑标签可以通过点击标签关闭按钮后触发的 `close` 事件来实现
 
---EDIT
+:::demo
+edit.vue
+:::
 
 ### 不同尺寸
 
 Tag 组件提供了以下几种尺寸，可以在不同场景下选择合适的尺寸。
 
---SIZE
+:::demo
+size.vue
+:::
 
 ### 不同主题
 
 Tag 组件提供了三个不同的主题。
 
---THEME
+:::demo
+theme.vue
+:::
 
 ### 带图标
 
---WITHICON
+:::demo
+withIcon.vue
+:::
 
 ### 结合 Form 组件
 
---WITHFORM
+:::demo
+withForm.vue
+:::
 
 ### 超长省略
 
---TOOLTIP
+:::demo
+tooltip.vue
+:::
 
---CODE
+:::code
+:::
 
 ## Tag Props
 

diff --git a/docs/.vitepress/scripts/constants.js b/docs/.vitepress/scripts/constants.js
@@ -1,12 +1,6 @@
 exports.SCRIPT_TEMPLATE = `
-<script>
+<script setup>
 IMPORT_EXPRESSION
-
-export default {
-    components: {
-        COMPONENTS
-    }
-}
 </script>
 `;
 

diff --git a/docs/.vitepress/scripts/genComponentDoc.js b/docs/.vitepress/scripts/genComponentDoc.js
@@ -113,15 +113,19 @@ async function genComponent(dir, name) {
             tempCode[`${name}.${demoName}`] = rawCode;
             tempCode[`${name}.${demoName}-code`] = await highlight(rawCode);
 
-            const matchStr = new RegExp(
-                `--${demoName.toLocaleUpperCase()}\\s`,
-                'i',
+            const dashMatchRegExp = new RegExp(`--${demoName}`, 'ig');
+            const nameMatchRegExp = new RegExp(
+                `:::demo[\\s]*${demoName}\.vue[\\s]*:::`,
+                'g',
             );
-            if (matchStr.test(fileContent)) {
-                fileContent = fileContent.replace(
-                    matchStr,
-                    demoContent.join('\n\n\n'),
-                );
+
+            if (
+                dashMatchRegExp.test(fileContent) ||
+                nameMatchRegExp.test(fileContent)
+            ) {
+                fileContent = fileContent
+                    .replace(dashMatchRegExp, demoContent.join('\n\n\n'))
+                    .replace(nameMatchRegExp, demoContent.join('\n\n\n'));
             } else {
                 demoMDStrs.push(...demoContent);
             }
@@ -131,13 +135,18 @@ async function genComponent(dir, name) {
     const scriptStr = SCRIPT_TEMPLATE.replace(
         'IMPORT_EXPRESSION',
         scriptCode.imports.join('\n'),
-    ).replace('COMPONENTS', scriptCode.components.join(',\n'));
+    );
 
     demoMDStrs.push(scriptStr);
 
     fse.outputFileSync(
         output,
-        fileContent.replace('--CODE', demoMDStrs.join('\n\n')),
+        fileContent
+            .replace('--CODE', demoMDStrs.join('\n\n'))
+            .replace(
+                new RegExp(`:::code[\\s\\S]*:::`),
+                demoMDStrs.join('\n\n'),
+            ),
     );
 
     if (Object.keys(tempCode).length) {