windmill-components 1.60.4 → 1.75.0

package/components/apps/editor/AppEditor.svelte

@@ -1,5 +1,6 @@
 <script>import SplitPanesWrapper from '../../splitPanes/SplitPanesWrapper.svelte';
 import { onMount, setContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { writable } from 'svelte/store';
 import { buildWorld } from '../rx';
@@ -10,7 +11,7 @@ import TabContent from '../../common/tabs/TabContent.svelte';
 import { Alert, Button, Tab } from '../../common';
 import ComponentList from './componentsPanel/ComponentList.svelte';
 import Icon from 'svelte-awesome';
-import { faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
+import { faCode, faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
 import { classNames, encodeState } from '../../../utils';
 import AppPreview from './AppPreview.svelte';
@@ -18,13 +19,19 @@ import { userStore, workspaceStore } from '../../../stores';
 import InlineScriptsPanel from './inlineScriptsPanel/InlineScriptsPanel.svelte';
 import SettingsPanel from './SettingsPanel.svelte';
 import { fly } from 'svelte/transition';
-import UnsavedConfirmationModal from '../../common/confirmationModal/UnsavedConfirmationModal.svelte';
+import { VariableService } from '../../../gen';
 import { page } from '$app/stores';
+import CssSettings from './componentsPanel/CssSettings.svelte';
+import { initHistory } from '../../../history';
+import ComponentNavigation from './component/ComponentNavigation.svelte';
+import ItemPicker from '../../ItemPicker.svelte';
+import VariableEditor from '../../VariableEditor.svelte';
 export let app;
 export let path;
 export let initialMode = 'dnd';
 export let policy;
 export let summary;
+export let fromHub = false;
 const appStore = writable(app);
 const worldStore = writable(undefined);
 const staticOutputs = writable({});
@@ -37,12 +44,15 @@ const connectingInput = writable({
     input: undefined,
     hoveredComponent: undefined
 });
+const history = initHistory(app);
 const runnableComponents = writable({});
-setContext('AppEditorContext', {
+const errorByComponent = writable({});
+const focusedGrid = writable(undefined);
+const pickVariableCallback = writable(undefined);
+setContext('AppViewerContext', {
     worldStore,
     staticOutputs,
     app: appStore,
-    lazyGrid: writable([]),
     summary: summaryStore,
     selectedComponent,
     mode,
@@ -55,7 +65,17 @@ setContext('AppEditorContext', {
     isEditor: true,
     jobs: writable([]),
     staticExporter: writable({}),
-    noBackend: false
+    noBackend: false,
+    errorByComponent,
+    openDebugRun: writable(undefined),
+    focusedGrid,
+    stateId: writable(0),
+    parentWidth: writable(0)
+});
+setContext('AppEditorContext', {
+    history,
+    componentControl: writable({}),
+    pickVariableCallback
 });
 let timeout = undefined;
 $: $appStore && saveDraft();
@@ -74,11 +94,16 @@ let mounted = false;
 onMount(() => {
     mounted = true;
 });
-$: context = {
+let context = {
     email: $userStore?.email,
     username: $userStore?.username,
-    query: Object.fromEntries($page.url.searchParams.entries())
+    query: Object.fromEntries($page.url.searchParams.entries()),
+    hash: $page.url.hash
 };
+function hashchange(e) {
+    context.hash = e.newURL.split('#')[1];
+    context = context;
+}
 $: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, context));
 $: previewing = $mode === 'preview';
 $: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full';
@@ -89,31 +114,44 @@ $: if ($selectedComponent) {
 else {
     selectedTab = 'insert';
 }
+let itemPicker = undefined;
+$: if ($pickVariableCallback) {
+    itemPicker?.openDrawer();
+}
+let variableEditor = undefined;
 </script>
 
+<svelte:window on:hashchange={hashchange} />
+
 {#if $connectingInput.opened}
 	<div
-		class="absolute  w-full h-screen bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
+		class="absolute w-full h-screen bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
 	/>
 {/if}
 {#if !$userStore?.operator}
-	<UnsavedConfirmationModal />
 	{#if initialMode !== 'preview'}
-		<AppEditorHeader {policy} />
+		<AppEditorHeader {policy} {fromHub} />
 	{/if}
 
 	{#if previewing}
-		<AppPreview
-			workspace={$workspaceStore ?? ''}
-			summary={$summaryStore}
-			app={$appStore}
-			appPath={path}
-			{breakpoint}
-			{policy}
-			isEditor
-			{context}
-			noBackend={false}
-		/>
+		<SplitPanesWrapper>
+			<div
+				class={twMerge('h-full w-full', $appStore.css?.['app']?.['viewer']?.class)}
+				style={$appStore.css?.['app']?.['viewer']?.style}
+			>
+				<AppPreview
+					workspace={$workspaceStore ?? ''}
+					summary={$summaryStore}
+					app={$appStore}
+					appPath={path}
+					{breakpoint}
+					{policy}
+					isEditor
+					{context}
+					noBackend={false}
+				/>
+			</div>
+		</SplitPanesWrapper>
 	{:else}
 		<SplitPanesWrapper>
 			<Splitpanes class="max-w-full overflow-hidden">
@@ -125,15 +163,32 @@ else {
 						<Splitpanes horizontal>
 							<Pane size={$connectingInput?.opened ? 100 : 70}>
 								<div
-									class="bg-gray-100 relative  w-full h-full overflow-auto {app.fullscreen
-										? ''
-										: 'max-w-6xl'}"
+									on:pointerdown={(e) => {
+										$selectedComponent = undefined
+										$focusedGrid = undefined
+									}}
+									class={twMerge(
+										'bg-gray-100 h-full w-full',
+										$appStore.css?.['app']?.['viewer']?.class
+									)}
+									style={$appStore.css?.['app']?.['viewer']?.style}
 								>
-									{#if $appStore.grid}
-										<div class={classNames('p-4 mx-auto', width)}>
-											<GridEditor {policy} />
-										</div>
-									{/if}
+									<div
+										class={classNames(
+											'relative mx-auto w-full h-full overflow-auto',
+											app.fullscreen ? '' : 'max-w-6xl'
+										)}
+									>
+										{#if $appStore.grid}
+											<ComponentNavigation />
+
+											<div on:pointerdown|stopPropagation class={width}>
+												<GridEditor {policy} />
+											</div>
+
+											<div id="app-editor-top-level-drawer" />
+										{/if}
+									</div>
 								</div>
 							</Pane>
 							<Pane size={$connectingInput?.opened ? 0 : 30}>
@@ -146,31 +201,42 @@ else {
 				</Pane>
 				<Pane size={21} minSize={5} maxSize={33}>
 					<div class="relative flex flex-col h-full">
-						<Tabs bind:selected={selectedTab}>
+						<Tabs bind:selected={selectedTab} wrapperClass="!h-[40px]" class="!h-full">
 							<Tab value="insert" size="xs">
-								<div class="m-1 flex flex-row gap-2">
+								<div class="m-1 center-center gap-2">
 									<Icon data={faPlus} />
 									<span>Insert</span>
 								</div>
 							</Tab>
 							<Tab value="settings" size="xs">
-								<div class="m-1 flex flex-row gap-2">
+								<div class="m-1 center-center gap-2">
 									<Icon data={faSliders} />
 									<span>Settings</span>
 								</div>
 							</Tab>
-							<svelte:fragment slot="content">
+							<Tab value="css" size="xs">
+								<div class="m-1 center-center gap-2">
+									<Icon data={faCode} />
+									<span>CSS</span>
+								</div>
+							</Tab>
+							<div slot="content" class="h-full overflow-y-auto pb-4">
 								<TabContent class="overflow-auto" value="settings">
 									{#if $selectedComponent !== undefined}
 										<SettingsPanel />
 									{:else}
-										<div class="p-2 min-w-[150px] text-sm">No component selected.</div>
+										<div class="min-w-[150px] text-sm text-gray-500 text-center py-8 px-2">
+											Select a component to see the settings&nbsp;for&nbsp;it
+										</div>
 									{/if}
 								</TabContent>
 								<TabContent value="insert">
 									<ComponentList />
 								</TabContent>
-							</svelte:fragment>
+								<TabContent value="css">
+									<CssSettings />
+								</TabContent>
+							</div>
 						</Tabs>
 						{#if $connectingInput.opened}
 							<div
@@ -205,3 +271,36 @@ else {
 {:else}
 	App editor not available to operators
 {/if}
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, _) => {
+		$pickVariableCallback?.(path)
+	}}
+	itemName="Variable"
+	extraField="path"
+	loadItems={async () =>
+		(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
+			name: x.path,
+			...x
+		}))}
+>
+	<div
+		slot="submission"
+		class="flex flex-row-reverse w-full bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+	>
+		<Button
+			variant="border"
+			color="blue"
+			size="sm"
+			startIcon={{ icon: faPlus }}
+			on:click={() => {
+				variableEditor?.initNew?.()
+			}}
+		>
+			New variable
+		</Button>
+	</div>
+</ItemPicker>
+
+<VariableEditor bind:this={variableEditor} />

package/components/apps/editor/AppEditor.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { App, EditorMode } from '../types';
-import type { Policy } from '../../../gen';
+import { type Policy } from '../../../gen';
 declare const __propDef: {
     props: {
         app: App;
@@ -8,8 +8,11 @@ declare const __propDef: {
         initialMode?: EditorMode | undefined;
         policy: Policy;
         summary: string;
+        fromHub?: boolean | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/editor/AppEditorHeader.svelte

@@ -1,6 +1,6 @@
 <script>import { goto } from '$app/navigation';
 import { page } from '$app/stores';
-import { Alert, Badge, Drawer, DrawerContent } from '../../common';
+import { Alert, Badge, ButtonPopup, ButtonPopupItem, Drawer, DrawerContent, UndoRedo } from '../../common';
 import Button from '../../common/button/Button.svelte';
 import { dirtyStore } from '../../common/confirmationModal/dirtyStore';
 import Skeleton from '../../common/skeleton/Skeleton.svelte';
@@ -17,15 +17,17 @@ import TestJobLoader from '../../TestJobLoader.svelte';
 import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { AppService, Job, Policy } from '../../../gen';
-import { userStore, workspaceStore } from '../../../stores';
+import { redo, undo } from '../../../history';
+import { workspaceStore } from '../../../stores';
 import { faBug, faClipboard, faExternalLink, faFileExport, faGlobe, faSave } from '@fortawesome/free-solid-svg-icons';
-import { AlignHorizontalSpaceAround, Expand, Eye, Laptop2, Loader2, MoreVertical, Pencil, Smartphone } from 'lucide-svelte';
+import { AlignHorizontalSpaceAround, Expand, Eye, Laptop2, Loader2, MoreVertical, Pencil, Redo, SlidersHorizontal, Smartphone, Undo, X } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { appToHubUrl, classNames, copyToClipboard, sendUserToast } from '../../../utils';
-import { toStatic } from '../utils';
+import { allItems, toStatic } from '../utils';
 import AppExportButton from './AppExportButton.svelte';
+import AppInputs from './AppInputs.svelte';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
 async function hash(message) {
     const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -35,22 +37,41 @@ async function hash(message) {
     return hashHex;
 }
 export let policy;
-const { app, summary, mode, breakpoint, appPath, jobs, staticExporter } = getContext('AppEditorContext');
+export let fromHub = false;
+const { app, summary, mode, breakpoint, appPath, jobs, staticExporter, errorByComponent, openDebugRun, focusedGrid, selectedComponent } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
 const loading = {
     publish: false,
     save: false
 };
+$: if ($openDebugRun == undefined) {
+    $openDebugRun = (componentId) => {
+        jobsDrawerOpen = true;
+        const job = $jobs.find((job) => job.component === componentId);
+        if (job) {
+            selectedJobId = job.job;
+        }
+    };
+}
 let newPath = '';
 let pathError = undefined;
 let appExport;
 let saveDrawerOpen = false;
 let jobsDrawerOpen = false;
 let publishDrawerOpen = false;
+let inputsDrawerOpen = fromHub;
 function closeSaveDrawer() {
     saveDrawerOpen = false;
 }
+function collectStaticFields(fields) {
+    return Object.fromEntries(Object.entries(fields ?? {})
+        .filter(([k, v]) => v.type == 'static')
+        .map(([k, v]) => {
+        return [k, v['value']];
+    }));
+}
 async function computeTriggerables() {
-    const allTriggers = await Promise.all($app.grid
+    const allTriggers = await Promise.all(allItems($app.grid, $app.subgrids)
         .flatMap((x) => {
         let c = x.data;
         let r = [c.componentInput];
@@ -61,11 +82,7 @@ async function computeTriggerables() {
     })
         .map(async (input) => {
         if (input?.type == 'runnable') {
-            const staticInputs = Object.fromEntries(Object.entries(input.fields ?? {})
-                .filter(([k, v]) => v.type == 'static')
-                .map(([k, v]) => {
-                return [k, v['value']];
-            }));
+            const staticInputs = collectStaticFields(input.fields);
             if (input.runnable?.type == 'runnableByName') {
                 let hex = await hash(input.runnable.inlineScript?.content);
                 return [`rawscript/${hex}`, staticInputs];
@@ -76,10 +93,13 @@ async function computeTriggerables() {
             }
         }
         return [];
-    }));
-    policy.triggerables = Object.fromEntries(allTriggers);
-    policy.on_behalf_of = `u/${$userStore?.username}`;
-    policy.on_behalf_of_email = $userStore?.email;
+    })
+        .concat(Object.values($app.hiddenInlineScripts ?? {}).map(async (v) => {
+        let hex = await hash(v.inlineScript?.content);
+        const staticInputs = collectStaticFields(v.fields);
+        return [`rawscript/${hex}`, staticInputs];
+    })));
+    policy.triggerables = Object.fromEntries(allTriggers.filter((x) => x.length > 0));
 }
 async function createApp(path) {
     await computeTriggerables();
@@ -128,26 +148,75 @@ async function save() {
         return;
     }
     loading.save = true;
-    await computeTriggerables();
-    await AppService.updateApp({
-        workspace: $workspaceStore,
-        path: $page.params.path,
-        requestBody: {
-            value: $app,
-            summary: $summary,
-            policy
-        }
-    });
-    loading.save = false;
-    sendUserToast('App saved');
+    try {
+        await computeTriggerables();
+        await AppService.updateApp({
+            workspace: $workspaceStore,
+            path: $page.params.path,
+            requestBody: {
+                value: $app,
+                summary: $summary,
+                policy
+            }
+        });
+        sendUserToast('App saved');
+        loading.save = false;
+    }
+    catch (e) {
+        loading.save = false;
+        throw e;
+    }
 }
 let selectedJobId = undefined;
 let testJobLoader;
 let job = undefined;
 let testIsLoading = false;
 $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
+$: hasErrors = Object.keys($errorByComponent).length > 0;
+function onKeyDown(event) {
+    switch (event.key) {
+        case 'Z':
+            if (event.ctrlKey) {
+                $app = redo(history);
+                event.preventDefault();
+            }
+            break;
+        case 'z':
+            if (event.ctrlKey) {
+                $app = undo(history, $app);
+                event.preventDefault();
+            }
+            break;
+        case 's':
+            if (event.ctrlKey) {
+                save();
+                event.preventDefault();
+            }
+            break;
+        // case 'ArrowDown': {
+        // 	let ids = generateIds()
+        // 	let idx = ids.indexOf($selectedIdStore)
+        // 	if (idx > -1 && idx < ids.length - 1) {
+        // 		$selectedIdStore = ids[idx + 1]
+        // 		event.preventDefault()
+        // 	}
+        // 	break
+        // }
+        // case 'ArrowUp': {
+        // 	let ids = generateIds()
+        // 	let idx = ids.indexOf($selectedIdStore)
+        // 	if (idx > 0 && idx < ids.length) {
+        // 		$selectedIdStore = ids[idx - 1]
+        // 		event.preventDefault()
+        // 	}
+        // 	break
+        // }
+    }
+}
 </script>
 
+<svelte:window on:keydown={onKeyDown} />
+
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
 
 <Drawer bind:open={saveDrawerOpen} size="800px">
@@ -156,7 +225,7 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 			bind:error={pathError}
 			bind:path={newPath}
 			initialPath=""
-			namePlaceholder="my_app"
+			namePlaceholder="app"
 			kind="app"
 		/>
 
@@ -170,6 +239,12 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 	</DrawerContent>
 </Drawer>
 
+<Drawer bind:open={inputsDrawerOpen} size="600px">
+	<DrawerContent title="App inputs configuration" on:close={() => (inputsDrawerOpen = false)}>
+		<AppInputs />
+	</DrawerContent>
+</Drawer>
+
 <Drawer bind:open={jobsDrawerOpen} size="900px">
 	<DrawerContent noPadding title="Debug Runs" on:close={() => (jobsDrawerOpen = false)}>
 		<Splitpanes class="!overflow-visible">
@@ -181,10 +256,13 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 								{#each $jobs ?? [] as { job, component } (job)}
 									<!-- svelte-ignore a11y-click-events-have-key-events -->
 									<div
-										class="{classNames(
+										class={classNames(
 											'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-											selectedJobId == job ? 'bg-blue-100 text-blue-600' : ''
-										)},"
+											$errorByComponent[job] ? 'border border-red-500 bg-red-100' : '',
+											selectedJobId == job && !$errorByComponent[component]
+												? 'bg-blue-100 text-blue-600'
+												: ''
+										)}
 										on:click={() => (selectedJobId = job)}
 									>
 										<span class="text-xs truncate">{job}</span>
@@ -199,19 +277,21 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 				</PanelSection>
 			</Pane>
 			<Pane size={75}>
-				<div class="h-full w-full overflow-hidden">
+				<div class="h-full w-full overflow-auto">
 					{#if selectedJobId}
 						{#if !job}
 							<Skeleton layout={[[40]]} />
 						{:else}
 							<div class="flex flex-col h-full w-full gap-4 mb-4">
 								{#if job?.['running']}
-									<div class="flex flex-row-reverse w-full"
-										><Button
+									<div class="flex flex-row-reverse w-full">
+										<Button
 											color="red"
 											variant="border"
-											on:click={() => testJobLoader?.cancelJob()}>Cancel</Button
+											on:click={() => testJobLoader?.cancelJob()}
 										>
+											Cancel
+										</Button>
 									</div>
 								{/if}
 								<div class="p-2">
@@ -321,6 +401,16 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 	<div class="min-w-64 w-64">
 		<input type="text" placeholder="App summary" class="text-sm w-full" bind:value={$summary} />
 	</div>
+	<UndoRedo
+		undoProps={{ disabled: $history?.index === 0 }}
+		redoProps={{ disabled: $history && $history?.index === $history.history.length - 1 }}
+		on:undo={() => {
+			$app = undo(history, $app)
+		}}
+		on:redo={() => {
+			$app = redo(history)
+		}}
+	/>
 	<div class="flex gap-4 items-center grow justify-center">
 		<div>
 			<ToggleButtonGroup bind:selected={$mode}>
@@ -353,7 +443,7 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 				<ToggleButton position="left" value={false} size="xs">
 					<div class="flex gap-1 justify-start items-center">
 						<AlignHorizontalSpaceAround size={14} />
-						<Tooltip light>
+						<Tooltip light class="mb-0.5">
 							The max width is 1168px and the content stay centered instead of taking the full page
 							width
 						</Tooltip>
@@ -365,7 +455,23 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 			</ToggleButtonGroup>
 		</div>
 	</div>
-	<div class="flex flex-row grow gap-2 justify-end items-center overflow-visible">
+	{#if $focusedGrid !== undefined}
+		<Badge color="indigo">
+			<div class="flex flex-row gap-2 justify-center items-center">
+				<div>{`Sub grid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
+				<button
+					on:click={() => {
+						$selectedComponent = undefined
+						$focusedGrid = undefined
+					}}
+				>
+					<X size={14} />
+				</button>
+			</div>
+		</Badge>
+	{/if}
+
+	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
 		<Dropdown
 			placement="bottom-end"
 			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px] hidden lg:block"
@@ -396,10 +502,18 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 		>
 			<MoreVertical size={20} />
 		</Dropdown>
+		<span class="hidden md:inline">
+			<Button on:click={() => (inputsDrawerOpen = true)} color="light" size="xs" variant="border">
+				<span class="flex gap-2">
+					<SlidersHorizontal size={14} />
+					App inputs
+				</span>
+			</Button>
+		</span>
 		<span class="hidden md:inline">
 			<Button
 				on:click={() => (jobsDrawerOpen = true)}
-				color="light"
+				color={hasErrors ? 'red' : 'light'}
 				size="xs"
 				variant="border"
 				startIcon={{ icon: faBug }}
@@ -417,14 +531,31 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 		>
 			<span class="hidden md:inline">Publish</span>
 		</Button>
-		<Button
-			loading={loading.save}
-			startIcon={{ icon: faSave }}
-			on:click={save}
-			color="dark"
-			size="xs"
-		>
-			<span class="hidden md:inline">Save</span>
-		</Button>
+		{#if appPath == ''}
+			<Button
+				loading={loading.save}
+				startIcon={{ icon: faSave }}
+				on:click={save}
+				color="dark"
+				size="xs"
+			>
+				<span class="hidden md:inline">Save</span>
+			</Button>
+		{:else}
+			<ButtonPopup
+				loading={loading.save}
+				startIcon={{ icon: faSave }}
+				on:click={save}
+				color="dark"
+				size="xs"
+			>
+				<svelte:fragment slot="main">Save</svelte:fragment>
+				<ButtonPopupItem
+					on:click={() => {
+						window.open(`/apps/add?template=${appPath}`)
+					}}>Fork</ButtonPopupItem
+				>
+			</ButtonPopup>
+		{/if}
 	</div>
 </div>

package/components/apps/editor/AppEditorHeader.svelte.d.ts

@@ -3,6 +3,7 @@ import { Policy } from '../../../gen';
 declare const __propDef: {
     props: {
         policy: Policy;
+        fromHub?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;