@slidev/cli 0.48.0-beta.11 → 0.48.0-beta.13

package/dist/{build-DTVJA6KF.mjs → build-WAYUJVTS.mjs}

@@ -2,7 +2,7 @@ import {
   ViteSlidevPlugin,
   getIndexHtml,
   mergeViteConfigs
-} from "./chunk-7HWAUX7C.mjs";
+} from "./chunk-MJETSRBI.mjs";
 import "./chunk-O6TYYGU6.mjs";
 import {
   findPkgRoot

package/dist/{chunk-DFSBG7Q2.mjs → chunk-DGBTBO7O.mjs}

@@ -4,7 +4,7 @@ import {
   mergeViteConfigs,
   require_semver,
   version
-} from "./chunk-7HWAUX7C.mjs";
+} from "./chunk-MJETSRBI.mjs";
 import {
   createResolver,
   getRoots,

package/dist/{chunk-7HWAUX7C.mjs → chunk-MJETSRBI.mjs}

@@ -2496,7 +2496,7 @@ var require_semver2 = __commonJS({
 });
 
 // package.json
-var version = "0.48.0-beta.11";
+var version = "0.48.0-beta.13";
 
 // node/common.ts
 import { existsSync, promises as fs } from "node:fs";
@@ -2757,10 +2757,20 @@ md.use(mila, {
     rel: "noopener"
   }
 });
-function renderNoteHTML(data) {
+function renderNote(text = "") {
+  let clickCount = 0;
+  const html = md.render(
+    text.replace(/\[click(?::(\d+))?\]/gi, (_, count = 1) => {
+      clickCount += Number(count);
+      return `<span class="slidev-note-click-mark" data-clicks="${clickCount}"></span>`;
+    })
+  );
+  return html;
+}
+function withRenderedNote(data) {
   return {
     ...data,
-    noteHTML: md.render(data?.note || "")
+    noteHTML: renderNote(data?.note)
   };
 }
 function createSlidesLoader({ data, clientRoot, roots, remote, mode }, pluginOptions, serverOptions) {
@@ -2782,7 +2792,7 @@ function createSlidesLoader({ data, clientRoot, roots, remote, mode }, pluginOpt
           const [, no, type] = match;
           const idx = Number.parseInt(no);
           if (type === "json" && req.method === "GET") {
-            res.write(JSON.stringify(renderNoteHTML(data.slides[idx])));
+            res.write(JSON.stringify(withRenderedNote(data.slides[idx])));
             return res.end();
           }
           if (type === "json" && req.method === "POST") {
@@ -2794,7 +2804,7 @@ function createSlidesLoader({ data, clientRoot, roots, remote, mode }, pluginOpt
             parser.prettifySlide(slide.source);
             await parser.save(data.markdownFiles[slide.source.filepath]);
             res.statusCode = 200;
-            res.write(JSON.stringify(renderNoteHTML(slide)));
+            res.write(JSON.stringify(withRenderedNote(slide)));
             return res.end();
           }
           next();
@@ -2842,7 +2852,7 @@ function createSlidesLoader({ data, clientRoot, roots, remote, mode }, pluginOpt
                 data: {
                   id: i,
                   note: b.note || "",
-                  noteHTML: md.render(b.note || "")
+                  noteHTML: renderNote(b.note || "")
                 }
               });
             }
@@ -2853,7 +2863,7 @@ function createSlidesLoader({ data, clientRoot, roots, remote, mode }, pluginOpt
             event: "slidev-update",
             data: {
               id: i,
-              data: renderNoteHTML(newData.slides[i])
+              data: withRenderedNote(newData.slides[i])
             }
           });
           hmrPages.add(i);
@@ -2921,7 +2931,7 @@ ${title}
               };
             } else if (type === "frontmatter") {
               const slideBase = {
-                ...renderNoteHTML(slide),
+                ...withRenderedNote(slide),
                 frontmatter: void 0,
                 source: void 0,
                 // remove raw content in build, optimize the bundle size
@@ -3438,6 +3448,7 @@ import fs6 from "node:fs/promises";
 import Markdown2 from "unplugin-vue-markdown/vite";
 import * as base64 from "js-base64";
 import { slash as slash3 } from "@antfu/utils";
+import { hash as getHash } from "ohash";
 import mila2 from "markdown-it-link-attributes";
 import mif from "markdown-it-footnote";
 
@@ -3572,6 +3583,7 @@ import { Optional } from "@mrdrogdrog/optional";
 // node/plugins/markdown.ts
 import { encode as encode2 } from "plantuml-encoder";
 import Mdc from "markdown-it-mdc";
+import { codeToKeyedTokens, createMagicMoveMachine } from "shiki-magic-move/core";
 
 // node/plugins/markdown-it-katex.ts
 import katex from "katex";
@@ -3912,36 +3924,53 @@ ${content}
 }
 
 // node/plugins/markdown.ts
+var shiki;
+var shikiOptions;
 async function createMarkdownPlugin(options, { markdown: mdOptions }) {
   const { data: { config }, roots, mode, entry, clientRoot } = options;
   const setups = [];
   const entryPath = slash3(entry);
   if (config.highlighter === "shiki") {
-    const MarkdownItShiki = await import("@shikijs/markdown-it").then((r) => r.default);
-    const { transformerTwoslash } = await import("@shikijs/vitepress-twoslash");
-    const options2 = await loadShikiSetups(clientRoot, roots);
-    const plugin = await MarkdownItShiki({
+    const [
+      options2,
+      { getHighlighter, bundledLanguages },
+      markdownItShiki,
+      transformerTwoslash
+    ] = await Promise.all([
+      loadShikiSetups(clientRoot, roots),
+      import("shiki").then(({ getHighlighter: getHighlighter2, bundledLanguages: bundledLanguages2 }) => ({ bundledLanguages: bundledLanguages2, getHighlighter: getHighlighter2 })),
+      import("@shikijs/markdown-it/core").then(({ fromHighlighter }) => fromHighlighter),
+      import("@shikijs/vitepress-twoslash").then(({ transformerTwoslash: transformerTwoslash2 }) => transformerTwoslash2)
+    ]);
+    shikiOptions = options2;
+    shiki = await getHighlighter({
       ...options2,
-      transformers: [
-        ...options2.transformers || [],
-        transformerTwoslash({
-          explicitTrigger: true,
-          twoslashOptions: {
-            handbookOptions: {
-              noErrorValidation: true
-            }
-          }
-        }),
-        {
-          pre(pre) {
-            this.addClassToHast(pre, "slidev-code");
-            delete pre.properties.tabindex;
-          },
-          postprocess(code) {
-            return escapeVueInCode(code);
+      langs: options2.langs ?? Object.keys(bundledLanguages),
+      themes: "themes" in options2 ? Object.values(options2.themes) : [options2.theme]
+    });
+    const transformers = [
+      ...options2.transformers || [],
+      transformerTwoslash({
+        explicitTrigger: true,
+        twoslashOptions: {
+          handbookOptions: {
+            noErrorValidation: true
           }
         }
-      ]
+      }),
+      {
+        pre(pre) {
+          this.addClassToHast(pre, "slidev-code");
+          delete pre.properties.tabindex;
+        },
+        postprocess(code) {
+          return escapeVueInCode(code);
+        }
+      }
+    ];
+    const plugin = markdownItShiki(shiki, {
+      ...options2,
+      transformers
     });
     setups.push((md2) => md2.use(plugin));
   } else {
@@ -3982,6 +4011,8 @@ async function createMarkdownPlugin(options, { markdown: mdOptions }) {
         if (id === entryPath)
           return "";
         const monaco = config.monaco === true || config.monaco === mode ? transformMarkdownMonaco : truncateMancoMark;
+        if (config.highlighter === "shiki")
+          code = transformMagicMove(code, shiki, shikiOptions);
         code = transformSlotSugar(code);
         code = transformSnippet(code, options, id);
         code = transformMermaid(code);
@@ -4046,12 +4077,50 @@ function transformSlotSugar(md2) {
     lines[lines.length - 1] += "\n\n</template>";
   return lines.join("\n");
 }
+var reMagicMoveBlock = /^````(?:md|markdown) magic-move(?:[ ]*?({.*?})?([^\n]*?))?\n([\s\S]+?)^````$/mg;
+var reCodeBlock = /^```(\w+?)(?:\s*{([\d\w*,\|-]+)}\s*?({.*?})?(.*?))?\n([\s\S]+?)^```$/mg;
+function transformMagicMove(md2, shiki2, shikiOptions2) {
+  const scripts = [];
+  let count = 0;
+  md2 = md2.replace(
+    reMagicMoveBlock,
+    (full, _options = "", _attrs = "", body) => {
+      if (!shiki2 || !shikiOptions2)
+        throw new Error("Shiki is required for Magic Move. You may need to set `highlighter: shiki` in your Slidev config.");
+      const matches = Array.from(body.matchAll(reCodeBlock));
+      if (!matches.length)
+        throw new Error("Magic Move block must contain at least one code block");
+      const langs = new Set(matches.map((i) => i[1]));
+      if (langs.size > 1)
+        throw new Error(`Magic Move block must contain code blocks with the same language, got ${Array.from(langs).join(", ")}`);
+      const lang = Array.from(langs)[0];
+      const magicMove = createMagicMoveMachine(
+        (code) => codeToKeyedTokens(shiki2, code, {
+          ...shikiOptions2,
+          lang
+        })
+      );
+      const steps = matches.map((i) => magicMove.commit((i[5] || "").trimEnd()));
+      const id = `__magicMoveSteps_${getHash(body)}_${count++}`;
+      scripts.push(`const ${id} = Object.freeze(${JSON.stringify(steps)})`);
+      return `<ShikiMagicMove :steps='${id}' />`;
+    }
+  );
+  if (scripts.length)
+    md2 = `<script setup>
+${scripts.join("\n")}</script>
+
+${md2}`;
+  return md2;
+}
 function transformHighlighter(md2) {
-  return md2.replace(/^```(\w+?)(?:\s*{([\d\w*,\|-]+)}\s*?({.*?})?(.*?))?\n([\s\S]+?)^```/mg, (full, lang = "", rangeStr = "", options = "", attrs = "", code) => {
-    const ranges = rangeStr.split(/\|/g).map((i) => i.trim());
-    code = code.trimEnd();
-    options = options.trim() || "{}";
-    return `
+  return md2.replace(
+    reCodeBlock,
+    (full, lang = "", rangeStr = "", options = "", attrs = "", code) => {
+      const ranges = rangeStr.split(/\|/g).map((i) => i.trim());
+      code = code.trimEnd();
+      options = options.trim() || "{}";
+      return `
 <CodeBlockWrapper v-bind="${options}" :ranges='${JSON.stringify(ranges)}'>
 
 \`\`\`${lang}${attrs}
@@ -4059,7 +4128,8 @@ ${code}
 \`\`\`
 
 </CodeBlockWrapper>`;
-  });
+    }
+  );
 }
 function getCodeBlocks(md2) {
   const codeblocks = Array.from(md2.matchAll(/^```[\s\S]*?^```/mg)).map((m) => {

package/dist/cli.mjs

@@ -5,10 +5,10 @@ import {
   resolveAddons,
   resolveOptions,
   resolveTheme
-} from "./chunk-DFSBG7Q2.mjs";
+} from "./chunk-DGBTBO7O.mjs";
 import {
   version
-} from "./chunk-7HWAUX7C.mjs";
+} from "./chunk-MJETSRBI.mjs";
 import {
   loadSetups
 } from "./chunk-O6TYYGU6.mjs";
@@ -277,7 +277,7 @@ cli.command(
   }).strict().help(),
   async (args) => {
     const { entry, theme, watch, base, download, out, inspect } = args;
-    const { build } = await import("./build-DTVJA6KF.mjs");
+    const { build } = await import("./build-WAYUJVTS.mjs");
     for (const entryFile of entry) {
       const options = await resolveOptions({ entry: entryFile, theme, inspect }, "build");
       if (download && !options.data.config.download)
@@ -482,13 +482,15 @@ function printInfo(options, port, remote, tunnelUrl, publicIp) {
     const query = remote ? `?password=${remote}` : "";
     const presenterPath = `${options.data.config.routerMode === "hash" ? "/#/" : "/"}presenter/${query}`;
     const entryPath = `${options.data.config.routerMode === "hash" ? "/#/" : "/"}entry${query}/`;
+    const overviewPath = `${options.data.config.routerMode === "hash" ? "/#/" : "/"}overview${query}/`;
     console.log();
     console.log(`${dim("  public slide show ")}  > ${cyan(`http://localhost:${bold(port)}/`)}`);
     if (query)
       console.log(`${dim("  private slide show ")} > ${cyan(`http://localhost:${bold(port)}/${query}`)}`);
     console.log(`${dim("  presenter mode ")}     > ${blue(`http://localhost:${bold(port)}${presenterPath}`)}`);
+    console.log(`${dim("  slides overview ")}    > ${blue(`http://localhost:${bold(port)}${overviewPath}`)}`);
     if (options.inspect)
-      console.log(`${dim("  inspector")}           > ${yellow(`http://localhost:${bold(port)}/__inspect/`)}`);
+      console.log(`${dim("  vite inspector")}      > ${yellow(`http://localhost:${bold(port)}/__inspect/`)}`);
     let lastRemoteUrl = "";
     if (remote !== void 0) {
       Object.values(os.networkInterfaces()).forEach((v) => (v || []).filter((details) => String(details.family).slice(-1) === "4" && !details.address.includes("127.0.0.1")).forEach(({ address }) => {

package/dist/index.mjs

@@ -2,10 +2,10 @@ import {
   createServer,
   parser,
   resolveOptions
-} from "./chunk-DFSBG7Q2.mjs";
+} from "./chunk-DGBTBO7O.mjs";
 import {
   ViteSlidevPlugin
-} from "./chunk-7HWAUX7C.mjs";
+} from "./chunk-MJETSRBI.mjs";
 import "./chunk-O6TYYGU6.mjs";
 import "./chunk-7HOZGSL4.mjs";
 import "./chunk-BXO7ZPPU.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/cli",
-  "version": "0.48.0-beta.11",
+  "version": "0.48.0-beta.13",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -77,7 +77,8 @@
     "mlly": "^1.6.1",
     "monaco-editor": "^0.37.1",
     "nanoid": "^5.0.6",
-    "open": "^10.0.3",
+    "ohash": "^1.1.3",
+    "open": "^10.0.4",
     "pdf-lib": "^1.17.1",
     "plantuml-encoder": "^1.4.0",
     "postcss-nested": "^6.0.1",
@@ -88,6 +89,7 @@
     "resolve-from": "^5.0.0",
     "resolve-global": "^2.0.0",
     "shiki": "^1.1.7",
+    "shiki-magic-move": "^0.1.0",
     "sirv": "^2.0.4",
     "typescript": "^5.3.3",
     "unocss": "^0.58.5",
@@ -102,11 +104,11 @@
     "vite-plugin-static-copy": "^1.0.1",
     "vite-plugin-vue-server-ref": "^0.4.2",
     "vitefu": "^0.2.5",
-    "vue": "^3.4.19",
+    "vue": "^3.4.20",
     "yargs": "^17.7.2",
-    "@slidev/parser": "0.48.0-beta.11",
-    "@slidev/client": "0.48.0-beta.11",
-    "@slidev/types": "0.48.0-beta.11"
+    "@slidev/parser": "0.48.0-beta.13",
+    "@slidev/types": "0.48.0-beta.13",
+    "@slidev/client": "0.48.0-beta.13"
   },
   "devDependencies": {
     "@hedgedoc/markdown-it-plugins": "^2.1.4",