@slidev/client 0.48.0-beta.9 → 0.48.0

package/pages/presenter/print.vue

@@ -2,10 +2,12 @@
 import { computed } from 'vue'
 import { useStyleTag } from '@vueuse/core'
 import { useHead } from '@unhead/vue'
-import { configs, themeVars } from '../../env'
-import { rawRoutes, total } from '../../logic/nav'
+import { useNav } from '../../composables/useNav'
+import { configs } from '../../env'
 import NoteDisplay from '../../internals/NoteDisplay.vue'
 
+const { slides, total } = useNav()
+
 useStyleTag(`
 @page {
   size: A4;
@@ -28,13 +30,13 @@ useHead({
   title: `Notes - ${configs.title}`,
 })
 
-const slidesWithNote = computed(() => rawRoutes
+const slidesWithNote = computed(() => slides.value
   .map(route => route.meta?.slide)
   .filter(slide => slide !== undefined && slide.noteHTML !== ''))
 </script>
 
 <template>
-  <div id="page-root" :style="themeVars">
+  <div id="page-root">
     <div class="m-4">
       <div class="mb-10">
         <h1 class="text-4xl font-bold mt-2">
@@ -56,7 +58,10 @@ const slidesWithNote = computed(() => rawRoutes
               <div class="flex-auto" />
             </div>
           </h2>
-          <NoteDisplay :note-html="slide!.noteHTML" class="max-w-full" />
+          <NoteDisplay
+            :note-html="slide!.noteHTML"
+            class="max-w-full"
+          />
         </div>
         <hr v-if="index < slidesWithNote.length - 1" class="border-main mb-8">
       </div>

package/pages/presenter.vue

@@ -2,31 +2,46 @@
 import { useHead } from '@unhead/vue'
 import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
-import { clicksContext, currentPage, currentRoute, currentSlideId, hasNext, nextRoute, queryClicks, rawRoutes, total, useSwipeControls } from '../logic/nav'
+import { useSwipeControls } from '../composables/useSwipeControls'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
-import { configs, themeVars } from '../env'
+import { configs } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
 import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
-import { isDrawing } from '../logic/drawings'
-import { useFixedClicks } from '../composables/useClicks'
-import SlideWrapper from '../internals/SlideWrapper'
+import { createFixedClicks } from '../composables/useClicks'
+import SlideWrapper from '../internals/SlideWrapper.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
-import SlidesOverview from '../internals/SlidesOverview.vue'
-import NoteEditor from '../internals/NoteEditor.vue'
+import QuickOverview from '../internals/QuickOverview.vue'
+import NoteEditable from '../internals/NoteEditable.vue'
 import NoteStatic from '../internals/NoteStatic.vue'
 import Goto from '../internals/Goto.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import DrawingControls from '../internals/DrawingControls.vue'
 import IconButton from '../internals/IconButton.vue'
+import ClicksSlider from '../internals/ClicksSlider.vue'
+import { useNav } from '../composables/useNav'
+import { useDrawings } from '../composables/useDrawings'
 
 const main = ref<HTMLDivElement>()
 
 registerShortcuts()
 useSwipeControls(main)
 
+const {
+  clicksContext,
+  currentSlideNo,
+  currentSlideRoute,
+  hasNext,
+  nextRoute,
+  slides,
+  queryClicks,
+  getPrimaryClicks,
+  total,
+} = useNav()
+const { isDrawing } = useDrawings()
+
 const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
   title: `Presenter - ${slideTitle}`,
@@ -36,25 +51,32 @@ const notesEditing = ref(false)
 
 const { timer, resetTimer } = useTimer()
 
-const clicksCtxMap = rawRoutes.map(route => useFixedClicks(route))
+const clicksCtxMap = computed(() => slides.value.map(route => createFixedClicks(route)))
 const nextFrame = computed(() => {
   if (clicksContext.value.current < clicksContext.value.total)
-    return [currentRoute.value!, clicksContext.value.current + 1] as const
+    return [currentSlideRoute.value!, clicksContext.value.current + 1] as const
   else if (hasNext.value)
     return [nextRoute.value!, 0] as const
   else
     return null
 })
+
 const nextFrameClicksCtx = computed(() => {
-  return nextFrame.value && clicksCtxMap[+nextFrame.value[0].path - 1]
+  return nextFrame.value && clicksCtxMap.value[nextFrame.value[0].no - 1]
 })
-watch([currentRoute, queryClicks], () => {
-  nextFrameClicksCtx.value && (nextFrameClicksCtx.value[0].value = nextFrame.value![1])
-}, { immediate: true })
 
-const Editor = shallowRef<any>()
+watch(
+  [currentSlideRoute, queryClicks],
+  () => {
+    if (nextFrameClicksCtx.value)
+      nextFrameClicksCtx.value.current = nextFrame.value![1]
+  },
+  { immediate: true },
+)
+
+const SideEditor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
-  import('../internals/Editor.vue').then(v => Editor.value = v.default)
+  import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
 
 // sync presenter cursor
 onMounted(() => {
@@ -86,72 +108,64 @@ onMounted(() => {
 <template>
   <div class="bg-main h-full slidev-presenter">
     <div class="grid-container" :class="`layout${presenterLayout}`">
-      <div class="grid-section top flex">
-        <img src="../assets/logo-title-horizontal.png" class="ml-2 my-auto h-10 py-1 lg:h-14 lg:py-2" style="height: 3.5rem;" alt="Slidev logo">
-        <div class="flex-auto" />
-        <div
-          class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
-          opacity="50 hover:100"
-          @click="resetTimer"
-        >
-          <carbon:time class="absolute" />
-          <carbon:renew class="absolute opacity-0" />
-        </div>
-        <div class="text-2xl pl-2 pr-6 my-auto tabular-nums">
-          {{ timer }}
-        </div>
-      </div>
-      <div ref="main" class="relative grid-section main flex flex-col p-2 lg:p-4" :style="themeVars">
+      <div ref="main" class="relative grid-section main flex flex-col">
         <SlideContainer
           key="main"
-          class="h-full w-full"
+          class="h-full w-full p-2 lg:p-4 flex-auto"
         >
           <template #default>
             <SlidesShow render-context="presenter" />
           </template>
         </SlideContainer>
-        <div class="context">
-          current
+        <ClicksSlider
+          :key="currentSlideRoute?.no"
+          :clicks-context="getPrimaryClicks(currentSlideRoute)"
+          class="w-full pb2 px4 flex-none"
+        />
+        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
+          Current
         </div>
       </div>
-      <div class="relative grid-section next flex flex-col p-2 lg:p-4" :style="themeVars">
+      <div class="relative grid-section next flex flex-col p-2 lg:p-4">
         <SlideContainer
           v-if="nextFrame && nextFrameClicksCtx"
           key="next"
           class="h-full w-full"
         >
           <SlideWrapper
-            :is="nextFrame[0].component as any"
-            :key="nextFrame[0].path"
-            :clicks-context="nextFrameClicksCtx[1]"
+            :is="nextFrame[0].component!"
+            :key="nextFrame[0].no"
+            :clicks-context="nextFrameClicksCtx"
             :class="getSlideClass(nextFrame[0])"
             :route="nextFrame[0]"
             render-context="previewNext"
           />
         </SlideContainer>
-        <div class="context">
-          next
+        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
+          Next
         </div>
       </div>
       <!-- Notes -->
-      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && Editor && showEditor" class="grid-section note of-auto">
-        <Editor />
+      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor" class="grid-section note of-auto">
+        <SideEditor />
       </div>
       <div v-else class="grid-section note grid grid-rows-[1fr_min-content] overflow-hidden">
-        <NoteEditor
+        <NoteEditable
           v-if="__DEV__"
-          :key="`edit-${currentSlideId}`"
-          :no="currentSlideId"
+          :key="`edit-${currentSlideNo}`"
+          v-model:editing="notesEditing"
+          :no="currentSlideNo"
           class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
-          :editing="notesEditing"
+          :clicks-context="clicksContext"
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
         />
         <NoteStatic
           v-else
-          :key="`static-${currentSlideId}`"
-          :no="currentSlideId"
+          :key="`static-${currentSlideNo}`"
+          :no="currentSlideNo"
           class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
+          :clicks-context="clicksContext"
         />
         <div class="border-t border-main py-1 px-2 text-sm">
           <IconButton title="Increase font size" @click="increasePresenterFontSize">
@@ -169,116 +183,120 @@ onMounted(() => {
           </IconButton>
         </div>
       </div>
-      <div class="grid-section bottom">
+      <div class="grid-section bottom flex">
         <NavControls :persist="true" />
+        <div flex-auto />
+        <div
+          class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
+          opacity="50 hover:100"
+          @click="resetTimer"
+        >
+          <carbon:time class="absolute" />
+          <carbon:renew class="absolute opacity-0" />
+        </div>
+        <div class="text-2xl pl-2 pr-6 my-auto tabular-nums">
+          {{ timer }}
+        </div>
       </div>
       <DrawingControls v-if="__SLIDEV_FEATURE_DRAWINGS__" />
     </div>
     <div class="progress-bar">
       <div
-        class="progress h-2px bg-primary transition-all"
-        :style="{ width: `${(currentPage - 1) / (total - 1) * 100}%` }"
+        class="progress h-3px bg-primary transition-all"
+        :style="{ width: `${(currentSlideNo - 1) / (total - 1) * 100}%` }"
       />
     </div>
   </div>
   <Goto />
-  <SlidesOverview v-model="showOverview" />
+  <QuickOverview v-model="showOverview" />
 </template>
 
-<style lang="postcss" scoped>
+<style scoped>
 .slidev-presenter {
   --slidev-controls-foreground: current;
 }
 
-.timer-btn:hover {
-  & > :first-child {
-    @apply opacity-0;
-  }
-  & > :last-child {
-    @apply opacity-100;
-  }
+.timer-btn:hover > :first-child {
+  opacity: 0;
+}
+.timer-btn:hover > :last-child {
+  opacity: 1;
 }
 
 .section-title {
-  @apply px-4 py-2 text-xl;
+  --uno: px-4 py-2 text-xl;
 }
 
 .grid-container {
-  @apply h-full w-full bg-gray-400 bg-opacity-15;
+  --uno: bg-gray/20;
+  height: 100%;
+  width: 100%;
   display: grid;
   gap: 1px 1px;
 }
 
 .grid-container.layout1 {
   grid-template-columns: 1fr 1fr;
-  grid-template-rows: min-content 2fr 1fr min-content;
+  grid-template-rows: 2fr 1fr min-content;
   grid-template-areas:
-    "top top"
-    "main main"
-    "note next"
-    "bottom bottom";
+    'main main'
+    'note next'
+    'bottom bottom';
 }
 
 .grid-container.layout2 {
   grid-template-columns: 3fr 2fr;
-  grid-template-rows: min-content 2fr 1fr min-content;
+  grid-template-rows: 2fr 1fr min-content;
   grid-template-areas:
-    "top top"
-    "note main"
-    "note next"
-    "bottom bottom";
+    'note main'
+    'note next'
+    'bottom bottom';
 }
 
 @media (max-aspect-ratio: 3/5) {
   .grid-container.layout1 {
     grid-template-columns: 1fr;
-    grid-template-rows: min-content 1fr 1fr 1fr min-content;
+    grid-template-rows: 1fr 1fr 1fr min-content;
     grid-template-areas:
-      "top"
-      "main"
-      "note"
-      "next"
-      "bottom";
+      'main'
+      'note'
+      'next'
+      'bottom';
   }
 }
 
 @media (min-aspect-ratio: 1/1) {
   .grid-container.layout1 {
     grid-template-columns: 1fr 1.1fr 0.9fr;
-    grid-template-rows: min-content 1fr 2fr min-content;
+    grid-template-rows: 1fr 2fr min-content;
     grid-template-areas:
-      "top top top"
-      "main main next"
-      "main main note"
-      "bottom bottom bottom";
+      'main main next'
+      'main main note'
+      'bottom bottom bottom';
   }
 }
 
 .progress-bar {
-  @apply fixed left-0 right-0 bottom-0;
+  --uno: fixed left-0 right-0 top-0;
 }
 
 .grid-section {
-  @apply bg-main;
-
-  &.top {
-    grid-area: top;
-  }
-  &.main {
-    grid-area: main;
-  }
-  &.next {
-    grid-area: next;
-  }
-  &.note {
-    grid-area: note;
-  }
-  &.bottom {
-    grid-area: bottom;
-  }
+  --uno: bg-main;
 }
 
-.context {
-  @apply absolute top-0 left-0 px-1 text-xs bg-gray-400 bg-opacity-50 opacity-75 rounded-br-md;
+.grid-section.top {
+  grid-area: top;
+}
+.grid-section.main {
+  grid-area: main;
+}
+.grid-section.next {
+  grid-area: next;
+}
+.grid-section.note {
+  grid-area: note;
+}
+.grid-section.bottom {
+  grid-area: bottom;
 }
-</style>
+</style>../composables/drawings

package/pages/print.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { watchEffect } from 'vue'
 import { windowSize } from '../state'
-import { isPrintMode } from '../logic/nav'
-import { themeVars } from '../env'
 import PrintContainer from '../internals/PrintContainer.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
+import { useNav } from '../composables/useNav'
+
+const { isPrintMode } = useNav()
 
 watchEffect(() => {
   if (isPrintMode)
@@ -16,7 +17,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,26 +1,7 @@
 import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
-import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
-import type { TransitionGroupProps } from 'vue'
-import type { ClicksContext, SlideInfo } from '@slidev/types'
-
-// @ts-expect-error missing types
-import _rawRoutes, { redirects } from '/@slidev/routes'
-
-// @ts-expect-error missing types
-import _configs from '/@slidev/configs'
-
-export const rawRoutes = _rawRoutes as RouteRecordRaw[]
+import configs from '#slidev/configs'
 
 export const routes: RouteRecordRaw[] = [
-  {
-    name: 'play',
-    path: '/',
-    component: () => import('./pages/play.vue'),
-    children: [
-      ...rawRoutes,
-      ...redirects,
-    ],
-  },
   {
     name: 'print',
     path: '/print',
@@ -29,17 +10,16 @@ export const routes: RouteRecordRaw[] = [
 
   // 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)
@@ -81,34 +61,8 @@ if (__SLIDEV_FEATURE_PRESENTER__) {
   })
 }
 
-export const router = createRouter({
-  history: __SLIDEV_HASH_ROUTE__
-    ? createWebHashHistory(import.meta.env.BASE_URL)
-    : createWebHistory(import.meta.env.BASE_URL),
-  routes,
+routes.push({
+  name: 'play',
+  path: '/:no',
+  component: () => import('./pages/play.vue'),
 })
-
-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
-  }
-}

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')
+}