fix: frontmatter provide strategy (#1724)

kermanx · web-flow · commit b3739712c66b · 2024-07-05T16:50:14.000+08:00
diff --git a/packages/client/context.ts b/packages/client/context.ts
@@ -1,5 +1,5 @@
 import { computed, ref, toRef } from 'vue'
-import { injectLocal, objectOmit, provideLocal } from '@vueuse/core'
+import { injectLocal, objectOmit } from '@vueuse/core'
 import {
   FRONTMATTER_FIELDS,
   HEADMATTER_FIELDS,
@@ -44,28 +44,6 @@ export function useSlideContext() {
 
 export type SlideContext = ReturnType<typeof useSlideContext>
 
-/**
- * @internal
- */
-export function provideFrontmatter(frontmatter: Record<string, any>) {
-  provideLocal(injectionFrontmatter, frontmatter)
-
-  const {
-    $slidev,
-    $page,
-  } = useSlideContext()
-
-  // update frontmatter in router to make HMR work better
-  const route = $slidev.nav.slides.find(i => i.no === $page.value)
-  if (route?.meta?.slide?.frontmatter) {
-    for (const key of Object.keys(route.meta.slide.frontmatter)) {
-      if (!(key in frontmatter))
-        delete route.meta.slide.frontmatter[key]
-    }
-    Object.assign(route.meta.slide.frontmatter, frontmatter)
-  }
-}
-
 /**
  * Convert frontmatter options to props for v-bind
  * It removes known options fields, and expose an extra `frontmatter` field that contains full frontmatter
diff --git a/packages/client/internals/SlideWrapper.vue b/packages/client/internals/SlideWrapper.vue
@@ -3,7 +3,7 @@ import { computed, defineAsyncComponent, defineComponent, h, ref, toRef } from '
 import type { CSSProperties, PropType } from 'vue'
 import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
-import { injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
+import { injectionClicksContext, injectionCurrentPage, injectionFrontmatter, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
 import { getSlideClass } from '../utils'
 import { configs } from '../env'
 import SlideLoading from './SlideLoading.vue'
@@ -27,6 +27,7 @@ const props = defineProps({
 const zoom = computed(() => props.route.meta?.slide?.frontmatter.zoom ?? 1)
 
 provideLocal(injectionRoute, props.route)
+provideLocal(injectionFrontmatter, props.route.meta.slide.frontmatter)
 provideLocal(injectionCurrentPage, ref(props.route.no))
 provideLocal(injectionRenderContext, ref(props.renderContext))
 provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
diff --git a/packages/client/shim-vue.d.ts b/packages/client/shim-vue.d.ts
@@ -9,7 +9,7 @@ declare module 'vue-router' {
 
   interface RouteMeta {
     // inherited from frontmatter
-    layout: string
+    layout?: string
     name?: string
     class?: string
     clicks?: number
@@ -26,7 +26,7 @@ declare module 'vue-router' {
     }
 
     // private fields
-    __clicksContext: import('@slidev/types').ClicksContext | undefined
+    __clicksContext: import('@slidev/types').ClicksContext | null
     __preloaded?: boolean
   }
 }
diff --git a/packages/slidev/node/vite/loaders.ts b/packages/slidev/node/vite/loaders.ts
@@ -25,12 +25,8 @@ const regexId = /^\/@slidev\/slide\/(\d+)\.(md|json)(?:\?import)?$/
 const regexIdQuery = /(\d+)\.(md|json|frontmatter)$/
 
 const templateInjectionMarker = '/* @slidev-injection */'
-const templateImportContextUtils = `import {
-  useSlideContext,
-  provideFrontmatter as _provideFrontmatter,
-  frontmatterToProps as _frontmatterToProps,
-} from "@slidev/client/context.ts"`.replace(/\n\s*/g, ' ')
-const templateInitContext = `const { $slidev, $nav, $clicksContext, $clicks, $page, $renderContext, $frontmatter } = useSlideContext()`
+const templateImportContextUtils = `import { useSlideContext as _useSlideContext, frontmatterToProps as _frontmatterToProps } from "@slidev/client/context.ts"`
+const templateInitContext = `const { $slidev, $nav, $clicksContext, $clicks, $page, $renderContext, $frontmatter } = _useSlideContext()`
 
 export function getBodyJson(req: Connect.IncomingMessage) {
   return new Promise<any>((resolve, reject) => {
@@ -321,37 +317,42 @@ export function createSlidesLoader(
               return {
                 code: [
                   '// @unocss-include',
-                  'import { reactive, computed } from "vue"',
-                  `export const frontmatter = reactive(${JSON.stringify(fontmatter)})`,
-                  `export const meta = reactive({
-                    layout: computed(() => frontmatter.layout),
-                    transition: computed(() => frontmatter.transition),
-                    class: computed(() => frontmatter.class),
-                    clicks: computed(() => frontmatter.clicks),
-                    name: computed(() => frontmatter.name),
-                    preload: computed(() => frontmatter.preload),
-                    slide: {
-                      ...(${JSON.stringify(slideBase)}),
-                      frontmatter,
-                      filepath: ${JSON.stringify(mode === 'dev' ? slide.source.filepath : '')},
-                      start: ${JSON.stringify(slide.source.start)},
-                      id: ${pageNo},
-                      no: ${no},
-                    },
-                    __clicksContext: null,
-                    __preloaded: false,
-                  })`,
-                  'export default frontmatter',
+                  'import { computed, reactive, shallowReactive } from "vue"',
+                  `export const frontmatterData = ${JSON.stringify(fontmatter)}`,
                   // handle HMR, update frontmatter with update
                   'if (import.meta.hot) {',
-                  '  import.meta.hot.accept(({ frontmatter: update }) => {',
-                  '    if(!update) return',
+                  '  const firstLoad = !import.meta.hot.data.frontmatter',
+                  '  import.meta.hot.data.frontmatter ??= reactive(frontmatterData)',
+                  '  import.meta.hot.accept(({ frontmatterData: update }) => {',
+                  '    if (firstLoad) return',
+                  '    const frontmatter = import.meta.hot.data.frontmatter',
                   '    Object.keys(frontmatter).forEach(key => {',
                   '      if (!(key in update)) delete frontmatter[key]',
                   '    })',
                   '    Object.assign(frontmatter, update)',
                   '  })',
                   '}',
+                  'export const frontmatter = import.meta.hot ? import.meta.hot.data.frontmatter : reactive(frontmatterData)',
+                  'export default frontmatter',
+                  'export const meta = shallowReactive({',
+                  '  get layout(){ return frontmatter.layout },',
+                  '  get transition(){ return frontmatter.transition },',
+                  '  get class(){ return frontmatter.class },',
+                  '  get clicks(){ return frontmatter.clicks },',
+                  '  get name(){ return frontmatter.name },',
+                  '  get preload(){ return frontmatter.preload },',
+                  // No need to be reactive, as it's only used once after reload
+                  '  slide: {',
+                  `    ...(${JSON.stringify(slideBase)}),`,
+                  `    frontmatter,`,
+                  `    filepath: ${JSON.stringify(mode === 'dev' ? slide.source.filepath : '')},`,
+                  `    start: ${JSON.stringify(slide.source.start)},`,
+                  `    id: ${pageNo},`,
+                  `    no: ${no},`,
+                  '  },',
+                  '  __clicksContext: null,',
+                  '  __preloaded: false,',
+                  '})',
                 ].join('\n'),
                 map: { mappings: '' },
               }
@@ -430,9 +431,7 @@ export function createSlidesLoader(
     delete frontmatter.title
     const imports = [
       `import InjectedLayout from "${toAtFS(layouts[layoutName])}"`,
-      `import frontmatter from "${toAtFS(`${VIRTUAL_SLIDE_PREFIX + (index + 1)}.frontmatter`)}"`,
       templateImportContextUtils,
-      '_provideFrontmatter(frontmatter)',
       templateInitContext,
       templateInjectionMarker,
     ]
@@ -443,7 +442,7 @@ export function createSlidesLoader(
     let body = code.slice(injectA, injectB).trim()
     if (body.startsWith('<div>') && body.endsWith('</div>'))
       body = body.slice(5, -6)
-    code = `${code.slice(0, injectA)}\n<InjectedLayout v-bind="_frontmatterToProps(frontmatter,${index})">\n${body}\n</InjectedLayout>\n${code.slice(injectB)}`
+    code = `${code.slice(0, injectA)}\n<InjectedLayout v-bind="_frontmatterToProps($frontmatter,${index})">\n${body}\n</InjectedLayout>\n${code.slice(injectB)}`
 
     return code
   }

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ declare module 'vue-router' {`
`9`	`9`
`10`	`10`	`interface RouteMeta {`
`11`	`11`	`// inherited from frontmatter`
`12`		`- layout: string`
	`12`	`+ layout?: string`
`13`	`13`	`name?: string`
`14`	`14`	`class?: string`
`15`	`15`	`clicks?: number`
`@@ -26,7 +26,7 @@ declare module 'vue-router' {`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`// private fields`
`29`		`- __clicksContext: import('@slidev/types').ClicksContext \| undefined`
	`29`	`+ __clicksContext: import('@slidev/types').ClicksContext \| null`
`30`	`30`	`__preloaded?: boolean`
`31`	`31`	`}`
`32`	`32`	`}`