docs: improve transformer rendering

unovue · Jul 25, 2024 · 6655ac6 · 6655ac6
1 parent b5fcb61
commit 6655ac6
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 24 deletions.
diff --git a/docs/.vitepress/plugins/HoverTransformer.ts b/docs/.vitepress/plugins/HoverTransformer.ts
@@ -1,8 +1,30 @@
 import type { ShikiTransformer } from 'shiki'
 import type { Element, Text } from 'hast'
 import { components as componentsObj } from '../../../packages/radix-vue/constant/components'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+function extractAndTransformData(tagName: string, raw: string): Element | null {
+  const match = raw.match(new RegExp(`<${tagName} :data="(\\[.*?\\])" \\/>`, 's'))
+  if (match && match[1]) {
+    return {
+      type: 'element',
+      tagName: tagName.toLowerCase().replace('table', '-table'),
+      properties: {
+        data: match[1].replace(/'/g, '"'),
+      },
+      children: [],
+    }
+  }
+  return null
+}
 
 export function createHoverTransformer(): ShikiTransformer {
+  const contentMap = new Map<string, Element[]>()
+
   return {
     name: 'custom:hover-card',
     preprocess(code, options) {
@@ -33,6 +55,21 @@ export function createHoverTransformer(): ShikiTransformer {
             if (component.includes(value)) {
               tokensMap.push([line, index, index + value.length, token, value])
               index += value.length
+
+              if (!contentMap.get(value)) {
+                try {
+                  const raw = readFileSync(join(__dirname, `../../content/meta/${value}.md`), 'utf8')
+
+                  const content = ['PropsTable', 'EmitsTable', 'SlotsTable', 'MethodsTable']
+                    .map(tag => extractAndTransformData(tag, raw))
+                    .filter((element): element is Element => element !== null)
+
+                  contentMap.set(value, content)
+                }
+                catch (err) {
+                  // File doesn't exist
+                }
+              }
             }
           }
         }
@@ -50,6 +87,9 @@ export function createHoverTransformer(): ShikiTransformer {
 
       if (tokensMap.length) {
         tokensMap.forEach(([,,,token, value]) => {
+          if (!contentMap.has(value))
+            return
+
           Object.assign(token, {
             type: 'element',
             tagName: 'link-hover-card',
@@ -65,6 +105,10 @@ export function createHoverTransformer(): ShikiTransformer {
                   'v-slot:content': '{}',
                 },
                 children: [],
+                content: {
+                  type: 'root',
+                  children: contentMap.get(value) ?? [],
+                },
               },
             ],
           } satisfies Element)

diff --git a/docs/components/LinkHoverCard.vue b/docs/components/LinkHoverCard.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { computedAsync, hyphenate } from '@vueuse/core'
+import { hyphenate } from '@vueuse/core'
 import { HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger } from 'radix-vue'
-import { computed, h } from 'vue'
-// @ts-expect-error we should use alias but I don't want to export all
-import { compile } from 'vue/dist/vue.esm-bundler.js'
+import { computed } from 'vue'
 
 const props = defineProps<{
   name: string
@@ -13,13 +11,6 @@ const href = computed(() => {
   const [last, ...parts] = hyphenate(props.name).split('-').reverse()
   return `/components/${parts.join('-')}.html#${last}`
 })
-
-// Better to have this cache
-const Content = computedAsync(async () => {
-  const raw = await import(`../content/meta/${props.name}.md?raw`)
-  const componentString = raw.default.replace(/<!--[\s\S]*?-->\n?/, '')
-  return h(compile(componentString))
-})
 </script>
 
 <template>
@@ -38,11 +29,7 @@ const Content = computedAsync(async () => {
         align="start"
         :align-offset="-20"
       >
-        <slot name="content">
-          <Suspense>
-            <Content />
-          </Suspense>
-        </slot>
+        <slot name="content" />
 
         <HoverCardArrow
           class="fill-card stroke-muted-foreground/30 -translate-y-[1px]"

diff --git a/docs/components/tables/EmitsTable.vue b/docs/components/tables/EmitsTable.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { ProseCodeInline, ProseTable, ProseTd, ProseTh, ProseThead, ProseTr } from '../prose'
 import { Icon } from '@iconify/vue'
 
@@ -11,9 +12,18 @@ type PropDef = {
 }
 
 interface EmitsTableProps {
-  data: PropDef[]
+  data: PropDef[] | string
 }
 const props = defineProps<EmitsTableProps>()
+
+const data = computed(() => {
+  if (typeof props.data === 'string') {
+    return JSON.parse(props.data)
+  }
+  else {
+    return props.data
+  }
+})
 </script>
 
 <template>
@@ -33,7 +43,7 @@ const props = defineProps<EmitsTableProps>()
     </ProseThead>
     <tbody>
       <ProseTr
-        v-for="(prop, index) in props.data"
+        v-for="(prop, index) in data"
         :key="`${prop.name}-${index}`"
       >
         <ProseTd>

diff --git a/docs/components/tables/MethodsTable.vue b/docs/components/tables/MethodsTable.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { ProseCodeInline, ProseTable, ProseTd, ProseTh, ProseThead, ProseTr } from '../prose'
 import { Icon } from '@iconify/vue'
 
@@ -11,9 +12,18 @@ type PropDef = {
 }
 
 interface EmitsTableProps {
-  data: PropDef[]
+  data: PropDef[] | string
 }
 const props = defineProps<EmitsTableProps>()
+
+const data = computed(() => {
+  if (typeof props.data === 'string') {
+    return JSON.parse(props.data)
+  }
+  else {
+    return props.data
+  }
+})
 </script>
 
 <template>
@@ -33,7 +43,7 @@ const props = defineProps<EmitsTableProps>()
     </ProseThead>
     <tbody>
       <ProseTr
-        v-for="(prop, index) in props.data"
+        v-for="(prop, index) in data"
         :key="`${prop.name}-${index}`"
       >
         <ProseTd>

diff --git a/docs/components/tables/PropsTable.vue b/docs/components/tables/PropsTable.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { ProseCodeInline, ProseTable, ProseTd, ProseTh, ProseThead, ProseTr } from '../prose'
 import { Icon } from '@iconify/vue'
 
@@ -12,9 +13,18 @@ type PropDef = {
 }
 
 interface PropsTableProps {
-  data: PropDef[]
+  data: PropDef[] | string
 }
 const props = defineProps<PropsTableProps>()
+
+const data = computed(() => {
+  if (typeof props.data === 'string') {
+    return JSON.parse(props.data)
+  }
+  else {
+    return props.data
+  }
+})
 </script>
 
 <template>
@@ -39,7 +49,7 @@ const props = defineProps<PropsTableProps>()
 
     <tbody>
       <ProseTr
-        v-for="(prop, index) in props.data"
+        v-for="(prop, index) in data"
         :key="`${prop.name}-${index}`"
       >
         <ProseTd>

diff --git a/docs/components/tables/SlotsTable.vue b/docs/components/tables/SlotsTable.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { ProseCodeInline, ProseTable, ProseTd, ProseTh, ProseThead, ProseTr } from '../prose'
 import { Icon } from '@iconify/vue'
 
@@ -11,9 +12,18 @@ type PropDef = {
 }
 
 interface SlotsTableProps {
-  data: PropDef[]
+  data: PropDef[] | string
 }
 const props = defineProps<SlotsTableProps>()
+
+const data = computed(() => {
+  if (typeof props.data === 'string') {
+    return JSON.parse(props.data)
+  }
+  else {
+    return props.data
+  }
+})
 </script>
 
 <template>
@@ -33,7 +43,7 @@ const props = defineProps<SlotsTableProps>()
     </ProseThead>
     <tbody>
       <ProseTr
-        v-for="(prop, index) in props.data"
+        v-for="(prop, index) in data"
         :key="`${prop.name}-${index}`"
       >
         <ProseTd>