fix: load mermaid as normal now that inline is safely below bundle size

Jacky Zhao

2025-03-10 b00198b88833b4536dfc1fa3b068a8d1d6e94a86

fix: load mermaid as normal now that inline is safely below bundle size

 quartz/components/renderPage.tsx

@@ -9,9 +9,6 @@
import { Root, Element, ElementContent } from "hast"
import { GlobalConfiguration } from "../cfg"
import { i18n } from "../i18n"
// @ts-ignore
import mermaidScript from "./scripts/mermaid.inline"
import mermaidStyle from "./styles/mermaid.inline.scss"
import { QuartzPluginData } from "../plugins/vfile"

interface RenderComponents {
@@ -65,17 +62,6 @@
    contentType: "external",
  })

  // dynamic afterDOMReady must come after postscript.js
  if (fileData.hasMermaidDiagram) {
    resources.js.push({
      script: mermaidScript,
      loadTime: "afterDOMReady",
      moduleType: "module",
      contentType: "inline",
    })
    resources.css.push({ content: mermaidStyle, inline: true })
  }

  return resources
}


 quartz/components/scripts/mermaid.inline.ts

@@ -1,4 +1,4 @@
import { removeAllChildren } from "./util"
import { registerEscapeHandler, removeAllChildren } from "./util"

interface Position {
  x: number
@@ -158,7 +158,7 @@
  )

  mermaidImport ||= await import(
    //@ts-ignore
    // @ts-ignore
    "https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.esm.min.mjs"
  )
  const mermaid = mermaidImport.default
@@ -237,12 +237,12 @@

    closeBtn.addEventListener("click", hideMermaid)
    expandBtn.addEventListener("click", showMermaid)
    registerEscapeHandler(popupContainer, hideMermaid)
    document.addEventListener("keydown", handleEscape)

    window.addCleanup(() => {
      closeBtn.removeEventListener("click", hideMermaid)
      expandBtn.removeEventListener("click", showMermaid)
      document.removeEventListener("keydown", handleEscape)
    })
  }
})

 quartz/plugins/transformers/ofm.ts

@@ -16,9 +16,12 @@
import { splitAnchor } from "../../util/path"
import { JSResource, CSSResource } from "../../util/resources"
// @ts-ignore
import calloutScript from "../../components/scripts/callout.inline.ts"
import calloutScript from "../../components/scripts/callout.inline"
// @ts-ignore
import checkboxScript from "../../components/scripts/checkbox.inline.ts"
import checkboxScript from "../../components/scripts/checkbox.inline"
// @ts-ignore
import mermaidScript from "../../components/scripts/mermaid.inline"
import mermaidStyle from "../../components/styles/mermaid.inline.scss"
import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path"
import { toHast } from "mdast-util-to-hast"
import { toHtml } from "hast-util-to-html"
@@ -806,6 +809,20 @@
        })
      }

      if (opts.mermaid) {
        js.push({
          script: mermaidScript,
          loadTime: "afterDOMReady",
          contentType: "inline",
          moduleType: "module",
        })

        css.push({
          content: mermaidStyle,
          inline: true,
        })
      }

      return { js, css }
    },
  }