GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-02-04 07:13:25 +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': { 'mermaid-mindmap': {
name: 'mermaid-mindmap', name: 'mermaid-mindmap',
packageName: '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', file: 'detector.ts',
}, },
// 'mermaid-example-diagram-detector': {
// name: 'mermaid-example-diagram-detector',
// packageName: 'mermaid-example-diagram',
// file: 'detector.ts',
// },
}; };
interface BuildOptions { interface BuildOptions {

19
docs/index.html
View File

@ -49,10 +49,9 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module"> <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/dist/mermaid.esm.min.mjs';
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0/dist/mermaid.esm.min.mjs'; import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap-detector.esm.mjs';
// import mermaid from 'http://localhost:9000/mermaid.esm.mjs';
console.log(mermaid); // eslint-disable-line
window.mermaid = mermaid; window.mermaid = mermaid;
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
@ -60,20 +59,18 @@
logLevel: 4, logLevel: 4,
startOnLoad: true, startOnLoad: true,
themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }', 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'; if (isDarkMode) conf.theme = 'dark';
async function loadMermaid() { async function loadMermaid() {
await mermaid.initialize(conf);
console.log('mermaid initialized'); // eslint-disable-line
}
mermaid.parseError = (e) => { mermaid.parseError = (e) => {
console.log('parse error', e); // eslint-disable-line console.log('parse error', e); // eslint-disable-line
}; };
await mermaid.registerExternalDiagrams([mindmap]);
mermaid.initialize(conf);
console.log('mermaid initialized'); // eslint-disable-line
}
await loadMermaid(); await loadMermaid();
</script> </script>
<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", "name": "@mermaid-js/mermaid-mindmap",
"version": "9.2.0", "version": "9.2.0",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "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.esm.min.mjs",
"module": "dist/mermaid-mindmap.core.mjs", "types": "dist/detector.d.ts",
"type": "module", "type": "module",
"exports": { "exports": {
".": { ".": {
"require": "./dist/mermaid-mindmap.min.js", "import": "./dist/mermaid-mindmap.esm.min.mjs",
"import": "./dist/mermaid-mindmap.core.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; return txt.match(/^\s*mindmap/) !== null;
}; };
export const loadDiagram = async () => { const loader = async () => {
const { diagram } = await import('./diagram-definition'); const { diagram } = await import('./diagram-definition');
return { id, diagram }; 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, styles: mindmapStyles,
injectUtils, injectUtils,
}; };
export { detector, id } from './detector';

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

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

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

@ -115,7 +115,6 @@ 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'],
lazyLoadedDiagrams: [],
/** /**
* 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

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

@ -28,5 +28,11 @@ export interface DetectorRecord {
loader?: DiagramLoader; loader?: DiagramLoader;
} }
export interface ExternalDiagramDefinition {
id: string;
detector: DiagramDetector;
loader: DiagramLoader;
}
export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean; 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 }>;

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

@ -49,10 +49,9 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module"> <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@<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 mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@<MERMAID_VERSION>/dist/mermaid-mindmap-detector.esm.mjs';
// import mermaid from 'http://localhost:9000/mermaid.esm.mjs';
console.log(mermaid); // eslint-disable-line
window.mermaid = mermaid; window.mermaid = mermaid;
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
@ -60,20 +59,18 @@
logLevel: 4, logLevel: 4,
startOnLoad: true, startOnLoad: true,
themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }', 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'; if (isDarkMode) conf.theme = 'dark';
async function loadMermaid() { async function loadMermaid() {
await mermaid.initialize(conf);
console.log('mermaid initialized'); // eslint-disable-line
}
mermaid.parseError = (e) => { mermaid.parseError = (e) => {
console.log('parse error', e); // eslint-disable-line console.log('parse error', e); // eslint-disable-line
}; };
await mermaid.registerExternalDiagrams([mindmap]);
mermaid.initialize(conf);
console.log('mermaid initialized'); // eslint-disable-line
}
await loadMermaid(); await loadMermaid();
</script> </script>
<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(); expect(mermaidAPI.render).toHaveBeenCalled();
}); });
}); });
describe('when using #initThrowsErrorsAsync', function () { describe('when using #registerExternalDiagrams', function () {
it('should throw error (but still render) if lazyLoadedDiagram fails', async () => { it('should throw error (but still render) if registerExternalDiagrams fails', async () => {
const node = document.createElement('div'); const node = document.createElement('div');
node.appendChild(document.createTextNode('graph TD;\na;')); node.appendChild(document.createTextNode('graph TD;\na;'));
mermaidAPI.setConfig({ await expect(
lazyLoadedDiagrams: ['this-file-does-not-exist.mjs'], mermaid.registerExternalDiagrams(
}); [
await expect(mermaid.initThrowsErrorsAsync(undefined, node)).rejects.toThrowError( {
// this error message is probably different on every platform id: 'dummy',
// this one is just for vite-note (node/jest/browser may be different) detector: (text) => /dummy/.test(text),
'Failed to load this-file-does-not-exist.mjs' 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 // should still render, even if lazyLoadedDiagrams fails
expect(mermaidAPI.renderAsync).toHaveBeenCalled(); 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(() => { afterEach(() => {
// we modify mermaid config in some tests, so we need to make sure to reset them // we modify mermaid config in some tests, so we need to make sure to reset them
mermaidAPI.reset(); mermaidAPI.reset();

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

@ -9,8 +9,11 @@ import { mermaidAPI } from './mermaidAPI';
import { addDetector } from './diagram-api/detectType'; import { addDetector } from './diagram-api/detectType';
import { isDetailedError, type DetailedError } from './utils'; import { isDetailedError, type DetailedError } from './utils';
import { registerDiagram } from './diagram-api/diagramAPI'; 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 * ## init
* *
@ -47,8 +50,8 @@ const init = async function (
callback?: Function callback?: Function
) { ) {
try { try {
const conf = mermaidAPI.getConfig(); // Not really sure if we need to check this, or simply call initThrowsErrorsAsync directly.
if (conf?.lazyLoadedDiagrams && conf.lazyLoadedDiagrams.length > 0) { if (externalDiagramsRegistered) {
await initThrowsErrorsAsync(config, nodes, callback); await initThrowsErrorsAsync(config, nodes, callback);
} else { } else {
initThrowsErrors(config, nodes, callback); initThrowsErrors(config, nodes, callback);
@ -89,6 +92,7 @@ const handleError = (error: unknown, errors: DetailedError[], parseError?: Funct
} }
} }
}; };
const initThrowsErrors = function ( const initThrowsErrors = function (
config?: MermaidConfig, config?: MermaidConfig,
// eslint-disable-next-line no-undef // 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. * This is an internal function and should not be made public, as it will likely change.
* @internal * @internal
* @param conf - Mermaid config. * @param diagrams - Array of {@link ExternalDiagramDefinition}.
* @returns An array of {@link PromiseSettledResult}, showing the status of imports.
*/ */
const registerLazyLoadedDiagrams = async (conf: MermaidConfig) => { const registerLazyLoadedDiagrams = (diagrams: ExternalDiagramDefinition[]) => {
// Only lazy load once for (const { id, detector, loader } of diagrams) {
// TODO: This is a hack. We should either throw error when new diagrams are added, or load them anyway. addDetector(id, detector, loader);
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);
})
);
} }
return await lazyLoadingPromise;
}; };
let loadingPromise: Promise<unknown> | undefined = undefined; /**
* This is an internal function and should not be made public, as it will likely change.
const loadExternalDiagrams = async (conf: MermaidConfig) => { * @internal
// Only lazy load once * @param diagrams - Array of {@link ExternalDiagramDefinition}.
// TODO: This is a hack. We should either throw error when new diagrams are added, or load them anyway. */
if (loadingPromise === undefined) { const loadExternalDiagrams = async (diagrams: ExternalDiagramDefinition[]) => {
log.debug(`Loading ${conf?.lazyLoadedDiagrams?.length} external diagrams`); log.debug(`Loading ${diagrams.length} external diagrams`);
// Load all lazy loaded diagrams in parallel // Load all lazy loaded diagrams in parallel
loadingPromise = Promise.allSettled( const results = await Promise.allSettled(
(conf?.lazyLoadedDiagrams ?? []).map(async (url: string) => { diagrams.map(async ({ id, detector, loader }) => {
const { id, detector, loadDiagram } = await import(url); const { diagram } = await loader();
const { diagram } = await loadDiagram(); registerDiagram(id, diagram, detector);
registerDiagram(id, diagram, detector, diagram.injectUtils);
}) })
); );
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 conf = mermaidAPI.getConfig();
const registerLazyLoadedDiagramsErrors: Error[] = [];
for (const registerResult of await registerLazyLoadedDiagrams(conf)) {
if (registerResult.status == 'rejected') {
registerLazyLoadedDiagramsErrors.push(registerResult.reason);
}
}
if (config) { if (config) {
// This is a legacy way of setting config. It is not documented and should be removed in the future. // 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 // @ts-ignore: TODO Fix ts errors
@ -323,10 +314,9 @@ const initThrowsErrorsAsync = async function (
handleError(error, errors, mermaid.parseError); handleError(error, errors, mermaid.parseError);
} }
} }
const allErrors = [...registerLazyLoadedDiagramsErrors, ...errors]; if (errors.length > 0) {
if (allErrors.length > 0) {
// TODO: We should be throwing an error object. // 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 * Used to register external diagram types.
* @deprecated This is an internal function and should not be used. Will be removed in v10. * @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) { const registerExternalDiagrams = async (
if (config.loadExternalDiagramsAtStartup) { diagrams: ExternalDiagramDefinition[],
await loadExternalDiagrams(config); {
} else { lazyLoad = true,
await registerLazyLoadedDiagrams(config); }: {
lazyLoad?: boolean;
} }
mermaidAPI.initialize(config); ) => {
if (lazyLoad) {
registerLazyLoadedDiagrams(diagrams);
} else {
await loadExternalDiagrams(diagrams);
}
externalDiagramsRegistered = true;
}; };
/** /**
@ -414,7 +413,7 @@ const executeQueue = async () => {
* @param txt * @param txt
* @deprecated This is an internal function and should not be used. Will be removed in v10. * @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) => { return new Promise((resolve, reject) => {
// This promise will resolve when the mermaidAPI.render call is done. // 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 // It will be queued first and will be executed when it is first in line
@ -424,7 +423,7 @@ const parseAsync = (txt: string) => {
(r) => { (r) => {
// This resolves for the promise for the queue handling // This resolves for the promise for the queue handling
res(r); 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); resolve(r);
}, },
(e) => { (e) => {
@ -522,8 +521,8 @@ const mermaid: {
init: typeof init; init: typeof init;
initThrowsErrors: typeof initThrowsErrors; initThrowsErrors: typeof initThrowsErrors;
initThrowsErrorsAsync: typeof initThrowsErrorsAsync; initThrowsErrorsAsync: typeof initThrowsErrorsAsync;
registerExternalDiagrams: typeof registerExternalDiagrams;
initialize: typeof initialize; initialize: typeof initialize;
initializeAsync: typeof initializeAsync;
contentLoaded: typeof contentLoaded; contentLoaded: typeof contentLoaded;
setParseErrorHandler: typeof setParseErrorHandler; setParseErrorHandler: typeof setParseErrorHandler;
} = { } = {
@ -537,8 +536,8 @@ const mermaid: {
init, init,
initThrowsErrors, initThrowsErrors,
initThrowsErrorsAsync, initThrowsErrorsAsync,
registerExternalDiagrams,
initialize, initialize,
initializeAsync,
parseError: undefined, parseError: undefined,
contentLoaded, contentLoaded,
setParseErrorHandler, setParseErrorHandler,

12
pnpm-lock.yaml generated
View File

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

3
tests/webpack/package.json
View File

@ -17,6 +17,7 @@
"webpack-dev-server": "^4.11.1" "webpack-dev-server": "^4.11.1"
}, },
"dependencies": { "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> <title>Getting Started</title>
</head> </head>
<body> <body>
<div id="graphDiv"></div>
<script src="./main.js"></script> <script src="./main.js"></script>
</body> </body>
</html> </html>

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

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