feat: support relative import inside slides (#1744)

Author: kermanx

packages/client/composables/useSlideInfo.ts

@@ -17,7 +17,7 @@ export function useSlideInfo(no: number): UseSlideInfo {
       update: async () => {},
     }
   }
-  const url = `/@slidev/slide/${no}.json`
+  const url = `/__slidev/slides/${no}.json`
   const { data: info, execute } = useFetch(url).json<SlideInfo>().get()
 
   execute()

packages/slidev/node/options.ts

@@ -1,7 +1,9 @@
+import path from 'node:path'
 import { uniq } from '@antfu/utils'
 import Debug from 'debug'
 import type { ResolvedSlidevOptions, ResolvedSlidevUtils, SlidevData, SlidevEntryOptions } from '@slidev/types'
 import mm from 'micromatch'
+import fg from 'fast-glob'
 import { parser } from './parser'
 import { getThemeMeta, resolveTheme } from './integrations/themes'
 import { resolveAddons } from './integrations/addons'
@@ -58,16 +60,45 @@ export async function resolveOptions(
     themeRoots,
     addonRoots,
     roots,
-    utils: createDataUtils(data),
+    utils: createDataUtils(data, rootsInfo.clientRoot, roots),
   }
 
   return resolved
 }
 
-export function createDataUtils(data: SlidevData): ResolvedSlidevUtils {
+export function createDataUtils(data: SlidevData, clientRoot: string, roots: string[]): ResolvedSlidevUtils {
   const monacoTypesIgnorePackagesMatches = (data.config.monacoTypesIgnorePackages || [])
     .map(i => mm.matcher(i))
+
+  let _layouts_cache_time = 0
+  let _layouts_cache: Record<string, string> = {}
+
   return {
     isMonacoTypesIgnored: pkg => monacoTypesIgnorePackagesMatches.some(i => i(pkg)),
+    getLayouts: async () => {
+      const now = Date.now()
+      if (now - _layouts_cache_time < 2000)
+        return _layouts_cache
+
+      const layouts: Record<string, string> = {}
+
+      for (const root of [clientRoot, ...roots]) {
+        const layoutPaths = await fg('layouts/**/*.{vue,ts}', {
+          cwd: root,
+          absolute: true,
+          suppressErrors: true,
+        })
+
+        for (const layoutPath of layoutPaths) {
+          const layoutName = path.basename(layoutPath).replace(/\.\w+$/, '')
+          layouts[layoutName] = layoutPath
+        }
+      }
+
+      _layouts_cache_time = now
+      _layouts_cache = layouts
+
+      return layouts
+    },
   }
 }

packages/slidev/node/virtual/slides.ts

@@ -23,10 +23,10 @@ export const templateSlides: VirtualModuleTemplate = {
       .map((_, idx) => {
         const no = idx + 1
         statements.push(
-          `import { meta as f${no} } from '${VIRTUAL_SLIDE_PREFIX}${no}.frontmatter'`,
+          `import { meta as f${no} } from '${VIRTUAL_SLIDE_PREFIX}${no}/frontmatter'`,
           // For some unknown reason, import error won't be caught by the error component. Catch it here.
           `const load${no} = async () => {`,
-          `  try { return componentsCache[${idx}] ??= await import('${VIRTUAL_SLIDE_PREFIX}${no}.md') }`,
+          `  try { return componentsCache[${idx}] ??= await import('${VIRTUAL_SLIDE_PREFIX}${no}/md') }`,
           `  catch (e) { return SlideError }`,
           `}`,
         )

packages/slidev/node/vite/common.ts

@@ -0,0 +1,7 @@
+export const regexSlideReqPath = /^\/__slidev\/slides\/(\d+)\.json$/
+export const regexSlideFacadeId = /^\/@slidev\/slides\/(\d+)\/(md|frontmatter)($|\?)/
+export const regexSlideSourceId = /__slidev_(\d+)\.(md|frontmatter)$/
+
+export const templateInjectionMarker = '/* @slidev-injection */'
+export const templateImportContextUtils = `import { useSlideContext as _useSlideContext, frontmatterToProps as _frontmatterToProps } from "@slidev/client/context.ts"`
+export const templateInitContext = `const { $slidev, $nav, $clicksContext, $clicks, $page, $renderContext, $frontmatter } = _useSlideContext()`

packages/slidev/node/vite/contextInjection.ts

@@ -0,0 +1,66 @@
+import type { Plugin } from 'vite'
+import { templateImportContextUtils, templateInitContext, templateInjectionMarker } from './common'
+
+/**
+ * Inject `$slidev` into the script block of a Vue component
+ */
+export function createContextInjectionPlugin(): Plugin {
+  return {
+    name: 'slidev:context-injection',
+    async transform(code, id) {
+      if (!id.endsWith('.vue') || id.includes('/@slidev/client/') || id.includes('/packages/client/'))
+        return
+      if (code.includes(templateInjectionMarker) || code.includes('useSlideContext()'))
+        return code // Assume that the context is already imported and used
+      const imports = [
+        templateImportContextUtils,
+        templateInitContext,
+        templateInjectionMarker,
+      ]
+      // eslint-disable-next-line regexp/no-super-linear-backtracking, regexp/optimal-quantifier-concatenation
+      const matchScript = code.match(/<script((?!setup).)*(setup)?.*>/)
+      if (matchScript && matchScript[2]) {
+        // setup script
+        return code.replace(/(<script.*>)/g, `$1\n${imports.join('\n')}\n`)
+      }
+      else if (matchScript && !matchScript[2]) {
+        // not a setup script
+        const matchExport = code.match(/export\s+default\s+\{/)
+        if (matchExport) {
+          // script exports a component
+          const exportIndex = (matchExport.index || 0) + matchExport[0].length
+          let component = code.slice(exportIndex)
+          component = component.slice(0, component.indexOf('</script>'))
+
+          const scriptIndex = (matchScript.index || 0) + matchScript[0].length
+          const provideImport = '\nimport { injectionSlidevContext } from "@slidev/client/constants.ts"\n'
+          code = `${code.slice(0, scriptIndex)}${provideImport}${code.slice(scriptIndex)}`
+
+          let injectIndex = exportIndex + provideImport.length
+          let injectObject = '$slidev: { from: injectionSlidevContext },'
+          const matchInject = component.match(/.*inject\s*:\s*([[{])/)
+          if (matchInject) {
+            // component has a inject option
+            injectIndex += (matchInject.index || 0) + matchInject[0].length
+            if (matchInject[1] === '[') {
+              // inject option in array
+              let injects = component.slice((matchInject.index || 0) + matchInject[0].length)
+              const injectEndIndex = injects.indexOf(']')
+              injects = injects.slice(0, injectEndIndex)
+              injectObject += injects.split(',').map(inject => `${inject}: {from: ${inject}}`).join(',')
+              return `${code.slice(0, injectIndex - 1)}{\n${injectObject}\n}${code.slice(injectIndex + injectEndIndex + 1)}`
+            }
+            else {
+              // inject option in object
+              return `${code.slice(0, injectIndex)}\n${injectObject}\n${code.slice(injectIndex)}`
+            }
+          }
+          // add inject option
+          return `${code.slice(0, injectIndex)}\ninject: { ${injectObject} },\n${code.slice(injectIndex)}`
+        }
+      }
+      // no setup script and not a vue component
+      return `<script setup>\n${imports.join('\n')}\n</script>\n${code}`
+    },
+  }
+}

packages/slidev/node/vite/hmrPatch.ts

@@ -0,0 +1,18 @@
+import type { Plugin } from 'vite'
+import { regexSlideSourceId } from './common'
+
+/**
+ * force reload slide component to ensure v-click resolves correctly
+ */
+export function createHmrPatchPlugin(): Plugin {
+  return {
+    name: 'slidev:slide-transform:post',
+    transform(code, id) {
+      if (!id.match(regexSlideSourceId))
+        return
+      const replaced = code.replace('if (_rerender_only)', 'if (false)')
+      if (replaced !== code)
+        return replaced
+    },
+  }
+}

packages/slidev/node/vite/index.ts

@@ -1,7 +1,6 @@
 import { join } from 'node:path'
 import { existsSync } from 'node:fs'
 import process from 'node:process'
-import { fileURLToPath } from 'node:url'
 import type { Plugin } from 'vite'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
@@ -18,6 +17,9 @@ import { createVueCompilerFlagsPlugin } from './compilerFlagsVue'
 import { createMonacoTypesLoader } from './monacoTypes'
 import { createVuePlugin } from './vue'
 import { createMonacoWriter } from './monacoWrite'
+import { createLayoutWrapperPlugin } from './layoutWrapper'
+import { createContextInjectionPlugin } from './contextInjection'
+import { createHmrPatchPlugin } from './hmrPatch'
 
 export async function ViteSlidevPlugin(
   options: ResolvedSlidevOptions,
@@ -44,11 +46,12 @@ export async function ViteSlidevPlugin(
   const publicRoots = [...themeRoots, ...addonRoots].map(i => join(i, 'public')).filter(existsSync)
 
   const plugins = [
+    createSlidesLoader(options, serverOptions),
     createMarkdownPlugin(options, pluginOptions),
-
+    createLayoutWrapperPlugin(options),
+    createContextInjectionPlugin(),
     createVuePlugin(options, pluginOptions),
-    createSlidesLoader(options, pluginOptions, serverOptions),
-    createMonacoWriter(options),
+    createHmrPatchPlugin(),
 
     Components({
       extensions: ['vue', 'md', 'js', 'ts', 'jsx', 'tsx'],
@@ -78,7 +81,7 @@ export async function ViteSlidevPlugin(
 
     Icons({
       defaultClass: 'slidev-icon',
-      collectionsNodeResolvePath: fileURLToPath(import.meta.url),
+      collectionsNodeResolvePath: options.cliRoot,
       ...iconsOptions,
     }),
 
@@ -120,6 +123,7 @@ export async function ViteSlidevPlugin(
 
     createConfigPlugin(options),
     createMonacoTypesLoader(options),
+    createMonacoWriter(options),
     createVueCompilerFlagsPlugin(options),
     createUnocssPlugin(options, pluginOptions),
 

packages/slidev/node/vite/layoutWrapper.ts

@@ -0,0 +1,57 @@
+import type { ResolvedSlidevOptions } from '@slidev/types'
+import type { Plugin } from 'vite'
+import { bold, gray, red, yellow } from 'kolorist'
+import { toAtFS } from '../resolver'
+import { regexSlideSourceId, templateImportContextUtils, templateInitContext, templateInjectionMarker } from './common'
+
+export function createLayoutWrapperPlugin(
+  { data, utils }: ResolvedSlidevOptions,
+): Plugin {
+  return {
+    name: 'slidev:layout-wrapper',
+    async transform(code, id) {
+      const match = id.match(regexSlideSourceId)
+      if (!match)
+        return
+      const [, no, type] = match
+      if (type !== 'md')
+        return
+      const index = +no - 1
+      const layouts = await utils.getLayouts()
+      const rawLayoutName = data.slides[index]?.frontmatter?.layout ?? data.slides[0]?.frontmatter?.default?.layout
+      let layoutName = rawLayoutName || (index === 0 ? 'cover' : 'default')
+      if (!layouts[layoutName]) {
+        console.error(red(`\nUnknown layout "${bold(layoutName)}".${yellow(' Available layouts are:')}`)
+        + Object.keys(layouts).map((i, idx) => (idx % 3 === 0 ? '\n    ' : '') + gray(i.padEnd(15, ' '))).join('  '))
+        console.error()
+        layoutName = 'default'
+      }
+
+      const setupTag = code.match(/^<script setup.*>/m)
+      if (!setupTag)
+        throw new Error(`[Slidev] Internal error: <script setup> block not found in slide ${index + 1}.`)
+
+      const templatePart = code.slice(0, setupTag.index!)
+      const scriptPart = code.slice(setupTag.index!)
+
+      const bodyStart = templatePart.indexOf('<template>') + 10
+      const bodyEnd = templatePart.lastIndexOf('</template>')
+      let body = code.slice(bodyStart, bodyEnd).trim()
+      if (body.startsWith('<div>') && body.endsWith('</div>'))
+        body = body.slice(5, -6)
+
+      return [
+        templatePart.slice(0, bodyStart),
+      `<InjectedLayout v-bind="_frontmatterToProps($frontmatter,${index})">\n${body}\n</InjectedLayout>`,
+      templatePart.slice(bodyEnd),
+      scriptPart.slice(0, setupTag[0].length),
+      `import InjectedLayout from "${toAtFS(layouts[layoutName])}"`,
+      templateImportContextUtils,
+      templateInitContext,
+      '$clicksContext.setup()',
+      templateInjectionMarker,
+      scriptPart.slice(setupTag[0].length),
+      ].join('\n')
+    },
+  }
+}