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

first working version with using $state for nodes & edges

Browse Source
This commit is contained in:
peterkogo
2024-12-09 12:07:10 +01:00
parent 4fcde6f6bf
commit d0fce3984d
24 changed files with 400 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/svelte/package.json
View File

@@ -21,7 +21,7 @@
"eslint-plugin-svelte": "^2.46.1",
"prettier": "^3.4.2",
"prettier-plugin-svelte": "^3.3.2",
"svelte": "^5.7.1",
"svelte": "^5.9.0",
"svelte-check": "^4.1.1",
"tslib": "^2.8.1",
"typescript": "^5.6.3",

20
examples/svelte/src/routes/examples/overview/+page.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { writable } from 'svelte/store';
import {
SvelteFlow,
Controls,
@@ -38,7 +37,7 @@
nodes: [{ id: '1' }, { id: '2' }]
};
const nodes = writable<Node[]>([
let nodes = $state.raw<Node[]>([
{
id: '1',
type: 'input',
@@ -100,7 +99,7 @@
}
]);
const edges = writable<Edge[]>([
let edges = $state.raw<Edge[]>([
{
id: '1-2',
type: 'default',
@@ -125,21 +124,21 @@
]);
function updateNode() {
$nodes[0].position.x += 20;
$nodes = $nodes;
nodes[0].position.x += 20;
// nodes = $nodes;
}
function updateEdge() {
$edges[0].type = $edges[0].type === 'default' ? 'smoothstep' : 'default';
$edges = $edges;
edges[0].type = edges[0].type === 'default' ? 'smoothstep' : 'default';
// edges = $edges;
}
$inspect($nodes);
// $inspect(nodes);
</script>
<SvelteFlow
{nodes}
{edges}
bind:nodes
bind:edges
{nodeTypes}
{edgeTypes}
fitView
@@ -211,7 +210,6 @@
<button onclick={updateEdge}>update edge type</button>
<button
onclick={() => {
console.log($nodes, $nodes.length);
$nodes[$nodes.length - 1].hidden = !$nodes[$nodes.length - 1].hidden;
$nodes = $nodes;
}}>hide/unhide</button

9
examples/svelte/src/routes/examples/stress/+page.svelte
View File

@@ -29,7 +29,8 @@
id,
data,
position,
type: 'default'
type: 'default',
selected: true
};
nodeItems.push(node);
@@ -46,11 +47,11 @@
}
}
const nodes = writable(nodeItems);
const edges = writable(edgeItems);
let nodes = $state.raw(nodeItems);
let edges = $state.raw([]);
</script>
<SvelteFlow {nodes} {edges} fitView minZoom={0.2}>
<SvelteFlow bind:nodes bind:edges fitView minZoom={0.2}>
<Controls />
<Background variant={BackgroundVariant.Lines} />
<MiniMap />

3
examples/svelte/vite.config.ts
View File

@@ -3,6 +3,9 @@ import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()],
build: {
sourcemap: true
},
server: {
fs: {
// Allow serving files from one level up to the project root

3
packages/svelte/package.json
View File

@@ -58,6 +58,7 @@
"@sveltejs/adapter-auto": "^3.3.1",
"@sveltejs/kit": "^2.9.0",
"@sveltejs/package": "^2.3.7",
"@sveltejs/vite-plugin-svelte": "^5.0.1",
"@typescript-eslint/eslint-plugin": "^8.17.0",
"@typescript-eslint/parser": "^8.17.0",
"autoprefixer": "^10.4.20",
@@ -74,7 +75,7 @@
"postcss-rename": "^0.6.1",
"prettier": "^3.4.2",
"prettier-plugin-svelte": "^3.3.2",
"svelte": "^5.7.1",
"svelte": "^5.9.0",
"svelte-check": "^4.1.1",
"svelte-eslint-parser": "^0.43.0",
"svelte-preprocess": "^6.0.3",

4
packages/svelte/src/lib/actions/drag/index.ts
View File

@@ -28,9 +28,9 @@ export default function drag(domNode: Element, params: UseDragParams) {
const { snapGrid, viewport } = store;
return {
nodes: get(store.nodes),
nodes: store.nodes,
nodeLookup: store.nodeLookup,
edges: get(store.edges),
edges: store.edges,
nodeExtent: store.nodeExtent,
snapGrid: snapGrid ? snapGrid : [0, 0],
snapToGrid: !!snapGrid,

5
packages/svelte/src/lib/components/Handle/Handle.svelte
View File

@@ -40,7 +40,7 @@
);
let store = useStore();
let { edges } = store;
// let { edges } = store;
function onPointerDown(event: MouseEvent | TouchEvent) {
const isMouseTriggered = isMouseEvent(event);
@@ -91,7 +91,8 @@
$effect.pre(() => {
// connectionLookup is not reactive, so we use edges to get notified about updates
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
$edges;
// $edges;
store.edges;
if (onconnect || ondisconnect) {
let connections = store.connectionLookup.get(`${nodeId}-${type}-${handleId}`);

18
packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
View File

@@ -20,7 +20,7 @@
zoomActivationKey = isMacOs() ? 'Meta' : 'Control'
}: KeyHandlerProps = $props();
const { nodes: _nodes, edges: _edges } = store;
// const { nodes: _nodes, edges: _edges } = store;
function isKeyObject(key?: KeyDefinition | null): key is KeyDefinitionObject {
return key !== null && typeof key === 'object';
@@ -66,22 +66,22 @@
}
async function handleDelete() {
const nodes = get(_nodes);
const edges = get(_edges);
const selectedNodes = nodes.filter((node) => node.selected);
const selectedEdges = edges.filter((edge) => edge.selected);
// const nodes = get(_nodes);
// const edges = get(_edges);
const selectedNodes = store.nodes.filter((node) => node.selected);
const selectedEdges = store.edges.filter((edge) => edge.selected);
const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
nodesToRemove: selectedNodes,
edgesToRemove: selectedEdges,
nodes,
edges,
nodes: store.nodes,
edges: store.edges,
onBeforeDelete: store.onbeforedelete
});
if (matchingNodes.length || matchingEdges.length) {
_nodes.update((nds) => nds.filter((node) => !matchingNodes.some((mN) => mN.id === node.id)));
_edges.update((eds) => eds.filter((edge) => !matchingEdges.some((mE) => mE.id === edge.id)));
// _nodes.update((nds) => nds.filter((node) => !matchingNodes.some((mN) => mN.id === node.id)));
// _edges.update((eds) => eds.filter((edge) => !matchingEdges.some((mE) => mE.id === edge.id)));
store.ondelete?.({
nodes: matchingNodes,

8
packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
View File

@@ -15,24 +15,24 @@
onselectioncontextmenu
}: NodeSelectionProps = $props();
const { nodes } = store;
// const { nodes } = store;
let bounds: Rect | null = $derived.by(() => {
if (store.selectionRectMode === 'nodes') {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
$nodes;
store.nodes;
return getInternalNodesBounds(store.nodeLookup, { filter: (node) => !!node.selected });
}
return null;
});
function oncontextmenu(event: MouseEvent | TouchEvent) {
const selectedNodes = $nodes.filter((n) => n.selected);
const selectedNodes = store.nodes.filter((n) => n.selected);
onselectioncontextmenu?.({ nodes: selectedNodes, event });
}
function onclick(event: MouseEvent | TouchEvent) {
const selectedNodes = $nodes.filter((n) => n.selected);
const selectedNodes = store.nodes.filter((n) => n.selected);
onselectionclick?.({ nodes: selectedNodes, event });
}
</script>

6
packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
View File

@@ -14,11 +14,11 @@
onedgemouseleave
}: { store: SvelteFlowStore } & EdgeEvents = $props();
const { edges, nodes } = store;
// const { edges, nodes } = store;
let layoutedEdges = $derived.by(() => {
$nodes;
const layoutedEdges = $edges.reduce<EdgeLayouted[]>((res, edge) => {
store.nodes;
const layoutedEdges = store.edges.reduce<EdgeLayouted[]>((res, edge) => {
const sourceNode = store.nodeLookup.get(edge.source);
const targetNode = store.nodeLookup.get(edge.target);

15
packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
View File

@@ -2,7 +2,7 @@
import { onDestroy } from 'svelte';
import { nodeHasDimensions } from '@xyflow/system';
import type { NodeEvents } from '$lib/types';
import type { Node, NodeEvents } from '$lib/types';
import { NodeWrapper } from '$lib/components/NodeWrapper';
import type { SvelteFlowStore } from '$lib/store/types';
@@ -19,7 +19,7 @@
onnodedragstop
}: { store: SvelteFlowStore; nodeClickDistance?: number } & NodeEvents = $props();
const { nodes } = store;
// const { nodes } = store;
const resizeObserver: ResizeObserver | null =
typeof ResizeObserver === 'undefined'
@@ -43,10 +43,19 @@
onDestroy(() => {
resizeObserver?.disconnect();
});
function give(node: Node) {
const internalNode = store.nodeLookup.get(node.id);
// console.log('this reruns most definitely', internalNode);
console.log(internalNode?.position);
return internalNode;
}
// $inspect(store.nodes).with(console.trace);
</script>
<div class="svelte-flow__nodes">
{#each $nodes as node (node.id)}
{#each store.nodes as node (node.id)}
{@const internalNode = store.nodeLookup.get(node.id)}
<NodeWrapper
{store}

10
packages/svelte/src/lib/container/Pane/Pane.svelte
View File

@@ -45,7 +45,7 @@
children
}: PaneProps = $props();
const { nodes, edges } = store;
// const { nodes, edges } = store;
// svelte-ignore non_reactive_update
let container: HTMLDivElement;
@@ -126,7 +126,7 @@
height: Math.abs(mousePos.y - startY)
};
const prevSelectedNodeIds = selectedNodes.map((n) => n.id);
const prevSelectedEdgeIds = getConnectedEdges(selectedNodes, $edges).map((e) => e.id);
const prevSelectedEdgeIds = getConnectedEdges(selectedNodes, store.edges).map((e) => e.id);
selectedNodes = getNodesInside(
store.nodeLookup,
@@ -135,7 +135,7 @@
store.selectionMode === SelectionMode.Partial,
true
);
const selectedEdgeIds = getConnectedEdges(selectedNodes, $edges).map((e) => e.id);
const selectedEdgeIds = getConnectedEdges(selectedNodes, store.edges).map((e) => e.id);
const selectedNodeIds = selectedNodes.map((n) => n.id);
// this prevents unnecessary updates while updating the selection rectangle
@@ -143,14 +143,14 @@
prevSelectedNodeIds.length !== selectedNodeIds.length ||
selectedNodeIds.some((id) => !prevSelectedNodeIds.includes(id))
) {
nodes.update((nodes) => nodes.map(toggleSelected(selectedNodeIds)));
// store.nodes.update((nodes) => nodes.map(toggleSelected(selectedNodeIds)));
}
if (
prevSelectedEdgeIds.length !== selectedEdgeIds.length ||
selectedEdgeIds.some((id) => !prevSelectedEdgeIds.includes(id))
) {
edges.update((edges) => edges.map(toggleSelected(selectedEdgeIds)));
// store.edges.update((edges) => edges.map(toggleSelected(selectedEdgeIds)));
}
store.selectionRectMode = 'user';

205
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
View File

@@ -1,5 +1,8 @@
<!-- TODO: why is this neccessary for types to work?? -->
<svelte:options runes={true} />
<script lang="ts">
import { onMount, getContext, setContext } from 'svelte';
import { getContext, setContext, onDestroy } from 'svelte';
import cc from 'classcat';
import { PanOnScrollMode } from '@xyflow/system';
@@ -64,28 +67,45 @@
connectionLineStyle = '',
attributionPosition,
children,
nodes = $bindable([]),
edges = $bindable([]),
...props
}: SvelteFlowProps = $props();
// svelte-ignore perf_avoid_inline_class
const container: ContainerSignals = new (class {
domNode = $state<HTMLDivElement>();
width = $state<number | undefined>(width);
height = $state<number | undefined>(height);
})();
let domNode = $state<HTMLDivElement>();
let clientWidth = $state<number | undefined>(width);
let clientHeight = $state<number | undefined>(height);
const store = createStore({
props,
container
get domNode() {
return domNode;
},
get width() {
return clientWidth;
},
get height() {
return clientHeight;
},
get nodes() {
return nodes;
},
set nodes(newNodes) {
nodes = newNodes;
},
get edges() {
return edges;
},
set edges(newEdges) {
edges = newEdges;
}
});
store.syncNodeStores(props.nodes);
store.syncEdgeStores(props.edges);
const providerContext = getContext<ProviderContext>(key);
if (providerContext) {
providerContext.setStore(store);
}
setContext(key, {
provider: false,
getStore() {
@@ -93,93 +113,94 @@
}
} satisfies StoreContext);
onMount(() => {
return () => {
store.reset();
};
onDestroy(() => {
store.reset();
});
let colorModeClass = $derived(useColorModeClass(store.colorMode));
</script>
<div
bind:this={container.domNode}
bind:clientWidth={container.width}
bind:clientHeight={container.height}
style:width
style:height
{style}
class={cc(['svelte-flow', className, $colorModeClass])}
data-testid="svelte-flow__wrapper"
{...props}
role="application"
>
<KeyHandler
{store}
{selectionKey}
{deleteKey}
{panActivationKey}
{multiSelectionKey}
{zoomActivationKey}
/>
<Zoom
{store}
{onMoveStart}
{onMove}
{onMoveEnd}
{panOnScrollMode}
{preventScrolling}
{zoomOnScroll}
{zoomOnDoubleClick}
{zoomOnPinch}
{panOnScroll}
{panOnDrag}
{paneClickDistance}
<!-- TODO: this is the only hack in the library so far. Can we get rid of it? -->
{#if store.adoptNodes && store.adoptEdges}
<div
bind:this={domNode}
bind:clientWidth
bind:clientHeight
style:width
style:height
{style}
class={cc(['svelte-flow', className, $colorModeClass])}
data-testid="svelte-flow__wrapper"
{...props}
role="application"
>
<Pane {store} {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
<ViewportComponent {store}>
<EdgeRenderer
{store}
{onedgeclick}
{onedgecontextmenu}
{onedgemouseenter}
{onedgemouseleave}
/>
<ConnectionLine
{store}
containerStyle={connectionLineContainerStyle}
style={connectionLineStyle}
{connectionLine}
/>
<div class="svelte-flow__edgelabel-renderer"></div>
<div class="svelte-flow__viewport-portal"></div>
<NodeRenderer
{store}
{nodeClickDistance}
{onnodeclick}
{onnodecontextmenu}
{onnodemouseenter}
{onnodemousemove}
{onnodemouseleave}
{onnodedrag}
{onnodedragstart}
{onnodedragstop}
/>
<NodeSelection
{store}
{onselectionclick}
{onselectioncontextmenu}
{onnodedrag}
{onnodedragstart}
{onnodedragstop}
/>
</ViewportComponent>
<UserSelection />
</Pane>
</Zoom>
<Attribution {proOptions} position={attributionPosition} />
{@render children?.()}
</div>
<KeyHandler
{store}
{selectionKey}
{deleteKey}
{panActivationKey}
{multiSelectionKey}
{zoomActivationKey}
/>
<Zoom
{store}
{onMoveStart}
{onMove}
{onMoveEnd}
{panOnScrollMode}
{preventScrolling}
{zoomOnScroll}
{zoomOnDoubleClick}
{zoomOnPinch}
{panOnScroll}
{panOnDrag}
{paneClickDistance}
>
<Pane {store} {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
<ViewportComponent {store}>
<EdgeRenderer
{store}
{onedgeclick}
{onedgecontextmenu}
{onedgemouseenter}
{onedgemouseleave}
/>
<ConnectionLine
{store}
containerStyle={connectionLineContainerStyle}
style={connectionLineStyle}
{connectionLine}
/>
<div class="svelte-flow__edgelabel-renderer"></div>
<div class="svelte-flow__viewport-portal"></div>
<NodeRenderer
{store}
{nodeClickDistance}
{onnodeclick}
{onnodecontextmenu}
{onnodemouseenter}
{onnodemousemove}
{onnodemouseleave}
{onnodedrag}
{onnodedragstart}
{onnodedragstop}
/>
<NodeSelection
{store}
{onselectionclick}
{onselectioncontextmenu}
{onnodedrag}
{onnodedragstart}
{onnodedragstop}
/>
</ViewportComponent>
<UserSelection />
</Pane>
</Zoom>
<Attribution {proOptions} position={attributionPosition} />
{@render children?.()}
</div>
{/if}
<style>
.svelte-flow {

6
packages/svelte/src/lib/container/SvelteFlow/types.ts
View File

@@ -59,7 +59,7 @@ export type SvelteFlowProps = NodeEvents &
* }
* ]);
*/
nodes: Writable<Node[]>;
nodes: Node[];
/** An array of edges to render in a controlled flow.
* @example
* const edges = writable([
@@ -70,7 +70,7 @@ export type SvelteFlowProps = NodeEvents &
* }
* ]);
*/
edges: Writable<Edge[]>;
edges: Edge[];
/** Custom node types to be available in a flow.
*
* Svelte Flow matches a node's type to a component in the nodeTypes object.
@@ -191,7 +191,7 @@ export type SvelteFlowProps = NodeEvents &
/**
* Controls if nodes should be automatically selected when being dragged
*/
selectNodesOnDrag: boolean;
selectNodesOnDrag?: boolean;
/** Grid all nodes will snap to
* @example [20, 20]
*/

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

@@ -278,7 +278,7 @@ export function useSvelteFlow(): {
}
const store = useStore();
const { nodes, edges } = store;
// const { nodes, edges } = store;
const getNodeRect = (node: Node | { id: Node['id'] }): Rect | null => {
const nodeToUse = isNode(node) ? node : store.nodeLookup.get(node.id)!;
@@ -316,20 +316,20 @@ export function useSvelteFlow(): {
const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate;
if (options.replace) {
nodes.update((nds) =>
nds.map((node) => {
if (node.id === id) {
return isNode(nextNode) ? nextNode : { ...node, ...nextNode };
}
// if (options.replace) {
// nodes.update((nds) =>
// nds.map((node) => {
// if (node.id === id) {
// return isNode(nextNode) ? nextNode : { ...node, ...nextNode };
// }
return node;
})
);
} else {
Object.assign(node, nextNode);
nodes.set(get(nodes));
}
// return node;
// })
// );
// } else {
// Object.assign(node, nextNode);
// nodes.set(store.nodes);
// }
};
const updateEdge = (
@@ -345,20 +345,20 @@ export function useSvelteFlow(): {
const nextEdge = typeof edgeUpdate === 'function' ? edgeUpdate(edge as Edge) : edgeUpdate;
if (options.replace) {
edges.update((edgs) =>
edgs.map((edge) => {
if (edge.id === id) {
return isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge };
}
// if (options.replace) {
// edges.update((edgs) =>
// edgs.map((edge) => {
// if (edge.id === id) {
// return isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge };
// }
return edge;
})
);
} else {
Object.assign(edge, nextEdge);
edges.set(get(edges));
}
// return edge;
// })
// );
// } else {
// Object.assign(edge, nextEdge);
// edges.set(store.edges);
// }
};
const getInternalNode = (id: string) => store.nodeLookup.get(id);
@@ -368,9 +368,9 @@ export function useSvelteFlow(): {
zoomOut: store.zoomOut,
getInternalNode,
getNode: (id) => getInternalNode(id)?.internals.userNode,
getNodes: (ids) => (ids === undefined ? get(nodes) : getElements(store.nodeLookup, ids)),
getNodes: (ids) => (ids === undefined ? store.nodes : getElements(store.nodeLookup, ids)),
getEdge: (id) => store.edgeLookup.get(id),
getEdges: (ids) => (ids === undefined ? get(edges) : getElements(store.edgeLookup, ids)),
getEdges: (ids) => (ids === undefined ? store.edges : getElements(store.edgeLookup, ids)),
setZoom: (zoomLevel, options) => {
const panZoom = store.panZoom;
return panZoom
@@ -447,7 +447,7 @@ export function useSvelteFlow(): {
return [];
}
return (nodesToIntersect || get(nodes)).filter((n) => {
return (nodesToIntersect || store.nodes).filter((n) => {
const internalNode = store.nodeLookup.get(n.id);
if (!internalNode || (!isRect && n.id === nodeOrRect.id)) {
return false;
@@ -481,22 +481,22 @@ export function useSvelteFlow(): {
const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
nodesToRemove,
edgesToRemove,
nodes: get(nodes),
edges: get(edges),
nodes: store.nodes,
edges: store.edges,
onBeforeDelete: store.onbeforedelete
});
if (matchingNodes) {
nodes.update((nds) =>
nds.filter((node) => !matchingNodes.some(({ id }) => id === node.id))
);
}
// if (matchingNodes) {
// nodes.update((nds) =>
// nds.filter((node) => !matchingNodes.some(({ id }) => id === node.id))
// );
// }
if (matchingEdges) {
edges.update((eds) =>
eds.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id))
);
}
// if (matchingEdges) {
// edges.update((eds) =>
// eds.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id))
// );
// }
return {
deletedNodes: matchingNodes,
@@ -548,14 +548,14 @@ export function useSvelteFlow(): {
toObject: () => {
return {
nodes: get(nodes).map((node) => ({
nodes: store.nodes.map((node) => ({
...node,
// we want to make sure that changes to the nodes object that gets returned by toObject
// do not affect the nodes object
position: { ...node.position },
data: { ...node.data }
})),
edges: get(edges).map((edge) => ({ ...edge })),
edges: store.edges.map((edge) => ({ ...edge })),
viewport: { ...store.viewport }
};
},
@@ -571,7 +571,7 @@ export function useSvelteFlow(): {
node.data = options?.replace ? nextData : { ...node.data, ...nextData };
nodes.update((nds) => nds);
// nodes.update((nds) => nds);
},
updateEdge,
getNodesBounds: (nodes) => {

4
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
View File

@@ -44,7 +44,7 @@
let store = useStore();
let nodes = $derived(store.nodes);
// let nodes = $derived(store.nodes);
const nodeColorFunc = nodeColor === undefined ? undefined : getAttrFunction(nodeColor);
const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
@@ -115,7 +115,7 @@
>
{#if ariaLabel}<title id={labelledBy}>{ariaLabel}</title>{/if}
{#each $nodes as userNode (userNode.id)}
{#each store.nodes as userNode (userNode.id)}
{@const node = store.nodeLookup.get(userNode.id)}
{#if node && nodeHasDimensions(node)}
{@const nodeDimesions = getNodeDimensions(node)}

2
packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
View File

@@ -93,7 +93,7 @@
}
}
store.nodes.set(get(store.nodes));
// store.nodes.set(get(store.nodes));
}
});
}

6
packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
View File

@@ -19,13 +19,13 @@
}: NodeToolbarProps = $props();
const store = useStore();
const { nodes } = store;
// const { nodes } = store;
const { getNodesBounds } = useSvelteFlow();
const contextNodeId = getContext<string>('svelteflow__node_id');
let toolbarNodes: InternalNode[] = $derived.by(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
$nodes;
store.nodes;
const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId ?? contextNodeId];
return nodeIds.reduce<InternalNode[]>((res, nodeId) => {
@@ -54,7 +54,7 @@
);
//FIXME: Possible performance bottleneck
let selectedNodesCount = $derived($nodes.filter((node) => node.selected).length);
let selectedNodesCount = $derived(store.nodes.filter((node) => node.selected).length);
// if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
let isActive = $derived(

113
packages/svelte/src/lib/store/index.ts
View File

@@ -1,4 +1,3 @@
import { get } from 'svelte/store';
import {
fitView as fitViewSystem,
panBy as panBySystem,
@@ -23,6 +22,7 @@ import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/type
import { initialEdgeTypes, initialNodeTypes, getInitialStore } from './initial-store.svelte';
import { type StoreSignals, type SvelteFlowStore, type SvelteFlowStoreActions } from './types';
import { syncNodeStores, syncEdgeStores } from './utils';
import drag from '$lib/actions/drag';
// import { getVisibleEdges } from './visible-edges';
// import { getVisibleNodes } from './visible-nodes';
@@ -48,23 +48,15 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
}
function addEdge(edgeParams: Edge | Connection) {
const edges = get(store.edges);
store.edges.set(addEdgeUtil(edgeParams, edges));
// TODO: let's see
store.edges = addEdgeUtil(edgeParams, store.edges);
}
const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => {
for (const [id, dragItem] of nodeDragItems) {
const node = store.nodeLookup.get(id)?.internals.userNode;
if (!node) {
continue;
}
node.position = dragItem.position;
node.dragging = dragging;
}
store.nodes.update((nds) => nds);
store.nodes = store.nodes.map((node) => {
const dragItem = nodeDragItems.get(node.id);
return dragItem ? { ...node, position: dragItem.position, dragging } : node;
});
};
function updateNodeInternals(updates: Map<string, InternalNodeUpdate>) {
@@ -93,13 +85,16 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
store.fitViewOnInitDone = fitViewOnInitDone;
}
const newNodes = new Map<string, Node>();
for (const change of changes) {
const node = store.nodeLookup.get(change.id)?.internals.userNode;
const userNode = store.nodeLookup.get(change.id)?.internals.userNode;
if (!node) {
if (!userNode) {
continue;
}
const node = { ...userNode };
switch (change.type) {
case 'dimensions': {
const measured = { ...node.measured, ...change.dimensions };
@@ -114,12 +109,15 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
}
case 'position':
node.position = change.position ?? node.position;
break;
}
newNodes.set(change.id, node);
}
store.nodes.update((nds) => nds);
// store.nodes.update((nds) => nds);
store.nodes = store.nodes.map((node) => newNodes.get(node.id) ?? node);
// signals.updateNodes((node) => newNodes.get(node.id) ?? node);
if (!store.nodesInitialized) {
store.nodesInitialized = true;
@@ -235,68 +233,65 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
}
function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
const resetNodes = resetSelectedElements(params?.nodes || get(store.nodes));
if (resetNodes) store.nodes.set(get(store.nodes));
resetSelectedElements(params?.nodes || store.nodes);
// if (resetNodes) store.nodes.set(get(store.nodes));
const resetEdges = resetSelectedElements(params?.edges || get(store.edges));
if (resetEdges) store.edges.set(get(store.edges));
resetSelectedElements(params?.edges || store.edges);
// if (resetEdges) store.edges.set(get(store.edges));
}
function addSelectedNodes(ids: string[]) {
const isMultiSelection = store.multiselectionKeyPressed;
store.nodes.update((ns) =>
ns.map((node) => {
const nodeWillBeSelected = ids.includes(node.id);
const selected = isMultiSelection
? node.selected || nodeWillBeSelected
: nodeWillBeSelected;
// store.nodes.update((ns) =>
store.nodes.forEach((node) => {
const nodeWillBeSelected = ids.includes(node.id);
const selected = isMultiSelection ? node.selected || nodeWillBeSelected : nodeWillBeSelected;
// we need to mutate the node here in order to have the correct selected state in the drag handler
node.selected = selected;
// we need to mutate the node here in order to have the correct selected state in the drag handler
node.selected = selected;
return node;
})
);
// return node;
});
// );
if (!isMultiSelection) {
store.edges.update((es) =>
es.map((edge) => {
edge.selected = false;
return edge;
})
);
// store.edges.forEach((es) =>
store.edges.forEach((edge) => {
edge.selected = false;
// return edge;
});
// );
}
}
function addSelectedEdges(ids: string[]) {
const isMultiSelection = store.multiselectionKeyPressed;
store.edges.update((edges) =>
edges.map((edge) => {
const edgeWillBeSelected = ids.includes(edge.id);
const selected = isMultiSelection
? edge.selected || edgeWillBeSelected
: edgeWillBeSelected;
// store.edges.update((edges) =>
store.edges.forEach((edge) => {
const edgeWillBeSelected = ids.includes(edge.id);
const selected = isMultiSelection ? edge.selected || edgeWillBeSelected : edgeWillBeSelected;
edge.selected = selected;
edge.selected = selected;
return edge;
})
);
// return edge;
});
// );
if (!isMultiSelection) {
store.nodes.update((ns) =>
ns.map((node) => {
node.selected = false;
return node;
})
);
// store.nodes.update((ns) =>
store.nodes.forEach((node) => {
node.selected = false;
// return node;
});
// );
}
}
function handleNodeSelection(id: string) {
const node = get(store.nodes)?.find((n) => n.id === id);
const node = store.nodes?.find((n) => n.id === id);
// const node = store.nodeLookup.get(id)?.internals.userNode;
if (!node) {
console.warn('012', errorMessages['error012'](id));
@@ -343,8 +338,8 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
}
const storeWithActions = Object.assign(store, {
syncNodeStores: (nodes) => syncNodeStores(store.nodes, nodes),
syncEdgeStores: (edges) => syncEdgeStores(store.edges, edges),
// syncNodeStores: (nodes) => syncNodeStores(store.nodes, nodes),
// syncEdgeStores: (edges) => syncEdgeStores(store.edges, edges),
// syncViewport: (viewport) => syncViewportStores(store.panZoom, store.viewport, viewport),
setNodeTypes,
setEdgeTypes,

70
packages/svelte/src/lib/store/initial-store.svelte.ts
View File

@@ -1,4 +1,3 @@
import { get, writable, type Writable } from 'svelte/store';
import {
infiniteExtent,
SelectionMode,
@@ -52,7 +51,7 @@ import type {
OnBeforeDelete,
IsValidConnection
} from '$lib/types';
import { createNodesStore, createEdgesStore } from './utils';
import type { StoreSignals } from './types';
export const initialNodeTypes = {
@@ -71,19 +70,39 @@ export const initialEdgeTypes = {
export const getInitialStore = (signals: StoreSignals) => {
class SvelteFlowStore {
nodes: ReturnType<typeof createNodesStore>;
edges: ReturnType<typeof createEdgesStore>;
get nodes() {
return signals.nodes;
}
set nodes(nodes) {
signals.nodes = nodes;
}
get edges() {
return signals.edges;
}
set edges(edges) {
signals.edges = edges;
}
nodeLookup: NodeLookup = new Map();
parentLookup: ParentLookup = new Map();
connectionLookup: ConnectionLookup = new Map();
edgeLookup: EdgeLookup = new Map();
adoptNodes: true = $derived.by(() => {
adoptUserNodes(signals.nodes, this.nodeLookup, this.parentLookup, {
nodeExtent: this.nodeExtent,
nodeOrigin: this.nodeOrigin,
elevateNodesOnSelect: false,
checkEquality: true
});
return true;
});
adoptEdges: true = $derived.by(() => {
updateConnectionLookup(this.connectionLookup, this.edgeLookup, signals.edges);
return true;
});
domNode: HTMLDivElement | null = $derived(
signals.container?.domNode ?? signals.props.domNode ?? null
);
width: number = $derived(signals.container?.width ?? signals.props.width ?? 0);
height: number = $derived(signals.container?.height ?? signals.props.height ?? 0);
domNode: HTMLDivElement | null = $derived(signals.domNode ?? signals.props.domNode ?? null);
width: number = $derived(signals.width ?? signals.props.width ?? 0);
height: number = $derived(signals.height ?? signals.props.height ?? 0);
flowId: string = $derived(signals.props.id ?? '1');
minZoom: number = $derived(signals.props.minZoom ?? 0.5);
@@ -149,12 +168,10 @@ export const getInitialStore = (signals: StoreSignals) => {
nodesConnectable: boolean = $derived(signals.props.nodesConnectable ?? true);
elementsSelectable: boolean = $derived(signals.props.elementsSelectable ?? true);
selectNodesOnDrag: boolean = $derived(signals.props.selectNodesOnDrag ?? true);
// // [store.edges, store.defaultMarkerColor, store.flowId],
// // ([edges, defaultColor, id]) => createMarkerIds(edges, { defaultColor, id })
defaultMarkerColor: string = $derived(signals.props.defaultMarkerColor ?? '#b1b1b7');
markers: MarkerProps[] = $derived.by(() => {
const edges = signals.props.edges ?? writable([]);
return createMarkerIds(get(edges), {
return createMarkerIds(signals.edges, {
defaultColor: this.defaultMarkerColor,
id: this.flowId
});
@@ -172,8 +189,8 @@ export const getInitialStore = (signals: StoreSignals) => {
edgesInitialized: boolean = $state(false);
viewportInitialized: boolean = $state(false);
initialNodesLength: number = signals.props.nodes ? get(signals.props.nodes)?.length : 0;
initialEdgesLength: number = signals.props.edges ? get(signals.props.edges)?.length : 0;
initialNodesLength: number = signals.nodes.length;
initialEdgesLength: number = signals.edges.length;
initialized: boolean = $derived.by(() => {
let initialized = false;
// if it hasn't been initialised check if it's now
@@ -190,27 +207,6 @@ export const getInitialStore = (signals: StoreSignals) => {
colorMode: ColorMode = $derived(signals.props.colorMode ?? 'light');
constructor() {
const nodes = signals.props.nodes ? get(signals.props.nodes) : [];
const edges = signals.props.edges ? get(signals.props.edges) : [];
this.nodes = createNodesStore(
nodes,
this.nodeLookup,
this.parentLookup,
this.nodeOrigin,
this.nodeExtent
);
adoptUserNodes(nodes, this.nodeLookup, this.parentLookup, {
nodeExtent: this.nodeExtent,
nodeOrigin: this.nodeOrigin,
elevateNodesOnSelect: false,
checkEquality: false
});
this.edges = createEdgesStore(edges, this.connectionLookup, this.edgeLookup);
updateConnectionLookup(this.connectionLookup, this.edgeLookup, edges);
if (signals.props.fitView && !signals.props.initialViewport && this.width && this.height) {
const bounds = getInternalNodesBounds(this.nodeLookup, {
filter: (node) =>

13
packages/svelte/src/lib/store/types.ts
View File

@@ -6,8 +6,7 @@ import type {
Connection,
UpdateNodePositions,
CoordinateExtent,
UpdateConnection,
Viewport
UpdateConnection
} from '@xyflow/system';
import type { getInitialStore } from './initial-store.svelte';
@@ -15,8 +14,8 @@ import type { Node, Edge, NodeTypes, EdgeTypes, FitViewOptions } from '$lib/type
import type { SvelteFlowProps } from '$lib/container/SvelteFlow';
export type SvelteFlowStoreActions = {
syncNodeStores: (nodesStore: Writable<Node[]>) => void;
syncEdgeStores: (edgeStore: Writable<Edge[]>) => void;
// syncNodeStores: (nodesStore: Writable<Node[]>) => void;
// syncEdgeStores: (edgeStore: Writable<Edge[]>) => void;
// syncViewport: (viewportStore?: Writable<Viewport>) => void;
setNodeTypes: (nodeTypes: NodeTypes) => void;
setEdgeTypes: (edgeTypes: EdgeTypes) => void;
@@ -43,7 +42,11 @@ export type SvelteFlowStoreActions = {
export type ContainerSignals = { domNode?: HTMLDivElement | null; width?: number; height?: number };
export type StoreSignals = {
props: Partial<SvelteFlowProps> & ContainerSignals;
container?: ContainerSignals;
domNode?: HTMLDivElement;
width?: number;
height?: number;
nodes: Node[];
edges: Edge[];
};
export type SvelteFlowStoreState = ReturnType<typeof getInitialStore>;

32
packages/svelte/src/routes/+page.svelte.d.ts vendored
View File

@@ -1,23 +1,23 @@
/** @typedef {typeof __propDef.props} PageProps */
/** @typedef {typeof __propDef.events} PageEvents */
/** @typedef {typeof __propDef.slots} PageSlots */
export default class Page extends SvelteComponentTyped<{
[x: string]: never;
}, {
[evt: string]: CustomEvent<any>;
}, {}> {
}
// export default class Page extends SvelteComponentTyped<{
// [x: string]: never;
// }, {
// [evt: string]: CustomEvent<any>;
// }, {}> {
// }
export type PageProps = typeof __propDef.props;
export type PageEvents = typeof __propDef.events;
export type PageSlots = typeof __propDef.slots;
import { SvelteComponentTyped } from "svelte";
declare const __propDef: {
props: {
[x: string]: never;
};
events: {
[evt: string]: CustomEvent<any>;
};
slots: {};
};
// import { SvelteComponentTyped } from "svelte";
// declare const __propDef: {
// props: {
// [x: string]: never;
// };
// events: {
// [evt: string]: CustomEvent<any>;
// };
// slots: {};
// };
export {};

7
packages/svelte/svelte.config.js
View File

@@ -1,9 +1,12 @@
import adapter from '@sveltejs/adapter-auto';
import { sveltePreprocess } from 'svelte-preprocess';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: sveltePreprocess(),
preprocess: vitePreprocess(),
compilerOptions: {
runes: true
},
kit: {
adapter: adapter()
}

115
pnpm-lock.yaml generated
View File

@@ -173,17 +173,17 @@ importers:
version: 1.1.4
'@sveltejs/vite-plugin-svelte':
specifier: ^5.0.1
version: 5.0.1(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
version: 5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
'@xyflow/svelte':
specifier: workspace:^
version: link:../../packages/svelte
devDependencies:
'@sveltejs/adapter-auto':
specifier: ^3.3.1
version: 3.3.1(@sveltejs/kit@2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))
version: 3.3.1(@sveltejs/kit@2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))
'@sveltejs/kit':
specifier: ^2.9.0
version: 2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
version: 2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
'@typescript-eslint/eslint-plugin':
specifier: ^8.17.0
version: 8.17.0(@typescript-eslint/parser@8.17.0(eslint@8.53.0)(typescript@5.6.3))(eslint@8.53.0)(typescript@5.6.3)
@@ -198,19 +198,19 @@ importers:
version: 9.1.0(eslint@8.53.0)
eslint-plugin-svelte:
specifier: ^2.46.1
version: 2.46.1(eslint@8.53.0)(svelte@5.7.1)
version: 2.46.1(eslint@8.53.0)(svelte@5.9.0)
prettier:
specifier: ^3.4.2
version: 3.4.2
prettier-plugin-svelte:
specifier: ^3.3.2
version: 3.3.2(prettier@3.4.2)(svelte@5.7.1)
version: 3.3.2(prettier@3.4.2)(svelte@5.9.0)
svelte:
specifier: ^5.7.1
version: 5.7.1
specifier: ^5.9.0
version: 5.9.0
svelte-check:
specifier: ^4.1.1
version: 4.1.1(svelte@5.7.1)(typescript@5.6.3)
version: 4.1.1(svelte@5.9.0)(typescript@5.6.3)
tslib:
specifier: ^2.8.1
version: 2.8.1
@@ -289,7 +289,7 @@ importers:
dependencies:
'@svelte-put/shortcut':
specifier: ^4.0.0
version: 4.0.0(svelte@5.7.1)
version: 4.0.0(svelte@5.9.0)
'@xyflow/system':
specifier: workspace:*
version: link:../system
@@ -299,13 +299,16 @@ importers:
devDependencies:
'@sveltejs/adapter-auto':
specifier: ^3.3.1
version: 3.3.1(@sveltejs/kit@2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))
version: 3.3.1(@sveltejs/kit@2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))
'@sveltejs/kit':
specifier: ^2.9.0
version: 2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
version: 2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
'@sveltejs/package':
specifier: ^2.3.7
version: 2.3.7(svelte@5.7.1)(typescript@5.6.3)
version: 2.3.7(svelte@5.9.0)(typescript@5.6.3)
'@sveltejs/vite-plugin-svelte':
specifier: ^5.0.1
version: 5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
'@typescript-eslint/eslint-plugin':
specifier: ^8.17.0
version: 8.17.0(@typescript-eslint/parser@8.17.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3)
@@ -329,7 +332,7 @@ importers:
version: 9.1.0(eslint@8.57.0)
eslint-plugin-svelte:
specifier: ^2.46.1
version: 2.46.1(eslint@8.57.0)(svelte@5.7.1)
version: 2.46.1(eslint@8.57.0)(svelte@5.9.0)
postcss:
specifier: ^8.4.49
version: 8.4.49
@@ -353,19 +356,19 @@ importers:
version: 3.4.2
prettier-plugin-svelte:
specifier: ^3.3.2
version: 3.3.2(prettier@3.4.2)(svelte@5.7.1)
version: 3.3.2(prettier@3.4.2)(svelte@5.9.0)
svelte:
specifier: ^5.7.1
version: 5.7.1
specifier: ^5.9.0
version: 5.9.0
svelte-check:
specifier: ^4.1.1
version: 4.1.1(svelte@5.7.1)(typescript@5.6.3)
version: 4.1.1(svelte@5.9.0)(typescript@5.6.3)
svelte-eslint-parser:
specifier: ^0.43.0
version: 0.43.0(svelte@5.7.1)
version: 0.43.0(svelte@5.9.0)
svelte-preprocess:
specifier: ^6.0.3
version: 6.0.3(@babel/core@7.24.7)(postcss-load-config@5.0.2(postcss@8.4.49))(postcss@8.4.49)(svelte@5.7.1)(typescript@5.6.3)
version: 6.0.3(@babel/core@7.24.7)(postcss-load-config@5.0.2(postcss@8.4.49))(postcss@8.4.49)(svelte@5.9.0)(typescript@5.6.3)
tslib:
specifier: ^2.8.1
version: 2.8.1
@@ -5956,8 +5959,8 @@ packages:
resolution: {integrity: sha512-LpLqY2Jr7cRxkrTc796/AaaoMLF/1ax7cto8Ot76wrvKQhrPmZ0JgajiWPmg9mTSDqO16SSLiD17r9MsvAPTmw==}
engines: {node: '>=16'}
svelte@5.7.1:
resolution: {integrity: sha512-kUtiiNcN7ssi5X8OQW8IILoI53RUudjn8TD1910i8cg5c5IRZ4IuaDO1vFl+kZcvv1geYBxlFpi/mj09m/CCBg==}
svelte@5.9.0:
resolution: {integrity: sha512-ZcC3BtjIDa4yfhAyAr94MxDQLD97zbpXmaUldFv2F5AkdZwYgQYB3BZVNRU5zEVaeeHoAns8ADiRMnre3QmpxQ==}
engines: {node: '>=18'}
svgo@3.0.2:
@@ -7625,7 +7628,7 @@ snapshots:
'@jridgewell/gen-mapping@0.3.3':
dependencies:
'@jridgewell/set-array': 1.1.2
'@jridgewell/sourcemap-codec': 1.4.15
'@jridgewell/sourcemap-codec': 1.5.0
'@jridgewell/trace-mapping': 0.3.20
'@jridgewell/gen-mapping@0.3.5':
@@ -7908,18 +7911,18 @@ snapshots:
'@sindresorhus/merge-streams@1.0.0': {}
'@svelte-put/shortcut@4.0.0(svelte@5.7.1)':
'@svelte-put/shortcut@4.0.0(svelte@5.9.0)':
dependencies:
svelte: 5.7.1
svelte: 5.9.0
'@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))':
'@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))':
dependencies:
'@sveltejs/kit': 2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
'@sveltejs/kit': 2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
import-meta-resolve: 4.1.0
'@sveltejs/kit@2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))':
'@sveltejs/kit@2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))':
dependencies:
'@sveltejs/vite-plugin-svelte': 5.0.1(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
'@sveltejs/vite-plugin-svelte': 5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
'@types/cookie': 0.6.0
cookie: 0.6.0
devalue: 5.1.1
@@ -7931,18 +7934,18 @@ snapshots:
sade: 1.8.1
set-cookie-parser: 2.6.0
sirv: 3.0.0
svelte: 5.7.1
svelte: 5.9.0
tiny-glob: 0.2.9
vite: 6.0.3(@types/node@20.14.6)(terser@5.31.0)
'@sveltejs/package@2.3.7(svelte@5.7.1)(typescript@5.6.3)':
'@sveltejs/package@2.3.7(svelte@5.9.0)(typescript@5.6.3)':
dependencies:
chokidar: 4.0.1
kleur: 4.1.5
sade: 1.8.1
semver: 7.6.0
svelte: 5.7.1
svelte2tsx: 0.7.24(svelte@5.7.1)(typescript@5.6.3)
svelte: 5.9.0
svelte2tsx: 0.7.24(svelte@5.9.0)(typescript@5.6.3)
transitivePeerDependencies:
- typescript
@@ -7955,11 +7958,11 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))':
'@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))':
dependencies:
'@sveltejs/vite-plugin-svelte': 5.0.1(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
'@sveltejs/vite-plugin-svelte': 5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
debug: 4.3.7
svelte: 5.7.1
svelte: 5.9.0
vite: 6.0.3(@types/node@20.14.6)(terser@5.31.0)
transitivePeerDependencies:
- supports-color
@@ -7978,14 +7981,14 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))':
'@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))':
dependencies:
'@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.7.1)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
'@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
debug: 4.3.7
deepmerge: 4.3.1
kleur: 4.1.5
magic-string: 0.30.14
svelte: 5.7.1
svelte: 5.9.0
vite: 6.0.3(@types/node@20.14.6)(terser@5.31.0)
vitefu: 1.0.3(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
transitivePeerDependencies:
@@ -9872,7 +9875,7 @@ snapshots:
string.prototype.matchall: 4.0.11
string.prototype.repeat: 1.0.0
eslint-plugin-svelte@2.46.1(eslint@8.53.0)(svelte@5.7.1):
eslint-plugin-svelte@2.46.1(eslint@8.53.0)(svelte@5.9.0):
dependencies:
'@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
'@jridgewell/sourcemap-codec': 1.5.0
@@ -9885,13 +9888,13 @@ snapshots:
postcss-safe-parser: 6.0.0(postcss@8.4.49)
postcss-selector-parser: 6.1.2
semver: 7.6.3
svelte-eslint-parser: 0.43.0(svelte@5.7.1)
svelte-eslint-parser: 0.43.0(svelte@5.9.0)
optionalDependencies:
svelte: 5.7.1
svelte: 5.9.0
transitivePeerDependencies:
- ts-node
eslint-plugin-svelte@2.46.1(eslint@8.57.0)(svelte@5.7.1):
eslint-plugin-svelte@2.46.1(eslint@8.57.0)(svelte@5.9.0):
dependencies:
'@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
'@jridgewell/sourcemap-codec': 1.5.0
@@ -9904,9 +9907,9 @@ snapshots:
postcss-safe-parser: 6.0.0(postcss@8.4.49)
postcss-selector-parser: 6.1.2
semver: 7.6.3
svelte-eslint-parser: 0.43.0(svelte@5.7.1)
svelte-eslint-parser: 0.43.0(svelte@5.9.0)
optionalDependencies:
svelte: 5.7.1
svelte: 5.9.0
transitivePeerDependencies:
- ts-node
@@ -12165,10 +12168,10 @@ snapshots:
dependencies:
fast-diff: 1.3.0
prettier-plugin-svelte@3.3.2(prettier@3.4.2)(svelte@5.7.1):
prettier-plugin-svelte@3.3.2(prettier@3.4.2)(svelte@5.9.0):
dependencies:
prettier: 3.4.2
svelte: 5.7.1
svelte: 5.9.0
prettier@2.8.8: {}
@@ -12996,19 +12999,19 @@ snapshots:
supports-preserve-symlinks-flag@1.0.0: {}
svelte-check@4.1.1(svelte@5.7.1)(typescript@5.6.3):
svelte-check@4.1.1(svelte@5.9.0)(typescript@5.6.3):
dependencies:
'@jridgewell/trace-mapping': 0.3.25
chokidar: 4.0.1
fdir: 6.4.2
picocolors: 1.1.1
sade: 1.8.1
svelte: 5.7.1
svelte: 5.9.0
typescript: 5.6.3
transitivePeerDependencies:
- picomatch
svelte-eslint-parser@0.43.0(svelte@5.7.1):
svelte-eslint-parser@0.43.0(svelte@5.9.0):
dependencies:
eslint-scope: 7.2.2
eslint-visitor-keys: 3.4.3
@@ -13016,15 +13019,15 @@ snapshots:
postcss: 8.4.49
postcss-scss: 4.0.9(postcss@8.4.49)
optionalDependencies:
svelte: 5.7.1
svelte: 5.9.0
svelte-hmr@0.15.3(svelte@4.2.1):
dependencies:
svelte: 4.2.1
svelte-preprocess@6.0.3(@babel/core@7.24.7)(postcss-load-config@5.0.2(postcss@8.4.49))(postcss@8.4.49)(svelte@5.7.1)(typescript@5.6.3):
svelte-preprocess@6.0.3(@babel/core@7.24.7)(postcss-load-config@5.0.2(postcss@8.4.49))(postcss@8.4.49)(svelte@5.9.0)(typescript@5.6.3):
dependencies:
svelte: 5.7.1
svelte: 5.9.0
optionalDependencies:
'@babel/core': 7.24.7
postcss: 8.4.49
@@ -13038,11 +13041,11 @@ snapshots:
svelte: 4.2.1
typescript: 5.6.3
svelte2tsx@0.7.24(svelte@5.7.1)(typescript@5.6.3):
svelte2tsx@0.7.24(svelte@5.9.0)(typescript@5.6.3):
dependencies:
dedent-js: 1.0.1
pascal-case: 3.1.2
svelte: 5.7.1
svelte: 5.9.0
typescript: 5.6.3
svelte@4.2.1:
@@ -13061,7 +13064,7 @@ snapshots:
magic-string: 0.30.5
periscopic: 3.1.0
svelte@5.7.1:
svelte@5.9.0:
dependencies:
'@ampproject/remapping': 2.3.0
'@jridgewell/sourcemap-codec': 1.5.0
@@ -13074,7 +13077,7 @@ snapshots:
esrap: 1.2.3
is-reference: 3.0.3
locate-character: 3.0.0
magic-string: 0.30.12
magic-string: 0.30.14
zimmerframe: 1.1.2
svgo@3.0.2: