@slidev/cli 0.48.0-beta.21 → 0.48.0-beta.23

package/dist/{build-LAWVABFK.mjs → build-PDGXAWGC.mjs}

@@ -2,7 +2,7 @@ import {
   ViteSlidevPlugin,
   getIndexHtml,
   mergeViteConfigs
-} from "./chunk-NSAYO3FG.mjs";
+} from "./chunk-7IY2RRV6.mjs";
 import "./chunk-O6TYYGU6.mjs";
 import "./chunk-CV7OWJOF.mjs";
 
@@ -62,7 +62,7 @@ async function build(options, viteConfig = {}, args) {
     await fs.writeFile(redirectsPath, `${config.base}*    ${config.base}index.html   200
 `, "utf-8");
   if ([true, "true", "auto"].includes(options.data.config.download)) {
-    const { exportSlides, getExportOptions } = await import("./export-QZQV5HQF.mjs");
+    const { exportSlides, getExportOptions } = await import("./export-2XPAFE22.mjs");
     const port = 12445;
     const app = connect();
     const server = http.createServer(app);

package/dist/{chunk-NSAYO3FG.mjs → chunk-7IY2RRV6.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-CV7OWJOF.mjs";
 
 // package.json
-var version = "0.48.0-beta.21";
+var version = "0.48.0-beta.23";
 
 // node/common.ts
 import { existsSync, promises as fs } from "node:fs";
@@ -146,7 +146,7 @@ import { uniq } from "@antfu/utils";
 // ../client/package.json
 var dependencies = {
   "@antfu/utils": "^0.7.7",
-  "@iconify-json/carbon": "^1.1.30",
+  "@iconify-json/carbon": "^1.1.31",
   "@iconify-json/ph": "^1.1.11",
   "@iconify-json/svg-spinners": "^1.1.2",
   "@shikijs/monaco": "^1.1.7",
@@ -155,7 +155,7 @@ var dependencies = {
   "@slidev/rough-notation": "^0.1.0",
   "@slidev/types": "workspace:*",
   "@typescript/ata": "^0.9.4",
-  "@unhead/vue": "^1.8.10",
+  "@unhead/vue": "^1.8.11",
   "@unocss/reset": "^0.58.5",
   "@vueuse/core": "^10.9.0",
   "@vueuse/math": "^10.9.0",
@@ -168,27 +168,35 @@ var dependencies = {
   "js-yaml": "^4.1.0",
   katex: "^0.16.9",
   "lz-string": "^1.5.0",
-  mermaid: "^10.8.0",
+  mermaid: "^10.9.0",
   "monaco-editor": "^0.46.0",
   prettier: "^3.2.5",
   recordrtc: "^5.6.2",
   shiki: "^1.1.7",
-  "shiki-magic-move": "^0.1.0",
-  typescript: "^5.3.3",
+  "shiki-magic-move": "^0.3.4",
+  typescript: "^5.4.2",
   unocss: "^0.58.5",
   vue: "^3.4.21",
+  "vue-demi": "^0.14.7",
   "vue-router": "^4.3.0"
 };
 
 // node/plugins/extendConfig.ts
 var INCLUDE = [
   ...Object.keys(dependencies),
+  // CodeMirror
   "codemirror/mode/javascript/javascript",
   "codemirror/mode/css/css",
   "codemirror/mode/markdown/markdown",
   "codemirror/mode/xml/xml",
   "codemirror/mode/htmlmixed/htmlmixed",
-  "codemirror/addon/display/placeholder"
+  "codemirror/addon/display/placeholder",
+  // Monaco
+  "monaco-editor/esm/vs/editor/standalone/browser/standaloneServices",
+  "monaco-editor/esm/vs/platform/contextview/browser/contextViewService",
+  "monaco-editor/esm/vs/platform/instantiation/common/descriptors",
+  // Others
+  "shiki-magic-move/vue"
 ];
 var EXCLUDE = [
   "@slidev/shared",
@@ -197,6 +205,7 @@ var EXCLUDE = [
   "@slidev/client/constants",
   "@slidev/client/logic/dark",
   "@vueuse/core",
+  "@vueuse/math",
   "@vueuse/shared",
   "@unocss/reset",
   "unocss",
@@ -458,7 +467,7 @@ function startsWithTodoMarkdown(token) {
 // node/plugins/markdown.ts
 import { encode as encodePlantUml } from "plantuml-encoder";
 import Mdc from "markdown-it-mdc";
-import { codeToKeyedTokens, createMagicMoveMachine } from "shiki-magic-move/core";
+import { codeToKeyedTokens } from "shiki-magic-move/core";
 import mila from "markdown-it-link-attributes";
 import mif from "markdown-it-footnote";
 import lz from "lz-string";
@@ -941,6 +950,15 @@ function transformMarkdownMonaco(md2) {
       return `<Monaco code-lz="${encoded}" lang="${lang}" v-bind="${options}" />`;
     }
   );
+  md2 = md2.replace(
+    /^```(\w+?)\s*{monaco-run}\s*?({.*?})?\s*?\n([\s\S]+?)^```/mg,
+    (full, lang = "ts", options = "{}", code) => {
+      lang = lang.trim();
+      options = options.trim() || "{}";
+      const encoded = lz.compressToBase64(code);
+      return `<Monaco runnable code-lz="${encoded}" lang="${lang}" v-bind="${options}" />`;
+    }
+  );
   return md2;
 }
 function scanMonacoModules(md2) {
@@ -979,30 +997,26 @@ 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 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) {
   return md2.replace(
     reMagicMoveBlock,
-    (full, _options = "", _attrs = "", body) => {
+    (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, {
+      const ranges = matches.map((i) => normalizeRangeStr(i[2]));
+      const steps = matches.map(
+        (i) => codeToKeyedTokens(shiki2, i[5].trimEnd(), {
           ...shikiOptions2,
-          lang
+          lang: i[1]
         })
       );
-      const steps = matches.map((i) => magicMove.commit((i[5] || "").trimEnd()));
       const compressed = lz.compressToBase64(JSON.stringify(steps));
-      return `<ShikiMagicMove steps-lz="${compressed}" />`;
+      return `<ShikiMagicMove v-bind="${options}" steps-lz="${compressed}" :step-ranges='${JSON.stringify(ranges)}' />`;
     }
   );
 }
@@ -1010,7 +1024,7 @@ function transformHighlighter(md2) {
   return md2.replace(
     reCodeBlock,
     (full, lang = "", rangeStr = "", options = "", attrs = "", code) => {
-      const ranges = !rangeStr.trim() ? [] : rangeStr.trim().split(/\|/g).map((i) => i.trim());
+      const ranges = normalizeRangeStr(rangeStr);
       code = code.trimEnd();
       options = options.trim() || "{}";
       return `
@@ -1024,6 +1038,9 @@ ${code}
     }
   );
 }
+function normalizeRangeStr(rangeStr = "") {
+  return !rangeStr.trim() ? [] : rangeStr.trim().split(/\|/g).map((i) => i.trim());
+}
 function getCodeBlocks(md2) {
   const codeblocks = Array.from(md2.matchAll(/^```[\s\S]*?^```/mg)).map((m) => {
     const start = m.index;
@@ -1174,7 +1191,7 @@ function createSlidesLoader({ data, clientRoot, roots, remote, mode, userRoot },
           if (!match)
             return next();
           const [, no, type] = match;
-          const idx = Number.parseInt(no);
+          const idx = Number.parseInt(no) - 1;
           if (type === "json" && req.method === "GET") {
             res.write(JSON.stringify(withRenderedNote(data.slides[idx])));
             return res.end();
@@ -1221,7 +1238,7 @@ function createSlidesLoader({ data, clientRoot, roots, remote, mode, userRoot },
         for (let i = 0; i < length; i++) {
           const a = data.slides[i];
           const b = newData.slides[i];
-          if (a.content.trim() === b.content.trim() && a.title?.trim() === b.title?.trim() && equal(a.frontmatter, b.frontmatter) && Object.entries(a.snippetsUsed ?? {}).every(([file, oldContent]) => {
+          if (!hmrPages.has(i) && a.content.trim() === b.content.trim() && a.title?.trim() === b.title?.trim() && equal(a.frontmatter, b.frontmatter) && Object.entries(a.snippetsUsed ?? {}).every(([file, oldContent]) => {
             try {
               const newContent = fs5.readFileSync(file, "utf-8");
               return oldContent === newContent;
@@ -1233,7 +1250,7 @@ function createSlidesLoader({ data, clientRoot, roots, remote, mode, userRoot },
               ctx.server.hot.send(
                 "slidev:update-note",
                 {
-                  id: i,
+                  no: i + 1,
                   note: b.note || "",
                   noteHTML: renderNote(b.note || "")
                 }
@@ -1244,7 +1261,7 @@ function createSlidesLoader({ data, clientRoot, roots, remote, mode, userRoot },
           ctx.server.hot.send(
             "slidev:update-slide",
             {
-              id: i,
+              no: i + 1,
               data: withRenderedNote(newData.slides[i])
             }
           );
@@ -1584,8 +1601,7 @@ defineProps<{ no: number | string }>()`);
       `import "${resolveUrlOfClient("styles/index.css")}"`,
       `import "${resolveUrlOfClient("styles/code.css")}"`,
       `import "${resolveUrlOfClient("styles/katex.css")}"`,
-      `import "${resolveUrlOfClient("styles/transitions.css")}"`,
-      `import "${resolveUrlOfClient("styles/monaco.css")}"`
+      `import "${resolveUrlOfClient("styles/transitions.css")}"`
     ];
     for (const root of roots) {
       const styles = [
@@ -1630,7 +1646,7 @@ defineProps<{ no: number | string }>()`);
       result += `addFile(import(${JSON.stringify(url)}), ${JSON.stringify(file)})
 `;
     }
-    const deps = data.config.monacoTypesAdditionalPackages;
+    const deps = [...data.config.monacoTypesAdditionalPackages];
     if (data.config.monacoTypesSource === "local")
       deps.push(...scanMonacoModules(data.slides.map((s) => s.source.raw).join()));
     function mapModuleNameToModule(moduleSpecifier) {
@@ -1697,16 +1713,11 @@ ${Object.entries(layouts).map(([k, v]) => `"${k}": ${v}`).join(",\n")}
       `const data = [
 ${slides.join(",\n")}
 ]`,
-      `export const slides = shallowRef([...data])`,
-      `let oldRef = slides`,
-      `export function update(old) {`,
-      `  oldRef = old`,
-      `  old.value = data`,
-      `}`,
+      `import.meta.hot.data.slides ??= shallowRef()`,
+      `import.meta.hot.data.slides.value = data`,
+      `export const slides = import.meta.hot.data.slides`,
       `if (import.meta.hot) {`,
-      `  import.meta.hot.accept(({ update }) => {`,
-      `    update(oldRef)`,
-      `  })`,
+      `  import.meta.hot.accept()`,
       `}`
     ].join("\n");
   }
@@ -2069,7 +2080,8 @@ async function ViteSlidevPlugin(options, pluginOptions, serverOptions = {}) {
       ...remoteAssetsOptions
     })) : null,
     ServerRef({
-      debug: process.env.NODE_ENV === "development",
+      debug: false,
+      // process.env.NODE_ENV === 'development',
       state: {
         sync: false,
         nav: {

package/dist/{chunk-AUSTPPCJ.mjs → chunk-TKQ4IRDS.mjs}

@@ -3,7 +3,7 @@ import {
   checkEngine,
   mergeViteConfigs,
   version
-} from "./chunk-NSAYO3FG.mjs";
+} from "./chunk-7IY2RRV6.mjs";
 import {
   createResolver,
   getRoots,

package/dist/cli.mjs

@@ -5,10 +5,10 @@ import {
   resolveAddons,
   resolveOptions,
   resolveTheme
-} from "./chunk-AUSTPPCJ.mjs";
+} from "./chunk-TKQ4IRDS.mjs";
 import {
   version
-} from "./chunk-NSAYO3FG.mjs";
+} from "./chunk-7IY2RRV6.mjs";
 import {
   loadSetups
 } from "./chunk-O6TYYGU6.mjs";
@@ -42,6 +42,20 @@ var CONFIG_RESTART_FIELDS = [
   "editor",
   "theme"
 ];
+var FILES_CREATE_RESTART_GLOBS = [
+  "global-bottom.vue",
+  "global-top.vue",
+  "uno.config.js",
+  "uno.config.ts",
+  "unocss.config.js",
+  "unocss.config.ts"
+];
+var FILES_CHANGE_RESTART_GLOBS = [
+  "vite.config.*",
+  "setup/shiki.ts",
+  "setup/katex.ts",
+  "setup/preparser.ts"
+];
 injectPreparserExtensionLoader(async (headmatter, filepath, mode) => {
   const addons = headmatter?.addons ?? [];
   const { clientRoot, userRoot } = await getRoots();
@@ -96,6 +110,14 @@ cli.command(
     let server;
     let port = 3030;
     let lastRemoteUrl;
+    let restartTimer;
+    function restartServer() {
+      clearTimeout(restartTimer);
+      restartTimer = setTimeout(() => {
+        console.log(yellow("\n  restarting...\n"));
+        initServer();
+      }, 500);
+    }
     async function initServer() {
       if (server)
         await server.close();
@@ -131,7 +153,7 @@ cli.command(
             const themeRaw = theme || loaded.headmatter.theme || "default";
             if (options.themeRaw !== themeRaw) {
               console.log(yellow("\n  restarting on theme change\n"));
-              initServer();
+              restartServer();
               return false;
             }
             const themeMeta = options.themeRoots[0] ? await getThemeMeta(themeRaw, options.themeRoots[0]) : void 0;
@@ -142,7 +164,7 @@ cli.command(
             };
             if (CONFIG_RESTART_FIELDS.some((i) => !equal(newData.config[i], oldData.config[i]))) {
               console.log(yellow("\n  restarting on config change\n"));
-              initServer();
+              restartServer();
               return false;
             }
             return newData;
@@ -248,6 +270,34 @@ ${dim(" Public IP: ")}  ${blue(publicIp)}
     }
     initServer();
     bindShortcut();
+    const { watch } = await import("chokidar");
+    const watcher = watch([
+      ...FILES_CREATE_RESTART_GLOBS,
+      ...FILES_CHANGE_RESTART_GLOBS
+    ], {
+      ignored: ["node_modules", ".git"],
+      ignoreInitial: true
+    });
+    watcher.on("unlink", (file) => {
+      console.log(yellow(`
+  file ${file} removed, restarting...
+`));
+      restartServer();
+    });
+    watcher.on("add", (file) => {
+      console.log(yellow(`
+  file ${file} added, restarting...
+`));
+      restartServer();
+    });
+    watcher.on("change", (file) => {
+      if (FILES_CREATE_RESTART_GLOBS.includes(file))
+        return;
+      console.log(yellow(`
+  file ${file} changed, restarting...
+`));
+      restartServer();
+    });
   }
 );
 cli.command(
@@ -276,7 +326,7 @@ cli.command(
   }).strict().help(),
   async (args) => {
     const { entry, theme, watch, base, download, out, inspect } = args;
-    const { build } = await import("./build-LAWVABFK.mjs");
+    const { build } = await import("./build-PDGXAWGC.mjs");
     for (const entryFile of entry) {
       const options = await resolveOptions({ entry: entryFile, theme, inspect }, "build");
       if (download && !options.data.config.download)
@@ -351,7 +401,7 @@ cli.command(
   (args) => exportOptions(commonOptions(args)).strict().help(),
   async (args) => {
     const { entry, theme } = args;
-    const { exportSlides, getExportOptions } = await import("./export-QZQV5HQF.mjs");
+    const { exportSlides, getExportOptions } = await import("./export-2XPAFE22.mjs");
     const port = await getPort(12445);
     for (const entryFile of entry) {
       const options = await resolveOptions({ entry: entryFile, theme }, "export");
@@ -395,7 +445,7 @@ cli.command(
     output,
     timeout
   }) => {
-    const { exportNotes } = await import("./export-QZQV5HQF.mjs");
+    const { exportNotes } = await import("./export-2XPAFE22.mjs");
     const port = await getPort(12445);
     for (const entryFile of entry) {
       const options = await resolveOptions({ entry: entryFile }, "export");

package/dist/{export-QZQV5HQF.mjs → export-2XPAFE22.mjs}

@@ -144,16 +144,44 @@ async function exportSlides({
     });
     await page.waitForLoadState("networkidle");
     await page.emulateMedia({ colorScheme: dark ? "dark" : "light", media: "screen" });
-    const elements = page.locator("[data-waitfor]");
-    const count = await elements.count();
-    for (let index = 0; index < count; index++) {
-      const element = elements.nth(index);
-      const attribute = await element.getAttribute("data-waitfor");
-      if (attribute)
-        await element.locator(attribute).waitFor();
+    {
+      const elements = page.locator(".slidev-slide-loading");
+      const count = await elements.count();
+      for (let index = 0; index < count; index++)
+        await elements.nth(index).waitFor({ state: "detached" });
+    }
+    {
+      const elements = page.locator("[data-waitfor]");
+      const count = await elements.count();
+      for (let index = 0; index < count; index++) {
+        const element = elements.nth(index);
+        const attribute = await element.getAttribute("data-waitfor");
+        if (attribute)
+          await element.locator(attribute).waitFor();
+      }
+    }
+    {
+      const frames = page.frames();
+      await Promise.all(frames.map((frame) => frame.waitForLoadState()));
+    }
+    {
+      const container = page.locator("#mermaid-rendering-container");
+      while (true) {
+        const element = container.locator("div").first();
+        if (await element.count() === 0)
+          break;
+        await element.waitFor({ state: "detached" });
+      }
+      await container.evaluate((node) => node.style.display = "none");
+    }
+    {
+      const elements = page.locator(".monaco-aria-container");
+      const count = await elements.count();
+      for (let index = 0; index < count; index++) {
+        const element = elements.nth(index);
+        await element.evaluate((node) => node.style.display = "none");
+      }
     }
-    const frames = page.frames();
-    await Promise.all(frames.map((frame) => frame.waitForLoadState()));
   }
   async function getSlidesIndex() {
     const clicksBySlide = {};

package/dist/index.mjs

@@ -2,10 +2,10 @@ import {
   createServer,
   parser,
   resolveOptions
-} from "./chunk-AUSTPPCJ.mjs";
+} from "./chunk-TKQ4IRDS.mjs";
 import {
   ViteSlidevPlugin
-} from "./chunk-NSAYO3FG.mjs";
+} from "./chunk-7IY2RRV6.mjs";
 import "./chunk-O6TYYGU6.mjs";
 import "./chunk-CV7OWJOF.mjs";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/cli",
-  "version": "0.48.0-beta.21",
+  "version": "0.48.0-beta.23",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -44,7 +44,7 @@
   "dependencies": {
     "@antfu/ni": "^0.21.12",
     "@antfu/utils": "^0.7.7",
-    "@iconify-json/carbon": "^1.1.30",
+    "@iconify-json/carbon": "^1.1.31",
     "@iconify-json/ph": "^1.1.11",
     "@iconify-json/svg-spinners": "^1.1.2",
     "@lillallol/outline-pdf": "^4.0.0",
@@ -55,6 +55,7 @@
     "@unocss/reset": "^0.58.5",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "chokidar": "^3.6.0",
     "cli-progress": "^3.12.0",
     "codemirror": "^5.65.16",
     "connect": "^3.7.0",
@@ -88,16 +89,16 @@
     "resolve-global": "^2.0.0",
     "semver": "^7.6.0",
     "shiki": "^1.1.7",
-    "shiki-magic-move": "^0.1.0",
+    "shiki-magic-move": "^0.3.4",
     "sirv": "^2.0.4",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
     "unocss": "^0.58.5",
     "unplugin-icons": "^0.18.5",
     "unplugin-vue-components": "^0.26.0",
     "unplugin-vue-markdown": "^0.26.0",
     "untun": "^0.1.3",
     "uqr": "^0.1.2",
-    "vite": "^5.1.4",
+    "vite": "^5.1.5",
     "vite-plugin-inspect": "^0.8.3",
     "vite-plugin-remote-assets": "^0.4.1",
     "vite-plugin-static-copy": "^1.0.1",
@@ -105,9 +106,9 @@
     "vitefu": "^0.2.5",
     "vue": "^3.4.21",
     "yargs": "^17.7.2",
-    "@slidev/parser": "0.48.0-beta.21",
-    "@slidev/client": "0.48.0-beta.21",
-    "@slidev/types": "0.48.0-beta.21"
+    "@slidev/parser": "0.48.0-beta.23",
+    "@slidev/client": "0.48.0-beta.23",
+    "@slidev/types": "0.48.0-beta.23"
   },
   "devDependencies": {
     "@hedgedoc/markdown-it-plugins": "^2.1.4",

package/template.md

@@ -3,7 +3,7 @@
 theme: seriph
 # random image from a curated Unsplash collection by Anthony
 # like them? see https://unsplash.com/collections/94734566/slidev
-background: https://source.unsplash.com/collection/94734566/1920x1080
+background: https://cover.sli.dev
 # apply any unocss classes to the current slide
 class: 'text-center'
 # https://sli.dev/custom/highlighters.html
@@ -126,7 +126,7 @@ Hover on the bottom-left corner to see the navigation's controls panel, [learn m
 
 ---
 layout: image-right
-image: https://source.unsplash.com/collection/94734566/1920x1080
+image: https://cover.sli.dev
 ---
 
 # Code