From daac158bad90a02fcc20fb2bb6ed2652df9d1d0e Mon Sep 17 00:00:00 2001 From: Teemu Koivisto Date: Tue, 8 Jul 2025 00:25:36 +0300 Subject: [PATCH 01/23] initial update of root, site deps --- .prettierrc | 8 +- package.json | 43 +- packages/site/package.json | 33 +- packages/site/postcss.config.cjs | 6 - packages/site/src/{tailwind.css => app.css} | 14 +- packages/site/src/app.html | 23 +- packages/site/src/components/DiffValue.svelte | 4 +- packages/site/src/components/PropsForm.svelte | 26 +- packages/site/src/routes/+layout.svelte | 8 +- packages/site/src/routes/+page.svelte | 14 +- packages/site/svelte.config.js | 36 +- packages/site/tailwind.config.cjs | 14 - packages/site/tsconfig.json | 38 +- packages/site/vite.config.js | 9 +- packages/svelte-tree-view/package.json | 3 - packages/svelte-tree-view/src/app.html | 2 +- packages/vite-site/index.html | 2 +- pnpm-lock.yaml | 9383 ++++++++++------- 18 files changed, 5599 insertions(+), 4067 deletions(-) delete mode 100644 packages/site/postcss.config.cjs rename packages/site/src/{tailwind.css => app.css} (89%) delete mode 100644 packages/site/tailwind.config.cjs 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/package.json b/package.json index ff1b1df..37e9b4c 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..34c2c6c 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", - "build": "vite build", - "preview": "vite preview", + "dev": "vite dev", + "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..8e92cc7 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..f60b0c4 100644 --- a/packages/site/src/components/DiffValue.svelte +++ b/packages/site/src/components/DiffValue.svelte @@ -64,7 +64,9 @@ {defaultFormatter(value)} {/if} - ``` 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/packages/site/src/utils/parser.ts b/packages/site/src/utils/parser.ts index 10d5e19..8e8e6e9 100644 --- a/packages/site/src/utils/parser.ts +++ b/packages/site/src/utils/parser.ts @@ -12,7 +12,7 @@ export const parseRecursionOpts = ( testNode: any ): Record | undefined => { try { - let parsed = new Function(`return ${str}`)() + const parsed = new Function(`return ${str}`)() if (parsed && typeof parsed === 'object') { parsed.isCircularNode(testNode, new Map()) parsed.shouldExpandNode(testNode) @@ -28,7 +28,7 @@ export const parseValueFormatter = ( testNode: any ): ((val: any, n: TreeNode) => string | undefined) | undefined => { try { - let parsed = new Function(`return ${str}`)() + const parsed = new Function(`return ${str}`)() if (typeof parsed === 'function') { parsed(testNode.value, testNode) return parsed diff --git a/packages/svelte-tree-view/cypress/support/index.d.ts b/packages/svelte-tree-view/cypress/support/index.d.ts index 2d87a16..9f6b26e 100644 --- a/packages/svelte-tree-view/cypress/support/index.d.ts +++ b/packages/svelte-tree-view/cypress/support/index.d.ts @@ -1,4 +1,3 @@ -// eslint-disable-next-line @typescript-eslint/triple-slash-reference /// declare namespace Cypress { diff --git a/packages/svelte-tree-view/src/lib/__tests__/generateObj.ts b/packages/svelte-tree-view/src/lib/__tests__/generateObj.ts index 6246111..9203ab5 100644 --- a/packages/svelte-tree-view/src/lib/__tests__/generateObj.ts +++ b/packages/svelte-tree-view/src/lib/__tests__/generateObj.ts @@ -15,7 +15,6 @@ function* valueGenerator() { break case 3: yield () => { - // eslint-disable-next-line no-console console.log('hello world') } break From c0acbb5a231b9293398922642a4a3360821add2b Mon Sep 17 00:00:00 2001 From: Teemu Koivisto Date: Thu, 10 Jul 2025 20:01:29 +0300 Subject: [PATCH 10/23] update TreeViewNode to svelte 5 --- .../src/lib/TreeViewNode.svelte | 66 +++++++++---------- .../svelte-tree-view/src/lib/stores/props.ts | 4 +- 2 files changed, 32 insertions(+), 38 deletions(-) diff --git a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte index 9ff1caf..215341e 100644 --- a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte +++ b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte @@ -1,39 +1,35 @@ + +
    + {#each $rootNode.children as child} + + {/each} +
+ + diff --git a/packages/svelte-tree-view/src/lib/TreeView.svelte b/packages/svelte-tree-view/src/lib/TreeView.svelte index 6edc131..9637ebd 100644 --- a/packages/svelte-tree-view/src/lib/TreeView.svelte +++ b/packages/svelte-tree-view/src/lib/TreeView.svelte @@ -1,129 +1,91 @@ -
    - {#each $rootNode.children as child} - - {/each} -
+ // $effect(() => { + // const newRecOpts = untrack(() => recursionOpts) + // treeStore.update( + // untrack(() => data), + // newRecOpts, + // $currentRecOpts?.shouldExpandNode !== newRecOpts.shouldExpandNode + // ) + // }) + - + diff --git a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte index 215341e..f278d7c 100644 --- a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte +++ b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte @@ -46,7 +46,6 @@ } function handleToggleCollapse() { if (hasChildren) { - console.log(`collapse! ${node.id}`) treeStore.toggleCollapse(node.id) } else if (node.circularOfId) { treeStore.expandAllNodesToNode(node.circularOfId) diff --git a/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap index 863a900..a910bd3 100644 --- a/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap +++ b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap @@ -47,7 +47,6 @@ exports[`TreeView > should render 1`] = `
    -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 0 + number @@ -113,8 +110,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 22 + number @@ -283,8 +270,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - -39.97877 + number @@ -624,8 +591,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - -61.667911 + number @@ -658,8 +623,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
      -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = ` -
  • - -
  • should render 1`] = `
      -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 0 + number @@ -1064,8 +1009,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • - -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 1 + number @@ -1180,8 +1119,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • - -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 2 + number @@ -1296,8 +1229,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • -
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` -
@@ -1456,7 +1380,6 @@ exports[`TreeView > should render 1`] = `
    -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 1 + number @@ -1522,8 +1443,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 29 + number @@ -1692,8 +1603,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - -73.399929 + number @@ -2033,8 +1924,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 55.693187 + number @@ -2067,8 +1956,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
      -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = ` -
  • - -
  • should render 1`] = `
      -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 0 + number @@ -2473,8 +2342,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • - -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 1 + number @@ -2589,8 +2452,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • - -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 2 + number @@ -2705,8 +2562,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • -
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` -
@@ -2865,7 +2713,6 @@ exports[`TreeView > should render 1`] = `
    -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 2 + number @@ -2931,8 +2776,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 27 + number @@ -3101,8 +2936,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - -60.824874 + number @@ -3442,8 +3257,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - -22.249243 + number @@ -3476,8 +3289,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
      -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = ` -
  • - -
  • should render 1`] = `
      -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 0 + number @@ -3882,8 +3675,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • - -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 1 + number @@ -3998,8 +3785,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • - -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 2 + number @@ -4114,8 +3895,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • -
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` -
@@ -4274,7 +4046,6 @@ exports[`TreeView > should render 1`] = `
    -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 3 + number @@ -4340,8 +4109,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 20 + number @@ -4510,8 +4269,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - -60.058287 + number @@ -4851,8 +4590,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 88.480295 + number @@ -4885,8 +4622,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
      -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = ` -
  • - -
  • should render 1`] = `
      -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 0 + number @@ -5291,8 +5008,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • - -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 1 + number @@ -5407,8 +5118,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • - -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 2 + number @@ -5523,8 +5228,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • -
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` -
@@ -5683,7 +5379,6 @@ exports[`TreeView > should render 1`] = `
    -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 4 + number @@ -5749,8 +5442,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 26 + number @@ -5919,8 +5602,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 14.786267 + number @@ -6260,8 +5923,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - -28.163592 + number @@ -6294,8 +5955,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
      -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = ` -
  • - -
  • should render 1`] = `
      -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 0 + number @@ -6700,8 +6341,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • - -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 1 + number @@ -6816,8 +6451,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • - -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 2 + number @@ -6932,8 +6561,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • -
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` -
@@ -7092,7 +6712,6 @@ exports[`TreeView > should render 1`] = `
    -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 5 + number @@ -7158,8 +6775,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 20 + number @@ -7328,8 +6935,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - -74.812367 + number @@ -7669,8 +7256,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = ` data-type="number" role="presentation" > - 161.825889 + number @@ -7703,8 +7288,6 @@ exports[`TreeView > should render 1`] = `
  • - -
  • should render 1`] = `
      -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = `
    • - -
    • should render 1`] = ` -
  • - -
  • should render 1`] = `
      -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 0 + number @@ -8109,8 +7674,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • - -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 1 + number @@ -8225,8 +7784,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • - -
    • should render 1`] = `
        -
      • should render 1`] = ` data-type="number" role="presentation" > - 2 + number @@ -8341,8 +7894,6 @@ exports[`TreeView > should render 1`] = `
      • - -
      • should render 1`] = ` -
    • -
  • - -
  • should render 1`] = `
  • - -
  • should render 1`] = ` -
@@ -8469,7 +8013,6 @@ exports[`TreeView > should render with almost all props defined 1`] = `
  • should render with almost all props defined 1`] = `
      -
    • should render with almost all props defined 1`] = `
        -
      • should render with almost all props defined 1`] = `
- -
  • should render with almost all props defined 1`] = `
      -
    • should render with almost all props defined 1`] = `
        -
      • should render with almost all props defined 1`] = ` data-type="undefined" role="presentation" > - + undefined @@ -8768,8 +8305,6 @@ exports[`TreeView > should render with almost all props defined 1`] = `
      • - -
      • should render with almost all props defined 1`] = ` data-type="null" role="presentation" > - + null @@ -8814,11 +8349,8 @@ exports[`TreeView > should render with almost all props defined 1`] = ` -
    • - -
    • should render with almost all props defined 1`] = `
        -
      • should render with almost all props defined 1`] = `
          -
        • should render with almost all props defined 1`] = ` data-type="number" role="presentation" > - 0 + number @@ -8967,8 +8497,6 @@ exports[`TreeView > should render with almost all props defined 1`] = `
        • - -
        • should render with almost all props defined 1`] = `
        • - -
        • should render with almost all props defined 1`] = ` -
      • - -
      • should render with almost all props defined 1`] = ` -
    • - -
    • should render with almost all props defined 1`] = ` -
  • - - -
  • should render with almost all props defined 1`] = `
      -
    • should render with almost all props defined 1`] = `
        -
      • should render with almost all props defined 1`] = `
      • - -
      • should render with almost all props defined 1`] = `
      • - -
      • should render with almost all props defined 1`] = ` -
    • - -
    • should render with almost all props defined 1`] = `
        -
      • should render with almost all props defined 1`] = `
          -
        • should render with almost all props defined 1`] = `
        • - -
        • should render with almost all props defined 1`] = ` -
      • - -
      • should render with almost all props defined 1`] = `
          -
        • should render with almost all props defined 1`] = `
        • - -
        • should render with almost all props defined 1`] = ` -
      • - -
      • should render with almost all props defined 1`] = ` -
    • -
  • - -
  • should render with almost all props defined 1`] = `
      -
    • should render with almost all props defined 1`] = `
    • - -
    • should render with almost all props defined 1`] = `
        -
      • should render with almost all props defined 1`] = `
      • - -
      • should render with almost all props defined 1`] = `
      • - -
      • should render with almost all props defined 1`] = ` -
    • -
  • - @@ -10157,7 +9636,6 @@ exports[`TreeView > should render with almost all props defined 1`] = `
      -
    • should render with almost all props defined 1`] = `
        -
      • should render with almost all props defined 1`] = `
      • - -
      • should render with almost all props defined 1`] = `
          -
        • should render with almost all props defined 1`] = `
            -
          • should render with almost all props defined 1`] = ` data-type="undefined" role="presentation" > - + undefined @@ -10402,8 +9875,6 @@ exports[`TreeView > should render with almost all props defined 1`] = `
          • - -
          • should render with almost all props defined 1`] = ` data-type="null" role="presentation" > - + null @@ -10448,11 +9919,8 @@ exports[`TreeView > should render with almost all props defined 1`] = ` -
        • - -
        • should render with almost all props defined 1`] = `
            -
          • should render with almost all props defined 1`] = `
              -
            • should render with almost all props defined 1`] = ` data-type="number" role="presentation" > - 0 + number @@ -10601,8 +10067,6 @@ exports[`TreeView > should render with almost all props defined 1`] = `
            • - -
            • should render with almost all props defined 1`] = `
            • - -
            • should render with almost all props defined 1`] = ` -
          • - -
          • should render with almost all props defined 1`] = ` -
        • - -
        • should render with almost all props defined 1`] = ` -
      • -
    • - -
    • should render with almost all props defined 1`] = `
        -
      • should render with almost all props defined 1`] = `
          -
        • should render with almost all props defined 1`] = `
        • - -
        • should render with almost all props defined 1`] = `
        • - -
        • should render with almost all props defined 1`] = ` -
      • - -
      • should render with almost all props defined 1`] = `
          -
        • should render with almost all props defined 1`] = `
            -
          • should render with almost all props defined 1`] = `
          • - -
          • should render with almost all props defined 1`] = ` -
        • - -
        • should render with almost all props defined 1`] = `
            -
          • should render with almost all props defined 1`] = `
          • - -
          • should render with almost all props defined 1`] = ` -
        • - -
        • should render with almost all props defined 1`] = ` -
      • -
    • - -
    • should render with almost all props defined 1`] = `
        -
      • should render with almost all props defined 1`] = `
      • - -
      • should render with almost all props defined 1`] = `
          -
        • should render with almost all props defined 1`] = `
        • - -
        • should render with almost all props defined 1`] = `
        • - -
        • should render with almost all props defined 1`] = ` -
      • -
    • -
    @@ -11791,7 +11206,6 @@ exports[`TreeView > should render with almost all props defined 1`] = `
      -
    • should render with almost all props defined 1`] = `
        -
      • should render with almost all props defined 1`] = `
      • - -
      • should render with almost all props defined 1`] = `
          -
        • should render with almost all props defined 1`] = `
        • - -
        • should render with almost all props defined 1`] = `
        • - -
        • should render with almost all props defined 1`] = ` -
      • -
    • - -
    • should render with almost all props defined 1`] = `
        -
      • should render with almost all props defined 1`] = `
      • - -
      • should render with almost all props defined 1`] = `
          -
        • should render with almost all props defined 1`] = `
        • - -
        • should render with almost all props defined 1`] = `
        • - -
        • should render with almost all props defined 1`] = ` -
      • -
    • - -
    • should render with almost all props defined 1`] = `
        -
      • should render with almost all props defined 1`] = `
      • - -
      • should render with almost all props defined 1`] = `
          -
        • should render with almost all props defined 1`] = `
        • - -
        • should render with almost all props defined 1`] = `
        • - -
        • should render with almost all props defined 1`] = ` -
      • -
    • -
    diff --git a/packages/svelte-tree-view/src/lib/stores/tree.ts b/packages/svelte-tree-view/src/lib/stores/tree.ts index c6e7d42..093bb47 100644 --- a/packages/svelte-tree-view/src/lib/stores/tree.ts +++ b/packages/svelte-tree-view/src/lib/stores/tree.ts @@ -1,6 +1,6 @@ import { get, writable } from 'svelte/store' -import { createNode, recurseObjectProperties } from '../tree-utils' +import { createNode, recomputeTree, recurseObjectProperties } from '../tree-utils' import type { TreeNode, TreeRecursionOpts } from '../types' import type { PropsStore } from './props' @@ -31,6 +31,20 @@ export const createTreeStore = (propsStore: PropsStore) => { iteratedValues.set(iterated) }, + update(data: unknown, recursionOpts: TreeRecursionOpts, recomputeExpandNode: boolean) { + const oldTreeMap = get(treeMap) + const recomputed = recomputeTree(data, oldTreeMap, recursionOpts, recomputeExpandNode) + if (recomputed.tree) { + tree.set(recomputed.tree) + } else { + tree.set(defaultRootNode) + } + treeMap.set(recomputed.treeMap) + iteratedValues.set(recomputed.iteratedValues) + // console.log('recomputed', recomputed.treeMap) + // treeStore.init(tree, treeMap, iteratedValues) + }, + getNode(id: string) { return get(treeMap).get(id) }, diff --git a/packages/svelte-tree-view/src/lib/types.ts b/packages/svelte-tree-view/src/lib/types.ts index 98736e1..79f7379 100644 --- a/packages/svelte-tree-view/src/lib/types.ts +++ b/packages/svelte-tree-view/src/lib/types.ts @@ -126,6 +126,7 @@ export interface TreeViewProps { * Data can be basically any non-primitive value */ data: unknown + restProps: any /** * Top node has 'svelte-tree-view' class by default */ From 7bb14aabe87126cb9fb3c70e5d16165f9ecf80ef Mon Sep 17 00:00:00 2001 From: Teemu Koivisto Date: Thu, 10 Jul 2025 21:38:29 +0300 Subject: [PATCH 12/23] remove RootNode, restore setting theme by props --- .../svelte-tree-view/src/lib/RootNode.svelte | 52 ------------------- .../svelte-tree-view/src/lib/TreeView.svelte | 52 +++++++++++++++---- .../__snapshots__/TreeView.spec.ts.snap | 1 + 3 files changed, 42 insertions(+), 63 deletions(-) delete mode 100644 packages/svelte-tree-view/src/lib/RootNode.svelte diff --git a/packages/svelte-tree-view/src/lib/RootNode.svelte b/packages/svelte-tree-view/src/lib/RootNode.svelte deleted file mode 100644 index c1953eb..0000000 --- a/packages/svelte-tree-view/src/lib/RootNode.svelte +++ /dev/null @@ -1,52 +0,0 @@ - - -
      - {#each $rootNode.children as child} - - {/each} -
    - - diff --git a/packages/svelte-tree-view/src/lib/TreeView.svelte b/packages/svelte-tree-view/src/lib/TreeView.svelte index 9637ebd..34c2893 100644 --- a/packages/svelte-tree-view/src/lib/TreeView.svelte +++ b/packages/svelte-tree-view/src/lib/TreeView.svelte @@ -1,8 +1,8 @@ - +
      + {#each $rootNode.children as child} + + {/each} +
    + + diff --git a/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap index a910bd3..3f7db06 100644 --- a/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap +++ b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap @@ -8013,6 +8013,7 @@ exports[`TreeView > should render with almost all props defined 1`] = `
    • Date: Thu, 10 Jul 2025 22:11:30 +0300 Subject: [PATCH 13/23] fix svelte:component into svelte 5 --- packages/svelte-tree-view/src/lib/TreeView.svelte | 3 +-- packages/svelte-tree-view/src/lib/TreeViewNode.svelte | 11 +++-------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/svelte-tree-view/src/lib/TreeView.svelte b/packages/svelte-tree-view/src/lib/TreeView.svelte index 34c2893..cc161ea 100644 --- a/packages/svelte-tree-view/src/lib/TreeView.svelte +++ b/packages/svelte-tree-view/src/lib/TreeView.svelte @@ -71,11 +71,10 @@ $effect(() => { const oldRecOptions = get(propsStore.recursionOpts) - // console.log('recursionOpts effect! oldRecOpts', oldRecOptions) + // Destruct recursionOpts to unwrap from proxy const opts = { ...newRecOpts } const newData = data const shouldRecompute = oldRecOptions?.shouldExpandNode !== opts.shouldExpandNode - // console.log(`newRecOpts ${shouldRecompute}`, opts) // Use untrack to prevent triggering this effect again untrack(() => { treeStore.update(newData, opts, shouldRecompute) diff --git a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte index f278d7c..539236a 100644 --- a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte +++ b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte @@ -16,7 +16,7 @@ let { props: propsObj } = propsStore let node = $state(get(treeStore.treeMap).get(id) as TreeNode) let hasChildren = $derived(node && node.children.length > 0) - let valueComponent = $derived($propsObj.valueComponent) + let ValueComponent = $derived($propsObj.valueComponent) let descend = $derived(!node.collapsed && hasChildren) onMount(() => { @@ -80,13 +80,8 @@ onclick={handleToggleCollapse} role="presentation" > - {#if valueComponent} - + {#if ValueComponent} + {:else} {propsStore.formatValue(node.value, node)} {/if} From b828a0abfc0829e25c63f863caf5ae873fa94158 Mon Sep 17 00:00:00 2001 From: Teemu Koivisto Date: Thu, 10 Jul 2025 22:54:58 +0300 Subject: [PATCH 14/23] wip --- .../src/lib/DefaultNode.svelte | 150 ++++++++++++++++++ .../src/lib/TreeViewNode.svelte | 127 ++++++--------- packages/svelte-tree-view/src/lib/types.ts | 32 ++-- 3 files changed, 216 insertions(+), 93 deletions(-) create mode 100644 packages/svelte-tree-view/src/lib/DefaultNode.svelte diff --git a/packages/svelte-tree-view/src/lib/DefaultNode.svelte b/packages/svelte-tree-view/src/lib/DefaultNode.svelte new file mode 100644 index 0000000..5bc5e5a --- /dev/null +++ b/packages/svelte-tree-view/src/lib/DefaultNode.svelte @@ -0,0 +1,150 @@ + + +
    • + {#if hasChildren} + + {/if} + + +
      + {#if $propsObj.showLogButton} + + {/if} + {#if $propsObj.showCopyButton} + + {/if} +
      +
    • +{#if descend} +
    • +
        + {#each node.children as child} + {@render children({ id: child.id })} + {/each} +
      +
    • +{/if} + + diff --git a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte index 539236a..cf766cc 100644 --- a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte +++ b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte @@ -1,10 +1,12 @@ -
    • - {#if hasChildren} - - {/if} - - -
      - {#if $propsObj.showLogButton} - - {/if} - {#if $propsObj.showCopyButton} - - {/if} -
      -
    • -{#if descend} -
    • -
        - {#each node.children as child} - - {/each} -
      -
    • +{#if $propsObj.node} + {@render $propsObj.node(nodeProps)} +{:else} + + {#snippet children({ id })} + + {/snippet} + {/if} diff --git a/packages/site/src/components/DiffValue2.svelte b/packages/site/src/components/DiffValue2.svelte new file mode 100644 index 0000000..cc8f319 --- /dev/null +++ b/packages/site/src/components/DiffValue2.svelte @@ -0,0 +1,102 @@ + + +{#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} + {formatter(value)} +{/if} + + diff --git a/packages/site/src/routes/+page.svelte b/packages/site/src/routes/+page.svelte index 674ac28..6403cdd 100644 --- a/packages/site/src/routes/+page.svelte +++ b/packages/site/src/routes/+page.svelte @@ -1,6 +1,6 @@ -{#if $propsObj.node} - {@render $propsObj.node(nodeProps)} +{#if $propsObj.customNode} + {@render $propsObj.customNode(nodeProps)} {:else} - - {#snippet children({ id })} - - {/snippet} - + {/if} - - diff --git a/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap index 3f7db06..bbde214 100644 --- a/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap +++ b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap @@ -5,6 +5,7 @@ exports[`TreeView > should render 1`] = `
        +
      • should render 1`] = ` data-type="object" role="presentation" > - {} 22 keys - +
    should render 1`] = `
      + +
    • should render 1`] = ` data-type="string" role="presentation" > - "6127d77c7d2ff4113f24ab5c" - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "6e72c4da-c871-4aa1-aa44-1465920b90ae" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="boolean" role="presentation" > - false - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "$2,256.26" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "http://placehold.it/32x32" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "blue" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Branch Mcintosh" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "male" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "ENTOGROK" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "branchmcintosh@entogrok.com" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "+1 (843) 489-2199" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "196 Gerry Street, Sylvanite, Colorado, 3630" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Deserunt et laborum proident commodo. Irure mollit voluptate minim ut eiusmod qui deserunt culpa est nostrud. Ex duis aute ad eu. Ex in culpa culpa nulla non voluptate velit ex sint pariatur exercitation labore. -" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "2018-07-23T07:01:58 -03:00" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="array" role="presentation" > - [] 7 items - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="string" role="presentation" > - "tempor" - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "laboris" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "reprehenderit" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "veniam" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "exercitation" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "velit" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "voluptate" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="array" role="presentation" > - [] 3 items - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
    should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Shanna Shannon" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Lindsey Reed" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Elinor Hendricks" - +
  • should render 1`] = ` + + + + + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Hello, Branch Mcintosh! You have 1 unread messages." - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "strawberry" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 22 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="string" role="presentation" > - "6127d77cdce2ef8b8b42aae8" - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "8e33bdb8-d5e6-49fb-b229-ea24501c9ba3" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="boolean" role="presentation" > - true - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "$3,880.84" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "http://placehold.it/32x32" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "brown" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Amy Cannon" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "female" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "QUILITY" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "amycannon@quility.com" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "+1 (842) 547-2756" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "564 Dahlgreen Place, Sims, Washington, 9571" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "In enim aliqua sint dolor laboris. Sunt veniam officia elit magna Lorem nulla occaecat culpa anim enim. Irure velit labore dolore incididunt. Aute aliquip elit ut duis anim elit esse dolor esse in nisi eiusmod tempor eiusmod. Proident eiusmod id nulla voluptate fugiat dolore do tempor dolor sunt. Adipisicing culpa quis elit enim aliquip. Tempor exercitation aute excepteur in. -" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "2020-09-23T10:54:44 -03:00" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="array" role="presentation" > - [] 7 items - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="string" role="presentation" > - "commodo" - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "ex" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "elit" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "ad" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "magna" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "laboris" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "veniam" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="array" role="presentation" > - [] 3 items - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
    should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Barron Gonzales" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Therese Ramos" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Kirby Knight" - +
  • should render 1`] = ` + + + + + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Hello, Amy Cannon! You have 9 unread messages." - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "apple" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 22 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="string" role="presentation" > - "6127d77c36bbb0fbc6f1e367" - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "75500a41-98ec-4050-854f-33dfef40297c" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="boolean" role="presentation" > - false - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "$2,367.73" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "http://placehold.it/32x32" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "blue" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Whitley Zamora" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "male" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "MEDALERT" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "whitleyzamora@medalert.com" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "+1 (825) 435-2054" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "619 Macon Street, Cresaptown, Rhode Island, 2046" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Reprehenderit velit cillum anim commodo est ex est deserunt quis consectetur ex proident do dolore. Pariatur minim enim ipsum nulla quis deserunt duis nisi. Excepteur occaecat quis dolor commodo consectetur. Officia laborum dolore tempor reprehenderit sit. Sit consectetur consequat aliquip qui. Est irure enim ex voluptate non aute. -" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "2016-03-01T09:46:19 -02:00" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="array" role="presentation" > - [] 7 items - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="string" role="presentation" > - "minim" - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "consequat" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "dolor" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "duis" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "consectetur" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "et" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "elit" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="array" role="presentation" > - [] 3 items - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
    should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Wynn Foster" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Gloria Saunders" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Vega Mcclain" - +
  • should render 1`] = ` + + + + + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Hello, Whitley Zamora! You have 9 unread messages." - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "strawberry" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 22 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="string" role="presentation" > - "6127d77cab3b02db4e3558ef" - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "3e68ae9a-4943-47ac-819f-2acf5f5267a9" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="boolean" role="presentation" > - true - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "$3,167.93" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "http://placehold.it/32x32" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "blue" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Winters Kirk" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "male" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "SIGNITY" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "winterskirk@signity.com" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "+1 (820) 591-2943" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "733 Mill Lane, Loma, Wyoming, 5006" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Magna nulla et in dolore anim aliqua occaecat aliqua pariatur. Ut commodo duis officia minim labore. Officia aliquip ad esse commodo ea nisi Lorem esse in. Ipsum nulla ea nisi ea magna tempor veniam. -" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "2020-07-15T11:06:26 -03:00" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="array" role="presentation" > - [] 7 items - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="string" role="presentation" > - "occaecat" - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "pariatur" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "dolor" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "irure" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "sit" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "eu" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "et" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="array" role="presentation" > - [] 3 items - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
    should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Suarez Hale" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Helen Pearson" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Misty Rosario" - +
  • should render 1`] = ` + + + + + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Hello, Winters Kirk! You have 3 unread messages." - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "banana" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 22 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="string" role="presentation" > - "6127d77cb75a6937b0cf29dc" - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "bbb12452-3b75-4d3e-b36b-6fcfff003537" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="boolean" role="presentation" > - true - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "$2,406.91" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "http://placehold.it/32x32" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "green" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Hill Levine" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "male" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "ZAJ" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "hilllevine@zaj.com" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "+1 (987) 429-2624" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "434 Cooke Court, Elfrida, Utah, 9346" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Pariatur elit est eiusmod aliquip eu ad consectetur velit qui proident sit. Elit irure magna ex voluptate occaecat. Amet veniam voluptate laboris Lorem minim id irure. Laborum eu proident qui est ex nulla deserunt commodo adipisicing qui irure ea cillum nulla. Ut culpa mollit Lorem fugiat laboris duis fugiat. Sint magna anim voluptate irure aliqua magna incididunt reprehenderit aute mollit reprehenderit quis mollit. -" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "2015-11-20T07:07:25 -02:00" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="array" role="presentation" > - [] 7 items - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="string" role="presentation" > - "id" - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "pariatur" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "commodo" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "laboris" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "occaecat" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "nulla" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "nostrud" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="array" role="presentation" > - [] 3 items - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
    should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Gladys Matthews" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Pittman Lewis" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Marci Pugh" - +
  • should render 1`] = ` + + + + + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Hello, Hill Levine! You have 4 unread messages." - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "strawberry" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 22 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="string" role="presentation" > - "6127d77c8e3565e495329780" - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "e6b6f813-4081-4aae-a0bb-2dba74f15368" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="boolean" role="presentation" > - false - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "$3,874.14" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "http://placehold.it/32x32" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "green" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Hawkins Benton" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "male" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "COMVEYER" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "hawkinsbenton@comveyer.com" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "+1 (863) 401-3632" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "994 Havens Place, Cazadero, Arizona, 7731" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Deserunt culpa magna culpa sit aliqua eu ut enim ex aliquip quis sit ut qui. Id Lorem tempor Lorem do enim tempor tempor. Nisi proident commodo ea voluptate. Sint ad laborum proident nostrud incididunt deserunt quis amet. Anim exercitation do irure do eiusmod ad consequat aliqua et. -" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "2016-12-24T11:40:01 -02:00" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="number" role="presentation" > - number - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="array" role="presentation" > - [] 7 items - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="string" role="presentation" > - "irure" - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "velit" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "excepteur" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "cillum" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "magna" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "culpa" - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "ullamco" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="array" role="presentation" > - [] 3 items - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
    should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Meyers Harrell" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Rachael Rodriquez" - +
  • should render 1`] = ` + + + + + +
  • should render 1`] = ` data-type="object" role="presentation" > - {} 2 keys - +
  • should render 1`] = `
      + +
    • should render 1`] = ` data-type="number" role="presentation" > - number - +
    should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Ila Vaughn" - +
  • should render 1`] = ` + + + + + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "Hello, Hawkins Benton! You have 10 unread messages." - +
  • should render 1`] = ` + + + +
  • should render 1`] = ` data-type="string" role="presentation" > - "strawberry" - +
  • should render 1`] = ` + + +
    @@ -8015,6 +8699,7 @@ exports[`TreeView > should render with almost all props defined 1`] = ` class=" svelte-tree-view svelte-167awo5" style="--tree-view-base00: #16130F; --tree-view-base01: #2C2620; --tree-view-base02: #433B32; --tree-view-base03: #5A5047; --tree-view-base04: #8A8075; --tree-view-base05: #A39A90; --tree-view-base06: #BEB6AE; --tree-view-base07: #DBD6D1; --tree-view-base08: #826D57; --tree-view-base09: #828257; --tree-view-base0A: #6D8257; --tree-view-base0B: #57826D; --tree-view-base0C: #576D82; --tree-view-base0D: #6D5782; --tree-view-base0E: #82576D; --tree-view-base0F: #825757;" > +
  • should render with almost all props defined 1`] = ` role="presentation" > () 3 entries -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > {} 2 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > "1-a" -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > () 3 entries -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > {} 3 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` data-type="undefined" role="presentation" > - undefined - +
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` data-type="null" role="presentation" > - null - +
    should render with almost all props defined 1`] = ` + +
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > {} 3 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > [] 3 items -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` data-type="number" role="presentation" > - number - + 0
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > 1 -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > 3 -
    should render with almost all props defined 1`] = ` + +
  • + + + +
  • should render with almost all props defined 1`] = ` () => { console.log("hello world"); } -
    should render with almost all props defined 1`] = ` + +
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > "2-c" -
    should render with almost all props defined 1`] = ` + +
  • + + + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > {} 2 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > [] 3 items -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > 1 -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > 2 -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > 3 -
    should render with almost all props defined 1`] = ` + +
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > () 3 entries -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > {} 3 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > 2021-08-31T17:15:12.183Z -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > true -
    should render with almost all props defined 1`] = ` + +
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > {} 3 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > 80085 -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > "a value I am" -
    should render with almost all props defined 1`] = ` + +
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > "2-c" -
    should render with almost all props defined 1`] = ` + +
  • + + + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > {} 2 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > "1-c" -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > () 3 entries -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > circular-object {} 3 keys -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > circular-object {} 3 keys -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > "2-c" -
    should render with almost all props defined 1`] = ` + +
  • + + + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > () 3 entries -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > {} 2 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > "1-a" -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > () 3 entries -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > {} 3 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` data-type="undefined" role="presentation" > - undefined - +
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` data-type="null" role="presentation" > - null - +
    should render with almost all props defined 1`] = ` + +
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > {} 3 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > [] 3 items -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` data-type="number" role="presentation" > - number - + 0
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > 1 -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > 3 -
    should render with almost all props defined 1`] = ` + +
  • + + + +
  • should render with almost all props defined 1`] = ` () => { console.log("hello world"); } -
    should render with almost all props defined 1`] = ` + +
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > "2-c" -
    should render with almost all props defined 1`] = ` + +
  • + + + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > {} 2 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > [] 3 items -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > 1 -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > 2 -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > 3 -
    should render with almost all props defined 1`] = ` + +
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > () 3 entries -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > {} 3 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > 2021-08-31T17:15:12.183Z -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > true -
    should render with almost all props defined 1`] = ` + +
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > {} 3 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > 80085 -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > "a value I am" -
    should render with almost all props defined 1`] = ` + +
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > "2-c" -
    should render with almost all props defined 1`] = ` + +
  • + + + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > {} 2 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > "1-c" -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > () 3 entries -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > circular-object {} 3 keys -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > circular-object {} 3 keys -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > "2-c" -
    should render with almost all props defined 1`] = ` + +
  • + + + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > () 3 entries -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > {} 2 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > "1-a" -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > () 3 entries -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > circular-object {} 3 keys -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > circular-object {} 3 keys -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > "2-c" -
    should render with almost all props defined 1`] = ` + +
  • + + + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > {} 2 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > circular-array [] 3 items -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > () 3 entries -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > circular-object {} 3 keys -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > circular-object {} 3 keys -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > "2-c" -
    should render with almost all props defined 1`] = ` + +
  • + + + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > {} 2 keys -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > "1-c" -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > () 3 entries -
    should render with almost all props defined 1`] = `
      + +
    • should render with almost all props defined 1`] = ` role="presentation" > circular-object {} 3 keys -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > circular-object {} 3 keys -
    should render with almost all props defined 1`] = `
  • + + + +
  • should render with almost all props defined 1`] = ` role="presentation" > "2-c" -
    should render with almost all props defined 1`] = ` + +
  • + + + + + diff --git a/packages/svelte-tree-view/src/lib/index.ts b/packages/svelte-tree-view/src/lib/index.ts index 0f42472..a0f8b12 100644 --- a/packages/svelte-tree-view/src/lib/index.ts +++ b/packages/svelte-tree-view/src/lib/index.ts @@ -4,5 +4,7 @@ declare global { } } +export * from './types' +export { default as DefaultNode } from './DefaultNode.svelte' export { default as TreeView } from './TreeView.svelte' export { default } from './TreeView.svelte' diff --git a/packages/svelte-tree-view/src/lib/types.ts b/packages/svelte-tree-view/src/lib/types.ts index fac75af..75fde15 100644 --- a/packages/svelte-tree-view/src/lib/types.ts +++ b/packages/svelte-tree-view/src/lib/types.ts @@ -1,6 +1,5 @@ -import { getContext, SvelteComponent, type Component, type Snippet } from 'svelte' +import { type Component, type Snippet } from 'svelte' import type { HTMLAttributes } from 'svelte/elements' -import type { Writable } from 'svelte/store' import type { Stores } from './stores' export type ValueType = @@ -118,20 +117,19 @@ export interface Base16Theme { export interface NodeProps { node: TreeNode - getCtx: () => ReturnType> - // propsObj: Writable, 'data' | 'node'>> - children: Snippet<[{ id: string }]> + TreeViewNode: Component<{ id: string }> + getCtx: () => ReturnType<() => Stores> handleLogNode(): void handleCopyNodeToClipboard(): void handleToggleCollapse(): void } -export interface TreeViewProps extends HTMLAttributes { +export interface TreeViewProps { /** * Data can be basically any non-primitive value */ data: unknown - node?: Snippet<[]> + customNode?: Snippet<[NodeProps]> theme?: Base16Theme showLogButton?: boolean showCopyButton?: boolean @@ -181,6 +179,7 @@ export interface TreeRecursionOpts { mapChildren?: (val: any, type: ValueType, parent: TreeNode) => [string, any][] | undefined } +export type Props = TreeViewProps & HTMLAttributes // export type TreeView = Component -export class TreeView extends SvelteComponent {} -export default TreeView +// export class TreeView extends SvelteComponent {} +// export default TreeView From 76df89de2ae3a493c4389078a385a6063954790c Mon Sep 17 00:00:00 2001 From: Teemu Koivisto Date: Fri, 11 Jul 2025 19:52:13 +0300 Subject: [PATCH 16/23] add rootNode snippet prop --- packages/site/src/components/DiffValue.svelte | 2 +- packages/site/src/routes/+page.svelte | 13 +++- .../svelte-tree-view/src/lib/TreeView.svelte | 25 +++++--- .../src/lib/TreeViewNode.svelte | 4 +- .../__snapshots__/TreeView.spec.ts.snap | 12 +++- packages/svelte-tree-view/src/lib/types.ts | 60 +++++++++---------- 6 files changed, 69 insertions(+), 47 deletions(-) diff --git a/packages/site/src/components/DiffValue.svelte b/packages/site/src/components/DiffValue.svelte index d1298c9..15900ce 100644 --- a/packages/site/src/components/DiffValue.svelte +++ b/packages/site/src/components/DiffValue.svelte @@ -12,7 +12,7 @@ const { propsStore: { props: propsObj, formatValue } } = getCtx() - let hasChildren = $derived(node && node.children.length > 0) + let hasChildren = $derived(node.children.length > 0) let descend = $derived(!node.collapsed && hasChildren) let value = $derived(node.value) diff --git a/packages/site/src/routes/+page.svelte b/packages/site/src/routes/+page.svelte index 6403cdd..8b283aa 100644 --- a/packages/site/src/routes/+page.svelte +++ b/packages/site/src/routes/+page.svelte @@ -134,7 +134,12 @@ valueFormatter={$parsedValueFormatter} theme={$parsedTheme} > - {#snippet customNode(props)} + {#snippet rootNode(children)} +
      + {@render children()} +
    + {/snippet} + {#snippet treeNode(props)} {#if $state.valueComponent} {:else} @@ -148,7 +153,9 @@ diff --git a/packages/svelte-tree-view/src/lib/TreeView.svelte b/packages/svelte-tree-view/src/lib/TreeView.svelte index 3435d3e..2591be3 100644 --- a/packages/svelte-tree-view/src/lib/TreeView.svelte +++ b/packages/svelte-tree-view/src/lib/TreeView.svelte @@ -17,7 +17,8 @@ let { data, - customNode, + rootNode, + treeNode, theme, showLogButton, showCopyButton, @@ -27,7 +28,7 @@ }: Props = $props() let propsObj: Omit = { - customNode, + treeNode, theme, showLogButton, showCopyButton, @@ -39,7 +40,7 @@ const rootElementStore = createRootElementStore() const treeStore = createTreeStore(propsStore) const newRecOpts = $derived({ ...DEFAULT_RECURSION_OPTS, ...recursionOpts }) - const rootNode = treeStore.tree + const tree = treeStore.tree setContext('svelte-tree-view', { propsStore, @@ -56,7 +57,7 @@ // which is picked from the old props. This is to allow checking between the old and new recursionOpts // in the recomputeTree. propsObj = { - customNode, + treeNode, showLogButton, showCopyButton, recursionOpts: propsObj.recursionOpts, @@ -89,11 +90,19 @@ }) -
      - {#each $rootNode.children as child} +{#snippet children()} + {#each $tree.children as child} {/each} -
    +{/snippet} + +{#if rootNode} + {@render rootNode(children)} +{:else} +
      + {@render children()} +
    +{/if} diff --git a/packages/svelte-tree-view/src/lib/DefaultNode.svelte b/packages/svelte-tree-view/src/lib/DefaultNode.svelte index 9ed4b94..91d0f07 100644 --- a/packages/svelte-tree-view/src/lib/DefaultNode.svelte +++ b/packages/svelte-tree-view/src/lib/DefaultNode.svelte @@ -4,13 +4,14 @@ let { node, TreeViewNode, - getCtx, + getTreeContext, handleLogNode, handleCopyNodeToClipboard, handleToggleCollapse }: NodeProps = $props() - const { treeStore, propsStore, rootElementStore } = getCtx() - const { props: propsObj } = propsStore + const { + propsStore: { props: propsObj } + } = getTreeContext() let hasChildren = $derived(node && node.children.length > 0) let descend = $derived(!node.collapsed && hasChildren) diff --git a/packages/svelte-tree-view/src/lib/TreeView.svelte b/packages/svelte-tree-view/src/lib/TreeView.svelte index 2591be3..5b86ad0 100644 --- a/packages/svelte-tree-view/src/lib/TreeView.svelte +++ b/packages/svelte-tree-view/src/lib/TreeView.svelte @@ -105,13 +105,6 @@ {/if} diff --git a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte index 6424235..d09040c 100644 --- a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte +++ b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte @@ -20,7 +20,7 @@ let hasChildren = $derived(node && node.children.length > 0) let nodeProps = $derived({ node, - getCtx: () => getContext('svelte-tree-view'), + getTreeContext: () => getContext('svelte-tree-view'), TreeViewNode: TreeViewNode, handleLogNode() { console.info('%c [svelte-tree-view]: Property added to window._node', 'color: #b8e248') diff --git a/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap index 7efcebd..55d226e 100644 --- a/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap +++ b/packages/svelte-tree-view/src/lib/__tests__/__snapshots__/TreeView.spec.ts.snap @@ -4,7 +4,7 @@ exports[`TreeView > should render 1`] = `
      @@ -8701,7 +8701,7 @@ exports[`TreeView > should render with almost all props defined 1`] = `
        diff --git a/packages/svelte-tree-view/src/lib/types.ts b/packages/svelte-tree-view/src/lib/types.ts index 0877900..80d56d7 100644 --- a/packages/svelte-tree-view/src/lib/types.ts +++ b/packages/svelte-tree-view/src/lib/types.ts @@ -151,15 +151,17 @@ export interface TreeRecursionOpts { mapChildren?: (val: any, type: ValueType, parent: TreeNode) => [string, any][] | undefined } +/** Props passed to renderable TreeNodes */ export interface NodeProps { node: TreeNode TreeViewNode: Component<{ id: string }> - getCtx: () => ReturnType<() => Stores> + getTreeContext: () => Stores handleLogNode(): void handleCopyNodeToClipboard(): void handleToggleCollapse(): void } +/** Props passed to the main component */ export interface TreeViewProps { /** * Data can be basically any non-primitive value From dfb2292e654478851cf5309c50fa4ad9531a8e61 Mon Sep 17 00:00:00 2001 From: Teemu Koivisto Date: Fri, 11 Jul 2025 20:10:04 +0300 Subject: [PATCH 18/23] switch treeMap from Map to Record to utilize proxies --- .../src/lib/TreeViewNode.svelte | 4 +-- .../svelte-tree-view/src/lib/stores/tree.ts | 29 ++++++++++--------- .../svelte-tree-view/src/lib/tree-utils.ts | 12 ++++---- packages/svelte-tree-view/src/lib/types.ts | 6 ++++ 4 files changed, 30 insertions(+), 21 deletions(-) diff --git a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte index d09040c..6438d0e 100644 --- a/packages/svelte-tree-view/src/lib/TreeViewNode.svelte +++ b/packages/svelte-tree-view/src/lib/TreeViewNode.svelte @@ -16,7 +16,7 @@ const { treeStore, propsStore, rootElementStore } = getContext('svelte-tree-view') let { props: propsObj } = propsStore - let node = $state(get(treeStore.treeMap).get(id) as TreeNode) + let node = $state(get(treeStore.treeMap)[id] as TreeNode) let hasChildren = $derived(node && node.children.length > 0) let nodeProps = $derived({ node, @@ -52,7 +52,7 @@ onMount(() => { treeStore.treeMap.subscribe(value => { - const val = value.get(id) as TreeNode + const val = value[id] if (val) { node = val } diff --git a/packages/svelte-tree-view/src/lib/stores/tree.ts b/packages/svelte-tree-view/src/lib/stores/tree.ts index 093bb47..eedfdf4 100644 --- a/packages/svelte-tree-view/src/lib/stores/tree.ts +++ b/packages/svelte-tree-view/src/lib/stores/tree.ts @@ -9,7 +9,7 @@ export type TreeStore = ReturnType export const createTreeStore = (propsStore: PropsStore) => { const defaultRootNode = createNode(0, 'root', [], 0, null) const tree = writable(defaultRootNode) - const treeMap = writable>(new Map()) + const treeMap = writable>({}) const iteratedValues = writable>(new Map()) return { @@ -19,7 +19,7 @@ export const createTreeStore = (propsStore: PropsStore) => { init( newTree: TreeNode | null, - newTreeMap: Map, + newTreeMap: Record, iterated: Map ) { if (newTree) { @@ -46,17 +46,17 @@ export const createTreeStore = (propsStore: PropsStore) => { }, getNode(id: string) { - return get(treeMap).get(id) + return get(treeMap)[id] }, toggleCollapse(id: string) { - const node = get(treeMap).get(id) + const node = get(treeMap)[id] if (!node) { console.warn(`Attempted to collapse non-existent node: ${id}`) return } const updatedNode = { ...node, collapsed: !node.collapsed } - treeMap.update(m => new Map(m.set(node.id, updatedNode))) + treeMap.update(m => ({ ...m, [node.id]: updatedNode })) const recursionOpts = get(propsStore.recursionOpts) if (recursionOpts) { this.expandNodeChildren(updatedNode, recursionOpts) @@ -69,7 +69,7 @@ export const createTreeStore = (propsStore: PropsStore) => { // Only root node has no parent and it should not be expandable throw Error('No parent in expandNodeChildren for node: ' + node) } - const newTreeMap = new Map(get(treeMap)) + const newTreeMap: Record = { ...get(treeMap) } const oldTreeMap = get(treeMap) const previouslyIterated = get(iteratedValues) const nodeWithUpdatedChildren = recurseObjectProperties( @@ -89,22 +89,25 @@ export const createTreeStore = (propsStore: PropsStore) => { parent.children = parent.children.map(c => c.id === nodeWithUpdatedChildren.id ? nodeWithUpdatedChildren : c ) - newTreeMap.set(nodeWithUpdatedChildren.id, nodeWithUpdatedChildren) - newTreeMap.set(parent.id, parent) + newTreeMap[nodeWithUpdatedChildren.id] = nodeWithUpdatedChildren + newTreeMap[parent.id] = parent treeMap.set(newTreeMap) iteratedValues.set(previouslyIterated) }, expandAllNodesToNode(id: string) { - function recurseNodeUpwards(updated: Map, node?: TreeNode | null) { + function recurseNodeUpwards( + updated: Record, + node?: TreeNode | null + ) { if (!node) return - updated.set(node.id, { ...node, collapsed: false }) + updated[node.id] = { ...node, collapsed: false } if (node.parentId) { - recurseNodeUpwards(updated, updated.get(node.parentId)) + recurseNodeUpwards(updated, updated[node.parentId]) } } - const updated = new Map(get(treeMap)) - recurseNodeUpwards(updated, updated.get(id)) + const updated = { ...get(treeMap) } + recurseNodeUpwards(updated, updated[id]) treeMap.set(updated) } } diff --git a/packages/svelte-tree-view/src/lib/tree-utils.ts b/packages/svelte-tree-view/src/lib/tree-utils.ts index 144c3a8..5b2189b 100644 --- a/packages/svelte-tree-view/src/lib/tree-utils.ts +++ b/packages/svelte-tree-view/src/lib/tree-utils.ts @@ -131,8 +131,8 @@ export function recurseObjectProperties( depth: number, ensureNotCollapsed: boolean, parent: TreeNode | null, - treeMap: Map, - oldTreeMap: Map, + treeMap: Record, + oldTreeMap: Record, iteratedValues: Map, recomputeExpandNode: boolean, opts: TreeRecursionOpts @@ -141,7 +141,7 @@ export function recurseObjectProperties( return null } const node = createNode(index, key, value, depth, parent) - const oldNode = oldTreeMap.get(node.id) + const oldNode = oldTreeMap[node.id] if (ensureNotCollapsed) { // Used to ensure that either root node is always uncollapsed or when uncollapsing new nodes // with expandNodeChildren the node children are recursed (if applicable) with mapChildren @@ -154,7 +154,7 @@ export function recurseObjectProperties( node.collapsed = !opts.shouldExpandNode(node) } - treeMap.set(node.id, node) + treeMap[node.id] = node if (shouldRecurseChildren(node, parent, iteratedValues, opts)) { const mappedChildren = opts.mapChildren && opts.mapChildren(value, getValueType(value), node) @@ -183,11 +183,11 @@ export function recurseObjectProperties( export function recomputeTree( data: unknown, - oldTreeMap: Map, + oldTreeMap: Record, recursionOpts: TreeRecursionOpts, recomputeExpandNode: boolean ) { - const treeMap = new Map() + const treeMap = {} const iteratedValues = new Map() const newTree = recurseObjectProperties( -1, diff --git a/packages/svelte-tree-view/src/lib/types.ts b/packages/svelte-tree-view/src/lib/types.ts index 80d56d7..0408b32 100644 --- a/packages/svelte-tree-view/src/lib/types.ts +++ b/packages/svelte-tree-view/src/lib/types.ts @@ -167,7 +167,13 @@ export interface TreeViewProps { * Data can be basically any non-primitive value */ data: unknown + /** + * Custom root node. Default
          with .svelte-tree-view class + */ rootNode?: Snippet<[Snippet]> + /** + * Custom tree node. Uses DefaultNode.svelte by default + */ treeNode?: Snippet<[NodeProps]> theme?: Base16Theme showLogButton?: boolean From cbec0d5f6671fca148efd3be9804b4c4a09b3cb7 Mon Sep 17 00:00:00 2001 From: Teemu Koivisto Date: Sat, 12 Jul 2025 12:05:38 +0300 Subject: [PATCH 19/23] clean --- package.json | 2 +- packages/site/package.json | 12 ++++++------ packages/site/src/app.html | 2 +- packages/site/svelte.config.js | 8 -------- .../svelte-tree-view/cypress/e2e/examples.spec.cy.ts | 2 +- 5 files changed, 9 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 37e9b4c..482e163 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "devDependencies": { "@changesets/cli": "^2.29.5", "@eslint/compat": "^1.3.1", - "@eslint/js": "^9.30.1", + "@eslint/js": "^9.30.1", "@typescript-eslint/eslint-plugin": "^8.35.1", "@typescript-eslint/parser": "^8.35.1", "concurrently": "^9.2.0", diff --git a/packages/site/package.json b/packages/site/package.json index 2e72a6b..c0e3e36 100644 --- a/packages/site/package.json +++ b/packages/site/package.json @@ -8,12 +8,12 @@ }, "homepage": "https://teemukoivisto.github.io/svelte-tree-view/", "scripts": { - "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", + "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" }, diff --git a/packages/site/src/app.html b/packages/site/src/app.html index 8e92cc7..63e5c22 100644 --- a/packages/site/src/app.html +++ b/packages/site/src/app.html @@ -2,7 +2,7 @@ - + { cy.get('button').contains('Example 2').click() cy.get('.svelte-tree-view').find('li').should('have.length', 17) cy.get('button').contains('Example 3').click() - cy.get('.svelte-tree-view').find('li').should('have.length', 126).wait + cy.get('.svelte-tree-view').find('li').should('have.length', 126) cy.get('[data-test-id="input-textarea"]').focus().type(TEST_DATA) cy.get('.svelte-tree-view').find('li').should('have.length', 19) }) From 6b94b6bc7800d2e9e6c2f29ea4fe6425340b5764 Mon Sep 17 00:00:00 2001 From: Teemu Koivisto Date: Sat, 12 Jul 2025 12:10:02 +0300 Subject: [PATCH 20/23] remove old DiffValue --- .../site/src/components/DiffValue2.svelte | 102 ------------------ packages/site/src/components/PropsForm.svelte | 2 +- packages/site/svelte.config.js | 2 +- 3 files changed, 2 insertions(+), 104 deletions(-) delete mode 100644 packages/site/src/components/DiffValue2.svelte diff --git a/packages/site/src/components/DiffValue2.svelte b/packages/site/src/components/DiffValue2.svelte deleted file mode 100644 index cc8f319..0000000 --- a/packages/site/src/components/DiffValue2.svelte +++ /dev/null @@ -1,102 +0,0 @@ - - -{#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} - {formatter(value)} -{/if} - - diff --git a/packages/site/src/components/PropsForm.svelte b/packages/site/src/components/PropsForm.svelte index dac2ab9..fc91ac5 100644 --- a/packages/site/src/components/PropsForm.svelte +++ b/packages/site/src/components/PropsForm.svelte @@ -38,7 +38,7 @@
      - +
      diff --git a/packages/site/svelte.config.js b/packages/site/svelte.config.js index c791a7a..9a20363 100644 --- a/packages/site/svelte.config.js +++ b/packages/site/svelte.config.js @@ -13,7 +13,7 @@ const config = { }, adapter: adapter(), alias: { - $lib: 'src/lib', + $lib: 'src/lib' } } } From b61c08d51f5a169b647bb4106d8651ef1f6262c4 Mon Sep 17 00:00:00 2001 From: Teemu Koivisto Date: Sat, 12 Jul 2025 12:53:08 +0300 Subject: [PATCH 21/23] update github actions --- .github/actions/pnpm/action.yml | 2 +- .github/workflows/gh-pages.yml | 2 +- .github/workflows/pull-request.yml | 2 +- .github/workflows/version-publish.yml | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) 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 From 6b6e1778352e035e9e80d7d0f02160b97cfb132d Mon Sep 17 00:00:00 2001 From: Teemu Koivisto Date: Sat, 12 Jul 2025 12:58:02 +0300 Subject: [PATCH 22/23] update actions --- .github/actions/build-test/action.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 From 4d8bdde98da0e352e6012368ea5334a6616e884f Mon Sep 17 00:00:00 2001 From: Teemu Koivisto Date: Sat, 12 Jul 2025 13:03:08 +0300 Subject: [PATCH 23/23] add changeset --- .changeset/shaggy-gifts-search.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 .changeset/shaggy-gifts-search.md 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