From 882e4971eb3f566a4e50083cc8adf9ac3437dce5 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 1 Mar 2024 12:54:42 +0530
Subject: [PATCH] Remove katex from mermaid.tiny

---
 .esbuild/build.ts                             |  2 +-
 .esbuild/util.ts                              | 12 ++---
 .vite/build.ts                                |  2 +-
 .../src/diagram-api/diagram-orchestration.ts  |  2 +-
 .../mermaid/src/diagrams/common/common.ts     | 45 +++++++++++--------
 packages/mermaid/src/mermaidAPI.ts            |  2 +-
 packages/mermaid/src/type.d.ts                |  2 +-
 vite.config.ts                                |  2 +-
 8 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/.esbuild/build.ts b/.esbuild/build.ts
index 48b2f89b6..3eea8dfe2 100644
--- a/.esbuild/build.ts
+++ b/.esbuild/build.ts
@@ -32,7 +32,7 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
       {
         ...iifeOptions,
         minify: true,
-        includeLargeDiagrams: false,
+        includeLargeFeatures: false,
         metafile: shouldVisualize,
       }
     );
diff --git a/.esbuild/util.ts b/.esbuild/util.ts
index ce0db6047..0048da94e 100644
--- a/.esbuild/util.ts
+++ b/.esbuild/util.ts
@@ -14,7 +14,7 @@ export interface MermaidBuildOptions {
   metafile: boolean;
   format: 'esm' | 'iife';
   entryName: keyof typeof packageOptions;
-  includeLargeDiagrams: boolean;
+  includeLargeFeatures: boolean;
 }
 
 export const defaultOptions: Omit<MermaidBuildOptions, 'entryName'> = {
@@ -22,7 +22,7 @@ export const defaultOptions: Omit<MermaidBuildOptions, 'entryName'> = {
   metafile: false,
   core: false,
   format: 'esm',
-  includeLargeDiagrams: true,
+  includeLargeFeatures: true,
 } as const;
 
 const buildOptions = (override: BuildOptions): BuildOptions => {
@@ -43,14 +43,14 @@ const buildOptions = (override: BuildOptions): BuildOptions => {
 
 const getFileName = (
   fileName: string,
-  { core, format, minify, includeLargeDiagrams }: MermaidBuildOptions
+  { core, format, minify, includeLargeFeatures }: MermaidBuildOptions
 ) => {
   if (core) {
     fileName += '.core';
   } else if (format === 'esm') {
     fileName += '.esm';
   }
-  if (!includeLargeDiagrams) {
+  if (!includeLargeFeatures) {
     fileName += '.tiny';
   }
   if (minify) {
@@ -60,7 +60,7 @@ const getFileName = (
 };
 
 export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
-  const { core, entryName, metafile, format, includeLargeDiagrams, minify } = options;
+  const { core, entryName, metafile, format, includeLargeFeatures, minify } = options;
   const external: string[] = ['require', 'fs', 'path'];
   const { name, file, packageName } = packageOptions[entryName];
   const outFileName = getFileName(name, options);
@@ -75,7 +75,7 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
     chunkNames: `chunks/${outFileName}/[name]-[hash]`,
     define: {
       // This needs to be stringified for esbuild
-      includeLargeDiagrams: `${includeLargeDiagrams}`,
+      includeLargeFeatures: `${includeLargeFeatures}`,
       'import.meta.vitest': 'undefined',
     },
   });
diff --git a/.vite/build.ts b/.vite/build.ts
index 9f9dcb7c5..a7e3cb0a4 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -95,7 +95,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     ],
     define: {
       // Needs to be string
-      includeLargeDiagrams: 'true',
+      includeLargeFeatures: 'true',
     },
   };
 
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 82904257a..63fe19cdd 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -68,7 +68,7 @@ export const addDiagrams = () => {
     }
   );
 
-  if (includeLargeDiagrams) {
+  if (includeLargeFeatures) {
     registerLazyLoadedDiagrams(flowchartElk, mindmap);
   }
 
diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index 04be2a5f4..5ae4a358f 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -341,29 +341,36 @@ export const renderKatex = async (text: string, config: MermaidConfig): Promise<
     return text.replace(katexRegex, 'MathML is unsupported in this environment.');
   }
 
-  const { default: katex } = await import('katex');
-  return text
-    .split(lineBreakRegex)
-    .map((line) =>
-      hasKatex(line)
-        ? `
+  if (includeLargeFeatures) {
+    const { default: katex } = await import('katex');
+    return text
+      .split(lineBreakRegex)
+      .map((line) =>
+        hasKatex(line)
+          ? `
             <div style="display: flex; align-items: center; justify-content: center; white-space: nowrap;">
               ${line}
             </div>
           `
-        : `<div>${line}</div>`
-    )
-    .join('')
-    .replace(katexRegex, (_, c) =>
-      katex
-        .renderToString(c, {
-          throwOnError: true,
-          displayMode: true,
-          output: isMathMLSupported() ? 'mathml' : 'htmlAndMathml',
-        })
-        .replace(/\n/g, ' ')
-        .replace(/<annotation.*<\/annotation>/g, '')
-    );
+          : `<div>${line}</div>`
+      )
+      .join('')
+      .replace(katexRegex, (_, c) =>
+        katex
+          .renderToString(c, {
+            throwOnError: true,
+            displayMode: true,
+            output: isMathMLSupported() ? 'mathml' : 'htmlAndMathml',
+          })
+          .replace(/\n/g, ' ')
+          .replace(/<annotation.*<\/annotation>/g, '')
+      );
+  }
+
+  return text.replace(
+    katexRegex,
+    'Katex is unsupported in mermaid.tiny.js. Please use mermaid.js or mermaid.min.js.'
+  );
 };
 
 export default {
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index e8539b74c..01e8150f5 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -32,7 +32,7 @@ import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.
 import { preprocessDiagram } from './preprocess.js';
 import { decodeEntities } from './utils.js';
 
-const version = packageVersion + (includeLargeDiagrams ? '' : '-tiny');
+const version = packageVersion + (includeLargeFeatures ? '' : '-tiny');
 
 const MAX_TEXTLENGTH = 50_000;
 const MAX_TEXTLENGTH_EXCEEDED_MSG =
diff --git a/packages/mermaid/src/type.d.ts b/packages/mermaid/src/type.d.ts
index 2962683cc..0c88e4866 100644
--- a/packages/mermaid/src/type.d.ts
+++ b/packages/mermaid/src/type.d.ts
@@ -1,2 +1,2 @@
 // eslint-disable-next-line no-var
-declare var includeLargeDiagrams: boolean;
+declare var includeLargeFeatures: boolean;
diff --git a/vite.config.ts b/vite.config.ts
index 2c6244e9f..0cbf36013 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -36,7 +36,7 @@ export default defineConfig({
   },
   define: {
     // Needs to be string
-    includeLargeDiagrams: 'true',
+    includeLargeFeatures: 'true',
     'import.meta.vitest': 'undefined',
   },
 });