chore: cleanup and transform path on component

apps/www/.vitepress/theme/components/ComponentPreview.vue

@@ -17,8 +17,6 @@ defineOptions({
 const props = withDefaults(defineProps<{
   name: string
   align?: 'center' | 'start' | 'end'
-  sfcTsCode?: string
-  sfcTsHtml?: string
 }>(), { align: 'center' })
 
 const { style } = useConfigStore()
@@ -26,9 +24,16 @@ const { style } = useConfigStore()
 const codeString = ref('')
 const codeHtml = ref('')
 
+function transformImportPath(code: string) {
+  let parsed = code
+  parsed = parsed.replaceAll(`@/lib/registry/${style.value}`, '@/components')
+  parsed = parsed.replaceAll('@/lib/utils', '@/utils')
+  return parsed
+}
+
 watch(style, async () => {
   try {
-    codeString.value = await import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue?raw`).then(res => res.default.trim())
+    codeString.value = await import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue?raw`).then(res => transformImportPath(res.default.trim()))
     codeHtml.value = await codeToHtml(codeString.value, {
       lang: 'vue',
       theme: cssVariables,

apps/www/.vitepress/theme/plugins/previewer.ts

@@ -1,7 +1,5 @@
-import { dirname, resolve } from 'node:path'
-import fs from 'node:fs'
-import type { MarkdownEnv, MarkdownRenderer } from 'vitepress'
-import { generateDemoComponent, parseProps } from './utils'
+import type { MarkdownRenderer } from 'vitepress'
+import { parseProps } from './utils'
 
 export default function (md: MarkdownRenderer) {
   function addRenderRule(type: string) {
@@ -12,31 +10,9 @@ export default function (md: MarkdownRenderer) {
       if (!content.match(/^<ComponentPreview\s/) || !content.endsWith('/>'))
         return defaultRender!(tokens, idx, options, env, self)
 
-      const { path } = env as MarkdownEnv
       const props = parseProps(content)
-
-      const { name, attrs } = props
-      const pluginPath = dirname(__dirname)
-      const srcPath = resolve(pluginPath, '../../src/lib/registry/default/example/', `${name}.vue`).replace(/\\/g, '/')
-
-      if (!fs.existsSync(srcPath)) {
-        console.error(`rendering ${path}: ${srcPath} does not exist`)
-        return defaultRender!(tokens, idx, options, env, self)
-      }
-
-      let code = fs.readFileSync(srcPath, 'utf-8')
-      code = code.replaceAll(
-        '@/lib/registry/default/',
-        '@/components/',
-      )
-
-      const demoScripts = generateDemoComponent(md, env, {
-        attrs,
-        props,
-        code,
-        path: srcPath,
-      })
-
+      const { attrs } = props
+      const demoScripts = `<ComponentPreview ${attrs ?? ''} v-bind='${JSON.stringify(props)}'></ComponentPreview>`.trim()
       return demoScripts
     }
   }

apps/www/.vitepress/theme/plugins/utils.ts

@@ -1,6 +1,5 @@
 // Credit to @hairyf https://github.com/hairyf/markdown-it-vitepress-demo
 
-import type { MarkdownEnv, MarkdownRenderer } from 'vitepress'
 import { baseParse } from '@vue/compiler-core'
 import type { AttributeNode, ElementNode } from '@vue/compiler-core'
 
@@ -11,36 +10,6 @@ export interface GenerateOptions {
   code: string
 }
 
-export function parse(
-  md: MarkdownRenderer,
-  env: MarkdownEnv,
-  { code, attrs: _attrs, props }: GenerateOptions,
-) {
-  const highlightedHtml = md.options.highlight!(code, 'vue', _attrs || '')
-  const sfcTsHtml = highlightedHtml
-
-  const attrs
-   = `sfcTsCode="${encodeURIComponent(code)}"\n`
-   + `sfcTsHtml="${encodeURIComponent(sfcTsHtml)}"\n`
-   + `v-bind='${JSON.stringify(props)}'\n`
-
-  return {
-    attrs,
-    highlightedHtml,
-    sfcTsCode: code,
-    sfcTsHtml,
-  }
-}
-
-export function generateDemoComponent(
-  md: MarkdownRenderer,
-  env: MarkdownEnv,
-  options: GenerateOptions,
-) {
-  const { attrs } = parse(md, env, options)
-  return `<ComponentPreview \n${attrs}></ComponentPreview>`.trim()
-}
-
 export function isUndefined(v: any): v is undefined {
   return v === undefined || v === null
 }

apps/www/.vitepress/theme/utils/codeeditor.ts

@@ -105,19 +105,12 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
     'autoprefixer': 'latest',
   }
 
-  const transformImportPath = (code: string) => {
-    let parsed = code
-    parsed = parsed.replaceAll(`@/lib/registry/${style}`, '@/components')
-    parsed = parsed.replaceAll('@/lib/utils', '@/utils')
-    return parsed
-  }
-
   const componentFiles = Object.keys(sources).filter(key => key.endsWith('.vue') && key !== 'index.vue')
   const components: Record<string, any> = {}
   componentFiles.forEach((i) => {
     components[`src/${i}`] = {
       isBinary: false,
-      content: transformImportPath(sources[i]),
+      content: sources[i],
     }
   })