refactor(svelte): cleanup components

packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import EdgeLabelRenderer from '$lib/components/EdgeLabelRenderer/index.svelte';
-  import type { BaseEdgeProps } from '$lib/types';
+  import EdgeLabelRenderer from '$lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte';
+  import type { BaseEdgeProps } from './types';
 
   type $$Props = BaseEdgeProps;
 

packages/svelte/src/lib/components/BaseEdge/index.ts

@@ -0,0 +1 @@
+export { default as BaseEdge } from './BaseEdge.svelte';

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

@@ -0,0 +1,7 @@
+import type { EdgeProps } from '$lib/types';
+
+export type BaseEdgeProps = Pick<EdgeProps, 'interactionWidth' | 'label'> & {
+  path: string;
+  labelX?: number;
+  labelY?: number;
+};

packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte

@@ -2,9 +2,6 @@
   import cc from 'classcat';
 
   import { useStore } from '$lib/store';
-  import type { ConnectionLineProps } from '$lib/types';
-
-  type $$Props = ConnectionLineProps;
 
   const { connectionPath, width, height, connection } = useStore();
 </script>

packages/svelte/src/lib/components/EdgeLabelRenderer/index.ts

@@ -0,0 +1 @@
+export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.svelte';

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -3,7 +3,7 @@
   import { Position } from '@reactflow/system';
 
   import { useStore } from '$lib/store';
-  import BezierEdge from '$lib/components/edges/StraightEdge.svelte';
+  import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
   import type { EdgeProps, EdgeLayouted } from '$lib/types';
 
   type $$Props = EdgeLayouted;

packages/svelte/src/lib/components/EdgeWrapper/index.ts

@@ -0,0 +1 @@
+export { default as EdgeWrapper } from './EdgeWrapper.svelte';

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -14,8 +14,6 @@
   export let position: $$Props['position'] = Position.Top;
   export let isConnectable: $$Props['isConnectable'] = true;
   export let isValidConnection: $$Props['isValidConnection'] = (_: Connection) => true;
-  let className: string | null = null;
-  export { className as class };
 
   const isTarget = type === 'target';
   const nodeId = getContext<string>('rf_nodeid');
@@ -80,7 +78,6 @@
     `react-flow__handle-${position}`,
     'nodrag',
     'nopan',
-    className,
     position
   ])}
   class:source={!isTarget}

packages/svelte/src/lib/components/Handle/index.ts

@@ -0,0 +1 @@
+export { default as Handle } from './Handle.svelte';

packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte

@@ -2,7 +2,7 @@
   import { shortcut } from '@svelte-put/shortcut';
 
   import { useStore } from '$lib/store';
-  import type { KeyHandlerProps } from './KeyHandler';
+  import type { KeyHandlerProps } from './types';
   import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';
 
   const { selectionKeyPressed, deleteKeyPressed } = useStore();

packages/svelte/src/lib/components/KeyHandler/index.ts

@@ -1,2 +1,2 @@
 export { default as KeyHandler } from './KeyHandler.svelte';
-export type { KeyHandlerProps } from './KeyHandler';
+export type { KeyHandlerProps } from './types';

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

@@ -1,4 +1,4 @@
-import { KeyDefinition } from '$lib/types';
+import type { KeyDefinition } from '$lib/types';
 
 export type KeyHandlerProps = {
   selectionKey?: KeyDefinition;

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -2,7 +2,7 @@
   import { getRectOfNodes } from '@reactflow/utils';
 
   import { useStore } from '$lib/store';
-  import Selection from '$lib/components/Selection/index.svelte';
+  import { Selection } from '$lib/components/Selection';
   import drag from '$lib/actions/drag';
 
   const { selectionRectMode, nodes, nodeOrigin, transform, updateNodePositions } = useStore();

packages/svelte/src/lib/components/NodeSelection/index.ts

@@ -0,0 +1 @@
+export { default as NodeSelection } from './NodeSelection.svelte';

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

@@ -1,36 +1,46 @@
 <script lang="ts">
   import { onMount, setContext, SvelteComponentTyped } from 'svelte';
   import cc from 'classcat';
-  import { type XYPosition, Position } from '@reactflow/system';
+  import { type XYPosition, Position, errorMessages } from '@reactflow/system';
 
   import drag from '$lib/actions/drag';
   import { useStore } from '$lib/store';
-  import DefaultNode from './DefaultNode.svelte';
-  import type { WrapNodeProps, NodeProps } from '$lib/types';
+  import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
+  import type { NodeProps } from '$lib/types';
+  import type { NodeWrapperProps } from './types';
 
-  interface $$Props extends WrapNodeProps {}
+  interface $$Props extends NodeWrapperProps {}
 
-  export let id: WrapNodeProps['id'];
-  export let data: WrapNodeProps['data'] = {};
-  export let selected: WrapNodeProps['selected'] = false;
+  export let id: NodeWrapperProps['id'];
+  export let data: NodeWrapperProps['data'] = {};
+  export let selected: NodeWrapperProps['selected'] = false;
   export let positionAbsolute: XYPosition = { x: 0, y: 0 };
   export let position: XYPosition = { x: 0, y: 0 };
   export let dragging: boolean = false;
-  export let resizeObserver: WrapNodeProps['resizeObserver'] = null;
-  export let style: WrapNodeProps['style'] = undefined;
-  export let width: WrapNodeProps['width'] = undefined;
-  export let height: WrapNodeProps['height'] = undefined;
-  export let type: WrapNodeProps['type'] = 'default';
-  export let sourcePosition: WrapNodeProps['sourcePosition'] = Position.Bottom;
-  export let targetPosition: WrapNodeProps['targetPosition'] = Position.Top;
+  export let resizeObserver: NodeWrapperProps['resizeObserver'] = null;
+  export let style: NodeWrapperProps['style'] = undefined;
+  export let width: NodeWrapperProps['width'] = undefined;
+  export let height: NodeWrapperProps['height'] = undefined;
+  export let type: NodeWrapperProps['type'] = 'default';
+  export let sourcePosition: NodeWrapperProps['sourcePosition'] = Position.Bottom
+  export let targetPosition: NodeWrapperProps['targetPosition'] = Position.Top;
+
   let className: string = '';
   export { className as class };
 
   let nodeRef: HTMLDivElement;
 
   const { nodes, transform, nodeTypes, updateNodePositions, addSelectedNodes } = useStore();
+
+  const nodeTypeValid = !!$nodeTypes[type!];
+
+  if (!nodeTypeValid) {
+    console.warn('003', errorMessages['003'](type!));
+    type = 'default';
+  }
+
   const nodeComponent: typeof SvelteComponentTyped<Partial<NodeProps>> =
-    $nodeTypes[type] || DefaultNode;
+    $nodeTypes[type!] || DefaultNode;
   const isSelectable = true;
   const selectNodesOnDrag = false;
   const isDraggable = true;

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

@@ -0,0 +1 @@
+export { default as NodeWrapper } from './NodeWrapper.svelte';

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

@@ -0,0 +1,5 @@
+import type { Node } from '$lib/types';
+
+export type NodeWrapperProps = Node & {
+  resizeObserver?: ResizeObserver | null;
+};

packages/svelte/src/lib/components/Selection/index.ts

@@ -0,0 +1 @@
+export { default as Selection } from './Selection.svelte';

packages/svelte/src/lib/components/UserSelection/UserSelection.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { useStore } from '$lib/store';
-  import Selection from '$lib/components/Selection/index.svelte';
+  import { Selection } from '$lib/components/Selection';
 
   const { selectionRect, selectionRectMode } = useStore();
 </script>

packages/svelte/src/lib/components/UserSelection/index.ts

@@ -0,0 +1 @@
+export { default as UserSelection } from './UserSelection.svelte';

packages/svelte/src/lib/components/edges/BezierEdge.svelte

@@ -2,7 +2,7 @@
   import { getBezierPath } from '@reactflow/edge-utils';
 
   import type { EdgeProps } from '$lib/types';
-  import BaseEdge from './BaseEdge.svelte';
+  import { BaseEdge } from '$lib/components/BaseEdge';
 
   type $$Props = EdgeProps;
 

packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte

@@ -2,7 +2,7 @@
   import { getSmoothStepPath } from '@reactflow/edge-utils';
 
   import type { EdgeProps } from '$lib/types';
-  import BaseEdge from './BaseEdge.svelte';
+  import { BaseEdge } from '$lib/components/BaseEdge';
 
   type $$Props = EdgeProps;
 

packages/svelte/src/lib/components/edges/StraightEdge.svelte

@@ -2,7 +2,7 @@
   import { getStraightPath } from '@reactflow/edge-utils';
 
   import type { EdgeProps } from '$lib/types';
-  import BaseEdge from './BaseEdge.svelte';
+  import { BaseEdge } from '$lib/components/BaseEdge';
 
   type $$Props = EdgeProps;
 

packages/svelte/src/lib/components/nodes/DefaultNode.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Position } from '@reactflow/system';
 
-  import Handle from '$lib/components/Handle/index.svelte';
+  import { Handle } from '$lib/components/Handle';
   import type { NodeProps } from '$lib/types';
 
   interface $$Props extends NodeProps<{ label: string }> {}

packages/svelte/src/lib/components/nodes/InputNode.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Position } from '@reactflow/system';
 
-  import Handle from '$lib/components/Handle/index.svelte';
+  import { Handle } from '$lib/components/Handle';
 
   export let data: { label: string } = { label: 'Node' };
   export let isConnectable: boolean = true;

packages/svelte/src/lib/components/nodes/OutputNode.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Position } from '@reactflow/system';
 
-  import Handle from '$lib/components/Handle/index.svelte';
+  import { Handle } from '$lib/components/Handle';
 
   export let data: { label: string } = { label: 'Node' };
   export let isConnectable: boolean = true;