GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

fix #3757 : Remove dynamic imports for lazy load.

Browse Source
This commit is contained in:
Sidharth Vinod 2022-11-08 19:12:37 +05:30
parent aab8f9273f
commit 7ca525622b
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
16 changed files with 218 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
.vite/build.ts
View File

@ -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 {

21
docs/index.html
View File

@ -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-detector.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>

3
packages/mermaid-example-diagram/Readme.md Normal file
View File

@ -0,0 +1,3 @@
### Do not refer this package. It is not ready.
### Refer mermaid-mindmap instead.

8
packages/mermaid-mindmap/package.json
View File

@ -2,13 +2,13 @@
"name": "@mermaid-js/mermaid-mindmap",
"version": "9.2.0",
"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",
"module": "dist/mermaid-mindmap.esm.min.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.esm.min.mjs",
"types": "./dist/detector.d.ts"
},
"./*": "./*"
},

16
packages/mermaid-mindmap/src/detector.ts
View File

@ -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;

2
packages/mermaid-mindmap/src/diagram-definition.ts
View File

@ -12,5 +12,3 @@ export const diagram = {
styles: mindmapStyles,
injectUtils,
};
export { detector, id } from './detector';

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

@ -3,8 +3,6 @@
import DOMPurify from 'dompurify';
export interface MermaidConfig {
lazyLoadedDiagrams?: string[];
loadExternalDiagramsAtStartup?: boolean;
theme?: string;
themeVariables?: any;
themeCSS?: string;

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

@ -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

8
packages/mermaid/src/diagram-api/types.ts
View File

@ -28,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 }>;

21
packages/mermaid/src/docs/index.html
View File

@ -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-detector.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>

79
packages/mermaid/src/mermaid.spec.ts
View File

@ -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();

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

@ -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);
} else {
await registerLazyLoadedDiagrams(config);
const registerExternalDiagrams = async (
diagrams: ExternalDiagramDefinition[],
{
lazyLoad = true,
}: {
lazyLoad?: boolean;
}
mermaidAPI.initialize(config);
) => {
if (lazyLoad) {
registerLazyLoadedDiagrams(diagrams);
} else {
await loadExternalDiagrams(diagrams);
}
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) => {
@ -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,

12
pnpm-lock.yaml generated
View File

@ -307,11 +307,13 @@ importers:
tests/webpack:
specifiers:
'@mermaid-js/mermaid-mindmap': workspace:*
mermaid: workspace:*
webpack: ^5.74.0
webpack-cli: ^4.10.0
webpack-dev-server: ^4.11.1
dependencies:
'@mermaid-js/mermaid-mindmap': link:../../packages/mermaid-mindmap
mermaid: link:../../packages/mermaid
devDependencies:
webpack: 5.74.0_webpack-cli@4.10.0
@ -4679,7 +4681,7 @@ packages:
/axios/0.21.4_debug@4.3.2:
resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
dependencies:
follow-redirects: 1.15.2_debug@4.3.2
follow-redirects: 1.15.2
transitivePeerDependencies:
- debug
dev: true
@ -4687,7 +4689,7 @@ packages:
/axios/0.26.0:
resolution: {integrity: sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==}
dependencies:
follow-redirects: 1.15.2_debug@4.3.2
follow-redirects: 1.15.2
transitivePeerDependencies:
- debug
dev: true
@ -8167,7 +8169,7 @@ packages:
readable-stream: 2.3.7
dev: true
/follow-redirects/1.15.2_debug@4.3.2:
/follow-redirects/1.15.2:
resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
engines: {node: '>=4.0'}
peerDependencies:
@ -8175,8 +8177,6 @@ packages:
peerDependenciesMeta:
debug:
optional: true
dependencies:
debug: 4.3.2
dev: true
/for-in/1.0.2:
@ -8942,7 +8942,7 @@ packages:
engines: {node: '>=8.0.0'}
dependencies:
eventemitter3: 4.0.7
follow-redirects: 1.15.2_debug@4.3.2
follow-redirects: 1.15.2
requires-port: 1.0.0
transitivePeerDependencies:
- debug

3
tests/webpack/package.json
View File

@ -17,6 +17,7 @@
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"mermaid": "workspace:*"
"mermaid": "workspace:*",
"@mermaid-js/mermaid-mindmap": "workspace:*"
}
}

1
tests/webpack/public/index.html
View File

@ -5,6 +5,7 @@
<title>Getting Started</title>
</head>
<body>
<div id="graphDiv"></div>
<script src="./main.js"></script>
</body>
</html>

36
tests/webpack/src/index.js
View File

@ -1,6 +1,38 @@
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable no-console */
const mermaid = require('mermaid');
// import mermaid from 'mermaid';
import mindmap from '@mermaid-js/mermaid-mindmap';
console.log(mermaid);
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);