Merge pull request #6212 from mermaid-js/saurabh/refactor/convert-classDb-to-class

Refactor: Change ClassDB to class based architecture.

.changeset/chilly-years-cheat.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each class 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/mermaidAPI.spec.ts

@@ -69,6 +69,7 @@ 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';
 
@@ -856,6 +857,7 @@ graph TD;A--x|text including URL space|B;`)
           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);
@@ -875,6 +877,46 @@ graph TD;A--x|text including URL space|B;`)
       assert(flowDiagram2.db instanceof FlowDB);
       expect(flowDiagram1.db.getDirection()).not.toEqual(flowDiagram2.db.getDirection());
 
+      const classDiagram1 = await mermaidAPI.getDiagramFromText(
+        `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(
+        `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?