@slidev/client 0.48.0-beta.16 → 0.48.0-beta.18

package/App.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
+import { watchEffect } from 'vue'
+import { themeVars } from './env'
 import setupRoot from './setup/root'
 
 setupRoot()
+
+watchEffect(() => {
+  for (const [key, value] of Object.entries(themeVars.value))
+    document.body.style.setProperty(key, value.toString())
+})
 </script>
 
 <template>

package/builtin/CodeBlockWrapper.vue

@@ -56,8 +56,12 @@ onUnmounted(() => {
   clicks!.unregister(id)
 })
 
+watchEffect(() => {
+  el.value?.classList.toggle('slidev-code-line-numbers', props.lines)
+})
+
 onMounted(() => {
-  if (!clicks || clicks.disabled)
+  if (!clicks || clicks.disabled || !props.ranges?.length)
     return
 
   const { start, end, delta } = clicks.resolve(props.at, props.ranges.length - 1)
@@ -121,9 +125,12 @@ function copyCode() {
 
 <template>
   <div
-    ref="el" class="slidev-code-wrapper relative group" :class="{
+    ref="el"
+    class="slidev-code-wrapper relative group"
+    :class="{
       'slidev-code-line-numbers': props.lines,
-    }" :style="{
+    }"
+    :style="{
       'max-height': props.maxHeight,
       'overflow-y': props.maxHeight ? 'scroll' : undefined,
       '--start': props.startLine,

package/builtin/KaTexBlockWrapper.vue

@@ -55,7 +55,7 @@ onUnmounted(() => {
 })
 
 onMounted(() => {
-  if (!clicks || clicks.disabled)
+  if (!clicks || clicks.disabled || !props.ranges?.length)
     return
 
   const { start, end, delta } = clicks.resolve(props.at, props.ranges.length - 1)

package/builtin/Mermaid.vue

@@ -48,6 +48,7 @@ watchEffect(async (onCleanup) => {
   }
   catch (e) {
     error.value = `${e}`
+    console.warn(e)
   }
 })
 
@@ -76,6 +77,6 @@ watchEffect(() => {
 </script>
 
 <template>
-  <pre v-if="error" border="1 red rounded" class="pa-3">{{ error }}</pre>
+  <pre v-if="error" border="1 red rounded" class="pa-3 text-wrap">{{ error }}</pre>
   <ShadowRoot v-else class="mermaid" :inner-html="html" @shadow="el = $event" />
 </template>

package/builtin/Monaco.vue

@@ -12,11 +12,10 @@ Learn more: https://sli.dev/guide/syntax.html#monaco-editor
 -->
 
 <script setup lang="ts">
-import * as monaco from 'monaco-editor'
+import type * as monaco from 'monaco-editor'
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { debounce } from '@antfu/utils'
-import { decompressFromBase64 } from 'lz-string'
-import setup from '../setup/monaco'
+import lz from 'lz-string'
 import { makeId } from '../logic/utils'
 
 const props = withDefaults(defineProps<{
@@ -37,8 +36,8 @@ const props = withDefaults(defineProps<{
   ata: true,
 })
 
-const code = decompressFromBase64(props.codeLz).trimEnd()
-const diff = props.diffLz && decompressFromBase64(props.diffLz).trimEnd()
+const code = lz.decompressFromBase64(props.codeLz).trimEnd()
+const diff = props.diffLz && lz.decompressFromBase64(props.diffLz).trimEnd()
 
 const langMap: Record<string, string> = {
   ts: 'typescript',
@@ -67,7 +66,9 @@ const height = computed(() => {
 })
 
 onMounted(async () => {
-  const { ata } = await setup()
+  // Lazy load monaco, so it will be bundled in async chunk
+  const { default: setup } = await import('../setup/monaco')
+  const { ata, monaco } = await setup()
   const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(`file:///${makeId()}.${ext}`))
   const commonOptions = {
     automaticLayout: true,
@@ -88,7 +89,7 @@ onMounted(async () => {
 
   let editableEditor: monaco.editor.IStandaloneCodeEditor
   if (diff) {
-    const diffModel = monaco.editor.createModel(diff, lang, monaco.Uri.parse(`file:///${nanoid()}.${ext}`))
+    const diffModel = monaco.editor.createModel(diff, lang, monaco.Uri.parse(`file:///${makeId()}.${ext}`))
     const editor = monaco.editor.createDiffEditor(container.value!, {
       renderOverviewRuler: false,
       ...commonOptions,

package/builtin/ShikiMagicMove.vue

@@ -2,7 +2,7 @@
 import { ShikiMagicMovePrecompiled } from 'shiki-magic-move/vue'
 import type { KeyedTokensInfo } from 'shiki-magic-move/types'
 import { onMounted, onUnmounted, ref, watchEffect } from 'vue'
-import { decompressFromBase64 } from 'lz-string'
+import lz from 'lz-string'
 import { useSlideContext } from '../context'
 import { makeId } from '../logic/utils'
 
@@ -13,7 +13,7 @@ const props = defineProps<{
   at?: string | number
 }>()
 
-const steps = JSON.parse(decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
+const steps = JSON.parse(lz.decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
 const { $clicksContext: clicks, $scale: scale } = useSlideContext()
 const id = makeId()
 const index = ref(0)

package/builtin/Tweet.vue

@@ -7,9 +7,8 @@ Usage:
 -->
 
 <script setup lang="ts">
-import { getCurrentInstance, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { isDark } from '../logic/dark'
-import { useTweetScript } from '../composables/useTweetScript'
 
 const props = defineProps<{
   id: string | number
@@ -20,11 +19,10 @@ const props = defineProps<{
 
 const tweet = ref<HTMLElement | null>()
 
-const vm = getCurrentInstance()!
 const loaded = ref(false)
 const tweetNotFound = ref(false)
 
-async function create() {
+onMounted(async () => {
   // @ts-expect-error global
   const element = await window.twttr.widgets.createTweet(
     props.id.toString(),
@@ -38,13 +36,7 @@ async function create() {
   loaded.value = true
   if (element === undefined)
     tweetNotFound.value = true
-}
-
-// @ts-expect-error global
-if (window?.twttr?.widgets)
-  onMounted(create)
-else
-  useTweetScript(vm, create)
+})
 </script>
 
 <template>

package/internals/{OverviewClicksSlider.vue → ClicksSlider.vue}

@@ -30,10 +30,14 @@ function onMousedown() {
   <div
     class="flex gap-0.5 items-center select-none"
     :title="`Clicks in this slide: ${total}`"
+    :class="total ? '' : 'op50'"
   >
     <div class="flex gap-1 items-center min-w-16">
       <carbon:cursor-1 text-sm op50 />
-      <span v-if="current <= total && current >= 0" text-primary>{{ current }}/</span>
+      <template v-if="current <= total && current >= 0">
+        <span text-primary>{{ current }}</span>
+        <span op50>/</span>
+      </template>
       <span op50>{{ total }}</span>
     </div>
     <div
@@ -47,16 +51,16 @@ function onMousedown() {
           i === 0 ? 'rounded-l border-l' : '',
           i === total ? 'rounded-r border-r' : '',
         ]"
-        :style="{ width: `${1 / total * 100}%` }"
+        :style="{ width: total > 0 ? `${1 / total * 100}%` : '100%' }"
       >
-        <div absolute inset-0 z--1 :class=" i <= current ? 'bg-primary op20' : ''" />
+        <div absolute inset-0 :class="i <= current ? 'bg-primary op20' : ''" />
         <div
           :class="[
             +i === +current ? 'text-primary font-bold op100 border-primary' : 'op30 border-main',
             i === 0 ? 'rounded-l' : '',
             i === total ? 'rounded-r' : 'border-r-2',
           ]"
-          w-full h-full text-xs flex items-center justify-center
+          w-full h-full text-xs flex items-center justify-center z-1
         >
           {{ i }}
         </div>

package/internals/NoteEditable.vue

@@ -91,10 +91,12 @@ function calculateEditorHeight() {
 }
 
 watch(
-  note,
-  () => nextTick(() => {
-    calculateEditorHeight()
-  }),
+  [note, editing],
+  () => {
+    nextTick(() => {
+      calculateEditorHeight()
+    })
+  },
   { flush: 'post', immediate: true },
 )
 </script>

package/internals/PrintContainer.vue

@@ -50,6 +50,6 @@ provideLocal(injectionSlideScale, scale)
 }
 
 .print-slide-container {
-  @apply relative overflow-hidden break-after-page;
+  @apply relative overflow-hidden break-after-page translate-0;
 }
 </style>

package/internals/QuickOverview.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useEventListener, useVModel } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
-import { themeVars } from '../env'
 import { breakpoints, showOverview, windowSize } from '../state'
 import { currentPage, go as goSlide, rawRoutes } from '../logic/nav'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
@@ -128,7 +127,6 @@ watchEffect(() => {
           <div
             class="inline-block border rounded overflow-hidden bg-main hover:border-primary transition"
             :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-primary' : 'border-main'"
-            :style="themeVars"
             @click="go(+route.path)"
           >
             <SlideContainer

package/modules/mermaid.ts

@@ -1,5 +1,5 @@
 import mermaid from 'mermaid/dist/mermaid.esm.mjs'
-import { decompressFromBase64 } from 'lz-string'
+import lz from 'lz-string'
 import { clearUndefined } from '@antfu/utils'
 import setupMermaid from '../setup/mermaid'
 import { makeId } from '../logic/utils'
@@ -20,7 +20,7 @@ export async function renderMermaid(lzEncoded: string, options: any) {
     ...clearUndefined(setupMermaid() || {}),
     ...clearUndefined(options),
   })
-  const code = decompressFromBase64(lzEncoded)
+  const code = lz.decompressFromBase64(lzEncoded)
   const id = makeId()
   const { svg } = await mermaid.render(id, code)
   cache.set(key, svg)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.0-beta.16",
+  "version": "0.48.0-beta.18",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -39,7 +39,6 @@
     "@vueuse/math": "^10.8.0",
     "@vueuse/motion": "^2.1.0",
     "codemirror": "^5.65.16",
-    "defu": "^6.1.4",
     "drauu": "^0.4.0",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
@@ -49,17 +48,15 @@
     "lz-string": "^1.5.0",
     "mermaid": "^10.8.0",
     "monaco-editor": "^0.46.0",
-    "nanoid": "^5.0.6",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
-    "resolve": "^1.22.8",
     "shiki": "^1.1.7",
     "shiki-magic-move": "^0.1.0",
     "unocss": "^0.58.5",
     "vue": "^3.4.20",
     "vue-router": "^4.3.0",
-    "@slidev/parser": "0.48.0-beta.16",
-    "@slidev/types": "0.48.0-beta.16"
+    "@slidev/types": "0.48.0-beta.18",
+    "@slidev/parser": "0.48.0-beta.18"
   },
   "devDependencies": {
     "vite": "^5.1.4"

package/pages/overview.vue

@@ -3,7 +3,7 @@ import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useHead } from '@unhead/vue'
 import type { RouteRecordRaw } from 'vue-router'
 import type { ClicksContext } from 'packages/types'
-import { configs, themeVars } from '../env'
+import { configs } from '../env'
 import { openInEditor, rawRoutes } from '../logic/nav'
 import { useFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
@@ -13,7 +13,7 @@ import SlideWrapper from '../internals/SlideWrapper'
 import DrawingPreview from '../internals/DrawingPreview.vue'
 import IconButton from '../internals/IconButton.vue'
 import NoteEditable from '../internals/NoteEditable.vue'
-import OverviewClicksSlider from '../internals/OverviewClicksSlider.vue'
+import ClicksSlider from '../internals/ClicksSlider.vue'
 import { CLICKS_MAX } from '../constants'
 
 const cardWidth = 450
@@ -164,7 +164,6 @@ onMounted(() => {
         <div class="flex flex-col gap-2 my5">
           <div
             class="border rounded border-main overflow-hidden bg-main select-none h-max"
-            :style="themeVars"
             @dblclick="openSlideInNewTab(route.path)"
           >
             <SlideContainer
@@ -184,7 +183,7 @@ onMounted(() => {
               <DrawingPreview :page="+route.path" />
             </SlideContainer>
           </div>
-          <OverviewClicksSlider
+          <ClicksSlider
             v-if="getSlideClicks(route)"
             mt-2
             :clicks-context="getClicksContext(route)"

package/pages/play.vue

@@ -4,7 +4,7 @@ import { isEditorVertical, isScreenVertical, showEditor, slideScale, windowSize
 import { isEmbedded, isPrintMode, next, prev, useSwipeControls } from '../logic/nav'
 import { isDrawing } from '../logic/drawings'
 import { registerShortcuts } from '../logic/shortcuts'
-import { configs, themeVars } from '../env'
+import { configs } from '../env'
 import Controls from '../internals/Controls.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
@@ -42,7 +42,10 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 
 <template>
   <PrintStyle v-if="isPrintMode" />
-  <div id="page-root" ref="root" class="grid" :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'" :style="themeVars">
+  <div
+    id="page-root" ref="root" class="grid"
+    :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'"
+  >
     <SlideContainer
       class="w-full h-full"
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"

package/pages/presenter/print.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { useStyleTag } from '@vueuse/core'
 import { useHead } from '@unhead/vue'
-import { configs, themeVars } from '../../env'
+import { configs } from '../../env'
 import { rawRoutes, total } from '../../logic/nav'
 import NoteDisplay from '../../internals/NoteDisplay.vue'
 
@@ -34,7 +34,7 @@ const slidesWithNote = computed(() => rawRoutes
 </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">

package/pages/presenter.vue

@@ -4,13 +4,13 @@ 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 { 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 { useFixedClicks, usePrimaryClicks } from '../composables/useClicks'
 import SlideWrapper from '../internals/SlideWrapper'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
@@ -21,6 +21,7 @@ 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'
 
 const main = ref<HTMLDivElement>()
 
@@ -93,20 +94,25 @@ onMounted(() => {
 <template>
   <div class="bg-main h-full slidev-presenter">
     <div class="grid-container" :class="`layout${presenterLayout}`">
-      <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>
+        <ClicksSlider
+          :key="currentRoute?.path"
+          :clicks-context="usePrimaryClicks(currentRoute)"
+          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"
@@ -182,7 +188,7 @@ onMounted(() => {
     </div>
     <div class="progress-bar">
       <div
-        class="progress h-2px bg-primary transition-all"
+        class="progress h-3px bg-primary transition-all"
         :style="{ width: `${(currentPage - 1) / (total - 1) * 100}%` }"
       />
     </div>
@@ -257,7 +263,7 @@ onMounted(() => {
 }
 
 .progress-bar {
-  --uno: fixed left-0 right-0 bottom-0;
+  --uno: fixed left-0 right-0 top-0;
 }
 
 .grid-section {

package/pages/print.vue

@@ -2,7 +2,6 @@
 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'
 
@@ -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/setup/codemirror.ts

@@ -1,7 +1,7 @@
 import type { Ref, WritableComputedRef } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 import { watch } from 'vue'
-import * as _CodeMirror from 'codemirror'
+import { fromTextArea } from 'codemirror'
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/mode/css/css'
 import 'codemirror/mode/markdown/markdown'
@@ -10,14 +10,12 @@ 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>,
   options: CodeMirror.EditorConfiguration = {},
 ) {
-  const cm = CodeMirror.fromTextArea(
+  const cm = fromTextArea(
     textarea.value!,
     {
       theme: 'vars',

package/setup/monaco.ts

@@ -24,7 +24,6 @@ import { isDark } from '../logic/dark'
 import configs from '#slidev/configs'
 
 /* __imports__ */
-
 window.MonacoEnvironment = {
   getWorker(_, label) {
     if (label === 'json')

package/composables/useTweetScript.ts

@@ -1,17 +0,0 @@
-import { createSharedComposable, useScriptTag } from '@vueuse/core'
-import type { ComponentInternalInstance } from 'vue'
-import { onMounted } from 'vue'
-
-export const useTweetScript = createSharedComposable(
-  (vm: ComponentInternalInstance, create: () => void) =>
-    useScriptTag(
-      'https://platform.twitter.com/widgets.js',
-      () => {
-        if (vm.isMounted)
-          create()
-        else
-          onMounted(create, vm)
-      },
-      { async: true },
-    ),
-)