feat: support Vite 4

.eslintignore

@@ -3,3 +3,4 @@ node_modules
 public
 !.vitepress
 temp
+demo/**/*.md

demo/composable-vue/package.json

@@ -7,8 +7,8 @@
     "export:clicks": "slidev export --with-clicks"
   },
   "devDependencies": {
-    "@iconify-json/mdi": "^1.1.34",
-    "@iconify-json/ri": "^1.1.3",
+    "@iconify-json/mdi": "^1.1.36",
+    "@iconify-json/ri": "^1.1.4",
     "@slidev/cli": "workspace:*",
     "@slidev/theme-default": "^0.21.2",
     "@slidev/theme-seriph": "^0.21.3",

package.json

@@ -20,9 +20,9 @@
     "test": "vitest test"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.29.4",
-    "@antfu/ni": "^0.18.5",
-    "@antfu/utils": "^0.6.3",
+    "@antfu/eslint-config": "^0.34.0",
+    "@antfu/ni": "^0.18.8",
+    "@antfu/utils": "^0.7.2",
     "@slidev/cli": "workspace:*",
     "@slidev/parser": "workspace:*",
     "@slidev/types": "workspace:*",
@@ -35,35 +35,35 @@
     "@types/js-yaml": "^4.0.5",
     "@types/katex": "^0.14.0",
     "@types/markdown-it": "^12.2.3",
-    "@types/mermaid": "^9.1.0",
-    "@types/node": "^18.11.9",
+    "@types/mermaid": "^9.2.0",
+    "@types/node": "^18.11.13",
     "@types/prettier": "^2.7.1",
     "@types/prismjs": "^1.26.0",
-    "@types/prompts": "^2.4.1",
-    "@types/recordrtc": "^5.6.9",
+    "@types/prompts": "^2.4.2",
+    "@types/recordrtc": "^5.6.10",
     "@types/resolve": "^1.20.2",
     "@types/semver": "^7.3.13",
-    "@types/yargs": "^17.0.13",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@vueuse/core": "^9.5.0",
+    "@types/yargs": "^17.0.17",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@vueuse/core": "^9.6.0",
     "bumpp": "^8.2.1",
     "cross-env": "^7.0.3",
-    "cypress": "^10.10.0",
-    "eslint": "^8.27.0",
+    "cypress": "^12.0.2",
+    "eslint": "^8.29.0",
     "eslint-plugin-cypress": "^2.12.1",
     "esno": "^0.16.3",
-    "katex": "^0.16.3",
-    "lint-staged": "^13.0.3",
-    "mermaid": "^9.2.1",
-    "playwright-chromium": "^1.27.1",
-    "pnpm": "^7.14.2",
+    "katex": "^0.16.4",
+    "lint-staged": "^13.1.0",
+    "mermaid": "^9.2.2",
+    "playwright-chromium": "^1.28.1",
+    "pnpm": "^7.18.2",
     "rimraf": "^3.0.2",
     "simple-git-hooks": "^2.8.1",
     "tsup": "^5.12.9",
-    "typescript": "^4.8.4",
-    "vite": "^3.2.3",
-    "vite-plugin-windicss": "^1.8.8",
-    "vitest": "^0.25.1",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.1",
+    "vite-plugin-windicss": "^1.8.9",
+    "vitest": "^0.25.7",
     "zx": "^7.1.1"
   },
   "simple-git-hooks": {

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

packages/client/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"

packages/client/layouts/iframe-left.vue

@@ -17,10 +17,9 @@ const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
         :src="url"
         :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
       />
-    <div class="slidev-layout default" :class="props.class">
-      <slot />
-    </div>
+      <div class="slidev-layout default" :class="props.class">
+        <slot />
+      </div>
     </div>
   </div>
 </template>
-

packages/client/layouts/iframe-right.vue

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

packages/client/layouts/iframe.vue

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

packages/client/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'

packages/client/package.json

@@ -15,35 +15,35 @@
     "node": ">=14.0.0"
   },
   "dependencies": {
-    "@antfu/utils": "^0.6.3",
+    "@antfu/utils": "^0.7.2",
     "@slidev/parser": "workspace:*",
     "@slidev/types": "workspace:*",
-    "@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",
+    "@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"
   },
   "devDependencies": {
-    "vite": "^3.2.3"
+    "vite": "^4.0.1"
   }
 }

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

packages/slidev/node/plugins/extendConfig.ts

@@ -22,6 +22,7 @@ const EXCLUDE = [
   'mermaid',
   'vite-plugin-windicss',
   'vue-demi',
+  'vue',
 ]
 
 export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
@@ -34,6 +35,7 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
           alias: {
             '@slidev/client/': `${toAtFS(options.clientRoot)}/`,
           },
+          dedupe: ['vue'],
         },
         optimizeDeps: {
           include: [

packages/slidev/node/plugins/markdown-it-katex.ts

@@ -106,7 +106,10 @@ function math_inline(state: any, silent: boolean) {
 }
 
 function math_block(state: any, start: number, end: number, silent: boolean) {
-  let firstLine; let lastLine; let next; let lastPos
+  let firstLine
+  let lastLine
+  let next
+  let lastPos
   let found = false
   let pos = state.bMarks[start] + state.tShift[start]
   let max = state.eMarks[start]

packages/slidev/package.json

@@ -48,27 +48,27 @@
     }
   },
   "dependencies": {
-    "@antfu/utils": "^0.6.3",
+    "@antfu/utils": "^0.7.2",
     "@hedgedoc/markdown-it-task-lists": "^2.0.1",
-    "@iconify-json/carbon": "^1.1.9",
-    "@iconify-json/ph": "^1.1.2",
+    "@iconify-json/carbon": "^1.1.11",
+    "@iconify-json/ph": "^1.1.3",
     "@lillallol/outline-pdf": "^4.0.0",
     "@slidev/client": "workspace:*",
     "@slidev/parser": "workspace:*",
     "@slidev/types": "workspace:*",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^4.0.0",
     "cli-progress": "^3.11.2",
     "codemirror": "^5.65.5",
     "connect": "^3.7.0",
     "debug": "^4.3.4",
     "fast-glob": "^3.2.12",
-    "fs-extra": "^10.1.0",
-    "global-dirs": "^3.0.0",
+    "fs-extra": "^11.1.0",
+    "global-dirs": "^3.0.1",
     "import-from": "^4.0.0",
     "is-installed-globally": "^0.4.0",
     "jiti": "^1.16.0",
-    "js-base64": "^3.7.2",
-    "katex": "^0.16.3",
+    "js-base64": "^3.7.3",
+    "katex": "^0.16.4",
     "kolorist": "^1.6.0",
     "markdown-it": "^13.0.1",
     "markdown-it-footnote": "^3.0.3",
@@ -85,16 +85,16 @@
     "resolve-from": "^5.0.0",
     "resolve-global": "^1.0.0",
     "shiki": "^0.11.1",
-    "unocss": "^0.46.3",
-    "unplugin-icons": "^0.14.13",
-    "unplugin-vue-components": "^0.22.9",
-    "vite": "^3.2.3",
-    "vite-plugin-inspect": "^0.7.7",
+    "unocss": "^0.47.6",
+    "unplugin-icons": "^0.14.15",
+    "unplugin-vue-components": "^0.22.12",
+    "vite": "^4.0.1",
+    "vite-plugin-inspect": "^0.7.10",
     "vite-plugin-remote-assets": "^0.3.0",
     "vite-plugin-vue-markdown": "^0.22.1",
     "vite-plugin-vue-server-ref": "^0.3.0",
-    "vite-plugin-windicss": "^1.8.8",
-    "vue": "^3.2.42",
+    "vite-plugin-windicss": "^1.8.9",
+    "vue": "^3.2.45",
     "windicss": "^3.5.6",
     "yargs": "^17.6.2"
   },