marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-25 18:30:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3592 from mermaid-js/lazy-load-import

Browse Source 
Lazy load import
This commit is contained in:
Knut Sveidqvist
2022-10-06 18:19:19 +02:00
committed by GitHub
parent 803ea863fd e49825b7a3
commit 883d0d5039
25 changed files with 262 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
cypress/integration/other/interaction.spec.js
View File

@@ -1,266 +1,180 @@
describe('Interaction', () => { describe('Interaction', () => {
describe('Interaction - security level loose', () => { describe('Security level loose', () => {
it('Graph: should handle a click on a node with a bound function', () => { beforeEach(() => {
const url = 'http://localhost:9000/click_security_loose.html'; cy.visit('http://localhost:9000/click_security_loose.html');
cy.viewport(1440, 1024); });
cy.visit(url);
cy.get('body').find('g#flowchart-Function-4').click();
it('Graph: should handle a click on a node with a bound function', () => {
cy.contains('FunctionTest1').parents('.node').click();
cy.get('.created-by-click').should('have.text', 'Clicked By Flow'); cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
}); });
it('Graph: should handle a click on a node with a bound function with args', () => { it('Graph: should handle a click on a node with a bound function with args', () => {
const url = 'http://localhost:9000/click_security_loose.html'; cy.contains('FunctionArgTest2').parents('.node').click();
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('g#flowchart-FunctionArg-28').click();
cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT'); cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
}); });
it('Flowchart: should handle a click on a node with a bound function where the node starts with a number', () => { it('Flowchart: should handle a click on a node with a bound function where the node starts with a number', () => {
const url = 'http://localhost:9000/click_security_loose.html'; cy.contains('2FunctionArg').parents('.node').click();
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('g[id="flowchart-FunctionArg-34"]').click();
cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT'); cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
}); });
it('Graph: should handle a click on a node with a bound url', () => { it('Graph: should handle a click on a node with a bound url', () => {
const url = 'http://localhost:9000/click_security_loose.html'; // When there is a URL, cy.contains selects the a tag instead of the span. The .node is a child of a, so we have to use find instead of parent.
cy.viewport(1440, 1024); cy.contains('URLTest1').find('.node').click();
cy.visit(url); cy.location().should(({ href }) => {
cy.get('body').find('#flowchart-URL-5').click(); expect(href).to.eq('http://localhost:9000/empty.html');
});
});
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
it('Graph: should handle a click on a node with a bound url where the node starts with a number', () => { it('Graph: should handle a click on a node with a bound url where the node starts with a number', () => {
const url = 'http://localhost:9000/click_security_loose.html'; cy.contains('2URL').find('.node').click();
cy.viewport(1440, 1024); cy.location().should(({ href }) => {
cy.visit(url); expect(href).to.eq('http://localhost:9000/empty.html');
cy.get('body').find('g[id="flowchart-2URL-11"]').click();
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
}); });
}); });
it('Flowchart-v2: should handle a click on a node with a bound function', () => { it('Flowchart-v2: should handle a click on a node with a bound function', () => {
const url = 'http://localhost:9000/click_security_loose.html'; cy.contains('FunctionTest2').parents('.node').click();
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('g#flowchart-Function-16').click();
cy.get('.created-by-click').should('have.text', 'Clicked By Flow'); cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
}); });
it('Flowchart-v2: should handle a click on a node with a bound function where the node starts with a number', () => { it('Flowchart-v2: should handle a click on a node with a bound function where the node starts with a number', () => {
const url = 'http://localhost:9000/click_security_loose.html'; cy.contains('10Function').parents('.node').click();
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('g[id="flowchart-1Function-22"]').click();
cy.get('.created-by-click').should('have.text', 'Clicked By Flow'); cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
}); });
it('Flowchart-v2: should handle a click on a node with a bound url', () => { it('Flowchart-v2: should handle a click on a node with a bound url', () => {
const url = 'http://localhost:9000/click_security_loose.html'; cy.contains('URLTest2').find('.node').click();
cy.viewport(1440, 1024); cy.location().should(({ href }) => {
cy.visit(url); expect(href).to.eq('http://localhost:9000/empty.html');
cy.get('body').find('#flowchart-URL-17').click(); });
});
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => { it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
const url = 'http://localhost:9000/click_security_loose.html'; cy.contains('20URL').find('.node').click();
cy.viewport(1440, 1024); cy.location().should(({ href }) => {
cy.visit(url); expect(href).to.eq('http://localhost:9000/empty.html');
cy.get('body').find('g[id="flowchart-2URL-23"]').click();
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
}); });
}); });
it('should handle a click on a task with a bound URL clicking on the rect', () => { it('should handle a click on a task with a bound URL clicking on the rect', () => {
const url = 'http://localhost:9000/click_security_loose.html'; cy.get('rect#cl1').click({ force: true });
cy.viewport(1440, 1024); cy.location().should(({ href }) => {
cy.visit(url); expect(href).to.eq('http://localhost:9000/empty.html');
cy.get('body').find('rect#cl1').click({ force: true }); });
});
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
it('should handle a click on a task with a bound URL clicking on the text', () => { it('should handle a click on a task with a bound URL clicking on the text', () => {
const url = 'http://localhost:9000/click_security_loose.html'; cy.get('text#cl1-text').click({ force: true });
cy.viewport(1440, 1024); cy.location().should(({ href }) => {
cy.visit(url); expect(href).to.eq('http://localhost:9000/empty.html');
cy.get('body').find('text#cl1-text').click({ force: true }); });
});
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
it('should handle a click on a task with a bound function without args', () => { it('should handle a click on a task with a bound function without args', () => {
const url = 'http://localhost:9000/click_security_loose.html'; cy.get('rect#cl2').click({ force: true });
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('rect#cl2').click({ force: true });
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2'); cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
}); });
it('should handle a click on a task with a bound function with args', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('rect#cl3').click({ force: true });
it('should handle a click on a task with a bound function with args', () => {
cy.get('rect#cl3').click({ force: true });
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3'); cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
}); });
it('should handle a click on a task with a bound function without args', () => { it('should handle a click on a task with a bound function without args', () => {
const url = 'http://localhost:9000/click_security_loose.html'; cy.get('text#cl2-text').click({ force: true });
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('text#cl2-text').click({ force: true });
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2'); cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
}); });
it('should handle a click on a task with a bound function with args ', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('text#cl3-text').click({ force: true });
it('should handle a click on a task with a bound function with args ', () => {
cy.get('text#cl3-text').click({ force: true });
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3'); cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
}); });
}); });
describe('Interaction - security level tight', () => { describe('Interaction - security level tight', () => {
beforeEach(() => {
cy.visit('http://localhost:9000/click_security_strict.html');
});
it('should handle a click on a node without a bound function', () => { it('should handle a click on a node without a bound function', () => {
const url = 'http://localhost:9000/click_security_strict.html'; cy.contains('Function1').parents('.node').click();
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('g#flowchart-Function-4').click();
cy.get('.created-by-click').should('not.exist'); cy.get('.created-by-click').should('not.exist');
// cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
}); });
it('should handle a click on a node with a bound function where the node starts with a number', () => { it('should handle a click on a node with a bound function where the node starts with a number', () => {
const url = 'http://localhost:9000/click_security_strict.html'; cy.contains('1Function').parents('.node').click();
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('g[id="flowchart-1Function-10"]').click();
// cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
cy.get('.created-by-click').should('not.exist'); cy.get('.created-by-click').should('not.exist');
}); });
it('should handle a click on a node with a bound url', () => { it('should handle a click on a node with a bound url', () => {
const url = 'http://localhost:9000/click_security_strict.html'; cy.contains('URL1').find('.node').click();
cy.viewport(1440, 1024); cy.location().should(({ href }) => {
cy.visit(url); expect(href).to.eq('http://localhost:9000/empty.html');
cy.get('body').find('g#flowchart-URL-5').click(); });
});
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
it('should handle a click on a node with a bound url where the node starts with a number', () => { it('should handle a click on a node with a bound url where the node starts with a number', () => {
const url = 'http://localhost:9000/click_security_strict.html'; cy.contains('2URL').find('.node').click();
cy.viewport(1440, 1024); cy.location().should(({ href }) => {
cy.visit(url); expect(href).to.eq('http://localhost:9000/empty.html');
cy.get('body').find('g[id="flowchart-2URL-11"]').click();
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
}); });
}); });
it('should handle a click on a task with a bound URL clicking on the rect', () => { it('should handle a click on a task with a bound URL clicking on the rect', () => {
const url = 'http://localhost:9000/click_security_strict.html'; cy.get('rect#cl1').click({ force: true });
cy.viewport(1440, 1024); cy.location().should(({ href }) => {
cy.visit(url); expect(href).to.eq('http://localhost:9000/empty.html');
cy.get('body').find('rect#cl1').click({ force: true }); });
});
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
it('should handle a click on a task with a bound URL clicking on the text', () => { it('should handle a click on a task with a bound URL clicking on the text', () => {
const url = 'http://localhost:9000/click_security_strict.html'; cy.get('text#cl1-text').click({ force: true });
cy.viewport(1440, 1024); cy.location().should(({ href }) => {
cy.visit(url); expect(href).to.eq('http://localhost:9000/empty.html');
cy.get('body').find('text#cl1-text').click({ force: true }); });
});
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
it('should handle a click on a task with a bound function', () => { it('should handle a click on a task with a bound function', () => {
const url = 'http://localhost:9000/click_security_strict.html'; cy.get('rect#cl2').click({ force: true });
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('rect#cl2').click({ force: true });
// cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
cy.get('.created-by-gant-click').should('not.exist'); cy.get('.created-by-gant-click').should('not.exist');
}); });
it('should handle a click on a task with a bound function', () => {
const url = 'http://localhost:9000/click_security_strict.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('text#cl2-text').click({ force: true });
// cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2'); it('should handle a click on a task with a bound function', () => {
cy.get('text#cl2-text').click({ force: true });
cy.get('.created-by-gant-click').should('not.exist'); cy.get('.created-by-gant-click').should('not.exist');
}); });
}); });
describe('Interaction - security level other, missspelling', () => { describe('Interaction - security level other, missspelling', () => {
beforeEach(() => {
cy.visit('http://localhost:9000/click_security_other.html');
});
it('should handle a click on a node with a bound function', () => { it('should handle a click on a node with a bound function', () => {
const url = 'http://localhost:9000/click_security_other.html'; cy.contains('Function1').parents('.node').click();
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('g#flowchart-Function-4').click();
// cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
cy.get('.created-by-click').should('not.exist'); cy.get('.created-by-click').should('not.exist');
}); });
it('should handle a click on a node with a bound function where the node starts with a number', () => { it('should handle a click on a node with a bound function where the node starts with a number', () => {
const url = 'http://localhost:9000/click_security_other.html'; cy.contains('1Function').parents('.node').click();
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('g[id="flowchart-1Function-10"]').click();
cy.get('.created-by-click').should('not.exist');
cy.get('.created-by-click').should('not.exist'); cy.get('.created-by-click').should('not.exist');
}); });
it('should handle a click on a node with a bound url', () => {
const url = 'http://localhost:9000/click_security_other.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('g#flowchart-URL-5').click();
cy.location().should((location) => { it('should handle a click on a node with a bound url', () => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html'); cy.contains('URL1').find('.node').click();
cy.location().should(({ href }) => {
expect(href).to.eq('http://localhost:9000/empty.html');
}); });
}); });
it('should handle a click on a task with a bound function', () => { it('should handle a click on a task with a bound function', () => {
const url = 'http://localhost:9000/click_security_other.html'; cy.get('rect#cl2').click({ force: true });
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('rect#cl2').click({ force: true });
cy.get('.created-by-gant-click').should('not.exist'); cy.get('.created-by-gant-click').should('not.exist');
}); });
it('should handle a click on a task with a bound function', () => {
const url = 'http://localhost:9000/click_security_other.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body').find('text#cl2-text').click({ force: true });
it('should handle a click on a task with a bound function', () => {
cy.get('text#cl2-text').click({ force: true });
cy.get('.created-by-gant-click').should('not.exist'); cy.get('.created-by-gant-click').should('not.exist');
}); });
}); });

62
cypress/platform/click_security_loose.html
View File

@@ -13,42 +13,42 @@
</head> </head>
<body> <body>
<div style="display: flex"> <div style="display: flex">
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
graph TB graph TB
Function-->URL FunctionTest1-->URLTest1
click Function clickByFlow "Add a div" click FunctionTest1 clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URLTest1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
graph TB graph TB
1Function--->2URL 1Function--->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
flowchart TB flowchart TB
Function-->URL FunctionTest2-->URLTest2
click Function clickByFlow "Add a div" click FunctionTest2 clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self click URLTest2 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
flowchart TB flowchart TB
1Function--->2URL 10Function--->20URL
click 1Function clickByFlow "Add a div" click 10Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self click 20URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
class ShapeCallback class ShapeCallback
callback ShapeCallback "clickByClass" "This is a tooltip for a callback" callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink2 class ShapeLink2
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
class ShapeCallback2 class ShapeCallback2
callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback" callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
</pre> </pre>
@@ -85,7 +85,7 @@
Calling a Callback (look at the console log) :cl2, after cl1, 3d Calling a Callback (look at the console log) :cl2, after cl1, 3d
Calling a Callback with args :cl3, after cl1, 3d Calling a Callback with args :cl3, after cl1, 3d
click cl1 href "http://localhost:9000/webpackUsage.html" click cl1 href "http://localhost:9000/empty.html"
click cl2 call clickByGantt() click cl2 call clickByGantt()
click cl3 call clickByGantt("test1", test2, test3) click cl3 call clickByGantt("test1", test2, test3)
@@ -95,31 +95,31 @@
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</pre> </pre>
<div style="display: flex"> <div style="display: flex">
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
graph TB graph TB
FunctionArg-->URL FunctionArgTest2-->URL
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div" click FunctionArgTest2 call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
flowchart TB flowchart TB
FunctionArg-->URL 2FunctionArg-->URL
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div" click 2FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
class ShapeCallback class ShapeCallback
click ShapeCallback call clickByClass(123) "This is a tooltip for a callback" click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink2 class ShapeLink2
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
class ShapeCallback2 class ShapeCallback2
click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback" click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
</pre> </pre>

10
cypress/platform/click_security_other.html
View File

@@ -9,15 +9,15 @@
<body> <body>
<pre id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
Function-->URL Function1-->URL1
click Function clickByFlow "Add a div" click Function1 clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
1Function-->2URL 1Function-->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre class="mermaid"> <pre class="mermaid">
@@ -50,7 +50,7 @@
Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10 Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
Calling a Callback (look at the console log) :cl2, after cl1, 3d Calling a Callback (look at the console log) :cl2, after cl1, 3d
click cl1 href "http://localhost:9000/webpackUsage.html" click cl1 href "http://localhost:9000/empty.html"
click cl2 call clickByGantt("test", test, test) click cl2 call clickByGantt("test", test, test)
section Last section section Last section

22
cypress/platform/click_security_sandbox.html
View File

@@ -17,38 +17,38 @@
graph TB graph TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
1Function--->2URL 1Function--->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
flowchart TB flowchart TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
flowchart TB flowchart TB
1Function--->2URL 1Function--->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram classDiagram
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
class ShapeCallback class ShapeCallback
callback ShapeCallback "clickByClass" "This is a tooltip for a callback" callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink2 class ShapeLink2
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
class ShapeCallback2 class ShapeCallback2
callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback" callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
</pre> </pre>
@@ -85,7 +85,7 @@
Calling a Callback (look at the console log) :cl2, after cl1, 3d Calling a Callback (look at the console log) :cl2, after cl1, 3d
Calling a Callback with args :cl3, after cl1, 3d Calling a Callback with args :cl3, after cl1, 3d
click cl1 href "http://localhost:9000/webpackUsage.html" click cl1 href "http://localhost:9000/empty.html"
click cl2 call clickByGantt() click cl2 call clickByGantt()
click cl3 call clickByGantt("test1", test2, test3) click cl3 call clickByGantt("test1", test2, test3)
@@ -99,19 +99,19 @@
graph TB graph TB
FunctionArg-->URL FunctionArg-->URL
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div" click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
flowchart TB flowchart TB
FunctionArg-->URL FunctionArg-->URL
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div" click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram classDiagram
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
class ShapeCallback class ShapeCallback
click ShapeCallback call clickByClass(123) "This is a tooltip for a callback" click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
</pre> </pre>
@@ -119,7 +119,7 @@
<pre id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink2 class ShapeLink2
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
class ShapeCallback2 class ShapeCallback2
click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback" click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
</pre> </pre>

10
cypress/platform/click_security_strict.html
View File

@@ -9,15 +9,15 @@
<body> <body>
<pre id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
Function-->URL Function1-->URL1
click Function clickByFlow "Add a div" click Function1 clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
1Function-->2URL 1Function-->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre class="mermaid"> <pre class="mermaid">
@@ -51,7 +51,7 @@
Calling a Callback (look at the console log) :cl2, after cl1, 3d Calling a Callback (look at the console log) :cl2, after cl1, 3d
Calling a Callback with args :cl3, after cl1, 3d Calling a Callback with args :cl3, after cl1, 3d
click cl1 href "http://localhost:9000/webpackUsage.html" click cl1 href "http://localhost:9000/empty.html"
click cl2 call clickByGantt() click cl2 call clickByGantt()
click cl3 call clickByGantt("test1", test2, test3) click cl3 call clickByGantt("test1", test2, test3)

10
cypress/platform/empty.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Empty</title>
</head>
<body></body>
</html>

2
cypress/platform/knsv.html
View File

@@ -368,7 +368,6 @@ flowchart TD
</pre> </pre>
<!-- <script src="./mermaid.js"></script> --> <!-- <script src="./mermaid.js"></script> -->
<script src="./mermaid-mindmap-detector.js"></script>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
@@ -386,6 +385,7 @@ flowchart TD
htmlLabels: false, htmlLabels: false,
fontFamily: 'courier', fontFamily: 'courier',
}, },
extraDiagrams: ['./mermaid-mindmap-detector.js'],
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');

9
cypress/platform/knsv2.html
View File

@@ -86,9 +86,10 @@ mindmap
gc7((grand<br/>grand<br/>child 8)) gc7((grand<br/>grand<br/>child 8))
</pre> </pre>
<!-- <div id="cy"></div> --> <!-- <div id="cy"></div> -->
<script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
<script src="./mermaid-example-diagram-detector.js"></script> <!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -97,8 +98,10 @@ mindmap
theme: 'forest', theme: 'forest',
startOnLoad: true, startOnLoad: true,
logLevel: 0, logLevel: 0,
basePath: './packages/', // basePath: './packages/',
// themeVariables: { darkMode: true }, // themeVariables: { darkMode: true },
extraDiagrams: ['./mermaid-mindmap-detector.core.mjs'],
// extraDiagrams: ['../../mermaid-mindmap/registry.ts'],
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');

9
cypress/platform/rerender.html
View File

@@ -17,11 +17,12 @@
rerender('XMas'); rerender('XMas');
function rerender(text) { function rerender(text) {
var graphText = `graph TD const graphText = `graph TD
A[${text}] -->|Get money| B(Go shopping)`; A[${text}] -->|Get money| B(Go shopping)`;
var graph = mermaid.mermaidAPI.render('id', graphText); mermaid.mermaidAPI.render('id', graphText).then((svg) => {
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph); console.log('\x1b[35m%s\x1b[0m', '>> graph', svg);
document.getElementById('graph').innerHTML = graph; document.getElementById('graph').innerHTML = svg;
});
} }
</script> </script>
<button id="rerender" onclick="rerender('Saturday')">Rerender</button> <button id="rerender" onclick="rerender('Saturday')">Rerender</button>

2
cypress/platform/viewer.js
View File

@@ -36,6 +36,8 @@ const contentLoaded = function () {
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
graphObj.mermaid.extraDiagrams = ['/mermaid-mindmap-detector.core.mjs'];
mermaid2.initialize(graphObj.mermaid); mermaid2.initialize(graphObj.mermaid);
mermaid2.init(); mermaid2.init();
} }

9
packages/mermaid-mindmap/src/add-diagram.ts
View File

@@ -5,13 +5,10 @@ import mindmapRenderer from './mindmapRenderer';
import mindmapStyles from './styles'; import mindmapStyles from './styles';
import { injectUtils } from './mermaidUtils'; import { injectUtils } from './mermaidUtils';
window.mermaid.connectDiagram( export const mindmap = {
'mindmap',
{
db: mindmapDb, db: mindmapDb,
renderer: mindmapRenderer, renderer: mindmapRenderer,
parser: mindmapParser, parser: mindmapParser,
styles: mindmapStyles, styles: mindmapStyles,
}, injectUtils,
injectUtils };
);

3
packages/mermaid-mindmap/src/mindmapDetector.ts
View File

@@ -1,3 +0,0 @@
export const mindmapDetector = (txt: string) => {
return txt.match(/^\s*mindmap/) !== null;
};

40
packages/mermaid-mindmap/src/registry.ts
View File

@@ -1,34 +1,10 @@
// @ts-ignore: TODO Fix ts errors export const id = 'mindmap';
import { mindmapDetector } from './mindmapDetector';
const scriptElement = document.currentScript as HTMLScriptElement; export const detector = (txt: string) => {
const path = scriptElement.src; return txt.match(/^\s*mindmap/) !== null;
const lastSlash = path.lastIndexOf('/'); };
const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
if (typeof document !== 'undefined') { export const loadDiagram = async () => {
if (window.mermaid && typeof window.mermaid.detectors === 'object') { const { mindmap } = await import('./add-diagram');
window.mermaid.detectors.push({ id: 'mindmap', detector: mindmapDetector }); return { id, diagram: mindmap };
} else { };
window.mermaid = {};
window.mermaid.detectors = [{ id: 'mindmap', detector: mindmapDetector }];
}
/*!
* Wait for document loaded before starting the execution.
*/
window.addEventListener(
'load',
() => {
if (window.mermaid && typeof window.mermaid.detectors === 'object') {
window.mermaid.detectors.push({
id: 'mindmap',
detector: mindmapDetector,
path: baseFolder,
});
console.error(window.mermaid.detectors); // eslint-disable-line no-console
}
},
false
);
}

1
packages/mermaid-mindmap/tsconfig.json
View File

@@ -1,5 +1,6 @@
{ {
"extends": "../../tsconfig.json", "extends": "../../tsconfig.json",
"module": "esnext",
"compilerOptions": { "compilerOptions": {
"rootDir": "./src", "rootDir": "./src",
"outDir": "./dist" "outDir": "./dist"

23
packages/mermaid/src/Diagram.ts
View File

@@ -1,7 +1,7 @@
import * as configApi from './config'; import * as configApi from './config';
import { log } from './logger'; import { log } from './logger';
import { getDiagram, loadDiagram } from './diagram-api/diagramAPI'; import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
import { detectType, getPathForDiagram } from './diagram-api/detectType'; import { detectType, getDiagramLoader } from './diagram-api/detectType';
import { isDetailedError } from './utils'; import { isDetailedError } from './utils';
export class Diagram { export class Diagram {
type = 'graph'; type = 'graph';
@@ -75,10 +75,25 @@ export const getDiagramFromText = async (txt: string, parseError?: Function) =>
// Trying to find the diagram // Trying to find the diagram
getDiagram(type); getDiagram(type);
} catch (error) { } catch (error) {
const loader = getDiagramLoader(type);
if (!loader) {
throw new Error(`Diagram ${type} not found.`);
}
// Diagram not avaiable, loading it // Diagram not avaiable, loading it
const path = getPathForDiagram(type); // const path = getPathForDiagram(type);
const { diagram } = await loader(); // eslint-disable-line @typescript-eslint/no-explicit-any
registerDiagram(
type,
{
db: diagram.db,
renderer: diagram.renderer,
parser: diagram.parser,
styles: diagram.styles,
},
diagram.injectUtils
);
// await loadDiagram('./packages/mermaid-mindmap/dist/mermaid-mindmap.js'); // await loadDiagram('./packages/mermaid-mindmap/dist/mermaid-mindmap.js');
await loadDiagram(path + 'mermaid-' + type + '.js'); // await loadDiagram(path + 'mermaid-' + type + '.js');
// new diagram will try getDiagram again and if fails then it is a valid throw // new diagram will try getDiagram again and if fails then it is a valid throw
} }
// If either of the above worked, we have the diagram // If either of the above worked, we have the diagram

1
packages/mermaid/src/config.type.ts
View File

@@ -3,6 +3,7 @@
import DOMPurify from 'dompurify'; import DOMPurify from 'dompurify';
export interface MermaidConfig { export interface MermaidConfig {
extraDiagrams?: any;
theme?: string; theme?: string;
themeVariables?: any; themeVariables?: any;
themeCSS?: string; themeCSS?: string;

2
packages/mermaid/src/defaultConfig.ts
View File

@@ -115,7 +115,7 @@ const config: Partial<MermaidConfig> = {
* Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'] * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
*/ */
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'], secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
extraDiagrams: [],
/** /**
* This option controls if the generated ids of nodes in the SVG are generated randomly or based * This option controls if the generated ids of nodes in the SVG are generated randomly or based
* on a seed. If set to false, the IDs are generated based on the current date and thus are not * on a seed. If set to false, the IDs are generated based on the current date and thus are not

27
packages/mermaid/src/diagram-api/detectType.ts
View File

@@ -1,8 +1,8 @@
import { MermaidConfig } from '../config.type'; import { MermaidConfig } from '../config.type';
export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean; export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
export type DetectorRecord = { detector: DiagramDetector; path: string }; export type DiagramLoader = (() => any) | null;
export type DetectorRecord = { detector: DiagramDetector; loader: DiagramLoader };
const directive = const directive =
/[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi; /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
const anyComment = /\s*%%.*\n/gm; const anyComment = /\s*%%.*\n/gm;
@@ -37,8 +37,9 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
// console.log(detectors); // console.log(detectors);
for (const [key, detectorRecord] of Object.entries(detectors)) { for (const [key, { detector }] of Object.entries(detectors)) {
if (detectorRecord.detector(text, config)) { const diagram = detector(text, config);
if (diagram) {
return key; return key;
} }
} }
@@ -47,13 +48,15 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
return 'flowchart'; return 'flowchart';
}; };
export const addDetector = (key: string, detector: DiagramDetector, path: string) => { export const addDetector = (
detectors[key] = { detector, path }; key: string,
detector: DiagramDetector,
loader: DiagramLoader | null
) => {
detectors[key] = { detector, loader };
// TODO: Remove
// eslint-disable-next-line no-console
console.log(detectors);
}; };
export const getPathForDiagram = (id: string) => { export const getDiagramLoader = (key: string) => detectors[key].loader;
const detectorRecord = detectors[id];
if (detectorRecord) {
return detectorRecord.path;
}
};

2
packages/mermaid/src/diagram-api/diagram-orchestration.ts
View File

@@ -112,7 +112,7 @@ const registerDiagramAndDetector = (
detector: DiagramDetector detector: DiagramDetector
) => { ) => {
registerDiagram(id, diagram); registerDiagram(id, diagram);
registerDetector(id, detector, ''); registerDetector(id, detector);
}; };
export const addDiagrams = () => { export const addDiagrams = () => {

10
packages/mermaid/src/diagram-api/diagramAPI.spec.ts
View File

@@ -19,17 +19,13 @@ describe('DiagramAPI', () => {
const detector: DiagramDetector = (str: string) => { const detector: DiagramDetector = (str: string) => {
return str.match('loki') !== null; return str.match('loki') !== null;
}; };
registerDetector('loki', detector, ''); registerDetector('loki', detector);
registerDiagram( registerDiagram('loki', {
'loki',
{
db: {}, db: {},
parser: {}, parser: {},
renderer: {}, renderer: {},
styles: {}, styles: {},
}, });
(text: string) => text.includes('loki')
);
expect(getDiagram('loki')).not.toBeNull(); expect(getDiagram('loki')).not.toBeNull();
expect(detectType('loki diagram')).toBe('loki'); expect(detectType('loki diagram')).toBe('loki');
}); });

17
packages/mermaid/src/diagram-api/diagramAPI.ts
View File

@@ -18,12 +18,21 @@ export const getConfig = _getConfig;
export const sanitizeText = (text: string) => _sanitizeText(text, getConfig()); export const sanitizeText = (text: string) => _sanitizeText(text, getConfig());
export const setupGraphViewbox = _setupGraphViewbox; export const setupGraphViewbox = _setupGraphViewbox;
export interface InjectUtils {
_log: any;
_setLogLevel: any;
_getConfig: any;
_sanitizeText: any;
_setupGraphViewbox: any;
}
export interface DiagramDefinition { export interface DiagramDefinition {
db: any; db: any;
renderer: any; renderer: any;
parser: any; parser: any;
styles: any; styles: any;
init?: (config: MermaidConfig) => void; init?: (config: MermaidConfig) => void;
injectUtils?: (utils: InjectUtils) => void;
} }
const diagrams: Record<string, DiagramDefinition> = {}; const diagrams: Record<string, DiagramDefinition> = {};
@@ -32,8 +41,8 @@ export interface Detectors {
[key: string]: DiagramDetector; [key: string]: DiagramDetector;
} }
export const registerDetector = (id: string, detector: DiagramDetector, path: string) => { export const registerDetector = (id: string, detector: DiagramDetector) => {
addDetector(id, detector, path); addDetector(id, detector, null);
}; };
export const registerDiagram = ( export const registerDiagram = (
@@ -52,7 +61,9 @@ export const registerDiagram = (
} }
diagrams[id] = diagram; diagrams[id] = diagram;
addStylesForDiagram(id, diagram.styles); addStylesForDiagram(id, diagram.styles);
connectCallbacks[id] = callback; if (typeof callback !== 'undefined') {
callback(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
}
}; };
export const getDiagram = (name: string): DiagramDefinition => { export const getDiagram = (name: string): DiagramDefinition => {

24
packages/mermaid/src/mermaid.ts
View File

@@ -45,7 +45,7 @@ import { isDetailedError } from './utils';
* @param nodes * @param nodes
* @param callback * @param callback
*/ */
const init = function ( const init = async function (
config?: MermaidConfig, config?: MermaidConfig,
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
nodes?: string | HTMLElement | NodeListOf<HTMLElement>, nodes?: string | HTMLElement | NodeListOf<HTMLElement>,
@@ -54,10 +54,20 @@ const init = function (
) { ) {
try { try {
log.info('Detectors in init', mermaid.detectors); // eslint-disable-line log.info('Detectors in init', mermaid.detectors); // eslint-disable-line
const conf = mermaidAPI.getConfig();
if (typeof conf.extraDiagrams !== 'undefined' && conf.extraDiagrams.length > 0) {
// config.extraDiagrams.forEach(async (diagram: string) => {
const { id, detector, loadDiagram } = await import(conf.extraDiagrams[0]);
// TODO: Remove
// eslint-disable-next-line no-console
console.log(id, detector, loadDiagram);
addDetector(id, detector, loadDiagram);
// });
}
mermaid.detectors.forEach(({ id, detector, path }) => { mermaid.detectors.forEach(({ id, detector, path }) => {
addDetector(id, detector, path); addDetector(id, detector, path);
}); });
initThrowsErrors(config, nodes, callback); await initThrowsErrors(config, nodes, callback);
} catch (e) { } catch (e) {
log.warn('Syntax Error rendering'); log.warn('Syntax Error rendering');
if (isDetailedError(e)) { if (isDetailedError(e)) {
@@ -69,7 +79,7 @@ const init = function (
} }
}; };
const initThrowsErrors = function ( const initThrowsErrors = async function (
config?: MermaidConfig, config?: MermaidConfig,
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
nodes?: string | HTMLElement | NodeListOf<HTMLElement>, nodes?: string | HTMLElement | NodeListOf<HTMLElement>,
@@ -108,7 +118,7 @@ const initThrowsErrors = function (
// generate the id of the diagram // generate the id of the diagram
const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed); const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);
let txt; let txt: string;
const errors = []; const errors = [];
// element is the current div with mermaid class // element is the current div with mermaid class
@@ -136,7 +146,7 @@ const initThrowsErrors = function (
log.debug('Detected early reinit: ', init); log.debug('Detected early reinit: ', init);
} }
try { try {
mermaidAPI.render( await mermaidAPI.render(
id, id,
txt, txt,
(svgCode: string, bindFunctions?: (el: Element) => void) => { (svgCode: string, bindFunctions?: (el: Element) => void) => {
@@ -164,8 +174,8 @@ const initThrowsErrors = function (
} }
}; };
const initialize = function (config: MermaidConfig) { const initialize = async function (config: MermaidConfig) {
mermaidAPI.initialize(config); await mermaidAPI.initialize(config);
}; };
/** /**

4
packages/mermaid/src/mermaidAPI.ts
View File

@@ -18,6 +18,7 @@ import { compile, serialize, stringify } from 'stylis';
import pkg from '../package.json'; import pkg from '../package.json';
import * as configApi from './config'; import * as configApi from './config';
import { addDiagrams } from './diagram-api/diagram-orchestration'; import { addDiagrams } from './diagram-api/diagram-orchestration';
import { addDetector } from './diagram-api/detectType';
import classDb from './diagrams/class/classDb'; import classDb from './diagrams/class/classDb';
import flowDb from './diagrams/flowchart/flowDb'; import flowDb from './diagrams/flowchart/flowDb';
import flowRenderer from './diagrams/flowchart/flowRenderer'; import flowRenderer from './diagrams/flowchart/flowRenderer';
@@ -461,7 +462,7 @@ const handleDirective = function (p: any, directive: any, type: string): void {
}; };
/** @param {MermaidConfig} options */ /** @param {MermaidConfig} options */
function initialize(options: MermaidConfig) { async function initialize(options: MermaidConfig) {
// Handle legacy location of font-family configuration // Handle legacy location of font-family configuration
if (options?.fontFamily) { if (options?.fontFamily) {
if (!options.themeVariables?.fontFamily) { if (!options.themeVariables?.fontFamily) {
@@ -485,6 +486,7 @@ function initialize(options: MermaidConfig) {
typeof options === 'object' ? configApi.setSiteConfig(options) : configApi.getSiteConfig(); typeof options === 'object' ? configApi.setSiteConfig(options) : configApi.getSiteConfig();
setLogLevel(config.logLevel); setLogLevel(config.logLevel);
if (!hasLoadedDiagrams) { if (!hasLoadedDiagrams) {
addDiagrams(); addDiagrams();
hasLoadedDiagrams = true; hasLoadedDiagrams = true;

2
tsconfig.json
View File

@@ -27,7 +27,7 @@
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
/* Modules */ /* Modules */
"module": "ES6" /* Specify what module code is generated. */, "module": "es2022" /* Specify what module code is generated. */,
// "rootDir": "./packages" /* Specify the root folder within your source files. */, // "rootDir": "./packages" /* Specify the root folder within your source files. */,
"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */, "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
// "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */, // "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,

8
vite.config.ts
View File

@@ -15,4 +15,12 @@ export default defineConfig({
reporter: ['text', 'json', 'html', 'lcov'], reporter: ['text', 'json', 'html', 'lcov'],
}, },
}, },
build: {
/** If you set esmExternals to true, this plugins assumes that
all external dependencies are ES modules */
commonjsOptions: {
esmExternals: true,
},
},
}); });