refactor(svelte/react): cleanup exports

packages/react/src/index.ts

@@ -23,16 +23,6 @@ export { default as useOnViewportChange, type UseOnViewportChangeOptions } from
 export { default as useOnSelectionChange, type UseOnSelectionChangeOptions } from './hooks/useOnSelectionChange';
 export { default as useNodesInitialized, type UseNodesInitializedOptions } from './hooks/useNodesInitialized';
 export { useNodeId } from './contexts/NodeIdContext';
-export * from '@xyflow/system';
-// export {
-//   getTransformForBounds,
-//   getRectOfNodes,
-//   getNodePositionWithOrigin,
-//   rectToBox,
-//   boxToRect,
-//   getBoundsOfRects,
-//   clamp,
-// } from '@xyflow/system';
 
 export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { isNode, isEdge, getIncomers, getOutgoers, addEdge, updateEdge, getConnectedEdges } from './utils/general';
@@ -40,3 +30,60 @@ export { isNode, isEdge, getIncomers, getOutgoers, addEdge, updateEdge, getConne
 export * from './additional-components';
 
 export * from './types';
+
+// system types
+export {
+  type SmoothStepPathOptions,
+  type BezierPathOptions,
+  ConnectionLineType,
+  type EdgeMarker,
+  type EdgeMarkerType,
+  MarkerType,
+  type OnMove,
+  type OnMoveStart,
+  type OnMoveEnd,
+  type Connection,
+  type ConnectionStatus,
+  ConnectionMode,
+  type OnConnectStartParams,
+  type OnConnectStart,
+  type OnConnect,
+  type OnConnectEnd,
+  type IsValidConnection,
+  type Viewport,
+  type SnapGrid,
+  PanOnScrollMode,
+  type ViewportHelperFunctionOptions,
+  type SetCenterOptions,
+  type FitBoundsOptions,
+  type PanelPosition,
+  type ProOptions,
+  SelectionMode,
+  type SelectionRect,
+  type OnError,
+  type NodeOrigin,
+  type OnNodeDrag,
+  type OnSelectionDrag,
+  Position,
+  type XYPosition,
+  type XYZPosition,
+  type Dimensions,
+  type Rect,
+  type Box,
+  type Transform,
+  type CoordinateExtent,
+} from '@xyflow/system';
+
+// system utils
+export {
+  type GetBezierPathParams,
+  getBezierEdgeCenter,
+  getBezierPath,
+  getEdgeCenter,
+  type GetSmoothStepPathParams,
+  getSmoothStepPath,
+  type GetStraightPathParams,
+  getStraightPath,
+  getTransformForBounds,
+  getRectOfNodes,
+} from '@xyflow/system';

packages/svelte/package.json

@@ -22,8 +22,10 @@
   "type": "module",
   "module": "index.ts",
   "exports": {
-    "./package.json": "./package.json",
+    ".": {
-    ".": "./dist/index.js"
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -56,7 +58,6 @@
   "files": [
     "dist"
   ],
-  "svelte": "./dist/index.js",
   "typesVersions": {
     ">4.0": {
       "actions/drag": [

packages/svelte/src/example-components/Header/Header.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
 
   const routes = [
     'customnode',
@@ -15,15 +16,15 @@
 
   const onChange = (event: Event) => {
     const route = (event.target as HTMLSelectElement).value;
-    goto(`/${route}`);
+    goto(route);
   };
 </script>
 
 <header>
   <div class="logo">Svelte Flow</div>
-  <select on:change={onChange}>
+  <select on:change={onChange} value={$page.route.id}>
     {#each routes as route}
-      <option value={route}>{route}</option>
+      <option value={`/${route}`}>{route}</option>
     {/each}
   </select>
 </header>
@@ -41,4 +42,4 @@
   .logo {
     margin-right: 1rem;
   }
-</style>
+</style>

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

@@ -27,6 +27,8 @@
   export let positionOrigin: NodeWrapperProps['positionOrigin'] = undefined;
   export let sourcePosition: NodeWrapperProps['sourcePosition'] = undefined;
   export let targetPosition: NodeWrapperProps['targetPosition'] = undefined;
+  export let zIndex: NodeWrapperProps['zIndex'];
+  export let dragHandle: NodeWrapperProps['dragHandle'] = undefined;
   let className: string = '';
   export { className as class };
 
@@ -41,8 +43,7 @@
     type = 'default';
   }
 
-  const nodeComponent: typeof SvelteComponentTyped<Partial<NodeProps>> =
+  const nodeComponent: typeof SvelteComponentTyped<NodeProps> = $nodeTypes[type!] || DefaultNode;
-    $nodeTypes[type!] || DefaultNode;
   const selectNodesOnDrag = false;
   const dispatch = createEventDispatcher();
 
@@ -105,6 +106,11 @@
     {selected}
     {sourcePosition}
     {targetPosition}
+    {type}
+    {zIndex}
+    {dragging}
+    {dragHandle}
+    isConnectable={connectable}
     xPos={positionAbsolute?.x ?? 0}
     yPos={positionAbsolute?.y ?? 0}
     on:connect:start

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

@@ -18,9 +18,11 @@ export type NodeWrapperProps = Pick<
   | 'height'
   | 'sourcePosition'
   | 'targetPosition'
+  | 'dragHandle'
 > & {
   positionOrigin?: XYPosition;
   'on:nodeclick'?: (event: MouseEvent) => void;
   resizeObserver?: ResizeObserver | null;
   isParent?: boolean;
+  zIndex: number;
 };

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -63,6 +63,8 @@
       sourcePosition={node.sourcePosition}
       targetPosition={node.targetPosition}
       dragging={node.dragging}
+      zIndex={node[internalsSymbol]?.z ?? 0}
+      dragHandle={node.dragHandle}
       {resizeObserver}
       on:node:click
       on:node:mouseenter

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

@@ -69,7 +69,3 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   'on:pane:click'?: CustomEvent;
   'on:pane:contextmenu'?: CustomEvent;
 };
-
-export type SvelteFlowSlots = {
-  default: { slotValue: string };
-};

packages/svelte/src/lib/index.ts

@@ -1,22 +1,81 @@
-import { SvelteFlow } from '$lib/container/SvelteFlow';
+// main component
+export { SvelteFlow } from '$lib/container/SvelteFlow';
+export * from '$lib/container/SvelteFlow/types';
 
-export * from '$lib/container/SvelteFlow';
+// components
 export * from '$lib/container/Panel';
-
 export * from '$lib/components/SvelteFlowProvider';
 export * from '$lib/components/EdgeLabelRenderer';
 export * from '$lib/components/BaseEdge';
 export * from '$lib/components/Handle';
 
+// plugins
 export * from '$lib/plugins/Controls';
 export * from '$lib/plugins/Background';
 export * from '$lib/plugins/Minimap';
 
-export * from '$lib/types';
+// utils
 export * from '$lib/utils';
-
 export * from '$lib/hooks/useSvelteFlow';
 
-export * from '@xyflow/system';
+// types
+export type { Edge, EdgeProps, EdgeTypes, DefaultEdgeOptions } from '$lib/types/edges';
+export type { HandleComponentProps, FitViewOptions } from '$lib/types/general';
+export type { Node, NodeTypes, DefaultNodeOptions } from '$lib/types/nodes';
 
-export default SvelteFlow;
+// system types
+export {
+  type SmoothStepPathOptions,
+  type BezierPathOptions,
+  ConnectionLineType,
+  type EdgeMarker,
+  type EdgeMarkerType,
+  MarkerType,
+  type OnMove,
+  type OnMoveStart,
+  type OnMoveEnd,
+  type Connection,
+  type ConnectionStatus,
+  ConnectionMode,
+  type OnConnectStartParams,
+  type OnConnectStart,
+  type OnConnect,
+  type OnConnectEnd,
+  type IsValidConnection,
+  type Viewport,
+  type SnapGrid,
+  PanOnScrollMode,
+  type ViewportHelperFunctionOptions,
+  type SetCenterOptions,
+  type FitBoundsOptions,
+  type PanelPosition,
+  type ProOptions,
+  SelectionMode,
+  type SelectionRect,
+  type OnError,
+  type NodeOrigin,
+  type OnNodeDrag,
+  type OnSelectionDrag,
+  Position,
+  type XYPosition,
+  type XYZPosition,
+  type Dimensions,
+  type Rect,
+  type Box,
+  type Transform,
+  type CoordinateExtent
+} from '@xyflow/system';
+
+// system utils
+export {
+  type GetBezierPathParams,
+  getBezierEdgeCenter,
+  getBezierPath,
+  getEdgeCenter,
+  type GetSmoothStepPathParams,
+  getSmoothStepPath,
+  type GetStraightPathParams,
+  getStraightPath,
+  getTransformForBounds,
+  getRectOfNodes
+} from '@xyflow/system';

packages/svelte/src/routes/customnode/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { ChangeEventHandler } from 'svelte/elements';
   import { writable } from 'svelte/store';
-  import SvelteFlow, {
+  import {
+    SvelteFlow,
     Controls,
     Background,
     BackgroundVariant,

packages/svelte/src/routes/drag-n-drop/Flow.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
-  import SvelteFlow, {
+  import {
+    SvelteFlow,
     Controls,
     Background,
     BackgroundVariant,

packages/svelte/src/routes/edges/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
-  import SvelteFlow, {
+  import {
+    SvelteFlow,
     Controls,
     Background,
     BackgroundVariant,

packages/svelte/src/routes/interaction/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
-  import SvelteFlow, {
+  import {
+    SvelteFlow,
     Controls,
     Panel,
     PanOnScrollMode,

packages/svelte/src/routes/overview/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
-
+  import {
-  import SvelteFlow, {
+    SvelteFlow,
     Controls,
     Background,
     BackgroundVariant,
@@ -11,6 +11,7 @@
     type NodeTypes,
     type EdgeTypes
   } from '../../lib/index';
+
   import { CustomNode } from './CustomNode';
   import { CustomEdge } from './CustomEdge';
 

packages/svelte/src/routes/overview/CustomEdge/Custom.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
-  import { getBezierPath } from '@xyflow/system';
+  import {
-
+    BaseEdge,
-  import { BaseEdge, EdgeLabelRenderer, useSvelteFlow, type EdgeProps } from '../../../lib/index';
+    EdgeLabelRenderer,
+    useSvelteFlow,
+    type EdgeProps,
+    getBezierPath
+  } from '../../../lib/index';
 
   type $$Props = EdgeProps;
 

packages/svelte/src/routes/overview/CustomNode/Custom.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { Position } from '@xyflow/system';
+  import { Handle, Position } from '../../../lib/index';
-  import { Handle } from '../../../lib/index';
 
   export let data: { label: string } = { label: 'Node' };
   export let xPos: number = 0;

packages/svelte/src/routes/stress/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
-  import SvelteFlow, {
+  import {
+    SvelteFlow,
     Controls,
     Background,
     BackgroundVariant,

packages/svelte/src/routes/subflows/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
-  import SvelteFlow, {
+  import {
+    SvelteFlow,
     Controls,
     Background,
     BackgroundVariant,
@@ -8,6 +9,7 @@
     type NodeTypes,
     type Node
   } from '../../lib/index';
+
   import { DebugNode } from './DebugNode';
 
   const nodeTypes: NodeTypes = {

packages/svelte/src/routes/usesvelteflow/Flow.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
-  import SvelteFlow, { Controls, Background, BackgroundVariant, MiniMap } from '../../lib/index';
+  import { SvelteFlow, Controls, Background, BackgroundVariant, MiniMap } from '../../lib/index';
+
   import Sidebar from './Sidebar.svelte';
 
   const nodes = writable([

packages/svelte/src/routes/validation/+page.svelte

@@ -1,18 +1,29 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
-
+  import {
-  import SvelteFlow, {
+    SvelteFlow,
     Controls,
     Background,
     BackgroundVariant,
-    type IsValidConnection
+    type IsValidConnection,
+    Position
   } from '../../lib/index';
 
+  const nodeDefaults = {
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left
+  };
+
   const nodes = writable([
-    { id: '0', type: 'default', position: { x: 0, y: 150 }, data: { label: 'only connectable with B' } },
+    {
-    { id: 'A', type: 'default', position: { x: 250, y: 0 }, data: { label: 'A' } },
+      id: '0',
-    { id: 'B', type: 'default', position: { x: 250, y: 150 }, data: { label: 'B' } },
+      position: { x: 0, y: 150 },
-    { id: 'C', type: 'default', position: { x: 250, y: 300 }, data: { label: 'C' } }
+      data: { label: 'only connectable with B' },
+      ...nodeDefaults
+    },
+    { 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([]);
@@ -20,14 +31,7 @@
   const isValidConnection: IsValidConnection = (connection) => connection.target === 'B';
 </script>
 
-<SvelteFlow
+<SvelteFlow {nodes} {edges} fitView minZoom={0.1} maxZoom={2.5} {isValidConnection}>
-  {nodes}
-  {edges}
-  fitView
-  minZoom={0.1}
-  maxZoom={2.5}
-  isValidConnection={isValidConnection}
->
   <Controls />
   <Background variant={BackgroundVariant.Dots} />
 </SvelteFlow>

packages/system/src/types/general.ts

@@ -21,12 +21,12 @@ export type SetViewport = (viewport: Viewport, options?: ViewportHelperFunctionO
 export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => void;
 export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => void;
 
-export interface Connection {
+export type Connection = {
   source: string | null;
   target: string | null;
   sourceHandle: string | null;
   targetHandle: string | null;
-}
+};
 
 export type ConnectionStatus = 'valid' | 'invalid';