windmill-components 1.493.10 → 1.501.4

package/package/components/apps/components/helpers/ResolveConfig.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">import InputValue from './InputValue.svelte';
-export let id;
-export let extraKey = '';
-export let key;
-export let resolvedConfig;
-export let configuration;
-export let initialConfig = undefined;
-$: configuration?.type == 'oneOf' && handleSelected(configuration.selected);
+import { untrack } from 'svelte';
+let { id, extraKey = '', key, resolvedConfig = $bindable(), configuration, initialConfig = undefined, debug = false } = $props();
 function handleSelected(selected) {
     if (resolvedConfig?.selected != undefined && resolvedConfig?.selected != selected) {
         resolvedConfig.selected = selected;
     }
+    // console.log('handleSelected', JSON.stringify({ resolvedConfig, configuration }))
 }
+$effect.pre(() => {
+    configuration?.type == 'oneOf' &&
+        configuration.selected &&
+        untrack(() => handleSelected(configuration.selected));
+});
 </script>
 
 {#if configuration?.type == 'oneOf' && resolvedConfig?.type == 'oneOf'}
@@ -30,6 +31,13 @@ function handleSelected(selected) {
 		{/if}
 	{/each}
 {:else}
+	{#if debug}
+		<pre class="text-2xs">
+			key: {key} 
+			{JSON.stringify({ r: resolvedConfig })}
+			{JSON.stringify(configuration)}</pre
+		>
+	{/if}
 	<InputValue
 		field={key}
 		key={key + extraKey}

package/package/components/apps/components/helpers/ResolveConfig.svelte.d.ts

@@ -1,30 +1,17 @@
 import type { RichConfiguration } from '../../types';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ResolveConfig: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     extraKey?: string;
     key: string;
     resolvedConfig: any | {
-        type: "oneOf";
+        type: 'oneOf';
         configuration: any;
         selected: string;
     };
     configuration: RichConfiguration;
     initialConfig?: RichConfiguration | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ResolveConfig = InstanceType<typeof ResolveConfig>;
+    debug?: boolean;
+}
+declare const ResolveConfig: import("svelte").Component<Props, {}, "resolvedConfig">;
+type ResolveConfig = ReturnType<typeof ResolveConfig>;
 export default ResolveConfig;

package/package/components/apps/components/helpers/ResolveStyle.svelte

@@ -1,13 +1,9 @@
 <script lang="ts">import { deepEqual } from 'fast-equals';
 import InputValue from './InputValue.svelte';
-export let css;
-export let id;
-export let key;
-export let extraKey = '';
-export let customCss = undefined;
-export let componentStyle = undefined;
-let evalClassValue = undefined;
-let evalClassValueGlobal = undefined;
+import { untrack } from 'svelte';
+let { css = $bindable(), id, key, extraKey = '', customCss = undefined, componentStyle = undefined } = $props();
+let evalClassValue = $state(undefined);
+let evalClassValueGlobal = $state(undefined);
 function updateCss(componentStyle, customCss, evalClassValue, evalClassValueGlobal) {
     const { class: componentClass, style: componentStyleValue } = componentStyle?.[key] ?? {};
     const { class: customClass, style: customStyleValue } = customCss?.[key] ?? {};
@@ -22,15 +18,23 @@ function updateCss(componentStyle, customCss, evalClassValue, evalClassValueGlob
     }
 }
 // When any of the values change, update the css
-$: updateCss(componentStyle, customCss, evalClassValue, evalClassValueGlobal);
+$effect(() => {
+    ;
+    [componentStyle, customCss, evalClassValue, evalClassValueGlobal];
+    untrack(() => updateCss(componentStyle, customCss, evalClassValue, evalClassValueGlobal));
+});
 // We need to clear the evalClassValue if the user has disabled the evalClass
-$: if (customCss?.[key]?.evalClass === undefined && evalClassValue !== undefined) {
-    evalClassValue = undefined;
-}
+$effect(() => {
+    if (customCss?.[key]?.evalClass === undefined && evalClassValue !== undefined) {
+        evalClassValue = undefined;
+    }
+});
 // We need to clear the evalClassValue if the user has disabled the evalClass
-$: if (componentStyle?.[key]?.evalClass === undefined && evalClassValueGlobal !== undefined) {
-    evalClassValueGlobal = undefined;
-}
+$effect(() => {
+    if (componentStyle?.[key]?.evalClass === undefined && evalClassValueGlobal !== undefined) {
+        evalClassValueGlobal = undefined;
+    }
+});
 </script>
 
 {#if customCss}

package/package/components/apps/components/helpers/ResolveStyle.svelte.d.ts

@@ -1,26 +1,12 @@
 import type { ComponentCssProperty } from '../../types';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ResolveStyle: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     css: ComponentCssProperty;
     id: string;
     key: string;
     extraKey?: string;
     customCss?: Record<string, ComponentCssProperty> | undefined;
     componentStyle?: Record<string, ComponentCssProperty> | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ResolveStyle = InstanceType<typeof ResolveStyle>;
+}
+declare const ResolveStyle: import("svelte").Component<Props, {}, "css">;
+type ResolveStyle = ReturnType<typeof ResolveStyle>;
 export default ResolveStyle;

package/package/components/apps/components/helpers/RunnableComponent.svelte

@@ -4,7 +4,7 @@ import {} from '../../../../gen';
 import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '../../../../utils';
 import { deepEqual } from 'fast-equals';
 import { Bug } from 'lucide-svelte';
-import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte';
+import { createEventDispatcher, getContext, onDestroy, onMount, untrack } from 'svelte';
 import { computeGlobalContext, eval_like } from './eval';
 import InputValue from './InputValue.svelte';
 import { collectOneOfFields, selectId } from '../../editor/appUtils';
@@ -16,49 +16,20 @@ import { ctxRegex } from '../../utils';
 import { computeWorkspaceS3FileInputPolicy } from '../../editor/appUtilsS3';
 import { executeRunnable } from './executeRunnable';
 import SchemaForm from '../../../SchemaForm.svelte';
-import { createDispatcherIfMounted } from '../../../../createDispatcherIfMounted';
-// Component props
-export let id;
-export let fields;
-export let runnable;
-export let transformer;
-export let extraQueryParams = {};
-export let autoRefresh = true;
-export let result = undefined;
-export let forceSchemaDisplay = false;
-export let wrapperClass = '';
-export let wrapperStyle = '';
-export let render;
-export let outputs;
-export let extraKey = '';
-export let initializing = false;
-export let recomputeOnInputChanged = true;
-export let loading = false;
-export let refreshOnStart = false;
-export let recomputableByRefreshButton;
-export let errorHandledByComponent = false;
-export let hideRefreshButton = false;
-export let hasChildrens;
-export let allowConcurentRequests = false;
-export let noInitialize = false;
-export let overrideCallback = undefined;
-export let overrideAutoRefresh = false;
-export let replaceCallback = false;
+let { id, fields, runnable, transformer, extraQueryParams = {}, autoRefresh = true, result = $bindable(undefined), forceSchemaDisplay = false, wrapperClass = '', wrapperStyle = '', render, outputs, extraKey = '', initializing = false, recomputeOnInputChanged = true, loading = $bindable(false), refreshOnStart = false, recomputableByRefreshButton, errorHandledByComponent = false, hideRefreshButton = false, hasChildrens, allowConcurentRequests = false, noInitialize = false, overrideCallback = undefined, overrideAutoRefresh = false, replaceCallback = false, children } = $props();
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, jobsById, noBackend, errorByComponent, mode, stateId, state: stateStore, componentControl, initialized, selectedComponent, app, connectingInput, bgRuns, recomputeAllContext } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 const iterContext = getContext('ListWrapperContext');
 const rowContext = getContext('RowWrapperContext');
 const groupContext = getContext('GroupContext');
 const dispatch = createEventDispatcher();
-const dispatchIfMounted = createDispatcherIfMounted(dispatch);
 $runnableComponents = $runnableComponents;
 export function setArgs(value) {
     args = value;
 }
-let args = undefined;
-let runnableInputValues = {};
+let args = $state(undefined);
+let runnableInputValues = $state({});
 let executeTimeout = undefined;
-$: outputs.loading?.set(loading);
 function setDebouncedExecute() {
     executeTimeout && clearTimeout(executeTimeout);
     executeTimeout = setTimeout(() => {
@@ -74,11 +45,8 @@ function computeStaticValues() {
     });
 }
 let lazyStaticValues = computeStaticValues();
-let currentStaticValues = lazyStaticValues;
+let currentStaticValues = $state(lazyStaticValues);
 let isBg = id.startsWith('bg_');
-$: isBg && updateBgRuns(loading);
-$: fields && (currentStaticValues = computeStaticValues());
-$: currentStaticValues && refreshOnStaticChange();
 function refreshOnStaticChange() {
     if (!deepEqual(currentStaticValues, lazyStaticValues)) {
         lazyStaticValues = currentStaticValues;
@@ -88,12 +56,6 @@ function refreshOnStaticChange() {
 // $: sendUserToast('args' + JSON.stringify(runnableInputValues) + Boolean(extraQueryParams) || args)
 // $: console.log(runnableInputValues)
 let firstRefresh = true;
-$: (runnableInputValues || extraQueryParams || args) &&
-    resultJobLoader &&
-    refreshIfAutoRefresh('arg changed');
-$: runnableInputValues && dispatchIfMounted('argsChanged');
-$: refreshOn =
-    runnable && runnable.type === 'runnableByName' ? (runnable.inlineScript?.refreshOn ?? []) : [];
 function refreshIfAutoRefresh(src) {
     // console.log(
     // 	'refreshIfAutoRefresh',
@@ -121,7 +83,7 @@ function refreshIfAutoRefresh(src) {
         setDebouncedExecute();
     }
 }
-let schemaForm;
+let schemaForm = $state();
 export function invalidate(key, error) {
     schemaForm?.invalidate(key, error);
 }
@@ -132,11 +94,8 @@ export function validateAll() {
     schemaForm?.validateAll();
 }
 // Test job internal state
-let resultJobLoader = undefined;
-let schemaStripped = autoRefresh || forceSchemaDisplay ? emptySchema() : undefined;
-$: (autoRefresh || forceSchemaDisplay) &&
-    Object.keys(fields ?? {}).length > 0 &&
-    (schemaStripped = stripSchema(fields, $stateId));
+let resultJobLoader = $state(undefined);
+let schemaStripped = $state(autoRefresh || forceSchemaDisplay ? emptySchema() : undefined);
 function stripSchema(inputs, s) {
     if (inputs === undefined) {
         return emptySchema();
@@ -298,7 +257,7 @@ export async function buildRequestBody(dynamicArgsOverride) {
             }
         }
         else if (field?.type == 'eval' || (field?.type == 'evalv2' && inputValues[k])) {
-            const ctxMatch = field.expr.match(ctxRegex);
+            const ctxMatch = field?.expr?.match(ctxRegex);
             if (ctxMatch) {
                 nonStaticRunnableInputs[k] = '$ctx:' + ctxMatch[1];
             }
@@ -402,7 +361,7 @@ async function runTransformer(res) {
     }
 }
 function updateResult(res) {
-    outputs.result?.set(res);
+    outputs.result?.set($state.snapshot(res));
     result = res;
 }
 async function setResult(res, jobId) {
@@ -510,8 +469,8 @@ onDestroy(() => {
         $runnableComponents = $runnableComponents;
     }
 });
-let lastJobId = undefined;
-let inputValues = {};
+let lastJobId = $state(undefined);
+let inputValues = $state({});
 function updateBgRuns(loading) {
     if (loading) {
         bgRuns.update((runs) => [...runs, id]);
@@ -539,6 +498,51 @@ function computeS3ForceViewerPolicies() {
     const policy = computeWorkspaceS3FileInputPolicy();
     return policy;
 }
+$effect(() => {
+    outputs.loading?.set(loading);
+});
+$effect(() => {
+    isBg && untrack(() => updateBgRuns(loading));
+});
+$effect(() => {
+    fields && untrack(() => (currentStaticValues = computeStaticValues()));
+});
+$effect(() => {
+    currentStaticValues && untrack(() => refreshOnStaticChange());
+});
+$effect(() => {
+    if (runnableInputValues && typeof runnableInputValues === 'object') {
+        for (const key in runnableInputValues) {
+            runnableInputValues[key];
+        }
+    }
+    if (extraQueryParams && typeof extraQueryParams === 'object') {
+        for (const key in extraQueryParams) {
+            extraQueryParams[key];
+        }
+    }
+    if (args && typeof args === 'object') {
+        for (const key in args) {
+            args[key];
+        }
+    }
+    ;
+    (runnableInputValues || extraQueryParams || args) &&
+        resultJobLoader &&
+        untrack(() => refreshIfAutoRefresh('arg changed'));
+});
+let ignoreFirst = true;
+$effect(() => {
+    runnableInputValues && !ignoreFirst && dispatch('argsChanged');
+    ignoreFirst = false;
+});
+let refreshOn = $derived(runnable && runnable.type === 'runnableByName' ? (runnable.inlineScript?.refreshOn ?? []) : []);
+$effect(() => {
+    ;
+    (autoRefresh || forceSchemaDisplay) &&
+        Object.keys(fields ?? {}).length > 0 &&
+        untrack(() => (schemaStripped = stripSchema(fields, $stateId)));
+});
 </script>
 
 {#each Object.entries(fields ?? {}) as [key, v] (key)}
@@ -580,7 +584,7 @@ function computeS3ForceViewerPolicies() {
 		lastJobId = e.detail.id
 		setResult(e.detail.result, e.detail.id)
 		loading = false
-		dispatch('done', { id: e.detail.id, result: e.detail.result })
+		dispatch('done', { id: e.detail?.id, result: e.detail?.result })
 	}}
 	on:cancel={(e) => {
 		let jobId = e.detail
@@ -647,36 +651,38 @@ function computeS3ForceViewerPolicies() {
 			>
 				<Popover notClickable placement="bottom" popupClass="!bg-surface border w-96">
 					<Bug size={14} />
-					<span slot="text">
-						<div class="bg-surface">
-							<Alert type="error" title="Error during execution">
-								<div class="flex flex-col gap-2 overflow-auto">
-									An error occured, please contact the app author.
+					{#snippet text()}
+						<span>
+							<div class="bg-surface">
+								<Alert type="error" title="Error during execution">
+									<div class="flex flex-col gap-2 overflow-auto">
+										An error occured, please contact the app author.
 
-									{#if $errorByComponent?.[id]?.error}
-										<div class="font-bold">{$errorByComponent[id].error}</div>
-									{/if}
-									{#if lastJobId}
-										<a
-											href={`/run/${lastJobId}?workspace=${workspace}`}
-											class="font-semibold text-red-800 underline"
-											target="_blank"
-										>
-											Job id: {lastJobId}
-										</a>
-									{/if}
-								</div>
-							</Alert>
-						</div>
-					</span>
+										{#if $errorByComponent?.[id]?.error}
+											<div class="font-bold">{$errorByComponent[id].error}</div>
+										{/if}
+										{#if lastJobId}
+											<a
+												href={`/run/${lastJobId}?workspace=${workspace}`}
+												class="font-semibold text-red-800 underline"
+												target="_blank"
+											>
+												Job id: {lastJobId}
+											</a>
+										{/if}
+									</div>
+								</Alert>
+							</div>
+						</span>
+					{/snippet}
 				</Popover>
 			</div>
 			<div class="block grow w-full max-h-full border border-red-30 relative">
-				<slot />
+				{@render children?.()}
 			</div>
 		{:else}
 			<div class="block grow w-full max-h-full">
-				<slot />
+				{@render children?.()}
 			</div>
 		{/if}
 

package/package/components/apps/components/helpers/RunnableComponent.svelte.d.ts

@@ -1,30 +1,12 @@
 import type { AppInputs, Runnable } from '../../inputType';
 import type { Output } from '../../rx';
 import type { CancelablePromise, InlineScript } from '../../types';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const RunnableComponent: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     id: string;
     fields: AppInputs;
     runnable: Runnable;
     transformer: (InlineScript & {
-        language: "frontend";
+        language: 'frontend';
     }) | undefined;
     extraQueryParams?: Record<string, any>;
     autoRefresh?: boolean;
@@ -52,39 +34,27 @@ declare const RunnableComponent: $$__sveltets_2_IsomorphicComponent<$$__sveltets
     overrideCallback?: (() => CancelablePromise<void>) | undefined;
     overrideAutoRefresh?: boolean;
     replaceCallback?: boolean;
-    setArgs?: (value: any) => void;
-    invalidate?: (key: string, error: string) => void;
-    validate?: (key: string) => void;
-    validateAll?: () => void;
-    buildRequestBody?: (dynamicArgsOverride: Record<string, any> | undefined) => Promise<{
-        component: string;
-        path?: string;
-        version?: number;
-        args: unknown;
-        raw_code?: {
-            content: string;
-            language: string;
-            path?: string;
-            lock?: string;
-            cache_ttl?: number;
-        };
-        id?: number;
-        force_viewer_static_fields?: {
-            [key: string]: unknown;
-        };
-        force_viewer_one_of_fields?: {
-            [key: string]: unknown;
-        };
-        force_viewer_allow_user_resources?: Array<(string)>;
-    }>;
-    runComponent?: (noToast?: boolean, inlineScriptOverride?: InlineScript, setRunnableJobEditorPanel?: boolean, dynamicArgsOverride?: Record<string, any>, callbacks?: {
-        done: (x: any) => void;
-        cancel: () => void;
-        error: (e: any) => void;
-    }) => Promise<string | undefined>;
-}, {
-    default: {};
-}>, {
+    children?: import('svelte').Snippet;
+}
+type Callbacks = {
+    done: (x: any) => void;
+    cancel: () => void;
+    error: (e: any) => void;
+};
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RunnableComponent: $$__sveltets_2_IsomorphicComponent<Props, {
     started: CustomEvent<any>;
     done: CustomEvent<any>;
     cancel: CustomEvent<any>;
@@ -93,11 +63,10 @@ declare const RunnableComponent: $$__sveltets_2_IsomorphicComponent<$$__sveltets
     handleError: CustomEvent<any>;
     success: CustomEvent<any>;
     recompute: CustomEvent<any>;
+    argsChanged: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
+}, {}, {
     setArgs: (value: any) => void;
     invalidate: (key: string, error: string) => void;
     validate: (key: string) => void;
@@ -123,11 +92,7 @@ declare const RunnableComponent: $$__sveltets_2_IsomorphicComponent<$$__sveltets
         };
         force_viewer_allow_user_resources?: Array<(string)>;
     }>;
-    runComponent: (noToast?: boolean, inlineScriptOverride?: InlineScript, setRunnableJobEditorPanel?: boolean, dynamicArgsOverride?: Record<string, any>, callbacks?: {
-        done: (x: any) => void;
-        cancel: () => void;
-        error: (e: any) => void;
-    }) => Promise<string | undefined>;
-}, string>;
+    runComponent: (noToast?: boolean, inlineScriptOverride?: InlineScript, setRunnableJobEditorPanel?: boolean, dynamicArgsOverride?: Record<string, any>, callbacks?: Callbacks) => Promise<string | undefined>;
+}, "result" | "loading">;
 type RunnableComponent = InstanceType<typeof RunnableComponent>;
 export default RunnableComponent;

package/package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -4,33 +4,12 @@ import NonRunnableComponent from './NonRunnableComponent.svelte';
 import RunnableComponent from './RunnableComponent.svelte';
 import { sendUserToast } from '../../../../toast';
 import InitializeComponent from './InitializeComponent.svelte';
-export let componentInput;
-export let noInitialize = false;
-export let hideRefreshButton = undefined;
-export let overrideCallback = undefined;
-export let overrideAutoRefresh = false;
-export let replaceCallback = false;
-export let id;
-export let result = undefined;
-export let initializing = true;
-export let loading = false;
-export let extraQueryParams = {};
-export let autoRefresh = true;
-export let runnableComponent = undefined;
-export let forceSchemaDisplay = false;
-export let runnableClass = '';
-export let runnableStyle = '';
-export let doOnSuccess = undefined;
-export let doOnError = undefined;
-export let render;
-export let recomputeIds = [];
-export let outputs;
-export let extraKey = undefined;
-export let refreshOnStart = false;
-export let errorHandledByComponent = false;
-export let hasChildrens = false;
-export let allowConcurentRequests = false;
-export let onSuccess = () => { };
+let { componentInput = $bindable(), noInitialize = false, hideRefreshButton = undefined, overrideCallback = undefined, overrideAutoRefresh = false, replaceCallback = false, id, result = $bindable(undefined), initializing = $bindable(undefined), loading = $bindable(false), extraQueryParams = {}, autoRefresh = true, runnableComponent = $bindable(undefined), forceSchemaDisplay = false, runnableClass = '', runnableStyle = '', doOnSuccess = undefined, doOnError = undefined, render, recomputeIds = [], outputs, extraKey = undefined, refreshOnStart = false, errorHandledByComponent = false, hasChildrens = false, allowConcurentRequests = false, onSuccess = () => { }, children } = $props();
+$effect.pre(() => {
+    if (initializing == undefined) {
+        initializing = true;
+    }
+});
 export function setArgs(value) {
     runnableComponent?.setArgs(value);
 }
@@ -65,10 +44,12 @@ else {
     }
 }
 // We need to make sure that old apps have correct values. Triggerable (button, form, etc) have both autoRefresh and recomputeOnInputChanged set to false
-$: if (!autoRefresh && componentInput?.type === 'runnable' && componentInput.autoRefresh) {
-    componentInput.autoRefresh = false;
-    componentInput.recomputeOnInputChanged = false;
-}
+$effect.pre(() => {
+    if (!autoRefresh && componentInput?.type === 'runnable' && componentInput.autoRefresh) {
+        componentInput.autoRefresh = false;
+        componentInput.recomputeOnInputChanged = false;
+    }
+});
 function isRunnableDefined(componentInput) {
     return ((isScriptByNameDefined(componentInput) &&
         componentInput.runnable.inlineScript != undefined) ||
@@ -182,7 +163,7 @@ export async function handleSideEffect(success, errorMessage) {
 		<InitializeComponent {id} />
 	{/if}
 	{#if render}
-		<slot />
+		{@render children?.()}
 	{/if}
 {:else if componentInput.type === 'runnable' && isRunnableDefined(componentInput)}
 	<RunnableComponent
@@ -197,13 +178,13 @@ export async function handleSideEffect(success, errorMessage) {
 		fields={componentInput.fields}
 		bind:result
 		runnable={componentInput.runnable}
-		hideRefreshButton={componentInput.hideRefreshButton ?? hideRefreshButton}
+		hideRefreshButton={hideRefreshButton ?? componentInput.hideRefreshButton}
 		transformer={componentInput.transformer}
 		{autoRefresh}
 		{overrideCallback}
 		{overrideAutoRefresh}
 		recomputableByRefreshButton={componentInput.autoRefresh ?? true}
-		bind:recomputeOnInputChanged={componentInput.recomputeOnInputChanged}
+		recomputeOnInputChanged={componentInput.recomputeOnInputChanged}
 		{id}
 		{extraQueryParams}
 		{forceSchemaDisplay}
@@ -220,7 +201,6 @@ export async function handleSideEffect(success, errorMessage) {
 		on:resultSet={(e) => {
 			const res = e.detail
 			if ($initialized?.runnableInitialized?.[fullId] === undefined) {
-				console.log('resultSet', id)
 				$initialized.runnableInitialized = {
 					...($initialized.runnableInitialized ?? {}),
 					[fullId]: res
@@ -237,10 +217,10 @@ export async function handleSideEffect(success, errorMessage) {
 		{outputs}
 		{errorHandledByComponent}
 	>
-		<slot />
+		{@render children?.()}
 	</RunnableComponent>
 {:else}
 	<NonRunnableComponent {noInitialize} {hasChildrens} {render} bind:result {id} {componentInput}>
-		<slot />
+		{@render children?.()}
 	</NonRunnableComponent>
 {/if}