@slidev/client 0.49.0-beta.6 → 0.49.0

package/composables/useEmbeddedCtrl.ts

@@ -0,0 +1,56 @@
+import { throttledWatch } from '@vueuse/core'
+import { useNav } from '../composables/useNav'
+import { isDark } from '../logic/dark'
+
+export function useEmbeddedControl() {
+  const nav = useNav()
+  const clientId = `${Date.now()}`
+
+  window.addEventListener('message', ({ data }) => {
+    if (data && data.target === 'slidev') {
+      if (data.type === 'navigate') {
+        if (data.no || data.clicks) {
+          nav.go(+data.no, +data.clicks || 0)
+        }
+        else if (typeof data.operation === 'string') {
+          const fn = nav[data.operation as keyof typeof nav]
+          if (typeof fn === 'function')
+            (fn as any)(...(data.args ?? []))
+        }
+      }
+      else if (data.type === 'css-vars') {
+        const root = document.documentElement
+        for (const [key, value] of Object.entries(data.vars || {}))
+          root.style.setProperty(key, value as any)
+      }
+      else if (data.type === 'color-schema') {
+        isDark.value = data.color === 'dark'
+      }
+    }
+  })
+
+  if (nav.isEmbedded.value) {
+    throttledWatch(
+      [nav.currentSlideNo, nav.clicks, nav.hasNext, nav.hasPrev],
+      ([no, clicks, hasNext, hasPrev]) => {
+        window.parent.postMessage(
+          {
+            target: 'slidev',
+            clientId,
+            navState: {
+              no,
+              clicks,
+              hasNext,
+              hasPrev,
+            },
+          },
+          '*',
+        )
+      },
+      {
+        throttle: 300,
+        immediate: true,
+      },
+    )
+  }
+}

package/composables/useNav.ts

@@ -51,11 +51,11 @@ export interface SlidevContextNav {
   /** Go to previous click */
   prev: () => Promise<void>
   /** Go to next slide */
-  nextSlide: () => Promise<void>
+  nextSlide: (lastClicks?: boolean) => Promise<void>
   /** Go to previous slide */
   prevSlide: (lastClicks?: boolean) => Promise<void>
   /** Go to slide */
-  go: (page: number | string, clicks?: number, force?: boolean) => Promise<void>
+  go: (no: number | string, clicks?: number, force?: boolean) => Promise<void>
   /** Go to the first slide */
   goFirst: () => Promise<void>
   /** Go to the last slide */
@@ -86,7 +86,7 @@ export interface SlidevContextNavState {
   getPrimaryClicks: (route: SlideRoute) => ClicksContext
 }
 
-export interface SlidevContextNavFull extends SlidevContextNav, SlidevContextNavState {}
+export interface SlidevContextNavFull extends SlidevContextNav, SlidevContextNavState { }
 
 export function useNavBase(
   currentSlideRoute: ComputedRef<SlideRoute>,
@@ -149,27 +149,24 @@ export function useNavBase(
   async function prev() {
     clicksDirection.value = -1
     if (queryClicks.value <= clicksStart.value)
-      await prevSlide()
+      await prevSlide(true)
     else
       queryClicks.value -= 1
   }
 
-  async function nextSlide() {
+  async function nextSlide(lastClicks = false) {
     clicksDirection.value = 1
-    if (currentSlideNo.value < slides.value.length)
-      await go(currentSlideNo.value + 1)
+    await go(
+      Math.min(currentSlideNo.value + 1, slides.value.length),
+      lastClicks && !isPrint.value ? CLICKS_MAX : undefined,
+    )
   }
 
-  async function prevSlide(lastClicks = true) {
+  async function prevSlide(lastClicks = false) {
     clicksDirection.value = -1
-    const next = Math.max(1, currentSlideNo.value - 1)
     await go(
-      next,
-      lastClicks
-        ? isPrint.value
-          ? undefined
-          : getSlide(next)?.meta.__clicksContext?.total ?? CLICKS_MAX
-        : undefined,
+      Math.max(1, currentSlideNo.value - 1),
+      lastClicks && !isPrint.value ? CLICKS_MAX : undefined,
     )
   }
 
@@ -181,19 +178,20 @@ export function useNavBase(
     return go(total.value)
   }
 
-  async function go(page: number | string, clicks: number = 0, force = false) {
+  async function go(no: number | string, clicks: number = 0, force = false) {
     skipTransition.value = false
-    const pageChanged = currentSlideNo.value !== page
+    const pageChanged = currentSlideNo.value !== no
     const clicksChanged = clicks !== queryClicks.value
-    const meta = getSlide(page)?.meta
+    const meta = getSlide(no)?.meta
     const clicksStart = meta?.slide?.frontmatter.clicksStart ?? 0
     clicks = clamp(clicks, clicksStart, meta?.__clicksContext?.total ?? CLICKS_MAX)
     if (force || pageChanged || clicksChanged) {
       await router?.push({
-        path: getSlidePath(page, isPresenter.value),
+        path: getSlidePath(no, isPresenter.value),
         query: {
           ...router.currentRoute.value.query,
           clicks: clicks === 0 ? undefined : clicks.toString(),
+          embedded: location.search.includes('embedded') ? 'true' : undefined,
         },
       })
     }

package/internals/MenuButton.vue

@@ -30,7 +30,7 @@ onClickOutside(el, () => {
     <KeepAlive>
       <div
         v-if="value"
-        class="rounded-md bg-main shadow absolute bottom-10 left-0 z-20"
+        class="rounded-md bg-main text-main shadow absolute bottom-10 left-0 z-20"
         dark:border="~ main"
       >
         <slot name="menu" />

package/logic/contextMenu.ts

@@ -3,6 +3,7 @@ import type { ComputedRef } from 'vue'
 import { shallowRef } from 'vue'
 import setupContextMenu from '../setup/context-menu'
 import { configs, mode } from '../env'
+import { useNav } from '../composables/useNav'
 
 export const currentContextMenu = shallowRef<null | {
   x: number
@@ -28,6 +29,10 @@ export function onContextMenu(ev: MouseEvent) {
   if (ev.shiftKey || ev.defaultPrevented)
     return
 
+  const { isEmbedded } = useNav()
+  if (isEmbedded.value)
+    return
+
   openContextMenu(ev.pageX, ev.pageY)
   ev.preventDefault()
   ev.stopPropagation()

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.49.0-beta.6",
+  "version": "0.49.0",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -28,16 +28,16 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@antfu/utils": "^0.7.7",
+    "@antfu/utils": "^0.7.8",
     "@iconify-json/carbon": "^1.1.32",
-    "@iconify-json/ph": "^1.1.12",
+    "@iconify-json/ph": "^1.1.13",
     "@iconify-json/svg-spinners": "^1.1.2",
-    "@shikijs/monaco": "^1.4.0",
-    "@shikijs/vitepress-twoslash": "^1.4.0",
+    "@shikijs/monaco": "^1.5.1",
+    "@shikijs/vitepress-twoslash": "^1.5.1",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.4",
-    "@unhead/vue": "^1.9.8",
-    "@unocss/reset": "^0.59.4",
+    "@unhead/vue": "^1.9.10",
+    "@unocss/reset": "^0.60.0",
     "@vueuse/core": "^10.9.0",
     "@vueuse/math": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
@@ -52,15 +52,15 @@
     "monaco-editor": "^0.48.0",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.4.0",
-    "shiki-magic-move": "^0.3.7",
+    "shiki": "^1.5.1",
+    "shiki-magic-move": "^0.4.2",
     "typescript": "^5.4.5",
-    "unocss": "^0.59.4",
-    "vue": "^3.4.26",
+    "unocss": "^0.60.0",
+    "vue": "^3.4.27",
     "vue-router": "^4.3.2",
     "yaml": "^2.4.2",
-    "@slidev/parser": "0.49.0-beta.6",
-    "@slidev/types": "0.49.0-beta.6"
+    "@slidev/parser": "0.49.0",
+    "@slidev/types": "0.49.0"
   },
   "devDependencies": {
     "vite": "^5.2.11"

package/setup/root.ts

@@ -9,8 +9,8 @@ import { skipTransition } from '../logic/hmr'
 import { makeId } from '../logic/utils'
 import { getSlidePath } from '../logic/slides'
 import { createFixedClicks } from '../composables/useClicks'
-import { isDark } from '../logic/dark'
 import { useNav } from '../composables/useNav'
+import { useEmbeddedControl } from '../composables/useEmbeddedCtrl'
 import setups from '#slidev/setups/root'
 
 export default function setupRoot() {
@@ -30,21 +30,7 @@ export default function setupRoot() {
   if (__DEV__) {
     // @ts-expect-error expose global
     window.__slidev__ = context
-    window.addEventListener('message', ({ data }) => {
-      if (data && data.target === 'slidev') {
-        if (data.type === 'navigate') {
-          context.nav.go(+data.no, +data.clicks || 0)
-        }
-        else if (data.type === 'css-vars') {
-          const root = document.documentElement
-          for (const [key, value] of Object.entries(data.vars || {}))
-            root.style.setProperty(key, value as any)
-        }
-        else if (data.type === 'color-schema') {
-          isDark.value = data.color === 'dark'
-        }
-      }
-    })
+    useEmbeddedControl()
   }
 
   // User Setups

package/setup/shortcuts.ts

@@ -39,9 +39,9 @@ export default function setupShortcuts() {
     { name: 'next_page_key', key: 'pageDown', fn: next, autoRepeat: true },
     { name: 'prev_page_key', key: 'pageUp', fn: prev, autoRepeat: true },
     { name: 'next_down', key: and(down, navViaArrowKeys), fn: nextSlide, autoRepeat: true },
-    { name: 'prev_up', key: and(up, navViaArrowKeys), fn: () => prevSlide(false), autoRepeat: true },
+    { name: 'prev_up', key: and(up, navViaArrowKeys), fn: prevSlide, autoRepeat: true },
     { name: 'next_shift', key: and(right, shift), fn: nextSlide, autoRepeat: true },
-    { name: 'prev_shift', key: and(left, shift), fn: () => prevSlide(false), autoRepeat: true },
+    { name: 'prev_shift', key: and(left, shift), fn: prevSlide, autoRepeat: true },
     { name: 'toggle_dark', key: and(d, not(drawingEnabled)), fn: toggleDark },
     { name: 'toggle_overview', key: and(or(o, backtick), not(drawingEnabled)), fn: toggleOverview },
     { name: 'hide_overview', key: and(escape, not(drawingEnabled)), fn: () => showOverview.value = false },