Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lazy load import #3592

Merged
merged 13 commits into from
Oct 6, 2022
Merged

Lazy load import #3592

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
2a9e564
fix(tests): Interaction test - Security loose.
sidharthv96 Oct 4, 2022
750f647
fix(tests): Interaction - Security strict, other
sidharthv96 Oct 4, 2022
d3a81f0
chore(tests): Interaction - cleanup
sidharthv96 Oct 4, 2022
a017ffc
fix(test): Rerender
sidharthv96 Oct 5, 2022
74bd576
fix(mermaid): Add await to render in init.
sidharthv96 Oct 5, 2022
42b59a9
Merge remote-tracking branch 'upstream/develop' into sidv/fixE2E
sidharthv96 Oct 5, 2022
f9753fc
chore: Update test URL
sidharthv96 Oct 5, 2022
d8c7557
fix: Docs
sidharthv96 Oct 5, 2022
c05c98c
WIP
knsv Oct 5, 2022
0f2e0c2
Updated logic for diagram loading
knsv Oct 5, 2022
c919bef
fix: Import diagram
sidharthv96 Oct 6, 2022
9f286b4
fix: Filename in viewer.js
sidharthv96 Oct 6, 2022
e49825b
Merge pull request #3589 from mermaid-js/sidv/fixLazyLoad
knsv Oct 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
252 changes: 83 additions & 169 deletions cypress/integration/other/interaction.spec.js
View file
Open in desktop

Large diffs are not rendered by default.

62 changes: 31 additions & 31 deletions cypress/platform/click_security_loose.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,42 +13,42 @@
</head>
<body>
<div style="display: flex">
<pre id="FirstLine" class="mermaid">
<pre class="mermaid">
graph TB
Function-->URL
click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
FunctionTest1-->URLTest1
click FunctionTest1 clickByFlow "Add a div"
click URLTest1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre>
<pre id="FirstLine" class="mermaid">
<pre class="mermaid">
graph TB
1Function--->2URL
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 id="FirstLine" class="mermaid">
<pre class="mermaid">
flowchart TB
Function-->URL
click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
FunctionTest2-->URLTest2
click FunctionTest2 clickByFlow "Add a div"
click URLTest2 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
</pre>
<pre id="FirstLine" class="mermaid">
<pre class="mermaid">
flowchart TB
1Function--->2URL
click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
10Function--->20URL
click 10Function clickByFlow "Add a div"
click 20URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
</pre>

<pre id="FirstLine" class="mermaid">
<pre class="mermaid">
classDiagram
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
callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</pre>
<pre id="FirstLine" class="mermaid">
<pre class="mermaid">
classDiagram-v2
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
callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
</pre>
Expand Down Expand Up @@ -85,7 +85,7 @@
Calling a Callback (look at the console log) :cl2, 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 cl3 call clickByGantt("test1", test2, test3)

Expand All @@ -95,31 +95,31 @@
Add another diagram to demo page : 48h
</pre>
<div style="display: flex">
<pre id="FirstLine" class="mermaid">
<pre class="mermaid">
graph TB
FunctionArg-->URL
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
FunctionArgTest2-->URL
click FunctionArgTest2 call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre>
<pre id="FirstLine" class="mermaid">
<pre class="mermaid">
flowchart TB
FunctionArg-->URL
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
2FunctionArg-->URL
click 2FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre>

<pre id="FirstLine" class="mermaid">
<pre class="mermaid">
classDiagram
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
click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
</pre>

<pre id="FirstLine" class="mermaid">
<pre class="mermaid">
classDiagram-v2
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
click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
</pre>
Expand Down
10 changes: 5 additions & 5 deletions cypress/platform/click_security_other.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@
<body>
<pre id="FirstLine" class="mermaid">
graph TB
Function-->URL
click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
Function1-->URL1
click Function1 clickByFlow "Add a div"
click URL1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre>
<pre id="FirstLine" class="mermaid">
graph TB
1Function-->2URL
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 class="mermaid">
Expand Down Expand Up @@ -50,7 +50,7 @@
Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
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)

section Last section
Expand Down
22 changes: 11 additions & 11 deletions cypress/platform/click_security_sandbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,38 +17,38 @@
graph TB
Function-->URL
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 id="FirstLine" class="mermaid">
graph TB
1Function--->2URL
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 id="FirstLine" class="mermaid">
flowchart TB
Function-->URL
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 id="FirstLine" class="mermaid">
flowchart TB
1Function--->2URL
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 id="FirstLine" class="mermaid">
classDiagram
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
callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</pre>
<pre id="FirstLine" class="mermaid">
classDiagram-v2
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
callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
</pre>
Expand Down Expand Up @@ -85,7 +85,7 @@
Calling a Callback (look at the console log) :cl2, 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 cl3 call clickByGantt("test1", test2, test3)

Expand All @@ -99,27 +99,27 @@
graph TB
FunctionArg-->URL
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 id="FirstLine" class="mermaid">
flowchart TB
FunctionArg-->URL
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 id="FirstLine" class="mermaid">
classDiagram
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
click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
</pre>

<pre id="FirstLine" class="mermaid">
classDiagram-v2
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
click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
</pre>
Expand Down
10 changes: 5 additions & 5 deletions cypress/platform/click_security_strict.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@
<body>
<pre id="FirstLine" class="mermaid">
graph TB
Function-->URL
click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
Function1-->URL1
click Function1 clickByFlow "Add a div"
click URL1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
</pre>
<pre id="FirstLine" class="mermaid">
graph TB
1Function-->2URL
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 class="mermaid">
Expand Down Expand Up @@ -51,7 +51,7 @@
Calling a Callback (look at the console log) :cl2, 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 cl3 call clickByGantt("test1", test2, test3)

Expand Down
10 changes: 10 additions & 0 deletions cypress/platform/empty.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 1 addition & 1 deletion cypress/platform/knsv.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,7 +368,6 @@
</pre>

<!-- <script src="./mermaid.js"></script> -->
<script src="./mermaid-mindmap-detector.js"></script>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
Expand All @@ -386,6 +385,7 @@
htmlLabels: false,
fontFamily: 'courier',
},
extraDiagrams: ['./mermaid-mindmap-detector.js'],
});
function callback() {
alert('It worked');
Expand Down
9 changes: 6 additions & 3 deletions cypress/platform/knsv2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,10 @@
gc7((grand<br/>grand<br/>child 8))
</pre>
<!-- <div id="cy"></div> -->
<script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
<script src="./mermaid-example-diagram-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.js"></script>

<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
Expand All @@ -97,8 +98,10 @@
theme: 'forest',
startOnLoad: true,
logLevel: 0,
basePath: './packages/',
// basePath: './packages/',
// themeVariables: { darkMode: true },
extraDiagrams: ['./mermaid-mindmap-detector.core.mjs'],
// extraDiagrams: ['../../mermaid-mindmap/registry.ts'],
});
function callback() {
alert('It worked');
Expand Down
9 changes: 5 additions & 4 deletions cypress/platform/rerender.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,12 @@
rerender('XMas');

function rerender(text) {
var graphText = `graph TD
const graphText = `graph TD
A[${text}] -->|Get money| B(Go shopping)`;
var graph = mermaid.mermaidAPI.render('id', graphText);
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
document.getElementById('graph').innerHTML = graph;
mermaid.mermaidAPI.render('id', graphText).then((svg) => {
console.log('\x1b[35m%s\x1b[0m', '>> graph', svg);
document.getElementById('graph').innerHTML = svg;
});
}
</script>
<button id="rerender" onclick="rerender('Saturday')">Rerender</button>
Expand Down
2 changes: 2 additions & 0 deletions cypress/platform/viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ const contentLoaded = function () {
document.getElementsByTagName('body')[0].appendChild(div);
}

graphObj.mermaid.extraDiagrams = ['/mermaid-mindmap-detector.core.mjs'];

mermaid2.initialize(graphObj.mermaid);
mermaid2.init();
}
Expand Down
12 changes: 12 additions & 0 deletions docs/n00b-syntaxReference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,18 @@ erDiagram
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```

```mermaid
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```

The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.

## Diagram Breaking
Expand Down
17 changes: 7 additions & 10 deletions packages/mermaid-mindmap/src/add-diagram.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,10 @@ import mindmapRenderer from './mindmapRenderer';
import mindmapStyles from './styles';
import { injectUtils } from './mermaidUtils';

window.mermaid.connectDiagram(
'mindmap',
{
db: mindmapDb,
renderer: mindmapRenderer,
parser: mindmapParser,
styles: mindmapStyles,
},
injectUtils
);
export const mindmap = {
db: mindmapDb,
renderer: mindmapRenderer,
parser: mindmapParser,
styles: mindmapStyles,
injectUtils,
};
3 changes: 0 additions & 3 deletions packages/mermaid-mindmap/src/mindmapDetector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +0,0 @@
export const mindmapDetector = (txt: string) => {
return txt.match(/^\s*mindmap/) !== null;
};
Loading