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

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/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/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/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.17",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -58,8 +58,8 @@
     "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/parser": "0.48.0-beta.17",
+    "@slidev/types": "0.48.0-beta.17"
   },
   "devDependencies": {
     "vite": "^5.1.4"

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 },
-    ),
-)