From 6207c439b5f1c78dc04e8d5a49f8f570b5bdbf19 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 10 Apr 2023 17:12:14 +0200
Subject: [PATCH] fix(frontend): fix app init issue

---
 .../apps/components/display/AppIcon.svelte      |  3 +++
 .../apps/components/display/AppImage.svelte     |  3 +++
 .../apps/components/display/AppMap.svelte       |  3 +++
 .../apps/components/display/AppPdf.svelte       |  3 +++
 .../helpers/InitializeComponent.svelte          | 17 +++++++++++++++++
 .../helpers/NonRunnableComponent.svelte         |  3 +++
 .../components/helpers/RunnableComponent.svelte | 12 +++++++++++-
 .../components/helpers/RunnableWrapper.svelte   |  2 ++
 .../apps/components/inputs/AppCheckbox.svelte   |  3 +++
 .../apps/components/inputs/AppDateInput.svelte  |  3 +++
 .../apps/components/inputs/AppFileInput.svelte  |  3 +++
 .../components/inputs/AppMultiSelect.svelte     |  3 +++
 .../components/inputs/AppNumberInput.svelte     |  3 +++
 .../apps/components/inputs/AppRangeInput.svelte |  3 +++
 .../apps/components/inputs/AppSelect.svelte     |  3 +++
 .../components/inputs/AppSliderInputs.svelte    |  2 ++
 .../apps/components/inputs/AppTextInput.svelte  |  3 +++
 .../inputs/currency/AppCurrencyInput.svelte     |  3 +++
 .../apps/components/layout/AppContainer.svelte  |  3 +++
 .../apps/components/layout/AppDivider.svelte    |  3 +++
 .../apps/components/layout/AppDrawer.svelte     |  3 +++
 .../apps/components/layout/AppSplitpanes.svelte |  3 +++
 .../apps/components/layout/AppTabs.svelte       |  3 +++
 .../apps/editor/RecomputeAllComponents.svelte   |  3 ++-
 .../components/apps/editor/SettingsPanel.svelte |  2 +-
 .../src/lib/components/apps/editor/appUtils.ts  |  1 -
 .../settingsPanel/SelectedRunnable.svelte       |  7 +++++--
 .../BackgroundScriptTriggerList.svelte          |  6 ++++--
 frontend/src/lib/components/apps/rx.ts          |  4 ++--
 .../src/routes/(root)/(logged)/+page.svelte     |  2 +-
 30 files changed, 104 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/lib/components/apps/components/helpers/InitializeComponent.svelte

diff --git a/frontend/src/lib/components/apps/components/display/AppIcon.svelte b/frontend/src/lib/components/apps/components/display/AppIcon.svelte
index 42f9e21d5f..fca0b3ec54 100644
--- a/frontend/src/lib/components/apps/components/display/AppIcon.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppIcon.svelte
@@ -5,6 +5,7 @@
 	import { concatCustomCss } from '../../utils'
 	import { AlignWrapper, InputValue } from '../helpers'
 	import { loadIcon } from '../icon'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = 'left'
@@ -38,6 +39,8 @@
 <InputValue {id} input={configuration.color} bind:value={color} />
 <InputValue {id} input={configuration.strokeWidth} bind:value={strokeWidth} />
 
+<InitializeComponent {id} />
+
 <AlignWrapper
 	{render}
 	{horizontalAlignment}
diff --git a/frontend/src/lib/components/apps/components/display/AppImage.svelte b/frontend/src/lib/components/apps/components/display/AppImage.svelte
index 286076d6a8..3a82c94828 100644
--- a/frontend/src/lib/components/apps/components/display/AppImage.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppImage.svelte
@@ -7,6 +7,7 @@
 	import { concatCustomCss } from '../../utils'
 	import Loader from '../helpers/Loader.svelte'
 	import ResolveConfig from '../helpers/ResolveConfig.svelte'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -31,6 +32,8 @@
 	$: css = concatCustomCss($app.css?.imagecomponent, customCss)
 </script>
 
+<InitializeComponent {id} />
+
 {#each Object.keys(components['imagecomponent'].initialData.configuration) as key (key)}
 	<ResolveConfig
 		{id}
diff --git a/frontend/src/lib/components/apps/components/display/AppMap.svelte b/frontend/src/lib/components/apps/components/display/AppMap.svelte
index 2210351dfd..edad113fac 100644
--- a/frontend/src/lib/components/apps/components/display/AppMap.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppMap.svelte
@@ -11,6 +11,7 @@
 	import { Point } from 'ol/geom'
 	import { defaults as defaultControls } from 'ol/control'
 	import { findGridItem, initOutput } from '../../editor/appUtils'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	interface Marker {
 		lon: number
@@ -193,6 +194,8 @@
 <InputValue {id} input={configuration.zoom} bind:value={zoom} />
 <InputValue {id} input={configuration.markers} bind:value={markers} />
 
+<InitializeComponent {id} />
+
 {#if render}
 	<div class="relative h-full w-full">
 		<div
diff --git a/frontend/src/lib/components/apps/components/display/AppPdf.svelte b/frontend/src/lib/components/apps/components/display/AppPdf.svelte
index 638821306e..9ee690c752 100644
--- a/frontend/src/lib/components/apps/components/display/AppPdf.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppPdf.svelte
@@ -11,6 +11,7 @@
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -192,6 +193,8 @@
 <InputValue {id} input={configuration.source} bind:value={source} />
 <InputValue {id} input={configuration.zoom} bind:value={zoom} />
 
+<InitializeComponent {id} />
+
 {#if render}
 	<div class="relative flex flex-col w-full h-full bg-gray-100">
 		{#if source && zoom}
diff --git a/frontend/src/lib/components/apps/components/helpers/InitializeComponent.svelte b/frontend/src/lib/components/apps/components/helpers/InitializeComponent.svelte
new file mode 100644
index 0000000000..e9acd1e94b
--- /dev/null
+++ b/frontend/src/lib/components/apps/components/helpers/InitializeComponent.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { getContext, onDestroy, onMount } from 'svelte'
+	import type { AppViewerContext } from '../../types'
+
+	export let id: string
+	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
+
+	onMount(() => {
+		if (!$worldStore.initializedComponents.includes(id)) {
+			$worldStore.initializedComponents = [...$worldStore.initializedComponents, id]
+		}
+	})
+
+	onDestroy(() => {
+		$worldStore.initializedComponents = $worldStore.initializedComponents.filter((c) => c !== id)
+	})
+</script>
diff --git a/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
index f8eda426d3..0478910da0 100644
--- a/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
@@ -4,6 +4,7 @@
 	import type { Output } from '../../rx'
 	import type { AppViewerContext } from '../../types'
 	import InputValue from './InputValue.svelte'
+	import InitializeComponent from './InitializeComponent.svelte'
 
 	export let componentInput: AppInput
 	export let id: string
@@ -25,6 +26,8 @@
 	$: result && outputs && setOutput(result)
 </script>
 
+<InitializeComponent {id} />
+
 {#if componentInput.type !== 'runnable'}
 	<InputValue {id} input={componentInput} bind:value={result} />
 {/if}
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index 43382674c7..a2ad55a79e 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -8,7 +8,7 @@
 	import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '$lib/utils'
 	import { deepEqual } from 'fast-equals'
 	import { Bug } from 'lucide-svelte'
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { createEventDispatcher, getContext, onDestroy } from 'svelte'
 	import type { AppInputs, Runnable } from '../../inputType'
 	import type { Output } from '../../rx'
 	import type { AppViewerContext, InlineScript } from '../../types'
@@ -58,6 +58,16 @@
 			await executeComponent(true, inlineScript)
 		}
 	}
+
+	if (!$worldStore.initializedComponents.includes(id)) {
+		console.log('adding', id)
+		$worldStore.initializedComponents = [...$worldStore.initializedComponents, id]
+	}
+
+	onDestroy(() => {
+		$worldStore.initializedComponents = $worldStore.initializedComponents.filter((c) => c !== id)
+	})
+
 	$runnableComponents = $runnableComponents
 
 	let args: Record<string, any> | undefined = undefined
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
index 90de58cefb..c2392111e8 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
@@ -8,6 +8,7 @@
 	import RunnableComponent from './RunnableComponent.svelte'
 	import { goto } from '$app/navigation'
 	import { sendUserToast } from '$lib/utils'
+	import InitializeComponent from './InitializeComponent.svelte'
 
 	export let componentInput: AppInput | undefined
 	export let id: string
@@ -96,6 +97,7 @@
 </script>
 
 {#if componentInput === undefined}
+	<InitializeComponent {id} />
 	<slot />
 {:else if componentInput.type === 'runnable' && isRunnableDefined(componentInput)}
 	<RunnableComponent
diff --git a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
index 1af56794f7..b58a458a1b 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
@@ -6,6 +6,7 @@
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -34,6 +35,8 @@
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
 
+<InitializeComponent {id} />
+
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	<Toggle
 		checked={defaultValue}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
index 5530912a6b..ae93a287f6 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
@@ -6,6 +6,7 @@
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -41,6 +42,8 @@
 <InputValue {id} input={configuration.maxDate} bind:value={maxValue} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
 
+<InitializeComponent {id} />
+
 <AlignWrapper {render} {verticalAlignment}>
 	{#if inputType === 'date'}
 		<input
diff --git a/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
index 025887b009..1c7ada13ad 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
@@ -6,6 +6,7 @@
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -34,6 +35,8 @@
 <InputValue {id} input={configuration.allowMultiple} bind:value={allowMultiple} />
 <InputValue {id} input={configuration.text} bind:value={text} />
 
+<InitializeComponent {id} />
+
 {#if render}
 	<div class="w-full h-full p-1">
 		<FileInput
diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
index eb37441379..a993266849 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
@@ -7,6 +7,7 @@
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -55,6 +56,8 @@
 <InputValue {id} input={configuration.items} bind:value={labels} />
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 
+<InitializeComponent {id} />
+
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	<div
 		class="app-select w-full"
diff --git a/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
index d9363ef246..103d7c1ee5 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
@@ -6,6 +6,7 @@
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -44,6 +45,8 @@
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
 
+<InitializeComponent {id} />
+
 <AlignWrapper {render} {verticalAlignment}>
 	<input
 		on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
index a95d95e959..e283e6ab00 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
@@ -7,6 +7,7 @@
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -54,6 +55,8 @@
 	bind:value={values[1]}
 />
 
+<InitializeComponent {id} />
+
 <AlignWrapper {render} {verticalAlignment}>
 	<div class="flex flex-col w-full">
 		<div class="flex items-center w-full gap-1 px-1">
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
index 51f7d4289a..607d45798b 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
@@ -8,6 +8,7 @@
 	import InputValue from '../helpers/InputValue.svelte'
 	import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults'
 	import { initOutput } from '../../editor/appUtils'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -103,6 +104,8 @@
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
 <InputValue {id} input={configuration.create} bind:value={create} />
 
+<InitializeComponent {id} />
+
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	<div
 		class="app-select w-full"
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte b/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
index 204367b060..04aa6e0383 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
@@ -7,6 +7,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import { concatCustomCss } from '../../utils'
 	import { initOutput } from '../../editor/appUtils'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -59,6 +60,7 @@
 	input={configuration.defaultValue}
 	bind:value={values[0]}
 />
+<InitializeComponent {id} />
 
 <AlignWrapper {render} {verticalAlignment}>
 	<div class="flex items-center w-full gap-1 px-1">
diff --git a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
index c8708598ec..0d124620a1 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
@@ -6,6 +6,7 @@
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -44,6 +45,8 @@
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
 
+<InitializeComponent {id} />
+
 {#if inputType === 'textarea'}
 	<textarea
 		class={twMerge(
diff --git a/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte b/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte
index a5f7b0157c..d24c6fd586 100644
--- a/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte
@@ -7,6 +7,7 @@
 	import AlignWrapper from '../../helpers/AlignWrapper.svelte'
 	import InputValue from '../../helpers/InputValue.svelte'
 	import CurrencyInput from './CurrencyInput.svelte'
+	import InitializeComponent from '../../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -48,6 +49,8 @@
 <InputValue {id} input={configuration.currency} bind:value={currency} />
 <InputValue {id} input={configuration.locale} bind:value={locale} />
 
+<InitializeComponent {id} />
+
 <AlignWrapper {render} {verticalAlignment}>
 	{#key isNegativeAllowed}
 		{#key locale}
diff --git a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
index fa37caa63d..7de891fc79 100644
--- a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
@@ -4,6 +4,7 @@
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let componentContainerHeight: number
@@ -26,6 +27,8 @@
 	$: css = concatCustomCss($app.css?.containercomponent, customCss)
 </script>
 
+<InitializeComponent {id} />
+
 <div class="w-full h-full">
 	{#if $app.subgrids?.[`${id}-0`]}
 		<SubGridEditor
diff --git a/frontend/src/lib/components/apps/components/layout/AppDivider.svelte b/frontend/src/lib/components/apps/components/layout/AppDivider.svelte
index a859dc7881..0c11b92e6f 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDivider.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDivider.svelte
@@ -12,6 +12,7 @@
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -36,6 +37,8 @@
 <InputValue {id} input={configuration.size} bind:value={size} />
 <InputValue {id} input={configuration.color} bind:value={color} />
 
+<InitializeComponent {id} />
+
 <AlignWrapper
 	{horizontalAlignment}
 	{verticalAlignment}
diff --git a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
index 436e51ef0e..5229e547a5 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
@@ -9,6 +9,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import { AlignWrapper } from '../helpers'
 	import { initOutput } from '../../editor/appUtils'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let customCss: ComponentCustomCSS<'drawercomponent'> | undefined = undefined
 	export let id: string
@@ -70,6 +71,8 @@
 <InputValue {id} input={configuration.size} bind:value={size} />
 <InputValue {id} input={configuration.fillContainer} bind:value={fillContainer} />
 
+<InitializeComponent {id} />
+
 <Portal target="#app-editor-top-level-drawer">
 	<Drawer let:open bind:this={appDrawer} size="800px" alwaysOpen positionClass="!absolute">
 		<DrawerContent
diff --git a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
index be6e75027c..c2c9e525c6 100644
--- a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
@@ -6,6 +6,7 @@
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import { deepEqual } from 'fast-equals'
 	import { initOutput } from '../../editor/appUtils'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let componentContainerHeight: number
@@ -65,6 +66,8 @@
 	}
 </script>
 
+<InitializeComponent {id} />
+
 <div class="h-full w-full border" on:pointerdown={onFocus}>
 	<Splitpanes {horizontal}>
 		{#each sumedup as paneSize, index (index)}
diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index 553bc4df82..8994e4fb92 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -7,6 +7,7 @@
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -78,6 +79,8 @@
 
 <InputValue {id} input={configuration.tabsKind} bind:value={resolvedConfig.tabsKind} />
 
+<InitializeComponent {id} />
+
 <div class={resolvedConfig.tabsKind == 'sidebar' ? 'flex gap-4 w-full' : 'w-full'}>
 	{#if !resolvedConfig.tabsKind || resolvedConfig.tabsKind == 'tabs' || (resolvedConfig.tabsKind == 'invisibleOnView' && $mode == 'dnd')}
 		<div bind:clientHeight={tabHeight}>
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
index 1b50c3ab25..70a179c556 100644
--- a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
+++ b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
@@ -14,7 +14,7 @@
 	let firstLoad = false
 
 	$: !firstLoad &&
-		$worldStore.initializedOutputs ==
+		$worldStore.initializedComponents?.length ==
 			allItems($app.grid, $app.subgrids).length + $app.hiddenInlineScripts.length &&
 		refresh()
 	$: componentNumber = Object.values($runnableComponents).filter((x) => x.autoRefresh).length
@@ -39,6 +39,7 @@
 	}
 
 	function refresh() {
+		console.log('refresh')
 		if (!firstLoad) {
 			$worldStore.initialized = true
 			firstLoad = true
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
index fc85bdd434..af2ada07f7 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
@@ -103,7 +103,7 @@
 					autoRefresh={hiddenInlineScript.script.autoRefresh}
 					id={`bg_${hiddenInlineScript.index}`}
 					bind:recomputeOnInputChanged={hiddenInlineScript.script.recomputeOnInputChanged}
-					doNotRecomputeOnInputChanged={hiddenInlineScript.script.doNotRecomputeOnInputChanged}
+					bind:doNotRecomputeOnInputChanged={hiddenInlineScript.script.doNotRecomputeOnInputChanged}
 					bind:inlineScript={hiddenInlineScript.script.inlineScript}
 				/>
 			{:else}
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 2225ff2281..92ebaed6f0 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -453,7 +453,6 @@ export function initOutput<I extends Record<string, any>>(
 	id: string,
 	init: I
 ): Outputtable<I> {
-	world.initializedOutputs += 1
 	if (!world) {
 		return {} as any
 	}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte
index c03bf4f7cd..2484811143 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte
@@ -33,8 +33,11 @@
 
 	if (appInput.recomputeOnInputChanged === undefined) {
 		appInput.recomputeOnInputChanged = true
-	} else if (appInput.doNotRecomputeOnInputChanged == true) {
-		appInput.recomputeOnInputChanged = false
+	}
+	//TODO: remove after migration is done
+	if (appInput.doNotRecomputeOnInputChanged != undefined) {
+		appInput.recomputeOnInputChanged = !appInput.doNotRecomputeOnInputChanged
+		appInput.doNotRecomputeOnInputChanged = undefined
 	}
 </script>
 
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte
index 9366963bad..ea86ebbe92 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte
@@ -18,8 +18,10 @@
 	export let recomputeOnInputChanged: boolean | undefined = true
 	export let doNotRecomputeOnInputChanged: undefined | boolean = undefined
 
-	if (doNotRecomputeOnInputChanged == true) {
-		recomputeOnInputChanged = false
+	//TODO: remove after migration is done
+	if (doNotRecomputeOnInputChanged != undefined) {
+		recomputeOnInputChanged = !doNotRecomputeOnInputChanged
+		doNotRecomputeOnInputChanged = undefined
 	}
 
 	if (recomputeOnInputChanged == undefined) {
diff --git a/frontend/src/lib/components/apps/rx.ts b/frontend/src/lib/components/apps/rx.ts
index 38256fff6a..d4742f8077 100644
--- a/frontend/src/lib/components/apps/rx.ts
+++ b/frontend/src/lib/components/apps/rx.ts
@@ -24,7 +24,7 @@ export type World = {
 	connect: <T>(inputSpec: AppInput, next: (x: T) => void, id?: string) => Input<T>
 	stateId: Writable<number>
 	newOutput: <T>(id: string, name: string, previousValue: T) => Output<T>
-	initializedOutputs: number
+	initializedComponents: string[]
 	initialized: boolean
 }
 
@@ -60,7 +60,7 @@ export function buildWorld(context: Record<string, any>): Writable<World> {
 		connect: newWorld.connect,
 		stateId,
 		newOutput,
-		initializedOutputs: 0,
+		initializedComponents: [],
 		initialized: false
 	})
 	return writableWorld
diff --git a/frontend/src/routes/(root)/(logged)/+page.svelte b/frontend/src/routes/(root)/(logged)/+page.svelte
index 1e30ab8a07..7eafd4536b 100644
--- a/frontend/src/routes/(root)/(logged)/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/+page.svelte
@@ -23,7 +23,7 @@
 
 	type Tab = 'hubscripts' | 'hubflows' | 'hubapps' | 'workspace'
 
-	let tab: Tab = 'workspace'
+	let tab: Tab = (window.location.hash?.replace('#', '') as Tab | undefined) ?? 'workspace'
 	let filter: string = ''
 
 	let flowViewer: Drawer