feat(svelte): ssr

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -116,6 +116,8 @@
     class:parent={isParent}
     style:z-index={zIndex}
     style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
+    style:width={node.dimensions?.width && `${node.dimensions?.width}px`}
+    style:height={node.dimensions?.height && `${node.dimensions?.height}px`}
     {style}
     on:click={onSelectNodeHandler}
     on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}

packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte

@@ -2,8 +2,14 @@
   import { onDestroy, setContext } from 'svelte';
 
   import { createStore, key } from '$lib/store';
+  import type { SvelteFlowProviderProps } from './types';
 
-  const store = createStore();
+  type $$Props = SvelteFlowProviderProps;
+
+  export let nodes: $$Props['nodes'] = undefined;
+  export let edges: $$Props['edges'] = undefined;
+
+  const store = createStore({ nodes, edges });
 
   setContext(key, {
     getStore: () => store

packages/svelte/src/lib/components/SvelteFlowProvider/types.ts

@@ -0,0 +1,6 @@
+import type { Edge, Node } from '$lib/types';
+
+export type SvelteFlowProviderProps = {
+  nodes?: Node[];
+  edges?: Edge[];
+};

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -8,8 +8,6 @@
   export let defaultEdgeOptions: DefaultEdgeOptions | undefined;
 
   const {
-    width,
-    height,
     elementsSelectable,
     edgeTree,
     edges: { setDefaultOptions }
@@ -21,7 +19,7 @@
 </script>
 
 {#each $edgeTree as group (group.level)}
-  <svg width={$width} height={$height} style="z-index: {group.level}" class="svelte-flow__edges">
+  <svg style="z-index: {group.level}" class="svelte-flow__edges">
     {#if group.isMaxLevel} <MarkerDefinition />{/if}
     <g>
       {#each group.edges as edge (edge.id)}

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -16,6 +16,7 @@
   import { key, useStore, createStoreContext } from '$lib/store';
   import type { SvelteFlowProps } from './types';
   import { updateStore, updateStoreByKeys, type UpdatableStoreProps } from './utils';
+  import { get } from 'svelte/store';
 
   type $$Props = SvelteFlowProps;
 
@@ -63,6 +64,8 @@
   export let attributionPosition: $$Props['attributionPosition'] = undefined;
   export let proOptions: $$Props['proOptions'] = undefined;
   export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
+  export let width: $$Props['width'] = undefined;
+  export let height: $$Props['height'] = undefined;
 
   export let defaultMarkerColor = '#b1b1b7';
 
@@ -72,7 +75,9 @@
 
   let domNode: HTMLDivElement;
 
-  const store = hasContext(key) ? useStore() : createStoreContext();
+  const store = hasContext(key)
+    ? useStore()
+    : createStoreContext({ nodes: get(nodes), edges: get(edges), width, height });
 
   onMount(() => {
     const { width, height } = domNode.getBoundingClientRect();

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -72,6 +72,8 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   attributionPosition?: PanelPosition;
   proOptions?: ProOptions;
   defaultEdgeOptions?: DefaultEdgeOptions;
+  width?: number;
+  height?: number;
 
   class?: string;
   style?: string;

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