chore: Fix types of MermaidConfig

mermaid-js · May 13, 2024 · 453802d · 453802d
1 parent cee1cf0
commit 453802d
Show file tree

Hide file tree

Showing 19 changed files with 156 additions and 122 deletions.
diff --git a/.cspell/code-terms.txt b/.cspell/code-terms.txt
@@ -83,6 +83,7 @@ NODIR
 NSTR
 outdir
 Qcontrolx
+regexes
 reinit
 rels
 reqs

diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md
@@ -6,6 +6,16 @@
 
 # Module: config
 
+## Type Aliases
+
+### PartialMermaidConfig
+
+Ƭ **PartialMermaidConfig**: `PartialDeep`<`MermaidConfig`>
+
+#### Defined in
+
+[config.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L10)
+
 ## Variables
 
 ### defaultConfig
@@ -14,7 +24,7 @@
 
 #### Defined in
 
-[config.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L8)
+[config.ts:9](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L9)
 
 ## Functions
 
@@ -26,17 +36,17 @@ Pushes in a directive to the configuration
 
 #### Parameters
 
-| Name        | Type            | Description              |
-| :---------- | :-------------- | :----------------------- |
-| `directive` | `MermaidConfig` | The directive to push in |
+| Name        | Type                                     | Description              |
+| :---------- | :--------------------------------------- | :----------------------- |
+| `directive` | `PartialObjectDeep`<`MermaidConfig`, {}> | The directive to push in |
 
 #### Returns
 
 `void`
 
 #### Defined in
 
-[config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188)
+[config.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L193)
 
 ---
 
@@ -60,7 +70,7 @@ The currentConfig
 
 #### Defined in
 
-[config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131)
+[config.ts:136](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L136)
 
 ---
 
@@ -84,7 +94,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
+[config.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L101)
 
 ---
 
@@ -118,7 +128,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:218](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L218)
+[config.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L223)
 
 ---
 
@@ -147,7 +157,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146)
+[config.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L151)
 
 ---
 
@@ -157,17 +167,17 @@ options in-place
 
 #### Parameters
 
-| Name   | Type            |
-| :----- | :-------------- |
-| `conf` | `MermaidConfig` |
+| Name   | Type                                     |
+| :----- | :--------------------------------------- |
+| `conf` | `PartialObjectDeep`<`MermaidConfig`, {}> |
 
 #### Returns
 
 `void`
 
 #### Defined in
 
-[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75)
+[config.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L80)
 
 ---
 
@@ -187,9 +197,9 @@ corresponding siteConfig value.
 
 #### Parameters
 
-| Name   | Type            | Description                 |
-| :----- | :-------------- | :-------------------------- |
-| `conf` | `MermaidConfig` | The potential currentConfig |
+| Name   | Type                                     | Description                 |
+| :----- | :--------------------------------------- | :-------------------------- |
+| `conf` | `PartialObjectDeep`<`MermaidConfig`, {}> | The potential currentConfig |
 
 #### Returns
 
@@ -199,7 +209,7 @@ The currentConfig merged with the sanitized conf
 
 #### Defined in
 
-[config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
+[config.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L118)
 
 ---
 
@@ -220,9 +230,9 @@ function _Default value: At default, will mirror Global Config_
 
 #### Parameters
 
-| Name   | Type            | Description                                 |
-| :----- | :-------------- | :------------------------------------------ |
-| `conf` | `MermaidConfig` | The base currentConfig to use as siteConfig |
+| Name   | Type                                     | Description                                 |
+| :----- | :--------------------------------------- | :------------------------------------------ |
+| `conf` | `PartialObjectDeep`<`MermaidConfig`, {}> | The base currentConfig to use as siteConfig |
 
 #### Returns
 
@@ -232,7 +242,7 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
+[config.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L66)
 
 ---
 
@@ -242,18 +252,18 @@ The new siteConfig
 
 #### Parameters
 
-| Name          | Type               |
-| :------------ | :----------------- |
-| `siteCfg`     | `MermaidConfig`    |
-| `_directives` | `MermaidConfig`\[] |
+| Name          | Type                                        |
+| :------------ | :------------------------------------------ |
+| `siteCfg`     | `MermaidConfig`                             |
+| `_directives` | `PartialObjectDeep`<`MermaidConfig`, {}>\[] |
 
 #### Returns
 
 `MermaidConfig`
 
 #### Defined in
 
-[config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15)
+[config.ts:17](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L17)
 
 ---
 
@@ -263,14 +273,14 @@ The new siteConfig
 
 #### Parameters
 
-| Name   | Type            |
-| :----- | :-------------- |
-| `conf` | `MermaidConfig` |
+| Name   | Type                                     |
+| :----- | :--------------------------------------- |
+| `conf` | `PartialObjectDeep`<`MermaidConfig`, {}> |
 
 #### Returns
 
 `MermaidConfig`
 
 #### Defined in
 
-[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)
+[config.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L84)
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
@@ -32,7 +32,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 ### mermaidAPI
 
-• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](../interfaces/mermaidAPI.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<[`ParseResult`](../interfaces/mermaidAPI.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
+• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `PartialObjectDeep`<`MermaidConfig`, {}>) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](../interfaces/mermaidAPI.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<[`ParseResult`](../interfaces/mermaidAPI.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `PartialObjectDeep`<`MermaidConfig`, {}>) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `PartialObjectDeep`<`MermaidConfig`, {}>) => `MermaidConfig` = configApi.updateSiteConfig }>
 
 ## mermaidAPI configuration defaults
 

diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts
@@ -17,14 +17,14 @@ describe('when working with site config', () => {
     expect(config_1).toEqual(config_2);
   });
   it('should respect secure keys when applying directives', () => {
-    const config_0: MermaidConfig = {
+    const config_0 = {
       fontFamily: 'foo-font',
       securityLevel: 'strict', // can't be changed
       fontSize: 12345, // can't be changed
       secure: [...configApi.defaultConfig.secure!, 'fontSize'],
-    };
+    } as MermaidConfig;
     configApi.setSiteConfig(config_0);
-    const directive: MermaidConfig = {
+    const directive: configApi.PartialMermaidConfig = {
       fontFamily: 'baf',
       // fontSize and securityLevel shouldn't be changed
       fontSize: 54321,

diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts
@@ -1,24 +1,29 @@
+import type { PartialDeep } from 'type-fest';
 import assignWithDepth from './assignWithDepth.js';
+import type { MermaidConfig } from './config.type.js';
+import config from './defaultConfig.js';
 import { log } from './logger.js';
 import theme from './themes/index.js';
-import config from './defaultConfig.js';
-import type { MermaidConfig } from './config.type.js';
 import { sanitizeDirective } from './utils/sanitizeDirective.js';
 
 export const defaultConfig: MermaidConfig = Object.freeze(config);
+export type PartialMermaidConfig = PartialDeep<MermaidConfig>;
 
 let siteConfig: MermaidConfig = assignWithDepth({}, defaultConfig);
-let configFromInitialize: MermaidConfig;
-let directives: MermaidConfig[] = [];
+let configFromInitialize: PartialMermaidConfig;
+let directives: PartialMermaidConfig[] = [];
 let currentConfig: MermaidConfig = assignWithDepth({}, defaultConfig);
 
-export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: MermaidConfig[]) => {
+export const updateCurrentConfig = (
+  siteCfg: MermaidConfig,
+  _directives: PartialMermaidConfig[]
+) => {
   // start with config being the siteConfig
   let cfg: MermaidConfig = assignWithDepth({}, siteCfg);
   // let sCfg = assignWithDepth(defaultConfig, siteConfigDelta);
 
   // Join directives
-  let sumOfDirectives: MermaidConfig = {};
+  let sumOfDirectives: PartialMermaidConfig = {};
   for (const d of _directives) {
     sanitize(d);
     // Apply the data from the directive where the overrides the themeVariables
@@ -58,7 +63,7 @@ export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: Mermaid
  * @param conf - The base currentConfig to use as siteConfig
  * @returns The new siteConfig
  */
-export const setSiteConfig = (conf: MermaidConfig): MermaidConfig => {
+export const setSiteConfig = (conf: PartialMermaidConfig): MermaidConfig => {
   siteConfig = assignWithDepth({}, defaultConfig);
   siteConfig = assignWithDepth(siteConfig, conf);
 
@@ -72,11 +77,11 @@ export const setSiteConfig = (conf: MermaidConfig): MermaidConfig => {
   return siteConfig;
 };
 
-export const saveConfigFromInitialize = (conf: MermaidConfig): void => {
+export const saveConfigFromInitialize = (conf: PartialMermaidConfig): void => {
   configFromInitialize = assignWithDepth({}, conf);
 };
 
-export const updateSiteConfig = (conf: MermaidConfig): MermaidConfig => {
+export const updateSiteConfig = (conf: PartialMermaidConfig): MermaidConfig => {
   siteConfig = assignWithDepth(siteConfig, conf);
   updateCurrentConfig(siteConfig, directives);
 
@@ -110,7 +115,7 @@ export const getSiteConfig = (): MermaidConfig => {
  * @param conf - The potential currentConfig
  * @returns The currentConfig merged with the sanitized conf
  */
-export const setConfig = (conf: MermaidConfig): MermaidConfig => {
+export const setConfig = (conf: PartialMermaidConfig): MermaidConfig => {
   checkConfig(conf);
   assignWithDepth(currentConfig, conf);
 
@@ -185,7 +190,7 @@ export const sanitize = (options: any) => {
  *
  * @param directive - The directive to push in
  */
-export const addDirective = (directive: MermaidConfig) => {
+export const addDirective = (directive: PartialMermaidConfig) => {
   sanitizeDirective(directive);
 
   // If the directive has a fontFamily, but no themeVariables, add the fontFamily to the themeVariables
@@ -236,7 +241,7 @@ const issueWarning = (warning: ConfigWarningStrings) => {
   issuedWarnings[warning] = true;
 };
 
-const checkConfig = (config: MermaidConfig) => {
+const checkConfig = (config: PartialMermaidConfig) => {
   if (!config) {
     return;
   }

diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
@@ -1,13 +1,13 @@
 import type { MermaidConfig } from '../config.type.js';
+import { UnknownDiagramError } from '../errors.js';
 import { log } from '../logger.js';
+import { anyCommentRegex, directiveRegex, frontMatterRegex } from './regexes.js';
 import type {
   DetectorRecord,
   DiagramDetector,
   DiagramLoader,
   ExternalDiagramDefinition,
 } from './types.js';
-import { anyCommentRegex, directiveRegex, frontMatterRegex } from './regexes.js';
-import { UnknownDiagramError } from '../errors.js';
 
 export const detectors: Record<string, DetectorRecord> = {};
 

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts
@@ -1,4 +1,5 @@
-import { it, describe, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
+import type { MermaidConfig } from '../config.type.js';
 import { detectType } from './detectType.js';
 import { addDiagrams } from './diagram-orchestration.js';
 
@@ -46,30 +47,40 @@ describe('diagram-orchestration', () => {
       // graph & dagre-d3 => flowchart
       expect(detectType('graph TD; A-->B')).toBe('flowchart');
       // graph & dagre-d3 => flowchart
-      expect(detectType('graph TD; A-->B', { flowchart: { defaultRenderer: 'dagre-d3' } })).toBe(
-        'flowchart'
-      );
+      expect(
+        detectType('graph TD; A-->B', {
+          flowchart: { defaultRenderer: 'dagre-d3' },
+        } as MermaidConfig)
+      ).toBe('flowchart');
       // flowchart & dagre-d3 => error
       expect(() =>
-        detectType('flowchart TD; A-->B', { flowchart: { defaultRenderer: 'dagre-d3' } })
+        detectType('flowchart TD; A-->B', {
+          flowchart: { defaultRenderer: 'dagre-d3' },
+        } as MermaidConfig)
       ).toThrowErrorMatchingInlineSnapshot(
         `[UnknownDiagramError: No diagram type detected matching given configuration for text: flowchart TD; A-->B]`
       );
 
       // graph & dagre-wrapper => flowchart-v2
       expect(
-        detectType('graph TD; A-->B', { flowchart: { defaultRenderer: 'dagre-wrapper' } })
+        detectType('graph TD; A-->B', {
+          flowchart: { defaultRenderer: 'dagre-wrapper' },
+        } as MermaidConfig)
       ).toBe('flowchart-v2');
       // flowchart ==> flowchart-v2
       expect(detectType('flowchart TD; A-->B')).toBe('flowchart-v2');
       // flowchart && dagre-wrapper ==> flowchart-v2
       expect(
-        detectType('flowchart TD; A-->B', { flowchart: { defaultRenderer: 'dagre-wrapper' } })
+        detectType('flowchart TD; A-->B', {
+          flowchart: { defaultRenderer: 'dagre-wrapper' },
+        } as MermaidConfig)
       ).toBe('flowchart-v2');
       // flowchart && elk ==> flowchart-elk
-      expect(detectType('flowchart TD; A-->B', { flowchart: { defaultRenderer: 'elk' } })).toBe(
-        'flowchart-elk'
-      );
+      expect(
+        detectType('flowchart TD; A-->B', {
+          flowchart: { defaultRenderer: 'elk' },
+        } as MermaidConfig)
+      ).toBe('flowchart-elk');
     });
 
     it('should not detect flowchart if pie contains flowchart', () => {