feat(svelte): ssr

packages/svelte/src/lib/store/index.ts

@@ -29,8 +29,18 @@ import { getDerivedConnectionProps } from './derived-connection-props';
 
 export const key = Symbol();
 
-export function createStore(): SvelteFlowStore {
-  const store = getInitialStore();
+export function createStore({
+  nodes,
+  edges,
+  width,
+  height
+}: {
+  nodes?: Node[];
+  edges?: Edge[];
+  width?: number;
+  height?: number;
+}): SvelteFlowStore {
+  const store = getInitialStore({ nodes, edges, width, height });
 
   function setNodeTypes(nodeTypes: NodeTypes) {
     store.nodeTypes.set({
@@ -333,8 +343,18 @@ export function useStore(): SvelteFlowStore {
   return store.getStore();
 }
 
-export function createStoreContext() {
-  const store = createStore();
+export function createStoreContext({
+  nodes,
+  edges,
+  width,
+  height
+}: {
+  nodes?: Node[];
+  edges?: Edge[];
+  width?: number;
+  height?: number;
+}) {
+  const store = createStore({ nodes, edges, width, height });
 
   setContext(key, {
     getStore: () => store

packages/svelte/src/lib/store/initial-store.ts

@@ -24,7 +24,7 @@ import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
 import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
 import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
 import StepEdge from '$lib/components/edges/StepEdge.svelte';
-import type { NodeTypes, EdgeTypes, EdgeLayouted, Node, FitViewOptions } from '$lib/types';
+import type { NodeTypes, EdgeTypes, EdgeLayouted, Node, Edge, FitViewOptions } from '$lib/types';
 import { createNodesStore, createEdgesStore } from './utils';
 import { initConnectionProps, type ConnectionProps } from './derived-connection-props';
 
@@ -41,51 +41,63 @@ export const initialEdgeTypes = {
   step: StepEdge
 };
 
-export const getInitialStore = () => ({
-  flowId: writable<string | null>(null),
-  nodes: createNodesStore([]),
-  visibleNodes: readable<Node[]>([]),
-  edges: createEdgesStore([]),
-  edgeTree: readable<GroupedEdges<EdgeLayouted>[]>([]),
-  height: writable<number>(500),
-  width: writable<number>(500),
-  minZoom: writable<number>(0.5),
-  maxZoom: writable<number>(2),
-  nodeOrigin: writable<NodeOrigin>([0, 0]),
-  nodeDragThreshold: writable<number>(0),
-  nodeExtent: writable<CoordinateExtent>(infiniteExtent),
-  translateExtent: writable<CoordinateExtent>(infiniteExtent),
-  autoPanOnNodeDrag: writable<boolean>(true),
-  autoPanOnConnect: writable<boolean>(true),
-  fitViewOnInit: writable<boolean>(false),
-  fitViewOnInitDone: writable<boolean>(false),
-  fitViewOptions: writable<FitViewOptions>(undefined),
-  panZoom: writable<PanZoomInstance | null>(null),
-  snapGrid: writable<SnapGrid | null>(null),
-  dragging: writable<boolean>(false),
-  selectionRect: writable<SelectionRect | null>(null),
-  selectionKeyPressed: writable<boolean>(false),
-  multiselectionKeyPressed: writable<boolean>(false),
-  deleteKeyPressed: writable<boolean>(false),
-  panActivationKeyPressed: writable<boolean>(false),
-  selectionRectMode: writable<string | null>(null),
-  selectionMode: writable<SelectionMode>(SelectionMode.Partial),
-  nodeTypes: writable<NodeTypes>(initialNodeTypes),
-  edgeTypes: writable<EdgeTypes>(initialEdgeTypes),
-  viewport: writable<Viewport>({ x: 0, y: 0, zoom: 1 }),
-  connectionMode: writable<ConnectionMode>(ConnectionMode.Strict),
-  domNode: writable<HTMLDivElement | null>(null),
-  connection: readable<ConnectionProps>(initConnectionProps),
-  connectionLineType: writable<ConnectionLineType>(ConnectionLineType.Bezier),
-  connectionRadius: writable<number>(20),
-  isValidConnection: writable<IsValidConnection>(() => true),
-  nodesDraggable: writable<boolean>(true),
-  nodesConnectable: writable<boolean>(true),
-  elementsSelectable: writable<boolean>(true),
-  selectNodesOnDrag: writable<boolean>(true),
-  markers: readable<MarkerProps[]>([]),
-  defaultMarkerColor: writable<string>('#b1b1b7'),
-  lib: readable<string>('svelte'),
-  onlyRenderVisibleElements: writable<boolean>(false),
-  onError: writable<OnError>(devWarn)
-});
+export const getInitialStore = ({
+  nodes = [],
+  edges = [],
+  width,
+  height
+}: {
+  nodes?: Node[];
+  edges?: Edge[];
+  width?: number;
+  height?: number;
+}) => {
+  return {
+    flowId: writable<string | null>(null),
+    nodes: createNodesStore(nodes),
+    visibleNodes: readable<Node[]>([]),
+    edges: createEdgesStore(edges),
+    edgeTree: readable<GroupedEdges<EdgeLayouted>[]>([]),
+    height: writable<number>(500),
+    width: writable<number>(500),
+    minZoom: writable<number>(0.5),
+    maxZoom: writable<number>(2),
+    nodeOrigin: writable<NodeOrigin>([0, 0]),
+    nodeDragThreshold: writable<number>(0),
+    nodeExtent: writable<CoordinateExtent>(infiniteExtent),
+    translateExtent: writable<CoordinateExtent>(infiniteExtent),
+    autoPanOnNodeDrag: writable<boolean>(true),
+    autoPanOnConnect: writable<boolean>(true),
+    fitViewOnInit: writable<boolean>(false),
+    fitViewOnInitDone: writable<boolean>(false),
+    fitViewOptions: writable<FitViewOptions>(undefined),
+    panZoom: writable<PanZoomInstance | null>(null),
+    snapGrid: writable<SnapGrid | null>(null),
+    dragging: writable<boolean>(false),
+    selectionRect: writable<SelectionRect | null>(null),
+    selectionKeyPressed: writable<boolean>(false),
+    multiselectionKeyPressed: writable<boolean>(false),
+    deleteKeyPressed: writable<boolean>(false),
+    panActivationKeyPressed: writable<boolean>(false),
+    selectionRectMode: writable<string | null>(null),
+    selectionMode: writable<SelectionMode>(SelectionMode.Partial),
+    nodeTypes: writable<NodeTypes>(initialNodeTypes),
+    edgeTypes: writable<EdgeTypes>(initialEdgeTypes),
+    viewport: writable<Viewport>({ x: 0, y: 0, zoom: 1 }),
+    connectionMode: writable<ConnectionMode>(ConnectionMode.Strict),
+    domNode: writable<HTMLDivElement | null>(null),
+    connection: readable<ConnectionProps>(initConnectionProps),
+    connectionLineType: writable<ConnectionLineType>(ConnectionLineType.Bezier),
+    connectionRadius: writable<number>(20),
+    isValidConnection: writable<IsValidConnection>(() => true),
+    nodesDraggable: writable<boolean>(true),
+    nodesConnectable: writable<boolean>(true),
+    elementsSelectable: writable<boolean>(true),
+    selectNodesOnDrag: writable<boolean>(true),
+    markers: readable<MarkerProps[]>([]),
+    defaultMarkerColor: writable<string>('#b1b1b7'),
+    lib: readable<string>('svelte'),
+    onlyRenderVisibleElements: writable<boolean>(false),
+    onError: writable<OnError>(devWarn)
+  };
+};

packages/svelte/src/lib/store/utils.ts

@@ -6,7 +6,7 @@ import {
   type Writable,
   get
 } from 'svelte/store';
-import { updateNodes, type Transform, type Viewport, type PanZoomInstance } from '@xyflow/system';
+import { updateNodes, type Viewport, type PanZoomInstance } from '@xyflow/system';
 
 import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
 

packages/svelte/src/lib/store/visible-nodes.ts

@@ -9,6 +9,7 @@ export function getVisibleNodes(store: SvelteFlowStoreState) {
     [store.nodes, store.onlyRenderVisibleElements, store.width, store.height, store.viewport],
     ([nodes, onlyRenderVisibleElements, width, height, viewport]) => {
       const transform: Transform = [viewport.x, viewport.y, viewport.zoom];
+
       return onlyRenderVisibleElements
         ? getNodesInside<Node>(nodes, { x: 0, y: 0, width, height }, transform, true)
         : nodes;