chore: fix docs build

vuetifyjs · Aug 15, 2024 · 2766105 · 2766105
1 parent e4ce28d
commit 2766105
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 37 deletions.
diff --git a/packages/docs/build/frontmatterMeta.ts → packages/docs/build/markdownBuilders.ts b/packages/docs/build/frontmatterMeta.ts → packages/docs/build/markdownBuilders.ts
@@ -52,54 +52,75 @@ const validate = ajv.compile({
   },
 })
 
-export const frontmatterBuilder = createBuilder('frontmatterBuilder', 'metaExtracted')
-  .options<{
-    files?: Map<string, Pipeline<'metaExtracted'>>
-    awaiting?: Map<string, ((v: Pipeline<'metaExtracted'>) => void)[]>
+async function setupPages<T extends Pipeline<any>> (
+  payload: T,
+  options: {
+    files?: Map<string, T>
+    awaiting?: Map<string, ((v: T) => void)[]>
     pages?: ReadonlyArray<Record<'name' | 'path' | 'component', string>>
-  }>()
-  .initializer()
-  .handler(async (payload, options) => {
-    const { frontmatter, fileName } = payload
+  }
+) {
+  if (!options.pages) {
+    const pagesPlugin = payload.viteConfig.plugins!
+      .find((p: any) => p && 'name' in p && p.name === 'vite-plugin-pages') as Plugin
+    options.pages = await pagesPlugin.api.getResolvedRoutes() as []
+  }
 
-    if (!options.pages) {
-      const pagesPlugin = payload.viteConfig.plugins!
-        .find(p => p && 'name' in p && p.name === 'vite-plugin-pages') as Plugin
-      options.pages = await pagesPlugin.api.getResolvedRoutes() as []
-    }
+  const page = options.pages.find(p => payload.fileName.endsWith(p.component))
 
-    const page = options.pages.find(p => fileName.endsWith(p.component))
+  if (!page) throw new Error('Unable to find page')
 
-    if (!page) throw new Error('Unable to find page')
+  const locale = page.path.split('/').at(1)!
 
-    const locale = page.path.split('/').at(0)!
+  const html = 'html' in payload && typeof payload.html !== 'string'
+    ? payload.html.cloneNode(true)
+    : undefined
+  options.files ??= new Map()
+  options.files.set(page.path, {
+    ...payload,
+    html,
+  })
 
-    options.files ??= new Map()
-    options.files.set(page.path, payload)
+  let original: T | undefined
+  if (locale !== 'en') {
+    const originalPath = page.path.replace(`/${locale}/`, '/en/')
+    original = options.files.get(originalPath)
+    if (!original) {
+      options.awaiting ??= new Map()
+      const awaiting = options.awaiting.get(originalPath) ?? []
+      const { promise, resolve } = Promise.withResolvers<T>()
+      awaiting.push(resolve)
+      options.awaiting.set(originalPath, awaiting)
+      original = await promise
+    }
+  } else {
+    original = payload
+    if (options.awaiting?.has(page.path)) {
+      options.awaiting.get(page.path)!.forEach(fn => fn({
+        ...payload,
+        html,
+      }))
+    }
+  }
+
+  return { page, locale, original }
+}
 
-    const { meta, ...rest } = frontmatter
+export const frontmatterBuilder = createBuilder('frontmatterBuilder', 'metaExtracted')
+  .options()
+  .initializer()
+  .handler(async (payload, options) => {
+    const { locale, original } = await setupPages(payload, options)
+
+    const { meta, ...rest } = payload.frontmatter
 
     if (locale !== 'en') {
-      const originalPath = page.path.replace(`/${locale}/`, '/en/')
-      let original = options.files.get(originalPath)
-      if (!original) {
-        options.awaiting ??= new Map()
-        const awaiting = options.awaiting.get(originalPath) ?? []
-        const { promise, resolve } = Promise.withResolvers<Pipeline<'metaExtracted'>>()
-        awaiting.push(resolve)
-        options.awaiting.set(originalPath, awaiting)
-        original = await promise
-      }
       Object.assign(rest, {
         assets: original.frontmatter.assets,
         related: original.frontmatter.related,
       })
     }
 
-    if (options.awaiting?.has(page.path)) {
-      options.awaiting.get(page.path)!.forEach(fn => fn(payload))
-    }
-
     payload.frontmatter = {
       meta,
       assets: rest.assets,
@@ -179,3 +200,24 @@ function generateToc (content: string) {
 
   return headings
 }
+
+export const scriptFixer = createBuilder('scriptFixer', 'dom')
+  .options()
+  .initializer()
+  .handler(async (payload, options) => {
+    const { locale, original } = await setupPages(payload, options)
+
+    if (locale !== 'en') {
+      const setup = payload.html.querySelector('script[setup]')
+      const origSetup = original.html.querySelector('script[setup]')
+      if (setup) {
+        if (!origSetup) {
+          throw new Error(`Extra setup in ${payload.fileName}`)
+        }
+        setup.innerHTML = origSetup.innerHTML
+      }
+    }
+
+    return payload
+  })
+  .meta()
diff --git a/packages/docs/src/pages/en/api/[name].md b/packages/docs/src/pages/en/api/[name].md
@@ -5,7 +5,7 @@ meta:
   keywords: api, vuetify
 ---
 
-<script setup lang="ts">
+<script setup>
   const name = shallowRef('')
 </script>
 
@@ -19,4 +19,4 @@ meta:
 
 <ApiSearch />
 
-<ApiView @update:name="name = $event" />
+<ApiView v-on:update:name="name = $event" />
diff --git a/packages/docs/vite.config.mts b/packages/docs/vite.config.mts
@@ -22,7 +22,7 @@ import Api from './build/api-plugin'
 import { Examples } from './build/examples-plugin'
 import { genAppMetaInfo } from './src/utils/metadata'
 import { MdiJs } from './build/mdi-js'
-import { frontmatterBuilder, getRouteMeta } from './build/frontmatterMeta'
+import { frontmatterBuilder, getRouteMeta, scriptFixer } from './build/markdownBuilders'
 
 const resolve = (file: string) => fileURLToPath(new URL(file, import.meta.url))
 
@@ -151,7 +151,7 @@ export default defineConfig(({ command, mode, isSsrBuild }) => {
         exposeFrontmatter: true,
         exposeExcerpt: false,
         markdownItSetup: configureMarkdown,
-        builders: [frontmatterBuilder()]
+        builders: [frontmatterBuilder(), scriptFixer()]
       }),
 
       // https://github.com/hannoeru/vite-plugin-pages