feat(svelte): add Provider

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import SvelteFlow, {
+    SvelteFlowProvider,
     Controls,
     Background,
     BackgroundVariant,
@@ -103,31 +104,34 @@
   }
 </script>
 
-<SvelteFlow
+<SvelteFlowProvider
   {nodes}
   {edges}
-  {nodeTypes}
-  fitView
-  minZoom={0.1}
-  maxZoom={2.5}
-  initialViewport={{ x: 100, y: 100, zoom: 2 }}
-  on:node:click={(event) => console.log('on node click', event)}
-  on:node:mouseenter={(event) => console.log('on node enter', event)} 
-  on:node:mouseleave={(event) => console.log('on node leave', event)}
-  on:edge:click={(event) => console.log('edge click', event)}
-  on:connect:start={(event) => console.log('on connect start', event)}
-  on:connect={(event) => console.log('on connect', event)}
-  on:connect:end={(event) => console.log('on connect end', event)}
-  on:pane:click={(event) => console.log('on pane click', event)}
-  on:pane:contextmenu={(event) => { event.preventDefault(); console.log('on pane contextmenu', event); }}
 >
-  <Controls />
-  <Background variant={BackgroundVariant.Dots} />
-  <Minimap />
-  <Panel position="top-right">
-    <button on:click={updateNode}>update node pos</button>
-  </Panel>
-</SvelteFlow>
+  <SvelteFlow
+    {nodeTypes}
+    fitView
+    minZoom={0.1}
+    maxZoom={2.5}
+    initialViewport={{ x: 100, y: 100, zoom: 2 }}
+    on:node:click={(event) => console.log('on node click', event)}
+    on:node:mouseenter={(event) => console.log('on node enter', event)} 
+    on:node:mouseleave={(event) => console.log('on node leave', event)}
+    on:edge:click={(event) => console.log('edge click', event)}
+    on:connect:start={(event) => console.log('on connect start', event)}
+    on:connect={(event) => console.log('on connect', event)}
+    on:connect:end={(event) => console.log('on connect end', event)}
+    on:pane:click={(event) => console.log('on pane click', event)}
+    on:pane:contextmenu={(event) => { event.preventDefault(); console.log('on pane contextmenu', event); }}
+  >
+    <Controls />
+    <Background variant={BackgroundVariant.Dots} />
+    <Minimap />
+    <Panel position="top-right">
+      <button on:click={updateNode}>update node pos</button>
+    </Panel>
+  </SvelteFlow>
+</SvelteFlowProvider>
 
 <style>
   :root {

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import SvelteFlow, {
+    SvelteFlowProvider,
     Controls,
     Background,
     BackgroundVariant,
@@ -48,13 +49,15 @@
   const edges = createEdges(edgeItems, { animated: true });
 </script>
 
-<SvelteFlow
+<SvelteFlowProvider
   {nodes}
   {edges}
-  fitView
 >
-  <Controls />
-  <Background variant={BackgroundVariant.Dots} />
-  <Minimap />
-</SvelteFlow>
-
+  <SvelteFlow
+    fitView
+  >
+    <Controls />
+    <Background variant={BackgroundVariant.Dots} />
+    <Minimap />
+  </SvelteFlow>
+</SvelteFlowProvider>

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

@@ -1,11 +1,53 @@
 <script lang="ts">
   import {
+    createEdges,
+    createNodes,
     SvelteFlowProvider,
   } from '../../lib/index';
 
   import Flow from './Flow.svelte';
+
+  const nodes = createNodes([
+    {
+      id: '1',
+      type: 'input',
+      data: { label: 'Input Node' },
+      position: { x: 150, y: 5 }
+    },
+    {
+      id: '2',
+      type: 'default',
+      data: { label: 'Node' },
+      position: { x: 0, y: 150 }
+    },
+    {
+      id: '3',
+      type: 'output',
+      data: { label: 'Output Node' },
+      position: { x: 300, y: 150 }
+    }
+  ]);
+
+  const edges = createEdges([
+    {
+      id: '1-2',
+      type: 'default',
+      source: '1',
+      target: '2',
+      label: 'Edge Text'
+    },
+    {
+      id: '1-3',
+      type: 'smoothstep',
+      source: '1',
+      target: '3'
+    }
+  ]);
 </script>
 
-<SvelteFlowProvider>
+<SvelteFlowProvider
+  {nodes}
+  {edges}
+>
   <Flow />
 </SvelteFlowProvider>

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

@@ -5,55 +5,13 @@
     BackgroundVariant,
     Minimap,
     Panel,
-    createNodes,
-    createEdges,
     useSvelteFlow
   } from '../../lib/index';
  
-  const nodes = createNodes([
-    {
-      id: '1',
-      type: 'input',
-      data: { label: 'Input Node' },
-      position: { x: 150, y: 5 }
-    },
-    {
-      id: '2',
-      type: 'default',
-      data: { label: 'Node' },
-      position: { x: 0, y: 150 }
-    },
-    {
-      id: '3',
-      type: 'output',
-      data: { label: 'Output Node' },
-      position: { x: 300, y: 150 }
-    }
-  ]);
-
-  const edges = createEdges([
-    {
-      id: '1-2',
-      type: 'default',
-      source: '1',
-      target: '2',
-      label: 'Edge Text'
-    },
-    {
-      id: '1-3',
-      type: 'smoothstep',
-      source: '1',
-      target: '3'
-    }
-  ]);
-
   const svelteFlow = useSvelteFlow();
 </script>
 
-<SvelteFlow
-  {nodes}
-  {edges}
->
+<SvelteFlow>
   <Controls />
   <Background variant={BackgroundVariant.Dots} />
   <Minimap />