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
examples/svelte/package.json
+1 -1
View File
@@ -21,7 +21,7 @@
"eslint-plugin-svelte": "^2.46.1", "eslint-plugin-svelte": "^2.46.1",
"prettier": "^3.4.2", "prettier": "^3.4.2",
"prettier-plugin-svelte": "^3.3.2", "prettier-plugin-svelte": "^3.3.2",
"svelte": "^5.7.1", "svelte": "^5.9.0",
"svelte-check": "^4.1.1", "svelte-check": "^4.1.1",
"tslib": "^2.8.1", "tslib": "^2.8.1",
"typescript": "^5.6.3", "typescript": "^5.6.3",
examples/svelte/src/routes/examples/overview/+page.svelte
+9 -11
View File
@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { writable } from 'svelte/store';
import { import {
SvelteFlow, SvelteFlow,
Controls, Controls,
@@ -38,7 +37,7 @@
nodes: [{ id: '1' }, { id: '2' }] nodes: [{ id: '1' }, { id: '2' }]
}; };
const nodes = writable<Node[]>([ let nodes = $state.raw<Node[]>([
{ {
id: '1', id: '1',
type: 'input', type: 'input',
@@ -100,7 +99,7 @@
} }
]); ]);
const edges = writable<Edge[]>([ let edges = $state.raw<Edge[]>([
{ {
id: '1-2', id: '1-2',
type: 'default', type: 'default',
@@ -125,21 +124,21 @@
]); ]);
function updateNode() { function updateNode() {
$nodes[0].position.x += 20; nodes[0].position.x += 20;
$nodes = $nodes; // nodes = $nodes;
} }
function updateEdge() { function updateEdge() {
$edges[0].type = $edges[0].type === 'default' ? 'smoothstep' : 'default'; edges[0].type = edges[0].type === 'default' ? 'smoothstep' : 'default';
$edges = $edges; // edges = $edges;
} }
$inspect($nodes); // $inspect(nodes);
</script> </script>
<SvelteFlow <SvelteFlow
{nodes} bind:nodes
{edges} bind:edges
{nodeTypes} {nodeTypes}
{edgeTypes} {edgeTypes}
fitView fitView
@@ -211,7 +210,6 @@
<button onclick={updateEdge}>update edge type</button> <button onclick={updateEdge}>update edge type</button>
<button <button
onclick={() => { onclick={() => {
console.log($nodes, $nodes.length);
$nodes[$nodes.length - 1].hidden = !$nodes[$nodes.length - 1].hidden; $nodes[$nodes.length - 1].hidden = !$nodes[$nodes.length - 1].hidden;
$nodes = $nodes; $nodes = $nodes;
}}>hide/unhide</button }}>hide/unhide</button
examples/svelte/src/routes/examples/stress/+page.svelte
+5 -4
View File
@@ -29,7 +29,8 @@
id, id,
data, data,
position, position,
type: 'default' type: 'default',
selected: true
}; };
nodeItems.push(node); nodeItems.push(node);
@@ -46,11 +47,11 @@
} }
} }
const nodes = writable(nodeItems); let nodes = $state.raw(nodeItems);
const edges = writable(edgeItems); let edges = $state.raw([]);
</script> </script>
<SvelteFlow {nodes} {edges} fitView minZoom={0.2}> <SvelteFlow bind:nodes bind:edges fitView minZoom={0.2}>
<Controls /> <Controls />
<Background variant={BackgroundVariant.Lines} /> <Background variant={BackgroundVariant.Lines} />
<MiniMap /> <MiniMap />
examples/svelte/vite.config.ts
+3
View File
@@ -3,6 +3,9 @@ import { defineConfig } from 'vite';
export default defineConfig({ export default defineConfig({
plugins: [sveltekit()], plugins: [sveltekit()],
build: {
sourcemap: true
},
server: { server: {
fs: { fs: {
// Allow serving files from one level up to the project root // Allow serving files from one level up to the project root
packages/svelte/package.json
+2 -1
View File
@@ -58,6 +58,7 @@
"@sveltejs/adapter-auto": "^3.3.1", "@sveltejs/adapter-auto": "^3.3.1",
"@sveltejs/kit": "^2.9.0", "@sveltejs/kit": "^2.9.0",
"@sveltejs/package": "^2.3.7", "@sveltejs/package": "^2.3.7",
"@sveltejs/vite-plugin-svelte": "^5.0.1",
"@typescript-eslint/eslint-plugin": "^8.17.0", "@typescript-eslint/eslint-plugin": "^8.17.0",
"@typescript-eslint/parser": "^8.17.0", "@typescript-eslint/parser": "^8.17.0",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
@@ -74,7 +75,7 @@
"postcss-rename": "^0.6.1", "postcss-rename": "^0.6.1",
"prettier": "^3.4.2", "prettier": "^3.4.2",
"prettier-plugin-svelte": "^3.3.2", "prettier-plugin-svelte": "^3.3.2",
"svelte": "^5.7.1", "svelte": "^5.9.0",
"svelte-check": "^4.1.1", "svelte-check": "^4.1.1",
"svelte-eslint-parser": "^0.43.0", "svelte-eslint-parser": "^0.43.0",
"svelte-preprocess": "^6.0.3", "svelte-preprocess": "^6.0.3",
packages/svelte/src/lib/actions/drag/index.ts
+2 -2
View File
@@ -28,9 +28,9 @@ export default function drag(domNode: Element, params: UseDragParams) {
const { snapGrid, viewport } = store; const { snapGrid, viewport } = store;
return { return {
nodes: get(store.nodes), nodes: store.nodes,
nodeLookup: store.nodeLookup, nodeLookup: store.nodeLookup,
edges: get(store.edges), edges: store.edges,
nodeExtent: store.nodeExtent, nodeExtent: store.nodeExtent,
snapGrid: snapGrid ? snapGrid : [0, 0], snapGrid: snapGrid ? snapGrid : [0, 0],
snapToGrid: !!snapGrid, snapToGrid: !!snapGrid,
packages/svelte/src/lib/components/Handle/Handle.svelte
+3 -2
View File
@@ -40,7 +40,7 @@
); );
let store = useStore(); let store = useStore();
let { edges } = store; // let { edges } = store;
function onPointerDown(event: MouseEvent | TouchEvent) { function onPointerDown(event: MouseEvent | TouchEvent) {
const isMouseTriggered = isMouseEvent(event); const isMouseTriggered = isMouseEvent(event);
@@ -91,7 +91,8 @@
$effect.pre(() => { $effect.pre(() => {
// connectionLookup is not reactive, so we use edges to get notified about updates // connectionLookup is not reactive, so we use edges to get notified about updates
// eslint-disable-next-line @typescript-eslint/no-unused-expressions // eslint-disable-next-line @typescript-eslint/no-unused-expressions
$edges; // $edges;
store.edges;
if (onconnect || ondisconnect) { if (onconnect || ondisconnect) {
let connections = store.connectionLookup.get(`${nodeId}-${type}-${handleId}`); let connections = store.connectionLookup.get(`${nodeId}-${type}-${handleId}`);
packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
+9 -9
View File
@@ -20,7 +20,7 @@
zoomActivationKey = isMacOs() ? 'Meta' : 'Control' zoomActivationKey = isMacOs() ? 'Meta' : 'Control'
}: KeyHandlerProps = $props(); }: KeyHandlerProps = $props();
const { nodes: _nodes, edges: _edges } = store; // const { nodes: _nodes, edges: _edges } = store;
function isKeyObject(key?: KeyDefinition | null): key is KeyDefinitionObject { function isKeyObject(key?: KeyDefinition | null): key is KeyDefinitionObject {
return key !== null && typeof key === 'object'; return key !== null && typeof key === 'object';
@@ -66,22 +66,22 @@
} }
async function handleDelete() { async function handleDelete() {
const nodes = get(_nodes); // const nodes = get(_nodes);
const edges = get(_edges); // const edges = get(_edges);
const selectedNodes = nodes.filter((node) => node.selected); const selectedNodes = store.nodes.filter((node) => node.selected);
const selectedEdges = edges.filter((edge) => edge.selected); const selectedEdges = store.edges.filter((edge) => edge.selected);
const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({ const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
nodesToRemove: selectedNodes, nodesToRemove: selectedNodes,
edgesToRemove: selectedEdges, edgesToRemove: selectedEdges,
nodes, nodes: store.nodes,
edges, edges: store.edges,
onBeforeDelete: store.onbeforedelete onBeforeDelete: store.onbeforedelete
}); });
if (matchingNodes.length || matchingEdges.length) { if (matchingNodes.length || matchingEdges.length) {
_nodes.update((nds) => nds.filter((node) => !matchingNodes.some((mN) => mN.id === node.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))); // _edges.update((eds) => eds.filter((edge) => !matchingEdges.some((mE) => mE.id === edge.id)));
store.ondelete?.({ store.ondelete?.({
nodes: matchingNodes, nodes: matchingNodes,
packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+4 -4
View File
@@ -15,24 +15,24 @@
onselectioncontextmenu onselectioncontextmenu
}: NodeSelectionProps = $props(); }: NodeSelectionProps = $props();
const { nodes } = store; // const { nodes } = store;
let bounds: Rect | null = $derived.by(() => { let bounds: Rect | null = $derived.by(() => {
if (store.selectionRectMode === 'nodes') { if (store.selectionRectMode === 'nodes') {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions // eslint-disable-next-line @typescript-eslint/no-unused-expressions
$nodes; store.nodes;
return getInternalNodesBounds(store.nodeLookup, { filter: (node) => !!node.selected }); return getInternalNodesBounds(store.nodeLookup, { filter: (node) => !!node.selected });
} }
return null; return null;
}); });
function oncontextmenu(event: MouseEvent | TouchEvent) { function oncontextmenu(event: MouseEvent | TouchEvent) {
const selectedNodes = $nodes.filter((n) => n.selected); const selectedNodes = store.nodes.filter((n) => n.selected);
onselectioncontextmenu?.({ nodes: selectedNodes, event }); onselectioncontextmenu?.({ nodes: selectedNodes, event });
} }
function onclick(event: MouseEvent | TouchEvent) { function onclick(event: MouseEvent | TouchEvent) {
const selectedNodes = $nodes.filter((n) => n.selected); const selectedNodes = store.nodes.filter((n) => n.selected);
onselectionclick?.({ nodes: selectedNodes, event }); onselectionclick?.({ nodes: selectedNodes, event });
} }
</script> </script>
packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+3 -3
View File
@@ -14,11 +14,11 @@
onedgemouseleave onedgemouseleave
}: { store: SvelteFlowStore } & EdgeEvents = $props(); }: { store: SvelteFlowStore } & EdgeEvents = $props();
const { edges, nodes } = store; // const { edges, nodes } = store;
let layoutedEdges = $derived.by(() => { let layoutedEdges = $derived.by(() => {
$nodes; store.nodes;
const layoutedEdges = $edges.reduce<EdgeLayouted[]>((res, edge) => { const layoutedEdges = store.edges.reduce<EdgeLayouted[]>((res, edge) => {
const sourceNode = store.nodeLookup.get(edge.source); const sourceNode = store.nodeLookup.get(edge.source);
const targetNode = store.nodeLookup.get(edge.target); const targetNode = store.nodeLookup.get(edge.target);
packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+12 -3
View File
@@ -2,7 +2,7 @@
import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte';
import { nodeHasDimensions } from '@xyflow/system'; 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 { NodeWrapper } from '$lib/components/NodeWrapper';
import type { SvelteFlowStore } from '$lib/store/types'; import type { SvelteFlowStore } from '$lib/store/types';
@@ -19,7 +19,7 @@
onnodedragstop onnodedragstop
}: { store: SvelteFlowStore; nodeClickDistance?: number } & NodeEvents = $props(); }: { store: SvelteFlowStore; nodeClickDistance?: number } & NodeEvents = $props();
const { nodes } = store; // const { nodes } = store;
const resizeObserver: ResizeObserver | null = const resizeObserver: ResizeObserver | null =
typeof ResizeObserver === 'undefined' typeof ResizeObserver === 'undefined'
@@ -43,10 +43,19 @@
onDestroy(() => { onDestroy(() => {
resizeObserver?.disconnect(); 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> </script>
<div class="svelte-flow__nodes"> <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)} {@const internalNode = store.nodeLookup.get(node.id)}
<NodeWrapper <NodeWrapper
{store} {store}
packages/svelte/src/lib/container/Pane/Pane.svelte
+5 -5
View File
@@ -45,7 +45,7 @@
children children
}: PaneProps = $props(); }: PaneProps = $props();
const { nodes, edges } = store; // const { nodes, edges } = store;
// svelte-ignore non_reactive_update // svelte-ignore non_reactive_update
let container: HTMLDivElement; let container: HTMLDivElement;
@@ -126,7 +126,7 @@
height: Math.abs(mousePos.y - startY) height: Math.abs(mousePos.y - startY)
}; };
const prevSelectedNodeIds = selectedNodes.map((n) => n.id); 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( selectedNodes = getNodesInside(
store.nodeLookup, store.nodeLookup,
@@ -135,7 +135,7 @@
store.selectionMode === SelectionMode.Partial, store.selectionMode === SelectionMode.Partial,
true 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); const selectedNodeIds = selectedNodes.map((n) => n.id);
// this prevents unnecessary updates while updating the selection rectangle // this prevents unnecessary updates while updating the selection rectangle
@@ -143,14 +143,14 @@
prevSelectedNodeIds.length !== selectedNodeIds.length || prevSelectedNodeIds.length !== selectedNodeIds.length ||
selectedNodeIds.some((id) => !prevSelectedNodeIds.includes(id)) selectedNodeIds.some((id) => !prevSelectedNodeIds.includes(id))
) { ) {
nodes.update((nodes) => nodes.map(toggleSelected(selectedNodeIds))); // store.nodes.update((nodes) => nodes.map(toggleSelected(selectedNodeIds)));
} }
if ( if (
prevSelectedEdgeIds.length !== selectedEdgeIds.length || prevSelectedEdgeIds.length !== selectedEdgeIds.length ||
selectedEdgeIds.some((id) => !prevSelectedEdgeIds.includes(id)) selectedEdgeIds.some((id) => !prevSelectedEdgeIds.includes(id))
) { ) {
edges.update((edges) => edges.map(toggleSelected(selectedEdgeIds))); // store.edges.update((edges) => edges.map(toggleSelected(selectedEdgeIds)));
} }
store.selectionRectMode = 'user'; store.selectionRectMode = 'user';
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+113 -92
View File
@@ -1,5 +1,8 @@
<!-- TODO: why is this neccessary for types to work?? -->
<svelte:options runes={true} />
<script lang="ts"> <script lang="ts">
import { onMount, getContext, setContext } from 'svelte'; import { getContext, setContext, onDestroy } from 'svelte';
import cc from 'classcat'; import cc from 'classcat';
import { PanOnScrollMode } from '@xyflow/system'; import { PanOnScrollMode } from '@xyflow/system';
@@ -64,28 +67,45 @@
connectionLineStyle = '', connectionLineStyle = '',
attributionPosition, attributionPosition,
children, children,
nodes = $bindable([]),
edges = $bindable([]),
...props ...props
}: SvelteFlowProps = $props(); }: SvelteFlowProps = $props();
// svelte-ignore perf_avoid_inline_class let domNode = $state<HTMLDivElement>();
const container: ContainerSignals = new (class { let clientWidth = $state<number | undefined>(width);
domNode = $state<HTMLDivElement>(); let clientHeight = $state<number | undefined>(height);
width = $state<number | undefined>(width);
height = $state<number | undefined>(height);
})();
const store = createStore({ const store = createStore({
props, 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); const providerContext = getContext<ProviderContext>(key);
if (providerContext) { if (providerContext) {
providerContext.setStore(store); providerContext.setStore(store);
} }
setContext(key, { setContext(key, {
provider: false, provider: false,
getStore() { getStore() {
@@ -93,93 +113,94 @@
} }
} satisfies StoreContext); } satisfies StoreContext);
onMount(() => { onDestroy(() => {
return () => { store.reset();
store.reset();
};
}); });
let colorModeClass = $derived(useColorModeClass(store.colorMode)); let colorModeClass = $derived(useColorModeClass(store.colorMode));
</script> </script>
<div <!-- TODO: this is the only hack in the library so far. Can we get rid of it? -->
bind:this={container.domNode} {#if store.adoptNodes && store.adoptEdges}
bind:clientWidth={container.width} <div
bind:clientHeight={container.height} bind:this={domNode}
style:width bind:clientWidth
style:height bind:clientHeight
{style} style:width
class={cc(['svelte-flow', className, $colorModeClass])} style:height
data-testid="svelte-flow__wrapper" {style}
{...props} class={cc(['svelte-flow', className, $colorModeClass])}
role="application" data-testid="svelte-flow__wrapper"
> {...props}
<KeyHandler role="application"
{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}> <KeyHandler
<ViewportComponent {store}> {store}
<EdgeRenderer {selectionKey}
{store} {deleteKey}
{onedgeclick} {panActivationKey}
{onedgecontextmenu} {multiSelectionKey}
{onedgemouseenter} {zoomActivationKey}
{onedgemouseleave} />
/> <Zoom
<ConnectionLine {store}
{store} {onMoveStart}
containerStyle={connectionLineContainerStyle} {onMove}
style={connectionLineStyle} {onMoveEnd}
{connectionLine} {panOnScrollMode}
/> {preventScrolling}
<div class="svelte-flow__edgelabel-renderer"></div> {zoomOnScroll}
<div class="svelte-flow__viewport-portal"></div> {zoomOnDoubleClick}
<NodeRenderer {zoomOnPinch}
{store} {panOnScroll}
{nodeClickDistance} {panOnDrag}
{onnodeclick} {paneClickDistance}
{onnodecontextmenu} >
{onnodemouseenter} <Pane {store} {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
{onnodemousemove} <ViewportComponent {store}>
{onnodemouseleave} <EdgeRenderer
{onnodedrag} {store}
{onnodedragstart} {onedgeclick}
{onnodedragstop} {onedgecontextmenu}
/> {onedgemouseenter}
<NodeSelection {onedgemouseleave}
{store} />
{onselectionclick} <ConnectionLine
{onselectioncontextmenu} {store}
{onnodedrag} containerStyle={connectionLineContainerStyle}
{onnodedragstart} style={connectionLineStyle}
{onnodedragstop} {connectionLine}
/> />
</ViewportComponent> <div class="svelte-flow__edgelabel-renderer"></div>
<UserSelection /> <div class="svelte-flow__viewport-portal"></div>
</Pane> <NodeRenderer
</Zoom> {store}
<Attribution {proOptions} position={attributionPosition} /> {nodeClickDistance}
{@render children?.()} {onnodeclick}
</div> {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> <style>
.svelte-flow { .svelte-flow {
packages/svelte/src/lib/container/SvelteFlow/types.ts
+3 -3
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. /** An array of edges to render in a controlled flow.
* @example * @example
* const edges = writable([ * 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. /** Custom node types to be available in a flow.
* *
* Svelte Flow matches a node's type to a component in the nodeTypes object. * 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 * Controls if nodes should be automatically selected when being dragged
*/ */
selectNodesOnDrag: boolean; selectNodesOnDrag?: boolean;
/** Grid all nodes will snap to /** Grid all nodes will snap to
* @example [20, 20] * @example [20, 20]
*/ */
packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
+45 -45
View File
@@ -278,7 +278,7 @@ export function useSvelteFlow(): {
} }
const store = useStore(); const store = useStore();
const { nodes, edges } = store; // const { nodes, edges } = store;
const getNodeRect = (node: Node | { id: Node['id'] }): Rect | null => { const getNodeRect = (node: Node | { id: Node['id'] }): Rect | null => {
const nodeToUse = isNode(node) ? node : store.nodeLookup.get(node.id)!; 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; const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate;
if (options.replace) { // if (options.replace) {
nodes.update((nds) => // nodes.update((nds) =>
nds.map((node) => { // nds.map((node) => {
if (node.id === id) { // if (node.id === id) {
return isNode(nextNode) ? nextNode : { ...node, ...nextNode }; // return isNode(nextNode) ? nextNode : { ...node, ...nextNode };
} // }
return node; // return node;
}) // })
); // );
} else { // } else {
Object.assign(node, nextNode); // Object.assign(node, nextNode);
nodes.set(get(nodes)); // nodes.set(store.nodes);
} // }
}; };
const updateEdge = ( const updateEdge = (
@@ -345,20 +345,20 @@ export function useSvelteFlow(): {
const nextEdge = typeof edgeUpdate === 'function' ? edgeUpdate(edge as Edge) : edgeUpdate; const nextEdge = typeof edgeUpdate === 'function' ? edgeUpdate(edge as Edge) : edgeUpdate;
if (options.replace) { // if (options.replace) {
edges.update((edgs) => // edges.update((edgs) =>
edgs.map((edge) => { // edgs.map((edge) => {
if (edge.id === id) { // if (edge.id === id) {
return isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge }; // return isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge };
} // }
return edge; // return edge;
}) // })
); // );
} else { // } else {
Object.assign(edge, nextEdge); // Object.assign(edge, nextEdge);
edges.set(get(edges)); // edges.set(store.edges);
} // }
}; };
const getInternalNode = (id: string) => store.nodeLookup.get(id); const getInternalNode = (id: string) => store.nodeLookup.get(id);
@@ -368,9 +368,9 @@ export function useSvelteFlow(): {
zoomOut: store.zoomOut, zoomOut: store.zoomOut,
getInternalNode, getInternalNode,
getNode: (id) => getInternalNode(id)?.internals.userNode, 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), 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) => { setZoom: (zoomLevel, options) => {
const panZoom = store.panZoom; const panZoom = store.panZoom;
return panZoom return panZoom
@@ -447,7 +447,7 @@ export function useSvelteFlow(): {
return []; return [];
} }
return (nodesToIntersect || get(nodes)).filter((n) => { return (nodesToIntersect || store.nodes).filter((n) => {
const internalNode = store.nodeLookup.get(n.id); const internalNode = store.nodeLookup.get(n.id);
if (!internalNode || (!isRect && n.id === nodeOrRect.id)) { if (!internalNode || (!isRect && n.id === nodeOrRect.id)) {
return false; return false;
@@ -481,22 +481,22 @@ export function useSvelteFlow(): {
const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({ const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
nodesToRemove, nodesToRemove,
edgesToRemove, edgesToRemove,
nodes: get(nodes), nodes: store.nodes,
edges: get(edges), edges: store.edges,
onBeforeDelete: store.onbeforedelete onBeforeDelete: store.onbeforedelete
}); });
if (matchingNodes) { // if (matchingNodes) {
nodes.update((nds) => // nodes.update((nds) =>
nds.filter((node) => !matchingNodes.some(({ id }) => id === node.id)) // nds.filter((node) => !matchingNodes.some(({ id }) => id === node.id))
); // );
} // }
if (matchingEdges) { // if (matchingEdges) {
edges.update((eds) => // edges.update((eds) =>
eds.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id)) // eds.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id))
); // );
} // }
return { return {
deletedNodes: matchingNodes, deletedNodes: matchingNodes,
@@ -548,14 +548,14 @@ export function useSvelteFlow(): {
toObject: () => { toObject: () => {
return { return {
nodes: get(nodes).map((node) => ({ nodes: store.nodes.map((node) => ({
...node, ...node,
// we want to make sure that changes to the nodes object that gets returned by toObject // we want to make sure that changes to the nodes object that gets returned by toObject
// do not affect the nodes object // do not affect the nodes object
position: { ...node.position }, position: { ...node.position },
data: { ...node.data } data: { ...node.data }
})), })),
edges: get(edges).map((edge) => ({ ...edge })), edges: store.edges.map((edge) => ({ ...edge })),
viewport: { ...store.viewport } viewport: { ...store.viewport }
}; };
}, },
@@ -571,7 +571,7 @@ export function useSvelteFlow(): {
node.data = options?.replace ? nextData : { ...node.data, ...nextData }; node.data = options?.replace ? nextData : { ...node.data, ...nextData };
nodes.update((nds) => nds); // nodes.update((nds) => nds);
}, },
updateEdge, updateEdge,
getNodesBounds: (nodes) => { getNodesBounds: (nodes) => {
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+2 -2
View File
@@ -44,7 +44,7 @@
let store = useStore(); let store = useStore();
let nodes = $derived(store.nodes); // let nodes = $derived(store.nodes);
const nodeColorFunc = nodeColor === undefined ? undefined : getAttrFunction(nodeColor); const nodeColorFunc = nodeColor === undefined ? undefined : getAttrFunction(nodeColor);
const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor); const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
@@ -115,7 +115,7 @@
> >
{#if ariaLabel}<title id={labelledBy}>{ariaLabel}</title>{/if} {#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)} {@const node = store.nodeLookup.get(userNode.id)}
{#if node && nodeHasDimensions(node)} {#if node && nodeHasDimensions(node)}
{@const nodeDimesions = getNodeDimensions(node)} {@const nodeDimesions = getNodeDimensions(node)}
packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
+1 -1
View File
@@ -93,7 +93,7 @@
} }
} }
store.nodes.set(get(store.nodes)); // store.nodes.set(get(store.nodes));
} }
}); });
} }
packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
+3 -3
View File
@@ -19,13 +19,13 @@
}: NodeToolbarProps = $props(); }: NodeToolbarProps = $props();
const store = useStore(); const store = useStore();
const { nodes } = store; // const { nodes } = store;
const { getNodesBounds } = useSvelteFlow(); const { getNodesBounds } = useSvelteFlow();
const contextNodeId = getContext<string>('svelteflow__node_id'); const contextNodeId = getContext<string>('svelteflow__node_id');
let toolbarNodes: InternalNode[] = $derived.by(() => { let toolbarNodes: InternalNode[] = $derived.by(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions // eslint-disable-next-line @typescript-eslint/no-unused-expressions
$nodes; store.nodes;
const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId ?? contextNodeId]; const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId ?? contextNodeId];
return nodeIds.reduce<InternalNode[]>((res, nodeId) => { return nodeIds.reduce<InternalNode[]>((res, nodeId) => {
@@ -54,7 +54,7 @@
); );
//FIXME: Possible performance bottleneck //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 // if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
let isActive = $derived( let isActive = $derived(
packages/svelte/src/lib/store/index.ts
+54 -59
View File
@@ -1,4 +1,3 @@
import { get } from 'svelte/store';
import { import {
fitView as fitViewSystem, fitView as fitViewSystem,
panBy as panBySystem, 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 { initialEdgeTypes, initialNodeTypes, getInitialStore } from './initial-store.svelte';
import { type StoreSignals, type SvelteFlowStore, type SvelteFlowStoreActions } from './types'; import { type StoreSignals, type SvelteFlowStore, type SvelteFlowStoreActions } from './types';
import { syncNodeStores, syncEdgeStores } from './utils'; import { syncNodeStores, syncEdgeStores } from './utils';
import drag from '$lib/actions/drag';
// import { getVisibleEdges } from './visible-edges'; // import { getVisibleEdges } from './visible-edges';
// import { getVisibleNodes } from './visible-nodes'; // import { getVisibleNodes } from './visible-nodes';
@@ -48,23 +48,15 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
} }
function addEdge(edgeParams: Edge | Connection) { function addEdge(edgeParams: Edge | Connection) {
const edges = get(store.edges); // TODO: let's see
store.edges.set(addEdgeUtil(edgeParams, edges)); store.edges = addEdgeUtil(edgeParams, store.edges);
} }
const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => { const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => {
for (const [id, dragItem] of nodeDragItems) { store.nodes = store.nodes.map((node) => {
const node = store.nodeLookup.get(id)?.internals.userNode; const dragItem = nodeDragItems.get(node.id);
return dragItem ? { ...node, position: dragItem.position, dragging } : node;
if (!node) { });
continue;
}
node.position = dragItem.position;
node.dragging = dragging;
}
store.nodes.update((nds) => nds);
}; };
function updateNodeInternals(updates: Map<string, InternalNodeUpdate>) { function updateNodeInternals(updates: Map<string, InternalNodeUpdate>) {
@@ -93,13 +85,16 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
store.fitViewOnInitDone = fitViewOnInitDone; store.fitViewOnInitDone = fitViewOnInitDone;
} }
const newNodes = new Map<string, Node>();
for (const change of changes) { 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; continue;
} }
const node = { ...userNode };
switch (change.type) { switch (change.type) {
case 'dimensions': { case 'dimensions': {
const measured = { ...node.measured, ...change.dimensions }; const measured = { ...node.measured, ...change.dimensions };
@@ -114,12 +109,15 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
} }
case 'position': case 'position':
node.position = change.position ?? node.position; node.position = change.position ?? node.position;
break; 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) { if (!store.nodesInitialized) {
store.nodesInitialized = true; store.nodesInitialized = true;
@@ -235,68 +233,65 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
} }
function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) { function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
const resetNodes = resetSelectedElements(params?.nodes || get(store.nodes)); resetSelectedElements(params?.nodes || store.nodes);
if (resetNodes) store.nodes.set(get(store.nodes)); // if (resetNodes) store.nodes.set(get(store.nodes));
const resetEdges = resetSelectedElements(params?.edges || get(store.edges)); resetSelectedElements(params?.edges || store.edges);
if (resetEdges) store.edges.set(get(store.edges)); // if (resetEdges) store.edges.set(get(store.edges));
} }
function addSelectedNodes(ids: string[]) { function addSelectedNodes(ids: string[]) {
const isMultiSelection = store.multiselectionKeyPressed; const isMultiSelection = store.multiselectionKeyPressed;
store.nodes.update((ns) => // store.nodes.update((ns) =>
ns.map((node) => { store.nodes.forEach((node) => {
const nodeWillBeSelected = ids.includes(node.id); const nodeWillBeSelected = ids.includes(node.id);
const selected = isMultiSelection const selected = isMultiSelection ? node.selected || nodeWillBeSelected : nodeWillBeSelected;
? node.selected || nodeWillBeSelected
: nodeWillBeSelected;
// we need to mutate the node here in order to have the correct selected state in the drag handler // we need to mutate the node here in order to have the correct selected state in the drag handler
node.selected = selected; node.selected = selected;
return node; // return node;
}) });
); // );
if (!isMultiSelection) { if (!isMultiSelection) {
store.edges.update((es) => // store.edges.forEach((es) =>
es.map((edge) => { store.edges.forEach((edge) => {
edge.selected = false; edge.selected = false;
return edge; // return edge;
}) });
); // );
} }
} }
function addSelectedEdges(ids: string[]) { function addSelectedEdges(ids: string[]) {
const isMultiSelection = store.multiselectionKeyPressed; const isMultiSelection = store.multiselectionKeyPressed;
store.edges.update((edges) => // store.edges.update((edges) =>
edges.map((edge) => { store.edges.forEach((edge) => {
const edgeWillBeSelected = ids.includes(edge.id); const edgeWillBeSelected = ids.includes(edge.id);
const selected = isMultiSelection const selected = isMultiSelection ? edge.selected || edgeWillBeSelected : edgeWillBeSelected;
? edge.selected || edgeWillBeSelected
: edgeWillBeSelected;
edge.selected = selected; edge.selected = selected;
return edge; // return edge;
}) });
); // );
if (!isMultiSelection) { if (!isMultiSelection) {
store.nodes.update((ns) => // store.nodes.update((ns) =>
ns.map((node) => { store.nodes.forEach((node) => {
node.selected = false; node.selected = false;
return node; // return node;
}) });
); // );
} }
} }
function handleNodeSelection(id: string) { 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) { if (!node) {
console.warn('012', errorMessages['error012'](id)); console.warn('012', errorMessages['error012'](id));
@@ -343,8 +338,8 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
} }
const storeWithActions = Object.assign(store, { const storeWithActions = Object.assign(store, {
syncNodeStores: (nodes) => syncNodeStores(store.nodes, nodes), // syncNodeStores: (nodes) => syncNodeStores(store.nodes, nodes),
syncEdgeStores: (edges) => syncEdgeStores(store.edges, edges), // syncEdgeStores: (edges) => syncEdgeStores(store.edges, edges),
// syncViewport: (viewport) => syncViewportStores(store.panZoom, store.viewport, viewport), // syncViewport: (viewport) => syncViewportStores(store.panZoom, store.viewport, viewport),
setNodeTypes, setNodeTypes,
setEdgeTypes, setEdgeTypes,
packages/svelte/src/lib/store/initial-store.svelte.ts
+33 -37
View File
@@ -1,4 +1,3 @@
import { get, writable, type Writable } from 'svelte/store';
import { import {
infiniteExtent, infiniteExtent,
SelectionMode, SelectionMode,
@@ -52,7 +51,7 @@ import type {
OnBeforeDelete, OnBeforeDelete,
IsValidConnection IsValidConnection
} from '$lib/types'; } from '$lib/types';
import { createNodesStore, createEdgesStore } from './utils';
import type { StoreSignals } from './types'; import type { StoreSignals } from './types';
export const initialNodeTypes = { export const initialNodeTypes = {
@@ -71,19 +70,39 @@ export const initialEdgeTypes = {
export const getInitialStore = (signals: StoreSignals) => { export const getInitialStore = (signals: StoreSignals) => {
class SvelteFlowStore { class SvelteFlowStore {
nodes: ReturnType<typeof createNodesStore>; get nodes() {
edges: ReturnType<typeof createEdgesStore>; return signals.nodes;
}
set nodes(nodes) {
signals.nodes = nodes;
}
get edges() {
return signals.edges;
}
set edges(edges) {
signals.edges = edges;
}
nodeLookup: NodeLookup = new Map(); nodeLookup: NodeLookup = new Map();
parentLookup: ParentLookup = new Map(); parentLookup: ParentLookup = new Map();
connectionLookup: ConnectionLookup = new Map(); connectionLookup: ConnectionLookup = new Map();
edgeLookup: EdgeLookup = 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( domNode: HTMLDivElement | null = $derived(signals.domNode ?? signals.props.domNode ?? null);
signals.container?.domNode ?? signals.props.domNode ?? null width: number = $derived(signals.width ?? signals.props.width ?? 0);
); height: number = $derived(signals.height ?? signals.props.height ?? 0);
width: number = $derived(signals.container?.width ?? signals.props.width ?? 0);
height: number = $derived(signals.container?.height ?? signals.props.height ?? 0);
flowId: string = $derived(signals.props.id ?? '1'); flowId: string = $derived(signals.props.id ?? '1');
minZoom: number = $derived(signals.props.minZoom ?? 0.5); minZoom: number = $derived(signals.props.minZoom ?? 0.5);
@@ -149,12 +168,10 @@ export const getInitialStore = (signals: StoreSignals) => {
nodesConnectable: boolean = $derived(signals.props.nodesConnectable ?? true); nodesConnectable: boolean = $derived(signals.props.nodesConnectable ?? true);
elementsSelectable: boolean = $derived(signals.props.elementsSelectable ?? true); elementsSelectable: boolean = $derived(signals.props.elementsSelectable ?? true);
selectNodesOnDrag: boolean = $derived(signals.props.selectNodesOnDrag ?? 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'); defaultMarkerColor: string = $derived(signals.props.defaultMarkerColor ?? '#b1b1b7');
markers: MarkerProps[] = $derived.by(() => { markers: MarkerProps[] = $derived.by(() => {
const edges = signals.props.edges ?? writable([]); return createMarkerIds(signals.edges, {
return createMarkerIds(get(edges), {
defaultColor: this.defaultMarkerColor, defaultColor: this.defaultMarkerColor,
id: this.flowId id: this.flowId
}); });
@@ -172,8 +189,8 @@ export const getInitialStore = (signals: StoreSignals) => {
edgesInitialized: boolean = $state(false); edgesInitialized: boolean = $state(false);
viewportInitialized: boolean = $state(false); viewportInitialized: boolean = $state(false);
initialNodesLength: number = signals.props.nodes ? get(signals.props.nodes)?.length : 0; initialNodesLength: number = signals.nodes.length;
initialEdgesLength: number = signals.props.edges ? get(signals.props.edges)?.length : 0; initialEdgesLength: number = signals.edges.length;
initialized: boolean = $derived.by(() => { initialized: boolean = $derived.by(() => {
let initialized = false; let initialized = false;
// if it hasn't been initialised check if it's now // 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'); colorMode: ColorMode = $derived(signals.props.colorMode ?? 'light');
constructor() { 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) { if (signals.props.fitView && !signals.props.initialViewport && this.width && this.height) {
const bounds = getInternalNodesBounds(this.nodeLookup, { const bounds = getInternalNodesBounds(this.nodeLookup, {
filter: (node) => filter: (node) =>
packages/svelte/src/lib/store/types.ts
+8 -5
View File
@@ -6,8 +6,7 @@ import type {
Connection, Connection,
UpdateNodePositions, UpdateNodePositions,
CoordinateExtent, CoordinateExtent,
UpdateConnection, UpdateConnection
Viewport
} from '@xyflow/system'; } from '@xyflow/system';
import type { getInitialStore } from './initial-store.svelte'; 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'; import type { SvelteFlowProps } from '$lib/container/SvelteFlow';
export type SvelteFlowStoreActions = { export type SvelteFlowStoreActions = {
syncNodeStores: (nodesStore: Writable<Node[]>) => void; // syncNodeStores: (nodesStore: Writable<Node[]>) => void;
syncEdgeStores: (edgeStore: Writable<Edge[]>) => void; // syncEdgeStores: (edgeStore: Writable<Edge[]>) => void;
// syncViewport: (viewportStore?: Writable<Viewport>) => void; // syncViewport: (viewportStore?: Writable<Viewport>) => void;
setNodeTypes: (nodeTypes: NodeTypes) => void; setNodeTypes: (nodeTypes: NodeTypes) => void;
setEdgeTypes: (edgeTypes: EdgeTypes) => void; setEdgeTypes: (edgeTypes: EdgeTypes) => void;
@@ -43,7 +42,11 @@ export type SvelteFlowStoreActions = {
export type ContainerSignals = { domNode?: HTMLDivElement | null; width?: number; height?: number }; export type ContainerSignals = { domNode?: HTMLDivElement | null; width?: number; height?: number };
export type StoreSignals = { export type StoreSignals = {
props: Partial<SvelteFlowProps> & ContainerSignals; props: Partial<SvelteFlowProps> & ContainerSignals;
container?: ContainerSignals; domNode?: HTMLDivElement;
width?: number;
height?: number;
nodes: Node[];
edges: Edge[];
}; };
export type SvelteFlowStoreState = ReturnType<typeof getInitialStore>; export type SvelteFlowStoreState = ReturnType<typeof getInitialStore>;
packages/svelte/src/routes/+page.svelte.d.ts
Vendored
+16 -16
View File
@@ -1,23 +1,23 @@
/** @typedef {typeof __propDef.props} PageProps */ /** @typedef {typeof __propDef.props} PageProps */
/** @typedef {typeof __propDef.events} PageEvents */ /** @typedef {typeof __propDef.events} PageEvents */
/** @typedef {typeof __propDef.slots} PageSlots */ /** @typedef {typeof __propDef.slots} PageSlots */
export default class Page extends SvelteComponentTyped<{ // export default class Page extends SvelteComponentTyped<{
[x: string]: never; // [x: string]: never;
}, { // }, {
[evt: string]: CustomEvent<any>; // [evt: string]: CustomEvent<any>;
}, {}> { // }, {}> {
} // }
export type PageProps = typeof __propDef.props; export type PageProps = typeof __propDef.props;
export type PageEvents = typeof __propDef.events; export type PageEvents = typeof __propDef.events;
export type PageSlots = typeof __propDef.slots; export type PageSlots = typeof __propDef.slots;
import { SvelteComponentTyped } from "svelte"; // import { SvelteComponentTyped } from "svelte";
declare const __propDef: { // declare const __propDef: {
props: { // props: {
[x: string]: never; // [x: string]: never;
}; // };
events: { // events: {
[evt: string]: CustomEvent<any>; // [evt: string]: CustomEvent<any>;
}; // };
slots: {}; // slots: {};
}; // };
export {}; export {};
packages/svelte/svelte.config.js
+5 -2
View File
@@ -1,9 +1,12 @@
import adapter from '@sveltejs/adapter-auto'; import adapter from '@sveltejs/adapter-auto';
import { sveltePreprocess } from 'svelte-preprocess'; import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
preprocess: sveltePreprocess(), preprocess: vitePreprocess(),
compilerOptions: {
runes: true
},
kit: { kit: {
adapter: adapter() adapter: adapter()
} }
pnpm-lock.yaml
Generated
+59 -56
View File
@@ -173,17 +173,17 @@ importers:
version: 1.1.4 version: 1.1.4
'@sveltejs/vite-plugin-svelte': '@sveltejs/vite-plugin-svelte':
specifier: ^5.0.1 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': '@xyflow/svelte':
specifier: workspace:^ specifier: workspace:^
version: link:../../packages/svelte version: link:../../packages/svelte
devDependencies: devDependencies:
'@sveltejs/adapter-auto': '@sveltejs/adapter-auto':
specifier: ^3.3.1 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': '@sveltejs/kit':
specifier: ^2.9.0 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': '@typescript-eslint/eslint-plugin':
specifier: ^8.17.0 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) 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) version: 9.1.0(eslint@8.53.0)
eslint-plugin-svelte: eslint-plugin-svelte:
specifier: ^2.46.1 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: prettier:
specifier: ^3.4.2 specifier: ^3.4.2
version: 3.4.2 version: 3.4.2
prettier-plugin-svelte: prettier-plugin-svelte:
specifier: ^3.3.2 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: svelte:
specifier: ^5.7.1 specifier: ^5.9.0
version: 5.7.1 version: 5.9.0
svelte-check: svelte-check:
specifier: ^4.1.1 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: tslib:
specifier: ^2.8.1 specifier: ^2.8.1
version: 2.8.1 version: 2.8.1
@@ -289,7 +289,7 @@ importers:
dependencies: dependencies:
'@svelte-put/shortcut': '@svelte-put/shortcut':
specifier: ^4.0.0 specifier: ^4.0.0
version: 4.0.0(svelte@5.7.1) version: 4.0.0(svelte@5.9.0)
'@xyflow/system': '@xyflow/system':
specifier: workspace:* specifier: workspace:*
version: link:../system version: link:../system
@@ -299,13 +299,16 @@ importers:
devDependencies: devDependencies:
'@sveltejs/adapter-auto': '@sveltejs/adapter-auto':
specifier: ^3.3.1 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': '@sveltejs/kit':
specifier: ^2.9.0 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': '@sveltejs/package':
specifier: ^2.3.7 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': '@typescript-eslint/eslint-plugin':
specifier: ^8.17.0 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) 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) version: 9.1.0(eslint@8.57.0)
eslint-plugin-svelte: eslint-plugin-svelte:
specifier: ^2.46.1 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: postcss:
specifier: ^8.4.49 specifier: ^8.4.49
version: 8.4.49 version: 8.4.49
@@ -353,19 +356,19 @@ importers:
version: 3.4.2 version: 3.4.2
prettier-plugin-svelte: prettier-plugin-svelte:
specifier: ^3.3.2 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: svelte:
specifier: ^5.7.1 specifier: ^5.9.0
version: 5.7.1 version: 5.9.0
svelte-check: svelte-check:
specifier: ^4.1.1 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: svelte-eslint-parser:
specifier: ^0.43.0 specifier: ^0.43.0
version: 0.43.0(svelte@5.7.1) version: 0.43.0(svelte@5.9.0)
svelte-preprocess: svelte-preprocess:
specifier: ^6.0.3 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: tslib:
specifier: ^2.8.1 specifier: ^2.8.1
version: 2.8.1 version: 2.8.1
@@ -5956,8 +5959,8 @@ packages:
resolution: {integrity: sha512-LpLqY2Jr7cRxkrTc796/AaaoMLF/1ax7cto8Ot76wrvKQhrPmZ0JgajiWPmg9mTSDqO16SSLiD17r9MsvAPTmw==} resolution: {integrity: sha512-LpLqY2Jr7cRxkrTc796/AaaoMLF/1ax7cto8Ot76wrvKQhrPmZ0JgajiWPmg9mTSDqO16SSLiD17r9MsvAPTmw==}
engines: {node: '>=16'} engines: {node: '>=16'}
svelte@5.7.1: svelte@5.9.0:
resolution: {integrity: sha512-kUtiiNcN7ssi5X8OQW8IILoI53RUudjn8TD1910i8cg5c5IRZ4IuaDO1vFl+kZcvv1geYBxlFpi/mj09m/CCBg==} resolution: {integrity: sha512-ZcC3BtjIDa4yfhAyAr94MxDQLD97zbpXmaUldFv2F5AkdZwYgQYB3BZVNRU5zEVaeeHoAns8ADiRMnre3QmpxQ==}
engines: {node: '>=18'} engines: {node: '>=18'}
svgo@3.0.2: svgo@3.0.2:
@@ -7625,7 +7628,7 @@ snapshots:
'@jridgewell/gen-mapping@0.3.3': '@jridgewell/gen-mapping@0.3.3':
dependencies: dependencies:
'@jridgewell/set-array': 1.1.2 '@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/trace-mapping': 0.3.20
'@jridgewell/gen-mapping@0.3.5': '@jridgewell/gen-mapping@0.3.5':
@@ -7908,18 +7911,18 @@ snapshots:
'@sindresorhus/merge-streams@1.0.0': {} '@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: 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: 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 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: 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 '@types/cookie': 0.6.0
cookie: 0.6.0 cookie: 0.6.0
devalue: 5.1.1 devalue: 5.1.1
@@ -7931,18 +7934,18 @@ snapshots:
sade: 1.8.1 sade: 1.8.1
set-cookie-parser: 2.6.0 set-cookie-parser: 2.6.0
sirv: 3.0.0 sirv: 3.0.0
svelte: 5.7.1 svelte: 5.9.0
tiny-glob: 0.2.9 tiny-glob: 0.2.9
vite: 6.0.3(@types/node@20.14.6)(terser@5.31.0) 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: dependencies:
chokidar: 4.0.1 chokidar: 4.0.1
kleur: 4.1.5 kleur: 4.1.5
sade: 1.8.1 sade: 1.8.1
semver: 7.6.0 semver: 7.6.0
svelte: 5.7.1 svelte: 5.9.0
svelte2tsx: 0.7.24(svelte@5.7.1)(typescript@5.6.3) svelte2tsx: 0.7.24(svelte@5.9.0)(typescript@5.6.3)
transitivePeerDependencies: transitivePeerDependencies:
- typescript - typescript
@@ -7955,11 +7958,11 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - 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: 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 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) vite: 6.0.3(@types/node@20.14.6)(terser@5.31.0)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
@@ -7978,14 +7981,14 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - 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: 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 debug: 4.3.7
deepmerge: 4.3.1 deepmerge: 4.3.1
kleur: 4.1.5 kleur: 4.1.5
magic-string: 0.30.14 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) 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)) vitefu: 1.0.3(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
transitivePeerDependencies: transitivePeerDependencies:
@@ -9872,7 +9875,7 @@ snapshots:
string.prototype.matchall: 4.0.11 string.prototype.matchall: 4.0.11
string.prototype.repeat: 1.0.0 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: dependencies:
'@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0) '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
'@jridgewell/sourcemap-codec': 1.5.0 '@jridgewell/sourcemap-codec': 1.5.0
@@ -9885,13 +9888,13 @@ snapshots:
postcss-safe-parser: 6.0.0(postcss@8.4.49) postcss-safe-parser: 6.0.0(postcss@8.4.49)
postcss-selector-parser: 6.1.2 postcss-selector-parser: 6.1.2
semver: 7.6.3 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: optionalDependencies:
svelte: 5.7.1 svelte: 5.9.0
transitivePeerDependencies: transitivePeerDependencies:
- ts-node - 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: dependencies:
'@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
'@jridgewell/sourcemap-codec': 1.5.0 '@jridgewell/sourcemap-codec': 1.5.0
@@ -9904,9 +9907,9 @@ snapshots:
postcss-safe-parser: 6.0.0(postcss@8.4.49) postcss-safe-parser: 6.0.0(postcss@8.4.49)
postcss-selector-parser: 6.1.2 postcss-selector-parser: 6.1.2
semver: 7.6.3 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: optionalDependencies:
svelte: 5.7.1 svelte: 5.9.0
transitivePeerDependencies: transitivePeerDependencies:
- ts-node - ts-node
@@ -12165,10 +12168,10 @@ snapshots:
dependencies: dependencies:
fast-diff: 1.3.0 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: dependencies:
prettier: 3.4.2 prettier: 3.4.2
svelte: 5.7.1 svelte: 5.9.0
prettier@2.8.8: {} prettier@2.8.8: {}
@@ -12996,19 +12999,19 @@ snapshots:
supports-preserve-symlinks-flag@1.0.0: {} 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: dependencies:
'@jridgewell/trace-mapping': 0.3.25 '@jridgewell/trace-mapping': 0.3.25
chokidar: 4.0.1 chokidar: 4.0.1
fdir: 6.4.2 fdir: 6.4.2
picocolors: 1.1.1 picocolors: 1.1.1
sade: 1.8.1 sade: 1.8.1
svelte: 5.7.1 svelte: 5.9.0
typescript: 5.6.3 typescript: 5.6.3
transitivePeerDependencies: transitivePeerDependencies:
- picomatch - picomatch
svelte-eslint-parser@0.43.0(svelte@5.7.1): svelte-eslint-parser@0.43.0(svelte@5.9.0):
dependencies: dependencies:
eslint-scope: 7.2.2 eslint-scope: 7.2.2
eslint-visitor-keys: 3.4.3 eslint-visitor-keys: 3.4.3
@@ -13016,15 +13019,15 @@ snapshots:
postcss: 8.4.49 postcss: 8.4.49
postcss-scss: 4.0.9(postcss@8.4.49) postcss-scss: 4.0.9(postcss@8.4.49)
optionalDependencies: optionalDependencies:
svelte: 5.7.1 svelte: 5.9.0
svelte-hmr@0.15.3(svelte@4.2.1): svelte-hmr@0.15.3(svelte@4.2.1):
dependencies: dependencies:
svelte: 4.2.1 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: dependencies:
svelte: 5.7.1 svelte: 5.9.0
optionalDependencies: optionalDependencies:
'@babel/core': 7.24.7 '@babel/core': 7.24.7
postcss: 8.4.49 postcss: 8.4.49
@@ -13038,11 +13041,11 @@ snapshots:
svelte: 4.2.1 svelte: 4.2.1
typescript: 5.6.3 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: dependencies:
dedent-js: 1.0.1 dedent-js: 1.0.1
pascal-case: 3.1.2 pascal-case: 3.1.2
svelte: 5.7.1 svelte: 5.9.0
typescript: 5.6.3 typescript: 5.6.3
svelte@4.2.1: svelte@4.2.1:
@@ -13061,7 +13064,7 @@ snapshots:
magic-string: 0.30.5 magic-string: 0.30.5
periscopic: 3.1.0 periscopic: 3.1.0
svelte@5.7.1: svelte@5.9.0:
dependencies: dependencies:
'@ampproject/remapping': 2.3.0 '@ampproject/remapping': 2.3.0
'@jridgewell/sourcemap-codec': 1.5.0 '@jridgewell/sourcemap-codec': 1.5.0
@@ -13074,7 +13077,7 @@ snapshots:
esrap: 1.2.3 esrap: 1.2.3
is-reference: 3.0.3 is-reference: 3.0.3
locate-character: 3.0.0 locate-character: 3.0.0
magic-string: 0.30.12 magic-string: 0.30.14
zimmerframe: 1.1.2 zimmerframe: 1.1.2
svgo@3.0.2: svgo@3.0.2: