windmill-components 1.56.5 → 1.57.1

package/components/apps/components/form/AppForm.svelte

@@ -46,28 +46,38 @@ $: loading = isLoading && ownClick;
 	forceSchemaDisplay={true}
 >
 	<AlignWrapper {horizontalAlignment}>
-		<Button
-			on:pointerdown={(e) => {
-				e?.stopPropagation()
-				window.dispatchEvent(new Event('pointerup'))
-			}}
-			on:click={() => {
-				runnableComponent?.runComponent()
+		<div class="flex flex-col gap-2 px-4 w-full">
+			<div>
+				{#if componentInput?.type != 'runnable' || Object.values(componentInput?.fields ?? {}).filter((x) => x.type == 'user').length == 0}
+					<span class="text-gray-600 italic text-sm py-2"
+						>Run forms are meant to be associated with a runnable with some user inputs. Pick a
+						runnable and set some 'Runnable Inputs' to 'User Input'</span
+					>
+				{/if}
+			</div>
+			<div class="flex justify-end">
+				<Button
+					{loading}
+					btnClasses="mt-1"
+					on:pointerdown={(e) => {
+						e?.stopPropagation()
+						window.dispatchEvent(new Event('pointerup'))
+					}}
+					on:click={() => {
+						runnableComponent?.runComponent()
 
-				if (recomputeIds) {
-					recomputeIds.forEach((id) => {
-						$runnableComponents[id]?.()
-					})
-				}
-			}}
-			{size}
-			{color}
-			endIcon={{
-				icon: loading ? faRefresh : faArrowRight,
-				classes: loading ? 'animate-spin w-4' : 'w-4'
-			}}
-		>
-			{labelValue}
-		</Button>
+						if (recomputeIds) {
+							recomputeIds.forEach((id) => {
+								$runnableComponents[id]?.()
+							})
+						}
+					}}
+					{size}
+					{color}
+				>
+					{labelValue}
+				</Button>
+			</div>
+		</div>
 	</AlignWrapper>
 </RunnableWrapper>

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

@@ -1,32 +1,26 @@
 <script>import { isCodeInjection } from '../../../flows/utils';
-import { getContext } from 'svelte';
+import { createEventDispatcher, getContext, onMount } from 'svelte';
 import { accessPropertyByPath } from '../../utils';
 export let input;
 export let value;
 export let id = undefined;
 export let row = {};
 const { worldStore } = getContext('AppEditorContext');
-$: input && setDefault();
 $: state = $worldStore?.state;
 $: input && $worldStore && row && handleConnection();
-$: input && $state && input.type == 'template' && setValue();
-function setDefault() {
-    if (!value && input.defaultValue) {
-        value = input.defaultValue;
-    }
-}
+$: input && $state && input.type == 'template' && (value = getValue(input));
 function handleConnection() {
     if (input.type === 'connected') {
         $worldStore?.connect(input, onValueChange);
     }
     else if (input.type === 'row') {
-        value = row[input.column];
+        setTimeout(() => (value = row[input['column']]), 0);
     }
     else if (input.type === 'static' || input.type == 'template') {
-        setValue();
+        setTimeout(() => (value = getValue(input)), 0);
     }
     else {
-        value = undefined;
+        setTimeout(() => (value = undefined), 0);
     }
 }
 function computeGlobalContext() {
@@ -39,20 +33,20 @@ function computeGlobalContext() {
         ];
     }));
 }
-function setValue() {
+export function getValue(input) {
     if (input.type === 'template' && isCodeInjection(input.eval)) {
         try {
-            value = eval_like('`' + input.eval + '`', computeGlobalContext());
+            return eval_like('`' + input.eval + '`', computeGlobalContext());
         }
         catch (e) {
-            value = e.message;
+            return e.message;
         }
     }
     else if (input.type === 'static') {
-        value = input.value;
+        return input.value;
     }
     else if (input.type === 'template') {
-        value = input.eval;
+        return input.eval;
     }
 }
 function create_context_function_template(eval_string, context) {

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         value: string | number | boolean | Record<string | number, any> | undefined;
         id?: string | undefined;
         row?: Record<string, any> | undefined;
+        getValue?: ((input: AppInput) => any) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -16,5 +17,6 @@ export type InputValueProps = typeof __propDef.props;
 export type InputValueEvents = typeof __propDef.events;
 export type InputValueSlots = typeof __propDef.slots;
 export default class InputValue extends SvelteComponentTyped<InputValueProps, InputValueEvents, InputValueSlots> {
+    get getValue(): (input: AppInput) => any;
 }
 export {};

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

@@ -1,20 +1,18 @@
 <script>import { getContext } from 'svelte';
 import InputValue from './InputValue.svelte';
-export let result = undefined;
 export let componentInput;
 export let id;
+export let result;
 // Sync the result to the output
 const { worldStore } = getContext('AppEditorContext');
 $: outputs = $worldStore?.outputsById[id];
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
-function setOutput() {
-    if (outputs) {
-        outputs.result?.set(result);
-    }
+function setOutput(v) {
+    outputs.result?.set(v, true);
 }
-$: result !== undefined && setOutput();
+$: result && outputs && setOutput(result);
 </script>
 
 {#if componentInput.type !== 'runnable'}

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

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
 declare const __propDef: {
     props: {
-        result?: any;
         componentInput: AppInput;
         id: string;
+        result: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -19,7 +19,7 @@ $: $worldStore?.outputsById[componentId]?.['loading']?.subscribe({
 <button
 	on:pointerdown|preventDefault|stopPropagation
 	on:click|preventDefault|stopPropagation={refresh}
-	class="center-center p-1 rounded border bg-white/60 z-40"
+	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/components/apps/components/helpers/RunnableComponent.svelte

@@ -1,14 +1,11 @@
-<script>import { page } from '$app/stores';
-import Alert from '../../../common/alert/Alert.svelte';
+<script>import Alert from '../../../common/alert/Alert.svelte';
 import SchemaForm from '../../../SchemaForm.svelte';
 import TestJobLoader from '../../../TestJobLoader.svelte';
 import { AppService } from '../../../../gen';
-import { workspaceStore } from '../../../../stores';
-import { emptySchema } from '../../../../utils';
+import { defaultIfEmptyString, emptySchema } from '../../../../utils';
 import { getContext, onMount } from 'svelte';
-import { fieldTypeToTsType, loadSchema, schemaToInputsSpec } from '../../utils';
+import { fieldTypeToTsType, schemaToInputsSpec } from '../../utils';
 import InputValue from './InputValue.svelte';
-import MissingConnectionWarning from './MissingConnectionWarning.svelte';
 import RefreshButton from './RefreshButton.svelte';
 // Component props
 export let id;
@@ -18,48 +15,46 @@ export let extraQueryParams = {};
 export let autoRefresh = true;
 export let result = undefined;
 export let forceSchemaDisplay = false;
-const { worldStore, runnableComponents } = getContext('AppEditorContext');
+const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs } = getContext('AppEditorContext');
 onMount(() => {
     if (autoRefresh) {
         $runnableComponents[id] = async () => {
             await executeComponent();
         };
     }
+    executeComponent();
 });
-let pagePath = $page.params.path;
 let args = {};
-let schema = undefined;
 let testIsLoading = false;
 let runnableInputValues = {};
-function setStaticInputsToArgs() {
-    let nargs = {};
-    Object.entries(fields ?? {}).forEach(([key, value]) => {
-        if (value.type === 'static') {
-            nargs[key] = value.value;
-        }
+let executeTimeout = undefined;
+function setDebouncedExecute() {
+    executeTimeout && clearTimeout(executeTimeout);
+    executeTimeout = setTimeout(() => {
+        executeComponent();
+    }, 200);
+}
+function computeStaticValues() {
+    return Object.entries(fields ?? {})
+        .filter(([k, v]) => v.type == 'static')
+        .map(([name, field]) => {
+        return [name, field['value']];
     });
-    if (JSON.stringify(args) != JSON.stringify(nargs)) {
-        args = nargs;
-    }
 }
-$: fields && setStaticInputsToArgs();
-function argMergedArgsValid(mergedArgs, testJobLoader) {
-    if (!fields) {
-        return false;
-    }
-    if (Object.keys(fields).length !==
-        Object.keys(mergedArgs).length - Object.keys(extraQueryParams).length) {
-        return false;
-    }
-    const areAllArgsValid = Object.values(mergedArgs).every((arg) => arg !== undefined && arg !== null);
-    if (areAllArgsValid && autoRefresh && testJobLoader) {
-        executeComponent();
-    }
-    return areAllArgsValid;
+let lazyStaticValues = computeStaticValues();
+let currentStaticValues = lazyStaticValues;
+$: fields && (currentStaticValues = computeStaticValues());
+$: if (JSON.stringify(currentStaticValues) != JSON.stringify(lazyStaticValues)) {
+    lazyStaticValues = currentStaticValues;
+    setDebouncedExecute();
 }
-$: isValid =
-    Object.keys(fields ?? {}).length == 0 ||
-        argMergedArgsValid({ ...extraQueryParams, ...runnableInputValues, ...args }, testJobLoader);
+$: fields && (lazyStaticValues = computeStaticValues());
+$: runnableInputValues &&
+    extraQueryParams &&
+    args &&
+    autoRefresh &&
+    testJobLoader &&
+    setDebouncedExecute();
 // Test job internal state
 let testJob = undefined;
 let testJobLoader = undefined;
@@ -67,21 +62,16 @@ $: outputs = $worldStore?.outputsById[id];
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
-async function loadSchemaFromTriggerable(workspace, path, runType) {
-    return loadSchema(workspace, path, runType) ?? emptySchema();
-}
+$: outputs?.loading?.set(testIsLoading);
 $: runnable?.type === 'runnableByName' && loadSchemaAndInputsByName();
-$: !schema && runnable?.type === 'runnableByPath' && loadSchemaAndInputsByPath();
 async function loadSchemaAndInputsByName() {
     if (runnable?.type === 'runnableByName') {
         const { inlineScript } = runnable;
         // Inline scripts directly provide the schema
         if (inlineScript) {
             const newSchema = inlineScript.schema;
-            schema = newSchema;
             const newFields = reloadInputs(newSchema);
             if (JSON.stringify(newFields) !== JSON.stringify(fields)) {
-                fields = newFields;
                 setTimeout(() => {
                     fields = newFields;
                 }, 0);
@@ -89,30 +79,12 @@ async function loadSchemaAndInputsByName() {
         }
     }
 }
-async function loadSchemaAndInputsByPath() {
-    if ($workspaceStore && runnable?.type === 'runnableByPath') {
-        // Remote schema needs to be loaded
-        const { path, runType } = runnable;
-        const newSchema = await loadSchemaFromTriggerable($workspaceStore, path, runType);
-        schema = newSchema;
-        let schemaWithoutExtraQueries = JSON.parse(JSON.stringify(schema));
-        // Remove extra query params from the schema, which are not directly configurable by the user
-        Object.keys(extraQueryParams).forEach((key) => {
-            delete schemaWithoutExtraQueries.properties[key];
-        });
-        fields = schemaToInputsSpec(schemaWithoutExtraQueries);
-    }
-}
 // When the schema is loaded, we need to update the inputs spec
 // in order to render the inputs the component panel
 function reloadInputs(schema) {
-    let schemaWithoutExtraQueries = JSON.parse(JSON.stringify(schema));
-    // Remove extra query params from the schema, which are not directly configurable by the user
-    Object.keys(extraQueryParams).forEach((key) => {
-        delete schemaWithoutExtraQueries.properties[key];
-    });
+    let schemaCopy = JSON.parse(JSON.stringify(schema));
     const result = {};
-    const newInputs = schemaToInputsSpec(schemaWithoutExtraQueries);
+    const newInputs = schemaToInputsSpec(schemaCopy);
     if (!fields) {
         return newInputs;
     }
@@ -134,9 +106,16 @@ function reloadInputs(schema) {
     });
     return result;
 }
-let schemaStripped = undefined;
-function stripSchema(schema, inputs) {
-    schemaStripped = JSON.parse(JSON.stringify(schema));
+$: schemaStripped = runnable && stripSchema(fields);
+function stripSchema(inputs) {
+    let schema = runnable?.type == 'runnableByName' ? runnable.inlineScript?.schema : runnable?.schema;
+    try {
+        schemaStripped = JSON.parse(JSON.stringify(schema));
+    }
+    catch (e) {
+        console.warn('Error loading schema');
+        return emptySchema();
+    }
     // Remove hidden static inputs
     Object.keys(inputs ?? {}).forEach((key) => {
         const input = inputs[key];
@@ -147,14 +126,8 @@ function stripSchema(schema, inputs) {
             delete schemaStripped.properties[key];
         }
     });
-    // Remove extra query params from schema
-    Object.keys(extraQueryParams).forEach((key) => {
-        if (schemaStripped !== undefined) {
-            delete schemaStripped.properties[key];
-        }
-    });
+    return schemaStripped;
 }
-$: schema && fields && stripSchema(schema, fields);
 $: disabledArgs = Object.keys(fields ?? {}).reduce((disabledArgsAccumulator, inputName) => {
     if (fields[inputName].type === 'static') {
         disabledArgsAccumulator = [...disabledArgsAccumulator, inputName];
@@ -162,17 +135,28 @@ $: disabledArgs = Object.keys(fields ?? {}).reduce((disabledArgsAccumulator, inp
     return disabledArgsAccumulator;
 }, []);
 async function executeComponent() {
-    if (!schema) {
-        return;
-    }
-    if (outputs?.loading.peak() === true) {
+    if (runnable?.type === 'runnableByName' && !runnable.inlineScript) {
         return;
     }
     outputs?.loading?.set(true);
-    await testJobLoader?.abstractRun(() => {
+    let njob = await testJobLoader?.abstractRun(() => {
+        const nonStaticRunnableInputs = {};
+        const staticRunnableInputs = {};
+        Object.keys(fields ?? {}).forEach((k) => {
+            let field = fields[k];
+            if (field?.type == 'static' && fields[k]) {
+                staticRunnableInputs[k] = field.value;
+            }
+            else if (field?.type == 'user') {
+                nonStaticRunnableInputs[k] = args[k];
+            }
+            else {
+                nonStaticRunnableInputs[k] = runnableInputValues[k];
+            }
+        });
         const requestBody = {
-            args: { ...extraQueryParams, ...args, ...runnableInputValues },
-            force_viewer_static_fields: {}
+            args: nonStaticRunnableInputs,
+            force_viewer_static_fields: !isEditor ? undefined : staticRunnableInputs
         };
         if (runnable?.type === 'runnableByName') {
             const { inlineScript } = runnable;
@@ -189,32 +173,42 @@ async function executeComponent() {
             requestBody['path'] = runType !== 'hubscript' ? `${runType}/${path}` : `script/${path}`;
         }
         return AppService.executeComponent({
-            workspace: $workspaceStore,
-            path: pagePath,
+            workspace,
+            path: defaultIfEmptyString(appPath, 'newapp'),
             requestBody
         });
     });
+    if (njob) {
+        $jobs = [...$jobs, { job: njob, component: id }];
+    }
 }
 export async function runComponent() {
     await executeComponent();
 }
+let lastStartedAt = Date.now();
 </script>
 
-{#each Object.keys(fields ?? {}) as key}
-	<InputValue
-		{id}
-		input={fields[key]}
-		bind:value={runnableInputValues[key]}
-		row={extraQueryParams['row'] ?? {}}
-	/>
+{#each Object.entries(fields ?? {}) as [key, v]}
+	{#if v.type != 'static' && v.type != 'user'}
+		<InputValue
+			{id}
+			input={fields[key]}
+			bind:value={runnableInputValues[key]}
+			row={extraQueryParams['row'] ?? {}}
+		/>
+	{/if}
 {/each}
 
 <TestJobLoader
-	on:done={() => {
+	workspaceOverride={workspace}
+	on:done={(e) => {
 		if (testJob && outputs) {
-			outputs.result?.set(testJob?.result)
-			outputs.loading?.set(false)
-			result = testJob.result
+			const startedAt = new Date(testJob.started_at).getTime()
+			if (startedAt > lastStartedAt) {
+				lastStartedAt = startedAt
+				outputs.result?.set(testJob?.result)
+				result = testJob.result
+			}
 		}
 	}}
 	bind:isLoading={testIsLoading}
@@ -222,41 +216,39 @@ export async function runComponent() {
 	bind:this={testJobLoader}
 />
 
-<div class="h-full flex flex-col">
-	{#if schemaStripped !== undefined && (autoRefresh || forceSchemaDisplay)}
-		<SchemaForm
-			schema={schemaStripped}
-			bind:args
-			{isValid}
-			{disabledArgs}
-			shouldHideNoInputs
-			noVariablePicker
-		/>
+<div class="h-full flex relative flex-row flex-wrap">
+	{#if autoRefresh === true}
+		<div class="flex absolute top-1 right-1">
+			<RefreshButton componentId={id} />
+		</div>
+	{/if}
+	{#if schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0 && (autoRefresh || forceSchemaDisplay)}
+		<div class="px-2 h-fit min-h-0">
+			<SchemaForm
+				compact
+				flexWrap
+				schema={schemaStripped}
+				bind:args
+				{disabledArgs}
+				shouldHideNoInputs
+				noVariablePicker
+			/>
+		</div>
 	{/if}
 
 	{#if !runnable && autoRefresh}
 		<Alert type="warning" size="xs" class="mt-2 px-1" title="Missing runnable">
 			Please select a runnable
 		</Alert>
-	{:else if autoRefresh === true}
-		<div class="flex absolute top-1 right-1">
-			<RefreshButton componentId={id} />
-		</div>
-
-		{#if isValid}
-			<slot />
-		{:else}
-			<Alert type="info" size="xs" class="mt-2 px-1" title="Missing inputs">
-				Please fill in all the inputs
-
-				{#each Object.keys(fields ?? {}) as key}
-					{#if fields[key].type === 'connected'}
-						<MissingConnectionWarning input={fields[key]} />
-					{/if}
-				{/each}
+	{:else if result?.error}
+		<div class="p-2">
+			<Alert type="error" title="Error during execution">
+				<pre title={result.error} class="text-2xs whitespace-pre-wrap">{result.error}</pre>
 			</Alert>
-		{/if}
+		</div>
 	{:else}
-		<slot />
+		<div class="grow min-w-1/2 min-h-[66%]">
+			<slot />
+		</div>
 	{/if}
 </div>

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

@@ -1,4 +1,5 @@
-<script>import { isScriptByNameDefined, isScriptByPathDefined } from '../../utils';
+<script>import { getContext, onMount } from 'svelte';
+import { isScriptByNameDefined, isScriptByPathDefined } from '../../utils';
 import NonRunnableComponent from './NonRunnableComponent.svelte';
 import RunnableComponent from './RunnableComponent.svelte';
 export let componentInput;
@@ -8,6 +9,10 @@ export let extraQueryParams = {};
 export let autoRefresh = true;
 export let runnableComponent = undefined;
 export let forceSchemaDisplay = false;
+const { staticExporter } = getContext('AppEditorContext');
+onMount(() => {
+    $staticExporter[id] = () => result;
+});
 function isRunnableDefined() {
     return isScriptByNameDefined(componentInput) || isScriptByPathDefined(componentInput);
 }

package/components/apps/components/selectInputs/AppSelect.svelte

@@ -24,6 +24,8 @@ const dispatch = createEventDispatcher();
 
 <AlignWrapper {horizontalAlignment} {verticalAlignment}>
 	<Select
+		--height="34px"
+		class="select"
 		on:clear={onChange}
 		on:change={onChange}
 		{items}

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

@@ -7,23 +7,25 @@ import AppButton from '../buttons/AppButton.svelte';
 import { classNames, isObject } from '../../../../utils';
 import DebouncedInput from '../helpers/DebouncedInput.svelte';
 import AppTableFooter from './AppTableFooter.svelte';
-import RefreshButton from '../helpers/RefreshButton.svelte';
 import { tableOptions } from './tableOptions';
 import Alert from '../../../common/alert/Alert.svelte';
 export let id;
 export let componentInput;
 export let configuration;
 export let actionButtons;
-export const staticOutputs = ['selectedRow', 'loading', 'result'];
+export const staticOutputs = ['selectedRow', 'loading', 'result', 'search'];
 $: result = [];
 let search = undefined;
 let searchValue = '';
-let pagination = undefined;
-let page = 1;
+let pagination = true;
+$: setSearch(searchValue);
+function setSearch(srch) {
+    outputs?.search?.set(srch);
+}
 const options = writable({
+    ...tableOptions,
     data: [],
-    columns: [],
-    ...tableOptions
+    columns: []
 });
 let table = createSvelteTable(options);
 const { worldStore, staticOutputs: staticOutputsStore } = getContext('AppEditorContext');
@@ -44,21 +46,21 @@ function setOptions(filteredResult) {
     }
     const headers = Array.from(new Set(result.flatMap((row) => Object.keys(row))));
     $options = {
+        ...tableOptions,
         data: filteredResult,
         columns: headers.map((header) => {
             return {
                 accessorKey: header,
                 cell: (info) => info.getValue()
             };
-        }),
-        ...tableOptions
+        })
     };
 }
 function searchInResult(result, searchValue) {
     if (searchValue === '') {
         return result;
     }
-    return result.filter((row) => Object.values(row).some((value) => value.toString().includes(searchValue)));
+    return result.filter((row) => Object.values(row).some((value) => value?.toString()?.includes(searchValue)));
 }
 function renderCell(x, props) {
     try {
@@ -68,11 +70,13 @@ function renderCell(x, props) {
         return undefined;
     }
 }
+function cellIsObject(x, props) {
+    return typeof x != 'string' && typeof x(props) == 'object';
+}
 let filteredResult = [];
 $: filteredResult && setOptions(filteredResult);
-$: extraQueryParams = search === 'Runnable' ? { search: searchValue, page } : { page, search: '' };
-$: search === 'Runnable' && (filteredResult = searchInResult(result, searchValue));
-$: (search === 'Runnable' || search === 'Disabled') && (filteredResult = result);
+$: search === 'By Component' && (filteredResult = searchInResult(result, searchValue));
+$: (search === 'By Runnable' || search === 'Disabled') && (filteredResult = result);
 $: outputs = $worldStore?.outputsById[id];
 function rerender() {
     table = createSvelteTable(options);
@@ -81,9 +85,8 @@ $: result && rerender();
 </script>
 
 <InputValue {id} input={configuration.search} bind:value={search} />
-<InputValue {id} input={configuration.pagination} bind:value={pagination} />
 
-<RunnableWrapper bind:componentInput {id} bind:result {extraQueryParams}>
+<RunnableWrapper bind:componentInput {id} bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
 		<div class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full">
 			{#if search !== 'Disabled'}
@@ -135,15 +138,17 @@ $: result && rerender();
 								)}
 							>
 								{#each row.getVisibleCells() as cell, index (index)}
-									{#if cell?.column?.columnDef?.header}
+									{#if cell?.column?.columnDef?.cell}
 										{@const context = cell?.getContext()}
 										{#if context}
 											{@const component = renderCell(cell.column.columnDef.cell, context)}
 											<td
 												on:click={() => toggleRow(row, rowIndex)}
-												class="p-4 whitespace-nowrap text-xs text-gray-900"
+												class="p-4 whitespace-pre-wrap truncate text-xs text-gray-900"
 											>
-												{#if component != undefined}
+												{#if typeof cell.column.columnDef.cell != 'string' && cellIsObject(cell.column.columnDef.cell, context)}
+													{JSON.stringify(cell.column.columnDef.cell(context), null, 4)}
+												{:else if component != undefined}
 													<svelte:component this={component} />
 												{/if}
 											</td>