migrate to Svelte 5, update all deps, switch valueComponent to snippet (#19)

* initial update of root, site deps

* wip update components to svelte 5

* seems functional site

* update svelte-tree-view deps

* fix unit tests

* fix running cypress tests

* fix cypress tests

* refactor, remove jest-dom

* fix lint

* update TreeViewNode to svelte 5

* migrated TreeView with passing tests (FINALLY)

* remove RootNode, restore setting theme by props

* fix svelte:component into svelte 5

* wip

* working snippet based custom node

* add rootNode snippet prop

* move tree-view vars from :root to component

* switch treeMap from Map to Record to utilize proxies

* clean

* remove old DiffValue

* update github actions

* update actions

* add changeset

Author: TeemuKoivisto

.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

.eslintrc.json

@@ -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/build-test/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/actions/pnpm/action.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/gh-pages.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/pull-request.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

.github/workflows/version-publish.yml

@@ -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,

.prettierrc

@@ -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>
 ```

README.md

@@ -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