chore(eslint): use @typescript-eslint/stylistic rules (#2821)

- Introduced the `plugin:@typescript-eslint/stylistic` rules. 
- Disabled `@typescript-eslint/consistent-type-definitions` rule
- Addressed linting issues identified by `plugin:@typescript-eslint/stylistic`.

.eslintrc.js

@@ -47,6 +47,7 @@ module.exports = {
       extends: [
         'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
         'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+        'plugin:@typescript-eslint/stylistic',
       ],
       parserOptions: {
         // This setting is required if you want to use rules which require type information
@@ -74,6 +75,8 @@ 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',
       },
     },
   ],

dev/ts/component/DropFileUserInterface.ts

@@ -134,14 +134,14 @@ export class DropFileUserInterface {
 
   private getAddClassCallback(containerToBeFaded: HTMLElement, isDocument: boolean, outerContainerId?: string) {
     return function (this: Document | HTMLElement): void {
-      isDocument ? (<Document>this).querySelector('#' + outerContainerId).classList.add('dragging') : (<HTMLElement>this).classList.add('dragging');
+      isDocument ? (this as Document).querySelector('#' + outerContainerId).classList.add('dragging') : (this as HTMLElement).classList.add('dragging');
       containerToBeFaded.classList.add('faded');
     };
   }
 
   private getRemoveClassCallback(containerToBeFaded: HTMLElement, isDocument: boolean, outerContainerId?: string) {
     return function (this: Document | HTMLElement): void {
-      isDocument ? (<Document>this).querySelector('#' + outerContainerId).classList.remove('dragging') : (<HTMLElement>this).classList.remove('dragging');
+      isDocument ? (this as Document).querySelector('#' + outerContainerId).classList.remove('dragging') : (this as HTMLElement).classList.remove('dragging');
       containerToBeFaded.classList.remove('faded');
     };
   }
@@ -155,7 +155,7 @@ export class DropFileUserInterface {
       } catch (e) {
         logErrorAndOpenAlert(e);
       } finally {
-        isDocument ? (<Document>this).querySelector('#' + outerContainerId).classList.remove('dragging') : (<HTMLElement>this).classList.remove('dragging');
+        isDocument ? (this as Document).querySelector('#' + outerContainerId).classList.remove('dragging') : (this as HTMLElement).classList.remove('dragging');
         containerToBeFaded.classList.remove('faded');
       }
     };

dev/ts/pages/diagram-navigation.ts

@@ -26,15 +26,15 @@ function configureFitAndZoomButtons(): void {
 }
 
 function configureZoomThrottleInput(parameters: URLSearchParams): HTMLInputElement {
-  const elZoomThrottle = <HTMLInputElement>document.getElementById('zoom-throttle');
+  const elZoomThrottle = document.getElementById('zoom-throttle') as HTMLInputElement;
   if (parameters.get('zoomThrottle')) {
     elZoomThrottle.value = parameters.get('zoomThrottle');
   }
   return elZoomThrottle;
 }
 
 function configureZoomDebounceInput(parameters: URLSearchParams): HTMLInputElement {
-  const elZoomDebounce = <HTMLInputElement>document.getElementById('zoom-debounce');
+  const elZoomDebounce = document.getElementById('zoom-debounce') as HTMLInputElement;
   if (parameters.get('zoomDebounce')) {
     elZoomDebounce.value = parameters.get('zoomDebounce');
   }

dev/ts/pages/elements-identification.ts

@@ -182,7 +182,7 @@ function updateSelectedBPMNElements(bpmnKind: ShapeBpmnElementKind): void {
 }
 
 function updateTextArea(elementsByKinds: BpmnElement[], bpmnKind: string): void {
-  const textArea = <HTMLTextAreaElement>document.getElementById('elements-result');
+  const textArea = document.getElementById('elements-result') as HTMLTextAreaElement;
 
   const textHeader = `Found ${elementsByKinds.length} ${bpmnKind}(s)`;
   log(textHeader);
@@ -193,13 +193,13 @@ function updateTextArea(elementsByKinds: BpmnElement[], bpmnKind: string): void
 }
 
 function resetTextArea(): void {
-  const textArea = <HTMLTextAreaElement>document.getElementById('elements-result');
+  const textArea = document.getElementById('elements-result') as HTMLTextAreaElement;
   textArea.value = '';
 }
 
 function configureControls(): void {
-  const selectedKindElt = <HTMLSelectElement>document.getElementById('bpmn-kinds-select');
-  selectedKindElt.onchange = event => updateSelectedBPMNElements((<HTMLSelectElement>event.target).value as ShapeBpmnElementKind);
+  const selectedKindElt = document.getElementById('bpmn-kinds-select') as HTMLSelectElement;
+  selectedKindElt.onchange = event => updateSelectedBPMNElements((event.target as HTMLSelectElement).value as ShapeBpmnElementKind);
   document.addEventListener('diagramLoaded', () => updateSelectedBPMNElements(selectedKindElt.value as ShapeBpmnElementKind), false);
 
   document.getElementById('clear-btn').onclick = function () {
@@ -213,7 +213,7 @@ function configureControls(): void {
   };
 
   // display overlay option
-  const checkboxDisplayOverlaysElt = <HTMLInputElement>document.getElementById('checkbox-display-overlays');
+  const checkboxDisplayOverlaysElt = document.getElementById('checkbox-display-overlays') as HTMLInputElement;
   checkboxDisplayOverlaysElt.addEventListener('change', function () {
     isOverlaysDisplayed = this.checked;
     log('Request overlays display:', isOverlaysDisplayed);
@@ -222,7 +222,7 @@ function configureControls(): void {
   checkboxDisplayOverlaysElt.checked = isOverlaysDisplayed;
 
   // use CSS or API to style the BPMN elements
-  const checkboxUseCSSElt = <HTMLInputElement>document.getElementById('checkbox-css-style');
+  const checkboxUseCSSElt = document.getElementById('checkbox-css-style') as HTMLInputElement;
   checkboxUseCSSElt.addEventListener('change', function () {
     useCSS = this.checked;
     log('Request CSS style feature:', useCSS);

dev/ts/pages/index.ts

@@ -35,9 +35,9 @@ let fitOnLoad = true;
 let fitOptions: FitOptions = {};
 
 function configureFitOnLoadCheckBox(): void {
-  const fitOnLoadElt = <HTMLInputElement>document.getElementById('fitOnLoad');
+  const fitOnLoadElt = document.getElementById('fitOnLoad') as HTMLInputElement;
   fitOnLoadElt.onchange = event => {
-    fitOnLoad = (<HTMLInputElement>event.target).checked;
+    fitOnLoad = (event.target as HTMLInputElement).checked;
     log('Fit on load updated!', fitOnLoad);
     updateLoadOptions(fitOnLoad ? fitOptions : {});
   };
@@ -59,9 +59,9 @@ function updateFitConfig(config: FitOptions): void {
 }
 
 function configureFitTypeSelect(): void {
-  const fitTypeSelectedElt = <HTMLSelectElement>document.getElementById('fitType-selected');
+  const fitTypeSelectedElt = document.getElementById('fitType-selected') as HTMLSelectElement;
   fitTypeSelectedElt.onchange = event => {
-    updateFitConfig({ type: (<HTMLSelectElement>event.target).value as FitType });
+    updateFitConfig({ type: (event.target as HTMLSelectElement).value as FitType });
     fit(fitOptions);
   };
 
@@ -73,9 +73,9 @@ function configureFitTypeSelect(): void {
 }
 
 function configureFitMarginInput(): void {
-  const fitMarginElt = <HTMLInputElement>document.getElementById('fit-margin');
+  const fitMarginElt = document.getElementById('fit-margin') as HTMLInputElement;
   fitMarginElt.onchange = event => {
-    updateFitConfig({ margin: Number((<HTMLInputElement>event.target).value) });
+    updateFitConfig({ margin: Number((event.target as HTMLInputElement).value) });
     fit(fitOptions);
   };
 
@@ -94,9 +94,9 @@ function configureZoomButtons(): void {
 }
 
 function configureThemeSelect(): void {
-  const themeSelectedElt = <HTMLSelectElement>document.getElementById('theme-selected');
+  const themeSelectedElt = document.getElementById('theme-selected') as HTMLSelectElement;
   themeSelectedElt.onchange = event => {
-    switchTheme((<HTMLSelectElement>event.target).value);
+    switchTheme((event.target as HTMLSelectElement).value);
   };
 
   const currentTheme = getCurrentTheme();

dev/ts/pages/overlays.ts

@@ -17,7 +17,7 @@ limitations under the License.
 import type { Overlay, OverlayPosition } from '../dev-bundle-index';
 import { addOverlays, configureControlsPanel, configureMousePointer, documentReady, getElementsByIds, removeAllOverlays, startBpmnVisualization } from '../dev-bundle-index';
 
-const bpmnIdInputElt = <HTMLInputElement>document.getElementById('bpmn-id-input');
+const bpmnIdInputElt = document.getElementById('bpmn-id-input') as HTMLInputElement;
 
 function addOverlay(overlay: Overlay): void {
   const bpmnId = bpmnIdInputElt.value;

dev/ts/shared/main.ts

@@ -221,7 +221,7 @@ function getFitOptionsFromParameters(config: BpmnVisualizationDemoConfiguration,
   const parameterFitType: string = parameters.get('fitTypeOnLoad');
   if (parameterFitType) {
     // As the parameter is a string, and the load/fit APIs accept only enum to avoid error, we need to convert it
-    fitOptions.type = <FitType>parameterFitType;
+    fitOptions.type = parameterFitType as FitType;
   }
   const parameterFitMargin = parameters.get('fitMargin');
   if (parameterFitMargin) {

src/component/helpers/array-utils.ts

@@ -35,7 +35,7 @@ function convertEmptyStringAndObject<T>(element: string | T, acceptEmptyString:
 /**
  * @internal
  */
-export function ensureIsArray<T>(elements: (T | string)[] | T | string, acceptEmptyString = false): Array<T> {
+export function ensureIsArray<T>(elements: (T | string)[] | T | string, acceptEmptyString = false): T[] {
   if (elements === undefined || elements === null) {
     return [];
   }
@@ -52,7 +52,7 @@ export function ensureIsArray<T>(elements: (T | string)[] | T | string, acceptEm
 /**
  * @internal
  */
-export function filter<T extends string>(arrayToFilter: Array<T>, suffix: string, options?: FilterParameter): Array<T> {
+export function filter<T extends string>(arrayToFilter: T[], suffix: string, options?: FilterParameter): T[] {
   let pattern = '';
   if (options?.startingWith) {
     pattern = pattern.concat(`^(${options.startingWith}).*`);

src/component/mxgraph/BpmnCellRenderer.ts

@@ -42,15 +42,15 @@ export class BpmnCellRenderer extends mxgraph.mxCellRenderer {
           overlayShape = new OverlayBadgeShape(currentOverlay.label, new mxRectangle(0, 0, 0, 0), currentOverlay.style);
         } else {
           overlayShape = new mxgraph.mxImageShape(new mxRectangle(0, 0, 0, 0), currentOverlay.image.src);
-          (<mxImageShape>overlayShape).preserveImageAspect = false;
+          (overlayShape as mxImageShape).preserveImageAspect = false;
         }
         // END bpmn-visualization CUSTOMIZATION
 
         overlayShape.dialect = state.view.graph.dialect;
         overlayShape.overlay = currentOverlay;
 
         // The 'initializeOverlay' signature forces us to hardly cast the overlayShape
-        this.initializeOverlay(state, <mxImageShape>overlayShape);
+        this.initializeOverlay(state, overlayShape as mxImageShape);
         this.installCellOverlayListeners(state, currentOverlay, overlayShape);
 
         if (currentOverlay.cursor != null) {

src/component/mxgraph/initializer.ts

@@ -56,6 +56,7 @@ export const mxUtils = mxgraph.mxUtils;
 
 /** @internal */
 declare global {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions -- Since we are overriding an existing interface in the global scope, it is not possible to convert it to a type.
   interface Window {
     mxForceIncludes: boolean;
     mxLoadResources: boolean;

src/component/mxgraph/overlay/converter.ts

@@ -19,7 +19,7 @@ import { StyleDefault } from '../style';
 import type { MxGraphCustomOverlayOptions, MxGraphCustomOverlayPosition, MxGraphCustomOverlayStyle } from './custom-overlay';
 
 export class OverlayConverter {
-  private overlayPositions: Map<OverlayPosition, MxGraphCustomOverlayPosition> = new Map([
+  private overlayPositions = new Map<OverlayPosition, MxGraphCustomOverlayPosition>([
     // Edge
     ['start', { horizontalAlign: 'left', verticalAlign: 'top' }],
     ['middle', { horizontalAlign: 'center', verticalAlign: 'top' }],
@@ -54,7 +54,7 @@ export class OverlayConverter {
     };
 
     const style = overlay.style;
-    const convertedStyle = <MxGraphCustomOverlayStyle>{ ...defaultStyle };
+    const convertedStyle = { ...defaultStyle } as MxGraphCustomOverlayStyle;
     if (!style) {
       return convertedStyle;
     }

src/component/mxgraph/renderer/StyleComputer.ts

@@ -196,7 +196,7 @@ export default class StyleComputer {
   }
 
   computeMessageFlowIconStyle(edge: Edge): string {
-    const styleValues: Array<[string, string]> = [];
+    const styleValues: [string, string][] = [];
     styleValues.push(['shape', BpmnStyleIdentifier.MESSAGE_FLOW_ICON]);
     styleValues.push([BpmnStyleIdentifier.IS_INITIATING, String(edge.messageVisibleKind === MessageVisibleKind.INITIATING)]);
     if (!this.ignoreBpmnColors) {
@@ -228,6 +228,6 @@ export function getFontStyleValue(font: Font): number {
   return value;
 }
 
-function toArrayOfMxGraphStyleEntries(styleValues: Array<[string, string | number]>): string[] {
+function toArrayOfMxGraphStyleEntries(styleValues: [string, string | number][]): string[] {
   return styleValues.filter(([, v]) => v && v != 'undefined').map(([key, value]) => `${key}=${value}`);
 }

src/component/mxgraph/shape/event-shapes.ts

@@ -29,7 +29,7 @@ export class EventShape extends mxgraph.mxEllipse {
   protected iconPainter = IconPainterProvider.get();
 
   // refactor: when all/more event types will be supported, we could move to a Record/MappedType
-  private iconPainters: Map<ShapeBpmnEventDefinitionKind, (paintParameter: PaintParameter) => void> = new Map([
+  private iconPainters = new Map<ShapeBpmnEventDefinitionKind, (paintParameter: PaintParameter) => void>([
     [ShapeBpmnEventDefinitionKind.MESSAGE, (paintParameter: PaintParameter) => this.iconPainter.paintEnvelopeIcon({ ...paintParameter, ratioFromParent: 0.5 })],
     [ShapeBpmnEventDefinitionKind.TERMINATE, (paintParameter: PaintParameter) => this.iconPainter.paintCircleIcon({ ...paintParameter, ratioFromParent: 0.6 })],
     [

src/component/mxgraph/style/style-updater.ts

@@ -93,7 +93,7 @@ export class StyleUpdater {
 
 const cssClassesStyleIdentifier = BpmnStyleIdentifier.EXTRA_CSS_CLASSES;
 class StyleManager {
-  private stylesCache: Map<string, string> = new Map();
+  private stylesCache = new Map<string, string>();
 
   constructor(private readonly model: mxGraphModel) {}
 

src/component/mxgraph/style/utils.ts

@@ -74,7 +74,7 @@ export const StyleDefault = {
  * @internal
  * @private
  */
-export const getBpmnIsInstantiating = (style: { [p: string]: unknown }): boolean => mxUtils.getValue(style, BpmnStyleIdentifier.IS_INSTANTIATING, 'false') == 'true';
+export const getBpmnIsInstantiating = (style: Record<string, unknown>): boolean => mxUtils.getValue(style, BpmnStyleIdentifier.IS_INSTANTIATING, 'false') == 'true';
 
 const convertDefaultValue = (value: string): string | undefined => (value == 'default' ? undefined : value);
 

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

@@ -45,19 +45,19 @@ export default class CollaborationConverter {
     this.buildGroups(collaboration.group);
   }
 
-  private buildParticipant(bpmnElements: Array<TParticipant> | TParticipant): void {
+  private buildParticipant(bpmnElements: TParticipant[] | TParticipant): void {
     ensureIsArray(bpmnElements).forEach(participant =>
       this.convertedElements.registerPool(new ShapeBpmnElement(participant.id, participant.name, ShapeBpmnElementKind.POOL), participant.processRef),
     );
   }
 
-  private buildMessageFlows(bpmnElements: Array<TMessageFlow> | TMessageFlow): void {
+  private buildMessageFlows(bpmnElements: TMessageFlow[] | TMessageFlow): void {
     ensureIsArray(bpmnElements).forEach(messageFlow =>
       this.convertedElements.registerMessageFlow(new MessageFlow(messageFlow.id, messageFlow.name, messageFlow.sourceRef, messageFlow.targetRef)),
     );
   }
 
-  private buildGroups(bpmnElements: Array<TGroup> | TGroup): void {
+  private buildGroups(bpmnElements: TGroup[] | TGroup): void {
     ensureIsArray(bpmnElements).forEach(groupBpmnElement => {
       const shapeBpmnElement = buildShapeBpmnGroup(this.convertedElements, this.parsingMessageCollector, groupBpmnElement);
       shapeBpmnElement && this.convertedElements.registerFlowNode(shapeBpmnElement);

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

@@ -39,9 +39,9 @@ export default class DiagramConverter {
     private parsingMessageCollector: ParsingMessageCollector,
   ) {}
 
-  private convertedFonts: Map<string, Font> = new Map();
+  private convertedFonts = new Map<string, Font>();
 
-  deserialize(bpmnDiagrams: Array<BPMNDiagram> | BPMNDiagram): BpmnModel {
+  deserialize(bpmnDiagrams: BPMNDiagram[] | BPMNDiagram): BpmnModel {
     const flowNodes: Shape[] = [];
     const lanes: Shape[] = [];
     const pools: Shape[] = [];
@@ -64,7 +64,7 @@ export default class DiagramConverter {
     return { flowNodes, lanes, pools, edges };
   }
 
-  private deserializeFonts(bpmnLabelStyle: Array<BPMNLabelStyle> | BPMNLabelStyle): void {
+  private deserializeFonts(bpmnLabelStyle: BPMNLabelStyle[] | BPMNLabelStyle): void {
     this.convertedFonts = new Map();
 
     ensureIsArray(bpmnLabelStyle).forEach(labelStyle =>
@@ -74,7 +74,7 @@ export default class DiagramConverter {
     );
   }
 
-  private deserializeShapes(shapes: Array<BPMNShape> | BPMNShape): Shapes {
+  private deserializeShapes(shapes: BPMNShape[] | BPMNShape): Shapes {
     const convertedShapes: Shapes = { flowNodes: [], lanes: [], pools: [] };
 
     ensureIsArray(shapes).forEach(shape => {
@@ -97,7 +97,7 @@ export default class DiagramConverter {
     return convertedShapes;
   }
 
-  private deserializeShapeAndStoreIfFound(shape: BPMNShape, storage: Array<Shape>, findShapeElement: (bpmnElement: string) => ShapeBpmnElement): boolean {
+  private deserializeShapeAndStoreIfFound(shape: BPMNShape, storage: Shape[], findShapeElement: (bpmnElement: string) => ShapeBpmnElement): boolean {
     const element = this.deserializeShape(shape, findShapeElement);
     if (element) {
       storage.push(element);
@@ -136,14 +136,14 @@ export default class DiagramConverter {
   // 'BPMN in Color' extensions with fallback to bpmn.io colors
   private static setColorExtensionsOnShape(shape: Shape, bpmnShape: BPMNShape): void {
     if ('background-color' in bpmnShape) {
-      shape.extensions.fillColor = <string>bpmnShape['background-color'];
+      shape.extensions.fillColor = bpmnShape['background-color'] as string;
     } else if ('fill' in bpmnShape) {
-      shape.extensions.fillColor = <string>bpmnShape['fill'];
+      shape.extensions.fillColor = bpmnShape['fill'] as string;
     }
     if ('border-color' in bpmnShape) {
-      shape.extensions.strokeColor = <string>bpmnShape['border-color'];
+      shape.extensions.strokeColor = bpmnShape['border-color'] as string;
     } else if ('stroke' in bpmnShape) {
-      shape.extensions.strokeColor = <string>bpmnShape['stroke'];
+      shape.extensions.strokeColor = bpmnShape['stroke'] as string;
     }
   }
 
@@ -181,9 +181,9 @@ export default class DiagramConverter {
   // 'BPMN in Color' extensions  with fallback to bpmn.io colors
   private static setColorExtensionsOnEdge(edge: Edge, bpmnEdge: BPMNEdge): void {
     if ('border-color' in bpmnEdge) {
-      edge.extensions.strokeColor = <string>bpmnEdge['border-color'];
+      edge.extensions.strokeColor = bpmnEdge['border-color'] as string;
     } else if ('stroke' in bpmnEdge) {
-      edge.extensions.strokeColor = <string>bpmnEdge['stroke'];
+      edge.extensions.strokeColor = bpmnEdge['stroke'] as string;
     }
   }
 
@@ -197,7 +197,7 @@ export default class DiagramConverter {
       const bounds = DiagramConverter.deserializeBounds(bpmnLabel);
       const label = new Label(font, bounds);
       if ('color' in bpmnLabel) {
-        label.extensions.color = <string>bpmnLabel.color;
+        label.extensions.color = bpmnLabel.color as string;
         return label;
       }
       if (font || bounds) {