@slidev/client 0.48.0-beta.2 → 0.48.0-beta.20

package/{internals/Print.vue → pages/print.vue}

@@ -2,9 +2,8 @@
 import { watchEffect } from 'vue'
 import { windowSize } from '../state'
 import { isPrintMode } from '../logic/nav'
-import { themeVars } from '../env'
-import PrintContainer from './PrintContainer.vue'
-import PrintStyle from './PrintStyle.vue'
+import PrintContainer from '../internals/PrintContainer.vue'
+import PrintStyle from '../internals/PrintStyle.vue'
 
 watchEffect(() => {
   if (isPrintMode)
@@ -16,7 +15,7 @@ watchEffect(() => {
 
 <template>
   <PrintStyle v-if="isPrintMode" />
-  <div id="page-root" class="grid grid-cols-[1fr_max-content]" :style="themeVars">
+  <div id="page-root" class="grid grid-cols-[1fr_max-content]">
     <PrintContainer
       class="w-full h-full"
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"

package/routes.ts

@@ -1,65 +1,73 @@
 import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
-import type { TransitionGroupProps } from 'vue'
-import type { ClicksContext } from '@slidev/types'
-import Play from './internals/Play.vue'
-import Print from './internals/Print.vue'
 
-// @ts-expect-error missing types
-import _rawRoutes, { redirects } from '/@slidev/routes'
+import { rawRoutes, redirects } from '#slidev/routes'
+import configs from '#slidev/configs'
 
-// @ts-expect-error missing types
-import _configs from '/@slidev/configs'
-
-export const rawRoutes = _rawRoutes as RouteRecordRaw[]
+export { rawRoutes }
 
 export const routes: RouteRecordRaw[] = [
   {
     name: 'play',
     path: '/',
-    component: Play,
+    component: () => import('./pages/play.vue'),
     children: [
       ...rawRoutes,
       ...redirects,
     ],
   },
-  { name: 'print', path: '/print', component: Print },
+  {
+    name: 'print',
+    path: '/print',
+    component: () => import('./pages/print.vue'),
+  },
+
+  // Redirects
   { path: '', redirect: { path: '/1' } },
   { path: '/:pathMatch(.*)', redirect: { path: '/1' } },
 ]
 
 if (__SLIDEV_FEATURE_PRESENTER__) {
   function passwordGuard(to: RouteLocationNormalized) {
-    if (!_configs.remote || _configs.remote === to.query.password)
+    if (!configs.remote || configs.remote === to.query.password)
       return true
-    if (_configs.remote && to.query.password === undefined) {
+    if (configs.remote && to.query.password === undefined) {
       // eslint-disable-next-line no-alert
       const password = prompt('Enter password')
-      if (_configs.remote === password)
+      if (configs.remote === password)
         return true
     }
     if (to.params.no)
       return { path: `/${to.params.no}` }
     return { path: '' }
   }
-  routes.push({ path: '/presenter/print', component: () => import('./internals/PresenterPrint.vue') })
+
+  routes.push({
+    path: '/presenter/print',
+    component: () => import('./pages/presenter/print.vue'),
+  })
   if (__SLIDEV_HAS_SERVER__) {
     routes.push({
       name: 'entry',
       path: '/entry',
-      component: () => import('./internals/EntrySelect.vue'),
+      component: () => import('./pages/entry.vue'),
+    })
+    routes.push({
+      name: 'overview',
+      path: '/overview',
+      component: () => import('./pages/overview.vue'),
     })
     routes.push({
       name: 'notes',
       path: '/notes',
-      component: () => import('./internals/NotesView.vue'),
+      component: () => import('./pages/notes.vue'),
       beforeEnter: passwordGuard,
     })
   }
   routes.push({
     name: 'presenter',
     path: '/presenter/:no',
-    component: () => import('./internals/Presenter.vue'),
+    component: () => import('./pages/presenter.vue'),
     beforeEnter: passwordGuard,
   })
   routes.push({
@@ -74,35 +82,3 @@ export const router = createRouter({
     : createWebHistory(import.meta.env.BASE_URL),
   routes,
 })
-
-declare module 'vue-router' {
-  interface RouteMeta {
-    // inherited from frontmatter
-    layout: string
-    name?: string
-    class?: string
-    clicks?: number
-    transition?: string | TransitionGroupProps | undefined
-    preload?: boolean
-
-    // slide info
-    slide?: {
-      start: number
-      end: number
-      note?: string
-      noteHTML?: string
-      id: number
-      no: number
-      filepath: string
-      title?: string
-      level?: number
-      raw: string
-      content: string
-      frontmatter: Record<string, any>
-    }
-
-    // private fields
-    __clicksContext: null | ClicksContext
-    __preloaded?: boolean
-  }
-}

package/setup/codemirror.ts

@@ -1,6 +1,7 @@
 import type { Ref, WritableComputedRef } from 'vue'
+import { onClickOutside } from '@vueuse/core'
 import { watch } from 'vue'
-import * as _CodeMirror from 'codemirror'
+import CodeMirror from 'codemirror'
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/mode/css/css'
 import 'codemirror/mode/markdown/markdown'
@@ -9,8 +10,6 @@ import 'codemirror/mode/htmlmixed/htmlmixed'
 import 'codemirror/addon/display/placeholder'
 import 'codemirror/lib/codemirror.css'
 
-const CodeMirror = _CodeMirror.default ?? ('fromTextArea' in _CodeMirror ? _CodeMirror : globalThis.CodeMirror)
-
 export async function useCodeMirror(
   textarea: Ref<HTMLTextAreaElement | null | undefined>,
   input: Ref<string> | WritableComputedRef<string>,
@@ -47,5 +46,11 @@ export async function useCodeMirror(
     { immediate: true },
   )
 
+  onClickOutside(cm.getWrapperElement(), () => {
+    const el = cm.getInputField()
+    if (document.activeElement === el)
+      el.blur()
+  })
+
   return cm
 }

package/setup/monaco.ts

@@ -1,52 +1,114 @@
-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'
+
+// @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'
 
 /* __imports__ */
+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: 'typescript' })
+  monaco.languages.register({ id: 'javascript' })
+
+  const { shiki, themes, shikiToMonaco } = await import('#slidev/shiki')
+  const highlighter = await shiki
+
+  // 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')
+    })
+  }
 
   // @ts-expect-error injected in runtime
   // eslint-disable-next-line unused-imports/no-unused-vars
@@ -56,15 +118,17 @@ const setup = createSingletonPromise(async () => {
 
   /* __async_injections__ */
 
-  if (getCurrentInstance())
-    await new Promise<void>(resolve => onMounted(resolve))
-
   return {
     monaco,
+    ata,
     ...injection_return,
   }
 })
 
-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,7 +1,6 @@
 /* __imports__ */
 import { watch } from 'vue'
 import { useHead } from '@unhead/vue'
-import { nanoid } from 'nanoid'
 import { configs } from '../env'
 import { initSharedState, onPatch, patch } from '../state/shared'
 import { initDrawingState } from '../state/drawings'
@@ -9,6 +8,7 @@ import { clicksContext, currentPage, getPath, isNotesViewer, isPresenter } from
 import { router } from '../routes'
 import { TRUST_ORIGINS } from '../constants'
 import { skipTransition } from '../composables/hmr'
+import { makeId } from '../logic/utils'
 
 export default function setupRoot() {
   // @ts-expect-error injected in runtime
@@ -25,7 +25,7 @@ export default function setupRoot() {
   initSharedState(`${title} - shared`)
   initDrawingState(`${title} - drawings`)
 
-  const id = `${location.origin}_${nanoid()}`
+  const id = `${location.origin}_${makeId()}`
 
   // update shared state
   function updateSharedState() {

package/shim-vue.d.ts

@@ -0,0 +1,35 @@
+declare module 'vue' {
+  import type { UnwrapNestedRefs } from 'vue'
+  import type { SlidevContext } from './modules/context'
+
+  interface ComponentCustomProperties {
+    $slidev: UnwrapNestedRefs<SlidevContext>
+  }
+}
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    // inherited from frontmatter
+    layout: string
+    name?: string
+    class?: string
+    clicks?: number
+    transition?: string | TransitionGroupProps | undefined
+    preload?: boolean
+
+    // slide info
+    slide?: Omit<SlideInfo, 'source'> & {
+      noteHTML: string
+      filepath: string
+      start: number
+      id: number
+      no: number
+    }
+
+    // private fields
+    __clicksContext: null | ClicksContext
+    __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({
@@ -20,19 +21,18 @@ export const activeElement = useActiveElement()
 export const isInputting = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || '') || activeElement.value?.classList.contains('CodeMirror-code'))
 export const isOnFocus = computed(() => ['BUTTON', 'A'].includes(activeElement.value?.tagName || ''))
 
-export const currentCamera = useLocalStorage<string>('slidev-camera', 'default')
-export const currentMic = useLocalStorage<string>('slidev-mic', 'default')
+export const currentCamera = useLocalStorage<string>('slidev-camera', 'default', { listenToStorageChanges: false })
+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)
-export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true)
-export const showEditor = useLocalStorage('slidev-show-editor', false)
-export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false)
-export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 318)
-export const editorHeight = useLocalStorage('slidev-editor-height', isClient ? window.innerHeight * 0.4 : 300)
+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 })
+export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 318, { listenToStorageChanges: false })
+export const editorHeight = useLocalStorage('slidev-editor-height', isClient ? window.innerHeight * 0.4 : 300, { listenToStorageChanges: false })
 
-export const presenterNotesFontSize = useLocalStorage('slidev-presenter-font-size', 1)
-export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1)
+export const presenterNotesFontSize = useLocalStorage('slidev-presenter-font-size', 1, { listenToStorageChanges: false })
+export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1, { listenToStorageChanges: false })
 
 export function togglePresenterLayout() {
   presenterLayout.value = presenterLayout.value + 1

package/styles/code.css

@@ -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;
+}

package/styles/index.css

@@ -16,22 +16,27 @@ html {
 }
 
 .slidev-icon-btn {
-  @apply inline-block cursor-pointer select-none !outline-none;
+  aspect-ratio: 1;
+  display: inline-block;
+  user-select: none;
+  outline: none;
+  cursor: pointer;
   @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
   @apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
   @apply md:p-2;
 }
 
 .slidev-icon-btn.shallow {
-  @apply opacity-30
+  opacity: 0.3;
 }
 
 .slidev-icon-btn.active {
-  @apply opacity-100
+  opacity: 1;
 }
 
 .slidev-icon-btn.disabled {
-  @apply opacity-25 pointer-events-none;
+  opacity: 0.25;
+  pointer-events: none;
 }
 
 .slidev-vclick-target {
@@ -39,11 +44,13 @@ html {
 }
 
 .slidev-vclick-hidden {
-  @apply !opacity-0 !pointer-events-none;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  user-select: none !important;
 }
 
 .slidev-vclick-fade {
-  @apply opacity-50;
+  opacity: 0.5;
 }
 
 .slidev-icon {
@@ -53,5 +60,59 @@ html {
 }
 
 .slidev-page {
-  @apply absolute top-0 left-0 right-0 w-full relative;
+  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+}
+
+/* Note Clicks */
+
+.slidev-note-with-clicks .slidev-note-fade {
+  color: #888888ab;
+}
+
+.slidev-note-click-mark {
+  user-select: none;
+  font-size: 0.7em;
+  display: inline-flex;
+  --uno: text-violet bg-violet/10 px1 font-mono rounded items-center border
+    border-transparent;
+}
+.slidev-note-click-mark.slidev-note-click-mark-active {
+  --uno: border border-violet;
+}
+.slidev-note-click-mark.slidev-note-click-mark-past {
+  filter: saturate(0);
+  opacity: 0.5;
+}
+.slidev-note-click-mark.slidev-note-click-mark-future {
+  opacity: 0.5;
+}
+
+.slidev-note-click-mark::before {
+  content: '';
+  display: inline-block;
+  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M23 28a1 1 0 0 1-.71-.29l-6.13-6.14l-3.33 5a1 1 0 0 1-1 .44a1 1 0 0 1-.81-.7l-6-20A1 1 0 0 1 6.29 5l20 6a1 1 0 0 1 .7.81a1 1 0 0 1-.44 1l-5 3.33l6.14 6.13a1 1 0 0 1 0 1.42l-4 4A1 1 0 0 1 23 28m0-2.41L25.59 23l-7.16-7.15l5.25-3.5L7.49 7.49l4.86 16.19l3.5-5.25Z'/%3E%3C/svg%3E");
+  -webkit-mask: var(--un-icon) no-repeat;
+  mask: var(--un-icon) no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  background-color: currentColor;
+  color: inherit;
+  width: 1.2em;
+  height: 1.2em;
+  opacity: 0.8;
+}
+
+.slidev-note-click-mark::after {
+  content: attr(data-clicks);
+  display: inline-block;
+  transform: translateY(0.1em);
+}
+
+/* Transform the position back for Rough Notation (v-mark) */
+.rough-annotation {
+  transform: scale(calc(1 / var(--slidev-slide-scale)));
 }

package/styles/katex.css

@@ -2,4 +2,4 @@
 }
 .slidev-katex-wrapper .mord.dishonored {
   opacity: 0.3;
-}
+}