windmill-components 1.89.0 → 1.103.0

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

@@ -1,15 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
-import type { InlineScript } from '../../types';
+import type { HiddenRunnable } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
-        name: string;
-        inlineScript: InlineScript | undefined;
-        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
-        recomputeOnInputChanged: boolean;
-        recomputableByRefreshButton: boolean;
-        noBackendValue?: any;
+        runnable: HiddenRunnable;
+        onSuccess?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -22,5 +17,6 @@ export type HiddenComponentProps = typeof __propDef.props;
 export type HiddenComponentEvents = typeof __propDef.events;
 export type HiddenComponentSlots = typeof __propDef.slots;
 export default class HiddenComponent extends SvelteComponentTyped<HiddenComponentProps, HiddenComponentEvents, HiddenComponentSlots> {
+    get onSuccess(): () => void;
 }
 export {};

package/package/components/apps/components/helpers/InputValue.svelte

@@ -1,8 +1,9 @@
 <script>import { isCodeInjection } from '../../../flows/utils';
-import { deepEqual } from 'fast-equals';
-import { createEventDispatcher, getContext, onDestroy } from 'svelte';
+import { createEventDispatcher, getContext, onDestroy, tick } from 'svelte';
 import { accessPropertyByPath } from '../../utils';
 import { computeGlobalContext, eval_like } from './eval';
+import deepEqualWithOrderedArray from './deepEqualWithOrderedArray';
+import { deepEqual } from 'fast-equals';
 export let input;
 export let value;
 export let id = undefined;
@@ -16,7 +17,7 @@ if (input == undefined) {
 }
 let lastInput = input ? JSON.parse(JSON.stringify(input)) : undefined;
 onDestroy(() => (lastInput = undefined));
-$: if (input && !deepEqual(input, lastInput)) {
+$: if (input && !deepEqualWithOrderedArray(input, lastInput)) {
     lastInput = JSON.parse(JSON.stringify(input));
     // Needed because of file uploads
     if (input?.['value'] instanceof ArrayBuffer) {
@@ -39,20 +40,39 @@ function debounce(cb) {
     }
     timeout = setTimeout(cb, debounce_ms);
 }
+function debounce2(cb) {
+    if (firstDebounce) {
+        firstDebounce = false;
+        cb();
+        return;
+    }
+    if (timeout) {
+        clearTimeout(timeout);
+    }
+    timeout = setTimeout(cb, 50);
+}
 $: lastInput && $worldStore && debounce(handleConnection);
 $: lastInput &&
     lastInput.type == 'template' &&
     $stateId &&
     $state &&
     debounce(async () => {
-        value = await getValue(lastInput);
+        let nvalue = await getValue(lastInput);
+        if (!deepEqual(nvalue, value)) {
+            value = nvalue;
+        }
         dispatch('done');
     });
 $: lastInput &&
     lastInput.type == 'eval' &&
     $stateId &&
     $state &&
-    debounce(async () => (value = await evalExpr(lastInput)));
+    debounce2(async () => {
+        let nvalue = await evalExpr(lastInput);
+        if (!deepEqual(nvalue, value)) {
+            value = nvalue;
+        }
+    });
 async function handleConnection() {
     if (lastInput?.type === 'connected') {
         $worldStore?.connect(lastInput, onValueChange, `${id}-${key}`);
@@ -69,6 +89,7 @@ async function handleConnection() {
     else {
         value = undefined;
     }
+    await tick();
     dispatch('done');
 }
 async function evalExpr(input) {

package/package/components/apps/components/helpers/NonRunnableComponent.svelte

@@ -9,6 +9,7 @@ export let render;
 const { worldStore } = getContext('AppViewerContext');
 $: outputs = $worldStore?.outputsById?.[id];
 function setOutput(v) {
+    // console.log('setnr', id)
     outputs?.result?.set(v, true);
 }
 $: result && outputs && setOutput(result);

package/package/components/apps/components/helpers/RefreshButton.svelte

@@ -11,7 +11,7 @@ async function refresh() {
 <button
 	on:pointerdown|preventDefault|stopPropagation
 	on:click|preventDefault|stopPropagation={refresh}
-	class="center-center p-1 rounded border bg-white/60  hover:bg-gray-200 z-10"
+	class="center-center p-1 rounded border bg-white/60 hover:bg-gray-200 z-10"
 >
 	<RefreshCw class={loading ? 'animate-spin' : ''} size={16} />
 </button>

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

@@ -1,16 +1,16 @@
 <script>import Alert from '../../../common/alert/Alert.svelte';
 import LightweightSchemaForm from '../../../LightweightSchemaForm.svelte';
 import Popover from '../../../Popover.svelte';
-import TestJobLoader from '../../../TestJobLoader.svelte';
 import { AppService } from '../../../../gen';
 import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '../../../../utils';
 import { deepEqual } from 'fast-equals';
 import { Bug } from 'lucide-svelte';
-import { createEventDispatcher, getContext, onDestroy } from 'svelte';
+import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte';
 import { computeGlobalContext, eval_like } from './eval';
 import InputValue from './InputValue.svelte';
 import RefreshButton from './RefreshButton.svelte';
-import { selectId } from '../../editor/appUtils';
+import { clearErrorByComponentId, selectId } from '../../editor/appUtils';
+import ResultJobLoader from '../../../ResultJobLoader.svelte';
 // Component props
 export let id;
 export let fields;
@@ -28,39 +28,15 @@ export let outputs;
 export let extraKey = '';
 export let recomputeOnInputChanged = true;
 export let loading = false;
-export let recomputableByRefreshButton = true;
 export let refreshOnStart = false;
+export let recomputableByRefreshButton;
+export let errorHandledByComponent = false;
+export let hideRefreshButton = false;
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId, state, componentControl, initialized, selectedComponent, app, connectingInput } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 let donePromise = undefined;
-const cancellableRun = (inlineScript) => {
-    let rejectCb;
-    let p = new Promise((resolve, reject) => {
-        rejectCb = reject;
-        donePromise = resolve;
-        executeComponent(true, inlineScript).catch(reject);
-    });
-    p.cancel = () => {
-        testJobLoader?.cancelJob();
-        loading = false;
-        rejectCb(new Error('Canceled'));
-    };
-    return p;
-};
-$runnableComponents[id] = {
-    autoRefresh: autoRefresh && recomputableByRefreshButton,
-    refreshOnStart,
-    cb: cancellableRun
-};
-if (!$initialized.initializedComponents.includes(id)) {
-    $initialized.initializedComponents = [...$initialized.initializedComponents, id];
-}
-onDestroy(() => {
-    $initialized.initializedComponents = $initialized.initializedComponents.filter((c) => c !== id);
-});
 $runnableComponents = $runnableComponents;
 let args = undefined;
-let testIsLoading = false;
 let runnableInputValues = {};
 let executeTimeout = undefined;
 $: outputs.loading?.set(loading);
@@ -85,19 +61,20 @@ $: if (!deepEqual(currentStaticValues, lazyStaticValues)) {
     refreshIfAutoRefresh('static changed');
 }
 $: (runnableInputValues || extraQueryParams || args) &&
-    testJobLoader &&
+    resultJobLoader &&
     refreshIfAutoRefresh('arg changed');
 $: refreshOn =
     runnable && runnable.type === 'runnableByName' ? runnable.inlineScript?.refreshOn ?? [] : [];
 function refreshIfAutoRefresh(_src) {
+    // 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();
     }
 }
 // Test job internal state
-let testJob = undefined;
-let testJobLoader = undefined;
+let resultJobLoader = undefined;
 let schemaStripped = autoRefresh || forceSchemaDisplay ? emptySchema() : undefined;
 $: (autoRefresh || forceSchemaDisplay) &&
     Object.keys(fields ?? {}).length > 0 &&
@@ -117,10 +94,9 @@ function stripSchema(inputs, s) {
     // Remove hidden static inputs
     Object.keys(inputs ?? {}).forEach((key) => {
         const input = inputs[key];
-        if (input.type === 'static' && schemaStripped !== undefined) {
-            delete schemaStripped.properties[key];
-        }
-        if (input.type === 'connected' && schemaStripped !== undefined) {
+        if (['static', 'eval', 'connected'].includes(input.type) &&
+            schemaStripped !== undefined &&
+            schemaStripped.properties) {
             delete schemaStripped.properties[key];
         }
     });
@@ -135,12 +111,12 @@ function generateNextFrontendJobId() {
     return `${prefix}#${nextJobNumber}`;
 }
 async function executeComponent(noToast = false, inlineScriptOverride) {
-    console.debug('execute', id);
+    console.debug(`Executing ${id}`);
     if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
         loading = true;
         try {
             const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, {}), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
-            await setResult(r);
+            await setResult(r, undefined);
             $state = $state;
         }
         catch (e) {
@@ -155,20 +131,25 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
             $jobs = [{ job, component: id, error }, ...$jobs];
         }
         loading = false;
+        donePromise?.();
         return;
     }
     else if (noBackend) {
         if (!noToast) {
             sendUserToast('This app is not connected to a windmill backend, it is a static preview');
         }
+        donePromise?.();
         return;
     }
     if (runnable?.type === 'runnableByName' && !runnable.inlineScript) {
         return;
     }
-    loading = true;
+    if (!resultJobLoader) {
+        console.warn('No test job loader');
+        return;
+    }
     try {
-        let njob = await testJobLoader?.abstractRun(() => {
+        let njob = await resultJobLoader?.abstractRun(() => {
             const nonStaticRunnableInputs = {};
             const staticRunnableInputs = {};
             Object.keys(fields ?? {}).forEach((k) => {
@@ -185,6 +166,7 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
             });
             const requestBody = {
                 args: nonStaticRunnableInputs,
+                component: id,
                 force_viewer_static_fields: !isEditor ? undefined : staticRunnableInputs
             };
             if (runnable?.type === 'runnableByName') {
@@ -214,7 +196,7 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
         }
     }
     catch (e) {
-        setResult({ error: e.body ?? e.message });
+        setResult({ error: e.body ?? e.message }, undefined);
         loading = false;
     }
 }
@@ -223,23 +205,32 @@ export async function runComponent() {
         await executeComponent();
     }
     catch (e) {
-        setResult({ error: e.body ?? e.message });
+        setResult({ error: e.body ?? e.message }, undefined);
     }
 }
-let lastStartedAt = Date.now();
-function recordError(error) {
-    if (testJob) {
-        $errorByComponent[testJob.id] = {
-            error: error,
-            componentId: id
-        };
-    }
+function recordError(error, jobId) {
+    $errorByComponent[jobId] = {
+        error: error,
+        componentId: id
+    };
 }
-async function setResult(res) {
+async function setResult(res, jobId) {
+    dispatch('done');
     const hasRes = res !== undefined && res !== null;
     if (transformer) {
-        $worldStore.newOutput(id, 'raw', res);
-        res = await eval_like(transformer.content, computeGlobalContext($worldStore, { result: res }), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+        try {
+            $worldStore.newOutput(id, 'raw', res);
+            res = await eval_like(transformer.content, computeGlobalContext($worldStore, { result: res }), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
+        }
+        catch (err) {
+            res = {
+                error: {
+                    name: 'TransformerError',
+                    message: 'An error occured in the transformer',
+                    stack: err.message
+                }
+            };
+        }
         if (hasRes && res === undefined) {
             res = {
                 error: {
@@ -250,10 +241,12 @@ async function setResult(res) {
             };
         }
     }
+    // console.log('setr', id)
     outputs.result?.set(res);
     result = res;
     if (res?.error) {
-        recordError(res.error);
+        jobId && recordError(res.error, jobId);
+        dispatch('handleError', res.error.message);
     }
     else {
         dispatch('success');
@@ -263,11 +256,43 @@ async function setResult(res) {
         delete $errorByComponent[previousJobId];
         $errorByComponent = $errorByComponent;
     }
+    donePromise?.();
 }
 function handleInputClick(e) {
     const event = e;
     !$connectingInput.opened && selectId(event, id, selectedComponent, $app);
 }
+onMount(() => {
+    const cancellableRun = (inlineScript) => {
+        let rejectCb;
+        let p = new Promise((resolve, reject) => {
+            rejectCb = reject;
+            donePromise = resolve;
+            executeComponent(true, inlineScript).catch(reject);
+        });
+        p.cancel = () => {
+            resultJobLoader?.cancelJob();
+            loading = false;
+            rejectCb(new Error('Canceled'));
+        };
+        return p;
+    };
+    $runnableComponents[id] = {
+        autoRefresh: autoRefresh && recomputableByRefreshButton,
+        refreshOnStart: refreshOnStart,
+        cb: cancellableRun
+    };
+    if (!$initialized.initializedComponents.includes(id)) {
+        $initialized.initializedComponents = [...$initialized.initializedComponents, id];
+    }
+});
+onDestroy(() => {
+    $initialized.initializedComponents = $initialized.initializedComponents.filter((c) => c !== id);
+    $errorByComponent = clearErrorByComponentId(id, $errorByComponent);
+    delete $runnableComponents[id];
+    $runnableComponents = $runnableComponents;
+});
+let lastJobId = undefined;
 </script>
 
 {#each Object.entries(fields ?? {}) as [key, v] (key)}
@@ -293,22 +318,22 @@ function handleInputClick(e) {
 	{/each}
 {/if}
 
-<TestJobLoader
+<ResultJobLoader
+	on:started={(e) => {
+		loading = true
+		dispatch('started', e.detail)
+	}}
 	workspaceOverride={workspace}
 	on:done={(e) => {
-		if (testJob) {
-			const startedAt = new Date(testJob.started_at).getTime()
-			if (startedAt > lastStartedAt) {
-				lastStartedAt = startedAt
-				setResult(e.detail.result)
-				donePromise?.()
-			}
-		}
+		lastJobId = e.detail.id
+		setResult(e.detail.result, e.detail.id)
+		loading = false
+	}}
+	on:doneError={(e) => {
+		setResult({ error: e.detail }, e.detail.id)
 		loading = false
 	}}
-	bind:isLoading={testIsLoading}
-	bind:job={testJob}
-	bind:this={testJobLoader}
+	bind:this={resultJobLoader}
 />
 
 {#if render}
@@ -327,7 +352,7 @@ function handleInputClick(e) {
 			<Alert type="warning" size="xs" class="mt-2 px-1" title="Missing runnable">
 				Please select a runnable
 			</Alert>
-		{:else if result?.error && $mode === 'preview'}
+		{:else if result?.error && $mode === 'preview' && !errorHandledByComponent}
 			<div
 				title="Error"
 				class={classNames(
@@ -342,7 +367,7 @@ function handleInputClick(e) {
 							<Alert type="error" title="Error during execution">
 								<div class="flex flex-col gap-2">
 									An error occured, please contact the app author.
-									<span class="font-semibold">Job id: {testJob?.id}</span>
+									<span class="font-semibold">Job id: {lastJobId}</span>
 								</div>
 							</Alert>
 						</div>
@@ -357,7 +382,7 @@ function handleInputClick(e) {
 				<slot />
 			</div>
 		{/if}
-		{#if !initializing && autoRefresh === true}
+		{#if !initializing && autoRefresh === true && !hideRefreshButton}
 			<div class="flex absolute top-1 right-1 z-50">
 				<RefreshButton {loading} componentId={id} />
 			</div>

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

@@ -25,11 +25,16 @@ declare const __propDef: {
         extraKey?: string | undefined;
         recomputeOnInputChanged?: boolean | undefined;
         loading?: boolean | undefined;
-        recomputableByRefreshButton?: boolean | undefined;
         refreshOnStart?: boolean | undefined;
+        recomputableByRefreshButton: boolean;
+        errorHandledByComponent?: boolean | undefined;
+        hideRefreshButton?: boolean | undefined;
         runComponent?: (() => Promise<void>) | undefined;
     };
     events: {
+        started: CustomEvent<any>;
+        done: CustomEvent<any>;
+        handleError: CustomEvent<any>;
         success: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -2,8 +2,7 @@
 import { isScriptByNameDefined, isScriptByPathDefined } from '../../utils';
 import NonRunnableComponent from './NonRunnableComponent.svelte';
 import RunnableComponent from './RunnableComponent.svelte';
-import { goto } from '$app/navigation';
-import { sendUserToast } from '../../../../utils';
+import { sendUserToast } from '../../../../toast';
 import InitializeComponent from './InitializeComponent.svelte';
 export let componentInput;
 export let id;
@@ -17,15 +16,14 @@ 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;
 const { staticExporter, noBackend, componentControl, runnableComponents } = getContext('AppViewerContext');
-$: if (initializing && result != undefined) {
-    initializing = false;
-}
 if (noBackend && componentInput?.type == 'runnable') {
     result = componentInput?.['value'];
 }
@@ -34,20 +32,31 @@ onMount(() => {
         return result;
     };
 });
+if (!(initializing && componentInput?.type === 'runnable' && isRunnableDefined(componentInput))) {
+    initializing = false;
+}
+// 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;
+}
 function isRunnableDefined(componentInput) {
-    return isScriptByNameDefined(componentInput) || isScriptByPathDefined(componentInput);
+    return ((isScriptByNameDefined(componentInput) &&
+        componentInput.runnable.inlineScript != undefined) ||
+        isScriptByPathDefined(componentInput));
 }
-export function onSuccess() {
-    if (recomputeIds) {
+export function handleSideEffect(success, errorMessage) {
+    const sideEffect = success ? doOnSuccess : doOnError;
+    if (recomputeIds && success) {
         recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb());
     }
-    if (!doOnSuccess)
+    if (!sideEffect)
         return;
-    if (doOnSuccess.selected == 'none')
+    if (sideEffect.selected == 'none')
         return;
-    if (doOnSuccess.selected == 'setTab') {
-        if (Array.isArray(doOnSuccess.configuration.setTab.setTab)) {
-            doOnSuccess.configuration.setTab?.setTab?.forEach((tab) => {
+    if (sideEffect.selected == 'setTab') {
+        if (Array.isArray(sideEffect.configuration.setTab.setTab)) {
+            sideEffect.configuration.setTab?.setTab?.forEach((tab) => {
                 if (tab) {
                     const { id, index } = tab;
                     $componentControl[id].setTab?.(index);
@@ -55,20 +64,27 @@ export function onSuccess() {
             });
         }
     }
-    else if (doOnSuccess.selected == 'gotoUrl' &&
-        doOnSuccess.configuration.gotoUrl.url &&
-        doOnSuccess.configuration.gotoUrl.url != '') {
-        if (doOnSuccess.configuration.gotoUrl.newTab) {
-            window.open(doOnSuccess.configuration.gotoUrl.url, '_blank');
+    else if (sideEffect.selected == 'gotoUrl' &&
+        sideEffect.configuration.gotoUrl.url &&
+        sideEffect.configuration.gotoUrl.url != '') {
+        if (sideEffect.configuration.gotoUrl.newTab) {
+            window.open(sideEffect.configuration.gotoUrl.url, '_blank');
         }
         else {
-            goto(doOnSuccess.configuration.gotoUrl.url);
+            window.location.href = sideEffect.configuration.gotoUrl.url;
         }
     }
-    else if (doOnSuccess.selected == 'sendToast' &&
-        doOnSuccess.configuration.sendToast.message &&
-        doOnSuccess.configuration.sendToast.message != '') {
-        sendUserToast(doOnSuccess.configuration.sendToast.message);
+    else if (sideEffect.selected == 'sendToast' &&
+        sideEffect.configuration.sendToast &&
+        sideEffect.configuration.sendToast.message &&
+        sideEffect.configuration.sendToast.message != '') {
+        sendUserToast(sideEffect.configuration.sendToast.message, !success);
+    }
+    else if (sideEffect.selected == 'sendErrorToast' &&
+        sideEffect.configuration.sendErrorToast &&
+        sideEffect.configuration.sendErrorToast.message &&
+        sideEffect.configuration.sendErrorToast.message != '') {
+        sendUserToast(sideEffect.configuration.sendErrorToast.message, true, [], sideEffect.configuration.sendErrorToast.appendError ? errorMessage : undefined);
     }
 }
 </script>
@@ -85,8 +101,10 @@ export function onSuccess() {
 		fields={componentInput.fields}
 		bind:result
 		runnable={componentInput.runnable}
+		hideRefreshButton={componentInput.hideRefreshButton}
 		transformer={componentInput.transformer}
 		{autoRefresh}
+		recomputableByRefreshButton={componentInput.autoRefresh ?? true}
 		bind:recomputeOnInputChanged={componentInput.recomputeOnInputChanged}
 		{id}
 		{extraQueryParams}
@@ -95,8 +113,12 @@ export function onSuccess() {
 		wrapperClass={runnableClass}
 		wrapperStyle={runnableStyle}
 		{render}
-		on:success={onSuccess}
+		on:started
+		on:done={() => (initializing = false)}
+		on:success={() => handleSideEffect(true)}
+		on:handleError={(e) => handleSideEffect(false, e.detail)}
 		{outputs}
+		{errorHandledByComponent}
 	>
 		<slot />
 	</RunnableComponent>

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

@@ -16,7 +16,7 @@ declare const __propDef: {
         runnableClass?: string | undefined;
         runnableStyle?: string | undefined;
         doOnSuccess?: {
-            selected: 'gotoUrl' | 'none' | 'setTab' | 'sendToast';
+            selected: 'gotoUrl' | 'none' | 'setTab' | 'sendToast' | 'sendErrorToast' | 'errorOverlay';
             configuration: {
                 gotoUrl: {
                     url: string | undefined;
@@ -28,9 +28,35 @@ declare const __propDef: {
                         index: number;
                     }[] | undefined;
                 };
-                sendToast: {
+                sendToast?: {
                     message: string | undefined;
+                } | undefined;
+                sendErrorToast?: {
+                    message: string | undefined;
+                    appendError: boolean | undefined;
+                } | undefined;
+            };
+        } | undefined;
+        doOnError?: {
+            selected: 'gotoUrl' | 'none' | 'setTab' | 'sendToast' | 'sendErrorToast' | 'errorOverlay';
+            configuration: {
+                gotoUrl: {
+                    url: string | undefined;
+                    newTab: boolean | undefined;
                 };
+                setTab: {
+                    setTab: {
+                        id: string;
+                        index: number;
+                    }[] | undefined;
+                };
+                sendToast?: {
+                    message: string | undefined;
+                } | undefined;
+                sendErrorToast?: {
+                    message: string | undefined;
+                    appendError: boolean | undefined;
+                } | undefined;
             };
         } | undefined;
         render: boolean;
@@ -41,9 +67,12 @@ declare const __propDef: {
         };
         extraKey?: string | undefined;
         refreshOnStart?: boolean | undefined;
-        onSuccess?: (() => void) | undefined;
+        errorHandledByComponent?: boolean | undefined;
+        handleSideEffect?: ((success: boolean, errorMessage?: string) => void) | undefined;
     };
     events: {
+        started: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
@@ -54,6 +83,6 @@ export type RunnableWrapperProps = typeof __propDef.props;
 export type RunnableWrapperEvents = typeof __propDef.events;
 export type RunnableWrapperSlots = typeof __propDef.slots;
 export default class RunnableWrapper extends SvelteComponentTyped<RunnableWrapperProps, RunnableWrapperEvents, RunnableWrapperSlots> {
-    get onSuccess(): () => void;
+    get handleSideEffect(): (success: boolean, errorMessage?: string | undefined) => void;
 }
 export {};

package/package/components/apps/components/helpers/deepEqualWithOrderedArray.d.ts

@@ -0,0 +1,2 @@
+declare const deepEqualWithOrderedArray: <A, B>(a: A, b: B) => boolean;
+export default deepEqualWithOrderedArray;

package/package/components/apps/components/helpers/deepEqualWithOrderedArray.js

@@ -0,0 +1,13 @@
+import { createCustomEqual, deepEqual } from 'fast-equals';
+function compareObjectsKeysOrder(obj1, obj2) {
+    return deepEqual(Object.keys(obj1), Object.keys(obj2));
+}
+const deepEqualWithOrderedArray = createCustomEqual({
+    createCustomConfig: (defaultConfig) => ({
+        ...defaultConfig,
+        areObjectsEqual: (a, b, state) => {
+            return defaultConfig.areObjectsEqual(a, b, state) && compareObjectsKeysOrder(a, b);
+        }
+    })
+});
+export default deepEqualWithOrderedArray;