Merge pull request #4580 from aloisklink/refactor/replace-enums

Remove all TypeScript enums and forbid them in ESLint

.eslintrc.cjs

@@ -123,6 +123,14 @@ module.exports = {
       files: ['*.{ts,tsx}'],
       plugins: ['tsdoc'],
       rules: {
+        'no-restricted-syntax': [
+          'error',
+          {
+            selector: 'TSEnumDeclaration',
+            message:
+              'Prefer using TypeScript union types over TypeScript enum, since TypeScript enums have a bunch of issues, see https://dev.to/dvddpl/whats-the-problem-with-typescript-enums-2okj',
+          },
+        ],
         'tsdoc/syntax': 'error',
       },
     },

packages/mermaid/src/config.ts

@@ -226,9 +226,11 @@ export const reset = (config = siteConfig): void => {
   updateCurrentConfig(config, directives);
 };
 
-enum ConfigWarning {
-  'LAZY_LOAD_DEPRECATED' = 'The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead.',
-}
+const ConfigWarning = {
+  LAZY_LOAD_DEPRECATED:
+    'The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead.',
+} as const;
+
 type ConfigWarningStrings = keyof typeof ConfigWarning;
 const issuedWarnings: { [key in ConfigWarningStrings]?: boolean } = {};
 const issueWarning = (warning: ConfigWarningStrings) => {

packages/mermaid/src/config.type.ts

@@ -412,18 +412,8 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
   wrappingWidth?: number;
 }
 
-export enum SankeyLinkColor {
-  source = 'source',
-  target = 'target',
-  gradient = 'gradient',
-}
-
-export enum SankeyNodeAlignment {
-  left = 'left',
-  right = 'right',
-  center = 'center',
-  justify = 'justify',
-}
+export type SankeyLinkColor = 'source' | 'target' | 'gradient';
+export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify';
 
 export interface SankeyDiagramConfig extends BaseDiagramConfig {
   width?: number;

packages/mermaid/src/defaultConfig.ts

@@ -1,5 +1,5 @@
 import theme from './themes/index.js';
-import { MermaidConfig, SankeyLinkColor, SankeyNodeAlignment } from './config.type.js';
+import { type MermaidConfig } from './config.type.js';
 /**
  * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
  * here](8.6.0_docs.md)].**
@@ -2273,8 +2273,8 @@ const config: Partial<MermaidConfig> = {
   sankey: {
     width: 800,
     height: 400,
-    linkColor: SankeyLinkColor.gradient,
-    nodeAlignment: SankeyNodeAlignment.justify,
+    linkColor: 'gradient',
+    nodeAlignment: 'justify',
     useMaxWidth: false,
   },
   fontSize: 16,

packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts

@@ -18,17 +18,17 @@ import {
 } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Uid } from '../../rendering-util/uid.js';
-import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
+import type { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
 
 // Map config options to alignment functions
 const alignmentsMap: Record<
   SankeyNodeAlignment,
   (node: d3SankeyNode<object, object>, n: number) => number
 > = {
-  [SankeyNodeAlignment.left]: d3SankeyLeft,
-  [SankeyNodeAlignment.right]: d3SankeyRight,
-  [SankeyNodeAlignment.center]: d3SankeyCenter,
-  [SankeyNodeAlignment.justify]: d3SankeyJustify,
+  left: d3SankeyLeft,
+  right: d3SankeyRight,
+  center: d3SankeyCenter,
+  justify: d3SankeyJustify,
 };
 
 /**
@@ -157,9 +157,9 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .attr('class', 'link')
     .style('mix-blend-mode', 'multiply');
 
-  const linkColor = conf?.linkColor || SankeyLinkColor.gradient;
+  const linkColor = conf?.linkColor || 'gradient';
 
-  if (linkColor === SankeyLinkColor.gradient) {
+  if (linkColor === 'gradient') {
     const gradient = link
       .append('linearGradient')
       .attr('id', (d: any) => (d.uid = Uid.next('linearGradient-')).id)
@@ -180,13 +180,13 @@ export const draw = function (text: string, id: string, _version: string, diagOb
 
   let coloring: any;
   switch (linkColor) {
-    case SankeyLinkColor.gradient:
+    case 'gradient':
       coloring = (d: any) => d.uid;
       break;
-    case SankeyLinkColor.source:
+    case 'source':
       coloring = (d: any) => colorScheme(d.source.id);
       break;
-    case SankeyLinkColor.target:
+    case 'target':
       coloring = (d: any) => colorScheme(d.target.id);
       break;
     default: