@slidev/client 0.37.0 → 0.38.0

package/builtin/Monaco.vue

@@ -12,7 +12,7 @@ Learn more: https://sli.dev/guide/syntax.html#monaco-editor
 -->
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { decode } from 'js-base64'
 import { nanoid } from 'nanoid'
@@ -40,7 +40,6 @@ const id = nanoid()
 const code = ref(decode(props.code).trimEnd())
 const lineHeight = +(getComputedStyle(document.body).getPropertyValue('--slidev-code-line-height') || '18').replace('px', '') || 18
 const height = computed(() => props.height === 'auto' ? `${code.value.split(/\r?\n/g).length * lineHeight + 20}px` : props.height)
-const isReady = ref(false)
 
 const iframe = ref<HTMLIFrameElement>()
 
@@ -79,11 +78,6 @@ onMounted(() => {
     : `${import.meta.env.BASE_URL}iframes/monaco/index.html`
 
   frame.style.backgroundColor = 'transparent'
-
-  frame.addEventListener('load', () => {
-    postCode()
-    isReady.value = true
-  }, { once: true })
 })
 
 function post(payload: any) {
@@ -96,38 +90,27 @@ function post(payload: any) {
   )
 }
 
-function postCode() {
-  post({
-    code: code.value,
-    lang: props.lang,
-  })
-}
-
-function postStyle() {
-  if (!iframe.value)
-    return
-  post({
-    id,
-    readonly: props.readonly,
-    lineNumbers: props.lineNumbers,
-    dark: isDark.value,
-    style: Object.entries(getStyleObject(iframe.value)).map(([k, v]) => `${k}: ${v};`).join(''),
-  })
-}
-
 useEventListener(window, 'message', ({ data: payload }) => {
+  if (payload.type === 'slidev-monaco-loaded') {
+    if (iframe.value) {
+      post({
+        code: code.value,
+        lang: props.lang,
+        id,
+        readonly: props.readonly,
+        lineNumbers: props.lineNumbers,
+        dark: isDark.value,
+        style: Object.entries(getStyleObject(iframe.value)).map(([k, v]) => `${k}: ${v};`).join(''),
+      })
+    }
+    return
+  }
   if (payload.type !== 'slidev-monaco' || payload.id !== id)
     return
   if (!payload?.data?.code || code.value === payload.data.code)
     return
   code.value = payload.data.code
 })
-
-watchEffect(() => {
-  if (!isReady.value)
-    return
-  postStyle()
-})
 </script>
 
 <template>

package/composables/useNav.ts

@@ -5,7 +5,7 @@ import type { TocItem } from '../logic/nav'
 import { addToTree, filterTree, getPath, getTreeWithActiveStatuses } from '../logic/nav'
 import { rawRoutes } from '../routes'
 
-export function useNav(route: ComputedRef<RouteLocationNormalizedLoaded>) {
+export function useNav(route: ComputedRef<RouteRecordRaw | RouteLocationNormalizedLoaded>) {
   const path = computed(() => route.value.path)
   const total = computed(() => rawRoutes.length - 1)
 

package/iframes/monaco/index.ts

@@ -18,7 +18,7 @@ const props = {
 
 const styleObject = document.createElement('style')
 let editor: monaco.editor.IStandaloneCodeEditor
-let update: () => void = () => {}
+let update: () => void = () => { }
 
 document.body.appendChild(styleObject)
 
@@ -146,4 +146,6 @@ window.addEventListener('message', (payload) => {
   }
 })
 
+window.parent.postMessage({ type: 'slidev-monaco-loaded' }, location.origin)
+
 start()

package/internals/Presenter.vue

@@ -111,7 +111,7 @@ onMounted(() => {
           current
         </div>
       </div>
-      <div class="relative grid-section next flex flex-col p-2 lg:p-4">
+      <div class="relative grid-section next flex flex-col p-2 lg:p-4" :style="themeVars">
         <SlideContainer
           v-if="nextSlide"
           key="next"

package/internals/PrintSlideClick.vue

@@ -49,7 +49,7 @@ provide(injectionSlidevContext, reactive({
     <GlobalBottom />
 
     <SlideWrapper
-      :is="route?.component"
+      :is="route?.component!"
       v-model:clicks-elements="clicksElements"
       :clicks="clicks"
       :clicks-disabled="false"

package/internals/SlidesOverview.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
 import { computed, watchEffect } from 'vue'
+import { themeVars } from '../env'
 import { breakpoints, windowSize } from '../state'
 import { currentPage, go as goSlide, rawRoutes } from '../logic/nav'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
@@ -72,6 +73,7 @@ watchEffect(() => {
         <div
           class="inline-block border border-gray-400 rounded border-opacity-50 overflow-hidden bg-main hover:border-$slidev-theme-primary"
           :class="{ 'border-$slidev-theme-primary': focus(idx + 1) }"
+          :style="themeVars"
           @click="go(+route.path)"
         >
           <SlideContainer

package/layouts/iframe-left.vue

@@ -1,14 +1,25 @@
 <script setup lang="ts">
-const props = defineProps<{ class?: string; url: string }>()
+import { computed } from '@vue/reactivity'
+
+const props = defineProps<{
+  url: string
+  scale?: number
+}>()
+
+const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
 </script>
 
 <template>
   <div class="grid grid-cols-2 w-full h-full">
-    <div class="h-full">
-      <iframe id="frame" class="w-full h-full" :src="url" />
-    </div>
-    <div class="slidev-layout default" :class="props.class">
-      <slot />
+    <div relative :style="{ width: scaleInvertPercent, height: scaleInvertPercent }">
+      <iframe
+        id="frame" class="w-full h-full"
+        :src="url"
+        :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
+      />
+      <div class="slidev-layout default" :class="props.class">
+        <slot />
+      </div>
     </div>
   </div>
 </template>

package/layouts/iframe-right.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-const props = defineProps<{ class?: string; url: string }>()
+import { computed } from '@vue/reactivity'
+
+const props = defineProps<{
+  url: string
+  scale?: number
+}>()
+
+const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
 </script>
 
 <template>
@@ -7,8 +14,12 @@ const props = defineProps<{ class?: string; url: string }>()
     <div class="slidev-layout default" :class="props.class">
       <slot />
     </div>
-    <div class="h-full">
-      <iframe id="frame" class="w-full h-full" :src="url" />
+    <div relative :style="{ width: scaleInvertPercent, height: scaleInvertPercent }">
+      <iframe
+        id="frame" class="w-full h-full"
+        :src="url"
+        :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
+      />
     </div>
   </div>
 </template>

package/layouts/iframe.vue

@@ -20,4 +20,3 @@ const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
     </div>
   </div>
 </template>
-

package/modules/mermaid.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/default */
 import mermaid from 'mermaid/dist/mermaid'
 import { customAlphabet } from 'nanoid'
 import { decode } from 'js-base64'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -15,35 +15,35 @@
     "node": ">=14.0.0"
   },
   "dependencies": {
-    "@antfu/utils": "^0.6.3",
-    "@slidev/parser": "0.37.0",
-    "@slidev/types": "0.37.0",
-    "@unocss/reset": "^0.46.3",
-    "@vueuse/core": "^9.5.0",
-    "@vueuse/head": "^0.9.8",
-    "@vueuse/math": "^9.5.0",
-    "@vueuse/motion": "^2.0.0-beta.24",
+    "@antfu/utils": "^0.7.2",
+    "@unocss/reset": "^0.47.6",
+    "@vueuse/core": "^9.6.0",
+    "@vueuse/head": "^1.0.22",
+    "@vueuse/math": "^9.6.0",
+    "@vueuse/motion": "^2.0.0-beta.26",
     "codemirror": "^5.65.5",
-    "defu": "^6.1.0",
+    "defu": "^6.1.1",
     "drauu": "^0.3.2",
     "file-saver": "^2.0.5",
-    "js-base64": "^3.7.2",
+    "js-base64": "^3.7.3",
     "js-yaml": "^4.1.0",
-    "katex": "^0.16.3",
-    "mermaid": "^9.2.1",
+    "katex": "^0.16.4",
+    "mermaid": "^9.2.2",
     "monaco-editor": "^0.33.0",
     "nanoid": "^4.0.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.1",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.1",
-    "unocss": "^0.46.3",
-    "vite-plugin-windicss": "^1.8.8",
-    "vue": "^3.2.42",
+    "unocss": "^0.47.6",
+    "vite-plugin-windicss": "^1.8.9",
+    "vue": "^3.2.45",
     "vue-router": "^4.1.6",
     "vue-starport": "^0.3.0",
-    "windicss": "^3.5.6"
+    "windicss": "^3.5.6",
+    "@slidev/parser": "0.38.0",
+    "@slidev/types": "0.38.0"
   },
   "devDependencies": {
-    "vite": "^3.2.3"
+    "vite": "^4.0.1"
   }
 }

package/setup/shortcuts.ts

@@ -48,7 +48,14 @@ export default function setupShortcuts() {
     { name: 'prev_overview', key: and(left, showOverview), fn: prevOverviewPage },
     { name: 'up_overview', key: and(up, showOverview), fn: upOverviewPage },
     { name: 'down_overview', key: and(down, showOverview), fn: downOverviewPage },
-    { name: 'goto_from_overview', key: and(enter, showOverview), fn: () => { go(currentOverviewPage.value); showOverview.value = false } },
+    {
+      name: 'goto_from_overview',
+      key: and(enter, showOverview),
+      fn: () => {
+        go(currentOverviewPage.value)
+        showOverview.value = false
+      },
+    },
   ]
 
   const baseShortcutNames = new Set(injection_return.map(s => s.name))