windmill-components 1.21.0 → 1.28.1

package/components/FlowEditor.svelte

@@ -1,142 +1,89 @@
-<script>import { FlowModuleValue } from '../gen';
+<script>import { ScheduleService } from '../gen';
+import { workspaceStore } from '../stores';
+import { pathIsEmpty } from '../utils';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { Button } from 'flowbite-svelte';
 import Icon from 'svelte-awesome';
-import FlowPreview from './FlowPreview.svelte';
-import CopyFirstStepSchema from './flows/CopyFirstStepSchema.svelte';
-import { addModule, flowStore } from './flows/flowStore';
+import FlowInput from './flows/FlowInput.svelte';
+import FlowSettings from './flows/FlowSettings.svelte';
+import { addModule, flowStore, mode } from './flows/flowStore';
 import ModuleStep from './ModuleStep.svelte';
-import Path from './Path.svelte';
-import RadioButtonV2 from './RadioButtonV2.svelte';
-import SchemaEditor from './SchemaEditor.svelte';
-import Required from './Required.svelte';
-import { pathIsEmpty } from '../utils';
+import Tooltip from './Tooltip.svelte';
 export let pathError = '';
 export let initialPath = '';
+export let scheduleArgs = {};
+export let scheduleEnabled = false;
+export let scheduleCron = '0 */5 * * *';
+let scheduleLoaded = false;
+async function loadSchedule() {
+    if (!scheduleLoaded) {
+        scheduleLoaded = true;
+        const existsSchedule = await ScheduleService.existsSchedule({
+            workspace: $workspaceStore ?? '',
+            path: initialPath
+        });
+        if (existsSchedule) {
+            const schedule = await ScheduleService.getSchedule({
+                workspace: $workspaceStore ?? '',
+                path: initialPath
+            });
+            scheduleEnabled = schedule.enabled;
+            scheduleCron = schedule.schedule;
+            scheduleArgs = schedule.args ?? {};
+        }
+    }
+}
+$: if ($flowStore && $workspaceStore && initialPath != '') {
+    loadSchedule();
+}
 let open = 0;
 let args = {};
-export let mode = $flowStore?.value.modules[1]?.value.type == FlowModuleValue.type.FORLOOPFLOW ? 'pull' : 'push';
-$: numberOfSteps = $flowStore?.value.modules.length - 1;
 </script>
 
-<div class="flow-root bg-gray-50 rounded-xl border  border-gray-200">
-	<ul class="relative -mt-10">
-		<span class="absolute top-0 left-1/2  h-full w-1 bg-gray-400" aria-hidden="true" />
-		<div class="relative">
-			<li class="flex flex-row flex-shrink max-w-full mx-auto mt-20">
-				<div
-					class="bg-white border border-gray xl-rounded shadow-lg w-full max-w-4xl mx-4 md:mx-auto p-4"
-				>
-					<div class="mb-8 p-4">
-						<Path
-							bind:error={pathError}
-							bind:path={$flowStore.path}
-							{initialPath}
-							namePlaceholder="example/my/flow"
-							kind="flow"
-						>
-							<div slot="ownerToolkit" class="text-gray-700 text-2xs">
-								Flow permissions depend on their path. Select the group <span class="font-mono"
-									>all</span
-								>
-								to share your flow, and <span class="font-mono">user</span> to keep it private.
-								<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
-							</div>
-						</Path>
-
-						<label class="block mt-4">
-							<span class="text-gray-700">Summary <Required required={false} /></span>
-							<textarea
-								bind:value={$flowStore.summary}
-								class="
-					mt-1
-					block
-					w-full
-					rounded-md
-					border-gray-300
-					shadow-sm
-					focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
-					"
-								placeholder="A very short summary of the flow displayed when the flow is listed"
-								rows="1"
-							/>
-						</label>
-					</div>
-					<RadioButtonV2
-						options={[
-							[
-								{
-									title: 'Push',
-									desc: 'Trigger this flow through the generated UI, a manual schedule or by calling the associated webhook'
-								},
-								'push'
-							],
-							[
-								{
-									title: 'Pull',
-									desc: 'The first module of this flow is a trigger script whose purpose is to pull data from an external source and return all new items since last run. This flow is meant to be scheduled very regularly to reduce latency to react to new events. It will trigger the rest of the flow once per item. If no new items, the flow will be skipped.'
-								},
-								'pull'
-							]
-						]}
-						bind:value={mode}
-					/>
-				</div>
-			</li>
-			<li class="flex flex-row flex-shrink max-w-full mx-auto mt-20">
-				<div class="bg-white border border-gray xl-rounded shadow-lg w-full mx-4 xl:mx-20">
-					<div
-						class="flex items-center justify-between flex-wra px-4 py-5 border-b border-gray-200 sm:px-6"
-					>
-						<h3 class="text-lg leading-6 font-medium text-gray-900">Flow Input</h3>
-						<CopyFirstStepSchema />
-					</div>
-					<div class="p-4">
-						<SchemaEditor schema={$flowStore.schema} />
-						<div class="my-4" />
-						<FlowPreview {mode} flow={$flowStore} i={numberOfSteps} bind:args />
-					</div>
-				</div>
-			</li>
-			{#each $flowStore?.value.modules as mod, i}
-				<li class="relative mt-16">
-					<div class="relative flex justify-center">
-						<button
-							class="default-button h-10 w-10 shadow-blue-600/40  border-blue-600 shadow"
-							on:click={() => {
-								addModule(i)
-								open = i
-							}}
-						>
-							<Icon class="text-white mb-1" data={faPlus} />
-						</button>
-					</div>
-				</li>
-				<ModuleStep bind:open bind:mod bind:args {i} {mode} />
-			{/each}
-			<li class="relative m-20 ">
-				<div class="relative flex justify-center">
-					<button
-						disabled={pathIsEmpty($flowStore.path)}
-						class="default-button h-10 w-10 shadow"
-						on:click={() => {
-							addModule()
-							open = $flowStore?.value.modules.length - 1
-						}}
-					>
-						<Icon class="text-white mb-1" data={faPlus} />
-						Add step {pathIsEmpty($flowStore.path) ? '(pick a name first!)' : ''}
-					</button>
+{#if $flowStore}
+	<div class="flex space-y-8 flex-col items-center line">
+		<FlowSettings
+			bind:pathError
+			bind:initialPath
+			bind:scheduleArgs
+			bind:scheduleCron
+			bind:scheduleEnabled
+			bind:open
+		/>
+		<FlowInput />
+		{#each $flowStore?.value.modules as mod, i}
+			<ModuleStep bind:open bind:mod bind:args {i} mode={$mode} />
+			{#if i == 0 && $mode == 'pull'}
+				<div class="flex justify-center bg-white shadow p-2">
+					Starting from here, the flow for loop over items from step 1's result above &nbsp;
+					<Tooltip>
+						This flow being in 'Pull' mode, the rest of the flow will for loop over the list of
+						items returned by the trigger script right above. Retrieve the item value using
+						`flow_input._value`
+					</Tooltip>
 				</div>
-			</li>
-		</div>
-	</ul>
-</div>
-<div class="py-10 bg-white" />
+			{/if}
+		{/each}
+		<Button
+			disabled={pathIsEmpty($flowStore.path)}
+			class="blue-button"
+			on:click={() => {
+				addModule()
+				open = $flowStore?.value.modules.length - 1
+			}}
+		>
+			<Icon class="text-white mr-2" data={faPlus} />
+			Add step {pathIsEmpty($flowStore?.path) ? '(pick a name first!)' : ''}
+		</Button>
+	</div>
+{:else}
+	<h3>Loading flow</h3>
+{/if}
 
 <style>
-	.shadow:not([disabled]) {
-    --tw-border-opacity: 1;
-    border-color: rgb(37 99 235 / var(--tw-border-opacity));
-    --tw-shadow-color: rgb(37 99 235 / 0.4);
-    --tw-shadow: var(--tw-shadow-colored)
-}</style>
+	.line {
+		background-image: linear-gradient(#e5e7eb, #e5e7eb);
+		background-size: 2px 100%;
+		background-repeat: no-repeat;
+		background-position: center center;
+	}</style>

package/components/FlowEditor.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import { type FlowMode } from './flows/flowStore';
 declare const __propDef: {
     props: {
         pathError?: string | undefined;
         initialPath?: string | undefined;
-        mode?: FlowMode | undefined;
+        scheduleArgs?: Record<string, any> | undefined;
+        scheduleEnabled?: boolean | undefined;
+        scheduleCron?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowJobResult.svelte

@@ -14,7 +14,7 @@ export let job;
 		</div>
 		<div>
 			<ChevronButton text="logs" viewOptions={true}>
-				<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-lg">
+				<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border mt-1">
 					<pre class="w-full">{job.logs}</pre>
 				</div>
 			</ChevronButton>

package/components/FlowPreview.svelte

@@ -1,11 +1,11 @@
-<script>import { InputTransform, Job, JobService } from '../gen';
+<script>import { Job, JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import { sendUserToast, truncateRev } from '../utils';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher, onDestroy } from 'svelte';
 import Icon from 'svelte-awesome';
 import FlowJobResult from './FlowJobResult.svelte';
-import { flowToMode } from './flows/utils';
+import { flowToMode, runFlowPreview } from './flows/utils';
 import FlowStatusViewer from './FlowStatusViewer.svelte';
 import RunForm from './RunForm.svelte';
 import Tabs from './Tabs.svelte';
@@ -19,23 +19,17 @@ let stepArgs = {};
 let tab = 'upto';
 let viewPreview = false;
 let intervalId;
-let uptoText = i == flow.value.modules.length - 1 ? 'Preview whole flow' : 'Preview up to this step';
+let uptoText = i >= flow.value.modules.length - 1 ? 'Preview whole flow' : 'Preview up to this step';
 let job;
 let jobs = [];
 let jobId;
+$: dispatch('change', jobs);
 export async function runPreview(args) {
     viewPreview = true;
     intervalId && clearInterval(intervalId);
     let newFlow = flowToMode(flow, mode);
     newFlow = tab == 'upto' ? truncateFlow(newFlow) : extractStep(newFlow);
-    jobId = await JobService.runFlowPreview({
-        workspace: $workspaceStore ?? '',
-        requestBody: {
-            args,
-            value: newFlow.value,
-            path: newFlow.path
-        }
-    });
+    jobId = await runFlowPreview(args, newFlow);
     jobs = [];
     intervalId = setInterval(loadJob, 1000);
     sendUserToast(`started preview ${truncateRev(jobId, 10)}`);
@@ -51,7 +45,7 @@ function extractStep(flow) {
     localFlow.schema = schemas[i];
     stepArgs = {};
     Object.entries(flow.value.modules[i].input_transform).forEach((x) => {
-        if (x[1].type == InputTransform.type.STATIC) {
+        if (x[1].type == 'static') {
             stepArgs[x[0]] = x[1].value;
         }
     });
@@ -64,7 +58,6 @@ async function loadJob() {
             //only CompletedJob has success property
             clearInterval(intervalId);
         }
-        dispatch('change', job);
     }
     catch (err) {
         sendUserToast(err, true);
@@ -75,21 +68,22 @@ onDestroy(() => {
 });
 </script>
 
-<h2 class="flex justify-center">
-	<button
-		class="default-button	"
-		on:click={() => {
-			viewPreview = !viewPreview
-		}}
-	>
+<button
+	class="w-full rounded border-1 border border-gray-200"
+	on:click={() => {
+		viewPreview = !viewPreview
+	}}
+>
+	<h2 class="flex justify-center text-gray-600">
 		<div>
-			Preview mode<Icon class="ml-1" data={viewPreview ? faChevronUp : faChevronDown} scale={1} />
+			Preview
+			<Icon class="ml-1" data={viewPreview ? faChevronUp : faChevronDown} scale={1} />
 		</div>
-	</button>
-</h2>
+	</h2>
+</button>
 
 {#if viewPreview}
-	{#if i != flow.value.modules.length - 1}
+	{#if i != flow.value.modules.length}
 		<Tabs
 			tabs={[
 				['upto', uptoText],

package/components/FlowPreviewContent.svelte

@@ -0,0 +1,68 @@
+<script>import { Job, JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import { sendUserToast, truncateRev } from '../utils';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
+import { Button } from 'flowbite-svelte';
+import { createEventDispatcher, onDestroy } from 'svelte';
+import Icon from 'svelte-awesome';
+import FlowJobResult from './FlowJobResult.svelte';
+import { flowStore } from './flows/flowStore';
+import { runFlowPreview } from './flows/utils';
+import FlowStatusViewer from './FlowStatusViewer.svelte';
+import SchemaForm from './SchemaForm.svelte';
+const dispatch = createEventDispatcher();
+export let args = {};
+let intervalId;
+let job;
+let jobs = [];
+let jobId;
+let isValid = false;
+$: dispatch('change', jobs);
+export async function runPreview(args) {
+    intervalId && clearInterval(intervalId);
+    jobId = await runFlowPreview(args, $flowStore);
+    jobs = [];
+    intervalId = setInterval(loadJob, 1000);
+    sendUserToast(`started preview ${truncateRev(jobId, 10)}`);
+}
+async function loadJob() {
+    try {
+        job = await JobService.getJob({ workspace: $workspaceStore, id: jobId });
+        if (job?.type == 'CompletedJob') {
+            clearInterval(intervalId);
+        }
+    }
+    catch (err) {
+        sendUserToast(err, true);
+    }
+}
+onDestroy(() => {
+    intervalId && clearInterval(intervalId);
+});
+</script>
+
+<div class="flex flex-col space-y-4 h-screen bg-white ">
+	<div class="flex flex-col space-y-4 p-6 border-b-2">
+		<div class="flex justify-between">
+			<h3 class="text-lg leading-6 font-bold text-gray-900">Flow Preview</h3>
+
+			<Button color="alternative" on:click={() => dispatch('close')}>
+				<Icon data={faClose} />
+			</Button>
+		</div>
+		<SchemaForm schema={$flowStore.schema} bind:isValid bind:args />
+		<Button disabled={!isValid} class="blue-button" on:click={() => runPreview(args)} size="md">
+			Preview
+		</Button>
+	</div>
+	<div class="h-full overflow-y-auto mb-16">
+		{#if job}
+			<div class="w-full">
+				<FlowStatusViewer {job} bind:jobs />
+			</div>
+			{#if `result` in job}
+				<FlowJobResult {job} />
+			{/if}
+		{/if}
+	</div>
+</div>

package/components/FlowPreviewContent.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        args?: Record<string, any> | undefined;
+        runPreview?: ((args: Record<string, any>) => Promise<void>) | undefined;
+    };
+    events: {
+        close: CustomEvent<any>;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowPreviewContentProps = typeof __propDef.props;
+export declare type FlowPreviewContentEvents = typeof __propDef.events;
+export declare type FlowPreviewContentSlots = typeof __propDef.slots;
+export default class FlowPreviewContent extends SvelteComponentTyped<FlowPreviewContentProps, FlowPreviewContentEvents, FlowPreviewContentSlots> {
+    get runPreview(): (args: Record<string, any>) => Promise<void>;
+}
+export {};

package/components/FlowStatusViewer.svelte

@@ -1,32 +1,59 @@
-<script>import { faHourglassHalf, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { scriptPathToHref, truncateRev } from '../utils';
+<script>import { scriptPathToHref, truncateRev } from '../utils';
+import { faHourglassHalf, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import { check } from 'svelte-awesome/icons';
-import { CompletedJob, FlowModuleValue, FlowStatusModule, JobService, QueuedJob } from '../gen';
+import { CompletedJob, FlowStatusModule, Job, JobService, QueuedJob } from '../gen';
 import { workspaceStore } from '../stores';
-import JobStatus from './JobStatus.svelte';
 import FlowJobResult from './FlowJobResult.svelte';
+import JobStatus from './JobStatus.svelte';
 export let job;
 export let jobs = [];
+export let fullyRetrieved = -1;
+let lastJobid;
 let forloop_selected = '';
-function loadResults() {
+let pres = {};
+async function loadResults() {
+    if (!('success' in job)) {
+        const mods = job?.flow_status?.modules;
+        if (mods) {
+            let i = mods?.findIndex((x) => x.type == FlowStatusModule.type.IN_PROGRESS);
+            if (i != -1) {
+                let last = mods[i];
+                jobs[i] = await JobService.getJob({
+                    workspace: $workspaceStore ?? '',
+                    id: last.job ?? ''
+                });
+                jobs = jobs;
+                pres[i]?.scroll({ top: pres[i]?.scrollHeight, behavior: 'smooth' });
+            }
+        }
+    }
+    if (job.id != lastJobid) {
+        lastJobid = job.id;
+        jobs = [];
+        fullyRetrieved = -1;
+    }
     job?.flow_status?.modules?.forEach(async (x, i) => {
-        if ((i >= jobs.length && x.type == FlowStatusModule.type.SUCCESS) ||
+        if ((i > fullyRetrieved && x.type == FlowStatusModule.type.SUCCESS) ||
             x.type == FlowStatusModule.type.FAILURE) {
             if (x.forloop_jobs) {
                 const forloop_jobs = [];
                 for (let j of x.forloop_jobs) {
                     forloop_jobs.push(await JobService.getCompletedJob({ workspace: $workspaceStore, id: j }));
                 }
-                jobs.push(forloop_jobs);
+                jobs[i] = forloop_jobs;
             }
             else {
-                jobs.push(await JobService.getCompletedJob({ workspace: $workspaceStore, id: x.job }));
+                jobs[i] = await JobService.getCompletedJob({ workspace: $workspaceStore, id: x.job });
             }
             jobs = jobs;
+            fullyRetrieved = i;
         }
     });
 }
+function toJob(x) {
+    return x;
+}
 function toCompletedJob(x) {
     return x;
 }
@@ -36,32 +63,31 @@ function toCompletedJobs(x) {
 $: $workspaceStore && job && loadResults();
 </script>
 
-<div class="flow-root max-w-lg w-full p-4">
-	<div class="flex flex-row-reverse">
+<div class="flow-root w-full p-6">
+	<div class="flex ">
 		{#if job}
 			<div class="flex-col">
-				<a href="/run/{job?.id}" class="font-medium text-blue-600"
-					>{truncateRev(job?.id ?? '', 10)}</a
-				>
-				<div>
-					<JobStatus {job} />
-				</div>
+				<a href="/run/{job?.id}" class="font-medium text-blue-600">
+					{truncateRev(job?.id ?? '', 10)}
+				</a>
 			</div>
 		{/if}
 	</div>
+	<JobStatus {job} />
 
 	<p class="text-gray-500 mb-6 w-full text-center">
 		Step
-		<span class="font-medium text-gray-900"
-			>{Math.min((job?.flow_status?.step ?? 0) + 1, job?.raw_flow?.modules.length ?? 0)}</span
-		>
+		<span class="font-medium text-gray-900">
+			{Math.min((job?.flow_status?.step ?? 0) + 1, job?.raw_flow?.modules.length ?? 0)}
+		</span>
 		out of <span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
 		<span class="mt-4" />
 	</p>
-	<ul class="-mb-8 w-full">
+
+	<ul class="w-full">
 		{#each job?.raw_flow?.modules ?? [] as mod, i}
 			<li class="w-full">
-				<div class="relative pb-8 w-full">
+				<div class="relative w-full">
 					{#if i < (job?.raw_flow?.modules ?? []).length - 1}
 						<span
 							class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
@@ -109,7 +135,7 @@ $: $workspaceStore && job && loadResults();
 						<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
 							<div class="w-full">
 								<p class="text-sm text-gray-500">
-									{#if mod.value.type == FlowModuleValue.type.SCRIPT}
+									{#if mod.value.type == 'script'}
 										Script at path <a
 											target="_blank"
 											href={scriptPathToHref(mod.value.path ?? '')}
@@ -120,28 +146,34 @@ $: $workspaceStore && job && loadResults();
 							</div>
 							<div class="text-right text-sm whitespace-nowrap text-gray-500">
 								{job.flow_status?.modules[i].type}
-								{#if job.flow_status?.modules[i].forloop_jobs}
-									{#each job.flow_status?.modules[i].forloop_jobs ?? [] as job}
-										<div class="flex flex-col">
-											<a href="/run/{job}" class="font-medium text-blue-600"
-												>{truncateRev(job ?? '', 10)}</a
-											>
-										</div>
-									{/each}
-								{:else if job.flow_status?.modules[i].job}
-									<a href="/run/{job.flow_status?.modules[i].job}" class="font-medium text-blue-600"
-										>{truncateRev(job.flow_status?.modules[i].job ?? '', 10)}</a
-									>
-								{/if}
+								<div class=" max-h-40 overflow-y-auto">
+									{#if job.flow_status?.modules[i].forloop_jobs}
+										{#each job.flow_status?.modules[i].forloop_jobs ?? [] as job}
+											<div class="flex flex-col">
+												<a href="/run/{job}" class="font-medium text-blue-600">
+													{truncateRev(job ?? '', 10)}
+												</a>
+											</div>
+										{/each}
+									{:else if job.flow_status?.modules[i].job}
+										<a
+											href="/run/{job.flow_status?.modules[i].job}"
+											class="font-medium text-blue-600"
+										>
+											{truncateRev(job.flow_status?.modules[i].job ?? '', 10)}
+										</a>
+									{/if}
+								</div>
 							</div>
 						</div>
 					</div>
 					{#if jobs[i]}
 						{#if Array.isArray(jobs[i])}
-							<div class="flex flex-col space-y-2">
+							<div class="flex flex-col mt-2 space-y-2 max-h-60 overflow-y-auto shadow-inner">
 								{#each toCompletedJobs(jobs[i]) as job, i}
 									<button
 										class="underline text-blue-600 hover:text-blue-700"
+										class:text-red-600={!job.success}
 										on:click={() => {
 											if (forloop_selected == job.id) {
 												forloop_selected = ''
@@ -156,8 +188,24 @@ $: $workspaceStore && job && loadResults();
 									{/if}
 								{/each}
 							</div>
-						{:else}
+						{:else if toJob(jobs[i]).type == 'CompletedJob'}
 							<FlowJobResult job={toCompletedJob(jobs[i])} />
+						{:else if jobs[i]}
+							{#if toJob(jobs[i])?.raw_flow}
+								<div class="border-2">
+									<h2>Forloop current iteration</h2>
+									<svelte:self job={jobs[i]} />
+								</div>
+							{:else}
+								<div class="max-w-2xl mt-2 h-full">
+									<pre
+										bind:this={pres[i]}
+										class="break-all p-4 relative h-full mx-2 bg-gray-50 text-xs max-h-40 overflow-y-auto border">{toJob(
+											jobs[i]
+										).logs ?? ''}
+							</pre>
+								</div>
+							{/if}
 						{/if}
 					{/if}
 				</div>

package/components/FlowStatusViewer.svelte.d.ts

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import { CompletedJob, QueuedJob } from '../gen';
+import { CompletedJob, Job, QueuedJob } from '../gen';
 declare const __propDef: {
     props: {
         job: QueuedJob | CompletedJob;
-        jobs?: (CompletedJob | CompletedJob[] | undefined)[] | undefined;
+        jobs?: (Job | Job[] | undefined)[] | undefined;
+        fullyRetrieved?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;