@slidev/client 0.48.0-beta.9 → 0.48.1

package/setup/main.ts

@@ -1,10 +1,20 @@
-/* __imports__ */
-
 import type { AppContext } from '@slidev/types'
 import { MotionPlugin } from '@vueuse/motion'
 import TwoSlashFloatingVue from '@shikijs/vitepress-twoslash/client'
+import type { App } from 'vue'
+import { nextTick } from 'vue'
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import { createHead } from '@unhead/vue'
+import { routeForceRefresh } from '../logic/route'
+import { createVClickDirectives } from '../modules/v-click'
+import { createVMarkDirective } from '../modules/v-mark'
+import { routes } from '../routes'
+import setups from '#slidev/setups/main'
+
+import '#slidev/styles'
+import 'shiki-magic-move/style.css'
 
-export default function setupMain(context: AppContext) {
+export default async function setupMain(app: App) {
   function setMaxHeight() {
     // disable the mobile navbar scroll
     // see https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
@@ -13,12 +23,32 @@ export default function setupMain(context: AppContext) {
   setMaxHeight()
   window.addEventListener('resize', setMaxHeight)
 
-  context.app.use(MotionPlugin)
-  context.app.use(TwoSlashFloatingVue as any)
+  const router = createRouter({
+    history: __SLIDEV_HASH_ROUTE__
+      ? createWebHashHistory(import.meta.env.BASE_URL)
+      : createWebHistory(import.meta.env.BASE_URL),
+    routes,
+  })
+
+  app.use(router)
+  app.use(createHead())
+  app.use(createVClickDirectives())
+  app.use(createVMarkDirective())
+  app.use(MotionPlugin)
+  app.use(TwoSlashFloatingVue as any, { container: '#slideshow' })
+
+  const context: AppContext = {
+    app,
+    router,
+  }
 
-  // @ts-expect-error inject in runtime
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const injection_arg = context
+  nextTick(() => {
+    router.afterEach(async () => {
+      await nextTick()
+      routeForceRefresh.value += 1
+    })
+  })
 
-  /* __injections__ */
+  for (const setup of setups)
+    await setup(context)
 }

package/setup/mermaid.ts

@@ -1,15 +1,14 @@
-/* __imports__ */
-
 import type { MermaidOptions } from '@slidev/types'
 import { defineMermaidSetup } from '@slidev/types'
+import setups from '#slidev/setups/mermaid'
 
 export default defineMermaidSetup(() => {
-  // eslint-disable-next-line prefer-const
-  let injection_return: MermaidOptions = {
+  const setupReturn: MermaidOptions = {
     theme: 'default',
   }
 
-  /* __injections__ */
+  for (const setup of setups)
+    Object.assign(setupReturn, setup())
 
-  return injection_return
+  return setupReturn
 })

package/setup/monaco.ts

@@ -1,70 +1,133 @@
-import { getCurrentInstance, onMounted } from 'vue'
-import * as monaco from 'monaco-editor'
 import { createSingletonPromise } from '@antfu/utils'
 import type { MonacoSetupReturn } from '@slidev/types'
+import * as monaco from 'monaco-editor'
+import { watchEffect } from 'vue'
+import { setupTypeAcquisition } from '@typescript/ata'
+import ts from 'typescript'
+
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+
+// @ts-expect-error missing types
+import { ContextViewService } from 'monaco-editor/esm/vs/platform/contextview/browser/contextViewService'
+
+// @ts-expect-error missing types
+import { SyncDescriptor } from 'monaco-editor/esm/vs/platform/instantiation/common/descriptors'
 
-/* __imports__ */
+// @ts-expect-error missing types
+import { StandaloneServices } from 'monaco-editor/esm/vs/editor/standalone/browser/standaloneServices'
+
+import { isDark } from '../logic/dark'
+import configs from '#slidev/configs'
+import setups from '#slidev/setups/monaco'
+
+window.MonacoEnvironment = {
+  getWorker(_, label) {
+    if (label === 'json')
+      return new JsonWorker()
+    if (label === 'css' || label === 'scss' || label === 'less')
+      return new CssWorker()
+    if (label === 'html' || label === 'handlebars' || label === 'razor')
+      return new HtmlWorker()
+    if (label === 'typescript' || label === 'javascript')
+      return new TsWorker()
+    return new EditorWorker()
+  },
+}
+
+class ContextViewService2 extends ContextViewService {
+  showContextView(...args: any) {
+    super.showContextView(...args)
+    // @ts-expect-error missing types
+    const contextView = this.contextView.view as HTMLElement
+    contextView.style.left = `calc(${contextView.style.left} / var(--slidev-slide-scale))`
+    contextView.style.top = `calc(${contextView.style.top} / var(--slidev-slide-scale))`
+    // Reset the scale to 1. Otherwise, the sub-menu will be in the wrong position.
+    contextView.style.transform = `scale(calc(1 / var(--slidev-slide-scale)))`
+    contextView.style.transformOrigin = '0 0'
+  }
+}
 
 const setup = createSingletonPromise(async () => {
-  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-    ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),
-    noUnusedLocals: false,
-    noUnusedParameters: false,
-    allowUnreachableCode: true,
-    allowUnusedLabels: true,
+  // Initialize services first, otherwise we can't override them.
+  StandaloneServices.initialize({
+    contextViewService: new SyncDescriptor(ContextViewService2, [], true),
+  })
+
+  const defaults = monaco.languages.typescript.typescriptDefaults
+
+  defaults.setCompilerOptions({
+    ...defaults.getCompilerOptions(),
     strict: true,
+    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+    module: monaco.languages.typescript.ModuleKind.ESNext,
   })
 
-  await Promise.all([
-    // load workers
-    (async () => {
-      const [
-        { default: EditorWorker },
-        { default: JsonWorker },
-        { default: CssWorker },
-        { default: HtmlWorker },
-        { default: TsWorker },
-      ] = await Promise.all([
-        import('monaco-editor/esm/vs/editor/editor.worker?worker'),
-        import('monaco-editor/esm/vs/language/json/json.worker?worker'),
-        import('monaco-editor/esm/vs/language/css/css.worker?worker'),
-        import('monaco-editor/esm/vs/language/html/html.worker?worker'),
-        import('monaco-editor/esm/vs/language/typescript/ts.worker?worker'),
-      ])
-
-      window.MonacoEnvironment = {
-        getWorker(_: any, label: string) {
-          if (label === 'json')
-            return new JsonWorker()
-          if (label === 'css' || label === 'scss' || label === 'less')
-            return new CssWorker()
-          if (label === 'html' || label === 'handlebars' || label === 'razor')
-            return new HtmlWorker()
-          if (label === 'typescript' || label === 'javascript')
-            return new TsWorker()
-          return new EditorWorker()
+  // Load types from server
+  import('#slidev/monaco-types')
+
+  const ata = configs.monacoTypesSource === 'cdn'
+    ? setupTypeAcquisition({
+      projectName: 'TypeScript Playground',
+      typescript: ts as any, // Version mismatch. No problem found so far.
+      logger: console,
+      delegate: {
+        receivedFile: (code: string, path: string) => {
+          defaults.addExtraLib(code, `file://${path}`)
+          const uri = monaco.Uri.file(path)
+          if (monaco.editor.getModel(uri) === null)
+            monaco.editor.createModel(code, 'javascript', uri)
         },
-      }
-    })(),
-  ])
+        progress: (downloaded: number, total: number) => {
+          // eslint-disable-next-line no-console
+          console.debug(`[Typescript ATA] ${downloaded} / ${total}`)
+        },
+      },
+    })
+    : () => { }
+
+  monaco.languages.register({ id: 'vue' })
+  monaco.languages.register({ id: 'html' })
+  monaco.languages.register({ id: 'css' })
+  monaco.languages.register({ id: 'typescript' })
+  monaco.languages.register({ id: 'javascript' })
 
-  // @ts-expect-error injected in runtime
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const injection_arg = monaco
-  // eslint-disable-next-line prefer-const
-  let injection_return: MonacoSetupReturn = {}
+  const { shiki, themes, shikiToMonaco } = await import('#slidev/shiki')
+  const highlighter = await shiki
 
-  /* __async_injections__ */
+  const setupReturn: MonacoSetupReturn = {}
+  for (const setup of setups) {
+    const result = await setup(monaco)
+    Object.assign(setupReturn, result)
+  }
 
-  if (getCurrentInstance())
-    await new Promise<void>(resolve => onMounted(resolve))
+  // Use Shiki to highlight Monaco
+  shikiToMonaco(highlighter, monaco)
+  if (typeof themes === 'string') {
+    monaco.editor.setTheme(themes)
+  }
+  else {
+    watchEffect(() => {
+      monaco.editor.setTheme(isDark.value
+        ? themes.dark || 'vitesse-dark'
+        : themes.light || 'vitesse-light')
+    })
+  }
 
   return {
     monaco,
-    ...injection_return,
+    ata,
+    ...setupReturn,
   }
 })
 
-export default setup
+export async function addFile(raw: Promise<{ default: string }>, path: string) {
+  const code = (await raw).default
+  monaco.languages.typescript.typescriptDefaults.addExtraLib(code, `file:///${path}`)
+  monaco.editor.createModel(code, 'javascript', monaco.Uri.file(path))
+}
 
-setup()
+export default setup

package/setup/root.ts

@@ -1,31 +1,75 @@
-/* __imports__ */
-import { watch } from 'vue'
+import { computed, getCurrentInstance, reactive, ref, shallowRef, watch } from 'vue'
 import { useHead } from '@unhead/vue'
-import { nanoid } from 'nanoid'
+import { useRouter } from 'vue-router'
 import { configs } from '../env'
 import { initSharedState, onPatch, patch } from '../state/shared'
 import { initDrawingState } from '../state/drawings'
-import { clicksContext, currentPage, getPath, isNotesViewer, isPresenter } from '../logic/nav'
-import { router } from '../routes'
-import { TRUST_ORIGINS } from '../constants'
-import { skipTransition } from '../composables/hmr'
+import { TRUST_ORIGINS, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
+import { skipTransition } from '../logic/hmr'
+import { makeId } from '../logic/utils'
+import { getSlidePath } from '../logic/slides'
+import { createFixedClicks } from '../composables/useClicks'
+import { isDark } from '../logic/dark'
+import { useNav } from '../composables/useNav'
+import setups from '#slidev/setups/root'
 
 export default function setupRoot() {
-  // @ts-expect-error injected in runtime
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const injection_arg = undefined
+  const app = getCurrentInstance()!.appContext.app
 
-  /* __injections__ */
+  const context = reactive({
+    nav: useNav(),
+    configs,
+    themeConfigs: computed(() => configs.themeConfig),
+  })
+  app.provide(injectionRenderContext, ref('none'))
+  app.provide(injectionSlidevContext, context)
+  app.provide(injectionCurrentPage, computed(() => context.nav.currentSlideNo))
+  app.provide(injectionClicksContext, shallowRef(createFixedClicks()))
+
+  // allows controls from postMessages
+  if (__DEV__) {
+    // @ts-expect-error expose global
+    window.__slidev__ = context
+    window.addEventListener('message', ({ data }) => {
+      if (data && data.target === 'slidev') {
+        if (data.type === 'navigate') {
+          context.nav.go(+data.no, +data.clicks || 0)
+        }
+        else if (data.type === 'css-vars') {
+          const root = document.documentElement
+          for (const [key, value] of Object.entries(data.vars || {}))
+            root.style.setProperty(key, value as any)
+        }
+        else if (data.type === 'color-schema') {
+          isDark.value = data.color === 'dark'
+        }
+      }
+    })
+  }
+
+  // User Setups
+  for (const setup of setups)
+    setup()
 
   const title = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
+
+  const {
+    clicksContext,
+    currentSlideNo,
+    hasPrimarySlide,
+    isNotesViewer,
+    isPresenter,
+  } = useNav()
+
   useHead({
     title,
     htmlAttrs: configs.htmlAttrs,
   })
+
   initSharedState(`${title} - shared`)
   initDrawingState(`${title} - drawings`)
 
-  const id = `${location.origin}_${nanoid()}`
+  const id = `${location.origin}_${makeId()}`
 
   // update shared state
   function updateSharedState() {
@@ -37,11 +81,11 @@ export default function setupRoot() {
       return
 
     if (isPresenter.value) {
-      patch('page', +currentPage.value)
+      patch('page', +currentSlideNo.value)
       patch('clicks', clicksContext.value.current)
     }
     else {
-      patch('viewerPage', +currentPage.value)
+      patch('viewerPage', +currentSlideNo.value)
       patch('viewerClicks', clicksContext.value.current)
     }
 
@@ -51,17 +95,17 @@ export default function setupRoot() {
       time: new Date().getTime(),
     })
   }
+  const router = useRouter()
   router.afterEach(updateSharedState)
   watch(clicksContext, updateSharedState)
 
   onPatch((state) => {
-    const routePath = router.currentRoute.value.path
-    if (!routePath.match(/^\/(\d+|presenter)\/?/))
+    if (!hasPrimarySlide.value)
       return
-    if (state.lastUpdate?.type === 'presenter' && (+state.page !== +currentPage.value || +clicksContext.value.current !== +state.clicks)) {
+    if (state.lastUpdate?.type === 'presenter' && (+state.page !== +currentSlideNo.value || +clicksContext.value.current !== +state.clicks)) {
       skipTransition.value = false
       router.replace({
-        path: getPath(state.page),
+        path: getSlidePath(state.page, isPresenter.value),
         query: {
           ...router.currentRoute.value.query,
           clicks: state.clicks || 0,

package/setup/shortcuts.ts

@@ -1,18 +1,19 @@
-/* __imports__ */
 import { and, not, or } from '@vueuse/math'
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
-import { downloadPDF, go, goFirst, goLast, next, nextSlide, prev, prevSlide } from '../logic/nav'
+import { downloadPDF } from '../utils'
 import { toggleDark } from '../logic/dark'
 import { magicKeys, showGotoDialog, showOverview, toggleOverview } from '../state'
-import { drawingEnabled } from '../logic/drawings'
+import { useNav } from '../composables/useNav'
+import { useDrawings } from '../composables/useDrawings'
 import { currentOverviewPage, downOverviewPage, nextOverviewPage, prevOverviewPage, upOverviewPage } from './../logic/overview'
+import setups from '#slidev/setups/shortcuts'
 
 export default function setupShortcuts() {
+  const { go, goFirst, goLast, next, nextSlide, prev, prevSlide } = useNav()
+  const { drawingEnabled } = useDrawings()
   const { escape, space, shift, left, right, up, down, enter, d, g, o, '`': backtick } = magicKeys
 
-  // @ts-expect-error injected in runtime
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const injection_arg: NavOperations = {
+  const context: NavOperations = {
     next,
     prev,
     nextSlide,
@@ -28,8 +29,7 @@ export default function setupShortcuts() {
     showGotoDialog: () => showGotoDialog.value = !showGotoDialog.value,
   }
 
-  // eslint-disable-next-line prefer-const
-  let injection_return: ShortcutOptions[] = [
+  let shortcuts: ShortcutOptions[] = [
     { name: 'next_space', key: and(space, not(shift)), fn: next, autoRepeat: true },
     { name: 'prev_space', key: and(space, shift), fn: prev, autoRepeat: true },
     { name: 'next_right', key: and(right, not(shift), not(showOverview)), fn: next, autoRepeat: true },
@@ -58,11 +58,14 @@ export default function setupShortcuts() {
     },
   ]
 
-  const baseShortcutNames = new Set(injection_return.map(s => s.name))
+  const baseShortcutNames = new Set(shortcuts.map(s => s.name))
 
-  /* __chained_injections__ */
+  for (const setup of setups) {
+    const result = setup(context, shortcuts)
+    shortcuts = shortcuts.concat(result)
+  }
 
-  const remainingBaseShortcutNames = injection_return.filter(s => s.name && baseShortcutNames.has(s.name))
+  const remainingBaseShortcutNames = shortcuts.filter(s => s.name && baseShortcutNames.has(s.name))
   if (remainingBaseShortcutNames.length === 0) {
     const message = [
       '========== WARNING ==========',
@@ -76,5 +79,5 @@ export default function setupShortcuts() {
     console.warn(message)
   }
 
-  return injection_return
+  return shortcuts
 }

package/shim-vue.d.ts

@@ -0,0 +1,34 @@
+declare module 'vue' {
+  type SlideContext = import('./context').SlideContext
+  interface ComponentCustomProperties extends SlideContext {
+  }
+}
+
+declare module 'vue-router' {
+  import type { TransitionGroupProps } from 'vue'
+
+  interface RouteMeta {
+    // inherited from frontmatter
+    layout: string
+    name?: string
+    class?: string
+    clicks?: number
+    transition?: string | TransitionGroupProps | undefined
+    preload?: boolean
+
+    // slide info
+    slide?: Omit<import('@slidev/types').SlideInfo, 'source'> & {
+      noteHTML: string
+      filepath: string
+      start: number
+      id: number
+      no: number
+    }
+
+    // private fields
+    __clicksContext: import('@slidev/types').ClicksContext | undefined
+    __preloaded?: boolean
+  }
+}
+
+export {}

package/shim.d.ts

@@ -1,23 +1,11 @@
-declare interface Window {
-  // extend the window
-}
-
-declare module '*.vue';
-
-// with unplugin-vue-markdown, markdowns can be treat as Vue components
 declare module '*.md' {
+  // with unplugin-vue-markdown, markdowns can be treat as Vue components
   import type { ComponentOptions } from 'vue'
 
   const component: ComponentOptions
   export default component
 }
 
-declare module '/@slidev/configs' {
-  import { SlidevConfig } from '@slidev/types'
-
-  export default SlidevConfig
-}
-
 declare module 'mermaid/dist/mermaid.esm.mjs' {
   import Mermaid from 'mermaid/dist/mermaid.d.ts'
 

package/state/index.ts

@@ -5,6 +5,7 @@ import { slideAspect } from '../env'
 export const showRecordingDialog = ref(false)
 export const showInfoDialog = ref(false)
 export const showGotoDialog = ref(false)
+export const showOverview = ref(false)
 
 export const shortcutsEnabled = ref(true)
 export const breakpoints = useBreakpoints({
@@ -13,7 +14,7 @@ export const breakpoints = useBreakpoints({
 })
 export const windowSize = useWindowSize()
 export const magicKeys = useMagicKeys()
-export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect > 120)
+export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect.value > 120)
 export const fullscreen = useFullscreen(isClient ? document.body : null)
 
 export const activeElement = useActiveElement()
@@ -24,7 +25,6 @@ export const currentCamera = useLocalStorage<string>('slidev-camera', 'default',
 export const currentMic = useLocalStorage<string>('slidev-mic', 'default', { listenToStorageChanges: false })
 export const slideScale = useLocalStorage<number>('slidev-scale', 0)
 
-export const showOverview = useLocalStorage('slidev-show-overview', false, { listenToStorageChanges: false })
 export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
 export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })
 export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false, { listenToStorageChanges: false })

package/styles/code.css

@@ -44,9 +44,9 @@ html:not(.dark) .shiki span {
   overflow: auto;
 }
 
-.slidev-code .line.highlighted {
+.slidev-code .slidev-code-highlighted {
 }
-.slidev-code .line.dishonored {
+.slidev-code .slidev-code-dishonored {
   opacity: 0.3;
   pointer-events: none;
 }
@@ -59,7 +59,9 @@ html:not(.dark) .shiki span {
 .slidev-code-line-numbers .slidev-code code .line::before {
   content: counter(step);
   counter-increment: step;
-  @apply w-4 mr-6 inline-block text-right text-gray-400 dark:text-gray-600;
+  display: inline-block;
+  text-align: right;
+  --uno: w-4 mr-6 text-gray-400 dark-text-gray-600;
 }
 
 /* Inline Code */
@@ -67,7 +69,7 @@ html:not(.dark) .shiki span {
   font-size: 0.9em;
   background: var(--slidev-code-background);
   border-radius: var(--slidev-code-radius);
-  @apply font-light py-0.5 px-1.5;
+  --uno: font-light py-0.5 px-1.5;
 }
 
 .slidev-layout :not(pre) > code:before {
@@ -82,4 +84,6 @@ html:not(.dark) .shiki span {
 }
 
 /* CodeMirror */
-.CodeMirror pre.CodeMirror-placeholder { opacity: 0.4; }
+.CodeMirror pre.CodeMirror-placeholder {
+  opacity: 0.4;
+}