Merge pull request #3774 from mermaid-js/sidv/fixLL
Fix lazy loading in webpack
This commit is contained in:
commit
2f9d6e0aff
|
@ -23,23 +23,13 @@ const packageOptions = {
|
|||
'mermaid-mindmap': {
|
||||
name: 'mermaid-mindmap',
|
||||
packageName: 'mermaid-mindmap',
|
||||
file: 'diagram-definition.ts',
|
||||
},
|
||||
'mermaid-mindmap-detector': {
|
||||
name: 'mermaid-mindmap-detector',
|
||||
packageName: 'mermaid-mindmap',
|
||||
file: 'detector.ts',
|
||||
},
|
||||
'mermaid-example-diagram': {
|
||||
name: 'mermaid-example-diagram',
|
||||
packageName: 'mermaid-example-diagram',
|
||||
file: 'diagram-definition.ts',
|
||||
},
|
||||
'mermaid-example-diagram-detector': {
|
||||
name: 'mermaid-example-diagram-detector',
|
||||
packageName: 'mermaid-example-diagram',
|
||||
file: 'detector.ts',
|
||||
},
|
||||
// 'mermaid-example-diagram-detector': {
|
||||
// name: 'mermaid-example-diagram-detector',
|
||||
// packageName: 'mermaid-example-diagram',
|
||||
// file: 'detector.ts',
|
||||
// },
|
||||
};
|
||||
|
||||
interface BuildOptions {
|
||||
|
@ -111,7 +101,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
|||
include: [
|
||||
'packages/mermaid-mindmap/src/**',
|
||||
'packages/mermaid/src/**',
|
||||
'packages/mermaid-example-diagram/src/**',
|
||||
// 'packages/mermaid-example-diagram/src/**',
|
||||
],
|
||||
};
|
||||
}
|
||||
|
@ -141,7 +131,7 @@ if (watch) {
|
|||
build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' }));
|
||||
if (!mermaidOnly) {
|
||||
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
|
||||
build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
|
||||
// build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
|
||||
}
|
||||
} else {
|
||||
void main();
|
||||
|
|
|
@ -0,0 +1,13 @@
|
|||
describe('mermaid', () => {
|
||||
describe('registerDiagram', () => {
|
||||
it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => {
|
||||
const url = 'http://localhost:9000/external-diagrams-mindmap.html';
|
||||
cy.visit(url);
|
||||
|
||||
cy.get('svg', {
|
||||
// may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram
|
||||
timeout: 10000,
|
||||
}).matchImageSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
|
@ -0,0 +1,49 @@
|
|||
<html>
|
||||
<body>
|
||||
<h1>Should correctly load a third-party diagram using registerDiagram</h1>
|
||||
<pre id="diagram" class="mermaid">
|
||||
mindmap
|
||||
root
|
||||
A
|
||||
B
|
||||
C
|
||||
D
|
||||
E
|
||||
A2
|
||||
B2
|
||||
C2
|
||||
D2
|
||||
E2
|
||||
child1((Circle))
|
||||
grandchild 1
|
||||
grandchild 2
|
||||
child2(Round rectangle)
|
||||
grandchild 3
|
||||
grandchild 4
|
||||
child3[Square]
|
||||
grandchild 5
|
||||
::icon(mdi mdi-fire)
|
||||
gc6((grand<br/>child 6))
|
||||
::icon(mdi mdi-fire)
|
||||
gc7((grand<br/>grand<br/>child 8))
|
||||
</pre>
|
||||
<!-- <pre id="diagram" class="mermaid2">
|
||||
example-diagram
|
||||
</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="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
|
||||
<!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
|
||||
<script type="module">
|
||||
import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
||||
// import example from '../../packages/mermaid-example-diagram/src/detector';
|
||||
import mermaid from '../../packages/mermaid/src/mermaid';
|
||||
|
||||
await mermaid.registerExternalDiagrams([mindmap]);
|
||||
await mermaid.initialize({ logLevel: 0 });
|
||||
await mermaid.initThrowsErrorsAsync();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -1,4 +1,5 @@
|
|||
import mermaid2 from '../../packages/mermaid/src/mermaid';
|
||||
import mindmap from '../../packages/mermaid-mindmap/src/detector';
|
||||
|
||||
function b64ToUtf8(str) {
|
||||
return decodeURIComponent(escape(window.atob(str)));
|
||||
|
@ -9,7 +10,7 @@ function b64ToUtf8(str) {
|
|||
* configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
|
||||
* page.
|
||||
*/
|
||||
const contentLoaded = function () {
|
||||
const contentLoaded = async function () {
|
||||
let pos = document.location.href.indexOf('?graph=');
|
||||
if (pos > 0) {
|
||||
pos = pos + 7;
|
||||
|
@ -36,8 +37,7 @@ const contentLoaded = function () {
|
|||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
|
||||
graphObj.mermaid.lazyLoadedDiagrams = ['/mermaid-mindmap-detector.esm.mjs'];
|
||||
|
||||
await mermaid2.registerExternalDiagrams([mindmap]);
|
||||
mermaid2.initialize(graphObj.mermaid);
|
||||
mermaid2.init();
|
||||
}
|
||||
|
|
|
@ -49,10 +49,9 @@
|
|||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module">
|
||||
// import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0/dist/mermaid.esm.min.mjs';
|
||||
// import mermaid from 'http://localhost:9000/mermaid.esm.mjs';
|
||||
console.log(mermaid); // eslint-disable-line
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
|
||||
import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.mjs';
|
||||
|
||||
window.mermaid = mermaid;
|
||||
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
|
@ -60,20 +59,18 @@
|
|||
logLevel: 4,
|
||||
startOnLoad: true,
|
||||
themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
|
||||
lazyLoadedDiagrams: [
|
||||
'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.2.0/dist/mermaid-mindmap-detector.esm.mjs',
|
||||
// 'http://localhost:9000/mermaid-mindmap-detector.esm.mjs',
|
||||
],
|
||||
};
|
||||
if (isDarkMode) conf.theme = 'dark';
|
||||
|
||||
async function loadMermaid() {
|
||||
await mermaid.initialize(conf);
|
||||
mermaid.parseError = (e) => {
|
||||
console.log('parse error', e); // eslint-disable-line
|
||||
};
|
||||
await mermaid.registerExternalDiagrams([mindmap]);
|
||||
mermaid.initialize(conf);
|
||||
console.log('mermaid initialized'); // eslint-disable-line
|
||||
}
|
||||
mermaid.parseError = (e) => {
|
||||
console.log('parse error', e); // eslint-disable-line
|
||||
};
|
||||
|
||||
await loadMermaid();
|
||||
</script>
|
||||
<script>
|
||||
|
|
14
package.json
14
package.json
|
@ -3,19 +3,8 @@
|
|||
"private": true,
|
||||
"version": "9.2.0-rc4",
|
||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"main": "dist/mermaid.core.mjs",
|
||||
"module": "dist/mermaid.core.mjs",
|
||||
"types": "dist/mermaid.d.ts",
|
||||
"type": "module",
|
||||
"packageManager": "pnpm@7.13.2",
|
||||
"exports": {
|
||||
".": {
|
||||
"require": "./dist/mermaid.min.js",
|
||||
"import": "./dist/mermaid.core.mjs",
|
||||
"types": "./dist/mermaid.d.ts"
|
||||
},
|
||||
"./*": "./*"
|
||||
},
|
||||
"keywords": [
|
||||
"diagram",
|
||||
"markdown",
|
||||
|
@ -147,9 +136,6 @@
|
|||
"resolutions": {
|
||||
"d3": "^7.0.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"sideEffects": [
|
||||
"**/*.css",
|
||||
"**/*.scss"
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
### Do not refer this package. It is not ready.
|
||||
|
||||
### Refer mermaid-mindmap instead.
|
|
@ -12,3 +12,5 @@ export const diagram = {
|
|||
styles,
|
||||
injectUtils,
|
||||
};
|
||||
|
||||
export { detector, id } from './detector';
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
{
|
||||
"name": "@mermaid-js/mermaid-mindmap",
|
||||
"version": "9.2.0",
|
||||
"version": "9.2.2-rc.2",
|
||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"main": "dist/mermaid-mindmap.core.mjs",
|
||||
"module": "dist/mermaid-mindmap.core.mjs",
|
||||
"types": "dist/detector.d.ts",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": {
|
||||
"require": "./dist/mermaid-mindmap.min.js",
|
||||
"import": "./dist/mermaid-mindmap.core.mjs"
|
||||
"import": "./dist/mermaid-mindmap.core.mjs",
|
||||
"types": "./dist/detector.d.ts"
|
||||
},
|
||||
"./*": "./*"
|
||||
},
|
||||
|
|
|
@ -1,10 +1,20 @@
|
|||
export const id = 'mindmap';
|
||||
import type { ExternalDiagramDefinition } from 'mermaid';
|
||||
|
||||
export const detector = (txt: string) => {
|
||||
const id = 'mindmap';
|
||||
|
||||
const detector = (txt: string) => {
|
||||
return txt.match(/^\s*mindmap/) !== null;
|
||||
};
|
||||
|
||||
export const loadDiagram = async () => {
|
||||
const loader = async () => {
|
||||
const { diagram } = await import('./diagram-definition');
|
||||
return { id, diagram };
|
||||
};
|
||||
|
||||
const plugin: ExternalDiagramDefinition = {
|
||||
id,
|
||||
detector,
|
||||
loader,
|
||||
};
|
||||
|
||||
export default plugin;
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
../../README.md
|
|
@ -1,11 +1,11 @@
|
|||
{
|
||||
"name": "mermaid",
|
||||
"version": "9.2.0",
|
||||
"version": "9.2.2-rc.2",
|
||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"main": "./dist/mermaid.core.mjs",
|
||||
"main": "./dist/mermaid.min.js",
|
||||
"module": "./dist/mermaid.core.mjs",
|
||||
"types": "./dist/mermaid.d.ts",
|
||||
"type": "module",
|
||||
"type": "commonjs",
|
||||
"exports": {
|
||||
".": {
|
||||
"require": "./dist/mermaid.min.js",
|
||||
|
@ -127,7 +127,8 @@
|
|||
"d3": "^7.0.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
"dist",
|
||||
"README.md"
|
||||
],
|
||||
"sideEffects": [
|
||||
"**/*.css",
|
||||
|
|
|
@ -106,11 +106,10 @@ export const getDiagramFromText = (
|
|||
// registerDiagram(type, diagram, undefined, diagram.injectUtils);
|
||||
// // new diagram will try getDiagram again and if fails then it is a valid throw
|
||||
return loader().then(({ diagram }) => {
|
||||
registerDiagram(type, diagram, undefined, diagram.injectUtils);
|
||||
registerDiagram(type, diagram, undefined);
|
||||
return new Diagram(txt, parseError);
|
||||
});
|
||||
}
|
||||
// return new Diagram(txt, parseError);
|
||||
};
|
||||
|
||||
export default Diagram;
|
||||
|
|
|
@ -40,7 +40,8 @@ export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: any[])
|
|||
}
|
||||
|
||||
currentConfig = cfg;
|
||||
return cfg;
|
||||
checkConfig(currentConfig);
|
||||
return currentConfig;
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -68,7 +69,7 @@ export const setSiteConfig = (conf: MermaidConfig): MermaidConfig => {
|
|||
siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);
|
||||
}
|
||||
|
||||
currentConfig = updateCurrentConfig(siteConfig, directives);
|
||||
updateCurrentConfig(siteConfig, directives);
|
||||
return siteConfig;
|
||||
};
|
||||
|
||||
|
@ -117,6 +118,7 @@ export const setConfig = (conf: MermaidConfig): MermaidConfig => {
|
|||
// conf[key] = manipulator ? manipulator(conf[key]) : conf[key];
|
||||
// });
|
||||
|
||||
checkConfig(conf);
|
||||
assignWithDepth(currentConfig, conf);
|
||||
|
||||
return getConfig();
|
||||
|
@ -224,3 +226,25 @@ export const reset = (config = siteConfig): void => {
|
|||
directives = [];
|
||||
updateCurrentConfig(config, directives);
|
||||
};
|
||||
|
||||
enum ConfigWarning {
|
||||
'LAZY_LOAD_DEPRECATED' = 'The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead.',
|
||||
}
|
||||
type ConfigWarningStrings = keyof typeof ConfigWarning;
|
||||
const issuedWarnings: { [key in ConfigWarningStrings]?: boolean } = {};
|
||||
const issueWarning = (warning: ConfigWarningStrings) => {
|
||||
if (issuedWarnings[warning]) {
|
||||
return;
|
||||
}
|
||||
log.warn(ConfigWarning[warning]);
|
||||
issuedWarnings[warning] = true;
|
||||
};
|
||||
|
||||
const checkConfig = (config: MermaidConfig) => {
|
||||
if (!config) {
|
||||
return;
|
||||
}
|
||||
if (config.lazyLoadedDiagrams || config.loadExternalDiagramsAtStartup) {
|
||||
issueWarning('LAZY_LOAD_DEPRECATED');
|
||||
}
|
||||
};
|
||||
|
|
|
@ -3,7 +3,9 @@
|
|||
import DOMPurify from 'dompurify';
|
||||
|
||||
export interface MermaidConfig {
|
||||
/** @deprecated use mermaid.registerLazyDiagrams instead */
|
||||
lazyLoadedDiagrams?: string[];
|
||||
/** @deprecated use mermaid.registerLazyDiagrams instead */
|
||||
loadExternalDiagramsAtStartup?: boolean;
|
||||
theme?: string;
|
||||
themeVariables?: any;
|
||||
|
|
|
@ -115,7 +115,6 @@ const config: Partial<MermaidConfig> = {
|
|||
* Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
*/
|
||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
|
||||
lazyLoadedDiagrams: [],
|
||||
/**
|
||||
* 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
|
||||
|
|
|
@ -22,17 +22,19 @@ export interface Detectors {
|
|||
[key: string]: DiagramDetector;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers the given diagram with Mermaid.
|
||||
*
|
||||
* Can be used for third-party custom diagrams.
|
||||
*
|
||||
* @param id - A unique ID for the given diagram.
|
||||
* @param diagram - The diagram definition.
|
||||
* @param detector - Function that returns `true` if a given mermaid text is this diagram definition.
|
||||
*/
|
||||
export const registerDiagram = (
|
||||
id: string,
|
||||
diagram: DiagramDefinition,
|
||||
detector?: DiagramDetector,
|
||||
callback?: (
|
||||
_log: any,
|
||||
_setLogLevel: any,
|
||||
_getConfig: any,
|
||||
_sanitizeText: any,
|
||||
_setupGraphViewbox: any
|
||||
) => void
|
||||
detector?: DiagramDetector
|
||||
) => {
|
||||
log.debug(`Registering diagram ${id}`);
|
||||
if (diagrams[id]) {
|
||||
|
@ -48,8 +50,9 @@ export const registerDiagram = (
|
|||
addDetector(id, detector);
|
||||
}
|
||||
addStylesForDiagram(id, diagram.styles);
|
||||
if (typeof callback !== 'undefined') {
|
||||
callback(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
|
||||
|
||||
if (diagram.injectUtils) {
|
||||
diagram.injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
|
||||
}
|
||||
log.debug(`Registered diagram ${id}. ${Object.keys(diagrams).join(', ')} diagrams registered.`);
|
||||
};
|
||||
|
|
|
@ -14,7 +14,13 @@ export interface DiagramDefinition {
|
|||
parser: any;
|
||||
styles: any;
|
||||
init?: (config: MermaidConfig) => void;
|
||||
injectUtils?: (utils: InjectUtils) => void;
|
||||
injectUtils?: (
|
||||
_log: InjectUtils['_log'],
|
||||
_setLogLevel: InjectUtils['_setLogLevel'],
|
||||
_getConfig: InjectUtils['_getConfig'],
|
||||
_sanitizeText: InjectUtils['_sanitizeText'],
|
||||
_setupGraphViewbox: InjectUtils['_setupGraphViewbox']
|
||||
) => void;
|
||||
}
|
||||
|
||||
export interface DetectorRecord {
|
||||
|
@ -22,5 +28,11 @@ export interface DetectorRecord {
|
|||
loader?: DiagramLoader;
|
||||
}
|
||||
|
||||
export interface ExternalDiagramDefinition {
|
||||
id: string;
|
||||
detector: DiagramDetector;
|
||||
loader: DiagramLoader;
|
||||
}
|
||||
|
||||
export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
|
||||
export type DiagramLoader = (() => Promise<{ id: string; diagram: DiagramDefinition }>) | null;
|
||||
export type DiagramLoader = () => Promise<{ id: string; diagram: DiagramDefinition }>;
|
||||
|
|
|
@ -49,10 +49,9 @@
|
|||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module">
|
||||
// import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc6/dist/mermaid.esm.min.mjs';
|
||||
// import mermaid from 'http://localhost:9000/mermaid.esm.mjs';
|
||||
console.log(mermaid); // eslint-disable-line
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
|
||||
import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@<MERMAID_VERSION>/dist/mermaid-mindmap.esm.mjs';
|
||||
|
||||
window.mermaid = mermaid;
|
||||
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
|
@ -60,20 +59,18 @@
|
|||
logLevel: 4,
|
||||
startOnLoad: true,
|
||||
themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
|
||||
lazyLoadedDiagrams: [
|
||||
'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.2.0-rc3/dist/mermaid-mindmap-detector.esm.mjs',
|
||||
// 'http://localhost:9000/mermaid-mindmap-detector.esm.mjs',
|
||||
],
|
||||
};
|
||||
if (isDarkMode) conf.theme = 'dark';
|
||||
|
||||
async function loadMermaid() {
|
||||
await mermaid.initialize(conf);
|
||||
mermaid.parseError = (e) => {
|
||||
console.log('parse error', e); // eslint-disable-line
|
||||
};
|
||||
await mermaid.registerExternalDiagrams([mindmap]);
|
||||
mermaid.initialize(conf);
|
||||
console.log('mermaid initialized'); // eslint-disable-line
|
||||
}
|
||||
mermaid.parseError = (e) => {
|
||||
console.log('parse error', e); // eslint-disable-line
|
||||
};
|
||||
|
||||
await loadMermaid();
|
||||
</script>
|
||||
<script>
|
||||
|
|
|
@ -54,24 +54,83 @@ describe('when using mermaid and ', function () {
|
|||
expect(mermaidAPI.render).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
describe('when using #initThrowsErrorsAsync', function () {
|
||||
it('should throw error (but still render) if lazyLoadedDiagram fails', async () => {
|
||||
describe('when using #registerExternalDiagrams', function () {
|
||||
it('should throw error (but still render) if registerExternalDiagrams fails', async () => {
|
||||
const node = document.createElement('div');
|
||||
node.appendChild(document.createTextNode('graph TD;\na;'));
|
||||
|
||||
mermaidAPI.setConfig({
|
||||
lazyLoadedDiagrams: ['this-file-does-not-exist.mjs'],
|
||||
});
|
||||
await expect(mermaid.initThrowsErrorsAsync(undefined, node)).rejects.toThrowError(
|
||||
// this error message is probably different on every platform
|
||||
// this one is just for vite-note (node/jest/browser may be different)
|
||||
'Failed to load this-file-does-not-exist.mjs'
|
||||
);
|
||||
await expect(
|
||||
mermaid.registerExternalDiagrams(
|
||||
[
|
||||
{
|
||||
id: 'dummy',
|
||||
detector: (text) => /dummy/.test(text),
|
||||
loader: () => Promise.reject('error'),
|
||||
},
|
||||
],
|
||||
{ lazyLoad: false }
|
||||
)
|
||||
).rejects.toThrow('Failed to load 1 external diagrams');
|
||||
|
||||
expect(() => mermaid.initThrowsErrorsAsync(undefined, node)).not.toThrow();
|
||||
// should still render, even if lazyLoadedDiagrams fails
|
||||
expect(mermaidAPI.renderAsync).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should defer diagram load based on parameter', async () => {
|
||||
let loaded = false;
|
||||
const dummyDiagram = {
|
||||
db: {},
|
||||
renderer: () => {
|
||||
// do nothing
|
||||
},
|
||||
parser: () => {
|
||||
// do nothing
|
||||
},
|
||||
styles: () => {
|
||||
// do nothing
|
||||
},
|
||||
};
|
||||
await expect(
|
||||
mermaid.registerExternalDiagrams(
|
||||
[
|
||||
{
|
||||
id: 'dummy',
|
||||
detector: (text) => /dummy/.test(text),
|
||||
loader: () => {
|
||||
loaded = true;
|
||||
return Promise.resolve({
|
||||
id: 'dummy',
|
||||
diagram: dummyDiagram,
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
{ lazyLoad: true }
|
||||
)
|
||||
).resolves.toBe(undefined);
|
||||
expect(loaded).toBe(false);
|
||||
await expect(
|
||||
mermaid.registerExternalDiagrams(
|
||||
[
|
||||
{
|
||||
id: 'dummy2',
|
||||
detector: (text) => /dummy2/.test(text),
|
||||
loader: () => {
|
||||
loaded = true;
|
||||
return Promise.resolve({
|
||||
id: 'dummy2',
|
||||
diagram: dummyDiagram,
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
{ lazyLoad: false }
|
||||
)
|
||||
).resolves.toBe(undefined);
|
||||
expect(loaded).toBe(true);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
// we modify mermaid config in some tests, so we need to make sure to reset them
|
||||
mermaidAPI.reset();
|
||||
|
|
|
@ -9,8 +9,11 @@ import { mermaidAPI } from './mermaidAPI';
|
|||
import { addDetector } from './diagram-api/detectType';
|
||||
import { isDetailedError, type DetailedError } from './utils';
|
||||
import { registerDiagram } from './diagram-api/diagramAPI';
|
||||
import { ExternalDiagramDefinition } from './diagram-api/types';
|
||||
|
||||
export type { MermaidConfig, DetailedError };
|
||||
export type { MermaidConfig, DetailedError, ExternalDiagramDefinition };
|
||||
|
||||
let externalDiagramsRegistered = false;
|
||||
/**
|
||||
* ## init
|
||||
*
|
||||
|
@ -47,8 +50,8 @@ const init = async function (
|
|||
callback?: Function
|
||||
) {
|
||||
try {
|
||||
const conf = mermaidAPI.getConfig();
|
||||
if (conf?.lazyLoadedDiagrams && conf.lazyLoadedDiagrams.length > 0) {
|
||||
// Not really sure if we need to check this, or simply call initThrowsErrorsAsync directly.
|
||||
if (externalDiagramsRegistered) {
|
||||
await initThrowsErrorsAsync(config, nodes, callback);
|
||||
} else {
|
||||
initThrowsErrors(config, nodes, callback);
|
||||
|
@ -89,6 +92,7 @@ const handleError = (error: unknown, errors: DetailedError[], parseError?: Funct
|
|||
}
|
||||
}
|
||||
};
|
||||
|
||||
const initThrowsErrors = function (
|
||||
config?: MermaidConfig,
|
||||
// eslint-disable-next-line no-undef
|
||||
|
@ -177,45 +181,39 @@ const initThrowsErrors = function (
|
|||
}
|
||||
};
|
||||
|
||||
let lazyLoadingPromise: Promise<PromiseSettledResult<void>[]> | undefined = undefined;
|
||||
/**
|
||||
* This is an internal function and should not be made public, as it will likely change.
|
||||
* @internal
|
||||
* @param conf - Mermaid config.
|
||||
* @returns An array of {@link PromiseSettledResult}, showing the status of imports.
|
||||
* @param diagrams - Array of {@link ExternalDiagramDefinition}.
|
||||
*/
|
||||
const registerLazyLoadedDiagrams = async (conf: MermaidConfig) => {
|
||||
// Only lazy load once
|
||||
// TODO: This is a hack. We should either throw error when new diagrams are added, or load them anyway.
|
||||
if (lazyLoadingPromise === undefined) {
|
||||
// Load all lazy loaded diagrams in parallel
|
||||
lazyLoadingPromise = Promise.allSettled(
|
||||
(conf?.lazyLoadedDiagrams ?? []).map(async (diagram: string) => {
|
||||
const { id, detector, loadDiagram } = await import(diagram);
|
||||
addDetector(id, detector, loadDiagram);
|
||||
})
|
||||
);
|
||||
const registerLazyLoadedDiagrams = (diagrams: ExternalDiagramDefinition[]) => {
|
||||
for (const { id, detector, loader } of diagrams) {
|
||||
addDetector(id, detector, loader);
|
||||
}
|
||||
return await lazyLoadingPromise;
|
||||
};
|
||||
|
||||
let loadingPromise: Promise<unknown> | undefined = undefined;
|
||||
|
||||
const loadExternalDiagrams = async (conf: MermaidConfig) => {
|
||||
// Only lazy load once
|
||||
// TODO: This is a hack. We should either throw error when new diagrams are added, or load them anyway.
|
||||
if (loadingPromise === undefined) {
|
||||
log.debug(`Loading ${conf?.lazyLoadedDiagrams?.length} external diagrams`);
|
||||
// Load all lazy loaded diagrams in parallel
|
||||
loadingPromise = Promise.allSettled(
|
||||
(conf?.lazyLoadedDiagrams ?? []).map(async (url: string) => {
|
||||
const { id, detector, loadDiagram } = await import(url);
|
||||
const { diagram } = await loadDiagram();
|
||||
registerDiagram(id, diagram, detector, diagram.injectUtils);
|
||||
})
|
||||
);
|
||||
/**
|
||||
* This is an internal function and should not be made public, as it will likely change.
|
||||
* @internal
|
||||
* @param diagrams - Array of {@link ExternalDiagramDefinition}.
|
||||
*/
|
||||
const loadExternalDiagrams = async (diagrams: ExternalDiagramDefinition[]) => {
|
||||
log.debug(`Loading ${diagrams.length} external diagrams`);
|
||||
// Load all lazy loaded diagrams in parallel
|
||||
const results = await Promise.allSettled(
|
||||
diagrams.map(async ({ id, detector, loader }) => {
|
||||
const { diagram } = await loader();
|
||||
registerDiagram(id, diagram, detector);
|
||||
})
|
||||
);
|
||||
const failed = results.filter((result) => result.status === 'rejected');
|
||||
if (failed.length > 0) {
|
||||
log.error(`Failed to load ${failed.length} external diagrams`);
|
||||
for (const res of failed) {
|
||||
log.error(res);
|
||||
}
|
||||
throw new Error(`Failed to load ${failed.length} external diagrams`);
|
||||
}
|
||||
await loadingPromise;
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -242,13 +240,6 @@ const initThrowsErrorsAsync = async function (
|
|||
) {
|
||||
const conf = mermaidAPI.getConfig();
|
||||
|
||||
const registerLazyLoadedDiagramsErrors: Error[] = [];
|
||||
for (const registerResult of await registerLazyLoadedDiagrams(conf)) {
|
||||
if (registerResult.status == 'rejected') {
|
||||
registerLazyLoadedDiagramsErrors.push(registerResult.reason);
|
||||
}
|
||||
}
|
||||
|
||||
if (config) {
|
||||
// This is a legacy way of setting config. It is not documented and should be removed in the future.
|
||||
// @ts-ignore: TODO Fix ts errors
|
||||
|
@ -323,10 +314,9 @@ const initThrowsErrorsAsync = async function (
|
|||
handleError(error, errors, mermaid.parseError);
|
||||
}
|
||||
}
|
||||
const allErrors = [...registerLazyLoadedDiagramsErrors, ...errors];
|
||||
if (allErrors.length > 0) {
|
||||
if (errors.length > 0) {
|
||||
// TODO: We should be throwing an error object.
|
||||
throw allErrors[0];
|
||||
throw errors[0];
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -335,16 +325,25 @@ const initialize = function (config: MermaidConfig) {
|
|||
};
|
||||
|
||||
/**
|
||||
* @param config
|
||||
* @deprecated This is an internal function and should not be used. Will be removed in v10.
|
||||
* Used to register external diagram types.
|
||||
* @param diagrams - Array of {@link ExternalDiagramDefinition}.
|
||||
* @param opts
|
||||
* @param opts.lazyLoad - If true, the diagram will be loaded on demand.
|
||||
*/
|
||||
const initializeAsync = async function (config: MermaidConfig) {
|
||||
if (config.loadExternalDiagramsAtStartup) {
|
||||
await loadExternalDiagrams(config);
|
||||
const registerExternalDiagrams = async (
|
||||
diagrams: ExternalDiagramDefinition[],
|
||||
{
|
||||
lazyLoad = true,
|
||||
}: {
|
||||
lazyLoad?: boolean;
|
||||
} = {}
|
||||
) => {
|
||||
if (lazyLoad) {
|
||||
registerLazyLoadedDiagrams(diagrams);
|
||||
} else {
|
||||
await registerLazyLoadedDiagrams(config);
|
||||
await loadExternalDiagrams(diagrams);
|
||||
}
|
||||
mermaidAPI.initialize(config);
|
||||
externalDiagramsRegistered = true;
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -414,7 +413,7 @@ const executeQueue = async () => {
|
|||
* @param txt
|
||||
* @deprecated This is an internal function and should not be used. Will be removed in v10.
|
||||
*/
|
||||
const parseAsync = (txt: string) => {
|
||||
const parseAsync = (txt: string): Promise<boolean> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
// This promise will resolve when the mermaidAPI.render call is done.
|
||||
// It will be queued first and will be executed when it is first in line
|
||||
|
@ -424,7 +423,7 @@ const parseAsync = (txt: string) => {
|
|||
(r) => {
|
||||
// This resolves for the promise for the queue handling
|
||||
res(r);
|
||||
// This fullfills the promise sent to the value back to the original caller
|
||||
// This fulfills the promise sent to the value back to the original caller
|
||||
resolve(r);
|
||||
},
|
||||
(e) => {
|
||||
|
@ -482,9 +481,9 @@ const parseAsync = (txt: string) => {
|
|||
const renderAsync = (
|
||||
id: string,
|
||||
text: string,
|
||||
cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
|
||||
cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
|
||||
container?: Element
|
||||
): Promise<void> => {
|
||||
): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
// This promise will resolve when the mermaidAPI.render call is done.
|
||||
// It will be queued first and will be executed when it is first in line
|
||||
|
@ -522,8 +521,8 @@ const mermaid: {
|
|||
init: typeof init;
|
||||
initThrowsErrors: typeof initThrowsErrors;
|
||||
initThrowsErrorsAsync: typeof initThrowsErrorsAsync;
|
||||
registerExternalDiagrams: typeof registerExternalDiagrams;
|
||||
initialize: typeof initialize;
|
||||
initializeAsync: typeof initializeAsync;
|
||||
contentLoaded: typeof contentLoaded;
|
||||
setParseErrorHandler: typeof setParseErrorHandler;
|
||||
} = {
|
||||
|
@ -537,8 +536,8 @@ const mermaid: {
|
|||
init,
|
||||
initThrowsErrors,
|
||||
initThrowsErrorsAsync,
|
||||
registerExternalDiagrams,
|
||||
initialize,
|
||||
initializeAsync,
|
||||
parseError: undefined,
|
||||
contentLoaded,
|
||||
setParseErrorHandler,
|
||||
|
|
|
@ -115,19 +115,19 @@ export const decodeEntities = function (text: string): string {
|
|||
*
|
||||
* @param {string} id The id of the element to be rendered
|
||||
* @param {string} text The graph definition
|
||||
* @param {(svgCode: string, bindFunctions?: (element: Element) => void) => void} cb Callback which
|
||||
* @param cb - Optional callback which
|
||||
* is called after rendering is finished with the svg code as inparam.
|
||||
* @param {Element} container Selector to element in which a div with the graph temporarily will be
|
||||
* inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
|
||||
* element will be removed when rendering is completed.
|
||||
* @returns {void}
|
||||
* @returns Returns the rendered element as a string containing the SVG definition.
|
||||
*/
|
||||
const render = function (
|
||||
id: string,
|
||||
text: string,
|
||||
cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
|
||||
cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
|
||||
container?: Element
|
||||
): void {
|
||||
): string {
|
||||
addDiagrams();
|
||||
configApi.reset();
|
||||
text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
|
||||
|
@ -401,9 +401,9 @@ const render = function (
|
|||
const renderAsync = async function (
|
||||
id: string,
|
||||
text: string,
|
||||
cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
|
||||
cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
|
||||
container?: Element
|
||||
): Promise<void> {
|
||||
): Promise<string> {
|
||||
addDiagrams();
|
||||
configApi.reset();
|
||||
text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
packages:
|
||||
# all packages in direct subdirs of packages/
|
||||
- 'packages/*'
|
||||
# - 'tests/*'
|
||||
|
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"name": "webpack",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"private": true,
|
||||
"module": "commonjs",
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
"serve": "webpack serve"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"webpack": "^5.74.0",
|
||||
"webpack-cli": "^4.10.0",
|
||||
"webpack-dev-server": "^4.11.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"mermaid": "workspace:*",
|
||||
"@mermaid-js/mermaid-mindmap": "workspace:*"
|
||||
}
|
||||
}
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Getting Started</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="graphDiv"></div>
|
||||
<script src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,38 @@
|
|||
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||
/* eslint-disable no-console */
|
||||
const mermaid = require('mermaid');
|
||||
import mindmap from '@mermaid-js/mermaid-mindmap';
|
||||
|
||||
const render = async (graph) => {
|
||||
const svg = await mermaid.renderAsync('dummy', graph);
|
||||
console.log(svg);
|
||||
document.getElementById('graphDiv').innerHTML = svg;
|
||||
};
|
||||
|
||||
const load = async () => {
|
||||
await mermaid.registerExternalDiagrams([mindmap]);
|
||||
await render('info');
|
||||
|
||||
setTimeout(async () => {
|
||||
await render(`mindmap
|
||||
root((mindmap))
|
||||
Origins
|
||||
Long history
|
||||
::icon(fa fa-book)
|
||||
Popularisation
|
||||
British popular psychology author Tony Buzan
|
||||
Research
|
||||
On effectivness<br/>and features
|
||||
On Automatic creation
|
||||
Uses
|
||||
Creative techniques
|
||||
Strategic planning
|
||||
Argument mapping
|
||||
Tools
|
||||
Pen and paper
|
||||
Mermaid
|
||||
`);
|
||||
}, 2500);
|
||||
};
|
||||
|
||||
window.addEventListener('load', load, false);
|
|
@ -0,0 +1,10 @@
|
|||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
output: {
|
||||
filename: 'main.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
},
|
||||
};
|
Loading…
Reference in New Issue