From 0f2d207e29da6ffa88dcaab11bb3cbdf1eb9f566 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 3 May 2023 14:13:36 +0200
Subject: [PATCH] fix reactivity issue wrt to updating worldStore on state
 output already existing

---
 .../lib/components/apps/components/helpers/InputValue.svelte | 2 ++
 .../apps/components/helpers/NonRunnableComponent.svelte      | 1 +
 .../apps/components/helpers/RunnableComponent.svelte         | 5 +++++
 .../apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte  | 4 ++++
 frontend/src/lib/components/apps/rx.ts                       | 1 -
 frontend/src/lib/components/sidebar/WorkspaceMenu.svelte     | 2 +-
 6 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
index 9828776707..0dfa2aaca2 100644
--- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
@@ -70,6 +70,8 @@
 
 	$: lastInput && $worldStore && debounce(handleConnection)
 
+	$: console.log('worldStore', $worldStore, id)
+
 	$: lastInput &&
 		lastInput.type == 'template' &&
 		$stateId &&
diff --git a/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
index 1615a7a3c3..17cd9c51ce 100644
--- a/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
@@ -19,6 +19,7 @@
 	}
 
 	function setOutput(v: any) {
+		// console.log('setnr', id)
 		outputs?.result?.set(v, true)
 	}
 
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index a916b1524b..c36ead9de8 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -101,9 +101,11 @@
 		runnable && runnable.type === 'runnableByName' ? runnable.inlineScript?.refreshOn ?? [] : []
 
 	function refreshIfAutoRefresh(_src: string) {
+		// console.debug(`Triggering refreshing ${id} because ${_src}`)
 		const refreshEnabled =
 			autoRefresh && ((recomputeOnInputChanged ?? true) || refreshOn?.length > 0)
 		if (refreshEnabled && $initialized.initialized) {
+			// console.debug(`Refreshing ${id} because ${_src} (enabled)`)
 			setDebouncedExecute()
 		}
 	}
@@ -153,6 +155,7 @@
 	}
 
 	async function executeComponent(noToast = false, inlineScriptOverride?: InlineScript) {
+		console.debug(`Executing ${id}`)
 		if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
 			loading = true
 			try {
@@ -301,6 +304,8 @@
 			}
 		}
 
+		// console.log('setr', id)
+
 		outputs.result?.set(res)
 
 		result = res
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
index a33fe2e484..e286584589 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
@@ -230,6 +230,10 @@ console.log(ctx.email)
 if (!state.foo) { state.foo = 0 }
 state.foo += 1
 
+// for reactivity to work, you need to assign a value and not modify it in place
+// e.g: state.foo.push(1) will not work but 'state.foo = [...state.foo, 1]' will.
+// you may also just reassign as next statement 'state.foo = state.foo'
+
 // you can also navigate (goto), recompute a script (recompute), or set a tab (setTab)
 
 return state.foo`,
diff --git a/frontend/src/lib/components/apps/rx.ts b/frontend/src/lib/components/apps/rx.ts
index 0d2eb430c3..0f852aeac2 100644
--- a/frontend/src/lib/components/apps/rx.ts
+++ b/frontend/src/lib/components/apps/rx.ts
@@ -41,7 +41,6 @@ export function buildWorld(context: Record<string, any>): Writable<World> {
 
 	function newOutput<T>(id: string, name: string, previousValue: T) {
 		if (outputsById[id]?.[name]) {
-			writableWorld?.update((x) => x)
 			return outputsById[id][name]
 		}
 		let o = newWorld.newOutput(id, name, stateId, previousValue)
diff --git a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
index 2513b62cb6..4dee68cdcb 100644
--- a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
+++ b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { switchWorkspace, userWorkspaces, workspaceStore } from '$lib/stores'
 	import { classNames } from '$lib/utils'
-	import { Building, Cog } from 'lucide-svelte'
+	import { Building } from 'lucide-svelte'
 
 	import Menu from '../common/menu/Menu.svelte'
 	import { faCog, faPlus } from '@fortawesome/free-solid-svg-icons'