@slidev/cli 0.48.0-beta.22 → 0.48.0-beta.24

package/dist/{build-LKM3MI3R.mjs → build-DPVTCX6R.mjs}

@@ -2,7 +2,7 @@ import {
   ViteSlidevPlugin,
   getIndexHtml,
   mergeViteConfigs
-} from "./chunk-ADTW2LD4.mjs";
+} from "./chunk-4HUKWYZE.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-ADTW2LD4.mjs → chunk-4HUKWYZE.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-CV7OWJOF.mjs";
 
 // package.json
-var version = "0.48.0-beta.22";
+var version = "0.48.0-beta.24";
 
 // node/common.ts
 import { existsSync, promises as fs } from "node:fs";
@@ -168,15 +168,16 @@ 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.3.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"
 };
 
@@ -204,6 +205,7 @@ var EXCLUDE = [
   "@slidev/client/constants",
   "@slidev/client/logic/dark",
   "@vueuse/core",
+  "@vueuse/math",
   "@vueuse/shared",
   "@unocss/reset",
   "unocss",
@@ -948,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) {
@@ -1227,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;
@@ -1239,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 || "")
                 }
@@ -1250,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])
             }
           );
@@ -1590,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 = [
@@ -1636,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) {
@@ -1703,12 +1713,12 @@ ${Object.entries(layouts).map(([k, v]) => `"${k}": ${v}`).join(",\n")}
       `const data = [
 ${slides.join(",\n")}
 ]`,
-      `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.data.slides ??= shallowRef()`,
+      `  import.meta.hot.data.slides.value = data`,
       `  import.meta.hot.accept()`,
-      `}`
+      `}`,
+      `export const slides = import.meta.hot ? import.meta.hot.data.slides : shallowRef(data)`
     ].join("\n");
   }
   function generateDummyRoutes() {
@@ -2070,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-BUGWF6XJ.mjs → chunk-C5FCGW35.mjs}

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

package/dist/cli.mjs

@@ -5,10 +5,10 @@ import {
   resolveAddons,
   resolveOptions,
   resolveTheme
-} from "./chunk-BUGWF6XJ.mjs";
+} from "./chunk-C5FCGW35.mjs";
 import {
   version
-} from "./chunk-ADTW2LD4.mjs";
+} from "./chunk-4HUKWYZE.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-LKM3MI3R.mjs");
+    const { build } = await import("./build-DPVTCX6R.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-BUGWF6XJ.mjs";
+} from "./chunk-C5FCGW35.mjs";
 import {
   ViteSlidevPlugin
-} from "./chunk-ADTW2LD4.mjs";
+} from "./chunk-4HUKWYZE.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.22",
+  "version": "0.48.0-beta.24",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -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.3.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/types": "0.48.0-beta.22",
-    "@slidev/parser": "0.48.0-beta.22",
-    "@slidev/client": "0.48.0-beta.22"
+    "@slidev/client": "0.48.0-beta.24",
+    "@slidev/parser": "0.48.0-beta.24",
+    "@slidev/types": "0.48.0-beta.24"
   },
   "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