Merge from upstream mermaid OS develop

.changeset/chilly-years-cheat.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each class diagram

.changeset/witty-crews-smell.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+`mermaidAPI.getDiagramFromText()` now returns a new different db for each state diagram

packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js

@@ -1,9 +1,11 @@
 import { parser } from './parser/classDiagram.jison';
-import classDb from './classDb.js';
+import { ClassDB } from './classDb.js';
 
 describe('class diagram, ', function () {
   describe('when parsing data from a classDiagram it', function () {
+    let classDb;
     beforeEach(function () {
+      classDb = new ClassDB();
       parser.yy = classDb;
       parser.yy.clear();
     });

packages/mermaid/src/diagrams/class/classDiagram-v2.ts

@@ -1,13 +1,15 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: JISON doesn't support types
 import parser from './parser/classDiagram.jison';
-import db from './classDb.js';
+import { ClassDB } from './classDb.js';
 import styles from './styles.js';
 import renderer from './classRenderer-v3-unified.js';
 
 export const diagram: DiagramDefinition = {
   parser,
-  db,
+  get db() {
+    return new ClassDB();
+  },
   renderer,
   styles,
   init: (cnf) => {
@@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
       cnf.class = {};
     }
     cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-    db.clear();
   },
 };

packages/mermaid/src/diagrams/class/classDiagram.spec.ts

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/unbound-method -- Broken for Vitest mocks, see https://github.com/vitest-dev/eslint-plugin-vitest/pull/286 */
 // @ts-expect-error Jison doesn't export types
 import { parser } from './parser/classDiagram.jison';
-import classDb from './classDb.js';
+import { ClassDB } from './classDb.js';
 import { vi, describe, it, expect } from 'vitest';
 import type { ClassMap, NamespaceNode } from './classTypes.js';
 const spyOn = vi.spyOn;
@@ -10,8 +11,9 @@ const abstractCssStyle = 'font-style:italic;';
 
 describe('given a basic class diagram, ', function () {
   describe('when parsing class definition', function () {
+    let classDb: ClassDB;
     beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
       parser.yy = classDb;
     });
     it('should handle classes within namespaces', () => {
@@ -564,8 +566,9 @@ class C13["With Città foreign language"]
   });
 
   describe('when parsing class defined in brackets', function () {
+    let classDb: ClassDB;
     beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
       parser.yy = classDb;
     });
 
@@ -656,8 +659,9 @@ class C13["With Città foreign language"]
   });
 
   describe('when parsing comments', function () {
+    let classDb: ClassDB;
     beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
       parser.yy = classDb;
     });
 
@@ -746,8 +750,9 @@ foo()
   });
 
   describe('when parsing click statements', function () {
+    let classDb: ClassDB;
     beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
       parser.yy = classDb;
     });
     it('should handle href link', function () {
@@ -857,8 +862,9 @@ foo()
   });
 
   describe('when parsing annotations', function () {
+    let classDb: ClassDB;
     beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
       parser.yy = classDb;
     });
 
@@ -921,8 +927,9 @@ foo()
 
 describe('given a class diagram with members and methods ', function () {
   describe('when parsing members', function () {
+    let classDb: ClassDB;
     beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
       parser.yy = classDb;
     });
 
@@ -980,8 +987,9 @@ describe('given a class diagram with members and methods ', function () {
   });
 
   describe('when parsing method definition', function () {
+    let classDb: ClassDB;
     beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
       parser.yy = classDb;
     });
 
@@ -1067,8 +1075,9 @@ describe('given a class diagram with members and methods ', function () {
 
 describe('given a class diagram with generics, ', function () {
   describe('when parsing valid generic classes', function () {
+    let classDb: ClassDB;
     beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
       parser.yy = classDb;
     });
 
@@ -1180,8 +1189,9 @@ namespace space {
 
 describe('given a class diagram with relationships, ', function () {
   describe('when parsing basic relationships', function () {
+    let classDb: ClassDB;
     beforeEach(function () {
-      classDb.clear();
+      classDb = new ClassDB();
       parser.yy = classDb;
     });
 
@@ -1714,7 +1724,9 @@ class Class2
   });
 
   describe('when parsing classDiagram with text labels', () => {
+    let classDb: ClassDB;
     beforeEach(function () {
+      classDb = new ClassDB();
       parser.yy = classDb;
       parser.yy.clear();
     });
@@ -1897,3 +1909,40 @@ class C13["With Città foreign language"]
     });
   });
 });
+
+describe('class db class', () => {
+  let classDb: ClassDB;
+  beforeEach(() => {
+    classDb = new ClassDB();
+  });
+  // This is to ensure that functions used in class JISON are exposed as function from ClassDB
+  it('should have functions used in class JISON as own property', () => {
+    const functionsUsedInParser = [
+      'addRelation',
+      'cleanupLabel',
+      'setAccTitle',
+      'setAccDescription',
+      'addClassesToNamespace',
+      'addNamespace',
+      'setCssClass',
+      'addMembers',
+      'addClass',
+      'setClassLabel',
+      'addAnnotation',
+      'addMember',
+      'addNote',
+      'defineClass',
+      'setDirection',
+      'relationType',
+      'lineType',
+      'setClickEvent',
+      'setTooltip',
+      'setLink',
+      'setCssStyle',
+    ] as const satisfies (keyof ClassDB)[];
+
+    for (const fun of functionsUsedInParser) {
+      expect(Object.hasOwn(classDb, fun)).toBe(true);
+    }
+  });
+});

packages/mermaid/src/diagrams/class/classDiagram.ts

@@ -1,13 +1,15 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: JISON doesn't support types
 import parser from './parser/classDiagram.jison';
-import db from './classDb.js';
+import { ClassDB } from './classDb.js';
 import styles from './styles.js';
 import renderer from './classRenderer-v3-unified.js';
 
 export const diagram: DiagramDefinition = {
   parser,
-  db,
+  get db() {
+    return new ClassDB();
+  },
   renderer,
   styles,
   init: (cnf) => {
@@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
       cnf.class = {};
     }
     cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-    db.clear();
   },
 };

packages/mermaid/src/diagrams/class/parser/class.spec.js

@@ -1,8 +1,10 @@
 import { parser } from './classDiagram.jison';
-import classDb from '../classDb.js';
+import { ClassDB } from '../classDb.js';
 
 describe('class diagram', function () {
+  let classDb;
   beforeEach(function () {
+    classDb = new ClassDB();
     parser.yy = classDb;
     parser.yy.clear();
   });

packages/mermaid/src/diagrams/state/parser/state-parser.spec.js

@@ -1,4 +1,4 @@
-import stateDb from '../stateDb.js';
+import { StateDB } from '../stateDb.js';
 import stateDiagram from './stateDiagram.jison';
 import { setConfig } from '../../../config.js';
 
@@ -7,7 +7,9 @@ setConfig({
 });
 
 describe('state parser can parse...', () => {
+  let stateDb;
   beforeEach(function () {
+    stateDb = new StateDB();
     stateDiagram.parser.yy = stateDb;
     stateDiagram.parser.yy.clear();
   });

packages/mermaid/src/diagrams/state/parser/state-style.spec.js

@@ -1,4 +1,4 @@
-import stateDb from '../stateDb.js';
+import { StateDB } from '../stateDb.js';
 import stateDiagram from './stateDiagram.jison';
 import { setConfig } from '../../../config.js';
 
@@ -7,7 +7,9 @@ setConfig({
 });
 
 describe('ClassDefs and classes when parsing a State diagram', () => {
+  let stateDb;
   beforeEach(function () {
+    stateDb = new StateDB();
     stateDiagram.parser.yy = stateDb;
     stateDiagram.parser.yy.clear();
   });

packages/mermaid/src/diagrams/state/shapes.js

@@ -1,6 +1,6 @@
 import { line, curveBasis } from 'd3';
 import idCache from './id-cache.js';
-import stateDb from './stateDb.js';
+import { StateDB } from './stateDb.js';
 import utils from '../../utils.js';
 import common from '../common/common.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
@@ -414,13 +414,13 @@ let edgeCount = 0;
 export const drawEdge = function (elem, path, relation) {
   const getRelationType = function (type) {
     switch (type) {
-      case stateDb.relationType.AGGREGATION:
+      case StateDB.relationType.AGGREGATION:
         return 'aggregation';
-      case stateDb.relationType.EXTENSION:
+      case StateDB.relationType.EXTENSION:
         return 'extension';
-      case stateDb.relationType.COMPOSITION:
+      case StateDB.relationType.COMPOSITION:
         return 'composition';
-      case stateDb.relationType.DEPENDENCY:
+      case StateDB.relationType.DEPENDENCY:
         return 'dependency';
     }
   };
@@ -459,7 +459,7 @@ export const drawEdge = function (elem, path, relation) {
 
   svgPath.attr(
     'marker-end',
-    'url(' + url + '#' + getRelationType(stateDb.relationType.DEPENDENCY) + 'End' + ')'
+    'url(' + url + '#' + getRelationType(StateDB.relationType.DEPENDENCY) + 'End' + ')'
   );
 
   if (relation.title !== undefined) {

packages/mermaid/src/diagrams/state/stateDb.spec.js

@@ -1,8 +1,9 @@
-import stateDb from './stateDb.js';
+import { StateDB } from './stateDb.js';
 
 describe('State Diagram stateDb', () => {
+  let stateDb;
   beforeEach(() => {
-    stateDb.clear();
+    stateDb = new StateDB();
   });
 
   describe('addStyleClass', () => {
@@ -20,8 +21,9 @@ describe('State Diagram stateDb', () => {
   });
 
   describe('addDescription to a state', () => {
+    let stateDb;
     beforeEach(() => {
-      stateDb.clear();
+      stateDb = new StateDB();
       stateDb.addState('state1');
     });
 
@@ -73,3 +75,25 @@ describe('State Diagram stateDb', () => {
     });
   });
 });
+
+describe('state db class', () => {
+  let stateDb;
+  beforeEach(() => {
+    stateDb = new StateDB();
+  });
+  // This is to ensure that functions used in state JISON are exposed as function from StateDb
+  it('should have functions used in flow JISON as own property', () => {
+    const functionsUsedInParser = [
+      'setRootDoc',
+      'trimColon',
+      'getDividerId',
+      'setAccTitle',
+      'setAccDescription',
+      'setDirection',
+    ];
+
+    for (const fun of functionsUsedInParser) {
+      expect(Object.hasOwn(stateDb, fun)).toBe(true);
+    }
+  });
+});

packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js

@@ -1,11 +1,13 @@
 import { parser } from './parser/stateDiagram.jison';
-import stateDb from './stateDb.js';
+import { StateDB } from './stateDb.js';
 import stateDiagram from './parser/stateDiagram.jison';
 
 describe('state diagram V2, ', function () {
   // TODO - these examples should be put into ./parser/stateDiagram.spec.js
   describe('when parsing an info graph it', function () {
+    let stateDb;
     beforeEach(function () {
+      stateDb = new StateDB();
       parser.yy = stateDb;
       stateDiagram.parser.yy = stateDb;
       stateDiagram.parser.yy.clear();

packages/mermaid/src/diagrams/state/stateDiagram-v2.ts

@@ -1,13 +1,15 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: JISON doesn't support types
 import parser from './parser/stateDiagram.jison';
-import db from './stateDb.js';
+import { StateDB } from './stateDb.js';
 import styles from './styles.js';
 import renderer from './stateRenderer-v3-unified.js';
 
 export const diagram: DiagramDefinition = {
   parser,
-  db,
+  get db() {
+    return new StateDB();
+  },
   renderer,
   styles,
   init: (cnf) => {
@@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
       cnf.state = {};
     }
     cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-    db.clear();
   },
 };

packages/mermaid/src/diagrams/state/stateDiagram.spec.js

@@ -1,9 +1,11 @@
 import { parser } from './parser/stateDiagram.jison';
-import stateDb from './stateDb.js';
+import { StateDB } from './stateDb.js';
 
 describe('state diagram, ', function () {
   describe('when parsing an info graph it', function () {
+    let stateDb;
     beforeEach(function () {
+      stateDb = new StateDB();
       parser.yy = stateDb;
     });
 

packages/mermaid/src/diagrams/state/stateDiagram.ts

@@ -1,13 +1,15 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: JISON doesn't support types
 import parser from './parser/stateDiagram.jison';
-import db from './stateDb.js';
+import { StateDB } from './stateDb.js';
 import styles from './styles.js';
 import renderer from './stateRenderer.js';
 
 export const diagram: DiagramDefinition = {
   parser,
-  db,
+  get db() {
+    return new StateDB();
+  },
   renderer,
   styles,
   init: (cnf) => {
@@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
       cnf.state = {};
     }
     cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-    db.clear();
   },
 };

packages/mermaid/src/mermaidAPI.spec.ts

@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { assert, beforeEach, describe, expect, it, vi } from 'vitest';
 
 // -------------------------------------
 //  Mocks and mocking
@@ -69,6 +69,8 @@ import { compile, serialize } from 'stylis';
 import { Diagram } from './Diagram.js';
 import { decodeEntities, encodeEntities } from './utils.js';
 import { toBase64 } from './utils/base64.js';
+import { ClassDB } from './diagrams/class/classDb.js';
+import { StateDB } from './diagrams/state/stateDb.js';
 import { FlowDB } from './diagrams/flowchart/flowDb.js';
 
 /**
@@ -853,40 +855,102 @@ graph TD;A--x|text including URL space|B;`
     });
 
     it('should not modify db when rendering different diagrams', async () => {
+      const stateDiagram1 = await mermaidAPI.getDiagramFromText(
+        `stateDiagram
+            direction LR
+            [*] --> Still
+            Still --> [*]
+            Still --> Moving
+            Moving --> Still
+            Moving --> Crash
+            Crash --> [*]`
+      );
+      const stateDiagram2 = await mermaidAPI.getDiagramFromText(
+        `stateDiagram
+          direction TB
+          [*] --> Still
+          Still --> [*]
+          Still --> Moving
+          Moving --> Still
+          Moving --> Crash
+          Crash --> [*]`
+      );
+      // Since stateDiagram will return new Db object each time, we can compare the db to be different.
+      expect(stateDiagram1.db).not.toBe(stateDiagram2.db);
+      assert(stateDiagram1.db instanceof StateDB);
+      assert(stateDiagram2.db instanceof StateDB);
+      expect(stateDiagram1.db.getDirection()).not.toEqual(stateDiagram2.db.getDirection());
+
       const flowDiagram1 = await mermaidAPI.getDiagramFromText(
         `flowchart LR
       A -- text --> B -- text2 --> C`
       );
-      const flwoDiagram2 = await mermaidAPI.getDiagramFromText(
+      const flowDiagram2 = await mermaidAPI.getDiagramFromText(
         `flowchart TD
       A -- text --> B -- text2 --> C`
       );
       // Since flowDiagram will return new Db object each time, we can compare the db to be different.
-      expect(flowDiagram1.db).not.toBe(flwoDiagram2.db);
+      expect(flowDiagram1.db).not.toBe(flowDiagram2.db);
       assert(flowDiagram1.db instanceof FlowDB);
-      assert(flwoDiagram2.db instanceof FlowDB);
-      expect(flowDiagram1.db.getDirection()).not.toEqual(flwoDiagram2.db.getDirection());
+      assert(flowDiagram2.db instanceof FlowDB);
+      expect(flowDiagram1.db.getDirection()).not.toEqual(flowDiagram2.db.getDirection());
 
       const classDiagram1 = await mermaidAPI.getDiagramFromText(
-        `stateDiagram
-    [*] --> Still
-    Still --> [*]
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]`
+        `classDiagram
+            direction TB
+            class Student {
+              -idCard : IdCard
+            }
+            class IdCard{
+              -id : int
+              -name : string
+            }
+            class Bike{
+              -id : int
+              -name : string
+            }
+            Student "1" --o "1" IdCard : carries
+            Student "1" --o "1" Bike : rides`
       );
       const classDiagram2 = await mermaidAPI.getDiagramFromText(
-        `stateDiagram
-    [*] --> Still
-    Still --> [*]
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]`
+        `classDiagram
+            direction LR
+            class Student {
+              -idCard : IdCard
+            }
+            class IdCard{
+              -id : int
+              -name : string
+            }
+            class Bike{
+              -id : int
+              -name : string
+            }
+            Student "1" --o "1" IdCard : carries
+            Student "1" --o "1" Bike : rides`
+      );
+      // Since classDiagram will return new Db object each time, we can compare the db to be different.
+      expect(classDiagram1.db).not.toBe(classDiagram2.db);
+      assert(classDiagram1.db instanceof ClassDB);
+      assert(classDiagram2.db instanceof ClassDB);
+      expect(classDiagram1.db.getDirection()).not.toEqual(classDiagram2.db.getDirection());
+
+      const sequenceDiagram1 = await mermaidAPI.getDiagramFromText(
+        `sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    Alice->>+John: John, can you hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    John-->>-Alice: I feel great!`
+      );
+      const sequenceDiagram2 = await mermaidAPI.getDiagramFromText(
+        `sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    Alice->>+John: John, can you hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    John-->>-Alice: I feel great!`
       );
       // Since sequenceDiagram will return same Db object each time, we can compare the db to be same.
-      expect(classDiagram1.db).toBe(classDiagram2.db);
+      expect(sequenceDiagram1.db).toBe(sequenceDiagram2.db);
     });
   });