@slidev/client 0.48.0-beta.8 → 0.48.0

package/setup/code-runners.ts

@@ -0,0 +1,164 @@
+import { createSingletonPromise } from '@antfu/utils'
+import type { CodeRunner, CodeRunnerContext, CodeRunnerOutput, CodeRunnerOutputText, CodeRunnerOutputs } from '@slidev/types'
+import type { CodeToHastOptions } from 'shiki'
+import { isDark } from '../logic/dark'
+import setups from '#slidev/setups/code-runners'
+
+export default createSingletonPromise(async () => {
+  const runners: Record<string, CodeRunner> = {
+    javascript: runJavaScript,
+    js: runJavaScript,
+    typescript: runTypeScript,
+    ts: runTypeScript,
+  }
+
+  const { shiki, themes } = await import('#slidev/shiki')
+  const highlighter = await shiki
+  const highlight = (code: string, lang: string, options: Partial<CodeToHastOptions> = {}) => highlighter.codeToHtml(code, {
+    lang,
+    theme: typeof themes === 'string'
+      ? themes
+      : isDark.value
+        ? themes.dark || 'vitesse-dark'
+        : themes.light || 'vitesse-light',
+    ...options,
+  })
+
+  const run = async (code: string, lang: string, options: Record<string, unknown>): Promise<CodeRunnerOutputs> => {
+    try {
+      const runner = runners[lang]
+      if (!runner)
+        throw new Error(`Runner for language "${lang}" not found`)
+      return await runner(
+        code,
+        {
+          options,
+          highlight,
+          run: async (code, lang) => {
+            return await run(code, lang, options)
+          },
+        },
+      )
+    }
+    catch (e) {
+      console.error(e)
+      return {
+        error: `${e}`,
+      }
+    }
+  }
+
+  for (const setup of setups) {
+    const result = await setup(runners)
+    Object.assign(runners, result)
+  }
+
+  return {
+    highlight,
+    run,
+  }
+})
+
+// Ported from https://github.com/microsoft/TypeScript-Website/blob/v2/packages/playground/src/sidebar/runtime.ts
+export async function runJavaScript(code: string): Promise<CodeRunnerOutputs> {
+  const allLogs: CodeRunnerOutput[] = []
+
+  const replace = {} as any
+  const logger = function (...objs: any[]) {
+    allLogs.push(objs.map(printObject))
+  }
+  replace.info = replace.log = replace.debug = replace.warn = replace.error = logger
+  replace.clear = () => allLogs.length = 0
+  const vmConsole = Object.assign({}, console, replace)
+  try {
+    const safeJS = `return async (console) => {${sanitizeJS(code)}}`
+    // eslint-disable-next-line no-new-func
+    await (new Function(safeJS)())(vmConsole)
+  }
+  catch (error) {
+    return {
+      error: `ERROR: ${error}`,
+    }
+  }
+
+  function printObject(arg: any): CodeRunnerOutputText {
+    if (typeof arg === 'string') {
+      return {
+        text: arg,
+      }
+    }
+    return {
+      text: objectToText(arg),
+      highlightLang: 'javascript',
+    }
+  }
+
+  function objectToText(arg: any): string {
+    let textRep = ''
+    if (arg instanceof Error) {
+      textRep = `Error: ${JSON.stringify(arg.message)}`
+    }
+    else if (arg === null || arg === undefined || typeof arg === 'symbol') {
+      textRep = String(arg)
+    }
+    else if (Array.isArray(arg)) {
+      textRep = `[${arg.map(objectToText).join(', ')}]`
+    }
+    else if (arg instanceof Set) {
+      const setIter = [...arg]
+      textRep = `Set (${arg.size}) {${setIter.map(objectToText).join(', ')}}`
+    }
+    else if (arg instanceof Map) {
+      const mapIter = [...arg.entries()]
+      textRep
+        = `Map (${arg.size}) {${mapIter
+          .map(([k, v]) => `${objectToText(k)} => ${objectToText(v)}`)
+          .join(', ')
+        }}`
+    }
+    else if (arg instanceof RegExp) {
+      textRep = arg.toString()
+    }
+    else if (typeof arg === 'string') {
+      textRep = JSON.stringify(arg)
+    }
+    else if (typeof arg === 'object') {
+      const name = arg.constructor?.name ?? ''
+      // No one needs to know an obj is an obj
+      const nameWithoutObject = name && name === 'Object' ? '' : name
+      const prefix = nameWithoutObject ? `${nameWithoutObject}: ` : ''
+
+      // JSON.stringify omits any keys with a value of undefined. To get around this, we replace undefined with the text __undefined__ and then do a global replace using regex back to keyword undefined
+      textRep
+        = prefix
+        + JSON.stringify(arg, (_, value) => (value === undefined ? '__undefined__' : value), 2).replace(
+          /"__undefined__"/g,
+          'undefined',
+        )
+
+      textRep = String(textRep)
+    }
+    else {
+      textRep = String(arg)
+    }
+    return textRep
+  }
+
+  // The reflect-metadata runtime is available, so allow that to go through
+  function sanitizeJS(code: string) {
+    return code.replace(`import "reflect-metadata"`, '').replace(`require("reflect-metadata")`, '')
+  }
+
+  return allLogs
+}
+
+let tsModule: typeof import('typescript') | undefined
+
+export async function runTypeScript(code: string, context: CodeRunnerContext) {
+  const { transpile } = tsModule ??= await import('typescript')
+  code = transpile(code, {
+    module: tsModule.ModuleKind.ESNext,
+    target: tsModule.ScriptTarget.ES2022,
+  })
+  return await context.run(code, 'javascript')
+}

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'