chore(eslint): add unicorn/prefer-query-selector rule

.eslintrc.cjs

@@ -41,6 +41,7 @@ module.exports = {
       },
     ],
     'unicorn/prevent-abbreviations': 'error',
+    'unicorn/prefer-query-selector': 'error',
     'import/newline-after-import': ['error', { count: 1 }],
     'import/first': 'error',
     'import/order': [

dev/ts/component/DropFileUserInterface.ts

@@ -39,7 +39,7 @@ export class DropFileUserInterface {
     this.addDomElements(this.containerToFade);
     this.addStyle();
 
-    const dropContainer = document.getElementById(this.outerContainerId);
+    const dropContainer = document.querySelector<HTMLDivElement>(`#${this.outerContainerId}`);
     // prevent loading file by the browser
     this.preventDefaultsOnEvents(['dragover', 'drop'], this.window);
     this.preventDefaultsOnEvents(['dragover', 'dragleave', 'drop'], dropContainer);

dev/ts/pages/bpmn-rendering.ts

@@ -18,7 +18,7 @@ import { documentReady, log, logError, startBpmnVisualization } from '../develop
 
 function statusFetchKO(errorMessage: string): void {
   logError(errorMessage);
-  const statusElt = document.getElementById('status-zone');
+  const statusElt = document.querySelector('#status-zone') as HTMLDivElement;
   statusElt.innerText = errorMessage;
   statusElt.className = 'status-ko';
   log('Status zone set with error:', errorMessage);

dev/ts/pages/diagram-navigation.ts

@@ -18,23 +18,23 @@ import { configureControlsPanel, configureMousePointer, documentReady, fit, FitT
 
 function configureFitAndZoomButtons(): void {
   Object.values(FitType).forEach(fitType => {
-    document.getElementById(fitType).onclick = () => fit({ type: fitType });
+    document.querySelector(`#${fitType}`).addEventListener('click', () => fit({ type: fitType }));
   });
   Object.values(ZoomType).forEach(zoomType => {
-    document.getElementById(`zoom-${zoomType}`).onclick = () => zoom(zoomType);
+    document.querySelector(`#zoom-${zoomType}`).addEventListener('click', () => zoom(zoomType));
   });
 }
 
 function configureZoomThrottleInput(parameters: URLSearchParams): HTMLInputElement {
-  const zoomThrottleElement = document.getElementById('zoom-throttle') as HTMLInputElement;
+  const zoomThrottleElement = document.querySelector('#zoom-throttle') as HTMLInputElement;
   if (parameters.get('zoomThrottle')) {
     zoomThrottleElement.value = parameters.get('zoomThrottle');
   }
   return zoomThrottleElement;
 }
 
 function configureZoomDebounceInput(parameters: URLSearchParams): HTMLInputElement {
-  const zoomDebounceElement = document.getElementById('zoom-debounce') as HTMLInputElement;
+  const zoomDebounceElement = document.querySelector('#zoom-debounce') as HTMLInputElement;
   if (parameters.get('zoomDebounce')) {
     zoomDebounceElement.value = parameters.get('zoomDebounce');
   }

dev/ts/pages/elements-identification.ts

@@ -183,7 +183,7 @@ function updateSelectedBPMNElements(bpmnKind: ShapeBpmnElementKind): void {
 }
 
 function updateTextArea(elementsByKinds: BpmnSemantic[], bpmnKind: string): void {
-  const textArea = document.getElementById('elements-result') as HTMLTextAreaElement;
+  const textArea = document.querySelector('#elements-result') as HTMLTextAreaElement;
 
   const textHeader = `Found ${elementsByKinds.length} ${bpmnKind}(s)`;
   log(textHeader);
@@ -194,27 +194,27 @@ function updateTextArea(elementsByKinds: BpmnSemantic[], bpmnKind: string): void
 }
 
 function resetTextArea(): void {
-  const textArea = document.getElementById('elements-result') as HTMLTextAreaElement;
+  const textArea = document.querySelector('#elements-result') as HTMLTextAreaElement;
   textArea.value = '';
 }
 
 function configureControls(): void {
-  const selectedKindElt = document.getElementById('bpmn-kinds-select') as HTMLSelectElement;
+  const selectedKindElt = document.querySelector('#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 () {
+  document.querySelector('#clear-btn').addEventListener('click', function () {
     resetTextArea();
 
     useCSS ? removeCssClasses(lastIdentifiedBpmnIds, cssClassName) : resetStyleByAPI();
     lastIdentifiedBpmnIds.forEach(id => removeAllOverlays(id));
 
     // reset identified elements and values
     lastIdentifiedBpmnIds = [];
-  };
+  });
 
   // display overlay option
-  const checkboxDisplayOverlaysElt = document.getElementById('checkbox-display-overlays') as HTMLInputElement;
+  const checkboxDisplayOverlaysElt = document.querySelector('#checkbox-display-overlays') as HTMLInputElement;
   checkboxDisplayOverlaysElt.addEventListener('change', function () {
     isOverlaysDisplayed = this.checked;
     log('Request overlays display:', isOverlaysDisplayed);
@@ -223,7 +223,7 @@ function configureControls(): void {
   checkboxDisplayOverlaysElt.checked = isOverlaysDisplayed;
 
   // use CSS or API to style the BPMN elements
-  const checkboxUseCSSElt = document.getElementById('checkbox-css-style') as HTMLInputElement;
+  const checkboxUseCSSElt = document.querySelector('#checkbox-css-style') as HTMLInputElement;
   checkboxUseCSSElt.addEventListener('change', function () {
     useCSS = this.checked;
     log('Request CSS style feature:', useCSS);
@@ -285,8 +285,8 @@ function getOverlay(bpmnKind: BpmnElementKind): Overlay {
 }
 
 function configureDownloadButtons(): void {
-  document.getElementById('btn-dl-svg').addEventListener('click', downloadSvg, false);
-  document.getElementById('btn-dl-png').addEventListener('click', downloadPng, false);
+  document.querySelector('#btn-dl-svg').addEventListener('click', downloadSvg, false);
+  document.querySelector('#btn-dl-png').addEventListener('click', downloadPng, false);
 }
 
 documentReady(() => {

dev/ts/pages/index.ts

@@ -36,12 +36,12 @@ let fitOnLoad = true;
 let fitOptions: FitOptions = {};
 
 function configureFitOnLoadCheckBox(): void {
-  const fitOnLoadElt = document.getElementById('fitOnLoad') as HTMLInputElement;
-  fitOnLoadElt.onchange = event => {
+  const fitOnLoadElt = document.querySelector('#fitOnLoad') as HTMLInputElement;
+  fitOnLoadElt.addEventListener('change', event => {
     fitOnLoad = (event.target as HTMLInputElement).checked;
     log('Fit on load updated!', fitOnLoad);
     updateLoadOptions(fitOnLoad ? fitOptions : {});
-  };
+  });
   fitOnLoadElt.checked = fitOnLoad;
 }
 
@@ -60,11 +60,11 @@ function updateFitConfig(config: FitOptions): void {
 }
 
 function configureFitTypeSelect(): void {
-  const fitTypeSelectedElt = document.getElementById('fitType-selected') as HTMLSelectElement;
-  fitTypeSelectedElt.onchange = event => {
+  const fitTypeSelectedElt = document.querySelector('#fitType-selected') as HTMLSelectElement;
+  fitTypeSelectedElt.addEventListener('change', event => {
     updateFitConfig({ type: (event.target as HTMLSelectElement).value as FitType });
     fit(fitOptions);
-  };
+  });
 
   if (fitOptions.type) {
     fitTypeSelectedElt.value = fitOptions.type;
@@ -74,11 +74,11 @@ function configureFitTypeSelect(): void {
 }
 
 function configureFitMarginInput(): void {
-  const fitMarginElt = document.getElementById('fit-margin') as HTMLInputElement;
-  fitMarginElt.onchange = event => {
+  const fitMarginElt = document.querySelector('#fit-margin') as HTMLInputElement;
+  fitMarginElt.addEventListener('change', event => {
     updateFitConfig({ margin: Number((event.target as HTMLInputElement).value) });
     fit(fitOptions);
-  };
+  });
 
   if (fitOptions.margin) {
     fitMarginElt.value = String(fitOptions.margin);
@@ -89,16 +89,16 @@ function configureFitMarginInput(): void {
 
 function configureZoomButtons(): void {
   Object.values(ZoomType).forEach(zoomType => {
-    document.getElementById(`zoom-${zoomType}`).onclick = () => zoom(zoomType);
+    document.querySelector(`#zoom-${zoomType}`).addEventListener('click', () => zoom(zoomType));
   });
-  document.getElementById(`zoom-reset`).onclick = () => fit(fitOptions);
+  document.querySelector(`#zoom-reset`).addEventListener('click', () => fit(fitOptions));
 }
 
 function configureThemeSelect(): void {
-  const themeSelectedElt = document.getElementById('theme-selected') as HTMLSelectElement;
-  themeSelectedElt.onchange = event => {
+  const themeSelectedElt = document.querySelector('#theme-selected') as HTMLSelectElement;
+  themeSelectedElt.addEventListener('change', event => {
     switchTheme((event.target as HTMLSelectElement).value);
-  };
+  });
 
   const currentTheme = getCurrentTheme();
   if (currentTheme) {
@@ -110,7 +110,7 @@ function configureDisplayedFooterContent(): void {
   const version = getVersion();
   const versionAsString = `bpmn-visualization@${version.lib}`;
   const dependenciesAsString = [...version.dependencies].map(([name, version]) => `${name}@${version}`).join('/');
-  const versionElt = document.getElementById('footer-content');
+  const versionElt = document.querySelector('#footer-content') as HTMLDivElement;
   versionElt.innerText = `${versionAsString} with ${dependenciesAsString}`;
 }
 
@@ -142,7 +142,7 @@ function startDemo(): void {
   });
 
   // Configure custom html elements
-  document.getElementById('bpmn-file').addEventListener('change', handleFileSelect, false);
+  document.querySelector('#bpmn-file').addEventListener('change', handleFileSelect, false);
 
   fitOptions = getCurrentLoadOptions().fit;
   configureFitTypeSelect();

dev/ts/pages/overlays.ts

@@ -26,7 +26,7 @@ import {
   startBpmnVisualization,
 } from '../development-bundle-index';
 
-const bpmnIdInputElt = document.getElementById('bpmn-id-input') as HTMLInputElement;
+const bpmnIdInputElt = document.querySelector('#bpmn-id-input') as HTMLInputElement;
 
 function addOverlay(overlay: Overlay): void {
   const bpmnId = bpmnIdInputElt.value;
@@ -46,23 +46,23 @@ function getPosition(): OverlayPosition {
 }
 
 function configureAddDefaultOverlay(position: OverlayPosition): void {
-  document.getElementById(position).onclick = () => addOverlay({ position, label: '123' });
+  document.querySelector(`#${position}`).addEventListener('click', () => addOverlay({ position, label: '123' }));
 }
 
 function configureAddOverlayWithCustomFont(): void {
-  document.getElementById('font').onclick = () => addOverlay({ position: getPosition(), label: '7896', style: { font: { color: 'LightSeaGreen', size: 30 } } });
+  document.querySelector('#font').addEventListener('click', () => addOverlay({ position: getPosition(), label: '7896', style: { font: { color: 'LightSeaGreen', size: 30 } } }));
 }
 
 function configureAddOverlayWithCustomFill(): void {
-  document.getElementById('fill').onclick = () => addOverlay({ position: getPosition(), label: '3', style: { fill: { color: 'LightSalmon', opacity: 50 } } });
+  document.querySelector('#fill').addEventListener('click', () => addOverlay({ position: getPosition(), label: '3', style: { fill: { color: 'LightSalmon', opacity: 50 } } }));
 }
 
 function configureAddOverlayWithCustomStroke(): void {
-  document.getElementById('stroke').onclick = () => addOverlay({ position: getPosition(), label: '41', style: { stroke: { color: 'Aquamarine', width: 5 } } });
+  document.querySelector('#stroke').addEventListener('click', () => addOverlay({ position: getPosition(), label: '41', style: { stroke: { color: 'Aquamarine', width: 5 } } }));
 }
 
 function configureRemoveAllOverlays(): void {
-  document.getElementById('clear').onclick = () => removeAllOverlays(bpmnIdInputElt.value);
+  document.querySelector('#clear').addEventListener('click', () => removeAllOverlays(bpmnIdInputElt.value));
 }
 
 function start(): void {

dev/ts/shared/controls.ts

@@ -97,7 +97,7 @@ export function configureMousePointer(parameters: URLSearchParams): void {
 }
 
 export function configureControlsPanel(parameters: URLSearchParams): void {
-  const controlsPanelElement = document.getElementById('controls-panel');
+  const controlsPanelElement = document.querySelector('#controls-panel');
   if (parameters.get('showControlsPanel') === 'true') {
     controlsPanelElement.classList.remove('hidden');
   }

src/component/helpers/dom-utils.ts

@@ -21,5 +21,5 @@ export function htmlElement(element: string | HTMLElement): HTMLElement | null {
   if (element instanceof HTMLElement) {
     return element;
   }
-  return document.getElementById(element);
+  return document.querySelector(`#${element}`);
 }