Commit dbff840

committed

feat: add DemoRender

1 parent 3cbac00 commit dbff840Copy full SHA for dbff840

File tree

+28

-24

lines changed

+28

-24

lines changed

Lines changed: 23 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,23 @@`
	`1`	`+<template>`
	`2`	`+ <ClientOnly>`
	`3`	`+ <div`
	`4`	`+ :style="{`
	`5`	`+ width: '100%',`
	`6`	`+ borderRadius: '8px',`
	`7`	`+ padding: '20px',`
	`8`	`+ backgroundColor: '#FFF',`
	`9`	`+ border: '1px solid lightgray',`
	`10`	`+ }"`
	`11`	`+ >`
	`12`	`+ <component :is="vueComponent" />`
	`13`	`+ </div>`
	`14`	`+ </ClientOnly>`
	`15`	`+</template>`
	`16`	`+`
	`17`	`+<script setup lang="ts">`
	`18`	`+const props = defineProps<{`
	`19`	`+ component: string`
	`20`	`+}>()`
	`21`	`+`
	`22`	+const vueComponent = (await import(`../code/${props.component}.vue`)).default
	`23`	`+</script>`

Lines changed: 4 additions & 13 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,16 +1,6 @@`
`1`		`-<ClientOnly>`
`2`		`- <div`
`3`		`- :style="{`
`4`		`- width: '100%',`
`5`		`- borderRadius: '8px',`
`6`		`- padding: '20px',`
`7`		`- backgroundColor: '#FFF',`
`8`		`- border: '1px solid lightgray',`
`9`		`- }"`
`10`		`- >`
`11`		`- <component :is="component" />`
`12`		`- </div>`
`13`		`-</ClientOnly>`
	`1`	`+<Suspense>`
	`2`	`+ <DemoRender :component="component" />`
	`3`	`+</Suspense>`
`14`	`4`
`15`	`5`	`<ClientOnly>`
`16`	`6`	`<div :style="{ margin: '16px 0' }">`
`@@ -28,6 +18,7 @@`
`28`	`18`	`import { ref } from 'vue'`
`29`	`19`	`import { useData } from 'vitepress'`
`30`	`20`
	`21`	`+import DemoRender from './DemoRender.vue'`
`31`	`22`	`import PlaygroundLink from './PlaygroundLink.vue'`
`32`	`23`	`import { data as sourceCodeMap } from '../data/code.data'`
`33`	`24`	`import { codeDemoI18n } from '../constants/i18n'`

Lines changed: 1 addition & 11 deletions

Original file line number	Diff line number	Diff line change
`@@ -7,19 +7,9 @@ import '@wsfe/vue-tree/style.css'`
`7`	`7`
`8`	`8`	`export default {`
`9`	`9`	`extends: DefaultTheme,`
`10`		`- asyncenhanceApp({ app }) {`
	`10`	`+ enhanceApp({ app }) {`
`11`	`11`	`// 注册自定义全局组件`
`12`	`12`	`app.component('CodeDemo', CodeDemo)`
`13`	`13`	`app.component('PlaygroundLink', PlaygroundLink)`
`14`		`-`
`15`		`- const codeDemoComponents = import.meta.glob('../code/*.vue')`
`16`		`-`
`17`		`- for (const path in codeDemoComponents) {`
`18`		`- const component = await codeDemoComponents[path]()`
`19`		`- const componentName = path.match(/^(?:.*\/)?(.+)\.vue$/)?.[1]`
`20`		`- if (componentName && component?.default) {`
`21`		`- app.component(componentName, component.default)`
`22`		`- }`
`23`		`- }`
`24`	`14`	`}`
`25`	`15`	`} satisfies Theme`

Comments

(0)