windmill-components 1.84.6 → 1.86.0

package/components/apps/components/display/AppText.svelte

@@ -1,17 +1,17 @@
-<script>import { Clipboard } from 'lucide-svelte';
+<script>import { isCodeInjection } from '../../../flows/utils';
+import Tooltip from '../../../Tooltip.svelte';
+import { Clipboard } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import { get } from 'svelte/store';
+import { twMerge } from 'tailwind-merge';
 import { copyToClipboard } from '../../../../utils';
 import Button from '../../../common/button/Button.svelte';
 import Popover from '../../../Popover.svelte';
-import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import { twMerge } from 'tailwind-merge';
-import { getContext } from 'svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
-import Tooltip from '../../../Tooltip.svelte';
-import { get } from 'svelte/store';
-import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import { components } from '../../editor/component';
-import { isCodeInjection } from '../../../flows/utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
 export let horizontalAlignment = 'left';
@@ -20,8 +20,9 @@ export let configuration;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
+export let editorMode = false;
 let resolvedConfig = initConfig(components['textcomponent'].initialData.configuration, configuration);
-const { app, worldStore, mode } = getContext('AppViewerContext');
+const { app, worldStore, mode, componentControl } = getContext('AppViewerContext');
 const editorcontext = getContext('AppEditorContext');
 let result = undefined;
 if (componentInput?.type == 'template' && !isCodeInjection(componentInput.eval)) {
@@ -58,10 +59,60 @@ function getClasses() {
             return '';
     }
 }
+function getClassesByType() {
+    switch (resolvedConfig.style) {
+        case 'Title':
+            return 'h1-textarea';
+        case 'Subtitle':
+            return 'h3-textarea';
+        case 'Body':
+            return 'p-textarea';
+        case 'Caption':
+            return 'p-textarea';
+        case 'Label':
+            return 'label';
+        default:
+            return 'p-textarea';
+    }
+}
 let component = 'p';
 let classes = '';
+function getHorizontalAlignement() {
+    if (horizontalAlignment) {
+        switch (horizontalAlignment) {
+            case 'left':
+                return '!text-left';
+            case 'center':
+                return '!text-center';
+            case 'right':
+                return '!text-right';
+            default:
+                return '!text-left';
+        }
+    }
+}
 $: resolvedConfig.style && (component = getComponent());
 $: resolvedConfig.style && (classes = getClasses());
+$: initialValue = componentInput?.type == 'template' ? componentInput.eval : '';
+$: editableValue = initialValue ? JSON.parse(JSON.stringify(initialValue)) : '';
+let rows = 1;
+function onInput(e) {
+    const target = e.target;
+    if (target.value) {
+        $componentControl[id]?.setCode?.(target.value);
+        editableValue;
+        autosize();
+    }
+}
+function autosize() {
+    const el = document.getElementById(`text-${id}`);
+    setTimeout(() => {
+        if (el !== null) {
+            el.style.cssText = 'height:auto; padding:0';
+            el.style.cssText = 'height:' + el.scrollHeight + 'px';
+        }
+    }, 0);
+}
 </script>
 
 {#each Object.keys(components['textcomponent'].initialData.configuration) as key (key)}
@@ -74,58 +125,99 @@ $: resolvedConfig.style && (classes = getClasses());
 {/each}
 
 <RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
-	<div class="h-full w-full overflow-hidden">
-		<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-			{#if !result || result === ''}
-				<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
-					No text
-				</div>
-			{:else}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<div
-					class="flex flex-wrap gap-2 pb-0.5  {$mode === 'dnd' && componentInput?.type == 'template'
-						? 'cursor-text'
-						: ''}"
-					on:click={() => {
-						if ($mode === 'dnd' && componentInput?.type == 'template') {
-							let ontextfocus = editorcontext?.ontextfocus
-							if (ontextfocus) {
-								get(ontextfocus)?.()
-							}
+	<div
+		class="h-full w-full overflow-hidden"
+		on:dblclick={() => {
+			if (!editorMode) {
+				editorMode = true
+				document.getElementById(`text-${id}`)?.focus()
+				autosize()
+			}
+		}}
+		on:keydown|stopPropagation
+	>
+		{#if editorMode && componentInput?.type == 'template'}
+			<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+				<textarea
+					class={twMerge(
+						'whitespace-pre-wrap !outline-none !border-0 !bg-transparent !resize-none !overflow-hidden !ring-0 !p-0 text-center',
+						$app.css?.['textcomponent']?.['text']?.class,
+						customCss?.text?.class,
+						classes,
+						getClasses(),
+						getClassesByType(),
+						getHorizontalAlignement()
+					)}
+					on:pointerdown|stopPropagation
+					style={[$app.css?.['textcomponent']?.['text']?.style, customCss?.text?.style].join(';')}
+					id={`text-${id}`}
+					on:pointerenter={() => {
+						const elem = document.getElementById(`text-${id}`)
+						if (elem) {
+							elem.focus()
 						}
 					}}
-				>
-					<svelte:element
-						this={component}
-						class={twMerge(
-							'whitespace-pre-wrap',
-							$app.css?.['textcomponent']?.['text']?.class,
-							customCss?.text?.class,
-							classes
-						)}
-						style={[$app.css?.['textcomponent']?.['text']?.style, customCss?.text?.style].join(';')}
+					{rows}
+					on:input={onInput}
+					value={editableValue}
+				/>
+			</AlignWrapper>
+		{:else}
+			<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+				{#if !result || result === ''}
+					<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
+						No text
+					</div>
+				{:else}
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<div
+						class="flex flex-wrap gap-2 pb-0.5 {$mode === 'dnd' &&
+						componentInput?.type == 'template'
+							? 'cursor-text'
+							: ''}"
+						on:click={() => {
+							if ($mode === 'dnd' && componentInput?.type == 'template') {
+								let ontextfocus = editorcontext?.ontextfocus
+								if (ontextfocus) {
+									get(ontextfocus)?.()
+								}
+							}
+						}}
 					>
-						{String(result)}
-						{#if resolvedConfig.tooltip != ''}
-							<Tooltip>{resolvedConfig.tooltip}</Tooltip>
-						{/if}
-						{#if resolvedConfig.copyButton && result}
-							<Popover notClickable>
-								<Button
-									variant="border"
-									size="xs"
-									color="dark"
-									btnClasses="!p-1"
-									on:click={() => copyToClipboard(result)}
-								>
-									<Clipboard size={14} strokeWidth={2} />
-								</Button>
-								<svelte:fragment slot="text">Copy to clipboard</svelte:fragment>
-							</Popover>
-						{/if}
-					</svelte:element>
-				</div>
-			{/if}
-		</AlignWrapper>
+						<svelte:element
+							this={component}
+							class={twMerge(
+								'whitespace-pre-wrap',
+								$app.css?.['textcomponent']?.['text']?.class,
+								customCss?.text?.class,
+								classes
+							)}
+							style={[$app.css?.['textcomponent']?.['text']?.style, customCss?.text?.style].join(
+								';'
+							)}
+						>
+							{String(result)}
+							{#if resolvedConfig.tooltip && resolvedConfig.tooltip != ''}
+								<Tooltip>{resolvedConfig.tooltip}</Tooltip>
+							{/if}
+							{#if resolvedConfig.copyButton && result}
+								<Popover notClickable>
+									<Button
+										variant="border"
+										size="xs"
+										color="dark"
+										btnClasses="!p-1"
+										on:click={() => copyToClipboard(result)}
+									>
+										<Clipboard size={14} strokeWidth={2} />
+									</Button>
+									<svelte:fragment slot="text">Copy to clipboard</svelte:fragment>
+								</Popover>
+							{/if}
+						</svelte:element>
+					</div>
+				{/if}
+			</AlignWrapper>
+		{/if}
 	</div>
 </RunnableWrapper>

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

@@ -11,8 +11,12 @@ declare const __propDef: {
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'textcomponent'> | undefined;
         render: boolean;
+        editorMode?: boolean | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -1,20 +1,20 @@
-<script>import AgGridSvelte from 'ag-grid-svelte/AgGridSvelte.svelte';
-import 'ag-grid-community/styles/ag-grid.css';
+<script>import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
+import AgGridSvelte from 'ag-grid-svelte/AgGridSvelte.svelte';
+import { isObject } from '../../../../../utils';
 import { getContext, onMount } from 'svelte';
 import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
-import { isObject } from '../../../../../utils';
-import Alert from '../../../../common/alert/Alert.svelte';
 import { initConfig, initOutput } from '../../../editor/appUtils';
-import ResolveConfig from '../../helpers/ResolveConfig.svelte';
 import { components } from '../../../editor/component';
+import Alert from '../../../../common/alert/Alert.svelte';
+import ResolveConfig from '../../helpers/ResolveConfig.svelte';
 export let id;
 export let componentInput;
 export let configuration;
 export let initializing = undefined;
 export let render;
 let result = undefined;
-const { worldStore, selectedComponent } = getContext('AppViewerContext');
+const { worldStore, selectedComponent, componentControl } = getContext('AppViewerContext');
 let resolvedConfig = initConfig(components['aggridcomponent'].initialData.configuration, configuration);
 let outputs = initOutput($worldStore, id, {
     selectedRowIndex: 0,
@@ -22,13 +22,14 @@ let outputs = initOutput($worldStore, id, {
     result: [],
     loading: false,
     page: 0,
-    newChange: { row: 0, column: '', value: undefined }
+    newChange: { row: 0, column: '', value: undefined },
+    ready: undefined
 });
 let selectedRowIndex = -1;
-function toggleRow(row, rowIndex) {
-    if (selectedRowIndex !== rowIndex) {
+function toggleRow(rowIndex) {
+    if (selectedRowIndex !== rowIndex && result) {
         selectedRowIndex = rowIndex;
-        outputs?.selectedRow.set(row.original);
+        outputs?.selectedRow.set(result[rowIndex]);
         outputs?.selectedRowIndex.set(rowIndex);
     }
 }
@@ -42,7 +43,7 @@ $: selectedRowIndex === -1 &&
     // We need to wait until the component is mounted so the world is created
     mounted &&
     outputs &&
-    toggleRow({ original: result[0] }, 0);
+    toggleRow(0);
 $: outputs?.result?.set(result ?? []);
 let clientHeight;
 let clientWidth;
@@ -75,7 +76,7 @@ function onCellValueChanged(event) {
 <RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing 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"
+			class="border border-gray-300 shadow-sm divide-y divide-gray-300 flex flex-col h-full"
 			bind:clientHeight
 			bind:clientWidth
 		>
@@ -97,6 +98,18 @@ function onCellValueChanged(event) {
 						onPaginationChanged={(event) => {
 							outputs?.page.set(event.api.paginationGetCurrentPage())
 						}}
+						rowSelection="single"
+						suppressRowDeselection={true}
+						onSelectionChanged={(e) => {
+							const row = e.api.getSelectedNodes()?.[0]?.rowIndex
+							if (row != undefined) {
+								toggleRow(row)
+							}
+						}}
+						onGridReady={(e) => {
+							outputs?.ready.set(true)
+							$componentControl[id] = { agGrid: { api: e.api, columnApi: e.columnApi } }
+						}}
 					/>
 				{/key}
 			</div>

package/components/apps/components/display/table/AppAggridTable.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
-import type { RichConfigurations } from '../../../types';
 import type { AppInput } from '../../../inputType';
+import type { RichConfigurations } from '../../../types';
 declare const __propDef: {
     props: {
         id: string;

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

@@ -1,5 +1,4 @@
 <script>import { getContext, onMount } from 'svelte';
-import InputValue from '../../helpers/InputValue.svelte';
 import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
 import { writable } from 'svelte/store';
 import { createSvelteTable, flexRender } from '@tanstack/svelte-table';
@@ -251,7 +250,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">
 											{#each actionButtons as actionButton, actionIndex (actionButton?.id)}
 												<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 												<div

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

@@ -2,7 +2,6 @@
 import { faDownload } from '@fortawesome/free-solid-svg-icons';
 import { ChevronLeft, ChevronRight } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
-import { tableOptions } from './tableOptions';
 export let result;
 export let manualPagination;
 export let pageSize;

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

@@ -1,4 +1,5 @@
 <script>import { twMerge } from 'tailwind-merge';
+import { tailwindHorizontalAlignment, tailwindVerticalAlignment } from '../../utils';
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let noWFull = false;
@@ -6,26 +7,6 @@ let c = '';
 export { c as class };
 export let style = '';
 export let render = true;
-function tailwindHorizontalAlignment(alignment) {
-    if (!alignment)
-        return '';
-    const classes = {
-        left: 'justify-start',
-        center: 'justify-center',
-        right: 'justify-end'
-    };
-    return classes[alignment];
-}
-function tailwindVerticalAlignment(alignment) {
-    if (!alignment)
-        return '';
-    const classes = {
-        top: 'items-start',
-        center: 'items-center',
-        bottom: 'items-end'
-    };
-    return classes[alignment];
-}
 $: classes = twMerge('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '', c);
 </script>
 

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

@@ -1,16 +1,22 @@
-<script>import { getContext } from 'svelte';
+<script>import { getContext, onMount } from 'svelte';
 import { initOutput } from '../../editor/appUtils';
 import RunnableComponent from './RunnableComponent.svelte';
 export let id;
 export let name;
 export let inlineScript;
 export let fields;
-export let doNotRecomputeOnInputChanged;
+export let recomputeOnInputChanged;
 export let recomputableByRefreshButton;
-let result = undefined;
-const { worldStore } = getContext('AppViewerContext');
+export let noBackendValue = undefined;
+const { worldStore, staticExporter, noBackend } = getContext('AppViewerContext');
+let result = noBackend ? noBackendValue : undefined;
+onMount(() => {
+    $staticExporter[id] = () => {
+        return result;
+    };
+});
 let outputs = initOutput($worldStore, id, {
-    result: undefined,
+    result: result,
     loading: false
 });
 </script>
@@ -20,7 +26,7 @@ let outputs = initOutput($worldStore, id, {
 	{id}
 	{fields}
 	autoRefresh={true}
-	{doNotRecomputeOnInputChanged}
+	{recomputeOnInputChanged}
 	bind:result
 	transformer={undefined}
 	runnable={{

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

@@ -7,8 +7,9 @@ declare const __propDef: {
         name: string;
         inlineScript: InlineScript | undefined;
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
-        doNotRecomputeOnInputChanged: boolean;
+        recomputeOnInputChanged: boolean;
         recomputableByRefreshButton: boolean;
+        noBackendValue?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/InitializeComponent.svelte

@@ -0,0 +1,12 @@
+<script>import { getContext, onDestroy, onMount } from 'svelte';
+export let id;
+const { initialized } = getContext('AppViewerContext');
+onMount(() => {
+    if (!$initialized.initializedComponents.includes(id)) {
+        $initialized.initializedComponents = [...$initialized.initializedComponents, id];
+    }
+});
+onDestroy(() => {
+    $initialized.initializedComponents = $initialized.initializedComponents.filter((c) => c !== id);
+});
+</script>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InitializeComponentProps = typeof __propDef.props;
+export type InitializeComponentEvents = typeof __propDef.events;
+export type InitializeComponentSlots = typeof __propDef.slots;
+export default class InitializeComponent extends SvelteComponentTyped<InitializeComponentProps, InitializeComponentEvents, InitializeComponentSlots> {
+}
+export {};

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

@@ -26,8 +26,14 @@ $: if (input && !deepEqual(input, lastInput)) {
 const { worldStore, state, mode } = getContext('AppViewerContext');
 $: stateId = $worldStore?.stateId;
 let timeout = undefined;
+let firstDebounce = true;
 const debounce_ms = 50;
 function debounce(cb) {
+    if (firstDebounce) {
+        firstDebounce = false;
+        cb();
+        return;
+    }
     if (timeout) {
         clearTimeout(timeout);
     }

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

@@ -1,7 +1,6 @@
-<script>import { Loader2 } from 'lucide-svelte';
-import { getContext } from 'svelte';
-import { fade } from 'svelte/transition';
+<script>import { getContext } from 'svelte';
 import InputValue from './InputValue.svelte';
+import InitializeComponent from './InitializeComponent.svelte';
 export let componentInput;
 export let id;
 export let result;
@@ -15,6 +14,8 @@ function setOutput(v) {
 $: result && outputs && setOutput(result);
 </script>
 
+<InitializeComponent {id} />
+
 {#if componentInput.type !== 'runnable'}
 	<InputValue {id} input={componentInput} bind:value={result} />
 {/if}

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

@@ -6,10 +6,11 @@ import { AppService } from '../../../../gen';
 import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '../../../../utils';
 import { deepEqual } from 'fast-equals';
 import { Bug } from 'lucide-svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher, getContext, onDestroy } from 'svelte';
 import { computeGlobalContext, eval_like } from './eval';
 import InputValue from './InputValue.svelte';
 import RefreshButton from './RefreshButton.svelte';
+import { selectId } from '../../editor/appUtils';
 // Component props
 export let id;
 export let fields;
@@ -25,17 +26,25 @@ export let initializing = undefined;
 export let render;
 export let outputs;
 export let extraKey = '';
-export let doNotRecomputeOnInputChanged = false;
+export let recomputeOnInputChanged = true;
 export let loading = false;
 export let recomputableByRefreshButton = true;
-const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId, state, componentControl } = getContext('AppViewerContext');
+export let refreshOnStart = false;
+const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId, state, componentControl, initialized, selectedComponent, app, connectingInput } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 $runnableComponents[id] = {
     autoRefresh: autoRefresh && recomputableByRefreshButton,
+    refreshOnStart,
     cb: async (inlineScript) => {
         await executeComponent(true, inlineScript);
     }
 };
+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;
@@ -68,8 +77,8 @@ $: (runnableInputValues || extraQueryParams || args) &&
 $: refreshOn =
     runnable && runnable.type === 'runnableByName' ? runnable.inlineScript?.refreshOn ?? [] : [];
 function refreshIfAutoRefresh(_src) {
-    const refreshEnabled = autoRefresh && (!doNotRecomputeOnInputChanged || refreshOn?.length > 0);
-    if (refreshEnabled && $worldStore.initialized) {
+    const refreshEnabled = autoRefresh && ((recomputeOnInputChanged ?? true) || refreshOn?.length > 0);
+    if (refreshEnabled && $initialized.initialized) {
         setDebouncedExecute();
     }
 }
@@ -113,6 +122,7 @@ function generateNextFrontendJobId() {
     return `${prefix}#${nextJobNumber}`;
 }
 async function executeComponent(noToast = false, inlineScriptOverride) {
+    console.debug('execute', id);
     if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
         loading = true;
         try {
@@ -241,6 +251,10 @@ async function setResult(res) {
         $errorByComponent = $errorByComponent;
     }
 }
+function handleInputClick(e) {
+    const event = e;
+    !$connectingInput.opened && selectId(event, id, selectedComponent, $app);
+}
 </script>
 
 {#each Object.entries(fields ?? {}) as [key, v] (key)}
@@ -287,7 +301,11 @@ async function setResult(res) {
 	<div class="h-full flex relative flex-row flex-wrap {wrapperClass}" style={wrapperStyle}>
 		{#if (autoRefresh || forceSchemaDisplay) && schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0}
 			<div class="px-2 h-fit min-h-0">
-				<LightweightSchemaForm schema={schemaStripped} bind:args />
+				<LightweightSchemaForm
+					schema={schemaStripped}
+					bind:args
+					on:inputClicked={handleInputClick}
+				/>
 			</div>
 		{/if}
 

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

@@ -23,9 +23,10 @@ declare const __propDef: {
             loading: Output<boolean>;
         };
         extraKey?: string | undefined;
-        doNotRecomputeOnInputChanged?: boolean | undefined;
+        recomputeOnInputChanged?: boolean | undefined;
         loading?: boolean | undefined;
         recomputableByRefreshButton?: boolean | undefined;
+        refreshOnStart?: boolean | undefined;
         runComponent?: (() => Promise<void>) | undefined;
     };
     events: {