eslint-plugin-svelte3 to eslint-plugin-svelte migration

.eslintrc.yml

@@ -1,28 +1,27 @@
-root: true
 env:
-  browser: true
   es2020: true
   node: true
-parser: '@typescript-eslint/parser'
-parserOptions:
-  sourceType: module
-  ecmaVersion: latest
-plugins: [svelte3, '@typescript-eslint']
+  browser: true
 extends:
+  - plugin:svelte/recommended
   - eslint:recommended
   - plugin:@typescript-eslint/recommended
 overrides:
   - files: ['*.svelte']
-    processor: svelte3/svelte3
-settings:
-  svelte3/typescript: true
+    parser: svelte-eslint-parser
+    parserOptions:
+      parser: '@typescript-eslint/parser'
 rules:
   indent: [error, 2, SwitchCase: 1]
   '@typescript-eslint/quotes': [error, backtick, avoidEscape: true]
   semi: [error, never]
   linebreak-style: [error, unix]
   no-console: [error, allow: [warn, error]]
   no-var: error
-  # allow triple slash for typescript file referencing https://git.io/JCeqO
-  spaced-comment: [error, always, { markers: [/] }]
   '@typescript-eslint/no-inferrable-types': off
+  '@typescript-eslint/no-unused-vars': [error, { argsIgnorePattern: ^_ }]
+  svelte/no-at-html-tags: off
+  no-inner-declarations: off
+ignorePatterns: [build, dist]
+globals:
+  $$Generic: readonly

.github/workflows/gh-pages.yml

@@ -8,5 +8,3 @@ on:
 jobs:
   build:
     uses: janosh/workflows/.github/workflows/nodejs-gh-pages.yml@main
-    with:
-      install-cmd: npm install --force

.github/workflows/test.yml

@@ -12,5 +12,3 @@ on:
 jobs:
   tests:
     uses: janosh/workflows/.github/workflows/npm-test-release.yml@main
-    with:
-      install-cmd: npm install --force

.pre-commit-config.yaml

@@ -36,18 +36,20 @@ repos:
         args: [--ignore-words-list, falsy]
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.42.0
+    rev: v8.43.0
     hooks:
       - id: eslint
         types: [file]
-        args: [--fix, --plugin, 'svelte3, @typescript-eslint']
+        args: [--fix]
         files: \.(js|ts|svelte)$
         additional_dependencies:
           - eslint
+          - svelte
           - typescript
-          - eslint-plugin-svelte3
+          - eslint-plugin-svelte
           - '@typescript-eslint/eslint-plugin'
           - '@typescript-eslint/parser'
+          - svelte-eslint-parser
 
   - repo: local
     hooks:

package.json

@@ -19,18 +19,18 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@sveltejs/kit": "^1.20.5",
+    "@sveltejs/kit": "^1.21.0",
     "highlight.js": "^11.8.0",
-    "svelte": "4.0.0"
+    "svelte": "4.0.1"
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^2.0.2",
     "@sveltejs/package": "^2.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.60.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
     "@vitest/coverage-v8": "^0.32.2",
-    "eslint": "^8.43.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint": "^8.44.0",
+    "eslint-plugin-svelte": "^2.32.2",
     "hastscript": "^7.2.0",
     "jsdom": "^22.1.0",
     "mdsvex": "^0.11.0",
@@ -43,7 +43,7 @@
     "svelte-multiselect": "^9.0.0",
     "svelte-preprocess": "^5.0.4",
     "svelte2tsx": "^0.6.16",
-    "typescript": "5.1.3",
+    "typescript": "5.1.6",
     "vite": "^4.3.9",
     "vitest": "^0.32.2"
   },

src/lib/CodeExample.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   // see svelte.config.js where this component is passed to mdsvexamples
-  import { CodeLinks, CopyButton, Icon } from '.'
+  import { CodeLinks, CopyButton, Icon } from '$lib'
 
   // src+meta are passed in by mdsvexamples
   export let src: string = `` // code fence content, sadly without indentation so we prefer node?.innerText below

src/lib/CopyButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { afterNavigate } from '$app/navigation'
-  import { CopyButton, Icon } from '.'
+  import { CopyButton, Icon } from '$lib'
 
   export let content: string = ``
   export let style: string | null = null

tests/Test2WayBind.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import { createEventDispatcher, SvelteComponent } from 'svelte'
+  import type { RadioButtons } from '$lib'
+  import { createEventDispatcher } from 'svelte'
 
-  export let component: typeof SvelteComponent
+  export let component: typeof RadioButtons
+  export let options: RadioButtons['options']
   export let selected: string | number | null = null
 
   const dispatch = createEventDispatcher()
   $: dispatch(`selected-changed`, { selected })
 </script>
 
-<svelte:component this={component} bind:selected {...$$restProps} />
+<svelte:component this={component} {options} bind:selected {...$$restProps} />