fix(frontend): fix app init issue

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}

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}

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

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}

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>

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}

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

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

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}

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

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

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"

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])}

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">

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"

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">

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(

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}

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

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}

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

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)}

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}>

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

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}

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
 	}

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>
 

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) {

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

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