Update to ESLint 9

eslint.config.js

@@ -0,0 +1,32 @@
+import js from "@eslint/js";
+import ts from "typescript-eslint";
+import svelte from "eslint-plugin-svelte";
+import prettier from "eslint-config-prettier";
+import globals from "globals";
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...svelte.configs["flat/recommended"],
+  prettier,
+  ...svelte.configs["flat/prettier"],
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+  {
+    files: ["**/*.svelte"],
+    languageOptions: {
+      parserOptions: {
+        parser: ts.parser,
+      },
+    },
+    rules: {
+      "svelte/no-inline-styles": "error",
+    },
+  },
+];

package.json

@@ -31,7 +31,7 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test": "vitest --typecheck --coverage.enabled",
-    "lint": "prettier --check . && eslint --ignore-path .gitignore .",
+    "lint": "prettier --check . && eslint src test",
     "format": "prettier --write ."
   },
   "type": "module",
@@ -55,29 +55,29 @@
   },
   "devDependencies": {
     "@cweili/fa-test-util": "^1.0.0",
-    "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.0.6",
-    "@sveltejs/package": "^2.2.4",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
-    "@testing-library/svelte": "^4.0.5",
-    "@typescript-eslint/eslint-plugin": "^6.15.0",
-    "@typescript-eslint/parser": "^6.15.0",
-    "@vitest/coverage-v8": "^1.1.0",
+    "@sveltejs/adapter-static": "^3.0.5",
+    "@sveltejs/kit": "^2.5.28",
+    "@sveltejs/package": "^2.3.5",
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@testing-library/svelte": "^5.2.1",
+    "@types/eslint": "^9.6.1",
+    "@vitest/coverage-v8": "^2.1.1",
     "bootstrap": "^5.3.2",
-    "eslint": "^8.56.0",
+    "eslint": "^9.11.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.35.1",
+    "eslint-plugin-svelte": "^2.44.0",
+    "globals": "^15.9.0",
     "highlight.js": "^11.9.0",
-    "jsdom": "^23.0.1",
-    "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
-    "publint": "^0.2.6",
-    "sass": "^1.69.5",
-    "svelte": "^4.2.8",
-    "svelte-check": "^3.6.2",
-    "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10",
-    "vitest": "^1.1.0"
+    "jsdom": "^25.0.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.6",
+    "publint": "^0.2.11",
+    "sass": "1.77.6",
+    "svelte": "^4.2.19",
+    "svelte-check": "^4.0.2",
+    "typescript": "5.5",
+    "typescript-eslint": "^8.6.0",
+    "vite": "^5.4.7",
+    "vitest": "^2.1.1"
   }
 }

src/lib/fa-layers-text.svelte

@@ -16,10 +16,17 @@
   export let flip: FlipDir | undefined = undefined;
 
   let containerElement: HTMLElement;
-  $: containerElement && size && setCustomFontSize(containerElement, size);
-  $: containerElement && color && (containerElement.style.color = color);
+
   $: transform = getTransform(scale, translateX, translateY, rotate, flip, 1, "em", "deg");
-  $: containerElement && transform && (containerElement.style.transform = transform);
+  $: if (containerElement) {
+    containerElement.style.transform = transform;
+  }
+  $: if (containerElement && size) {
+    setCustomFontSize(containerElement, size);
+  }
+  $: if (containerElement && color) {
+    containerElement.style.color = color;
+  }
 </script>
 
 <span {id} class="svelte-fa-layers-text {clazz}">

src/lib/fa-layers.svelte

@@ -10,7 +10,9 @@
   export let pull: PullDir | undefined = undefined;
 
   let containerElement: HTMLElement;
-  $: containerElement && size && setCustomFontSize(containerElement, size);
+  $: if (containerElement && size) {
+    setCustomFontSize(containerElement, size);
+  }
 </script>
 
 <!-- eslint-disable svelte/no-inline-styles -- Only styles passed to this component should be included -->

src/lib/fa.svelte

@@ -33,7 +33,9 @@
   export let swapOpacity = false;
 
   let svgElement: HTMLElement | SVGElement;
-  $: svgElement && size && setCustomFontSize(svgElement, size);
+  $: if (svgElement && size) {
+    setCustomFontSize(svgElement, size);
+  }
 
   $: i = (icon && icon.icon) || [0, 0, "", [], ""];
 

test/basic.test.ts

@@ -1,6 +1,5 @@
 import type { ComponentProps } from "svelte";
 import { describe, expect, test, afterEach } from "vitest";
-// @ts-expect-error No typings available
 import { fasFlag, fasInfo } from "@cweili/fa-test-util";
 import { render, screen, cleanup } from "@testing-library/svelte";
 import Fa from "../src/lib/index.js";
@@ -205,6 +204,7 @@ test("title", async () => {
   });
 
   const tag = await screen.findByText(title);
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
   expect(tag).to.exist;
   // For backward compatibility with SVG 1.1, according to MDN
   expect(getFa().querySelector(":first-child")).toBe(tag);

test/duotone.test.ts

@@ -1,6 +1,5 @@
 import type { ComponentProps } from "svelte";
 import { expect, test, afterEach } from "vitest";
-// @ts-expect-error No typings available
 import { fasFlag, fadFlag, fadInfo } from "@cweili/fa-test-util";
 import { render, screen, cleanup } from "@testing-library/svelte";
 import Fa from "../src/lib/index.js";