windmill-components 1.89.0 → 1.103.0

package/{dist/components/apps/components/display/AppPieChart.svelte.d.ts → package/components/apps/components/display/AppChartJs.svelte.d.ts}

@@ -15,9 +15,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type AppPieChartProps = typeof __propDef.props;
-export type AppPieChartEvents = typeof __propDef.events;
-export type AppPieChartSlots = typeof __propDef.slots;
-export default class AppPieChart extends SvelteComponentTyped<AppPieChartProps, AppPieChartEvents, AppPieChartSlots> {
+export type AppChartJsProps = typeof __propDef.props;
+export type AppChartJsEvents = typeof __propDef.events;
+export type AppChartJsSlots = typeof __propDef.slots;
+export default class AppChartJs extends SvelteComponentTyped<AppChartJsProps, AppChartJsEvents, AppChartJsSlots> {
 }
 export {};

package/package/components/apps/components/display/AppDisplayComponent.svelte

@@ -4,6 +4,7 @@ import { twMerge } from 'tailwind-merge';
 import { initOutput } from '../../editor/appUtils';
 import { IS_APP_PUBLIC_CONTEXT_KEY } from '../../types';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import { concatCustomCss } from '../../utils';
 export let id;
 export let componentInput;
 export let initializing = undefined;
@@ -16,6 +17,7 @@ const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
+$: css = concatCustomCss($app.css?.displaycomponent, customCss);
 </script>
 
 <RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
@@ -23,9 +25,9 @@ const outputs = initOutput($worldStore, id, {
 		<div
 			class={twMerge(
 				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
-				$app.css?.['displaycomponent']?.['header']?.class,
-				customCss?.header?.class
+				css?.header?.class
 			)}
+			style={css?.header?.style}
 		>
 			Results
 		</div>

package/package/components/apps/components/display/AppDownload.svelte

@@ -0,0 +1,78 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import { concatCustomCss, transformBareBase64IfNecessary } from '../../utils';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import { AlignWrapper } from '../helpers';
+import { Button } from '../../../common';
+import { loadIcon } from '../icon';
+export let id;
+export let configuration;
+export let customCss = undefined;
+export let render;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let noWFull = false;
+let resolvedConfig = initConfig(components['downloadcomponent'].initialData.configuration, configuration);
+const { app, worldStore } = getContext('AppViewerContext');
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
+let beforeIconComponent;
+let afterIconComponent;
+$: resolvedConfig.beforeIcon && handleBeforeIcon();
+$: resolvedConfig.afterIcon && handleAfterIcon();
+async function handleBeforeIcon() {
+    if (resolvedConfig.beforeIcon) {
+        beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon);
+    }
+}
+async function handleAfterIcon() {
+    if (resolvedConfig.afterIcon) {
+        afterIconComponent = await loadIcon(resolvedConfig.afterIcon);
+    }
+}
+$: css = concatCustomCss($app.css?.downloadcomponent, customCss);
+</script>
+
+<InitializeComponent {id} />
+
+{#each Object.keys(components['downloadcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#if render}
+	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
+		<Button
+			on:pointerdown={(e) => e.stopPropagation()}
+			btnClasses={twMerge(css?.button?.class, resolvedConfig.fillContainer ? 'w-full h-full' : '')}
+			wrapperClasses={resolvedConfig.fillContainer ? 'w-full h-full' : ''}
+			style={css?.button?.style}
+			disabled={resolvedConfig.source == undefined}
+			size={resolvedConfig.size}
+			color={resolvedConfig.color}
+			download={resolvedConfig.filename}
+			href={transformBareBase64IfNecessary(resolvedConfig.source)}
+			target="_self"
+			nonCaptureEvent
+		>
+			<span class="truncate inline-flex gap-2 items-center">
+				{#if resolvedConfig.beforeIcon && beforeIconComponent}
+					<svelte:component this={beforeIconComponent} size={14} />
+				{/if}
+				{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
+					<div>{resolvedConfig.label}</div>
+				{/if}
+				{#if resolvedConfig.afterIcon && afterIconComponent}
+					<svelte:component this={afterIconComponent} size={14} />
+				{/if}
+			</span>
+		</Button>
+	</AlignWrapper>
+{/if}

package/{dist/components/apps/components/inputs/AppCheckbox.svelte.d.ts → package/components/apps/components/display/AppDownload.svelte.d.ts}

@@ -4,19 +4,20 @@ declare const __propDef: {
     props: {
         id: string;
         configuration: RichConfigurations;
+        customCss?: ComponentCustomCSS<'downloadcomponent'> | undefined;
+        render: boolean;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        customCss?: ComponentCustomCSS<'checkboxcomponent'> | undefined;
-        render: boolean;
+        noWFull?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type AppCheckboxProps = typeof __propDef.props;
-export type AppCheckboxEvents = typeof __propDef.events;
-export type AppCheckboxSlots = typeof __propDef.slots;
-export default class AppCheckbox extends SvelteComponentTyped<AppCheckboxProps, AppCheckboxEvents, AppCheckboxSlots> {
+export type AppDownloadProps = typeof __propDef.props;
+export type AppDownloadEvents = typeof __propDef.events;
+export type AppDownloadSlots = typeof __propDef.slots;
+export default class AppDownload extends SvelteComponentTyped<AppDownloadProps, AppDownloadEvents, AppDownloadSlots> {
 }
 export {};

package/{dist/components/apps/components/display/AppDisplayComponent.svelte → package/components/apps/components/display/AppFlowStatusComponent.svelte}

@@ -1,46 +1,59 @@
-<script>import DisplayResult from '../../../DisplayResult.svelte';
-import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initOutput } from '../../editor/appUtils';
-import { IS_APP_PUBLIC_CONTEXT_KEY } from '../../types';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import { concatCustomCss } from '../../utils';
+import FlowStatusViewer from '../../../FlowStatusViewer.svelte';
 export let id;
 export let componentInput;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
-const requireHtmlApproval = getContext(IS_APP_PUBLIC_CONTEXT_KEY);
 const { app, worldStore } = getContext('AppViewerContext');
-let result = undefined;
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
+$: css = concatCustomCss($app.css?.flowstatuscomponent, customCss);
+let jobId;
 </script>
 
-<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper
+	on:started={(e) => {
+		jobId = e.detail
+	}}
+	{outputs}
+	{render}
+	{componentInput}
+	{id}
+	bind:initializing
+>
 	<div class="flex flex-col w-full h-full">
 		<div
 			class={twMerge(
 				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
-				$app.css?.['displaycomponent']?.['header']?.class,
-				customCss?.header?.class
+				css?.header?.class
 			)}
+			style={css?.header?.style}
 		>
-			Results
+			Flow Status
 		</div>
 		<div
 			style={twMerge(
-				$app.css?.['displaycomponent']?.['container']?.style,
+				$app.css?.['flowstatuscomponent']?.['container']?.style,
 				customCss?.container?.style
 			)}
 			class={twMerge(
-				'p-2 grow',
-				$app.css?.['displaycomponent']?.['container']?.class,
+				'p-2 grow overflow-auto',
+				$app.css?.['flowstatuscomponent']?.['container']?.class,
 				customCss?.container?.class
 			)}
 		>
-			<DisplayResult {result} {requireHtmlApproval} />
+			{#if jobId}
+				<FlowStatusViewer {jobId} />
+			{:else}
+				<span class="text-gray-600 text-xs">No flow</span>
+			{/if}
 		</div>
 	</div>
 </RunnableWrapper>

package/package/components/apps/components/display/AppFlowStatusComponent.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'flowstatuscomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppFlowStatusComponentProps = typeof __propDef.props;
+export type AppFlowStatusComponentEvents = typeof __propDef.events;
+export type AppFlowStatusComponentSlots = typeof __propDef.slots;
+export default class AppFlowStatusComponent extends SvelteComponentTyped<AppFlowStatusComponentProps, AppFlowStatusComponentEvents, AppFlowStatusComponentSlots> {
+}
+export {};

package/package/components/apps/components/display/AppHtml.svelte

@@ -7,7 +7,7 @@ export let componentInput;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
-const { app, worldStore, selectedComponent, mode } = getContext('AppViewerContext');
+const { app, worldStore, mode } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
@@ -26,13 +26,6 @@ $: css = concatCustomCss($app.css?.htmlcomponent, customCss);
 	bind:clientHeight={h}
 	bind:clientWidth={w}
 >
-	{#if $mode == 'dnd'}
-		<button
-			class="absolute bottom-0 left-0 text-xs border px-2 py-0.5 bg-white/80"
-			on:click={() => ($selectedComponent = [id])}>Select</button
-		>
-	{/if}
-
 	<RunnableWrapper
 		{outputs}
 		{render}
@@ -49,11 +42,15 @@ $: css = concatCustomCss($app.css?.htmlcomponent, customCss);
 				class="p-0 {css?.container?.class ?? ''}"
 				title="sandbox"
 				srcdoc={result
-					? '<scr' + `ipt type="application/javascript" src="/tailwind.js"></script>` + result
+					? '<base target="_parent" /><scr' +
+					  `ipt type="application/javascript" src="/tailwind.js"></script>` +
+					  result
 					: ''}
 			/>
 		{/key}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div on:click|stopPropagation class="absolute top-0 h-full w-full" />
+		{#if $mode == 'dnd'}
+			<div on:click|stopPropagation class="absolute top-0 h-full w-full" />
+		{/if}
 	</RunnableWrapper>
 </div>

package/package/components/apps/components/display/AppImage.svelte

@@ -10,7 +10,7 @@ export let id;
 export let configuration;
 export let customCss = undefined;
 export let render;
-let resolvedConfig = initConfig(components['imagecomponent'].initialData.configuration, configuration);
+const resolvedConfig = initConfig(components['imagecomponent'].initialData.configuration, configuration);
 const { app, worldStore } = getContext('AppViewerContext');
 const fit = {
     cover: 'object-cover',

package/package/components/apps/components/display/AppLogsComponent.svelte

@@ -0,0 +1,57 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initOutput } from '../../editor/appUtils';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import { concatCustomCss } from '../../utils';
+import LogViewer from '../../../LogViewer.svelte';
+import TestJobLoader from '../../../TestJobLoader.svelte';
+export let id;
+export let componentInput;
+export let initializing = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+$: css = concatCustomCss($app.css?.logcomponent, customCss);
+let testJobLoader = undefined;
+let testIsLoading = false;
+let testJob = undefined;
+</script>
+
+<TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job={testJob} />
+
+<RunnableWrapper
+	on:started={(e) => {
+		testJobLoader?.watchJob(e.detail)
+	}}
+	{outputs}
+	{render}
+	{componentInput}
+	{id}
+	bind:initializing
+>
+	<div class="flex flex-col w-full h-full">
+		<div
+			class={twMerge(
+				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
+				css?.header?.class
+			)}
+			style={css?.header?.style}
+		>
+			Logs
+		</div>
+		<div
+			style={twMerge($app.css?.['logcomponent']?.['container']?.style, customCss?.container?.style)}
+			class={twMerge(
+				'p-2 grow overflow-auto',
+				$app.css?.['logcomponent']?.['container']?.class,
+				customCss?.container?.class
+			)}
+		>
+			<LogViewer content={testJob?.logs} isLoading={testIsLoading} />
+		</div>
+	</div>
+</RunnableWrapper>

package/{dist/components/apps/components/display/AppHtml.svelte.d.ts → package/components/apps/components/display/AppLogsComponent.svelte.d.ts}

@@ -6,19 +6,17 @@ declare const __propDef: {
         id: string;
         componentInput: AppInput | undefined;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'htmlcomponent'> | undefined;
+        customCss?: ComponentCustomCSS<'logcomponent'> | undefined;
         render: boolean;
     };
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type AppHtmlProps = typeof __propDef.props;
-export type AppHtmlEvents = typeof __propDef.events;
-export type AppHtmlSlots = typeof __propDef.slots;
-export default class AppHtml extends SvelteComponentTyped<AppHtmlProps, AppHtmlEvents, AppHtmlSlots> {
+export type AppLogsComponentProps = typeof __propDef.props;
+export type AppLogsComponentEvents = typeof __propDef.events;
+export type AppLogsComponentSlots = typeof __propDef.slots;
+export default class AppLogsComponent extends SvelteComponentTyped<AppLogsComponentProps, AppLogsComponentEvents, AppLogsComponentSlots> {
 }
 export {};

package/package/components/apps/components/display/AppPdf.svelte

@@ -184,7 +184,7 @@ $: css = concatCustomCss($app.css?.pdfcomponent, customCss);
 				<div
 					bind:clientWidth={controlsWidth}
 					bind:clientHeight={controlsHeight}
-					class="sticky flex {$mode !== 'preview'
+					class="flex {$mode !== 'preview'
 						? 'w-[calc(100%-2px)] top-[1px]'
 						: 'w-full top-0'} {wideView
 						? 'justify-center gap-14'

package/package/components/apps/components/display/table/AppTable.svelte

@@ -13,6 +13,8 @@ import { concatCustomCss } from '../../../utils';
 import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput } from '../../../editor/appUtils';
 import ResolveConfig from '../../helpers/ResolveConfig.svelte';
+import AppCheckbox from '../../inputs/AppCheckbox.svelte';
+import AppSelect from '../../inputs/AppSelect.svelte';
 export let id;
 export let componentInput;
 export let configuration;
@@ -250,7 +252,7 @@ $componentControl[id] = {
 										on:keypress={() => toggleRow(row, rowIndex)}
 										on:click={() => toggleRow(row, rowIndex)}
 									>
-										<div class="center-center h-full w-full flex-wrap gap-1">
+										<div class="center-center h-full w-full flex-wrap gap-1.5">
 											{#each actionButtons as actionButton, actionIndex (actionButton?.id)}
 												<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 												<div
@@ -270,58 +272,121 @@ $componentControl[id] = {
 														? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
 														: ''}
 												>
-													{#if $selectedComponent?.includes(actionButton.id) || $hoverStore === actionButton.id}
+													{#if $mode !== 'preview'}
+														<!-- svelte-ignore a11y-click-events-have-key-events -->
 														<span
 															title={`Id: ${actionButton.id}`}
 															class={classNames(
-																'px-2 text-2xs font-bold w-fit absolute shadow -top-5 -left-[2px] border z-50 rounded-sm',
-																'bg-indigo-500/90 border-indigo-600 text-white'
+																'px-2 text-2xs font-bold w-fit absolute shadow  -top-2 -left-2 border z-50 rounded-sm',
+																'bg-indigo-500/90 border-indigo-600 text-white',
+																$selectedComponent?.includes(actionButton.id) ||
+																	$hoverStore === actionButton.id
+																	? 'opacity-100'
+																	: 'opacity-0'
 															)}
+															on:click|stopPropagation={() => {
+																$selectedComponent = [actionButton.id]
+															}}
 														>
 															{actionButton.id}
 														</span>
 													{/if}
 													{#if rowIndex == 0}
+														{@const controls = {
+															left: () => {
+																if (actionIndex === 0) {
+																	$selectedComponent = [id]
+																	return true
+																} else if (actionIndex > 0) {
+																	$selectedComponent = [actionButtons[actionIndex - 1].id]
+																	return true
+																}
+																return false
+															},
+															right: () => {
+																if (actionIndex === actionButtons.length - 1) {
+																	return id
+																} else if (actionIndex < actionButtons.length - 1) {
+																	$selectedComponent = [actionButtons[actionIndex + 1].id]
+																	return true
+																}
+																return false
+															}
+														}}
+														{#if actionButton.type == 'buttoncomponent'}
+															<AppButton
+																extraKey={'idx' + rowIndex}
+																{render}
+																noWFull
+																preclickAction={async () => {
+																	toggleRow(row, rowIndex)
+																}}
+																id={actionButton.id}
+																customCss={actionButton.customCss}
+																configuration={actionButton.configuration}
+																recomputeIds={actionButton.recomputeIds}
+																extraQueryParams={{ row: row.original }}
+																componentInput={actionButton.componentInput}
+																{controls}
+															/>
+														{:else if actionButton.type == 'checkboxcomponent'}
+															<AppCheckbox
+																extraKey={'idx' + rowIndex}
+																{render}
+																id={actionButton.id}
+																customCss={actionButton.customCss}
+																configuration={actionButton.configuration}
+																recomputeIds={actionButton.recomputeIds}
+																preclickAction={async () => {
+																	toggleRow(row, rowIndex)
+																}}
+																{controls}
+															/>
+														{:else if actionButton.type == 'selectcomponent'}
+															<AppSelect
+																extraKey={'idx' + rowIndex}
+																{render}
+																id={actionButton.id}
+																customCss={actionButton.customCss}
+																configuration={actionButton.configuration}
+																recomputeIds={actionButton.recomputeIds}
+																preclickAction={async () => {
+																	toggleRow(row, rowIndex)
+																}}
+																{controls}
+															/>
+														{/if}
+													{:else if actionButton.type == 'buttoncomponent'}
 														<AppButton
 															extraKey={'idx' + rowIndex}
 															{render}
 															noWFull
+															id={actionButton.id}
+															customCss={actionButton.customCss}
+															configuration={actionButton.configuration}
+															recomputeIds={actionButton.recomputeIds}
 															preclickAction={async () => {
 																toggleRow(row, rowIndex)
 															}}
+															extraQueryParams={{ row: row.original }}
+															componentInput={actionButton.componentInput}
+														/>
+													{:else if actionButton.type == 'checkboxcomponent'}
+														<AppCheckbox
+															extraKey={'idx' + rowIndex}
+															{render}
 															id={actionButton.id}
 															customCss={actionButton.customCss}
 															configuration={actionButton.configuration}
 															recomputeIds={actionButton.recomputeIds}
-															extraQueryParams={{ row: row.original }}
-															componentInput={actionButton.componentInput}
-															controls={{
-																left: () => {
-																	if (actionIndex === 0) {
-																		$selectedComponent = [id]
-																		return true
-																	} else if (actionIndex > 0) {
-																		$selectedComponent = [actionButtons[actionIndex - 1].id]
-																		return true
-																	}
-																	return false
-																},
-																right: () => {
-																	if (actionIndex === actionButtons.length - 1) {
-																		return id
-																	} else if (actionIndex < actionButtons.length - 1) {
-																		$selectedComponent = [actionButtons[actionIndex + 1].id]
-																		return true
-																	}
-																	return false
-																}
+															preclickAction={async () => {
+																toggleRow(row, rowIndex)
 															}}
 														/>
-													{:else}
-														<AppButton
+													{:else if actionButton.type == 'selectcomponent'}
+														<AppSelect
 															extraKey={'idx' + rowIndex}
 															{render}
-															noWFull
 															id={actionButton.id}
 															customCss={actionButton.customCss}
 															configuration={actionButton.configuration}
@@ -329,8 +394,6 @@ $componentControl[id] = {
 															preclickAction={async () => {
 																toggleRow(row, rowIndex)
 															}}
-															extraQueryParams={{ row: row.original }}
-															componentInput={actionButton.componentInput}
 														/>
 													{/if}
 												</div>

package/package/components/apps/components/helpers/AlignWrapper.svelte

@@ -3,11 +3,12 @@ import { tailwindHorizontalAlignment, tailwindVerticalAlignment } from '../../ut
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let noWFull = false;
+export let hFull = false;
 let c = '';
 export { c as class };
 export let style = '';
 export let render = true;
-$: classes = twMerge('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '', c);
+$: classes = twMerge('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment || hFull ? 'h-full' : '', c);
 </script>
 
 {#if render}

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         horizontalAlignment?: HorizontalAlignment | undefined;
         verticalAlignment?: VerticalAlignment | undefined;
         noWFull?: boolean | undefined;
+        hFull?: boolean | undefined;
         class?: string | undefined;
         style?: string | undefined;
         render?: boolean | undefined;

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

@@ -1,15 +1,16 @@
 <script>import { getContext, onMount } from 'svelte';
 import { initOutput } from '../../editor/appUtils';
 import RunnableComponent from './RunnableComponent.svelte';
+import InitializeComponent from './InitializeComponent.svelte';
 export let id;
-export let name;
-export let inlineScript;
-export let fields;
-export let recomputeOnInputChanged;
-export let recomputableByRefreshButton;
-export let noBackendValue = undefined;
-const { worldStore, staticExporter, noBackend } = getContext('AppViewerContext');
-let result = noBackend ? noBackendValue : undefined;
+export let runnable;
+const { worldStore, staticExporter, noBackend, runnableComponents } = getContext('AppViewerContext');
+let result = noBackend ? runnable.noBackendValue : undefined;
+export function onSuccess() {
+    if (runnable.recomputeIds) {
+        runnable.recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb());
+    }
+}
 onMount(() => {
     $staticExporter[id] = () => {
         return result;
@@ -21,22 +22,23 @@ let outputs = initOutput($worldStore, id, {
 });
 </script>
 
-<RunnableComponent
-	render={false}
-	{id}
-	{fields}
-	autoRefresh={true}
-	{recomputeOnInputChanged}
-	bind:result
-	transformer={undefined}
-	runnable={{
-		name,
-		inlineScript,
-		type: 'runnableByName'
-	}}
-	wrapperClass="hidden"
-	{outputs}
-	{recomputableByRefreshButton}
->
-	<slot />
-</RunnableComponent>
+{#if runnable && (runnable.type == 'runnableByPath' || (runnable.type == 'runnableByName' && runnable.inlineScript != undefined))}
+	<RunnableComponent
+		render={false}
+		{id}
+		fields={runnable.fields}
+		autoRefresh={true}
+		bind:result
+		transformer={undefined}
+		recomputeOnInputChanged={runnable.recomputeOnInputChanged ?? true}
+		{runnable}
+		wrapperClass="hidden"
+		recomputableByRefreshButton={runnable.autoRefresh ?? true}
+		on:success={onSuccess}
+		{outputs}
+	>
+		<slot />
+	</RunnableComponent>
+{:else}
+	<InitializeComponent {id} />
+{/if}