From 64abf29ea870eaa47148197f95ce714f85bd7eea Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 6 Sep 2024 23:05:30 +0530 Subject: [PATCH 1/3] 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 000000000..0abefe3fc --- /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 2b8084209..54a1dfcaa 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 42f8ea8ba..452c90b32 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 f2b5c7872..369243331 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 dd8b3bbc8..f51bc0795 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 3fdd967f1..c44161a52 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 9f4d77225..ae97bd69b 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; From c0187101e9cb3ea9d1966575efcd80ebb6a9a203 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 9 Sep 2024 17:30:22 +0530 Subject: [PATCH 2/3] fix: Return type, make config non optional Co-authored-by: Alois Klink --- packages/mermaid/src/preprocess.ts | 4 ++-- packages/mermaid/src/types.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/preprocess.ts b/packages/mermaid/src/preprocess.ts index 10bc0adea..a62326070 100644 --- a/packages/mermaid/src/preprocess.ts +++ b/packages/mermaid/src/preprocess.ts @@ -49,7 +49,7 @@ const processDirectives = (code: string) => { * @param code - The code to preprocess. * @returns The object containing the preprocessed code, title, and configuration. */ -export function preprocessDiagram(code: string): DiagramMetadata & { code: string } { +export function preprocessDiagram(code: string) { const cleanedCode = cleanupText(code); const frontMatterResult = processFrontmatter(cleanedCode); const directiveResult = processDirectives(frontMatterResult.text); @@ -59,5 +59,5 @@ export function preprocessDiagram(code: string): DiagramMetadata & { code: strin code, title: frontMatterResult.title, config, - }; + } satisfies DiagramMetadata & { code: string }; } diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts index ae97bd69b..d8b4c4aa0 100644 --- a/packages/mermaid/src/types.ts +++ b/packages/mermaid/src/types.ts @@ -53,7 +53,7 @@ export interface ParseResult { /** * The config passed as YAML frontmatter or directives */ - config?: MermaidConfig; + 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; From d053284536e0b1f9f03e20d825b60b059479546b Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 9 Sep 2024 12:11:29 +0000 Subject: [PATCH 3/3] [autofix.ci] apply automated fixes --- docs/config/setup/interfaces/mermaid.ParseResult.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/config/setup/interfaces/mermaid.ParseResult.md b/docs/config/setup/interfaces/mermaid.ParseResult.md index 452c90b32..e6ff154c8 100644 --- a/docs/config/setup/interfaces/mermaid.ParseResult.md +++ b/docs/config/setup/interfaces/mermaid.ParseResult.md @@ -12,7 +12,7 @@ ### config -• `Optional` **config**: [`MermaidConfig`](mermaid.MermaidConfig.md) +• **config**: [`MermaidConfig`](mermaid.MermaidConfig.md) The config passed as YAML frontmatter or directives