Merge pull request #4803 from aloisklink/refactor/mermaid-config-limit-enum-types

[v11] Limit `MermaidConfig` enum TypesScript types to certain values

packages/mermaid/src/config.type.ts

@@ -61,7 +61,7 @@ export interface MermaidConfig {
    * You may also use `themeCSS` to override this value.
    *
    */
-  theme?: string | 'default' | 'forest' | 'dark' | 'neutral' | 'null';
+  theme?: 'default' | 'forest' | 'dark' | 'neutral' | 'null';
   themeVariables?: any;
   themeCSS?: string;
   /**
@@ -82,26 +82,11 @@ export interface MermaidConfig {
    * This option decides the amount of logging to be used by mermaid.
    *
    */
-  logLevel?:
-    | number
-    | string
-    | 0
-    | 2
-    | 1
-    | 'trace'
-    | 'debug'
-    | 'info'
-    | 'warn'
-    | 'error'
-    | 'fatal'
-    | 3
-    | 4
-    | 5
-    | undefined;
+  logLevel?: 'trace' | 0 | 'debug' | 1 | 'info' | 2 | 'warn' | 3 | 'error' | 4 | 'fatal' | 5;
   /**
    * Level of trust for parsed diagram
    */
-  securityLevel?: string | 'strict' | 'loose' | 'antiscript' | 'sandbox' | undefined;
+  securityLevel?: 'strict' | 'loose' | 'antiscript' | 'sandbox';
   /**
    * Dictates whether mermaid starts on Page load
    */
@@ -723,7 +708,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig {
   /**
    * Directional bias for layout of entities
    */
-  layoutDirection?: string | 'TB' | 'BT' | 'LR' | 'RL';
+  layoutDirection?: 'TB' | 'BT' | 'LR' | 'RL';
   /**
    * The minimum width of an entity box. Expressed in pixels.
    */
@@ -788,7 +773,7 @@ export interface StateDiagramConfig extends BaseDiagramConfig {
    * Decides which rendering engine that is to be used for the rendering.
    *
    */
-  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
+  defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk';
 }
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
@@ -812,7 +797,7 @@ export interface ClassDiagramConfig extends BaseDiagramConfig {
    * Decides which rendering engine that is to be used for the rendering.
    *
    */
-  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
+  defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk';
   nodeSpacing?: number;
   rankSpacing?: number;
   /**
@@ -872,7 +857,7 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig {
   /**
    * Multiline message alignment
    */
-  messageAlign?: string | 'left' | 'center' | 'right';
+  messageAlign?: 'left' | 'center' | 'right';
   /**
    * Prolongs the edge of the diagram downwards.
    *
@@ -951,7 +936,7 @@ export interface TimelineDiagramConfig extends BaseDiagramConfig {
   /**
    * Multiline message alignment
    */
-  messageAlign?: string | 'left' | 'center' | 'right';
+  messageAlign?: 'left' | 'center' | 'right';
   /**
    * Prolongs the edge of the diagram downwards.
    *
@@ -1062,7 +1047,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
    * Controls the display mode.
    *
    */
-  displayMode?: string | 'compact';
+  displayMode?: '' | 'compact';
   /**
    * On which day a week-based interval should start
    *
@@ -1121,7 +1106,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
   /**
    * Multiline message alignment
    */
-  messageAlign?: string | 'left' | 'center' | 'right';
+  messageAlign?: 'left' | 'center' | 'right';
   /**
    * Mirror actors under diagram
    *
@@ -1178,7 +1163,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
   /**
    * This sets the text alignment of actor-attached notes
    */
-  noteAlign?: string | 'left' | 'center' | 'right';
+  noteAlign?: 'left' | 'center' | 'right';
   /**
    * This sets the font size of actor messages
    */
@@ -1254,7 +1239,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    * Defines how mermaid renders curves for flowcharts.
    *
    */
-  curve?: string | 'basis' | 'linear' | 'cardinal';
+  curve?: 'basis' | 'linear' | 'cardinal';
   /**
    * Represents the padding between the labels and the shape
    *
@@ -1266,7 +1251,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    * Decides which rendering engine that is to be used for the rendering.
    *
    */
-  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
+  defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk';
   /**
    * Width of nodes where text is wrapped.
    *

packages/mermaid/src/mermaidAPI.spec.ts

@@ -563,7 +563,7 @@ describe('mermaidAPI', () => {
       const config = {
         logLevel: 0,
         securityLevel: 'loose',
-      };
+      } as const;
       mermaidAPI.initialize(config);
       mermaidAPI.setConfig({ securityLevel: 'strict', logLevel: 1 });
       expect(mermaidAPI.getConfig().logLevel).toBe(1);

packages/mermaid/src/schemas/config.schema.yaml

@@ -63,8 +63,6 @@ properties:
     meta:enum:
       'null': Can be set to disable any pre-defined mermaid theme
     default: 'default'
-    # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
-    tsType: 'string | "default" | "forest" | "dark" | "neutral" | "null"'
   themeVariables:
     tsType: any
   themeCSS:
@@ -115,8 +113,6 @@ properties:
       error: Equivalent to 4
       fatal: Equivalent to 5 (default)
     default: 5
-    # Allow any number or string for typescript backwards compatibility (fix in Mermaid v10)
-    tsType: 'number | string | 0 | 2 | 1 | "trace" | "debug" | "info" | "warn" | "error" | "fatal" | 3 | 4 | 5 | undefined'
   securityLevel:
     description: Level of trust for parsed diagram
     type: string
@@ -134,8 +130,6 @@ properties:
         This prevent any JavaScript from running in the context.
         This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, or links to other tabs or targets, etc.
     default: strict
-    # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
-    tsType: 'string | "strict" | "loose" | "antiscript" | "sandbox" | undefined'
   startOnLoad:
     description: Dictates whether mermaid starts on Page load
     type: boolean
@@ -1021,8 +1015,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
           LR: Left-Right
           RL: Right to Left
         default: TB
-        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
-        tsType: 'string | "TB" | "BT" | "LR" | "RL"'
       minEntityWidth:
         description: The minimum width of an entity box. Expressed in pixels.
         type: integer
@@ -1135,8 +1127,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
           dagre-d3: The [dagre-d3-es](https://www.npmjs.com/package/dagre-d3-es) library.
           dagre-wrapper: wrapper for dagre implemented in mermaid
           elk: Layout using [elkjs](https://github.com/kieler/elkjs)
-        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
-        tsType: 'string | "dagre-d3" | "dagre-wrapper" | "elk"'
 
   ClassDiagramConfig:
     title: Class Diagram Config
@@ -1252,8 +1242,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
           - center
           - right
         default: center
-        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
-        tsType: 'string | "left" | "center" | "right"'
       bottomMarginAdj:
         description: |
           Prolongs the edge of the diagram downwards.
@@ -1378,8 +1366,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
           - center
           - right
         default: center
-        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
-        tsType: 'string | "left" | "center" | "right"'
       bottomMarginAdj:
         description: |
           Prolongs the edge of the diagram downwards.
@@ -1543,13 +1529,10 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
         meta:enum:
           compact: Enables displaying multiple tasks on the same row.
         default: ''
-        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
-        tsType: 'string | "compact"'
       weekday:
         description: |
           On which day a week-based interval should start
         type: string
-        tsType: '"monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"'
         enum:
           - monday
           - tuesday
@@ -1691,8 +1674,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
         type: string
         enum: ['left', 'center', 'right']
         default: 'center'
-        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
-        tsType: 'string | "left" | "center" | "right"'
 
       messageFontSize:
         description: This sets the font size of actor messages
@@ -1780,8 +1761,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
         type: string
         enum: ['basis', 'linear', 'cardinal']
         default: 'basis'
-        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
-        tsType: 'string | "basis" | "linear" | "cardinal"'
       padding:
         description: |
           Represents the padding between the labels and the shape

packages/mermaid/src/utils.spec.ts

@@ -260,56 +260,46 @@ describe('when formatting urls', function () {
   it('should handle links', function () {
     const url = 'https://mermaid-js.github.io/mermaid/#/';
 
-    const config = { securityLevel: 'loose' };
-    let result = utils.formatUrl(url, config);
+    let result = utils.formatUrl(url, { securityLevel: 'loose' });
     expect(result).toEqual(url);
 
-    config.securityLevel = 'strict';
-    result = utils.formatUrl(url, config);
+    result = utils.formatUrl(url, { securityLevel: 'strict' });
     expect(result).toEqual(url);
   });
   it('should handle anchors', function () {
     const url = '#interaction';
 
-    const config = { securityLevel: 'loose' };
-    let result = utils.formatUrl(url, config);
+    let result = utils.formatUrl(url, { securityLevel: 'loose' });
     expect(result).toEqual(url);
 
-    config.securityLevel = 'strict';
-    result = utils.formatUrl(url, config);
+    result = utils.formatUrl(url, { securityLevel: 'strict' });
     expect(result).toEqual(url);
   });
   it('should handle mailto', function () {
     const url = 'mailto:user@user.user';
 
-    const config = { securityLevel: 'loose' };
-    let result = utils.formatUrl(url, config);
+    let result = utils.formatUrl(url, { securityLevel: 'loose' });
     expect(result).toEqual(url);
 
-    config.securityLevel = 'strict';
-    result = utils.formatUrl(url, config);
+    result = utils.formatUrl(url, { securityLevel: 'strict' });
     expect(result).toEqual(url);
   });
   it('should handle other protocols', function () {
     const url = 'notes://do-your-thing/id';
 
-    const config = { securityLevel: 'loose' };
-    let result = utils.formatUrl(url, config);
+    let result = utils.formatUrl(url, { securityLevel: 'loose' });
     expect(result).toEqual(url);
 
-    config.securityLevel = 'strict';
-    result = utils.formatUrl(url, config);
+    result = utils.formatUrl(url, { securityLevel: 'strict' });
     expect(result).toEqual(url);
   });
   it('should handle scripts', function () {
     const url = 'javascript:alert("test")';
 
-    const config = { securityLevel: 'loose' };
-    let result = utils.formatUrl(url, config);
+    let result = utils.formatUrl(url, { securityLevel: 'loose' });
     expect(result).toEqual(url);
 
-    config.securityLevel = 'strict';
-    result = utils.formatUrl(url, config);
+    result = utils.formatUrl(url, { securityLevel: 'strict' });
     expect(result).toEqual('about:blank');
   });
 });