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.

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

Support lazyLoadedDiagrams when calling initThrowsErrors #3702

Merged
Changes from all commits
Commits
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
23 changes: 22 additions & 1 deletion packages/mermaid/src/mermaid.spec.ts
Original file line number Diff line number Diff line change
@@ -48,11 +48,32 @@ describe('when using mermaid and ', function () {
const node = document.createElement('div');
node.appendChild(document.createTextNode('graph TD;\na;'));

mermaid.initThrowsErrors(undefined, node);
await mermaid.initThrowsErrors(undefined, node);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By the way, we should put into the CHANGELOG.md/Release notes that this function is now async.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add that to this PR?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not really sure where to put it.

I could put it into CHANGELOG.md, but that's super out-dated, see #3022

Maybe we should use something like gren changelog to automatically generate the CHANGELOG.md from the GitHub release notes in https://github.com/mermaid-js/mermaid/releases, but then there'll be no point in manually editing the CHANGELOG.md, since it would just be overwritten by whatever is written in https://github.com/mermaid-js/mermaid/releases

// mermaidAPI.render function has been mocked, since it doesn't yet work
// in Node.JS (only works in browser)
expect(mermaidAPI.render).toHaveBeenCalled();
});
it('should throw error (but still render) if lazyLoadedDiagram 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.initThrowsErrors(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'
);

// should still render, even if lazyLoadedDiagrams fails
expect(mermaidAPI.render).toHaveBeenCalled();
});

afterEach(() => {
// we modify mermaid config in some tests, so we need to make sure to reset them
mermaidAPI.reset();
});
});

describe('checking validity of input ', function () {
41 changes: 30 additions & 11 deletions packages/mermaid/src/mermaid.ts
Original file line number Diff line number Diff line change
@@ -45,16 +45,6 @@ const init = async function (
callback?: Function
) {
try {
const conf = mermaidAPI.getConfig();
if (conf?.lazyLoadedDiagrams && conf.lazyLoadedDiagrams.length > 0) {
// Load all lazy loaded diagrams in parallel
await Promise.allSettled(
conf.lazyLoadedDiagrams.map(async (diagram: string) => {
const { id, detector, loadDiagram } = await import(diagram);
addDetector(id, detector, loadDiagram);
})
);
}
await initThrowsErrors(config, nodes, callback);
} catch (e) {
log.warn('Syntax Error rendering');
@@ -67,6 +57,18 @@ const init = async function (
}
};

/**
* Equivalent to {@link init()}, except an error will be thrown on error.
*
* @param config - **Deprecated** Mermaid sequenceConfig.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Possible bug This parameter seems to do nothing. It's set as mermaid.sequenceConfig = config;, but I can't see where sequenceConfig is actually used.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#3406 Same bug?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like it. According to the code, it's only supposed to set the sequenceConfig, but it doesn't seem to set the right sequenceConfig.

* @param nodes - One of:
* - A DOM Node
* - An array of DOM nodes (as would come from a jQuery selector)
* - A W3C selector, a la `.mermaid` (default)
* @param callback - Function that is called with the id of each generated mermaid diagram.
*
* @returns Resolves on success, otherwise the {@link Promise} will be rejected with an Error.
*/
const initThrowsErrors = async function (
config?: MermaidConfig,
// eslint-disable-next-line no-undef
@@ -82,6 +84,24 @@ const initThrowsErrors = async function (
mermaid.sequenceConfig = config;
}

const errors = [];

if (conf?.lazyLoadedDiagrams && conf.lazyLoadedDiagrams.length > 0) {
// Load all lazy loaded diagrams in parallel
const results = await Promise.allSettled(
conf.lazyLoadedDiagrams.map(async (diagram: string) => {
const { id, detector, loadDiagram } = await import(diagram);
addDetector(id, detector, loadDiagram);
})
);
for (const result of results) {
if (result.status == 'rejected') {
log.warn(`Failed to lazyLoadedDiagram due to `, result.reason);
errors.push(result.reason);
}
}
}

// if last argument is a function this is the callback function
log.debug(`${!callback ? 'No ' : ''}Callback function found`);
let nodesToProcess: ArrayLike<HTMLElement>;
@@ -107,7 +127,6 @@ const initThrowsErrors = async function (
const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);

let txt: string;
const errors = [];

// element is the current div with mermaid class
for (const element of Array.from(nodesToProcess)) {