fix(markdown-vetur): extract component name from table title (#8450)

packages/vant-markdown-vetur/src/formatter.ts

@@ -1,30 +1,54 @@
 /* eslint-disable no-continue */
-import { Artical, Articals } from './parser';
+import { Articals } from './parser';
 import { formatType, removeVersion, toKebabCase } from './utils';
 import { VueTag } from './type';
 
-function getComponentName(artical: Artical, tagPrefix: string) {
-  if (artical.content) {
-    return tagPrefix + toKebabCase(artical.content.split(' ')[0]);
-  }
-  return '';
+function formatComponentName(name: string, tagPrefix: string) {
+  return tagPrefix + toKebabCase(name);
 }
 
-export function formatter(articals: Articals, tagPrefix: string = '') {
-  if (!articals.length) {
-    return;
+function getNameFromTableTitle(tableTitle: string, tagPrefix: string) {
+  tableTitle = tableTitle.trim();
+  if (tableTitle.includes(' ')) {
+    return formatComponentName(tableTitle, tagPrefix).split(' ')[0];
+  }
+}
+
+function findTag(vueTags: VueTag[], name: string) {
+  const matched = vueTags.find((item) => item.name === name);
+
+  if (matched) {
+    return matched;
   }
 
-  const tag: VueTag = {
-    name: getComponentName(articals[0], tagPrefix),
+  const newTag: VueTag = {
+    name,
     slots: [],
     events: [],
     attributes: [],
   };
 
-  const tables = articals.filter(artical => artical.type === 'table');
+  vueTags.push(newTag);
 
-  tables.forEach(item => {
+  return newTag;
+}
+
+export function formatter(
+  vueTags: VueTag[],
+  articals: Articals,
+  tagPrefix = ''
+) {
+  if (!articals.length) {
+    return;
+  }
+
+  const mainTitle = articals[0].content;
+  const defaultName = mainTitle
+    ? formatComponentName(mainTitle.split(' ')[0], tagPrefix)
+    : '';
+  const tables = articals.filter((artical) => artical.type === 'table');
+
+  tables.forEach((item) => {
     const { table } = item;
     const prevIndex = articals.indexOf(item) - 1;
     const prevArtical = articals[prevIndex];
@@ -36,7 +60,10 @@ export function formatter(articals: Articals, tagPrefix: string = '') {
     const tableTitle = prevArtical.content;
 
     if (tableTitle.includes('Props')) {
-      table.body.forEach(line => {
+      const name = getNameFromTableTitle(tableTitle, tagPrefix) || defaultName;
+      const tag = findTag(vueTags, name);
+
+      table.body.forEach((line) => {
         const [name, desc, type, defaultVal] = line;
         tag.attributes!.push({
           name: removeVersion(name),
@@ -52,7 +79,10 @@ export function formatter(articals: Articals, tagPrefix: string = '') {
     }
 
     if (tableTitle.includes('Events')) {
-      table.body.forEach(line => {
+      const name = getNameFromTableTitle(tableTitle, tagPrefix) || defaultName;
+      const tag = findTag(vueTags, name);
+
+      table.body.forEach((line) => {
         const [name, desc] = line;
         tag.events!.push({
           name: removeVersion(name),
@@ -63,7 +93,10 @@ export function formatter(articals: Articals, tagPrefix: string = '') {
     }
 
     if (tableTitle.includes('Slots')) {
-      table.body.forEach(line => {
+      const name = getNameFromTableTitle(tableTitle, tagPrefix) || defaultName;
+      const tag = findTag(vueTags, name);
+
+      table.body.forEach((line) => {
         const [name, desc] = line;
         tag.slots!.push({
           name: removeVersion(name),
@@ -72,6 +105,4 @@ export function formatter(articals: Articals, tagPrefix: string = '') {
       });
     }
   });
-
-  return tag;
 }

packages/vant-markdown-vetur/src/index.ts

@@ -11,8 +11,8 @@ import { genVeturTags, genVeturAttributes } from './vetur';
 async function readMarkdown(options: Options) {
   const mds = await glob(normalizePath(`${options.path}/**/*.md`));
   return mds
-    .filter(md => options.test.test(md))
-    .map(path => readFileSync(path, 'utf-8'));
+    .filter((md) => options.test.test(md))
+    .map((path) => readFileSync(path, 'utf-8'));
 }
 
 export async function parseAndWrite(options: Options) {
@@ -21,13 +21,16 @@ export async function parseAndWrite(options: Options) {
   }
 
   const mds = await readMarkdown(options);
-  const datas = mds
-    .map(md => formatter(mdParser(md), options.tagPrefix))
-    .filter(item => !!item) as VueTag[];
+  const vueTags: VueTag[] = [];
 
-  const webTypes = genWebTypes(datas, options);
-  const veturTags = genVeturTags(datas);
-  const veturAttributes = genVeturAttributes(datas);
+  mds.forEach((md) => {
+    const parsedMd = mdParser(md);
+    formatter(vueTags, parsedMd, options.tagPrefix);
+  });
+
+  const webTypes = genWebTypes(vueTags, options);
+  const veturTags = genVeturTags(vueTags);
+  const veturAttributes = genVeturAttributes(vueTags);
 
   outputFileSync(
     join(options.outputDir, 'tags.json'),

src/calendar/README.md

@@ -268,7 +268,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
 | confirm-disabled-text | Confirm button text when disabled | _string_ | `Confirm` |
 | first-day-of-week | Set the start day of week | _0-6_ | `0` |
 
-### Poppable Props
+### Calendar Poppable Props
 
 Following props are supported when the poppable is true
 
@@ -282,7 +282,7 @@ Following props are supported when the poppable is true
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
 | teleport | Return the mount node for Calendar | _string \| Element_ | - |
 
-### Range Props
+### Calendar Range Props
 
 Following props are supported when the type is range
 
@@ -292,7 +292,7 @@ Following props are supported when the type is range
 | range-prompt | Error message when exceeded max range | _string_ | `Choose no more than xx days` |
 | allow-same-day | Whether the start and end time of the range is allowed on the same day | _boolean_ | `false` |
 
-### Multiple Props
+### Calendar Multiple Props
 
 Following props are supported when the type is multiple
 

src/calendar/README.zh-CN.md

@@ -272,7 +272,7 @@ export default {
 | confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` |
 | first-day-of-week | 设置周起始日 | _0-6_ | `0` |
 
-### Poppable Props
+### Calendar Poppable Props
 
 当 Canlendar 的 `poppable` 为 `true` 时，支持以下 props:
 
@@ -286,7 +286,7 @@ export default {
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
 | teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | - |
 
-### Range Props
+### Calendar Range Props
 
 当 Canlendar 的 `type` 为 `range` 时，支持以下 props:
 
@@ -296,7 +296,7 @@ export default {
 | range-prompt | 范围选择超过最多可选天数时的提示文案 | _string_ | `选择天数不能超过 xx 天` |
 | allow-same-day | 是否允许日期范围的起止时间为同一天 | _boolean_ | `false` |
 
-### Multiple Props
+### Calendar Multiple Props
 
 当 Canlendar 的 `type` 为 `multiple` 时，支持以下 props: