Merge pull request #5468 from mermaid-js/fix/maps

fix: move from objects to Maps

docs/config/setup/modules/mermaidAPI.md

@@ -98,7 +98,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:635](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L635)
+[mermaidAPI.ts:634](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L634)
 
 ## Functions
 
@@ -129,7 +129,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:277](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L277)
+[mermaidAPI.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L276)
 
 ---
 
@@ -155,7 +155,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L223)
+[mermaidAPI.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L222)
 
 ---
 
@@ -167,10 +167,10 @@ Create the user styles
 
 #### Parameters
 
-| Name | Type  | Description |
-| :---------- | :------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------ |
-| `config` | `MermaidConfig`  | configuration that has style and theme settings to use |
-| `classDefs` | `undefined` \| `null` \| `Record`<`string`, `DiagramStyleClassDef`> | the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...) |
+| Name | Type | Description |
+| :---------- | :--------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------ |
+| `config` | `MermaidConfig` | configuration that has style and theme settings to use |
+| `classDefs` | `undefined` \| `null` \| `Map`<`string`, `DiagramStyleClassDef`> | the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...) |
 
 #### Returns
 
@@ -190,20 +190,20 @@ the string with all the user styles
 
 #### Parameters
 
-| Name | Type  |
-| :---------- | :-------------------------------------------------------- |
-| `config` | `MermaidConfig`  |
-| `graphType` | `string`  |
-| `classDefs` | `undefined` \| `Record`<`string`, `DiagramStyleClassDef`> |
-| `svgId` | `string`  |
+| Name | Type |
+| :---------- | :----------------------------------------------------- |
+| `config` | `MermaidConfig` |
+| `graphType` | `string` |
+| `classDefs` | `undefined` \| `Map`<`string`, `DiagramStyleClassDef`> |
+| `svgId` | `string` |
 
 #### Returns
 
 `string`
 
 #### Defined in
 
-[mermaidAPI.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L200)
+[mermaidAPI.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L199)
 
 ---
 
@@ -256,7 +256,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:254](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L254)
+[mermaidAPI.ts:253](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L253)
 
 ---
 
@@ -281,4 +281,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:327](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L327)
+[mermaidAPI.ts:326](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L326)

packages/mermaid-flowchart-elk/src/flowRenderer-elk.js

@@ -41,12 +41,12 @@ let nodeDb = {};
 export const addVertices = async function (vert, svgId, root, doc, diagObj, parentLookupDb, graph) {
  const svg = root.select(`[id="${svgId}"]`);
  const nodes = svg.insert('g').attr('class', 'nodes');
- const keys = Object.keys(vert);
+ const keys = [...vert.keys()];
 
  // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
  await Promise.all(
  keys.map(async function (id) {
- const vertex = vert[id];
+ const vertex = vert.get(id);
 
  /**
  * Variable for storing the classes for the vertex
@@ -595,7 +595,7 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb
  *
  * @param text
  * @param diagObj
- * @returns {Record<string, import('../../mermaid/src/diagram-api/types.js').DiagramStyleClassDef>} ClassDef styles
+ * @returns {Map<string, import('../../mermaid/src/diagram-api/types.js').DiagramStyleClassDef>} ClassDef styles
  */
 export const getClasses = function (text, diagObj) {
  log.info('Extracting classes');

packages/mermaid/src/diagram-api/types.ts

@@ -70,7 +70,7 @@ export interface DiagramRenderer {
  getClasses?: (
  text: string,
  diagram: Pick<DiagramDefinition, 'db'>
- ) => Record<string, DiagramStyleClassDef>;
+ ) => Map<string, DiagramStyleClassDef>;
 }
 
 export interface DiagramDefinition {

packages/mermaid/src/diagrams/block/blockDB.ts

@@ -6,16 +6,16 @@ import { clear as commonClear } from '../common/commonDb.js';
 import type { Block, ClassDef } from './blockTypes.js';
 
 // Initialize the node database for simple lookups
-let blockDatabase: Record<string, Block> = {};
+let blockDatabase: Map<string, Block> = new Map();
 let edgeList: Block[] = [];
-let edgeCount: Record<string, number> = {};
+let edgeCount: Map<string, number> = new Map();
 
 const COLOR_KEYWORD = 'color';
 const FILL_KEYWORD = 'fill';
 const BG_FILL = 'bgFill';
 const STYLECLASS_SEP = ',';
 
-let classes = {} as Record<string, ClassDef>;
+let classes: Map<string, ClassDef> = new Map();
 
 /**
  * Called when the parser comes across a (style) class definition
@@ -26,10 +26,11 @@ let classes = {} as Record<string, ClassDef>;
  */
 export const addStyleClass = function (id: string, styleAttributes = '') {
  // create a new style class object with this id
- if (classes[id] === undefined) {
- classes[id] = { id: id, styles: [], textStyles: [] }; // This is a classDef
+ let foundClass = classes.get(id);
+ if (!foundClass) {
+ foundClass = { id: id, styles: [], textStyles: [] };
+ classes.set(id, foundClass); // This is a classDef
  }
- const foundClass = classes[id];
  if (styleAttributes !== undefined && styleAttributes !== null) {
  styleAttributes.split(STYLECLASS_SEP).forEach((attrib) => {
  // remove any trailing ;
@@ -54,7 +55,7 @@ export const addStyleClass = function (id: string, styleAttributes = '') {
  * @param styles - the string with 1 or more style attributes (each separated by a comma)
  */
 export const addStyle2Node = function (id: string, styles = '') {
- const foundBlock = blockDatabase[id];
+ const foundBlock = blockDatabase.get(id)!;
  if (styles !== undefined && styles !== null) {
  foundBlock.styles = styles.split(STYLECLASS_SEP);
  }
@@ -70,11 +71,11 @@ export const addStyle2Node = function (id: string, styles = '') {
  */
 export const setCssClass = function (itemIds: string, cssClassName: string) {
  itemIds.split(',').forEach(function (id: string) {
- let foundBlock = blockDatabase[id];
+ let foundBlock = blockDatabase.get(id);
  if (foundBlock === undefined) {
  const trimmedId = id.trim();
- blockDatabase[trimmedId] = { id: trimmedId, type: 'na', children: [] } as Block;
- foundBlock = blockDatabase[trimmedId];
+ foundBlock = { id: trimmedId, type: 'na', children: [] } as Block;
+ blockDatabase.set(trimmedId, foundBlock);
  }
  if (!foundBlock.classes) {
  foundBlock.classes = [];
@@ -104,12 +105,9 @@ const populateBlockDatabase = (_blockList: Block[] | Block[][], parent: Block):
  if (block.type === 'column-setting') {
  parent.columns = block.columns || -1;
  } else if (block.type === 'edge') {
- if (edgeCount[block.id]) {
- edgeCount[block.id]++;
- } else {
- edgeCount[block.id] = 1;
- }
- block.id = edgeCount[block.id] + '-' + block.id;
+ const count = (edgeCount.get(block.id) ?? 0) + 1;
+ edgeCount.set(block.id, count);
+ block.id = count + '-' + block.id;
  edgeList.push(block);
  } else {
  if (!block.label) {
@@ -120,16 +118,17 @@ const populateBlockDatabase = (_blockList: Block[] | Block[][], parent: Block):
  block.label = block.id;
  }
  }
- const newBlock = !blockDatabase[block.id];
- if (newBlock) {
- blockDatabase[block.id] = block;
+ const existingBlock = blockDatabase.get(block.id);
+
+ if (existingBlock === undefined) {
+ blockDatabase.set(block.id, block);
  } else {
  // Add newer relevant data to aggregated node
  if (block.type !== 'na') {
- blockDatabase[block.id].type = block.type;
+ existingBlock.type = block.type;
  }
  if (block.label !== block.id) {
- blockDatabase[block.id].label = block.label;
+ existingBlock.label = block.label;
  }
  }
 
@@ -142,10 +141,10 @@ const populateBlockDatabase = (_blockList: Block[] | Block[][], parent: Block):
  for (let j = 0; j < w; j++) {
  const newBlock = clone(block);
  newBlock.id = newBlock.id + '-' + j;
- blockDatabase[newBlock.id] = newBlock;
+ blockDatabase.set(newBlock.id, newBlock);
  children.push(newBlock);
  }
- } else if (newBlock) {
+ } else if (existingBlock === undefined) {
  children.push(block);
  }
  }
@@ -160,12 +159,12 @@ const clear = (): void => {
  log.debug('Clear called');
  commonClear();
  rootBlock = { id: 'root', type: 'composite', children: [], columns: -1 } as Block;
- blockDatabase = { root: rootBlock };
+ blockDatabase = new Map([['root', rootBlock]]);
  blocks = [] as Block[];
- classes = {} as Record<string, ClassDef>;
+ classes = new Map();
 
  edgeList = [];
- edgeCount = {};
+ edgeCount = new Map();
 };
 
 export function typeStr2Type(typeStr: string) {
@@ -241,7 +240,7 @@ const setHierarchy = (block: Block[]): void => {
 };
 
 const getColumns = (blockId: string): number => {
- const block = blockDatabase[blockId];
+ const block = blockDatabase.get(blockId);
  if (!block) {
  return -1;
  }
@@ -259,7 +258,7 @@ const getColumns = (blockId: string): number => {
  * @returns
  */
 const getBlocksFlat = () => {
- return [...Object.values(blockDatabase)];
+ return [...blockDatabase.values()];
 };
 /**
  * Returns the hierarchy of blocks
@@ -273,11 +272,11 @@ const getEdges = () => {
  return edgeList;
 };
 const getBlock = (id: string) => {
- return blockDatabase[id];
+ return blockDatabase.get(id);
 };
 
 const setBlock = (block: Block) => {
- blockDatabase[block.id] = block;
+ blockDatabase.set(block.id, block);
 };
 
 const getLogger = () => console;

packages/mermaid/src/diagrams/block/parser/block.spec.ts

@@ -388,7 +388,7 @@ describe('Block diagram', function () {
  const mc = blocks[0];
  expect(mc.classes).toContain('black');
  const classes = db.getClasses();
- const black = classes.black;
+ const black = classes.get('black')!;
  expect(black.id).toBe('black');
  expect(black.styles[0]).toEqual('color:#ffffff');
  });
@@ -406,4 +406,21 @@ columns 1
  expect(B.styles).toContain('fill:#f9F');
  });
  });
+
+ describe('prototype properties', function () {
+ function validateProperty(prop: string) {
+ expect(() => block.parse(`block-beta\n${prop}`)).not.toThrow();
+ expect(() =>
+ block.parse(`block-beta\nA; classDef ${prop} color:#ffffff,fill:#000000; class A ${prop}`)
+ ).not.toThrow();
+ }
+
+ it('should work with a __proto__ property', function () {
+ validateProperty('__proto__');
+ });
+
+ it('should work with a constructor property', function () {
+ validateProperty('constructor');
+ });
+ });
 });