feat: Return parsed config from mermaid.parse

This commit is contained in:
Sidharth Vinod
2024-09-06 23:05:30 +05:30
parent bfc4abeae2
commit 64abf29ea8
7 changed files with 97 additions and 13 deletions

View File

@@ -0,0 +1,5 @@
---
'mermaid': minor
---
feat: Return parsed config from mermaid.parse

View File

@@ -19,4 +19,4 @@ The `parseError` function will not be called.
#### Defined in #### Defined in
[packages/mermaid/src/types.ts:43](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L43) [packages/mermaid/src/types.ts:45](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L45)

View File

@@ -10,6 +10,18 @@
## Properties ## Properties
### config
`Optional` **config**: [`MermaidConfig`](mermaid.MermaidConfig.md)
The config passed as YAML frontmatter or directives
#### Defined in
[packages/mermaid/src/types.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L56)
---
### diagramType ### diagramType
**diagramType**: `string` **diagramType**: `string`
@@ -18,4 +30,4 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
#### Defined in #### Defined in
[packages/mermaid/src/types.ts:50](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L50) [packages/mermaid/src/types.ts:52](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L52)

View File

@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
#### Defined in #### Defined in
[packages/mermaid/src/types.ts:73](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L73) [packages/mermaid/src/types.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L79)
--- ---
@@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
#### Defined in #### Defined in
[packages/mermaid/src/types.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L63) [packages/mermaid/src/types.ts:69](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L69)
--- ---
@@ -63,4 +63,4 @@ The svg code for the rendered graph.
#### Defined in #### Defined in
[packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59) [packages/mermaid/src/types.ts:65](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L65)

View File

@@ -1,4 +1,4 @@
import { vi, it, expect, describe, beforeEach } from 'vitest'; import { beforeEach, describe, expect, it, vi } from 'vitest';
// ------------------------------------- // -------------------------------------
// Mocks and mocking // Mocks and mocking
@@ -66,8 +66,8 @@ vi.mock('stylis', () => {
}); });
import { compile, serialize } from 'stylis'; import { compile, serialize } from 'stylis';
import { decodeEntities, encodeEntities } from './utils.js';
import { Diagram } from './Diagram.js'; import { Diagram } from './Diagram.js';
import { decodeEntities, encodeEntities } from './utils.js';
import { toBase64 } from './utils/base64.js'; import { toBase64 } from './utils/base64.js';
/** /**
@@ -693,18 +693,79 @@ describe('mermaidAPI', () => {
await expect(mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).resolves await expect(mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).resolves
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
{ {
"config": {},
"diagramType": "flowchart-v2", "diagramType": "flowchart-v2",
} }
`); `);
}); });
it('returns config when defined in frontmatter', async () => {
await expect(
mermaidAPI.parse(`---
config:
theme: base
flowchart:
htmlLabels: true
---
graph TD;A--x|text including URL space|B;`)
).resolves.toMatchInlineSnapshot(`
{
"config": {
"flowchart": {
"htmlLabels": true,
},
"theme": "base",
},
"diagramType": "flowchart-v2",
}
`);
});
it('returns config when defined in directive', async () => {
await expect(
mermaidAPI.parse(`%%{init: { 'theme': 'base' } }%%
graph TD;A--x|text including URL space|B;`)
).resolves.toMatchInlineSnapshot(`
{
"config": {
"theme": "base",
},
"diagramType": "flowchart-v2",
}
`);
});
it('returns merged config when defined in frontmatter and directive', async () => {
await expect(
mermaidAPI.parse(`---
config:
theme: forest
flowchart:
htmlLabels: true
---
%%{init: { 'theme': 'base' } }%%
graph TD;A--x|text including URL space|B;`)
).resolves.toMatchInlineSnapshot(`
{
"config": {
"flowchart": {
"htmlLabels": true,
},
"theme": "base",
},
"diagramType": "flowchart-v2",
}
`);
});
it('returns true for valid definition with silent option', async () => { it('returns true for valid definition with silent option', async () => {
await expect( await expect(
mermaidAPI.parse('graph TD;A--x|text including URL space|B;', { suppressErrors: true }) mermaidAPI.parse('graph TD;A--x|text including URL space|B;', { suppressErrors: true })
).resolves.toMatchInlineSnapshot(` ).resolves.toMatchInlineSnapshot(`
{ {
"diagramType": "flowchart-v2", "config": {},
} "diagramType": "flowchart-v2",
`); }
`);
}); });
}); });

View File

@@ -73,9 +73,9 @@ async function parse(text: string, parseOptions?: ParseOptions): Promise<ParseRe
async function parse(text: string, parseOptions?: ParseOptions): Promise<ParseResult | false> { async function parse(text: string, parseOptions?: ParseOptions): Promise<ParseResult | false> {
addDiagrams(); addDiagrams();
try { try {
const { code } = processAndSetConfigs(text); const { code, config } = processAndSetConfigs(text);
const diagram = await getDiagramFromText(code); const diagram = await getDiagramFromText(code);
return { diagramType: diagram.type }; return { diagramType: diagram.type, config };
} catch (error) { } catch (error) {
if (parseOptions?.suppressErrors) { if (parseOptions?.suppressErrors) {
return false; return false;

View File

@@ -1,3 +1,5 @@
import type { MermaidConfig } from './config.type.js';
export interface Point { export interface Point {
x: number; x: number;
y: number; y: number;
@@ -48,6 +50,10 @@ export interface ParseResult {
* The diagram type, e.g. 'flowchart', 'sequence', etc. * The diagram type, e.g. 'flowchart', 'sequence', etc.
*/ */
diagramType: string; diagramType: string;
/**
* The config passed as YAML frontmatter or directives
*/
config?: MermaidConfig;
} }
// This makes it clear that we're working with a d3 selected element of some kind, even though it's hard to specify the exact type. // This makes it clear that we're working with a d3 selected element of some kind, even though it's hard to specify the exact type.
export type D3Element = any; export type D3Element = any;