windmill-components 1.56.5 → 1.57.2

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -3,33 +3,48 @@ import { capitalize } from '../../../../utils';
 import { faArrowRight, faPen, faTableCells, faUser } from '@fortawesome/free-solid-svg-icons';
 import { fieldTypeToTsType } from '../../utils';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
+import { getContext } from 'svelte';
 export let inputSpecs;
 export let userInputEnabled = true;
 export let staticOnly = false;
 export let shouldCapitalize = true;
 export let rowColumns = false;
+const { connectingInput } = getContext('AppEditorContext');
 </script>
 
 {#if inputSpecs}
 	<div class="w-full flex flex-col gap-4">
-		{#each Object.keys(inputSpecs) as inputSpecKey, index (index)}
+		{#each Object.keys(inputSpecs) as inputSpecKey (inputSpecKey)}
 			{@const input = inputSpecs[inputSpecKey]}
-			{#if true}
-				<div class="flex flex-col gap-1">
-					<div class="flex justify-between items-end gap-1">
-						<span class="text-xs font-semibold">
-							{shouldCapitalize ? capitalize(inputSpecKey) : inputSpecKey}
-						</span>
+			<div class="flex flex-col gap-1">
+				<div class="flex justify-between items-end gap-1">
+					<span class="text-sm font-semibold truncate">
+						{shouldCapitalize ? capitalize(inputSpecKey) : inputSpecKey}
+					</span>
 
-						<div class="flex gap-2 items-center">
-							<Badge color="blue">
-								{input.fieldType === 'array' && input.subFieldType
-									? `${capitalize(fieldTypeToTsType(input.subFieldType))}[]`
-									: capitalize(fieldTypeToTsType(input.fieldType))}
-							</Badge>
+					<div class="flex gap-2 flex-wrap items-center">
+						<Badge color="blue">
+							{input.fieldType === 'array' && input.subFieldType
+								? `${capitalize(fieldTypeToTsType(input.subFieldType))}[]`
+								: capitalize(fieldTypeToTsType(input.fieldType))}
+						</Badge>
 
-							<ToggleButtonGroup bind:selected={inputSpecs[inputSpecKey].type}>
+						{#if !inputSpecs[inputSpecKey].onlyStatic}
+							<ToggleButtonGroup
+								bind:selected={inputSpecs[inputSpecKey].type}
+								on:selected={(e) => {
+									console.log(inputSpecs[inputSpecKey])
+									if (e.detail == 'connected' && !inputSpecs[inputSpecKey]['connection']) {
+										$connectingInput = {
+											opened: true,
+											input: undefined,
+											hoveredComponent: undefined
+										}
+									}
+								}}
+							>
 								<ToggleButton
+									title="Static"
 									position="left"
 									value="static"
 									startIcon={{ icon: faPen }}
@@ -38,6 +53,7 @@ export let rowColumns = false;
 								/>
 								{#if rowColumns}
 									<ToggleButton
+										title="From Row"
 										position="center"
 										value="row"
 										startIcon={{ icon: faTableCells }}
@@ -46,7 +62,19 @@ export let rowColumns = false;
 										disabled={staticOnly}
 									/>
 								{/if}
+								{#if userInputEnabled && (!input.format?.startsWith('resource-') || true)}
+									<ToggleButton
+										title="User Input"
+										position="center"
+										value="user"
+										startIcon={{ icon: faUser }}
+										size="xs"
+										iconOnly
+										disabled={staticOnly}
+									/>
+								{/if}
 								<ToggleButton
+									title="Connect"
 									position="right"
 									value="connected"
 									startIcon={{ icon: faArrowRight }}
@@ -55,15 +83,12 @@ export let rowColumns = false;
 									disabled={staticOnly}
 								/>
 							</ToggleButtonGroup>
-						</div>
+						{/if}
 					</div>
-
-					<InputsSpecEditor
-						bind:componentInput={inputSpecs[inputSpecKey]}
-						userInputEnabled={userInputEnabled && input.format === undefined}
-					/>
 				</div>
-			{/if}
+
+				<InputsSpecEditor bind:componentInput={inputSpecs[inputSpecKey]} />
+			</div>
 		{/each}
 	</div>
 {:else}

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte.d.ts

@@ -2,7 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
 declare const __propDef: {
     props: {
-        inputSpecs: Record<string, StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput>;
+        inputSpecs: Record<string, (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput) & {
+            onlyStatic?: boolean;
+        }>;
         userInputEnabled?: boolean | undefined;
         staticOnly?: boolean | undefined;
         shouldCapitalize?: boolean | undefined;

package/components/apps/editor/settingsPanel/PickInlineScript.svelte

@@ -32,7 +32,6 @@ async function loadItems() {
 >
 	<div class="flex justify-center flex-col items-center gap-2">
 		<MousePointerClick size={18} />
-
 		<span class="text-xs">Pick</span>
 	</div>
 </Button>

package/components/apps/editor/settingsPanel/Recompute.svelte

@@ -31,7 +31,7 @@ function onChange(event, id) {
 				{#each Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId) as id}
 					<tr>
 						<td class="whitespace-nowrap px-4 py-2 text-xs">
-							<Badge color="blue">{id}</Badge>
+							<Badge color="dark-indigo">{id}</Badge>
 						</td>
 						<td class="relative whitespace-nowrap px-4 py-2 ">
 							<input

package/components/apps/editor/settingsPanel/SelectedRunnable.svelte

@@ -33,7 +33,7 @@ function clear() {
 		bind:inlineScript={appInput.runnable.inlineScript}
 	/>
 {/if}
-<div class="flex flex-col xl:flex-row justify-between w-full items-center gap-1">
+<div class="flex flex-col xl:flex-row justify-between w-full flex-wrap items-center gap-1">
 	<span class="text-xs font-semibold truncate">
 		{#if appInput.runnable?.type === 'runnableByName'}
 			{appInput.runnable.name}
@@ -41,16 +41,17 @@ function clear() {
 			{appInput.runnable.path}
 		{/if}
 	</span>
-	<div class="flex gap-1">
+	<div class="flex gap-1 flex-wrap justify-center">
 		{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
 			<Button size="xs" color="light" variant="border" startIcon={{ icon: faEdit }} on:click={edit}>
 				Edit
 			</Button>
-			<Button size="xs" color="light" variant="border" on:click={detach}
-				>Detach <Tooltip
-					>Detaching an inline script keep it for later to be reused by another component</Tooltip
-				></Button
-			>
+			<Button size="xs" color="light" variant="border" on:click={detach}>
+				Detach
+				<Tooltip>
+					Detaching an inline script keep it for later to be reused by another component
+				</Tooltip>
+			</Button>
 		{/if}
 		<Button size="xs" color="red" variant="border" startIcon={{ icon: faClose }} on:click={clear}>
 			Clear

package/components/apps/editor/settingsPanel/TableActions.svelte

@@ -19,22 +19,19 @@ function addComponent() {
             label: {
                 type: 'static',
                 value: 'Action',
-                fieldType: 'text',
-                defaultValue: 'Action'
+                fieldType: 'text'
             },
             color: {
                 fieldType: 'select',
                 type: 'static',
                 value: 'dark',
-                optionValuesKey: 'buttonColorOptions',
-                defaultValue: 'dark'
+                optionValuesKey: 'buttonColorOptions'
             },
             size: {
                 fieldType: 'select',
                 type: 'static',
                 value: 'xs',
-                optionValuesKey: 'buttonSizeOptions',
-                defaultValue: 'xs'
+                optionValuesKey: 'buttonSizeOptions'
             }
         },
         componentInput: {
@@ -42,7 +39,7 @@ function addComponent() {
             fieldType: 'any',
             fields: {},
             runnable: undefined,
-            defaultValue: undefined
+            value: undefined
         },
         recomputeIds: undefined,
         card: false
@@ -69,10 +66,13 @@ function deleteComponent(cid) {
 		/>
 	</svelte:fragment>
 
+	{#if components.length == 0}
+		<span class="text-xs text-gray-500">No action buttons</span>
+	{/if}
 	{#each components as component}
 		<div
 			class={classNames(
-				'w-full text-xs font-bold py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
+				'w-full text-xs font-bold gap-1 py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
 				'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700',
 				$selectedComponent === component.id ? 'outline outline-blue-500 bg-red-400' : ''
 			)}
@@ -89,8 +89,8 @@ function deleteComponent(cid) {
 			<div>
 				<TableActionLabel componentInput={component.configuration.label} />
 			</div>
-			<Badge color="dark-blue">
-				Component: {component.id}
+			<Badge color="dark-indigo">
+				{component.id}
 			</Badge>
 		</div>
 	{/each}

package/components/apps/editor/settingsPanel/common/PanelSection.svelte

@@ -7,6 +7,7 @@ export let titlePadding = '';
 
 <div
 	class={classNames(
+		$$props.class,
 		'flex flex-col h-full gap-2 items-start',
 		noPadding ? '' : smallPadding ? 'p-2' : 'p-4'
 	)}

package/components/apps/editor/settingsPanel/common/PanelSection.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         title: string;
         smallPadding?: boolean | undefined;
         noPadding?: boolean | undefined;

package/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte

@@ -6,64 +6,70 @@ const { connectingInput } = getContext('AppEditorContext');
 function applyConnection() {
     if (!$connectingInput.opened &&
         $connectingInput.input !== undefined &&
-        componentInput.type === 'connected' &&
         !componentInput.connection) {
         componentInput.connection = $connectingInput.input.connection;
         $connectingInput = {
             opened: false,
-            input: undefined
+            input: undefined,
+            hoveredComponent: undefined
         };
     }
 }
+function startConnecting() {
+    $connectingInput = {
+        opened: true,
+        input: undefined,
+        hoveredComponent: undefined
+    };
+}
 $: $connectingInput && applyConnection();
 </script>
 
-{#if componentInput.type === 'connected'}
-	{#if componentInput.connection}
-		<div class="flex justify-between w-full">
-			<span class="text-xs">Status</span>
-			<Badge color="green">Connected</Badge>
-		</div>
-		<div class="flex justify-between w-full">
-			<span class="text-xs">Component</span>
-			<Badge color="indigo">{componentInput.connection.componentId}</Badge>
-		</div>
-		<div class="flex justify-between w-full">
-			<span class="text-xs">Path</span>
-			<Badge color="indigo">{componentInput.connection.path}</Badge>
-		</div>
-		<Button
-			size="xs"
-			startIcon={{ icon: faClose }}
-			color="red"
-			variant="border"
-			on:click={() => {
-				if (componentInput.type === 'connected') {
-					componentInput.connection = undefined
-				}
-			}}
-		>
-			Disconnect
-		</Button>
-	{:else}
-		<div class="flex justify-between w-full">
-			<span class="text-xs">Status</span>
-			<Badge color="yellow">Not connected</Badge>
-		</div>
-		<Button
-			size="xs"
-			endIcon={{ icon: faArrowRight }}
-			color="blue"
-			on:click={() => {
-				if (componentInput.type === 'connected') {
-					$connectingInput = {
-						opened: true,
-						input: undefined
-					}
+{#if componentInput.connection}
+	<div class="flex justify-between w-full gap-1">
+		<span class="text-xs">Status</span>
+		<Badge color="green">Connected</Badge>
+	</div>
+	<div class="flex justify-between w-full">
+		<span class="text-xs">Component</span>
+		<Badge color="indigo">{componentInput.connection.componentId}</Badge>
+	</div>
+	<div class="flex justify-between w-full">
+		<span class="text-xs">Path</span>
+		<Badge color="indigo">{componentInput.connection.path}</Badge>
+	</div>
+	<Button
+		size="xs"
+		startIcon={{ icon: faClose }}
+		color="red"
+		variant="border"
+		on:click={() => {
+			if (componentInput.type === 'connected') {
+				componentInput.connection = undefined
+			}
+		}}
+	>
+		Disconnect
+	</Button>
+{:else}
+	<div class="flex justify-between w-full gap-1">
+		<span class="text-xs">Status</span>
+		<Badge color="yellow">Not connected</Badge>
+	</div>
+	<Button
+		size="xs"
+		endIcon={{ icon: faArrowRight }}
+		color="blue"
+		on:click={() => {
+			if (componentInput.type === 'connected') {
+				$connectingInput = {
+					opened: true,
+					input: undefined,
+					hoveredComponent: undefined
 				}
-			}}
-		>
-			Connect
-		</Button>
-	{/if}
+			}
+		}}
+	>
+		Connect
+	</Button>
 {/if}

package/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte.d.ts

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

package/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte

@@ -0,0 +1,24 @@
+<script>import SimpleEditor from '../../../../SimpleEditor.svelte';
+export let code;
+export let value;
+function parseJson() {
+    try {
+        value = JSON.parse(code);
+        error = '';
+    }
+    catch (e) {
+        error = e.message;
+    }
+}
+let error = '';
+$: code && parseJson();
+</script>
+
+<div class="flex flex-col w-full">
+	<div class="border border-gray-300 w-full">
+		<SimpleEditor autoHeight lang="json" bind:code />
+	</div>
+	{#if error != ''}
+		<span class="text-red-600 text-xs">{error}</span>
+	{/if}
+</div>

package/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        code: string;
+        value: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type JsonEditorProps = typeof __propDef.props;
+export type JsonEditorEvents = typeof __propDef.events;
+export type JsonEditorSlots = typeof __propDef.slots;
+export default class JsonEditor extends SvelteComponentTyped<JsonEditorProps, JsonEditorEvents, JsonEditorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -1,9 +1,12 @@
 <script>import Toggle from '../../../../Toggle.svelte';
 import { staticValues } from '../../componentsPanel/componentStaticValues';
-import SimpleEditor from '../../../../SimpleEditor.svelte';
 import ArrayStaticInputEditor from '../ArrayStaticInputEditor.svelte';
 import ResourcePicker from '../../../../ResourcePicker.svelte';
+import JsonEditor from './JsonEditor.svelte';
+import { getContext } from 'svelte';
 export let componentInput;
+const { onchange } = getContext('AppEditorContext');
+$: componentInput && onchange?.();
 </script>
 
 {#if componentInput?.type === 'static'}
@@ -22,7 +25,7 @@ export let componentInput;
 			{/each}
 		</select>
 	{:else if componentInput.fieldType === 'object'}
-		{#if componentInput.format}
+		{#if componentInput?.format?.startsWith('resource-')}
 			<ResourcePicker
 				initialValue={componentInput.value?.split('$res:')[1] || ''}
 				on:change={(e) => {
@@ -37,16 +40,10 @@ export let componentInput;
 					: undefined}
 			/>
 		{:else}
-			<div class="border rounded-sm w-full">
-				<SimpleEditor
-					lang="json"
+			<div class="flex w-full flex-col">
+				<JsonEditor
+					bind:value={componentInput.value}
 					code={JSON.stringify(componentInput.value, null, 2)}
-					class="few-lines-editor"
-					on:change={(e) => {
-						if (componentInput?.type === 'static' && componentInput.value) {
-							componentInput.value = JSON.parse(e.detail.code)
-						}
-					}}
 				/>
 			</div>
 		{/if}

package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -6,36 +6,53 @@ import InlineScriptList from './InlineScriptList.svelte';
 import WorkspaceScriptList from './WorkspaceScriptList.svelte';
 import WorkspaceFlowList from './WorkspaceFlowList.svelte';
 import { getContext } from 'svelte';
+import { loadSchema, schemaToInputsSpec } from '../../../utils';
+import { emptySchema } from '../../../../../utils';
 export let appInput;
 let tab = 'inlinescripts';
 let filter = '';
 let picker;
-const { app } = getContext('AppEditorContext');
-function pickScript(path) {
+const { app, workspace } = getContext('AppEditorContext');
+async function loadSchemaFromTriggerable(path, runType) {
+    return loadSchema(workspace, path, runType) ?? emptySchema();
+}
+async function pickScript(path) {
     if (appInput.type === 'runnable') {
+        const schema = await loadSchemaFromTriggerable(path, 'script');
+        const fields = schemaToInputsSpec(schema);
         appInput.runnable = {
             type: 'runnableByPath',
             path,
-            runType: 'script'
+            runType: 'script',
+            schema
         };
+        appInput.fields = fields;
     }
 }
-function pickFlow(path) {
+async function pickFlow(path) {
     if (appInput.type === 'runnable') {
+        const schema = await loadSchemaFromTriggerable(path, 'flow');
+        const fields = schemaToInputsSpec(schema);
         appInput.runnable = {
             type: 'runnableByPath',
             path,
-            runType: 'flow'
+            runType: 'flow',
+            schema
         };
+        appInput.fields = fields;
     }
 }
-function pickHubScript(path) {
+async function pickHubScript(path) {
     if (appInput.type === 'runnable') {
+        const schema = await loadSchemaFromTriggerable(path, 'hubscript');
+        const fields = schemaToInputsSpec(schema);
         appInput.runnable = {
             type: 'runnableByPath',
             path,
-            runType: 'hubscript'
+            runType: 'hubscript',
+            schema
         };
+        appInput.fields = fields;
     }
 }
 function pickInlineScript(name) {
@@ -60,6 +77,15 @@ function createScript() {
             componentInput?.runnable?.type === 'runnableByName') {
             acc.push(componentInput.runnable.name);
         }
+        if (componentInput?.type === 'tablecomponent') {
+            componentInput.actionButtons.forEach((actionButton) => {
+                if (actionButton.componentInput?.type === 'runnable') {
+                    if (actionButton.componentInput.runnable?.type === 'runnableByName') {
+                        acc.push(actionButton.componentInput.runnable.name);
+                    }
+                }
+            });
+        }
         return acc;
     }, []);
     const unusedNames = $app.unusedInlineScripts.map((x) => x.name);
@@ -138,6 +164,7 @@ function createScript() {
 		color="light"
 		variant="border"
 		startIcon={{ icon: faPlus }}
+		btnClasses="truncate"
 	>
 		Create an inline script
 	</Button>
@@ -146,6 +173,7 @@ function createScript() {
 		size="sm"
 		color="blue"
 		startIcon={{ icon: faMousePointer }}
+		btnClasses="truncate"
 	>
 		Select a script or flow
 	</Button>

package/components/apps/editorUtils.d.ts

@@ -0,0 +1 @@
+export declare function defaultCode(component: string, language: string): string | undefined;

package/components/apps/editorUtils.js

@@ -0,0 +1,11 @@
+export function defaultCode(component, language) {
+    if (component === 'tablecomponent' && language === 'deno') {
+        return `export async function main(x: string) {
+  return [
+    { foo: x, bar: 42 },
+    { foo: "static", bar: 84 }]
+}
+`;
+    }
+    return undefined;
+}

package/components/apps/gridUtils.js

@@ -3,7 +3,7 @@ const Breakpoints = {
     lg: 1024
 };
 const columnConfiguration = [
-    [Breakpoints.lg, 9],
+    [Breakpoints.lg, 12],
     [Breakpoints.sm, 3]
 ];
 const gridColumns = columnConfiguration.map((value) => value[1]);

package/components/apps/inputType.d.ts

@@ -1,6 +1,6 @@
 import type { staticValues } from './editor/componentsPanel/componentStaticValues';
 import type { InlineScript } from './types';
-export type InputType = 'text' | 'textarea' | 'number' | 'boolean' | 'select' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any';
+export type InputType = 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any';
 export type InputConnection = {
     componentId: string;
     path: string;
@@ -27,6 +27,7 @@ export type TemplateInput = {
 };
 type RunnableByPath = {
     path: string;
+    schema: any;
     runType: 'script' | 'flow' | 'hubscript';
     type: 'runnableByPath';
 };
@@ -38,17 +39,17 @@ type RunnableByName = {
 export type Runnable = RunnableByPath | RunnableByName | undefined;
 export type ResultInput = {
     runnable: Runnable;
-    fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput>;
+    fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
     type: 'runnable';
+    value?: any;
 };
 type AppInputSpec<T extends InputType, U, V extends InputType = never> = (StaticInput<U> | ConnectedInput | UserInput<U> | RowInput | ResultInput | TemplateInput) & InputConfiguration<T, U, V>;
 type InputConfiguration<T extends InputType, U, V extends InputType> = {
     fieldType: T;
-    defaultValue: U;
     subFieldType?: V;
     format?: string | undefined;
 };
-export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string> & {
+export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string> & {
     /**
      * One of the keys of `staticValues` from `lib/components/apps/editor/componentsPanel/componentStaticValues`
      */

package/components/apps/rx.d.ts

@@ -18,7 +18,7 @@ export type World = {
     connect: <T>(inputSpec: AppInput, next: (x: T) => void) => Input<T>;
     state: Writable<number>;
 };
-export declare function buildWorld(components: Record<string, string[]>, previousWorld: World | undefined): World;
+export declare function buildWorld(components: Record<string, string[]>, previousWorld: World | undefined, context: Record<string, any>): World;
 export declare function buildObservableWorld(): {
     connect: <T>(inputSpec: AppInput, next: (x: T) => void) => Input<T>;
     newOutput: <T_1>(id: string, name: string, state: Writable<number>, previousValue: T_1) => Output<T_1>;

package/components/apps/rx.js

@@ -1,8 +1,12 @@
 import { writable } from 'svelte/store';
-export function buildWorld(components, previousWorld) {
+export function buildWorld(components, previousWorld, context) {
     const newWorld = buildObservableWorld();
-    const outputsById = {};
     const state = writable(0);
+    const outputsById = {
+        ctx: Object.fromEntries(Object.entries(context).map(([k, v]) => {
+            return [k, newWorld.newOutput('ctx', k, state, v)];
+        }))
+    };
     for (const [k, outputs] of Object.entries(components)) {
         outputsById[k] = {};
         for (const o of outputs) {