Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: fix sb having wrong path

Browse Source
This commit is contained in:
zernonia 2024-03-14 20:53:10 +08:00
parent 6d0cde4b8e
commit d4c7b0107f
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/www/.vitepress/theme/components/ComponentPreview.vue
View File

@ -22,7 +22,7 @@ const props = withDefaults(defineProps<{
const { style, codeConfig } = useConfigStore() const { style, codeConfig } = useConfigStore()
const codeString = ref('') const rawString = ref('')
const codeHtml = ref('') const codeHtml = ref('')
function transformImportPath(code: string) { function transformImportPath(code: string) {
@ -34,8 +34,8 @@ function transformImportPath(code: string) {
watch([style, codeConfig], async () => { watch([style, codeConfig], async () => {
try { try {
codeString.value = await import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue?raw`).then(res => transformImportPath(res.default.trim())) rawString.value = await import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue?raw`).then(res => res.default.trim())
codeHtml.value = await codeToHtml(codeString.value, { codeHtml.value = await codeToHtml(transformImportPath(rawString.value), {
lang: 'vue', lang: 'vue',
theme: cssVariables, theme: cssVariables,
}) })
@ -72,8 +72,8 @@ watch([style, codeConfig], async () => {
<StyleSwitcher /> <StyleSwitcher />
<div class="flex items-center gap-x-1"> <div class="flex items-center gap-x-1">
<Stackblitz :key="style" :style="style" :name="name" :code="codeString" /> <Stackblitz :key="style" :style="style" :name="name" :code="rawString" />
<CodeSandbox :key="style" :style="style" :name="name" :code="codeString" /> <CodeSandbox :key="style" :style="style" :name="name" :code="rawString" />
</div> </div>
</div> </div>
<div <div

12
apps/www/.vitepress/theme/utils/codeeditor.ts
View File

@ -18,7 +18,7 @@ export function makeCodeSandboxParams(componentName: string, style: Style, sourc
export function makeStackblitzParams(componentName: string, style: Style, sources: Record<string, string>) { export function makeStackblitzParams(componentName: string, style: Style, sources: Record<string, string>) {
const files: Record<string, string> = {} const files: Record<string, string> = {}
Object.entries(constructFiles(componentName, style, sources)).forEach(([k, v]) => (files[`${k}`] = typeof v.content === 'object' ? JSON.stringify(v.content, null, 2) : v.content)) Object.entries(constructFiles(componentName, style, sources)).forEach(([k, v]) => (files[`${k}`] = typeof v.content === 'object' ? JSON.stringify(v.content, null, 2) : v.content))
console.log({ files, componentName, style, sources })
return sdk.openProject({ return sdk.openProject({
title: `${componentName} - Radix Vue`, title: `${componentName} - Radix Vue`,
files, files,
@ -106,12 +106,20 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
'autoprefixer': 'latest', 'autoprefixer': 'latest',
} }
// We have static replace here as this is only showing for code reproduction, doesn't need dynamic codeConfig
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 componentFiles = Object.keys(sources).filter(key => key.endsWith('.vue') && key !== 'index.vue')
const components: Record<string, any> = {} const components: Record<string, any> = {}
componentFiles.forEach((i) => { componentFiles.forEach((i) => {
components[`src/${i}`] = { components[`src/${i}`] = {
isBinary: false, isBinary: false,
content: sources[i], content: transformImportPath(sources[i]),
} }
}) })