FSR-64: fix lint errors

- rewrite license checker to be in esm
- lint fixes:
    - {} -> object or unknown
    - let -> const where possible
    - ts-ignore -> ts-expect-error
- fix consola type in global window

FSR-64 (Update to Eslint 9)

Author: Robin Offel

demo/src/components/FileExplorer.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { h, onMounted, reactive, ref } from "vue";
-import type {
-  FileExplorerContextMenu,
-  FileExplorerItem,
-  // @ts-ignore
-} from "webapps-common/ui/components/FileExplorer/types";
 
-import { Button, Checkbox, Dropdown, FileExplorer } from "@knime/components";
+import {
+  Button,
+  Checkbox,
+  Dropdown,
+  FileExplorer,
+  type FileExplorerContextMenu,
+  type FileExplorerItem,
+} from "@knime/components";
 
 const items = [
   {
@@ -143,7 +145,7 @@ const customContextMenuComponent = ({
 }) => {
   return {
     render(): any {
-      // @ts-expect-error
+      // @ts-expect-error Property 'items' does not exist on type '{ render(): any; computed: { items(): any[]; }; }'
       const options = this.items.map((item: any) => {
         const onClick = () => {
           if (item.id === "custom-option") {

demo/src/components/ToastService.vue

@@ -5,7 +5,6 @@ import { rfcErrors } from "@knime/hub-features";
 import Interactive from "@knime/styles/img/icons/interactive.svg";
 
 import CodeExample from "./demo/CodeExample.vue";
-// @ts-ignore
 
 // import toastServiceCode from "@knime/components/toastService?raw";
 // import typesCode from "@knime/components/types?raw";

demo/vite.config.ts

@@ -4,7 +4,6 @@ import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import svgLoader from "vite-svg-loader";
 
-// @ts-ignore
 import { svgoConfig } from "@knime/styles/config/svgo.config";
 
 // https://vitejs.dev/config/

packages/components/src/components/Avatar/AvatarImagePlaceholder.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-// @ts-ignore No types available for module
+// @ts-expect-error No types available for module
 import ColorHash from "color-hash/dist/esm";
 
 import {

packages/components/src/components/Avatar/__tests__/Avatar.test.ts

@@ -45,5 +45,6 @@ describe("Avatar.vue", () => {
       },
     });
     wrapper.getComponent(AvatarImagePlaceholder);
+    expect(wrapper.findComponent(AvatarImagePlaceholder).exists()).toBe(true);
   });
 });

packages/components/src/components/Breadcrumb/Breadcrumb.vue

@@ -68,7 +68,6 @@ export default {
     },
   },
   emits: {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     "click-item": (_item: BreadcrumbItem) => true,
   },
   computed: {

packages/components/src/components/Breadcrumb/__tests__/Breadcrumb.test.js

@@ -37,7 +37,6 @@ describe("Breadcrumb.vue", () => {
     });
     let renderedItems = wrapper.findAll("li > *");
 
-    /* eslint-disable no-magic-numbers */
     expect(renderedItems[0].element.tagName).toBe("SPAN");
     expect(renderedItems[2].element.tagName).toBe("A");
     expect(renderedItems[4].element.tagName).toBe("SPAN");
@@ -61,7 +60,6 @@ describe("Breadcrumb.vue", () => {
       }
     }
     expect(arrows).toBe(3);
-    /* eslint-enable no-magic-numbers */
   });
 
   it.each([

packages/components/src/components/DonutChart/DonutChart.vue

@@ -86,14 +86,17 @@ export default {
         : this.secondaryValue;
     },
     clippedValue() {
-      let value = Math.max(0, this.primarySegment.value);
+      const value = Math.max(0, this.primarySegment.value);
       return this.acceptValuesLargerThanMax
         ? value
         : Math.min(value, this.maxValue);
     },
     secondaryClippedValue() {
       // calculate secondary value including the first value (to overlap the two svgs)
-      let value = Math.max(0, this.secondarySegment.value + this.clippedValue);
+      const value = Math.max(
+        0,
+        this.secondarySegment.value + this.clippedValue,
+      );
       return this.acceptValuesLargerThanMax
         ? value
         : Math.min(value, this.maxValue);
@@ -137,11 +140,11 @@ export default {
     },
     labelStyle() {
       // simple approach to account for larger numbers as the label inside the donut hole
-      let valueExceedsLarge = this.clippedValue > this.regularLabelMaxValue;
-      let maxValueExceedsLarge =
+      const valueExceedsLarge = this.clippedValue > this.regularLabelMaxValue;
+      const maxValueExceedsLarge =
         Number.isFinite(this.maxValue) &&
         this.maxValue > this.regularLabelMaxValue;
-      let size =
+      const size =
         valueExceedsLarge || maxValueExceedsLarge
           ? this.smallLabelFontSize
           : this.regularLabelFontSize;

packages/components/src/components/FileExplorer/components/FileExplorer.vue

@@ -321,7 +321,7 @@ const forwardEmit = (
     return;
   }
 
-  // @ts-expect-error
+  // @ts-expect-error No overload matches this call.
   emit(eventName, eventPayload);
 };
 /** DRAGGING */
@@ -421,7 +421,7 @@ const openContextMenu = (
     contextMenuPos.value.y = event.clientY;
   } else {
     const rect = element.getBoundingClientRect();
-    // eslint-disable-next-line no-magic-numbers
+
     contextMenuPos.value.x = rect.x + rect.width * 0.8;
     contextMenuPos.value.y = rect.y + rect.height / 2;
   }

packages/components/src/components/FileExplorer/components/__tests__/FileExplorer.test.ts

@@ -16,7 +16,7 @@ import FileExplorerContextMenu from "../FileExplorerContextMenu.vue";
 import FileExplorerItemComp from "../FileExplorerItem.vue";
 
 vi.mock("motion", () => ({
-  // @ts-ignore
+  // @ts-expect-error implicit any
   animate: (_1, _2, { onComplete }) => {
     onComplete();
   },
@@ -101,7 +101,7 @@ describe("FileExplorer.vue", () => {
   ];
 
   type DoMountOptions = {
-    props?: Props | {};
+    props?: Props | object;
     customSlots?: { contextMenu?: any; itemIcon?: any; itemContent?: any };
   };
 
@@ -602,7 +602,7 @@ describe("FileExplorer.vue", () => {
         expect.objectContaining({ onComplete: expect.any(Function) }),
       );
 
-      // @ts-ignore
+      // @ts-expect-error Object is possibly unknown
       const { onComplete } = wrapper.emitted("moveItems")[0][0];
 
       // mimic callback being triggered from outside listener

packages/components/src/components/FileExplorer/components/__tests__/FileExplorerContextMenu.test.ts

@@ -76,7 +76,7 @@ describe("FileExplorerContextMenu.vue", () => {
   });
 
   it("should set the popper offset accounting for the menu height", async () => {
-    // @ts-expect-error
+    // @ts-expect-error Type 'Mock<() => { top: number; left: number; height: number; }>' is not assignable to type '() => DOMRect'.
     defaultProps.anchor.element.getBoundingClientRect = vi.fn(() => ({
       top: 0,
       left: 10,
@@ -93,8 +93,8 @@ describe("FileExplorerContextMenu.vue", () => {
 
     await nextTick();
 
-    // @ts-expect-error
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // @ts-expect-error Property 'mock' does not exist on type
+
     const [_, __, options] = useFloating.mock.calls[0];
     expect(options.middleware.value[0]).toStrictEqual({
       crossAxis: 30,
@@ -118,7 +118,7 @@ describe("FileExplorerContextMenu.vue", () => {
   });
 
   it("should set the popper offset accounting distance to the window bottom", async () => {
-    // @ts-expect-error
+    // @ts-expect-error Type 'Mock<() => { top: number; left: number; height: number; }>' is not assignable to type '() => DOMRect'.
     defaultProps.anchor.element.getBoundingClientRect = vi.fn(() => ({
       top: 20,
       left: 10,
@@ -137,8 +137,8 @@ describe("FileExplorerContextMenu.vue", () => {
 
     await nextTick();
 
-    // @ts-expect-error
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // @ts-expect-error Property 'mock' does not exist on type
+
     const [_, __, options] = useFloating.mock.calls[0];
     expect(options.middleware.value[0]).toStrictEqual({
       crossAxis: 30,

packages/components/src/components/FileExplorer/composables/useTestUtils.ts

@@ -3,18 +3,18 @@ import { h } from "vue";
 import type { VueWrapper } from "@vue/test-utils";
 
 type IntersectionObserverMockType = {
-  // @ts-ignore
+  // @ts-expect-error Call signature, which lacks return-type annotation, implicitly has an 'any' return type
   (callback: (...args: any[]) => any);
   __trigger__: (isIntersecting: boolean) => void;
 };
 
-// @ts-ignore
+// @ts-expect-error Property '__trigger__' is missing in type '(this: any, callback: (...args: any[]) => any) => void' but required in type 'IntersectionObserverMockType'.
 export const MockIntersectionObserver: IntersectionObserverMockType =
   function MockIntersectionObserver(this: any, callback) {
     this.callbackRef = callback;
     this.element = null;
 
-    // @ts-ignore
+    // @ts-expect-error Property '__trigger__' does not exist on type '(this: any, callback: (...args: any[]) => any) => void'.
     MockIntersectionObserver.__trigger__ = (isIntersecting = false) => {
       this.callbackRef([{ isIntersecting }]);
     };

packages/components/src/components/FileExplorer/utils/__tests__/dragGhostHelpers.test.ts

@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from "vitest";
 import { createDragGhosts } from "../dragGhostHelpers";
 
 vi.mock("motion", () => ({
-  // @ts-ignore
+  // @ts-expect-error implicit any
   animate: (_1, _2, { onComplete }) => {
     onComplete();
   },
@@ -34,7 +34,7 @@ describe("dragGhostHelpers", () => {
     const dataTransfer = {
       setDragImage: vi.fn(),
     };
-    // @ts-expect-error
+    // @ts-expect-error Cannot assign to 'dataTransfer' because it is a read-only property
     dragStartEvent.dataTransfer = dataTransfer;
     dragTarget.dispatchEvent(dragStartEvent);
 

packages/components/src/components/FileExplorer/utils/dragGhostHelpers.ts

@@ -1,6 +1,5 @@
 import { animate } from "motion";
 
-// @ts-ignore
 import * as knimeColors from "@knime/styles/colors/knimeColors";
 
 const COLORS = {
@@ -22,7 +21,7 @@ const applyStyles = (
   styles: Partial<CSSStyleDeclaration>,
 ): void => {
   Object.entries(styles).forEach(([property, value]) => {
-    // @ts-ignore
+    // @ts-expect-error Element implicitly has an 'any' type because index expression is not of type 'number'.
     element.style[property] = value;
   });
 };
@@ -274,7 +273,7 @@ export const createDragGhosts = ({
     const { ghost } = createGhostElement({
       textContent,
       target: targetEl,
-      // eslint-disable-next-line no-magic-numbers
+
       // Don't add shadows when there are more than 2 elements to ghost, since it makes the shadow too dark
       addShadow: index < 2,
     });
@@ -313,7 +312,7 @@ export const createDragGhosts = ({
       }
       try {
         document.body.removeChild(ghost);
-      } catch (error) {
+      } catch (_error) {
         // mute exception trying to delete ghost.
         // this could happen if the `removeGhosts` function is called more than once
         // in which case it would result in an exception when attempting to remove

packages/components/src/components/FileLink/FileLink.vue

@@ -35,7 +35,7 @@ export default {
   },
   computed: {
     icon() {
-      let candidate = `${this.fileExt}Icon`;
+      const candidate = `${this.fileExt}Icon`;
       return this.fileExt && this.$options.components[candidate]
         ? candidate
         : "fileIcon";

packages/components/src/components/Messages/__tests__/Messages.test.js

@@ -155,7 +155,6 @@ describe("Messages.vue", () => {
       expect(messageComponents[i].find("a").exists()).toBe(false);
     }
 
-    // eslint-disable-next-line no-magic-numbers
     let link = messageComponents[3].find("a");
     expect(link.exists()).toBe(true);
     expect(link.text()).toBe("Linked text.");
@@ -182,7 +181,6 @@ describe("Messages.vue", () => {
       );
     }
 
-    // eslint-disable-next-line no-magic-numbers
     let link = messageComponents[3].findComponent(RouterLinkStub);
     expect(link.exists()).toBe(true);
     expect(link.text()).toBe("Linked text.");

packages/components/src/components/OpenSourceCredits/OpenSourceCredits.vue

@@ -54,7 +54,7 @@ export default {
   },
   computed: {
     displayPackages() {
-      let allUniquePackages = [];
+      const allUniquePackages = [];
 
       this.packages.concat(this.additionalPackages).forEach((pkg) => {
         const alreadyExists = allUniquePackages.some(
@@ -78,7 +78,7 @@ export default {
   },
   methods: {
     toggleDetails(e) {
-      let expanded = e.target.getAttribute("aria-expanded") === "true";
+      const expanded = e.target.getAttribute("aria-expanded") === "true";
       e.target.setAttribute("aria-expanded", (!expanded).toString());
       e.target.parentElement.parentElement.classList[
         expanded ? "remove" : "add"

packages/components/src/components/StyleListItem/__tests__/StyledListItem.test.js

@@ -1,5 +1,3 @@
-/* eslint-disable max-lines */
-/* eslint-disable no-magic-numbers */
 import { describe, expect, it, vi } from "vitest";
 import { mount } from "@vue/test-utils";
 

packages/components/src/components/SubMenu/SubMenu.vue

@@ -124,7 +124,7 @@ export default {
     const expanded = ref(false);
     const shadowRoot = inject<ShadowRoot | null>("shadowRoot", null);
 
-    // @ts-expect-error - force cast shadowRoot into HTMLElement
+    // @ts-expect-error No overload matches this call.
     const clippingBoundary = computed<HTMLElement>(
       () => shadowRoot || document?.body,
     );
@@ -180,8 +180,7 @@ export default {
       this.expanded = !this.expanded;
 
       const toggleCallback = this.expanded
-        ? // eslint-disable-next-line brace-style
-          () => {
+        ? () => {
             this.expanded = false;
           }
         : () => {};

packages/components/src/components/SvgWithTitle/svgWithTitle.ts

@@ -30,7 +30,7 @@ export default (SvgComponent: ComponentInstance<any>, title: string) => ({
     const renderedComponent = SvgComponent.render({}, []);
 
     const titleEl = h("title", title);
-    // @ts-ignore
+    // @ts-expect-error Property 'ns' does not exist on type 'VNode<RendererNode, RendererElement, { [key: string]: any; }>'.
     titleEl.ns = "svg";
 
     renderedComponent.children.unshift(titleEl);

packages/components/src/components/Toast/toastService.ts

@@ -183,7 +183,7 @@ export const useToasts = ({
   if (!serviceSymbol && !propertyName) {
     try {
       return useToastsFromSymbol(defaultToastServiceSymbol);
-    } catch (error) {
+    } catch (_error) {
       return useToastsFromGlobalProperty(defaultGlobalPropertyName);
     }
   }

packages/components/src/components/base/MenuItem/__tests__/BaseMenuItems.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable max-nested-callbacks */
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { RouterLinkStub, mount } from "@vue/test-utils";
 

packages/components/src/components/forms/Checkbox/Checkbox.vue

@@ -48,7 +48,7 @@ export default {
        * @event input
        * @type {Boolean}
        */
-      let { checked } = $event.target;
+      const { checked } = $event.target;
       consola.trace("Checkbox value changed to", checked);
       this.$emit("update:modelValue", checked);
     },

packages/components/src/components/forms/Checkboxes/Checkboxes.vue

@@ -59,7 +59,7 @@ export default {
   emits: ["update:modelValue"],
   methods: {
     validate() {
-      let isValid = !this.possibleValues.some((x) => x.invalid);
+      const isValid = !this.possibleValues.some((x) => x.invalid);
       return {
         isValid,
         errorMessage: isValid

packages/components/src/components/forms/ComboBox/ComboBox.vue

@@ -96,7 +96,6 @@ export default defineComponent({
   },
 
   emits: {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     "update:modelValue": (_payload: Array<Id>) => true,
   },