chore: lint the new SDKs with their framework eslint plugins

Add eslint-plugin-solid, eslint-plugin-svelte and eslint-plugin-qwik to the
respective packages, matching React's framework-linting depth. Qwik enables
type-aware linting for src and keeps a justified no-use-visible-task disable on
the event-wiring task; Svelte lints .svelte with the TS sub-parser.

Author: mridang

packages/sdk-qwik/eslint.config.js

@@ -6,6 +6,7 @@ import prettierConfig from 'eslint-config-prettier';
 import importPlugin from 'eslint-plugin-import';
 import perfectionistPlugin from 'eslint-plugin-perfectionist';
 import prettierPlugin from 'eslint-plugin-prettier';
+import qwikPlugin from 'eslint-plugin-qwik';
 import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
@@ -47,6 +48,19 @@ export default tseslint.config(
       ],
     },
   },
+  {
+    // Qwik rules cover the component source; `valid-lexical-scope` needs
+    // type-aware linting, so enable the project service for src files only.
+    files: ['src/**/*.{ts,tsx}'],
+    plugins: { qwik: qwikPlugin.qwikEslint9Plugin },
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    rules: qwikPlugin.configs.recommended.rules,
+  },
   {
     files: ['**/*.{test,spec}.{ts,tsx}', '**/__tests__/**/*.{ts,tsx}'],
     rules: { '@typescript-eslint/no-non-null-assertion': 'off' },

packages/sdk-qwik/package.json

@@ -55,6 +55,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-perfectionist": "^4.0.0",
     "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-qwik": "^1.19.0",
     "jsdom": "catalog:",
     "prettier": "^3.0.0",
     "typescript": "^5.7.3",

packages/sdk-qwik/src/index.tsx

@@ -44,6 +44,9 @@ export interface ZitadelLoginProps {
 
 export const ZitadelLogin = component$<ZitadelLoginProps>((props) => {
   const host = useSignal<HTMLElement>();
+  // Wiring native listeners on a third-party custom element requires the DOM
+  // post-mount; `useOn` does not catch these programmatic events.
+  // eslint-disable-next-line qwik/no-use-visible-task
   useVisibleTask$(({ track, cleanup }) => {
     const el = track(() => host.value);
     if (!el) return;
@@ -81,6 +84,8 @@ export interface ZitadelLogoutProps {
 
 export const ZitadelLogout = component$<ZitadelLogoutProps>((props) => {
   const host = useSignal<HTMLElement>();
+  // Client-only registration of the (browser-only Lit) components.
+  // eslint-disable-next-line qwik/no-use-visible-task
   useVisibleTask$(({ track }) => {
     const el = track(() => host.value);
     if (el) void import('@zitadel/components');

packages/sdk-solid/eslint.config.js

@@ -6,6 +6,7 @@ import prettierConfig from 'eslint-config-prettier';
 import importPlugin from 'eslint-plugin-import';
 import perfectionistPlugin from 'eslint-plugin-perfectionist';
 import prettierPlugin from 'eslint-plugin-prettier';
+import solid from 'eslint-plugin-solid/configs/typescript';
 import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
@@ -47,6 +48,10 @@ export default tseslint.config(
       ],
     },
   },
+  {
+    ...solid,
+    files: ['**/*.{tsx,jsx}'],
+  },
   {
     files: ['**/*.{test,spec}.{ts,tsx}', '**/__tests__/**/*.{ts,tsx}'],
     rules: { '@typescript-eslint/no-non-null-assertion': 'off' },

packages/sdk-solid/package.json

@@ -52,6 +52,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-perfectionist": "^4.0.0",
     "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-solid": "^0.14.5",
     "jsdom": "catalog:",
     "prettier": "^3.0.0",
     "solid-js": "^1.9.12",

packages/sdk-svelte/eslint.config.js

@@ -6,13 +6,14 @@ import prettierConfig from 'eslint-config-prettier';
 import importPlugin from 'eslint-plugin-import';
 import perfectionistPlugin from 'eslint-plugin-perfectionist';
 import prettierPlugin from 'eslint-plugin-prettier';
+import sveltePlugin from 'eslint-plugin-svelte';
 import tseslint from 'typescript-eslint';
 
-// `.svelte` files are type-checked and linted by `svelte-check` (the `check`
-// script) — Svelte's first-party tool — so ESLint here covers the `.ts`/`.js`
-// surface, mirroring the hardened rules of the other SPA SDKs.
+// `.svelte` files are linted by eslint-plugin-svelte (and type-checked by
+// `svelte-check`, the `check` script); ESLint also covers the `.ts`/`.js`
+// surface with the hardened rules shared across the SPA SDKs.
 export default tseslint.config(
-  { ignores: ['dist/**', 'node_modules/**', '.svelte-kit/**', '**/*.svelte'] },
+  { ignores: ['dist/**', 'node_modules/**', '.svelte-kit/**'] },
   {
     ...eslint.configs.recommended,
     files: ['**/*.{ts,js,mjs,cjs}'],
@@ -52,6 +53,17 @@ export default tseslint.config(
       ],
     },
   },
+  // Scope eslint-plugin-svelte strictly to `.svelte` files so its rules
+  // (e.g. comment-directive) never run on `.ts`/`.md` without svelte context.
+  ...sveltePlugin.configs['flat/recommended'].map((c) => ({
+    ...c,
+    files: ['**/*.svelte'],
+  })),
+  {
+    // Parse `<script lang="ts">` blocks with the TypeScript parser.
+    files: ['**/*.svelte'],
+    languageOptions: { parserOptions: { parser: tseslint.parser } },
+  },
   {
     files: ['**/*.{test,spec}.{ts,tsx}', '**/__tests__/**/*.{ts,tsx}'],
     rules: { '@typescript-eslint/no-non-null-assertion': 'off' },

packages/sdk-svelte/package.json

@@ -54,6 +54,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-perfectionist": "^4.0.0",
     "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-svelte": "^3.0.0",
     "jsdom": "catalog:",
     "prettier": "^3.0.0",
     "svelte": "^5.0.0",