migrate to Svelte 5, update all deps, switch valueComponent to snippet

.changeset/shaggy-gifts-search.md

@@ -0,0 +1,13 @@
+---
+'svelte-tree-view': major
+---
+
+migrate to Svelte 5, update all deps, switch valueComponent to snippet
+
+BREAKING:
+
+- incompatible with Svelte < 5
+- `valueComponent` is now `treeNode` snippet
+- `rootNode` snippet added
+- default styles not applied to `:root` anymore but `ul.svelte-tree-view`
+- changed `treeMap` from `Map` to `Record` to allow use of proxies

.github/actions/build-test/action.yml

@@ -16,7 +16,7 @@ runs:
 
     - name: Run tests with Cypress
       id: cypress
-      uses: cypress-io/github-action@v5
+      uses: cypress-io/github-action@v6
       with:
         browser: chrome
         cache-key: ${{ runner.os }}-node-${{ matrix.node-version }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
@@ -28,15 +28,15 @@ runs:
         working-directory: ./packages/svelte-tree-view
 
     - name: Export screenshots (on failure only)
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       if: failure()
       with:
         name: cypress-screenshots
         path: ./packages/svelte-tree-view/cypress/screenshots
         retention-days: 7
 
     - name: Export screen recordings (on failure only)
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       if: failure()
       with:
         name: cypress-videos

.github/actions/pnpm/action.yml

@@ -6,7 +6,7 @@ runs:
   steps:
     - name: Install pnpm
       shell: bash
-      run: npm i pnpm -g
+      run: npm i pnpm@9 -g
 
     - name: Setup pnpm config
       shell: bash

.github/workflows/gh-pages.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [22.x]
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v3

.github/workflows/pull-request.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [22.x]
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v3

.github/workflows/version-publish.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [22.x]
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v3

.prettierrc

@@ -5,10 +5,16 @@
       "options": {
         "singleQuote": false
       }
+    },
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
     }
   ],
   "arrowParens": "avoid",
-  "plugins": ["prettier-plugin-svelte"],
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
   "printWidth": 100,
   "semi": false,
   "singleQuote": true,

README.md

@@ -61,13 +61,13 @@ To override default styles I suggest using child or element selector to get enou
   <TreeView />
 </div>
 
-<style>
+<style lang="postcss">
   .wrapper > :global(.svelte-tree-view) {
-    ...;
+    /* ... */
   }
   /* OR */
   :global(ul.svelte-tree-view) {
-    ...;
+    /* ... */
   }
 </style>
 ```

eslint.config.js

@@ -0,0 +1,41 @@
+import prettier from 'eslint-config-prettier'
+import { includeIgnoreFile, fixupConfigRules } from '@eslint/compat'
+import js from '@eslint/js'
+import svelte from 'eslint-plugin-svelte'
+import globals from 'globals'
+import { fileURLToPath } from 'node:url'
+import tseslint from 'typescript-eslint'
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url))
+
+/** @type {import('typescript-eslint').Config} */
+const config = [
+  includeIgnoreFile(gitignorePath),
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...svelte.configs.recommended,
+  prettier,
+  ...svelte.configs.prettier,
+  {
+    languageOptions: {
+      globals: { ...globals.browser, ...globals.node }
+    },
+    rules: {
+      // typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+      // see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+      'no-undef': 'off'
+    }
+  },
+  {
+    files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        extraFileExtensions: ['.svelte'],
+        parser: tseslint.parser
+      }
+    }
+  }
+]
+
+export default config

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "format": "pnpm pretty && pnpm lint",
     "pretty": "prettier --write \"**/*.+(js|jsx|json|html|css|less|scss|ts|tsx|svelte|yml|yaml|md|graphql|mdx)\" .",
-    "lint": "eslint --ignore-path .gitignore --fix --ext .js,.cjs,.ts,.tsx,.svelte .",
+    "lint": "prettier --check . && eslint --fix .",
     "start": "pnpm --filter svelte-tree-view build && pnpm --filter site dev",
     "site": "pnpm --filter site dev",
     "test": "pnpm --filter svelte-tree-view build && concurrently --kill-others 'pnpm --filter site dev' 'pnpm --filter svelte-tree-view test'",
@@ -14,25 +14,30 @@
     "prepare": "husky install"
   },
   "engines": {
-    "node": ">=16",
-    "pnpm": ">=7.0.0"
+    "node": ">=20",
+    "pnpm": ">=9.0.0"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.25.0",
-    "@typescript-eslint/eslint-plugin": "^5.40.1",
-    "@typescript-eslint/parser": "^5.40.1",
-    "concurrently": "^7.4.0",
-    "eslint": "^8.25.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^3.5.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "husky": "^8.0.1",
-    "prettier": "^2.7.1",
-    "prettier-plugin-svelte": "^2.8.0"
+    "@changesets/cli": "^2.29.5",
+    "@eslint/compat": "^1.3.1",
+    "@eslint/js": "^9.30.1",
+    "@typescript-eslint/eslint-plugin": "^8.35.1",
+    "@typescript-eslint/parser": "^8.35.1",
+    "concurrently": "^9.2.0",
+    "eslint": "^9.30.1",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.5.1",
+    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-svelte": "^3.10.1",
+    "globals": "^16.3.0",
+    "husky": "^9.1.7",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "prettier-plugin-tailwindcss": "^0.6.13",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.35.1",
+    "vite": "^7.0.2",
+    "vite-plugin-dts": "^4.5.4"
   }
 }

packages/site/package.json

@@ -3,27 +3,28 @@
   "version": "0.0.1",
   "private": true,
   "type": "module",
+  "imports": {
+    "#app.css": "./src/app.css"
+  },
   "homepage": "https://teemukoivisto.github.io/svelte-tree-view/",
   "scripts": {
-    "svelte-check": "svelte-check",
-    "dev": "svelte-kit sync && vite",
+    "dev": "vite dev --host",
     "build": "vite build",
     "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test": "cypress run --browser=chrome --config baseUrl=http://localhost:5185",
     "cy": "cypress"
-  },
+	},
   "devDependencies": {
-    "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "1.22.3",
-    "svelte": "^4.1.0",
-    "svelte-preprocess": "^5.0.4",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "2.22.2",
+    "@sveltejs/vite-plugin-svelte": "^5.1.0",
+    "@tailwindcss/vite": "^4.1.11",
+    "svelte": "^5.35.4",
+    "svelte-preprocess": "^6.0.3",
     "svelte-tree-view": "workspace:*",
-    "tslib": "^2.6.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.4"
-  },
-  "dependencies": {
-    "autoprefixer": "^10.4.14",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^4.1.11"
   }
 }

packages/site/src/tailwind.css → packages/site/src/app.css

@@ -1,5 +1,4 @@
-@tailwind base;
-@tailwind components;
+@import "tailwindcss";
 
 :root {
   --tree-view-base00: #363755;
@@ -25,8 +24,9 @@
   --tree-view-line-height: 1.1;
   --tree-view-key-margin-right: 0.5em; */
 
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
-    "Open Sans", "Helvetica Neue", sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
+    "Helvetica Neue", sans-serif;
 }
 
 body {
@@ -153,13 +153,11 @@ a:hover {
   background-color: var(--tree-view-base01);
   color: var(--tree-view-base0A);
 
-  @apply px-4 py-2 rounded transition-colors duration-100 tracking-wide text-base;
+  @apply rounded px-4 py-2 text-base tracking-wide transition-colors duration-100;
 }
 .btn:hover {
   background-color: var(--tree-view-base02);
 }
 .btn:focus {
-  @apply outline-none shadow;
+  @apply shadow outline-none;
 }
-
-@tailwind utilities;

packages/site/src/app.html

@@ -1,32 +1,17 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="description"
       content="svelte-tree-view is a Svelte library to render Javascript objects in a tree layout"
     />
     <title>svelte-tree-view</title>
-
-    <script>
-      try {
-        if (!('theme' in localStorage)) {
-          localStorage.theme = window.matchMedia('(prefers-color-scheme: dark)').matches
-            ? 'dark'
-            : 'light'
-        }
-
-        document.querySelector('html').classList.add(localStorage.theme)
-      } catch (e) {
-        console.error(e)
-      }
-    </script>
-
     %sveltekit.head%
   </head>
-
-  <body>
-    <div id="svelte">%sveltekit.body%</div>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>