Merge branch 'develop' into sidv/esbuild

* develop:
  Suppress errors
  Introduce stricter linting
  Introduce stricter linting

.eslintignore

@@ -1,3 +1,5 @@
 dist/**
 .github/**
 docs/Setup.md
+cypress.config.js
+cypress/plugins/index.js

.eslintrc.json

@@ -15,6 +15,7 @@
   },
   "extends": [
     "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:jsdoc/recommended",
     "plugin:json/recommended",
     "plugin:markdown/recommended",
@@ -36,6 +37,16 @@
     "jsdoc/require-returns": "off",
     "jsdoc/require-returns-description": "off",
     "cypress/no-async-tests": "off",
+    "@typescript-eslint/ban-ts-comment": [
+      "error",
+      {
+        "ts-expect-error": "allow-with-description",
+        "ts-ignore": "allow-with-description",
+        "ts-nocheck": "allow-with-description",
+        "ts-check": "allow-with-description",
+        "minimumDescriptionLength": 10
+      }
+    ],
     "json/*": ["error", "allowComments"],
     "no-empty": ["error", { "allowEmptyCatch": true }]
   },

cypress.config.js

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 const { defineConfig } = require('cypress');
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
 require('@applitools/eyes-cypress')(module);

cypress/plugins/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 // ***********************************************************
 // This example plugins/index.js can be used to load plugins
 //

demos/index.html

@@ -1083,7 +1083,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     <script>
       const testLineEndings = (test, input) => {
         try {
-          mermaid.render(test, input, () => {});
+          mermaid.render(test, input, () => {
+            //no-op
+          });
         } catch (err) {
           console.error('Error in %s:\n\n%s', test, err);
         }

jest.config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const path = require('path');
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {

src/Diagram.ts

@@ -8,6 +8,7 @@ export class Diagram {
   parser;
   renderer;
   db;
+  // eslint-disable-next-line @typescript-eslint/ban-types
   constructor(public txt: string, parseError?: Function) {
     const cnf = configApi.getConfig();
     this.txt = txt;
@@ -33,6 +34,7 @@ export class Diagram {
     this.parse(this.txt, parseError);
   }
 
+  // eslint-disable-next-line @typescript-eslint/ban-types
   parse(text: string, parseError?: Function): boolean {
     try {
       text = text + '\n';

src/__mocks__/mermaidAPI.ts

@@ -19,6 +19,7 @@ let hasLoadedDiagrams = false;
  * @param text
  * @param parseError
  */
+// eslint-disable-next-line @typescript-eslint/ban-types
 function parse(text: string, parseError?: Function): boolean {
   if (!hasLoadedDiagrams) {
     addDiagrams();

src/config.ts

@@ -62,9 +62,9 @@ export const setSiteConfig = (conf: MermaidConfig): MermaidConfig => {
   siteConfig = assignWithDepth({}, defaultConfig);
   siteConfig = assignWithDepth(siteConfig, conf);
 
-  // @ts-ignore
+  // @ts-ignore: TODO Fix ts errors
   if (conf.theme && theme[conf.theme]) {
-    // @ts-ignore
+    // @ts-ignore: TODO Fix ts errors
     siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);
   }
 
@@ -216,6 +216,8 @@ export const addDirective = (directive: any) => {
  * | conf      | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
  *
  * **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
+ *
+ * @param config
  */
 export const reset = (config = siteConfig): void => {
   // Replace current config with siteConfig

src/config.type.ts

@@ -219,7 +219,8 @@ export interface MindmapDiagramConfig extends BaseDiagramConfig {
   padding: number;
   maxNodeWidth: number;
 }
-export interface PieDiagramConfig extends BaseDiagramConfig {}
+
+export type PieDiagramConfig = BaseDiagramConfig;
 
 export interface ErDiagramConfig extends BaseDiagramConfig {
   diagramPadding?: number;

src/diagram-api/diagram-orchestration.ts

@@ -1,14 +1,14 @@
 import { registerDiagram } from './diagramAPI';
 import * as mindmapDb from '../diagrams/mindmap/mindmapDb';
 import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import mindmapParser from '../diagrams/mindmap/parser/mindmap';
 import { mindmapDetector } from '../diagrams/mindmap/mindmapDetector';
 import mindmapStyles from '../diagrams/mindmap/styles';
 
 import gitGraphDb from '../diagrams/git/gitGraphAst';
 import gitGraphRenderer from '../diagrams/git/gitGraphRenderer';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import gitGraphParser from '../diagrams/git/parser/gitGraph';
 import { gitGraphDetector } from '../diagrams/git/gitGraphDetector';
 import gitGraphStyles from '../diagrams/git/styles';

src/diagram-api/diagramAPI.ts

@@ -1,52 +1,52 @@
 import c4Db from '../diagrams/c4/c4Db';
 import c4Renderer from '../diagrams/c4/c4Renderer';
 import c4Styles from '../diagrams/c4/styles';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import c4Parser from '../diagrams/c4/parser/c4Diagram';
 import classDb from '../diagrams/class/classDb';
 import classRenderer from '../diagrams/class/classRenderer';
 import classRendererV2 from '../diagrams/class/classRenderer-v2';
 import classStyles from '../diagrams/class/styles';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import classParser from '../diagrams/class/parser/classDiagram';
 import erDb from '../diagrams/er/erDb';
 import erRenderer from '../diagrams/er/erRenderer';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import erParser from '../diagrams/er/parser/erDiagram';
 import erStyles from '../diagrams/er/styles';
 import flowDb from '../diagrams/flowchart/flowDb';
 import flowRenderer from '../diagrams/flowchart/flowRenderer';
 import flowRendererV2 from '../diagrams/flowchart/flowRenderer-v2';
 import flowStyles from '../diagrams/flowchart/styles';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import flowParser from '../diagrams/flowchart/parser/flow';
 import ganttDb from '../diagrams/gantt/ganttDb';
 import ganttRenderer from '../diagrams/gantt/ganttRenderer';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import ganttParser from '../diagrams/gantt/parser/gantt';
 import ganttStyles from '../diagrams/gantt/styles';
 
 import infoDb from '../diagrams/info/infoDb';
 import infoRenderer from '../diagrams/info/infoRenderer';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import infoParser from '../diagrams/info/parser/info';
 import infoStyles from '../diagrams/info/styles';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import pieParser from '../diagrams/pie/parser/pie';
 import pieDb from '../diagrams/pie/pieDb';
 import pieRenderer from '../diagrams/pie/pieRenderer';
 import pieStyles from '../diagrams/pie/styles';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import requirementParser from '../diagrams/requirement/parser/requirementDiagram';
 import requirementDb from '../diagrams/requirement/requirementDb';
 import requirementRenderer from '../diagrams/requirement/requirementRenderer';
 import requirementStyles from '../diagrams/requirement/styles';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import sequenceParser from '../diagrams/sequence/parser/sequenceDiagram';
 import sequenceDb from '../diagrams/sequence/sequenceDb';
 import sequenceRenderer from '../diagrams/sequence/sequenceRenderer';
 import sequenceStyles from '../diagrams/sequence/styles';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import stateParser from '../diagrams/state/parser/stateDiagram';
 import stateDb from '../diagrams/state/stateDb';
 import stateRenderer from '../diagrams/state/stateRenderer';
@@ -55,7 +55,7 @@ import stateStyles from '../diagrams/state/styles';
 import journeyDb from '../diagrams/user-journey/journeyDb';
 import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
 import journeyStyles from '../diagrams/user-journey/styles';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import journeyParser from '../diagrams/user-journey/parser/journey';
 import { addDetector, DiagramDetector } from './detectType';
 import { log as _log } from '../logger';

src/diagrams/class/classDiagramGrammar.spec.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const fs = require('fs');
 
 import { LALRGenerator } from 'jison';

src/diagrams/git/mockDb.js

@@ -173,7 +173,9 @@ export const getCommits = () => {
     },
   };
 };
-export const clear = () => {};
+export const clear = () => {
+  //no-op
+};
 export const getBranchesAsObjArray = () => [
   {
     name: 'master',

src/diagrams/info/info.spec.js

@@ -1,12 +1,14 @@
+import { parser } from './parser/info';
+import infoDb from './infoDb';
 describe('when parsing an info graph it', function () {
-  var ex;
+  let ex;
   beforeEach(function () {
-    ex = require('./parser/info').parser;
+    ex = parser;
-    ex.yy = require('./infoDb');
+    ex.yy = infoDb;
   });
 
   it('should handle an info definition', function () {
-    var str = `info
+    let str = `info
     showInfo`;
 
     ex.parse(str);

src/diagrams/mindmap/mindmap.spec.js

@@ -1,11 +1,10 @@
+import { parser as mindmap } from './parser/mindmap';
 import * as mindmapDB from './mindmapDb';
 import { setLogLevel } from '../../logger';
 
 describe('when parsing a mindmap ', function () {
-  let mindmap;
   beforeEach(function () {
-    mindmap = require('./parser/mindmap').parser;
+    mindmap.yy = mindmapDB;
-    mindmap.yy = require('./mindmapDb');
     mindmap.yy.clear();
     setLogLevel('trace');
   });

src/diagrams/sequence/sequenceRenderer.ts

@@ -1,4 +1,4 @@
-// @ts-nocheck
+// @ts-nocheck TODO: fix file
 import { select, selectAll } from 'd3';
 import svgDraw, { drawText, fixLifeLineHeights } from './svgDraw';
 import { log } from '../../logger';
@@ -97,6 +97,7 @@ export const bounds = {
     }
   },
   updateBounds: function (startx, starty, stopx, stopy) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const _self = this;
     let cnt = 0;
     /** @param {any} type */
@@ -217,7 +218,7 @@ const drawNote = function (elem, noteModel) {
   rect.width = noteModel.width || conf.width;
   rect.class = 'note';
 
-  let g = elem.append('g');
+  const g = elem.append('g');
   const rectElem = svgDraw.drawRect(g, rect);
   const textObj = svgDraw.getTextObj();
   textObj.x = noteModel.startx;
@@ -233,9 +234,9 @@ const drawNote = function (elem, noteModel) {
   textObj.textMargin = conf.noteMargin;
   textObj.valign = 'center';
 
-  let textElem = drawText(g, textObj);
+  const textElem = drawText(g, textObj);
 
-  let textHeight = Math.round(
+  const textHeight = Math.round(
     textElem
       .map((te) => (te._groups || te)[0][0].getBBox().height)
       .reduce((acc, curr) => acc + curr)
@@ -285,7 +286,7 @@ const boundMessage = function (diagram, msgModel) {
   bounds.bumpVerticalPos(10);
   const { startx, stopx, message } = msgModel;
   const lines = common.splitBreaks(message).length;
-  let textDims = utils.calculateTextDimensions(message, messageFont(conf));
+  const textDims = utils.calculateTextDimensions(message, messageFont(conf));
   const lineHeight = textDims.height / lines;
   msgModel.height += lineHeight;
 
@@ -293,7 +294,7 @@ const boundMessage = function (diagram, msgModel) {
 
   let lineStarty;
   let totalOffset = textDims.height - 10;
-  let textWidth = textDims.width;
+  const textWidth = textDims.width;
 
   if (startx === stopx) {
     lineStarty = bounds.getVerticalPos() + totalOffset;
@@ -332,7 +333,7 @@ const boundMessage = function (diagram, msgModel) {
  */
 const drawMessage = function (diagram, msgModel, lineStarty, diagObj) {
   const { startx, stopx, starty, message, type, sequenceIndex, sequenceVisible } = msgModel;
-  let textDims = utils.calculateTextDimensions(message, messageFont(conf));
+  const textDims = utils.calculateTextDimensions(message, messageFont(conf));
   const textObj = svgDraw.getTextObj();
   textObj.x = startx;
   textObj.y = starty + 10;
@@ -350,7 +351,7 @@ const drawMessage = function (diagram, msgModel, lineStarty, diagObj) {
 
   drawText(diagram, textObj);
 
-  let textWidth = textDims.width;
+  const textWidth = textDims.width;
 
   let line;
   if (startx === stopx) {
@@ -495,12 +496,12 @@ export const drawActors = function (
 };
 
 export const drawActorsPopup = function (diagram, actors, actorKeys, doc) {
-  var maxHeight = 0;
+  let maxHeight = 0;
-  var maxWidth = 0;
+  let maxWidth = 0;
   for (let i = 0; i < actorKeys.length; i++) {
     const actor = actors[actorKeys[i]];
     const minMenuWidth = getRequiredPopupWidth(actor);
-    var menuDimensions = svgDraw.drawPopup(
+    const menuDimensions = svgDraw.drawPopup(
       diagram,
       actor,
       minMenuWidth,
@@ -564,8 +565,8 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
   bounds.bumpVerticalPos(preMargin);
   let heightAdjust = postMargin;
   if (msg.id && msg.message && loopWidths[msg.id]) {
-    let loopWidth = loopWidths[msg.id].width;
+    const loopWidth = loopWidths[msg.id].width;
-    let textConf = messageFont(conf);
+    const textConf = messageFont(conf);
     msg.message = utils.wrapLabel(`[${msg.message}]`, loopWidth - 2 * conf.wrapPadding, textConf);
     msg.width = loopWidth;
     msg.wrap = true;
@@ -654,7 +655,7 @@ export const draw = function (_text, id, _version, diagObj) {
   // Draw the messages/signals
   let sequenceIndex = 1;
   let sequenceIndexStep = 1;
-  let messagesToDraw = Array();
+  const messagesToDraw = [];
   messages.forEach(function (msg) {
     let loopModel, noteModel, msgModel;
 
@@ -810,7 +811,7 @@ export const draw = function (_text, id, _version, diagObj) {
           msgModel.starty = bounds.getVerticalPos();
           msgModel.sequenceIndex = sequenceIndex;
           msgModel.sequenceVisible = diagObj.db.showSequenceNumbers();
-          let lineStarty = boundMessage(diagram, msgModel);
+          const lineStarty = boundMessage(diagram, msgModel);
           messagesToDraw.push({ messageModel: msgModel, lineStarty: lineStarty });
           bounds.models.addMessage(msgModel);
         } catch (e) {
@@ -846,7 +847,7 @@ export const draw = function (_text, id, _version, diagObj) {
   }
 
   // only draw popups for the top row of actors.
-  var requiredBoxSize = drawActorsPopup(diagram, actors, actorKeys, doc);
+  const requiredBoxSize = drawActorsPopup(diagram, actors, actorKeys, doc);
 
   const { bounds: box } = bounds.getBounds();
 
@@ -932,7 +933,7 @@ const getMaxMessageWidthPerActor = function (actors, messages, diagObj) {
       const isMessage = !isNote;
 
       const textFont = isNote ? noteFont(conf) : messageFont(conf);
-      let wrappedMessage = msg.wrap
+      const wrappedMessage = msg.wrap
         ? utils.wrapLabel(msg.message, conf.width - 2 * conf.wrapPadding, textFont)
         : msg.message;
       const messageDimensions = utils.calculateTextDimensions(wrappedMessage, textFont);
@@ -1009,9 +1010,9 @@ const getMaxMessageWidthPerActor = function (actors, messages, diagObj) {
 const getRequiredPopupWidth = function (actor) {
   let requiredPopupWidth = 0;
   const textFont = actorFont(conf);
-  for (let key in actor.links) {
+  for (const key in actor.links) {
-    let labelDimensions = utils.calculateTextDimensions(key, textFont);
+    const labelDimensions = utils.calculateTextDimensions(key, textFont);
-    let labelWidth = labelDimensions.width + 2 * conf.wrapPadding + 2 * conf.boxMargin;
+    const labelWidth = labelDimensions.width + 2 * conf.wrapPadding + 2 * conf.boxMargin;
     if (requiredPopupWidth < labelWidth) {
       requiredPopupWidth = labelWidth;
     }
@@ -1049,7 +1050,7 @@ const calculateActorMargins = function (actors, actorToMessageWidth) {
     maxHeight = Math.max(maxHeight, actor.height);
   });
 
-  for (let actorKey in actorToMessageWidth) {
+  for (const actorKey in actorToMessageWidth) {
     const actor = actors[actorKey];
 
     if (!actor) {
@@ -1073,15 +1074,15 @@ const calculateActorMargins = function (actors, actorToMessageWidth) {
 };
 
 const buildNoteModel = function (msg, actors, diagObj) {
-  let startx = actors[msg.from].x;
+  const startx = actors[msg.from].x;
-  let stopx = actors[msg.to].x;
+  const stopx = actors[msg.to].x;
-  let shouldWrap = msg.wrap && msg.message;
+  const shouldWrap = msg.wrap && msg.message;
 
   let textDimensions = utils.calculateTextDimensions(
     shouldWrap ? utils.wrapLabel(msg.message, conf.width, noteFont(conf)) : msg.message,
     noteFont(conf)
   );
-  let noteModel = {
+  const noteModel = {
     width: shouldWrap
       ? conf.width
       : Math.max(conf.width, textDimensions.width + 2 * conf.noteMargin),
@@ -1277,8 +1278,8 @@ const calculateLoopBounds = function (messages, actors, _maxWidthPerActor, diagO
         stack.forEach((stk) => {
           current = stk;
           if (msgModel.startx === msgModel.stopx) {
-            let from = actors[msg.from];
+            const from = actors[msg.from];
-            let to = actors[msg.to];
+            const to = actors[msg.to];
             current.from = Math.min(
               from.x - msgModel.width / 2,
               from.x - from.width / 2,

src/diagrams/sequence/svgDraw.spec.js

@@ -1,5 +1,5 @@
-const svgDraw = require('./svgDraw').default;
+import svgDraw from './svgDraw';
-const { MockD3 } = require('d3');
+import { MockD3 } from 'd3';
 
 describe('svgDraw', function () {
   describe('drawRect', function () {

src/diagrams/state/stateRenderer.js

@@ -13,7 +13,9 @@ let conf;
 
 const transformationLog = {};
 
-export const setConf = function () {};
+export const setConf = function () {
+  //no-op
+};
 
 /**
  * Setup arrow head and define the marker. The result is appended to the svg.

src/diagrams/user-journey/journeyRenderer.ts

@@ -1,4 +1,4 @@
-// @ts-nocheck
+// @ts-nocheck TODO: fix file
 import { select } from 'd3';
 import svgDraw from './svgDraw';
 import { getConfig } from '../../config';
@@ -74,7 +74,7 @@ export const draw = function (text, id, version, diagObj) {
   const title = diagObj.db.getDiagramTitle();
 
   const actorNames = diagObj.db.getActors();
-  for (let member in actors) delete actors[member];
+  for (const member in actors) delete actors[member];
   let actorPos = 0;
   actorNames.forEach((actorName) => {
     actors[actorName] = {
@@ -152,6 +152,7 @@ export const bounds = {
   },
   updateBounds: function (startx, starty, stopx, stopy) {
     const conf = getConfig().journey;
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const _self = this;
     let cnt = 0;
     /** @param {any} type */
@@ -219,7 +220,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) {
 
   // Draw the tasks
   for (let i = 0; i < tasks.length; i++) {
-    let task = tasks[i];
+    const task = tasks[i];
     if (lastSection !== task.section) {
       fill = fills[sectionNumber % fills.length];
       num = sectionNumber % fills.length;

src/docs.mts

@@ -1,7 +1,9 @@
+/* eslint-disable no-console */
+
 import { remark } from 'remark';
 import type { Code, Root } from 'mdast';
 import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';
-// @ts-ignore
+// @ts-ignore: no typings
 import flatmap from 'unist-util-flatmap';
 import { globby } from 'globby';
 import { join, dirname } from 'path';

src/interactionDb.ts

@@ -1,5 +1,5 @@
-let interactionFunctions: (() => {})[] = [];
+let interactionFunctions: (() => void)[] = [];
-export const addFunction = (func: () => {}) => {
+export const addFunction = (func: () => void) => {
   interactionFunctions.push(func);
 };
 export const attachFunctions = () => {

src/jison/transformer.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { Generator } = require('jison');
 
 module.exports = {

src/logger.ts

@@ -1,3 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable no-console */
 import moment from 'moment-mini';
 
 export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';

src/mermaid.spec.js

@@ -1,8 +1,11 @@
 // mocks the mermaidAPI.render function (see `./__mocks__/mermaidAPI`)
 jest.mock('./mermaidAPI');
 // jest.mock only works well with CJS, see https://github.com/facebook/jest/issues/9430
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { default: mermaid } = require('./mermaid');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { mermaidAPI } = require('./mermaidAPI');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { default: flowDb } = require('./diagrams/flowchart/flowDb');
 
 import flowParser from './diagrams/flowchart/parser/flow';

src/mermaid.ts

@@ -14,7 +14,8 @@ import { isDetailedError } from './utils';
  * Function that goes through the document to find the chart definitions in there and render them.
  *
  * The function tags the processed attributes with the attribute data-processed and ignores found
- * elements with the attribute already set. This way the init function can be triggered several times.
+ * elements with the attribute already set. This way the init function can be triggered several
+ * times.
  *
  * Optionally, `init` can accept in the second argument one of the following:
  *
@@ -39,6 +40,7 @@ const init = function (
   config?: MermaidConfig,
   // eslint-disable-next-line no-undef
   nodes?: string | HTMLElement | NodeListOf<HTMLElement>,
+  // eslint-disable-next-line @typescript-eslint/ban-types
   callback?: Function
 ) {
   try {
@@ -58,13 +60,14 @@ const initThrowsErrors = function (
   config?: MermaidConfig,
   // eslint-disable-next-line no-undef
   nodes?: string | HTMLElement | NodeListOf<HTMLElement>,
+  // eslint-disable-next-line @typescript-eslint/ban-types
   callback?: Function
 ) {
   const conf = mermaidAPI.getConfig();
   // console.log('Starting rendering diagrams (init) - mermaid.init', conf);
   if (config) {
     // This is a legacy way of setting config. It is not documented and should be removed in the future.
-    // @ts-ignore
+    // @ts-ignore: TODO Fix ts errors
     mermaid.sequenceConfig = config;
   }
 
@@ -131,7 +134,7 @@ const initThrowsErrors = function (
       );
     } catch (error) {
       log.warn('Catching Error (bootstrap)', error);
-      // @ts-ignore
+      // @ts-ignore: TODO Fix ts errors
       // TODO: We should be throwing an error object.
       throw { error, message: error.str };
     }
@@ -144,7 +147,8 @@ const initialize = function (config: MermaidConfig) {
 
 /**
  * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
- * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the page.
+ * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
+ * page.
  */
 const contentLoaded = function () {
   if (mermaid.startOnLoad) {
@@ -187,6 +191,7 @@ const parse = (txt: string) => {
 const mermaid: {
   startOnLoad: boolean;
   diagrams: any;
+  // eslint-disable-next-line @typescript-eslint/ban-types
   parseError?: Function;
   mermaidAPI: typeof mermaidAPI;
   parse: typeof parse;

src/mermaidAPI.ts

@@ -17,7 +17,7 @@
  */
 import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
-// @ts-ignore
+// @ts-ignore: TODO Fix ts errors
 import pkg from '../package.json';
 import * as configApi from './config';
 import { addDiagrams } from './diagram-api/diagram-orchestration';
@@ -39,10 +39,10 @@ import { evaluate } from './diagrams/common/common';
 let hasLoadedDiagrams = false;
 
 /**
- *
  * @param text
  * @param parseError
  */
+// eslint-disable-next-line @typescript-eslint/ban-types
 function parse(text: string, parseError?: Function): boolean {
   if (!hasLoadedDiagrams) {
     addDiagrams();
@@ -131,7 +131,7 @@ const render = function (
     directiveSanitizer(graphInit);
     configApi.addDirective(graphInit);
   }
-  let cnf = configApi.getConfig();
+  const cnf = configApi.getConfig();
 
   log.debug(cnf);
 
@@ -324,8 +324,8 @@ const render = function (
   svgCode = svgCode.replace(/<br>/g, '<br/>');
 
   if (cnf.securityLevel === 'sandbox') {
-    let svgEl = root.select('#d' + id + ' svg').node();
+    const svgEl = root.select('#d' + id + ' svg').node();
-    let width = '100%';
+    const width = '100%';
     let height = '100%';
     if (svgEl) {
       height = svgEl.viewBox.baseVal.height + 'px';
@@ -402,7 +402,7 @@ const parseDirective = function (p: any, statement: string, context: string, typ
     log.error(
       `Error while rendering sequenceDiagram directive: ${statement} jison context: ${context}`
     );
-    // @ts-ignore
+    // @ts-ignore: TODO Fix ts errors
     log.error(error.message);
   }
 };

src/styles.ts

@@ -14,7 +14,7 @@ import { FlowChartStyleOptions } from './diagrams/flowchart/styles';
 import { log } from './logger';
 
 // TODO @knut: Inject from registerDiagram.
-const themes = {
+const themes: Record<string, any> = {
   flowchart,
   'flowchart-v2': flowchart,
   sequence,
@@ -45,7 +45,7 @@ const getStyles = (
     lineColor: string;
   } & FlowChartStyleOptions
 ) => {
-  let diagramStyles: string = '';
+  let diagramStyles = '';
   if (type in themes && themes[type as keyof typeof themes]) {
     diagramStyles = themes[type as keyof typeof themes](options);
   } else {
@@ -103,8 +103,7 @@ const getStyles = (
 `;
 };
 
-export const addStylesForDiagram = (type: string, diagramTheme: any) => {
+export const addStylesForDiagram = (type: string, diagramTheme: unknown): void => {
-  // @ts-ignore
   themes[type] = diagramTheme;
 };
 

src/utils.ts

@@ -1,4 +1,4 @@
-// @ts-nocheck
+// @ts-nocheck : TODO Fix ts errors
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import {
   curveBasis,
@@ -50,13 +50,13 @@ const anyComment = /\s*%%.*\n/gm;
  *
  *   %%{init: {"theme": "debug", "logLevel": 1 }}%%
  *   graph LR
- *    a-->b
+ *      a-->b
- *    b-->c
+ *      b-->c
- *    c-->d
+ *      c-->d
- *    d-->e
+ *      d-->e
- *    e-->f
+ *      e-->f
- *    f-->g
+ *      f-->g
- *    g-->h
+ *      g-->h
  * ```
  *
  *   Or
@@ -77,11 +77,11 @@ const anyComment = /\s*%%.*\n/gm;
  * @returns {object} The json object representing the init passed to mermaid.initialize()
  */
 export const detectInit = function (text: string, config?: MermaidConfig): MermaidConfig {
-  let inits = detectDirective(text, /(?:init\b)|(?:initialize\b)/);
+  const inits = detectDirective(text, /(?:init\b)|(?:initialize\b)/);
   let results = {};
 
   if (Array.isArray(inits)) {
-    let args = inits.map((init) => init.args);
+    const args = inits.map((init) => init.args);
     directiveSanitizer(args);
 
     results = assignWithDepth(results, [...args]);
@@ -136,8 +136,8 @@ export const detectDirective = function (text, type = null) {
     log.debug(
       `Detecting diagram directive${type !== null ? ' type:' + type : ''} based on the text:${text}`
     );
-    let match,
+    let match;
-      result = [];
+    const result = [];
     while ((match = directive.exec(text)) !== null) {
       // This is necessary to avoid infinite loops with zero-width matches
       if (match.index === directive.lastIndex) {
@@ -148,8 +148,8 @@ export const detectDirective = function (text, type = null) {
         (type && match[1] && match[1].match(type)) ||
         (type && match[2] && match[2].match(type))
       ) {
-        let type = match[1] ? match[1] : match[2];
+        const type = match[1] ? match[1] : match[2];
-        let args = match[3] ? match[3].trim() : match[4] ? JSON.parse(match[4].trim()) : null;
+        const args = match[3] ? match[3].trim() : match[4] ? JSON.parse(match[4].trim()) : null;
         result.push({ type, args });
       }
     }
@@ -168,6 +168,8 @@ export const detectDirective = function (text, type = null) {
 };
 
 /**
+ * > > > > > > > Develop
+ *
  * @function isSubstringInArray Detects whether a substring in present in a given array
  * @param {string} str The substring to detect
  * @param {Array} arr The array to search
@@ -203,7 +205,7 @@ export const interpolateToCurve = (interpolate, defaultCurve) => {
  * @returns {string | undefined} The formatted URL
  */
 export const formatUrl = (linkStr, config) => {
-  let url = linkStr.trim();
+  const url = linkStr.trim();
 
   if (url) {
     if (config.securityLevel !== 'loose') {
@@ -346,10 +348,10 @@ const calcCardinalityPosition = (isRelationTypePresent, points, initialPosition)
     prevPoint = point;
   });
   // if relation is present (Arrows will be added), change cardinality point off-set distance (d)
-  let d = isRelationTypePresent ? 10 : 5;
+  const d = isRelationTypePresent ? 10 : 5;
   //Calculate Angle for x and y axis
-  let angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);
+  const angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);
-  let cardinalityPosition = { x: 0, y: 0 };
+  const cardinalityPosition = { x: 0, y: 0 };
   //Calculation cardinality position using angle, center point on the line/curve but pendicular and with offset-distance
   cardinalityPosition.x = Math.sin(angle) * d + (points[0].x + center.x) / 2;
   cardinalityPosition.y = -Math.cos(angle) * d + (points[0].y + center.y) / 2;
@@ -407,11 +409,11 @@ const calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {
     prevPoint = point;
   });
   // if relation is present (Arrows will be added), change cardinality point off-set distance (d)
-  let d = 10 + terminalMarkerSize * 0.5;
+  const d = 10 + terminalMarkerSize * 0.5;
   //Calculate Angle for x and y axis
-  let angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);
+  const angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);
 
-  let cardinalityPosition = { x: 0, y: 0 };
+  const cardinalityPosition = { x: 0, y: 0 };
 
   //Calculation cardinality position using angle, center point on the line/curve but pendicular and with offset-distance
 
@@ -467,10 +469,10 @@ export const generateId = () => {
  * @returns {any}
  */
 function makeid(length) {
-  var result = '';
+  let result = '';
-  var characters = '0123456789abcdef';
+  const characters = '0123456789abcdef';
-  var charactersLength = characters.length;
+  const charactersLength = characters.length;
-  for (var i = 0; i < length; i++) {
+  for (let i = 0; i < length; i++) {
     result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;
@@ -660,7 +662,7 @@ export const calculateTextDimensions = memoize(
     // of sans-serif.
     const fontFamilies = ['sans-serif', fontFamily];
     const lines = text.split(common.lineBreakRegex);
-    let dims = [];
+    const dims = [];
 
     const body = select('body');
     // We don't want to leak DOM elements - if a removal operation isn't available
@@ -671,10 +673,10 @@ export const calculateTextDimensions = memoize(
 
     const g = body.append('svg');
 
-    for (let fontFamily of fontFamilies) {
+    for (const fontFamily of fontFamilies) {
       let cheight = 0;
-      let dim = { width: 0, height: 0, lineHeight: 0 };
+      const dim = { width: 0, height: 0, lineHeight: 0 };
-      for (let line of lines) {
+      for (const line of lines) {
         const textObj = getTextObj();
         textObj.text = line;
         const textElem = drawSimpleText(g, textObj)
@@ -682,7 +684,7 @@ export const calculateTextDimensions = memoize(
           .style('font-weight', fontWeight)
           .style('font-family', fontFamily);
 
-        let bBox = (textElem._groups || textElem)[0][0].getBBox();
+        const bBox = (textElem._groups || textElem)[0][0].getBBox();
         dim.width = Math.round(Math.max(dim.width, bBox.width));
         cheight = Math.round(bBox.height);
         dim.height += cheight;
@@ -693,7 +695,7 @@ export const calculateTextDimensions = memoize(
 
     g.remove();
 
-    let index =
+    const index =
       isNaN(dims[1].height) ||
       isNaN(dims[1].width) ||
       isNaN(dims[1].lineHeight) ||
@@ -715,7 +717,7 @@ export const calculateTextDimensions = memoize(
  *   attributes
  */
 const d3Attrs = function (d3Elem, attrs) {
-  for (let attr of attrs) {
+  for (const attr of attrs) {
     d3Elem.attr(attr[0], attr[1]);
   }
 };