From 7348490e4c616c0ae1b20269f394599a7d99c4bf Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 23 Jan 2024 15:28:13 +0100
Subject: [PATCH] chore(svelte): cleanup init derived store

---
 .../src/routes/examples/overview/+page.svelte  |  4 ++++
 .../examples/overview/InitTracker.svelte       | 18 ++++++++++++++++++
 packages/svelte/src/lib/store/index.ts         | 14 +++++---------
 3 files changed, 27 insertions(+), 9 deletions(-)
 create mode 100644 examples/svelte/src/routes/examples/overview/InitTracker.svelte

diff --git a/examples/svelte/src/routes/examples/overview/+page.svelte b/examples/svelte/src/routes/examples/overview/+page.svelte
index 586af3b9..2f21107d 100644
--- a/examples/svelte/src/routes/examples/overview/+page.svelte
+++ b/examples/svelte/src/routes/examples/overview/+page.svelte
@@ -22,6 +22,7 @@
 	import CustomEdge from './CustomEdge.svelte';
 
 	import '@xyflow/svelte/dist/style.css';
+	import InitTracker from './InitTracker.svelte';
 
 	const nodeTypes: NodeTypes = {
 		custom: CustomNode,
@@ -148,6 +149,7 @@
 	selectionMode={SelectionMode.Full}
 	initialViewport={{ x: 100, y: 100, zoom: 2 }}
 	snapGrid={[25, 25]}
+	oninit={() => console.log('on init')}
 	on:nodeclick={(event) => console.log('on node click', event)}
 	on:nodemouseenter={(event) => console.log('on node enter', event)}
 	on:nodemouseleave={(event) => console.log('on node leave', event)}
@@ -207,6 +209,8 @@
 			}}>hide/unhide</button
 		>
 	</Panel>
+
+	<InitTracker />
 </SvelteFlow>
 
 <style>
diff --git a/examples/svelte/src/routes/examples/overview/InitTracker.svelte b/examples/svelte/src/routes/examples/overview/InitTracker.svelte
new file mode 100644
index 00000000..8b486f8c
--- /dev/null
+++ b/examples/svelte/src/routes/examples/overview/InitTracker.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { useNodesInitialized, useInitialized } from '@xyflow/svelte';
+
+	const nodesInitialized = useNodesInitialized();
+	const initialized = useInitialized();
+
+	$: {
+		if (nodesInitialized) {
+			console.log('nodes initialized');
+		}
+	}
+
+	$: {
+		if (initialized) {
+			console.log('initialized');
+		}
+	}
+</script>
diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts
index 52665614..6dbf84e2 100644
--- a/packages/svelte/src/lib/store/index.ts
+++ b/packages/svelte/src/lib/store/index.ts
@@ -359,28 +359,24 @@ export function createStore({
       ([edges, defaultColor, id]) => createMarkerIds(edges, { defaultColor, id })
     ),
     initialized: (() => {
-      console.log('This closure gets called');
       let initialized = false;
       const initialNodesLength = get(store.nodes).length;
       const initialEdgesLength = get(store.edges).length;
       return derived(
         [store.nodesInitialized, store.edgesInitialized, store.viewportInitialized],
         ([nodesInitialized, edgesInitialized, viewportInitialized]) => {
-          console.log('Get the derived store even called?');
-          // If it was already initialized once return true from then on
+          // If it was already initialized, return true from then on
           if (initialized) return initialized;
 
-          // if it hasn't been initialised check if is now
+          // if it hasn't been initialised check if it's now
           if (initialNodesLength === 0) {
             initialized = viewportInitialized;
-            return initialized;
-          }
-          if (initialEdgesLength === 0) {
+          } else if (initialEdgesLength === 0) {
             initialized = viewportInitialized && nodesInitialized;
-            return initialized;
+          } else {
+            initialized = viewportInitialized && nodesInitialized && edgesInitialized;
           }
 
-          initialized = viewportInitialized && nodesInitialized && edgesInitialized;
           return initialized;
         }
       );