chore(eslint): add @typescript-eslint/dot-notation rule

.eslintrc.cjs

@@ -136,6 +136,7 @@ module.exports = {
         '@typescript-eslint/consistent-type-imports': ['error'],
         // We choose to disable it and choose later if we want to enable it. See https://github.com/process-analytics/bpmn-visualization-js/pull/2821.
         '@typescript-eslint/consistent-type-definitions': 'off',
+        '@typescript-eslint/dot-notation': 'error',
 
         'require-await': 'off', // disable the base eslint rule as it can report incorrect errors when '@typescript-eslint/require-await' is enabled (see official documentation)
         '@typescript-eslint/require-await': 'error',

dev/ts/component/ThemedBpmnVisualization.ts

@@ -144,43 +144,43 @@ export class ThemedBpmnVisualization extends BpmnVisualization {
         }
       }
       const style = styleSheet.styles[kind];
-      style['fillColor'] = fillColor;
-      style['strokeColor'] = strokeColor;
+      style.fillColor = fillColor;
+      style.strokeColor = strokeColor;
     }
 
     // TASK
     for (const kind of ShapeUtil.taskKinds()) {
       const style = styleSheet.styles[kind];
-      style['fillColor'] = theme.taskAndCallActivityFillColor;
+      style.fillColor = theme.taskAndCallActivityFillColor;
     }
 
     // CALL ACTIVITY
     const callActivityStyle = styleSheet.styles[ShapeBpmnElementKind.CALL_ACTIVITY];
-    callActivityStyle['fillColor'] = theme.taskAndCallActivityFillColor;
+    callActivityStyle.fillColor = theme.taskAndCallActivityFillColor;
 
     // TEXT ANNOTATION
     const textAnnotationStyle = styleSheet.styles[ShapeBpmnElementKind.TEXT_ANNOTATION];
-    textAnnotationStyle['fillColor'] = theme.textAnnotationFillColor ?? StyleDefault.TEXT_ANNOTATION_FILL_COLOR;
+    textAnnotationStyle.fillColor = theme.textAnnotationFillColor ?? StyleDefault.TEXT_ANNOTATION_FILL_COLOR;
 
     // POOL
     const poolStyle = styleSheet.styles[ShapeBpmnElementKind.POOL];
-    poolStyle['fillColor'] = theme.poolFillColor;
-    poolStyle['swimlaneFillColor'] = theme.defaultFillColor;
+    poolStyle.fillColor = theme.poolFillColor;
+    poolStyle.swimlaneFillColor = theme.defaultFillColor;
 
     // LANE
     const laneStyle = styleSheet.styles[ShapeBpmnElementKind.LANE];
-    laneStyle['fillColor'] = theme.laneFillColor;
+    laneStyle.fillColor = theme.laneFillColor;
 
     // DEFAULTS
     const defaultVertexStyle = styleSheet.getDefaultVertexStyle();
-    defaultVertexStyle['fontColor'] = theme.defaultFontColor;
-    defaultVertexStyle['fillColor'] = theme.defaultFillColor;
-    defaultVertexStyle['strokeColor'] = theme.defaultStrokeColor;
+    defaultVertexStyle.fontColor = theme.defaultFontColor;
+    defaultVertexStyle.fillColor = theme.defaultFillColor;
+    defaultVertexStyle.strokeColor = theme.defaultStrokeColor;
 
     const defaultEdgeStyle = styleSheet.getDefaultEdgeStyle();
-    defaultEdgeStyle['fontColor'] = theme.defaultFontColor;
-    defaultEdgeStyle['fillColor'] = theme.defaultFillColor;
-    defaultEdgeStyle['strokeColor'] = theme.flowColor ?? theme.defaultStrokeColor;
+    defaultEdgeStyle.fontColor = theme.defaultFontColor;
+    defaultEdgeStyle.fillColor = theme.defaultFillColor;
+    defaultEdgeStyle.strokeColor = theme.flowColor ?? theme.defaultStrokeColor;
 
     // theme configuration completed
     return true;

scripts/utils/parseBpmn.ts

@@ -30,7 +30,7 @@ import { readFileSync } from '../../test/shared/file-helper';
 const __dirname = resolvePath();
 const argv = parseArgs(process.argv.slice(2));
 const bpmnFilePath = argv._[0];
-const outputType = argv['output'] || 'json';
+const outputType = argv.output || 'json';
 
 // eslint-disable-next-line no-console
 console.info('Generating BPMN in the "%s" output type', outputType);

src/component/parser/json/converter/DiagramConverter.ts

@@ -137,12 +137,12 @@ export default class DiagramConverter {
     if ('background-color' in bpmnShape) {
       shape.extensions.fillColor = bpmnShape['background-color'] as string;
     } else if ('fill' in bpmnShape) {
-      shape.extensions.fillColor = bpmnShape['fill'] as string;
+      shape.extensions.fillColor = bpmnShape.fill as string;
     }
     if ('border-color' in bpmnShape) {
       shape.extensions.strokeColor = bpmnShape['border-color'] as string;
     } else if ('stroke' in bpmnShape) {
-      shape.extensions.strokeColor = bpmnShape['stroke'] as string;
+      shape.extensions.strokeColor = bpmnShape.stroke as string;
     }
   }
 
@@ -182,7 +182,7 @@ export default class DiagramConverter {
     if ('border-color' in bpmnEdge) {
       edge.extensions.strokeColor = bpmnEdge['border-color'] as string;
     } else if ('stroke' in bpmnEdge) {
-      edge.extensions.strokeColor = bpmnEdge['stroke'] as string;
+      edge.extensions.strokeColor = bpmnEdge.stroke as string;
     }
   }