refactor(react/svelte): simplify ssr usage

examples/astro-xyflow/src/components/ReactFlowExample/index.tsx

@@ -34,8 +34,6 @@ const initialNodes: Node[] = [
         position: Position.Bottom,
         x: nodeSize.width * 0.5,
         y: nodeSize.height,
-        width: 1,
-        height: 1,
       },
     ],
   },

examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte

@@ -1,35 +1,73 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
-  import { SvelteFlow, Controls, Background, BackgroundVariant, Position } from '@xyflow/svelte';
+  import { SvelteFlow, Controls, Background, BackgroundVariant, Position, type Node, type Edge } from '@xyflow/svelte';
 
   import '@xyflow/svelte/dist/style.css';
 
-  const nodeDefaults = {
-    sourcePosition: Position.Right,
-    targetPosition: Position.Left,
-    size: {
-      width: 100,
-      height: 40,
-    },
-    handles: [
-      { type: 'source', x: 100, y: 20, position: Position.Right, width: 1, height: 1 },
-      { type: 'target', x: 0, y: 20, position: Position.Left, width: 1, height: 1 },
-    ],
-  };
-
-  const nodes = writable([
+  const nodes = writable<Node[]>([
     {
       id: '0',
       position: { x: 0, y: 150 },
       data: { label: 'Node 0' },
-      ...nodeDefaults,
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+      size: {
+        width: 100,
+        height: 40,
+      },
+      handles: [
+        { type: 'source', x: 100, y: 20, position: Position.Right },
+        { type: 'target', x: 0, y: 20, position: Position.Left },
+      ],
+    },
+    {
+      id: 'A',
+      position: { x: 250, y: 0 },
+      data: { label: 'A' },
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+      size: {
+        width: 100,
+        height: 40,
+      },
+      handles: [
+        { type: 'source', x: 100, y: 20, position: Position.Right },
+        { type: 'target', x: 0, y: 20, position: Position.Left },
+      ],
+    },
+    {
+      id: 'B',
+      position: { x: 250, y: 150 },
+      data: { label: 'B' },
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+      size: {
+        width: 100,
+        height: 40,
+      },
+      handles: [
+        { type: 'source', x: 100, y: 20, position: Position.Right },
+        { type: 'target', x: 0, y: 20, position: Position.Left },
+      ],
+    },
+    {
+      id: 'C',
+      position: { x: 250, y: 300 },
+      data: { label: 'C' },
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+      size: {
+        width: 100,
+        height: 40,
+      },
+      handles: [
+        { type: 'source', x: 100, y: 20, position: Position.Right },
+        { type: 'target', x: 0, y: 20, position: Position.Left },
+      ],
     },
-    { id: 'A', position: { x: 250, y: 0 }, data: { label: 'A' }, ...nodeDefaults },
-    { id: 'B', position: { x: 250, y: 150 }, data: { label: 'B' }, ...nodeDefaults },
-    { id: 'C', position: { x: 250, y: 300 }, data: { label: 'C' }, ...nodeDefaults },
   ]);
 
-  const edges = writable([
+  const edges = writable<Edge[]>([
     { id: '0A', source: '0', target: 'A', animated: true },
     { id: '0B', source: '0', target: 'B', animated: true },
     { id: '0C', source: '0', target: 'C', animated: true },

packages/react/src/store/initialState.ts

@@ -1,5 +1,4 @@
 import {
-  devWarn,
   infiniteExtent,
   ConnectionMode,
   updateNodes,

packages/system/src/types/nodes.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { internalsSymbol } from '../constants';
 import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.';
+import { Optional } from '../utils/types';
 
 // this is stuff that all nodes share independent of the framework
 export type NodeBase<T = any, U extends string | undefined = string | undefined> = {
@@ -28,7 +29,7 @@ export type NodeBase<T = any, U extends string | undefined = string | undefined>
   ariaLabel?: string;
   focusable?: boolean;
   origin?: NodeOrigin;
-  handles?: HandleElement[];
+  handles?: NodeHandle[];
   size?: {
     width?: number;
     height?: number;
@@ -94,3 +95,5 @@ export type NodeOrigin = [number, number];
 export type OnNodeDrag = (event: MouseEvent, node: NodeBase, nodes: NodeBase[]) => void;
 
 export type OnSelectionDrag = (event: MouseEvent, nodes: NodeBase[]) => void;
+
+export type NodeHandle = Optional<HandleElement, 'width' | 'height'>;

packages/system/src/utils/edges/positions.ts

@@ -1,6 +1,6 @@
 import { EdgePosition } from '../../types/edges';
 import { ConnectionMode, OnError } from '../../types/general';
-import { NodeBase, NodeHandleBounds } from '../../types/nodes';
+import { NodeBase, NodeHandle, NodeHandleBounds } from '../../types/nodes';
 import { Position, Rect, XYPosition } from '../../types/utils';
 import { errorMessages, internalsSymbol } from '../../constants';
 import { HandleElement } from '../../types';
@@ -59,19 +59,22 @@ export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | n
   };
 }
 
-function toHandleBounds(handles?: HandleElement[]) {
+function toHandleBounds(handles?: NodeHandle[]) {
   if (!handles) {
     return null;
   }
 
   return handles.reduce<NodeHandleBounds>(
     (res, item) => {
+      item.width = item.width || 1;
+      item.height = item.height || 1;
+
       if (item.type === 'source') {
-        res.source?.push(item);
+        res.source?.push(item as HandleElement);
       }
 
       if (item.type === 'target') {
-        res.target?.push(item);
+        res.target?.push(item as HandleElement);
       }
 
       return res;

packages/system/src/utils/types.ts

@@ -0,0 +1 @@
+export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;