diff --git a/.changeset/shaggy-gifts-search.md b/.changeset/shaggy-gifts-search.md
new file mode 100644
index 0000000..d6618d7
--- /dev/null
+++ b/.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
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100755
index 18ca96e..0000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
- "root": true,
- "parser": "@typescript-eslint/parser",
- "plugins": ["svelte3", "@typescript-eslint", "eslint-plugin-import", "eslint-plugin-prettier"],
- "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
- "env": {
- "es6": true,
- "browser": true,
- "node": true
- },
- "overrides": [
- {
- "files": ["*.svelte"],
- "processor": "svelte3/svelte3"
- }
- ],
- "settings": {
- "svelte3/typescript": true
- },
- "rules": {
- "@typescript-eslint/explicit-function-return-type": 0,
- "@typescript-eslint/explicit-member-accessibility": 0,
- "@typescript-eslint/indent": 0,
- "@typescript-eslint/member-delimiter-style": 0,
- "@typescript-eslint/no-explicit-any": 0,
- "@typescript-eslint/explicit-module-boundary-types": "off",
- "@typescript-eslint/no-var-requires": 0,
- "@typescript-eslint/no-use-before-define": 0,
- "@typescript-eslint/no-unused-vars": [
- 2,
- {
- "argsIgnorePattern": "^_"
- }
- ],
- "no-console": [
- 2,
- {
- "allow": ["warn", "error"]
- }
- ]
- }
-}
diff --git a/.github/actions/build-test/action.yml b/.github/actions/build-test/action.yml
index b5b1681..b7d8299 100644
--- a/.github/actions/build-test/action.yml
+++ b/.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,7 +28,7 @@ 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
@@ -36,7 +36,7 @@ runs:
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
diff --git a/.github/actions/pnpm/action.yml b/.github/actions/pnpm/action.yml
index ce89746..1cead86 100644
--- a/.github/actions/pnpm/action.yml
+++ b/.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
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
index 35b2b8b..2d5211b 100644
--- a/.github/workflows/gh-pages.yml
+++ b/.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
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 48c4dde..dc8aeb9 100644
--- a/.github/workflows/pull-request.yml
+++ b/.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
diff --git a/.github/workflows/version-publish.yml b/.github/workflows/version-publish.yml
index 5b52b35..0b011d7 100644
--- a/.github/workflows/version-publish.yml
+++ b/.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
diff --git a/.prettierrc b/.prettierrc
index 882a42e..b983ba1 100644
--- a/.prettierrc
+++ b/.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,
diff --git a/README.md b/README.md
index 0051ed7..2617e04 100644
--- a/README.md
+++ b/README.md
@@ -61,13 +61,13 @@ To override default styles I suggest using child or element selector to get enou
-
```
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..59f84cf
--- /dev/null
+++ b/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
diff --git a/package.json b/package.json
index ff1b1df..482e163 100644
--- a/package.json
+++ b/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"
}
}
\ No newline at end of file
diff --git a/packages/site/package.json b/packages/site/package.json
index d97264c..c0e3e36 100644
--- a/packages/site/package.json
+++ b/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"
}
}
diff --git a/packages/site/postcss.config.cjs b/packages/site/postcss.config.cjs
deleted file mode 100644
index e62d868..0000000
--- a/packages/site/postcss.config.cjs
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
- plugins: {
- autoprefixer: {},
- tailwindcss: {}
- }
-}
diff --git a/packages/site/src/tailwind.css b/packages/site/src/app.css
similarity index 89%
rename from packages/site/src/tailwind.css
rename to packages/site/src/app.css
index 15701c8..6085c6a 100644
--- a/packages/site/src/tailwind.css
+++ b/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;
diff --git a/packages/site/src/app.html b/packages/site/src/app.html
index f33b594..63e5c22 100644
--- a/packages/site/src/app.html
+++ b/packages/site/src/app.html
@@ -1,32 +1,17 @@
-
+
+
svelte-tree-view
-
-
-
%sveltekit.head%
-
-
- %sveltekit.body%
+
+ %sveltekit.body%
diff --git a/packages/site/src/components/DiffValue.svelte b/packages/site/src/components/DiffValue.svelte
index 8edaf1c..bd5422d 100644
--- a/packages/site/src/components/DiffValue.svelte
+++ b/packages/site/src/components/DiffValue.svelte
@@ -1,9 +1,20 @@
-{#if Array.isArray(value)}
-
- {#if value.length === 1}
- {getValueString(value[0])}
- {:else if value.length === 2}
-
- {getValueString(value[0])}
- =>
- {getValueString(value[1])}
-
- {:else if value.length === 3 && value[1] === 0 && value[2] === 0}
- {getValueString(value[0])}
- {:else if value.length === 3 && value[2] === 2}
-
- {#each parseTextDiff(value[0]) as item}
- {#if item.delete}
- {item.delete}
- {:else if item.add}
- {item.add}
- {:else}
- {item.raw}
- {/if}
- {/each}
-
+
+ {#if hasChildren}
+
{/if}
-{:else}
- {defaultFormatter(value)}
+
+ {node.key}:
+
+
+ {#if Array.isArray(value)}
+
+ {#if value.length === 1}
+ {getValueString(value[0])}
+ {:else if value.length === 2}
+
+ {getValueString(value[0])}
+ =>
+ {getValueString(value[1])}
+
+ {:else if value.length === 3 && value[1] === 0 && value[2] === 0}
+ {getValueString(value[0])}
+ {:else if value.length === 3 && value[2] === 2}
+
+ {#each parseTextDiff(value[0]) as item}
+ {#if item.delete}
+ {item.delete}
+ {:else if item.add}
+ {item.add}
+ {:else}
+ {item.raw}
+ {/if}
+ {/each}
+
+ {/if}
+ {:else}
+ {formatValue(value, node)}
+ {/if}
+
+
+ {#if $propsObj.showLogButton}
+
+ {/if}
+ {#if $propsObj.showCopyButton}
+
+ {/if}
+
+
+{#if descend}
+
+
+ {#each node.children as child}
+
+ {/each}
+
+
{/if}
-
diff --git a/packages/site/src/components/PropsForm.svelte b/packages/site/src/components/PropsForm.svelte
index dff4d02..fc91ac5 100644
--- a/packages/site/src/components/PropsForm.svelte
+++ b/packages/site/src/components/PropsForm.svelte
@@ -1,64 +1,69 @@
-