From 7d184ec1b696233ee5ba9a6f673817313b72ef4b Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Wed, 13 Nov 2024 17:34:05 +0100
Subject: [PATCH] finish initial migration (runs in runes mode)

---
 examples/svelte/svelte.config.js              |  6 +++---
 .../SvelteFlowProvider.svelte                 | 16 +++++++--------
 .../EdgeRenderer/EdgeRenderer.svelte          | 19 ++++++++++++------
 .../MarkerDefinition/Marker.svelte            | 20 +++++++++----------
 .../NodeRenderer/NodeRenderer.svelte          |  2 +-
 5 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/examples/svelte/svelte.config.js b/examples/svelte/svelte.config.js
index 42e34179..10899539 100644
--- a/examples/svelte/svelte.config.js
+++ b/examples/svelte/svelte.config.js
@@ -6,9 +6,9 @@ const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
 	preprocess: vitePreprocess(),
-	// compilerOptions: {
-	// 	runes: true
-	// },
+	compilerOptions: {
+		runes: true
+	},
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
diff --git a/packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte b/packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte
index 053373c0..1b64bbba 100644
--- a/packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte
+++ b/packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte
@@ -4,14 +4,14 @@
   import { createStore, key } from '$lib/store';
   import type { SvelteFlowProviderProps } from './types';
 
-  type $$Props = SvelteFlowProviderProps;
-
-  export let initialNodes: $$Props['initialNodes'] = undefined;
-  export let initialEdges: $$Props['initialEdges'] = undefined;
-  export let initialWidth: $$Props['initialWidth'] = undefined;
-  export let initialHeight: $$Props['initialHeight'] = undefined;
-  export let fitView: $$Props['fitView'] = undefined;
-  export let nodeOrigin: $$Props['nodeOrigin'] = undefined;
+  let {
+    initialNodes,
+    initialEdges,
+    initialWidth,
+    initialHeight,
+    nodeOrigin,
+    fitView
+  }: SvelteFlowProviderProps = $props();
 
   const store = createStore({
     nodes: initialNodes,
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
index 4af48ae2..2fab5055 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
@@ -4,9 +4,15 @@
   import { CallOnMount } from '$lib/components/CallOnMount';
   import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition';
   import { useStore } from '$lib/store';
-  import type { DefaultEdgeOptions } from '$lib/types';
+  import type { DefaultEdgeOptions, EdgeEvents } from '$lib/types';
 
-  export let defaultEdgeOptions: DefaultEdgeOptions | undefined;
+  let {
+    defaultEdgeOptions,
+    onedgeclick,
+    onedgecontextmenu,
+    onedgemouseenter,
+    onedgemouseleave
+  }: { defaultEdgeOptions?: DefaultEdgeOptions } & EdgeEvents = $props();
 
   const {
     visibleEdges,
@@ -16,6 +22,7 @@
   } = useStore();
 
   onMount(() => {
+    // TODO: Remove this when we have a better way to set default options
     if (defaultEdgeOptions) setDefaultOptions(defaultEdgeOptions);
   });
 </script>
@@ -54,10 +61,10 @@
       class={edge.class}
       type={edge.type || 'default'}
       zIndex={edge.zIndex}
-      on:edgeclick
-      on:edgecontextmenu
-      on:edgemouseenter
-      on:edgemouseleave
+      {onedgeclick}
+      {onedgecontextmenu}
+      {onedgemouseenter}
+      {onedgemouseleave}
     />
   {/each}
 
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte b/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
index dd1ec439..71412ec0 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
   import { type MarkerProps, MarkerType } from '@xyflow/system';
 
-  type $$Props = MarkerProps;
-
-  export let id: $$Props['id'];
-  export let type: $$Props['type'];
-  export let width: $$Props['width'] = 12.5;
-  export let height: $$Props['height'] = 12.5;
-  export let markerUnits: $$Props['markerUnits'] = 'strokeWidth';
-  export let orient: $$Props['orient'] = 'auto-start-reverse';
-  export let color: $$Props['color'] = undefined;
-  export let strokeWidth: $$Props['strokeWidth'] = undefined;
+  let {
+    id,
+    type,
+    width = 12.5,
+    height = 12.5,
+    markerUnits = 'strokeWidth',
+    orient = 'auto-start-reverse',
+    color,
+    strokeWidth
+  }: MarkerProps = $props();
 </script>
 
 <marker
diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
index a6cda57e..8d72d86e 100644
--- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
@@ -2,7 +2,7 @@
   import { onDestroy } from 'svelte';
   import { nodeHasDimensions } from '@xyflow/system';
 
-  import type { NodeEvents } from '$lib/types/events';
+  import type { NodeEvents } from '$lib/types';
   import { NodeWrapper } from '$lib/components/NodeWrapper';
   import { useStore } from '$lib/store';