alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use untrack in useSvelteFlow hook

Browse Source
This commit is contained in:
peterkogo
2025-01-20 16:39:37 +01:00
parent 547f59293b
commit 925edfd91e
3 changed files with 48 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
View File

@@ -9,9 +9,8 @@
type NodeProps
} from '@xyflow/svelte';
import { isTextNode, type MyNode } from './+page.svelte';
import { untrack } from 'svelte';
let { id, data }: NodeProps<Node<{ text: string }>> = $props();
let { id }: NodeProps<Node<{ text: string }>> = $props();
const { updateNodeData } = useSvelteFlow();
const connections = useNodeConnections({
@@ -20,21 +19,19 @@
});
let nodeData = $derived(useNodesData<MyNode>(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);
});
</script>

13
packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
View File

@@ -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: Node) => Partial<Node>),
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: Edge) => Partial<Edge>),
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 {

110
pnpm-lock.yaml generated
View File

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