feat: rewrite VSCode extension

.github/workflows/release.yml

@@ -19,12 +19,19 @@ jobs:
         with:
           node-version: lts/*
           registry-url: https://registry.npmjs.org/
+      - run: npx changelogithub
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
       - run: npm i -g @antfu/ni
       - run: nci
       - run: nr ci:publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
           NPM_CONFIG_PROVENANCE: true
-      - run: npx changelogithub
+
+      - name: Publish to VSCE & OVSX
+        run: npm run publish
+        working-directory: ./packages/vscode
         env:
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          VSCE_TOKEN: ${{secrets.VSCE_TOKEN}}
+          OVSX_TOKEN: ${{secrets.OVSX_TOKEN}}

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}/packages/vscode"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/out/**/*.js"
+      ]
+    }
+  ]
+}

.vscode/settings.json

@@ -45,5 +45,6 @@
     "json",
     "jsonc",
     "yaml"
-  ]
+  ],
+  "vitest.disableWorkspaceWarning": true
 }

demo/starter/package.json

@@ -12,6 +12,6 @@
     "@slidev/theme-default": "^0.25.0",
     "@slidev/theme-seriph": "^0.25.0",
     "nodemon": "^3.1.0",
-    "vue": "^3.4.26"
+    "vue": "^3.4.27"
   }
 }

demo/starter/pages/multiple-entries.md

@@ -10,8 +10,8 @@ You can split your slides.md into multiple files and organize them as you want u
 Page 2 from main entry.
 
 ---
-src: ./subpage.md
----
+
+## src: ./subpage.md
 ```
 
 <br>

demo/vue-runner/package.json

@@ -10,8 +10,8 @@
     "@slidev/cli": "workspace:*",
     "@slidev/theme-default": "^0.25.0",
     "@slidev/theme-seriph": "^0.25.0",
-    "@vue/compiler-sfc": "^3.4.26",
+    "@vue/compiler-sfc": "^3.4.27",
     "nodemon": "^3.1.0",
-    "vue": "^3.4.26"
+    "vue": "^3.4.27"
   }
 }

docs/package.json

@@ -2,30 +2,30 @@
   "name": "docs",
   "type": "module",
   "private": true,
-  "packageManager": "pnpm@9.0.6",
+  "packageManager": "pnpm@9.1.0",
   "scripts": {
     "dev": "vitepress",
     "build": "vitepress build",
     "postinstall": "node .vitepress/scripts/prepare.js"
   },
   "dependencies": {
-    "@antfu/utils": "^0.7.7",
+    "@antfu/utils": "^0.7.8",
     "@vueuse/core": "^10.9.0",
     "typeit": "^8.8.3"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.206",
-    "@shikijs/vitepress-twoslash": "^1.4.0",
+    "@iconify/json": "^2.2.208",
+    "@shikijs/vitepress-twoslash": "^1.5.1",
     "@slidev/client": "0.34.3",
     "@slidev/parser": "0.34.3",
     "@slidev/theme-default": "0.21.2",
     "@slidev/types": "0.34.3",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.12.8",
+    "@types/node": "^20.12.11",
     "@unocss/reset": "^0.59.4",
     "fs-extra": "^11.2.0",
     "markdown-it": "^14.1.0",
-    "shiki": "^1.4.0",
+    "shiki": "^1.5.1",
     "typescript": "^5.4.5",
     "unocss": "^0.59.4",
     "unplugin-icons": "^0.19.0",

package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "version": "0.49.0-beta.6",
   "private": true,
-  "packageManager": "pnpm@9.0.6",
+  "packageManager": "pnpm@9.1.0",
   "engines": {
     "node": ">=18.0.0"
   },
@@ -26,10 +26,10 @@
     "test": "vitest test"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.16.1",
+    "@antfu/eslint-config": "^2.17.0",
     "@antfu/ni": "^0.21.12",
-    "@antfu/utils": "^0.7.7",
-    "@shikijs/markdown-it": "^1.4.0",
+    "@antfu/utils": "^0.7.8",
+    "@shikijs/markdown-it": "^1.5.1",
     "@slidev/cli": "workspace:*",
     "@slidev/parser": "workspace:*",
     "@slidev/types": "workspace:*",
@@ -42,8 +42,8 @@
     "@types/js-yaml": "^4.0.9",
     "@types/katex": "^0.16.7",
     "@types/markdown-it": "^14.1.1",
-    "@types/node": "^20.12.8",
-    "@types/prismjs": "^1.26.3",
+    "@types/node": "^20.12.11",
+    "@types/prismjs": "^1.26.4",
     "@types/prompts": "^2.4.9",
     "@types/recordrtc": "^5.6.14",
     "@types/resolve": "^1.20.6",
@@ -52,25 +52,25 @@
     "@vueuse/core": "^10.9.0",
     "bumpp": "^9.4.1",
     "cross-env": "^7.0.3",
-    "cypress": "^13.8.1",
+    "cypress": "^13.9.0",
     "eslint": "^9.2.0",
     "eslint-plugin-format": "^0.1.1",
     "esno": "^4.7.0",
     "katex": "^0.16.10",
     "lint-staged": "^15.2.2",
     "mermaid": "^10.9.0",
-    "playwright-chromium": "^1.43.1",
-    "pnpm": "^9.0.6",
+    "playwright-chromium": "^1.44.0",
+    "pnpm": "^9.1.0",
     "prettier-plugin-slidev": "^1.0.5",
     "rimraf": "^5.0.5",
-    "shiki": "^1.4.0",
+    "shiki": "^1.5.1",
     "simple-git-hooks": "^2.11.1",
     "taze": "^0.13.8",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5",
     "vite": "^5.2.11",
     "vitest": "^1.6.0",
-    "vue-tsc": "^2.0.16",
+    "vue-tsc": "^2.0.17",
     "zx": "^8.0.2"
   },
   "pnpm": {

packages/client/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,
+      },
+    )
+  }
+}

packages/client/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,
         },
       })
     }

packages/client/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()

packages/client/package.json

@@ -28,17 +28,17 @@
     "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/parser": "workspace:*",
     "@slidev/rough-notation": "^0.1.0",
     "@slidev/types": "workspace:*",
     "@typescript/ata": "^0.9.4",
-    "@unhead/vue": "^1.9.9",
+    "@unhead/vue": "^1.9.10",
     "@unocss/reset": "^0.59.4",
     "@vueuse/core": "^10.9.0",
     "@vueuse/math": "^10.9.0",
@@ -54,11 +54,11 @@
     "monaco-editor": "^0.48.0",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.4.0",
-    "shiki-magic-move": "^0.4.0",
+    "shiki": "^1.5.1",
+    "shiki-magic-move": "^0.4.2",
     "typescript": "^5.4.5",
     "unocss": "^0.59.4",
-    "vue": "^3.4.26",
+    "vue": "^3.4.27",
     "vue-router": "^4.3.2",
     "yaml": "^2.4.2"
   },