@slidev/client 0.40.6 → 0.40.7

package/builtin/Mermaid.vue

@@ -13,7 +13,7 @@ pie
 -->
 
 <script setup lang="ts">
-import { computed, getCurrentInstance, ref, watch, watchEffect } from 'vue'
+import { getCurrentInstance, ref, watch, watchEffect } from 'vue'
 import { renderMermaid } from '../modules/mermaid'
 import ShadowRoot from '../internals/ShadowRoot.vue'
 import { isDark } from '../logic/dark'
@@ -26,14 +26,24 @@ const props = defineProps<{
 
 const vm = getCurrentInstance()
 const el = ref<HTMLDivElement>()
-const svgObj = computed(() => renderMermaid(
-  props.code || '',
-  {
-    theme: props.theme || (isDark.value ? 'dark' : undefined),
-    ...vm!.attrs,
-  },
-))
-const html = computed(() => svgObj.value)
+const html = ref('')
+
+watchEffect(async (onCleanup) => {
+  let disposed = false
+  onCleanup(() => {
+    disposed = true
+  })
+  const svg = await renderMermaid(
+    props.code || '',
+    {
+      theme: props.theme || (isDark.value ? 'dark' : undefined),
+      ...vm!.attrs,
+    },
+  )
+  if (!disposed)
+    html.value = svg
+})
+
 const actualHeight = ref<number>()
 
 watch(html, () => {

package/modules/mermaid.ts

@@ -1,4 +1,4 @@
-import mermaid from 'mermaid/dist/mermaid'
+import mermaid from 'mermaid/dist/mermaid.esm.mjs'
 import { customAlphabet } from 'nanoid'
 import { decode } from 'js-base64'
 import { clearUndefined } from '@antfu/utils'
@@ -10,7 +10,7 @@ mermaid.initialize({ startOnLoad: false })
 const nanoid = customAlphabet('abcedfghicklmn', 10)
 const cache = new Map<string, string>()
 
-export function renderMermaid(encoded: string, options: any) {
+export async function renderMermaid(encoded: string, options: any) {
   const key = encoded + JSON.stringify(options)
   const _cache = cache.get(key)
   if (_cache)
@@ -23,7 +23,7 @@ export function renderMermaid(encoded: string, options: any) {
   })
   const code = decode(encoded)
   const id = nanoid()
-  const svg = mermaid.render(id, code) as string
+  const { svg } = await mermaid.render(id, code)
   cache.set(key, svg)
   return svg
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.40.6",
+  "version": "0.40.7",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.2",
-    "@unocss/reset": "^0.50.6",
+    "@unocss/reset": "^0.51.0",
     "@vueuse/core": "^9.13.0",
     "@vueuse/head": "^1.1.23",
     "@vueuse/math": "^9.13.0",
@@ -29,20 +29,20 @@
     "js-base64": "^3.7.5",
     "js-yaml": "^4.1.0",
     "katex": "^0.16.4",
-    "mermaid": "^9.4.3",
+    "mermaid": "^10.1.0",
     "monaco-editor": "^0.33.0",
     "nanoid": "^4.0.2",
     "prettier": "^2.8.7",
     "recordrtc": "^5.6.2",
-    "resolve": "^1.22.1",
-    "unocss": "^0.50.6",
+    "resolve": "^1.22.2",
+    "unocss": "^0.51.0",
     "vite-plugin-windicss": "^1.8.10",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "vue-starport": "^0.3.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.40.6",
-    "@slidev/types": "0.40.6"
+    "@slidev/parser": "0.40.7",
+    "@slidev/types": "0.40.7"
   },
   "devDependencies": {
     "vite": "^4.2.1"

package/shim.d.ts

@@ -15,3 +15,8 @@ declare module '/@slidev/configs' {
   import { SlidevConfig } from '@slidev/types'
   export default SlidevConfig
 }
+
+declare module 'mermaid/dist/mermaid.esm.mjs' {
+  import Mermaid from 'mermaid/dist/mermaid.d.ts'
+  export default Mermaid
+}