Merge branch 'main' into feat/custom-pages

Author: kermanx

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: lts/*
           registry-url: https://registry.npmjs.org/
       - run: npm i -g @antfu/ni
       - run: nci

.github/workflows/smoke.yml

@@ -14,15 +14,55 @@ on:
   workflow_dispatch:
 
 jobs:
+  pack:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set git to use LF
+        run: |
+          git config --global core.autocrlf false
+          git config --global core.eol lf
+
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+
+      - name: Setup
+        run: npm i -g @antfu/ni
+
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v2
+
+      - name: Install
+        run: nci
+        env:
+          CYPRESS_INSTALL_BINARY: 0
+
+      - name: Build
+        run: nr build
+
+      - name: Pack
+        run: node ./scripts/pack.mjs /tmp/slidev-pkgs
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: slidev-packages
+          path: /tmp/slidev-pkgs
+
   test:
+    needs: pack
     timeout-minutes: 10
     runs-on: ${{ matrix.os }}
 
     strategy:
       matrix:
         node-version: [18.x]
         os: [ubuntu-latest, windows-latest]
-        pm: [yarn, npm, pnpm]
+        pm: [npm, pnpm] # yarn not working in this CI
         hoist: [true, false]
 
     steps:
@@ -33,10 +73,10 @@ jobs:
 
       - uses: actions/checkout@v4
 
-      - name: Use Node.js ${{ matrix.node-version }}
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: 20.x
 
       - name: Setup
         run: npm i -g @antfu/ni
@@ -47,15 +87,15 @@ jobs:
       - name: Install
         run: nci
 
-      - name: Build
-        run: nr build
-
-      - name: Pack
-        run: node ./scripts/pack.mjs ../temp/slidev-pkgs
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: slidev-packages
+          path: /tmp/slidev-pkgs
 
       - name: Create new project
         run: |
-          npm i -g ../temp/slidev-pkgs/create-app.tgz
+          npm i -g /tmp/slidev-pkgs/create-app.tgz
           echo "N" | create-slidev ../temp/slidev-project
 
       - name: Remove npmrc
@@ -68,12 +108,12 @@ jobs:
         working-directory: ../temp/slidev-project
 
       - name: Install project (npm, pnpm)
-        run: ${{ matrix.pm }} i ../slidev-pkgs/cli.tgz playwright-chromium
+        run: ${{ matrix.pm }} i /tmp/slidev-pkgs/cli.tgz playwright-chromium
         working-directory: ../temp/slidev-project
         if: ${{ matrix.pm != 'yarn' }}
 
       - name: Install project (yarn)
-        run: yarn add ../slidev-pkgs/cli.tgz playwright-chromium
+        run: yarn add /tmp/slidev-pkgs/cli.tgz playwright-chromium
         working-directory: ../temp/slidev-project
         if: ${{ matrix.pm == 'yarn' }}
 
@@ -92,7 +132,7 @@ jobs:
 
       - name: Install globally
         run: |
-          ${{ matrix.pm }} i -g ${{ github.workspace }}/../temp/slidev-pkgs/cli.tgz playwright-chromium
+          ${{ matrix.pm }} i -g /tmp/slidev-pkgs/cli.tgz playwright-chromium
           ${{ matrix.pm }} i -g @slidev/theme-seriph
         if: ${{ matrix.pm != 'yarn' }}
 

.github/workflows/test.yml

@@ -18,7 +18,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [lts/*]
         os: [ubuntu-latest, windows-latest, macos-latest]
         # os: [ubuntu-latest, macos-latest]
       fail-fast: false
@@ -57,10 +57,9 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: lts/*
 
       - name: Setup
         run: npm i -g @antfu/ni

demo/starter/package.json

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

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.22",
+    "@vue/compiler-sfc": "^3.4.26",
     "nodemon": "^3.1.0",
-    "vue": "^3.4.22"
+    "vue": "^3.4.26"
   }
 }

docs/builtin/components.md

@@ -272,6 +272,16 @@ Parameters:
 
 See https://sli.dev/guide/animations.html
 
+### `VSwitch`
+
+Switch between multiple slots based on clicks.
+
+See https://sli.dev/guide/animations.html#enter-leave
+
+- If the `unmount` prop is set to `true`, the previous slot will be unmounted when switching to the next slot. Default is `false`.
+- Use the `tag` and `childTag` props to change the default tag of the component and its children. Default is `div`.
+- Use the `transition` prop to change the transition effect. Default is `false` (disabled).
+
 ### `VDrag`
 
 See https://sli.dev/guide/draggable.html

docs/guide/animations.md

@@ -194,13 +194,24 @@ You can also specify the enter and leave index for the `v-click` directive by pa
 <div v-click.hide="[2, 4]">
   This will be hidden at click 2 and 3.
 </div>
-
 <div v-click />
 <div v-click="'[+1, +1]'">
   This will be shown at click 3, and hidden since click 4.
 </div>
 ```
 
+You can also use `v-switch` to achieve the same effect:
+
+```md
+<v-switch>
+  <template #1> show at click 1, hide at click 2. </template>
+  <template #2> show at click 2, hide at click 5. </template>
+  <template #5-7> show at click 5, hide at click 7. </template>
+</v-switch>
+```
+
+See [`VSwitch` Component](/builtin/components#vswitch) for more details.
+
 ### Custom Total Clicks Count
 
 By default, Slidev counts how many steps are needed before going to the next slide. You can override this setting by passing the `clicks` frontmatter option:

docs/package.json

@@ -2,7 +2,7 @@
   "name": "docs",
   "type": "module",
   "private": true,
-  "packageManager": "pnpm@8.15.7",
+  "packageManager": "pnpm@9.0.6",
   "scripts": {
     "dev": "vitepress",
     "build": "vitepress build",
@@ -11,26 +11,26 @@
   "dependencies": {
     "@antfu/utils": "^0.7.7",
     "@vueuse/core": "^10.9.0",
-    "typeit": "^8.1.0"
+    "typeit": "^8.8.3"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.201",
-    "@shikijs/vitepress-twoslash": "^1.3.0",
+    "@iconify/json": "^2.2.206",
+    "@shikijs/vitepress-twoslash": "^1.4.0",
     "@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.7",
-    "@unocss/reset": "^0.59.3",
+    "@types/node": "^20.12.8",
+    "@unocss/reset": "^0.59.4",
     "fs-extra": "^11.2.0",
     "markdown-it": "^14.1.0",
-    "shiki": "^1.3.0",
+    "shiki": "^1.4.0",
     "typescript": "^5.4.5",
-    "unocss": "^0.59.3",
-    "unplugin-icons": "^0.18.5",
-    "unplugin-vue-components": "^0.26.0",
-    "vite-plugin-inspect": "^0.8.3",
-    "vitepress": "^1.1.0"
+    "unocss": "^0.59.4",
+    "unplugin-icons": "^0.19.0",
+    "unplugin-vue-components": "^0.27.0",
+    "vite-plugin-inspect": "^0.8.4",
+    "vitepress": "^1.1.4"
   }
 }

package.json

@@ -1,8 +1,8 @@
 {
   "type": "module",
-  "version": "0.49.0-beta.4",
+  "version": "0.49.0-beta.6",
   "private": true,
-  "packageManager": "pnpm@8.15.7",
+  "packageManager": "pnpm@9.0.6",
   "engines": {
     "node": ">=18.0.0"
   },
@@ -26,10 +26,10 @@
     "test": "vitest test"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.14.0",
+    "@antfu/eslint-config": "^2.16.1",
     "@antfu/ni": "^0.21.12",
     "@antfu/utils": "^0.7.7",
-    "@shikijs/markdown-it": "^1.3.0",
+    "@shikijs/markdown-it": "^1.4.0",
     "@slidev/cli": "workspace:*",
     "@slidev/parser": "workspace:*",
     "@slidev/types": "workspace:*",
@@ -41,37 +41,37 @@
     "@types/fs-extra": "^11.0.4",
     "@types/js-yaml": "^4.0.9",
     "@types/katex": "^0.16.7",
-    "@types/markdown-it": "^14.0.1",
-    "@types/node": "^20.12.7",
+    "@types/markdown-it": "^14.1.1",
+    "@types/node": "^20.12.8",
     "@types/prismjs": "^1.26.3",
     "@types/prompts": "^2.4.9",
     "@types/recordrtc": "^5.6.14",
     "@types/resolve": "^1.20.6",
     "@types/semver": "^7.5.8",
     "@types/yargs": "^17.0.32",
     "@vueuse/core": "^10.9.0",
-    "bumpp": "^9.4.0",
+    "bumpp": "^9.4.1",
     "cross-env": "^7.0.3",
-    "cypress": "^13.7.3",
-    "eslint": "^9.0.0",
-    "eslint-plugin-format": "^0.1.0",
+    "cypress": "^13.8.1",
+    "eslint": "^9.1.1",
+    "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": "^8.15.7",
+    "pnpm": "^9.0.6",
     "prettier-plugin-slidev": "^1.0.5",
     "rimraf": "^5.0.5",
-    "shiki": "^1.3.0",
+    "shiki": "^1.4.0",
     "simple-git-hooks": "^2.11.1",
-    "taze": "^0.13.5",
+    "taze": "^0.13.8",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5",
-    "vite": "^5.2.9",
-    "vitest": "^1.5.0",
-    "vue-tsc": "^2.0.13",
-    "zx": "^8.0.1"
+    "vite": "^5.2.11",
+    "vitest": "^1.5.3",
+    "vue-tsc": "^2.0.16",
+    "zx": "^8.0.2"
   },
   "pnpm": {
     "patchedDependencies": {

packages/client/builtin/CodeBlockWrapper.vue

@@ -17,7 +17,7 @@ import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import { configs } from '../env'
 import { makeId, updateCodeHighlightRange } from '../logic/utils'
-import { CLASS_VCLICK_HIDDEN } from '../constants'
+import { CLASS_VCLICK_HIDDEN, CLICKS_MAX } from '../constants'
 import { useSlideContext } from '../context'
 
 const props = defineProps({
@@ -66,7 +66,7 @@ onMounted(() => {
   const clicksInfo = clicks.calculateSince(props.at, props.ranges.length - 1)
   clicks.register(id, clicksInfo)
 
-  const index = computed(() => Math.max(0, clicks.current - clicksInfo.start + 1))
+  const index = computed(() => clicksInfo ? Math.max(0, clicks.current - clicksInfo.start + 1) : CLICKS_MAX)
 
   const finallyRange = computed(() => {
     return props.finally === 'last' ? props.ranges.at(-1) : props.finally.toString()