From 64abf29ea870eaa47148197f95ce714f85bd7eea Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 6 Sep 2024 23:05:30 +0530 Subject: [PATCH] feat: Return parsed config from `mermaid.parse` --- .changeset/giant-steaks-argue.md | 5 ++ .../setup/interfaces/mermaid.ParseOptions.md | 2 +- .../setup/interfaces/mermaid.ParseResult.md | 14 +++- .../setup/interfaces/mermaid.RenderResult.md | 6 +- packages/mermaid/src/mermaidAPI.spec.ts | 73 +++++++++++++++++-- packages/mermaid/src/mermaidAPI.ts | 4 +- packages/mermaid/src/types.ts | 6 ++ 7 files changed, 97 insertions(+), 13 deletions(-) create mode 100644 .changeset/giant-steaks-argue.md diff --git a/.changeset/giant-steaks-argue.md b/.changeset/giant-steaks-argue.md new file mode 100644 index 0000000000..0abefe3fc4 --- /dev/null +++ b/.changeset/giant-steaks-argue.md @@ -0,0 +1,5 @@ +--- +'mermaid': minor +--- + +feat: Return parsed config from mermaid.parse diff --git a/docs/config/setup/interfaces/mermaid.ParseOptions.md b/docs/config/setup/interfaces/mermaid.ParseOptions.md index 2b80842090..54a1dfcaae 100644 --- a/docs/config/setup/interfaces/mermaid.ParseOptions.md +++ b/docs/config/setup/interfaces/mermaid.ParseOptions.md @@ -19,4 +19,4 @@ The `parseError` function will not be called. #### 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) diff --git a/docs/config/setup/interfaces/mermaid.ParseResult.md b/docs/config/setup/interfaces/mermaid.ParseResult.md index 42f8ea8ba4..452c90b320 100644 --- a/docs/config/setup/interfaces/mermaid.ParseResult.md +++ b/docs/config/setup/interfaces/mermaid.ParseResult.md @@ -10,6 +10,18 @@ ## 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**: `string` @@ -18,4 +30,4 @@ The diagram type, e.g. 'flowchart', 'sequence', etc. #### 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) diff --git a/docs/config/setup/interfaces/mermaid.RenderResult.md b/docs/config/setup/interfaces/mermaid.RenderResult.md index f2b5c7872a..369243331b 100644 --- a/docs/config/setup/interfaces/mermaid.RenderResult.md +++ b/docs/config/setup/interfaces/mermaid.RenderResult.md @@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present. #### 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 -[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 -[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) diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts index dd8b3bbc81..f51bc0795a 100644 --- a/packages/mermaid/src/mermaidAPI.spec.ts +++ b/packages/mermaid/src/mermaidAPI.spec.ts @@ -1,4 +1,4 @@ -import { vi, it, expect, describe, beforeEach } from 'vitest'; +import { beforeEach, describe, expect, it, vi } from 'vitest'; // ------------------------------------- // Mocks and mocking @@ -66,8 +66,8 @@ vi.mock('stylis', () => { }); import { compile, serialize } from 'stylis'; -import { decodeEntities, encodeEntities } from './utils.js'; import { Diagram } from './Diagram.js'; +import { decodeEntities, encodeEntities } from './utils.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 .toMatchInlineSnapshot(` { + "config": {}, "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 () => { await expect( mermaidAPI.parse('graph TD;A--x|text including URL space|B;', { suppressErrors: true }) ).resolves.toMatchInlineSnapshot(` - { - "diagramType": "flowchart-v2", - } - `); + { + "config": {}, + "diagramType": "flowchart-v2", + } + `); }); }); diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 3fdd967f17..c44161a520 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -73,9 +73,9 @@ async function parse(text: string, parseOptions?: ParseOptions): Promise { addDiagrams(); try { - const { code } = processAndSetConfigs(text); + const { code, config } = processAndSetConfigs(text); const diagram = await getDiagramFromText(code); - return { diagramType: diagram.type }; + return { diagramType: diagram.type, config }; } catch (error) { if (parseOptions?.suppressErrors) { return false; diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts index 9f4d772253..ae97bd69b0 100644 --- a/packages/mermaid/src/types.ts +++ b/packages/mermaid/src/types.ts @@ -1,3 +1,5 @@ +import type { MermaidConfig } from './config.type.js'; + export interface Point { x: number; y: number; @@ -48,6 +50,10 @@ export interface ParseResult { * The diagram type, e.g. 'flowchart', 'sequence', etc. */ 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. export type D3Element = any;