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

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/Arrow.vue

@@ -9,7 +9,7 @@ Simple Arrow
 -->
 
 <script setup lang="ts">
-import { customAlphabet } from 'nanoid'
+import { makeId } from '../logic/utils'
 
 defineProps<{
   x1: number | string
@@ -20,9 +20,7 @@ defineProps<{
   color?: string
 }>()
 
-const nanoid = customAlphabet('abcedfghijklmn', 10)
-
-const id = nanoid()
+const id = makeId()
 </script>
 
 <template>

package/builtin/CodeBlockWrapper.vue

@@ -14,11 +14,12 @@ Learn more: https://sli.dev/guide/syntax.html#line-highlighting
 <script setup lang="ts">
 import { parseRangeString } from '@slidev/parser/core'
 import { useClipboard } from '@vueuse/core'
-import { computed, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import { configs } from '../env'
 import { makeId } from '../logic/utils'
-import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, injectionClicksContext } from '../constants'
+import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET } from '../constants'
+import { useSlideContext } from '../context'
 
 const props = defineProps({
   ranges: {
@@ -47,7 +48,7 @@ const props = defineProps({
   },
 })
 
-const clicks = inject(injectionClicksContext)?.value
+const { $clicksContext: clicks } = useSlideContext()
 const el = ref<HTMLDivElement>()
 const id = makeId()
 
@@ -55,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)
@@ -120,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

@@ -20,11 +20,12 @@ Learn more: https://sli.dev/guide/syntax.html#latex-line-highlighting
 -->
 
 <script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import { parseRangeString } from '@slidev/parser'
-import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, injectionClicksContext } from '../constants'
+import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET } from '../constants'
 import { makeId } from '../logic/utils'
+import { useSlideContext } from '../context'
 
 const props = defineProps({
   ranges: {
@@ -45,7 +46,7 @@ const props = defineProps({
   },
 })
 
-const clicks = inject(injectionClicksContext)?.value
+const { $clicksContext: clicks } = useSlideContext()
 const el = ref<HTMLDivElement>()
 const id = makeId()
 
@@ -54,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

@@ -19,7 +19,7 @@ import ShadowRoot from '../internals/ShadowRoot.vue'
 import { isDark } from '../logic/dark'
 
 const props = defineProps<{
-  code: string
+  codeLz: string
   scale?: number
   theme?: string
 }>()
@@ -37,7 +37,7 @@ watchEffect(async (onCleanup) => {
   error.value = null
   try {
     const svg = await renderMermaid(
-      props.code || '',
+      props.codeLz || '',
       {
         theme: props.theme || (isDark.value ? 'dark' : undefined),
         ...vm!.attrs,
@@ -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,122 +12,139 @@ Learn more: https://sli.dev/guide/syntax.html#monaco-editor
 -->
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useEventListener } from '@vueuse/core'
-import { decode } from 'js-base64'
-import { nanoid } from 'nanoid'
 import type * as monaco from 'monaco-editor'
-import { isDark } from '../logic/dark'
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { debounce } from '@antfu/utils'
+import lz from 'lz-string'
+import { makeId } from '../logic/utils'
 
 const props = withDefaults(defineProps<{
-  code: string
-  diff?: string
+  codeLz: string
+  diffLz?: string
   lang?: string
   readonly?: boolean
   lineNumbers?: 'on' | 'off' | 'relative' | 'interval'
-  height?: number | string
+  height?: number | string // Posible values: 'initial', 'auto', '100%', '200px', etc.
   editorOptions?: monaco.editor.IEditorOptions
+  ata?: boolean
 }>(), {
-  code: '',
+  codeLz: '',
   lang: 'typescript',
   readonly: false,
   lineNumbers: 'off',
-  height: 'auto',
+  height: 'initial',
+  ata: true,
 })
 
-const id = nanoid()
-const code = ref(decode(props.code).trimEnd())
-const diff = ref(props.diff ? decode(props.diff).trimEnd() : null)
-const lineHeight = +(getComputedStyle(document.body).getPropertyValue('--slidev-code-line-height') || '18').replace('px', '') || 18
-const editorHeight = ref(0)
-const calculatedHeight = computed(() => code.value.split(/\r?\n/g).length * lineHeight)
-const height = computed(() => {
-  return props.height === 'auto' ? `${Math.max(calculatedHeight.value, editorHeight.value) + 20}px` : props.height
-})
-
-const iframe = ref<HTMLIFrameElement>()
+const code = lz.decompressFromBase64(props.codeLz).trimEnd()
+const diff = props.diffLz && lz.decompressFromBase64(props.diffLz).trimEnd()
 
-const cssVars = [
-  '--slidev-code-font-size',
-  '--slidev-code-font-family',
-  '--slidev-code-background',
-  '--slidev-code-line-height',
-  '--slidev-code-padding',
-  '--slidev-code-margin',
-  '--slidev-code-radius',
-]
-
-function getStyleObject(el: Element) {
-  const object: Record<string, string> = {}
-  const style = getComputedStyle(el)
-  for (const v of cssVars)
-    object[v] = style.getPropertyValue(v)
-  return object
+const langMap: Record<string, string> = {
+  ts: 'typescript',
+  js: 'javascript',
 }
+const lang = langMap[props.lang] ?? props.lang
+const extMap: Record<string, string> = {
+  typescript: 'mts',
+  javascript: 'mjs',
+  ts: 'mts',
+  js: 'mjs',
+}
+const ext = extMap[props.lang] ?? props.lang
 
-onMounted(() => {
-  const frame = iframe.value!
-  frame.setAttribute('sandbox', [
-    'allow-forms',
-    'allow-modals',
-    'allow-pointer-lock',
-    'allow-popups',
-    'allow-same-origin',
-    'allow-scripts',
-    'allow-top-navigation-by-user-activation',
-  ].join(' '))
-
-  let src = __DEV__
-    ? `${location.origin}${__SLIDEV_CLIENT_ROOT__}/`
-    : import.meta.env.BASE_URL
-  src += `iframes/monaco/index.html?id=${id}&lineNumbers=${props.lineNumbers}&lang=${props.lang}`
-  if (diff.value)
-    src += '&diff=1'
-  frame.src = src
+const outer = ref<HTMLDivElement>()
+const container = ref<HTMLDivElement>()
 
-  frame.style.backgroundColor = 'transparent'
+const contentHeight = ref(0)
+const initialHeight = ref<number>()
+const height = computed(() => {
+  if (props.height === 'auto')
+    return `${contentHeight.value}px`
+  if (props.height === 'initial')
+    return `${initialHeight.value}px`
+  return props.height
 })
 
-function post(payload: any) {
-  iframe.value?.contentWindow?.postMessage(
-    JSON.stringify({
-      type: 'slidev-monaco',
-      data: payload,
-      id,
-    }),
-    location.origin,
-  )
-}
+onMounted(async () => {
+  // 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,
+    readOnly: props.readonly,
+    lineNumbers: props.lineNumbers,
+    minimap: { enabled: false },
+    overviewRulerBorder: false,
+    overviewRulerLanes: 0,
+    padding: { top: 10, bottom: 10 },
+    lineNumbersMinChars: 3,
+    bracketPairColorization: { enabled: false },
+    tabSize: 2,
+    fontSize: 11.5,
+    fontFamily: 'var(--slidev-code-font-family)',
+    scrollBeyondLastLine: false,
+    ...props.editorOptions,
+  } satisfies monaco.editor.IStandaloneEditorConstructionOptions & monaco.editor.IDiffEditorConstructionOptions
 
-useEventListener(window, 'message', ({ data: payload }) => {
-  if (payload.id !== id)
-    return
-  if (payload.type === 'slidev-monaco-loaded') {
-    if (iframe.value) {
-      post({
-        code: code.value,
-        diff: diff.value,
-        lang: props.lang,
-        readonly: props.readonly,
-        lineNumbers: props.lineNumbers,
-        editorOptions: props.editorOptions,
-        dark: isDark.value,
-        style: Object.entries(getStyleObject(iframe.value)).map(([k, v]) => `${k}: ${v};`).join(''),
-      })
+  let editableEditor: monaco.editor.IStandaloneCodeEditor
+  if (diff) {
+    const diffModel = monaco.editor.createModel(diff, lang, monaco.Uri.parse(`file:///${makeId()}.${ext}`))
+    const editor = monaco.editor.createDiffEditor(container.value!, {
+      renderOverviewRuler: false,
+      ...commonOptions,
+    })
+    editor.setModel({
+      original: model,
+      modified: diffModel,
+    })
+    const originalEditor = editor.getOriginalEditor()
+    const modifiedEditor = editor.getModifiedEditor()
+    const onContentSizeChange = () => {
+      const newHeight = Math.max(originalEditor.getContentHeight(), modifiedEditor.getContentHeight()) + 4
+      initialHeight.value ??= newHeight
+      contentHeight.value = newHeight
+      nextTick(() => editor.layout())
+    }
+    originalEditor.onDidContentSizeChange(onContentSizeChange)
+    modifiedEditor.onDidContentSizeChange(onContentSizeChange)
+    editableEditor = modifiedEditor
+  }
+  else {
+    const editor = monaco.editor.create(container.value!, {
+      model,
+      lineDecorationsWidth: 0,
+      ...commonOptions,
+    })
+    editor.onDidContentSizeChange((e) => {
+      const newHeight = e.contentHeight + 4
+      initialHeight.value ??= newHeight
+      contentHeight.value = newHeight
+      nextTick(() => editableEditor.layout())
+    })
+    editableEditor = editor
+  }
+  if (props.ata) {
+    ata(editableEditor.getValue())
+    editableEditor.onDidChangeModelContent(debounce(1000, () => {
+      ata(editableEditor.getValue())
+    }))
+  }
+  const originalLayoutContentWidget = editableEditor.layoutContentWidget.bind(editableEditor)
+  editableEditor.layoutContentWidget = (widget: any) => {
+    originalLayoutContentWidget(widget)
+    const id = widget.getId()
+    if (id === 'editor.contrib.resizableContentHoverWidget') {
+      widget._resizableNode.domNode.style.transform = widget._positionPreference === 1
+        ? /* ABOVE */ `translateY(calc(100% * (var(--slidev-slide-scale) - 1)))`
+        : /* BELOW */ `` // reset
     }
-    return
   }
-  if (payload.type !== 'slidev-monaco')
-    return
-  if (payload.data?.height)
-    editorHeight.value = payload.data?.height
-  if (payload?.data?.code && code.value !== payload.data.code)
-    code.value = payload.data.code
-  if (payload?.data?.diff && diff.value !== payload.data.diff)
-    diff.value = payload.data.diff
 })
 </script>
 
 <template>
-  <iframe ref="iframe" class="text-base w-full rounded" :style="{ height }" />
+  <div ref="outer" class="slidev-monaco-container" :style="{ height }">
+    <div ref="container" class="absolute inset-0.5" />
+  </div>
 </template>

package/builtin/RenderWhen.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { RenderContext } from '@slidev/types'
-import { computed, inject, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useElementVisibility } from '@vueuse/core'
-import { injectionRenderContext } from '../constants'
+import { useSlideContext } from '../context'
 
 type Context = 'main' | 'visible' | RenderContext
 
@@ -16,7 +16,7 @@ const targetVisible = useElementVisibility(target)
 // When context has `visible`, we need to wrap the content with a div to track the visibility
 const needsDomWrapper = Array.isArray(context) ? context.includes('visible') : context === 'visible'
 
-const currentContext = inject(injectionRenderContext)
+const { $renderContext: currentContext } = useSlideContext()
 const shouldRender = computed(() => {
   const anyContext = Array.isArray(context) ? context.some(contextMatch) : contextMatch(context)
   const allConditions = Array.isArray(context) ? context.every(conditionsMatch) : conditionsMatch(context)

package/builtin/ShikiMagicMove.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ShikiMagicMovePrecompiled } from 'shiki-magic-move/vue'
+import type { KeyedTokensInfo } from 'shiki-magic-move/types'
+import { onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import lz from 'lz-string'
+import { useSlideContext } from '../context'
+import { makeId } from '../logic/utils'
+
+import 'shiki-magic-move/style.css'
+
+const props = defineProps<{
+  stepsLz: string
+  at?: string | number
+}>()
+
+const steps = JSON.parse(lz.decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
+const { $clicksContext: clicks, $scale: scale } = useSlideContext()
+const id = makeId()
+const index = ref(0)
+
+onUnmounted(() => {
+  clicks!.unregister(id)
+})
+
+onMounted(() => {
+  if (!clicks || clicks.disabled)
+    return
+
+  const { start, end, delta } = clicks.resolve(props.at || '+1', steps.length - 1)
+  clicks.register(id, { max: end, delta })
+
+  watchEffect(() => {
+    if (clicks.disabled)
+      index.value = steps.length - 1
+    else
+      index.value = Math.min(Math.max(0, clicks.current - start + 1), steps.length - 1)
+  })
+})
+</script>
+
+<template>
+  <div class="slidev-code-wrapper slidev-code-magic-move">
+    <ShikiMagicMovePrecompiled
+      class="slidev-code relative shiki overflow-visible"
+      :steps="steps"
+      :step="index"
+      :options="{ globalScale: scale }"
+    />
+  </div>
+</template>

package/builtin/SlideCurrentNo.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { injectionCurrentPage } from '../constants'
+import { useSlideContext } from '../context'
 
-const $page = inject(injectionCurrentPage)
+const { $page } = useSlideContext()
 </script>
 
 <template>

package/builtin/SlidesTotal.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { injectionSlidevContext } from '../constants'
+import { useSlideContext } from '../context'
 
-const $slidev = inject(injectionSlidevContext)
+const { $nav } = useSlideContext()
 </script>
 
 <template>
-  <span>{{ $slidev.nav.total }}</span>
+  <span>{{ $nav.total }}</span>
 </template>

package/builtin/SlidevVideo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
-import { injectionClicksContext, injectionRenderContext, injectionRoute, injectionSlidevContext } from '../constants'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useSlideContext } from '../context'
 
 const props = defineProps<{
   autoPlay?: boolean | 'once' | 'resume' | 'resumeOnce'
@@ -8,10 +8,12 @@ const props = defineProps<{
   autoReset?: 'slide' | 'click'
 }>()
 
-const $slidev = inject(injectionSlidevContext)
-const route = inject(injectionRoute)
-const currentContext = inject(injectionRenderContext)
-const clicks = inject(injectionClicksContext)?.value
+const {
+  $slidev,
+  $clicksContext: clicks,
+  $renderContext: currentContext,
+  $route: route,
+} = useSlideContext()
 
 const video = ref<HTMLMediaElement>()
 const played = ref(false)

package/builtin/Toc.vue

@@ -8,9 +8,9 @@ Usage:
 <Toc columns='2' maxDepth='3' mode='onlySiblings'/>
 -->
 <script setup lang='ts'>
-import { computed, inject } from 'vue'
+import { computed } from 'vue'
 import type { TocItem } from '@slidev/types'
-import { injectionSlidevContext } from '../constants'
+import { useSlideContext } from '../context'
 
 const props = withDefaults(
   defineProps<{
@@ -33,7 +33,7 @@ const props = withDefaults(
   },
 )
 
-const $slidev = inject(injectionSlidevContext)
+const { $slidev } = useSlideContext()
 
 function filterTreeDepth(tree: TocItem[], level = 1): TocItem[] {
   if (level > Number(props.maxDepth)) {

package/builtin/TocList.vue

@@ -10,7 +10,7 @@ Usage:
 import { computed } from 'vue'
 import { toArray } from '@antfu/utils'
 import type { TocItem } from '@slidev/types'
-import Titles from '/@slidev/titles.md'
+import Titles from '#slidev/titles.md'
 
 const props = withDefaults(defineProps<{
   level: number
@@ -65,7 +65,8 @@ const styles = computed(() => {
 .slidev-layout .slidev-toc-item p {
   margin: 0;
 }
-.slidev-layout .slidev-toc-item div, .slidev-layout .slidev-toc-item div p {
+.slidev-layout .slidev-toc-item div,
+.slidev-layout .slidev-toc-item div p {
   display: initial;
 }
 </style>

package/builtin/Tweet.vue

@@ -7,8 +7,7 @@ Usage:
 -->
 
 <script setup lang="ts">
-import { useScriptTag } from '@vueuse/core'
-import { getCurrentInstance, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { isDark } from '../logic/dark'
 
 const props = defineProps<{
@@ -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,24 +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 {
-  useScriptTag(
-    'https://platform.twitter.com/widgets.js',
-    () => {
-      if (vm.isMounted)
-        create()
-      else
-        onMounted(create, vm)
-    },
-    { async: true },
-  )
-}
+})
 </script>
 
 <template>

package/builtin/VClick.ts

@@ -6,6 +6,7 @@
 
 import type { PropType, VNode } from 'vue'
 import { Text, defineComponent, h } from 'vue'
+import { CLICKS_MAX } from '../constants'
 import VClicks from './VClicks'
 
 export default defineComponent({
@@ -31,7 +32,7 @@ export default defineComponent({
     return h(
       VClicks,
       {
-        every: 99999,
+        every: CLICKS_MAX,
         at: this.at,
         hide: this.hide,
         fade: this.fade,

package/builtin/VClickGap.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Fragment, inject, onMounted, watchEffect } from 'vue'
-import { injectionClicksContext } from '../constants'
+import { Fragment, onMounted, watchEffect } from 'vue'
 import { makeId } from '../logic/utils'
+import { useSlideContext } from '../context'
 
 const props = defineProps({
   size: {
@@ -10,12 +10,10 @@ const props = defineProps({
   },
 })
 
-const clicksRef = inject(injectionClicksContext)
+const { $clicksContext: clicks } = useSlideContext()
 
 onMounted(() => {
   watchEffect((onCleanup) => {
-    const clicks = clicksRef?.value
-
     if (!clicks || clicks.disabled)
       return
 

package/builtin/VClicks.ts

@@ -96,7 +96,7 @@ export default defineComponent({
         if (depth < +this.depth && Array.isArray(i.children))
           vNode = h(i, {}, mapSubList(i.children, depth))
         else
-          vNode = i
+          vNode = h(i)
 
         const delta = thisShowIdx - execIdx
         execIdx = thisShowIdx