feat: add $page and $renderContext context

Author: antfu

packages/client/constants.ts

@@ -5,12 +5,14 @@ import type { SlidevContext } from './modules/context'
 
 export const injectionClicks: InjectionKey<Ref<number>> = Symbol('v-click-clicks')
 export const injectionClicksElements: InjectionKey<Ref<(Element | string)[]>> = Symbol('v-click-clicks-elements')
-export const injectionOrderMap: InjectionKey<Ref<Map<number, HTMLElement[]>>> = Symbol('v-click-clicks-order-map')
 export const injectionClicksDisabled: InjectionKey<Ref<boolean>> = Symbol('v-click-clicks-disabled')
+export const injectionOrderMap: InjectionKey<Ref<Map<number, HTMLElement[]>>> = Symbol('v-click-clicks-order-map')
+export const injectionCurrentPage: InjectionKey<number> = Symbol('slidev-page')
 export const injectionSlideScale: InjectionKey<ComputedRef<number>> = Symbol('slidev-slide-scale')
 export const injectionSlidevContext: InjectionKey<UnwrapNestedRefs<SlidevContext>> = Symbol('slidev-slidev-context')
 export const injectionRoute: InjectionKey<RouteRecordRaw> = Symbol('slidev-route')
 export const injectionSlideContext: InjectionKey<RenderContext> = Symbol('slidev-slide-context')
+export const injectionActive: InjectionKey<Ref<boolean>> = Symbol('slidev-active')
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'

packages/client/internals/SlideWrapper.ts

@@ -1,8 +1,8 @@
 import { useVModel } from '@vueuse/core'
 import type { Ref } from 'vue'
-import { defineComponent, h, provide } from 'vue'
+import { defineComponent, h, provide, toRef } from 'vue'
 import type { RenderContext } from '@slidev/types'
-import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionOrderMap, injectionRoute, injectionSlideContext } from '../constants'
+import { injectionActive, injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionCurrentPage, injectionOrderMap, injectionRoute, injectionSlideContext } from '../constants'
 
 export default defineComponent({
   name: 'SlideWrapper',
@@ -27,6 +27,10 @@ export default defineComponent({
       type: String,
       default: 'main',
     },
+    active: {
+      type: Boolean,
+      default: false,
+    },
     is: {
       type: Object,
       default: undefined,
@@ -45,7 +49,9 @@ export default defineComponent({
     clicksElements.value.length = 0
 
     provide(injectionRoute, props.route as any)
+    provide(injectionCurrentPage, +props.route?.path)
     provide(injectionSlideContext, props.context as RenderContext)
+    provide(injectionActive, toRef(props, 'active'))
     provide(injectionClicks, clicks as Ref<number>)
     provide(injectionClicksDisabled, clicksDisabled)
     provide(injectionClicksElements, clicksElements as any)

packages/slidev/node/plugins/loaders.ts

@@ -21,6 +21,21 @@ import { resolveImportPath, stringifyMarkdownTokens, toAtFS } from '../utils'
 const regexId = /^\/\@slidev\/slide\/(\d+)\.(md|json)(?:\?import)?$/
 const regexIdQuery = /(\d+?)\.(md|json)$/
 
+const vueContextImports = [
+  'import { inject as _vueInject, toRef as _vueToRef } from "vue"',
+  `import {
+    injectionSlidevContext as _injectionSlidevContext, 
+    injectionClicks as _injectionClicks,
+    injectionCurrentPage as _injectionCurrentPage,
+    injectionSlideContext as _injectionSlideContext,
+  } from "@slidev/client/constants.ts"`.replace(/\n\s+/g, '\n'),
+  'const $slidev = _vueInject(_injectionSlidevContext)',
+  'const $nav = _vueToRef($slidev, "nav")',
+  'const $clicks = _vueInject(_injectionClicks)',
+  'const $page = _vueInject(_injectionCurrentPage)',
+  'const $renderContext = _vueInject(_injectionSlideContext)',
+]
+
 export function getBodyJson(req: Connect.IncomingMessage) {
   return new Promise<any>((resolve, reject) => {
     let body = ''
@@ -345,14 +360,10 @@ ${title}
 
     delete frontmatter.title
     const imports = [
-      'import { inject as _vueInject, toRef as _vueToRef } from "vue"',
+      ...vueContextImports,
       `import InjectedLayout from "${toAtFS(layouts[layoutName])}"`,
-      'import { injectionSlidevContext as _injectionSlidevContext, injectionClicks as _injectionClicks } from "@slidev/client/constants.ts"',
       `const frontmatter = ${JSON.stringify(frontmatter)}`,
       'const $frontmatter = frontmatter',
-      'const $slidev = _vueInject(_injectionSlidevContext)',
-      'const $nav = _vueToRef($slidev, "nav")',
-      'const $clicks = _vueInject(_injectionClicks)',
     ]
 
     code = code.replace(/(<script setup.*>)/g, `$1\n${imports.join('\n')}\n`)
@@ -370,11 +381,7 @@ ${title}
     if (code.includes('injectionSlidevContext') || code.includes('injectionClicks') || code.includes('const $slidev'))
       return code // Assume that the context is already imported and used
     const imports = [
-      'import { inject as _vueInject, toRef as _vueToRef } from "vue"',
-      'import { injectionSlidevContext as _injectionSlidevContext, injectionClicks as _injectionClicks } from "@slidev/client/constants.ts"',
-      'const $slidev = _vueInject(_injectionSlidevContext)',
-      'const $nav = _vueToRef($slidev, "nav")',
-      'const $clicks = _vueInject(_injectionClicks)',
+      ...vueContextImports,
     ]
     const matchScript = code.match(/<script((?!setup).)*(setup)?.*>/)
     if (matchScript && matchScript[2]) {

packages/slidev/package.json

@@ -80,7 +80,7 @@
     "markdown-it": "^13.0.1",
     "markdown-it-footnote": "^3.0.3",
     "markdown-it-link-attributes": "^4.0.1",
-    "markdown-it-mdc": "^0.1.1",
+    "markdown-it-mdc": "^0.1.2",
     "monaco-editor": "^0.37.1",
     "nanoid": "^4.0.2",
     "open": "^8.4.1",