tsConversion: mermaidAPI

docs/Setup.md

@@ -1402,15 +1402,6 @@ This sets the auto-wrap padding for the diagram (sides only)
 
 **Notes:** Default value: 0.
 
-## parse
-
-### Parameters
-
--   `text`  
--   `dia`  
-
-Returns **any** 
-
 ## setSiteConfig
 
 ## setSiteConfig
@@ -1460,18 +1451,6 @@ corresponding siteConfig value.
 
 Returns **any** The currentConfig merged with the sanitized conf
 
-## getConfig
-
-## getConfig
-
-| Function  | Description               | Type        | Return Values                  |
-| --------- | ------------------------- | ----------- | ------------------------------ |
-| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |
-
-**Notes**: Returns **any** the currentConfig
-
-Returns **any** The currentConfig
-
 ## render
 
 Function that renders an svg with a graph from a chart definition. Usage example below.
@@ -1492,7 +1471,7 @@ $(function () {
 ### Parameters
 
 -   `id` **any** The id of the element to be rendered
--   `_txt` **any** The graph definition
+-   `text` **any** The graph definition
 -   `cb` **any** Callback which is called after rendering is finished with the svg code as inparam.
 -   `container` **any** Selector to element in which a div with the graph temporarily will be
       inserted. In one is provided a hidden div will be inserted in the body of the page instead. The
@@ -1500,6 +1479,18 @@ $(function () {
 
 Returns **any** 
 
+## getConfig
+
+## getConfig
+
+| Function  | Description               | Type        | Return Values                  |
+| --------- | ------------------------- | ----------- | ------------------------------ |
+| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |
+
+**Notes**: Returns **any** the currentConfig
+
+Returns **any** The currentConfig
+
 ## sanitize
 
 ## sanitize
@@ -1539,19 +1530,17 @@ Pushes in a directive to the configuration
 
 **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
 
-Returns **void** 
-
-## updateRendererConfigs
-
 ### Parameters
 
--   `conf` **any** 
+-   `config`   (optional, default `siteConfig`)
+
+Returns **void** 
 
 ## initialize
 
 ### Parameters
 
--   `options` **any** 
+-   `options` **MermaidConfig** 
 
 ## 
 

package.json

@@ -26,7 +26,7 @@
     "build:dev": "webpack --mode development --progress --color",
     "build:prod": "webpack --mode production --progress --color",
     "build": "concurrently \"yarn build:dev\" \"yarn build:prod\"",
-    "postbuild": "documentation build src/mermaidAPI.js src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > docs/Setup.md",
+    "postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > docs/Setup.md",
     "build:watch": "yarn build:dev --watch",
     "release": "yarn build",
     "lint": "eslint ./ --ext .js,.json,.html",
@@ -82,6 +82,7 @@
     "@types/d3": "^7.4.0",
     "@types/dompurify": "^2.3.3",
     "@types/jest": "^28.1.7",
+    "@types/stylis": "^4.0.2",
     "babel-jest": "^28.0.3",
     "babel-loader": "^8.2.2",
     "concurrently": "^7.0.0",

src/Diagram.ts

@@ -2,12 +2,12 @@ import * as configApi from './config';
 import { log } from './logger';
 import { getDiagrams } from './diagram-api/diagramAPI';
 import { detectType } from './diagram-api/detectType';
-class Diagram {
+export class Diagram {
   type = 'graph';
   parser;
   renderer;
   db;
-  constructor(public txt: string) {
+  constructor(public txt: string, parseError?: Function) {
     const diagrams = getDiagrams();
     const cnf = configApi.getConfig();
     this.txt = txt;
@@ -38,39 +38,38 @@ class Diagram {
       const error = { str, hash };
       throw error;
     };
-    this.parser.parse(this.txt);
+    // TODO Q: Should diagrams be parsed inside constructor?
+    this.parse(this.txt, parseError);
   }
 
-  parse(text: string) {
+  parse(text: string, parseError?: Function): boolean {
-    var parseEncounteredException = false;
     try {
       text = text + '\n';
       this.db.clear();
-
       this.parser.parse(text);
+      return true;
     } catch (error) {
-      parseEncounteredException = true;
       // Is this the correct way to access mermiad's parseError()
       // method ? (or global.mermaid.parseError()) ?
       // @ts-ignore
-      if (global.mermaid.parseError) {
+      if (parseError) {
         // @ts-ignore
         if (error.str != undefined) {
           // handle case where error string and hash were
           // wrapped in object like`const error = { str, hash };`
           // @ts-ignore
-          global.mermaid.parseError(error.str, error.hash);
+          parseError(error.str, error.hash);
         } else {
           // assume it is just error string and pass it on
           // @ts-ignore
-          global.mermaid.parseError(error);
+          parseError(error);
         }
       } else {
         // No mermaid.parseError() handler defined, so re-throw it
         throw error;
       }
     }
-    return !parseEncounteredException;
+    return false;
   }
 
   getParser() {

src/config.ts

@@ -218,8 +218,8 @@ export const addDirective = (directive: any) => {
  *
  * **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
  */
-export const reset = (): void => {
+export const reset = (config = siteConfig): void => {
   // Replace current config with siteConfig
   directives = [];
-  updateCurrentConfig(siteConfig, directives);
+  updateCurrentConfig(config, directives);
 };

src/diagrams/flowchart/flowRenderer-v2.js

@@ -2,7 +2,6 @@ import graphlib from 'graphlib';
 import { select, curveLinear, selectAll } from 'd3';
 
 import flowDb from './flowDb';
-import flow from './parser/flow';
 import { getConfig } from '../../config';
 
 import { render } from '../../dagre-wrapper/index.js';
@@ -363,11 +362,10 @@ export const draw = function (text, id, _version, diagObj) {
     dir = 'TD';
   }
 
-  const conf = getConfig().flowchart;
+  const { securityLevel, flowchart: conf } = getConfig();
   const nodeSpacing = conf.nodeSpacing || 50;
   const rankSpacing = conf.rankSpacing || 50;
 
-  const securityLevel = getConfig().securityLevel;
   // Handle root and document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {

src/diagrams/flowchart/flowRenderer.js

@@ -296,7 +296,7 @@ export const getClasses = function (text, diagObj) {
 export const draw = function (text, id, _version, diagObj) {
   log.info('Drawing flowchart');
   diagObj.db.clear();
-  const securityLevel = getConfig().securityLevel;
+  const { securityLevel, flowchart: conf } = getConfig();
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
@@ -319,8 +319,6 @@ export const draw = function (text, id, _version, diagObj) {
   if (typeof dir === 'undefined') {
     dir = 'TD';
   }
-
-  const conf = getConfig().flowchart;
   const nodeSpacing = conf.nodeSpacing || 50;
   const rankSpacing = conf.rankSpacing || 50;
 
@@ -460,7 +458,9 @@ export const draw = function (text, id, _version, diagObj) {
   }
 
   // Add label rects for non html labels
-  if (!evaluate(conf.htmlLabels) || true) { // eslint-disable-line
+  // TODO: This always evaluates to true. Bug?
+  // eslint-disable-next-line no-constant-condition
+  if (!evaluate(conf.htmlLabels) || true) {
     const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
     for (let k = 0; k < labels.length; k++) {
       const label = labels[k];

src/diagrams/sequence/sequenceRenderer.js

@@ -588,8 +588,8 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
  * @param {any} diagObj A stanard diagram containing the db and the text and type etc of the diagram
  */
 export const draw = function (_text, id, _version, diagObj) {
-  conf = configApi.getConfig().sequence;
+  const { securityLevel, sequence } = configApi.getConfig();
-  const securityLevel = configApi.getConfig().securityLevel;
+  conf = sequence;
   // Handle root and Document for when rendering in sanbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {

src/diagrams/state/stateRenderer-v2.js

@@ -248,12 +248,10 @@ export const draw = function (text, id, _version, diag) {
     dir = 'LR';
   }
 
-  const conf = getConfig().state;
+  const { securityLevel, state: conf } = getConfig().state;
   const nodeSpacing = conf.nodeSpacing || 50;
   const rankSpacing = conf.rankSpacing || 50;
 
-  const securityLevel = getConfig().securityLevel;
-
   log.info(diag.db.getRootDocV2());
   diag.db.extract(diag.db.getRootDocV2());
   log.info(diag.db.getRootDocV2());

src/diagrams/user-journey/journeyRenderer.js

@@ -44,8 +44,9 @@ function drawActorLegend(diagram) {
     yPos += 20;
   });
 }
+// TODO: Cleanup?
 const conf = getConfig().journey;
-const LEFT_MARGIN = getConfig().journey.leftMargin;
+const LEFT_MARGIN = conf.leftMargin;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().journey;
   diagObj.db.clear();

src/mermaid.spec.js

@@ -227,5 +227,14 @@ describe('when using mermaid and ', function () {
         'end';
       expect(() => mermaid.parse(text)).toThrow();
     });
+
+    it('should return false for invalid definition WITH a parseError() callback defined', function () {
+      let parseErrorWasCalled = false;
+      mermaid.setParseErrorHandler(() => {
+        parseErrorWasCalled = true;
+      });
+      expect(mermaid.parse('this is not a mermaid diagram definition')).toEqual(false);
+      expect(parseErrorWasCalled).toEqual(true);
+    });
   });
 });

src/mermaid.ts

@@ -4,8 +4,8 @@
  */
 import { MermaidConfig } from './config.type';
 import { log } from './logger';
-import mermaidAPI from './mermaidAPI';
 import utils from './utils';
+import { mermaidAPI } from './mermaidAPI';
 
 /**
  * ## init
@@ -117,7 +117,7 @@ const initThrowsErrors = function (
       mermaidAPI.render(
         id,
         txt,
-        (svgCode: string, bindFunctions: (el: HTMLElement) => void) => {
+        (svgCode: string, bindFunctions?: (el: Element) => void) => {
           element.innerHTML = svgCode;
           if (typeof callback !== 'undefined') {
             callback(id);
@@ -180,23 +180,36 @@ if (typeof document !== 'undefined') {
  * @param {function (err, hash)} newParseErrorHandler New parseError() callback.
  */
 const setParseErrorHandler = function (newParseErrorHandler: (err: any, hash: any) => void) {
-  // @ts-ignore
   mermaid.parseError = newParseErrorHandler;
 };
 
-const mermaid = {
+const parse = (txt: string) => {
+  return mermaidAPI.parse(txt, mermaid.parseError);
+};
+
+const mermaid: {
+  startOnLoad: boolean;
+  diagrams: any;
+  parseError?: Function;
+  mermaidAPI: typeof mermaidAPI;
+  parse: typeof parse;
+  render: typeof mermaidAPI.render;
+  init: typeof init;
+  initThrowsErrors: typeof initThrowsErrors;
+  initialize: typeof initialize;
+  contentLoaded: typeof contentLoaded;
+  setParseErrorHandler: typeof setParseErrorHandler;
+} = {
   startOnLoad: true,
   diagrams: {},
   mermaidAPI,
-  parse: mermaidAPI != undefined ? mermaidAPI.parse : null,
+  parse,
-  render: mermaidAPI != undefined ? mermaidAPI.render : null,
+  render: mermaidAPI.render,
-
   init,
   initThrowsErrors,
   initialize,
   parseError: undefined,
   contentLoaded,
-
   setParseErrorHandler,
 };
 

src/mermaidAPI.spec.js

@@ -47,9 +47,12 @@ describe('when using mermaidAPI and ', function () {
       mermaidAPI.setConfig({ securityLevel: 'strict', logLevel: 1 });
       expect(mermaidAPI.getConfig().logLevel).toBe(1);
       expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
-      mermaidAPI.globalReset();
+      mermaidAPI.reset();
       expect(mermaidAPI.getConfig().logLevel).toBe(0);
       expect(mermaidAPI.getConfig().securityLevel).toBe('loose');
+      mermaidAPI.globalReset();
+      expect(mermaidAPI.getConfig().logLevel).toBe(5);
+      expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
     });
 
     it('should prevent changes to site defaults (sneaky)', function () {
@@ -130,14 +133,13 @@ describe('when using mermaidAPI and ', function () {
       expect(() => mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).not.toThrow();
     });
     it('it should return false for invalid definition WITH a parseError() callback defined', function () {
-      var parseErrorWasCalled = false;
+      let parseErrorWasCalled = false;
       // also test setParseErrorHandler() call working to set mermaid.parseError
-      mermaid.setParseErrorHandler(function (error, hash) {
+      expect(
-        // got here.
+        mermaidAPI.parse('this is not a mermaid diagram definition', () => {
-        parseErrorWasCalled = true;
+          parseErrorWasCalled = true;
-      });
+        })
-      expect(mermaid.parseError).not.toEqual(undefined);
+      ).toEqual(false);
-      expect(mermaidAPI.parse('this is not a mermaid diagram definition')).toEqual(false);
       expect(parseErrorWasCalled).toEqual(true);
     });
     it('it should return true for valid definition', function () {

src/mermaidAPI.ts

@@ -17,19 +17,14 @@
  */
 import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
+// @ts-ignore
 import pkg from '../package.json';
 import * as configApi from './config';
 import { addDiagrams } from './diagram-api/diagram-orchestration';
 import classDb from './diagrams/class/classDb';
 import flowDb from './diagrams/flowchart/flowDb';
 import flowRenderer from './diagrams/flowchart/flowRenderer';
-import flowRendererV2 from './diagrams/flowchart/flowRenderer-v2';
 import ganttDb from './diagrams/gantt/ganttDb';
-import ganttRenderer from './diagrams/gantt/ganttRenderer';
-import sequenceRenderer from './diagrams/sequence/sequenceRenderer';
-import stateRenderer from './diagrams/state/stateRenderer';
-import stateRendererV2 from './diagrams/state/stateRenderer-v2';
-import journeyRenderer from './diagrams/user-journey/journeyRenderer';
 import Diagram from './Diagram';
 import errorRenderer from './errorRenderer';
 import { attachFunctions } from './interactionDb';
@@ -37,50 +32,21 @@ import { log, setLogLevel } from './logger';
 import getStyles from './styles';
 import theme from './themes';
 import utils, { directiveSanitizer } from './utils';
-import assignWithDepth from './assignWithDepth';
 import DOMPurify from 'dompurify';
-import mermaid from './mermaid';
+import { MermaidConfig } from './config.type';
 
 let hasLoadedDiagrams = false;
 
-/**
+function parse(text: string, parseError?: Function): boolean {
- * @param text
- * @param dia
- * @returns {any}
- */
-function parse(text, dia) {
   if (!hasLoadedDiagrams) {
     addDiagrams();
     hasLoadedDiagrams = true;
   }
-  var parseEncounteredException = false;
+  const diagram = new Diagram(text, parseError);
-
+  return diagram.parse(text, parseError);
-  try {
-    const diag = dia ? dia : new Diagram(text);
-    diag.db.clear();
-    return diag.parse(text);
-  } catch (error) {
-    parseEncounteredException = true;
-    // Is this the correct way to access mermiad's parseError()
-    // method ? (or global.mermaid.parseError()) ?
-    if (mermaid.parseError) {
-      if (error.str != undefined) {
-        // handle case where error string and hash were
-        // wrapped in object like`const error = { str, hash };`
-        mermaid.parseError(error.str, error.hash);
-      } else {
-        // assume it is just error string and pass it on
-        mermaid.parseError(error);
-      }
-    } else {
-      // No mermaid.parseError() handler defined, so re-throw it
-      throw error;
-    }
-  }
-  return !parseEncounteredException;
 }
 
-export const encodeEntities = function (text) {
+export const encodeEntities = function (text: string): string {
   let txt = text;
 
   txt = txt.replace(/style.*:\S*#.*;/g, function (s) {
@@ -106,7 +72,7 @@ export const encodeEntities = function (text) {
   return txt;
 };
 
-export const decodeEntities = function (text) {
+export const decodeEntities = function (text: string): string {
   let txt = text;
 
   txt = txt.replace(/fl°°/g, function () {
@@ -138,17 +104,22 @@ export const decodeEntities = function (text) {
  * ```
  *
  * @param {any} id The id of the element to be rendered
- * @param {any} _txt The graph definition
+ * @param {any} text The graph definition
  * @param {any} cb Callback which is called after rendering is finished with the svg code as inparam.
  * @param {any} container Selector to element in which a div with the graph temporarily will be
  *   inserted. In one is provided a hidden div will be inserted in the body of the page instead. The
  *   element will be removed when rendering is completed.
  * @returns {any}
  */
-const render = function (id, _txt, cb, container) {
+const render = function (
+  id: string,
+  text: string,
+  cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
+  container: Element
+) {
   configApi.reset();
-  let txt = _txt.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
+  text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
-  const graphInit = utils.detectInit(txt);
+  const graphInit = utils.detectInit(text);
   if (graphInit) {
     directiveSanitizer(graphInit);
     configApi.addDirective(graphInit);
@@ -158,11 +129,11 @@ const render = function (id, _txt, cb, container) {
   log.debug(cnf);
 
   // Check the maximum allowed text size
-  if (_txt.length > cnf.maxTextSize) {
+  if (text.length > cnf.maxTextSize) {
-    txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
+    text = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
   }
 
-  let root = select('body');
+  let root: any = select('body');
 
   // In regular execution the container will be the div with a mermaid class
   if (typeof container !== 'undefined') {
@@ -174,12 +145,14 @@ const render = function (id, _txt, cb, container) {
         .attr('id', 'i' + id)
         .attr('style', 'width: 100%; height: 100%;')
         .attr('sandbox', '');
-      root = select(iframe.nodes()[0].contentDocument.body);
+      root = select(iframe.nodes()[0]!.contentDocument!.body);
       root.node().style.margin = 0;
     }
 
     // A container was provided by the caller
-    container.innerHTML = '';
+    if (container) {
+      container.innerHTML = '';
+    }
 
     if (cnf.securityLevel === 'sandbox') {
       // IF we are in sandboxed mode, we do everyting mermaid related
@@ -190,7 +163,7 @@ const render = function (id, _txt, cb, container) {
         .attr('style', 'width: 100%; height: 100%;')
         .attr('sandbox', '');
       // const iframeBody = ;
-      root = select(iframe.nodes()[0].contentDocument.body);
+      root = select(iframe.nodes()[0]!.contentDocument!.body);
       root.node().style.margin = 0;
     } else {
       root = select(container);
@@ -238,7 +211,7 @@ const render = function (id, _txt, cb, container) {
         .attr('style', 'width: 100%; height: 100%;')
         .attr('sandbox', '');
 
-      root = select(iframe.nodes()[0].contentDocument.body);
+      root = select(iframe.nodes()[0]!.contentDocument!.body);
       root.node().style.margin = 0;
     } else {
       root = select('body');
@@ -256,10 +229,10 @@ const render = function (id, _txt, cb, container) {
       .append('g');
   }
 
-  txt = encodeEntities(txt);
+  text = encodeEntities(text);
 
   // Important that we do not create the diagram until after the directives have been included
-  const diag = new Diagram(txt);
+  const diag = new Diagram(text);
   // Get the tmp element containing the the svg
   const element = root.select('#d' + id).node();
   const graphType = diag.type;
@@ -286,7 +259,7 @@ const render = function (id, _txt, cb, container) {
 
   // classDef
   if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
-    const classes = flowRenderer.getClasses(txt, diag);
+    const classes: any = flowRenderer.getClasses(text, diag);
     const htmlLabels = cnf.htmlLabels || cnf.flowchart.htmlLabels;
     for (const className in classes) {
       if (htmlLabels) {
@@ -321,7 +294,8 @@ const render = function (id, _txt, cb, container) {
     }
   }
 
-  const stylis = (selector, styles) => serialize(compile(`${selector}{${styles}}`), stringify);
+  const stylis = (selector: string, styles: string) =>
+    serialize(compile(`${selector}{${styles}}`), stringify);
   const rules = stylis(`#${id}`, getStyles(graphType, userStyles, cnf.themeVariables));
 
   const style1 = document.createElement('style');
@@ -329,7 +303,7 @@ const render = function (id, _txt, cb, container) {
   svg.insertBefore(style1, firstChild);
 
   try {
-    diag.renderer.draw(txt, id, pkg.version, diag);
+    diag.renderer.draw(text, id, pkg.version, diag);
   } catch (e) {
     errorRenderer.draw(id, pkg.version);
     throw e;
@@ -400,16 +374,16 @@ const render = function (id, _txt, cb, container) {
 
   const tmpElementSelector = cnf.securityLevel === 'sandbox' ? '#i' + id : '#d' + id;
   const node = select(tmpElementSelector).node();
-  if (node !== null && typeof node.remove === 'function') {
+  if (node && 'remove' in node) {
-    select(tmpElementSelector).node().remove();
+    node.remove();
   }
 
   return svgCode;
 };
 
-let currentDirective = {};
+let currentDirective: { type?: string; args?: any } | undefined = {};
 
-const parseDirective = function (p, statement, context, type) {
+const parseDirective = function (p: any, statement: string, context: string, type: string): void {
   try {
     if (statement !== undefined) {
       statement = statement.trim();
@@ -418,14 +392,16 @@ const parseDirective = function (p, statement, context, type) {
           currentDirective = {};
           break;
         case 'type_directive':
+          if (!currentDirective) throw new Error('currentDirective is undefined');
           currentDirective.type = statement.toLowerCase();
           break;
         case 'arg_directive':
+          if (!currentDirective) throw new Error('currentDirective is undefined');
           currentDirective.args = JSON.parse(statement);
           break;
         case 'close_directive':
           handleDirective(p, currentDirective, type);
-          currentDirective = null;
+          currentDirective = undefined;
           break;
       }
     }
@@ -433,11 +409,12 @@ const parseDirective = function (p, statement, context, type) {
     log.error(
       `Error while rendering sequenceDiagram directive: ${statement} jison context: ${context}`
     );
+    // @ts-ignore
     log.error(error.message);
   }
 };
 
-const handleDirective = function (p, directive, type) {
+const handleDirective = function (p: any, directive: any, type: string): void {
   log.debug(`Directive type=${directive.type} with args:`, directive.args);
   switch (directive.type) {
     case 'init':
@@ -477,27 +454,8 @@ const handleDirective = function (p, directive, type) {
   }
 };
 
-/** @param {any} conf */
+/** @param {MermaidConfig} options */
-function updateRendererConfigs(conf) {
+function initialize(options: MermaidConfig) {
-  // Todo remove, all diagrams should get config on demand from the config object, no need for this
-
-  flowRenderer.setConf(conf.flowchart);
-  flowRendererV2.setConf(conf.flowchart);
-  if (typeof conf['sequenceDiagram'] !== 'undefined') {
-    sequenceRenderer.setConf(assignWithDepth(conf.sequence, conf['sequenceDiagram']));
-  }
-  sequenceRenderer.setConf(conf.sequence);
-  ganttRenderer.setConf(conf.gantt);
-  // classRenderer.setConf(conf.class);
-  stateRenderer.setConf(conf.state);
-  stateRendererV2.setConf(conf.state);
-  // infoRenderer.setConf(conf.class);
-  journeyRenderer.setConf(conf.journey);
-  errorRenderer.setConf(conf.class);
-}
-
-/** @param {any} options */
-function initialize(options) {
   // Handle legacy location of font-family configuration
   if (options?.fontFamily) {
     if (!options.themeVariables?.fontFamily) {
@@ -508,9 +466,11 @@ function initialize(options) {
   // Set default options
   configApi.saveConfigFromInitialize(options);
 
-  if (options?.theme && theme[options.theme]) {
+  if (options?.theme && options.theme in theme) {
     // Todo merge with user options
-    options.themeVariables = theme[options.theme].getThemeVariables(options.themeVariables);
+    options.themeVariables = theme[options.theme as keyof typeof theme].getThemeVariables(
+      options.themeVariables
+    );
   } else if (options) {
     options.themeVariables = theme.default.getThemeVariables(options.themeVariables);
   }
@@ -518,7 +478,6 @@ function initialize(options) {
   const config =
     typeof options === 'object' ? configApi.setSiteConfig(options) : configApi.getSiteConfig();
 
-  updateRendererConfigs(config);
   setLogLevel(config.logLevel);
   if (!hasLoadedDiagrams) {
     addDiagrams();
@@ -526,7 +485,7 @@ function initialize(options) {
   }
 }
 
-const mermaidAPI = Object.freeze({
+export const mermaidAPI = Object.freeze({
   render,
   parse,
   parseDirective,
@@ -540,14 +499,13 @@ const mermaidAPI = Object.freeze({
   },
   globalReset: () => {
     configApi.reset(configApi.defaultConfig);
-    updateRendererConfigs(configApi.getConfig());
   },
   defaultConfig: configApi.defaultConfig,
 });
 
 setLogLevel(configApi.getConfig().logLevel);
 configApi.reset(configApi.getConfig());
-
+console.log(mermaidAPI);
 export default mermaidAPI;
 /**
  * ## mermaidAPI configuration defaults

tsconfig.json

@@ -35,7 +35,7 @@
     // "typeRoots": [] /* Specify multiple folders that act like `./node_modules/@types`. */,
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files */
+    "resolveJsonModule": true /* Enable importing .json files */,
     // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
 
     /* JavaScript Support */
@@ -100,5 +100,5 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */
   },
-  "include": ["./src/**/*.ts"]
+  "include": ["./src/**/*.ts", "./package.json"]
 }

yarn.lock

@@ -2677,6 +2677,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
+"@types/stylis@^4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.0.2.tgz#311c62d68a23dfb01462d54b04549484a4c5cb2a"
+  integrity sha512-wtckGuk1eXUlUz0Qb1eXHG37Z7HWT2GfMdqRf8F/ifddTwadSS9Jwsqi4qtXk7cP7MtoyGVIHPElFCLc6HItbg==
+
 "@types/tough-cookie@*":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"