diff --git a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte index 96b122f0..9382de4a 100644 --- a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte +++ b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte @@ -9,9 +9,8 @@ type NodeProps } from '@xyflow/svelte'; import { isTextNode, type MyNode } from './+page.svelte'; - import { untrack } from 'svelte'; - let { id, data }: NodeProps> = $props(); + let { id }: NodeProps> = $props(); const { updateNodeData } = useSvelteFlow(); const connections = useNodeConnections({ @@ -20,21 +19,19 @@ }); let nodeData = $derived(useNodesData(connections.current[0]?.source)); - let textNodeData = $derived(isTextNode(nodeData.current) ? nodeData.current.data : null); + let textNodeData = $derived(isTextNode(nodeData.current) ? nodeData.current.data.text : null); + + $effect(() => { + console.log('textNodeData', textNodeData); + }); - // For some reason adding an inspect here also prevents the inifinte loop!? // $inspect(textNodeData); - - $effect.pre(() => { - const nodeData = textNodeData; - const input = nodeData?.text.toUpperCase() ?? ''; - - // TODO: We need to add this check to prevent infinite loop - // I don't understand why? - if (input === untrack(() => data.text)) return; + $effect(() => { + console.log('running'); + textNodeData; + const input = textNodeData?.toUpperCase() ?? ''; updateNodeData(id, { text: input }); - console.log('updatedNodeData with', input); }); diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts index 51e8a201..ba8d4a43 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts +++ b/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts @@ -23,6 +23,7 @@ import { useStore } from '$lib/store'; import type { Edge, FitViewOptions, InternalNode, Node } from '$lib/types'; import { isEdge, isNode } from '$lib/utils'; import { derivedWarning } from './derivedWarning.svelte'; +import { untrack } from 'svelte'; /** * Hook for accessing the ReactFlow instance. @@ -310,7 +311,7 @@ export function useSvelteFlow(): { nodeUpdate: Partial | ((node: Node) => Partial), options: { replace: boolean } = { replace: false } ) { - store.nodes = store.nodes.map((node) => { + store.nodes = untrack(() => store.nodes).map((node) => { if (node.id === id) { const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate; return options?.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode }; @@ -325,7 +326,7 @@ export function useSvelteFlow(): { edgeUpdate: Partial | ((edge: Edge) => Partial), options: { replace: boolean } = { replace: false } ) { - store.edges = store.edges.map((edge) => { + store.edges = untrack(() => store.edges).map((edge) => { if (edge.id === id) { const nextEdge = typeof edgeUpdate === 'function' ? edgeUpdate(edge) : edgeUpdate; return options.replace && isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge }; @@ -461,11 +462,15 @@ export function useSvelteFlow(): { }); if (matchingNodes) { - store.nodes = store.nodes.filter((node) => !matchingNodes.some(({ id }) => id === node.id)); + store.nodes = untrack(() => store.nodes).filter( + (node) => !matchingNodes.some(({ id }) => id === node.id) + ); } if (matchingEdges) { - store.edges = store.edges.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id)); + store.edges = untrack(() => store.edges).filter( + (edge) => !matchingEdges.some(({ id }) => id === edge.id) + ); } return { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0c4fdf58..972089d2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -419,8 +419,8 @@ importers: tests/playwright: dependencies: '@playwright/experimental-ct-react': - specifier: ^1.45.0 - version: 1.45.0(@types/node@20.14.6)(terser@5.31.0)(vite@6.0.7(@types/node@20.14.6)(terser@5.31.0)) + specifier: ^1.49.1 + version: 1.49.1(@types/node@20.14.6)(terser@5.31.0)(vite@6.0.7(@types/node@20.14.6)(terser@5.31.0)) '@types/react': specifier: ^18.3.3 version: 18.3.3 @@ -434,12 +434,12 @@ importers: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) typescript: - specifier: ^5.4.5 - version: 5.4.5 + specifier: ^5.7.3 + version: 5.7.3 devDependencies: '@playwright/test': - specifier: ^1.45.0 - version: 1.45.0 + specifier: ^1.49.1 + version: 1.49.1 '@types/node': specifier: ^20.14.6 version: 20.14.6 @@ -1545,12 +1545,12 @@ packages: resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} engines: {node: '>= 8'} - '@playwright/experimental-ct-core@1.45.0': - resolution: {integrity: sha512-XxAZW3TnkkRlqRRiAnN/q8wzuspqDA2o8912TQkhbH2BKD3Ko4RLMVy0J7QJ+quG1fCp1/rlbg96/fB15wOemg==} + '@playwright/experimental-ct-core@1.49.1': + resolution: {integrity: sha512-MZ0by8hLo/2qGHoo3SSbdxTNwKXrw06rqqA64TEiwOBjzpbYAaCuA3+BemXpMFfa0nU6ivO4h/sFdA8Zv9ns+g==} engines: {node: '>=18'} - '@playwright/experimental-ct-react@1.45.0': - resolution: {integrity: sha512-GoT7eZMR5wLPFjGwQbGywiy2Z+9jwx5F+GJAZE1xbqMJPzSB5bv8zd5g09mWN4aKOHpc/kzkCBv0bxzW/es51A==} + '@playwright/experimental-ct-react@1.49.1': + resolution: {integrity: sha512-kQTSzVkFd05x1kY8Q/XaF3xg3dd3AH31976N0zCVVQ3pw/qpa3jtdjoj7/30eblU5eVlg0ELMV7pjL5lUjJzzw==} engines: {node: '>=18'} hasBin: true @@ -1559,8 +1559,8 @@ packages: engines: {node: '>=16'} hasBin: true - '@playwright/test@1.45.0': - resolution: {integrity: sha512-TVYsfMlGAaxeUllNkywbwek67Ncf8FRGn8ZlRdO291OL3NjG9oMbfVhyP82HQF0CZLMrYsvesqoUekxdWuF9Qw==} + '@playwright/test@1.49.1': + resolution: {integrity: sha512-Ky+BVzPz8pL6PQxHqNRW1k3mIyv933LML7HktS8uik0bUXNCdPhoS/kLihiO1tMf/egaJb4IutXd7UywvXEW+g==} engines: {node: '>=18'} hasBin: true @@ -2509,11 +2509,6 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true - browserslist@4.23.1: - resolution: {integrity: sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==} - engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} - hasBin: true - browserslist@4.24.2: resolution: {integrity: sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} @@ -2568,9 +2563,6 @@ packages: caniuse-lite@1.0.30001553: resolution: {integrity: sha512-N0ttd6TrFfuqKNi+pMgWJTb9qrdJu4JSpgPFLe/lrD19ugC6fZgF0pUewRowDwzdDnb9V41mFcdlYgl/PyKf4A==} - caniuse-lite@1.0.30001639: - resolution: {integrity: sha512-eFHflNTBIlFwP2AIKaYuBQN/apnUoKNhBdza8ZnW/h2di4LCZ4xFqYlxUxo+LQ76KFI1PGcC1QDxMbxTZpSCAg==} - caniuse-lite@1.0.30001680: resolution: {integrity: sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==} @@ -3109,9 +3101,6 @@ packages: electron-to-chromium@1.4.563: resolution: {integrity: sha512-dg5gj5qOgfZNkPNeyKBZQAQitIQ/xwfIDmEQJHCbXaD9ebTZxwJXUsDYcBlAvZGZLi+/354l35J1wkmP6CqYaw==} - electron-to-chromium@1.4.815: - resolution: {integrity: sha512-OvpTT2ItpOXJL7IGcYakRjHCt8L5GrrN/wHCQsRB4PQa1X9fe+X9oen245mIId7s14xvArCGSTIq644yPUKKLg==} - electron-to-chromium@1.5.56: resolution: {integrity: sha512-7lXb9dAvimCFdvUMTyucD4mnIndt/xhRKFAlky0CyFogdnNmdPQNoHI23msF/2V4mpTxMzgMdjK4+YRlFlRQZw==} @@ -3207,10 +3196,6 @@ packages: resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} engines: {node: '>=6'} - escalade@3.1.2: - resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==} - engines: {node: '>=6'} - escalade@3.2.0: resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==} engines: {node: '>=6'} @@ -4514,9 +4499,6 @@ packages: node-releases@2.0.13: resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==} - node-releases@2.0.14: - resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==} - node-releases@2.0.18: resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==} @@ -4738,8 +4720,8 @@ packages: engines: {node: '>=16'} hasBin: true - playwright-core@1.45.0: - resolution: {integrity: sha512-lZmHlFQ0VYSpAs43dRq1/nJ9G/6SiTI7VPqidld9TDefL9tX87bTKExWZZUF5PeRyqtXqd8fQi2qmfIedkwsNQ==} + playwright-core@1.49.1: + resolution: {integrity: sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==} engines: {node: '>=18'} hasBin: true @@ -4748,8 +4730,8 @@ packages: engines: {node: '>=16'} hasBin: true - playwright@1.45.0: - resolution: {integrity: sha512-4z3ac3plDfYzGB6r0Q3LF8POPR20Z8D0aXcxbJvmfMgSSq1hkcgvFRXJk9rUq5H/MJ0Ktal869hhOdI/zUTeLA==} + playwright@1.49.1: + resolution: {integrity: sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==} engines: {node: '>=18'} hasBin: true @@ -6189,11 +6171,6 @@ packages: engines: {node: '>=14.17'} hasBin: true - typescript@5.4.5: - resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==} - engines: {node: '>=14.17'} - hasBin: true - typescript@5.7.3: resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==} engines: {node: '>=14.17'} @@ -6277,12 +6254,6 @@ packages: peerDependencies: browserslist: '>= 4.21.0' - update-browserslist-db@1.0.16: - resolution: {integrity: sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==} - hasBin: true - peerDependencies: - browserslist: '>= 4.21.0' - update-browserslist-db@1.1.1: resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==} hasBin: true @@ -6775,7 +6746,7 @@ snapshots: '@babel/traverse': 7.24.7 '@babel/types': 7.24.7 convert-source-map: 2.0.0 - debug: 4.3.5 + debug: 4.4.0 gensync: 1.0.0-beta.2 json5: 2.2.3 semver: 6.3.1 @@ -6812,7 +6783,7 @@ snapshots: dependencies: '@babel/compat-data': 7.24.7 '@babel/helper-validator-option': 7.24.7 - browserslist: 4.23.1 + browserslist: 4.24.2 lru-cache: 5.1.1 semver: 6.3.1 @@ -7027,7 +6998,7 @@ snapshots: '@babel/helper-split-export-declaration': 7.24.7 '@babel/parser': 7.24.7 '@babel/types': 7.24.7 - debug: 4.3.7 + debug: 4.4.0 globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -7702,10 +7673,10 @@ snapshots: '@nodelib/fs.scandir': 2.1.5 fastq: 1.15.0 - '@playwright/experimental-ct-core@1.45.0(@types/node@20.14.6)(terser@5.31.0)': + '@playwright/experimental-ct-core@1.49.1(@types/node@20.14.6)(terser@5.31.0)': dependencies: - playwright: 1.45.0 - playwright-core: 1.45.0 + playwright: 1.49.1 + playwright-core: 1.49.1 vite: 5.4.11(@types/node@20.14.6)(terser@5.31.0) transitivePeerDependencies: - '@types/node' @@ -7717,9 +7688,9 @@ snapshots: - sugarss - terser - '@playwright/experimental-ct-react@1.45.0(@types/node@20.14.6)(terser@5.31.0)(vite@6.0.7(@types/node@20.14.6)(terser@5.31.0))': + '@playwright/experimental-ct-react@1.49.1(@types/node@20.14.6)(terser@5.31.0)(vite@6.0.7(@types/node@20.14.6)(terser@5.31.0))': dependencies: - '@playwright/experimental-ct-core': 1.45.0(@types/node@20.14.6)(terser@5.31.0) + '@playwright/experimental-ct-core': 1.49.1(@types/node@20.14.6)(terser@5.31.0) '@vitejs/plugin-react': 4.3.1(vite@6.0.7(@types/node@20.14.6)(terser@5.31.0)) transitivePeerDependencies: - '@types/node' @@ -7737,9 +7708,9 @@ snapshots: dependencies: playwright: 1.44.1 - '@playwright/test@1.45.0': + '@playwright/test@1.49.1': dependencies: - playwright: 1.45.0 + playwright: 1.49.1 '@polka/url@1.0.0-next.24': {} @@ -8853,13 +8824,6 @@ snapshots: node-releases: 2.0.13 update-browserslist-db: 1.0.13(browserslist@4.22.1) - browserslist@4.23.1: - dependencies: - caniuse-lite: 1.0.30001639 - electron-to-chromium: 1.4.815 - node-releases: 2.0.14 - update-browserslist-db: 1.0.16(browserslist@4.23.1) - browserslist@4.24.2: dependencies: caniuse-lite: 1.0.30001680 @@ -8920,8 +8884,6 @@ snapshots: caniuse-lite@1.0.30001553: {} - caniuse-lite@1.0.30001639: {} - caniuse-lite@1.0.30001680: {} caseless@0.12.0: {} @@ -9506,8 +9468,6 @@ snapshots: electron-to-chromium@1.4.563: {} - electron-to-chromium@1.4.815: {} - electron-to-chromium@1.5.56: {} emoji-regex@10.3.0: {} @@ -9796,8 +9756,6 @@ snapshots: escalade@3.1.1: {} - escalade@3.1.2: {} - escalade@3.2.0: {} escape-string-regexp@1.0.5: {} @@ -11449,8 +11407,6 @@ snapshots: node-releases@2.0.13: {} - node-releases@2.0.14: {} - node-releases@2.0.18: {} normalize-package-data@2.5.0: @@ -11674,7 +11630,7 @@ snapshots: playwright-core@1.44.1: {} - playwright-core@1.45.0: {} + playwright-core@1.49.1: {} playwright@1.44.1: dependencies: @@ -11682,9 +11638,9 @@ snapshots: optionalDependencies: fsevents: 2.3.2 - playwright@1.45.0: + playwright@1.49.1: dependencies: - playwright-core: 1.45.0 + playwright-core: 1.49.1 optionalDependencies: fsevents: 2.3.2 @@ -13330,8 +13286,6 @@ snapshots: typescript@5.4.2: {} - typescript@5.4.5: {} - typescript@5.7.3: {} ultrahtml@1.5.2: {} @@ -13426,12 +13380,6 @@ snapshots: escalade: 3.1.1 picocolors: 1.0.0 - update-browserslist-db@1.0.16(browserslist@4.23.1): - dependencies: - browserslist: 4.23.1 - escalade: 3.1.2 - picocolors: 1.1.1 - update-browserslist-db@1.1.1(browserslist@4.24.2): dependencies: browserslist: 4.24.2