feat: add templatev2 using new eval

windmill-labs · Aug 23, 2023 · 13d870f · 13d870f
1 parent 253956c
commit 13d870f
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 21 deletions.
diff --git a/frontend/src/lib/components/apps/components/display/AppText.svelte b/frontend/src/lib/components/apps/components/display/AppText.svelte
@@ -33,7 +33,10 @@
 
 	let result: string | undefined = undefined
 
-	if (componentInput?.type == 'template' && !isCodeInjection(componentInput.eval)) {
+	if (
+		componentInput?.type == 'template' ||
+		(componentInput?.type == 'templatev2' && !isCodeInjection(componentInput.eval))
+	) {
 		result = componentInput.eval
 		initializing = false
 	}
@@ -115,7 +118,10 @@
 
 	$: resolvedConfig.style && (component = getComponent())
 	$: resolvedConfig.style && (classes = getClasses())
-	$: initialValue = componentInput?.type == 'template' ? componentInput.eval : ''
+	$: initialValue =
+		componentInput?.type == 'template' || componentInput?.type == 'templatev2'
+			? componentInput.eval
+			: ''
 	$: editableValue = initialValue ?? ''
 
 	let rows = 1
@@ -161,7 +167,7 @@
 		}}
 		on:keydown|stopPropagation
 	>
-		{#if $mode == 'dnd' && editorMode && componentInput?.type == 'template'}
+		{#if $mode == 'dnd' && editorMode && (componentInput?.type == 'template' || componentInput?.type == 'templatev2')}
 			<AlignWrapper {horizontalAlignment} {verticalAlignment}>
 				<textarea
 					class={twMerge(
@@ -197,7 +203,7 @@
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
 						class="flex flex-wrap gap-2 pb-0.5 {$mode === 'dnd' &&
-						componentInput?.type == 'template'
+						(componentInput?.type == 'template' || componentInput?.type == 'templatev2')
 							? 'cursor-text'
 							: ''}"
 					>

diff --git a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
 	import { createEventDispatcher, getContext, onDestroy, tick } from 'svelte'
-	import type { AppInput, EvalAppInput, EvalV2AppInput, UploadAppInput } from '../../inputType'
+	import type {
+		AppInput,
+		EvalAppInput,
+		EvalV2AppInput,
+		TemplateV2Input,
+		UploadAppInput
+	} from '../../inputType'
 	import type { AppViewerContext, ListContext, RichConfiguration } from '../../types'
 	import { accessPropertyByPath } from '../../utils'
 	import { computeGlobalContext, eval_like } from './eval'
@@ -35,6 +41,13 @@
 		lastInput.connections.some((x) => x.componentId == 'row' || x.componentId == 'iter') &&
 		debounceEval()
 
+	$: lastInput &&
+		lastInput.type == 'templatev2' &&
+		isCodeInjection(lastInput.eval) &&
+		(fullContext.iter != undefined || fullContext.row != undefined) &&
+		lastInput.connections.some((x) => x.componentId == 'row' || x.componentId == 'iter') &&
+		debounceTemplate()
+
 	const dispatch = createEventDispatcher()
 
 	if (input == undefined) {
@@ -133,6 +146,7 @@
 	$: lastInput && lastInput.type == 'eval' && $stateId && $state && debounce2(debounceEval)
 
 	$: lastInput?.type == 'evalv2' && lastInput.expr && debounceEval()
+	$: lastInput?.type == 'templatev2' && lastInput.eval && debounceTemplate()
 
 	async function handleConnection() {
 		if (lastInput?.type === 'connected') {
@@ -165,6 +179,17 @@
 					previousConnectedValues[previousValueKey]
 				)
 			}
+		} else if (lastInput?.type == 'templatev2') {
+			const input = lastInput as TemplateV2Input
+			for (const c of input.connections ?? []) {
+				const previousValueKey = `${c.componentId}-${c.id}`
+				$worldStore?.connect<any>(
+					c,
+					onTemplateChange(previousValueKey),
+					`${id}-${key}`,
+					previousConnectedValues[previousValueKey]
+				)
+			}
 		} else if (lastInput?.type == 'upload') {
 			value = (lastInput as UploadAppInput).value
 		} else {
@@ -182,6 +207,13 @@
 		}
 	}
 
+	function onTemplateChange(previousValueKey: string) {
+		return (newValue) => {
+			previousConnectedValues[previousValueKey] = newValue
+			debounceTemplate()
+		}
+	}
+
 	async function evalExpr(input: EvalAppInput | EvalV2AppInput): Promise<any> {
 		if (iterContext && $iterContext.disabled) return
 		try {
@@ -208,7 +240,7 @@
 		if (iterContext && $iterContext.disabled) return
 
 		if (!input) return
-		if (input.type === 'template' && isCodeInjection(input.eval)) {
+		if ((input.type === 'template' || input.type == 'templatev2') && isCodeInjection(input.eval)) {
 			try {
 				const r = await eval_like(
 					'`' + input.eval + '`',
@@ -228,7 +260,7 @@
 			}
 		} else if (input.type === 'static') {
 			return input.value
-		} else if (input.type === 'template') {
+		} else if (input.type === 'template' || input.type == 'templatev2') {
 			return input.eval
 		}
 	}

diff --git a/frontend/src/lib/components/apps/editor/appUtilsInfer.ts b/frontend/src/lib/components/apps/editor/appUtilsInfer.ts
@@ -1,13 +1,13 @@
 import { parseOutputs } from '$lib/infer'
 import { deepEqual } from 'fast-equals'
-import type { EvalV2AppInput } from '../inputType'
+import type { EvalV2AppInput, TemplateV2Input } from '../inputType'
 import type { Writable } from 'svelte/store'
 import type { App } from '../types'
 
 export async function inferDeps(
 	code: string,
 	worldOutputs: Record<string, any>,
-	componentInput: EvalV2AppInput,
+	componentInput: EvalV2AppInput | TemplateV2Input,
 	app: Writable<App>
 ) {
 	const outputs = await parseOutputs(code, true)

diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
@@ -14,8 +14,9 @@
 
 	$: if (componentInput.fieldType == 'template' && componentInput.type == 'static') {
 		//@ts-ignore
-		componentInput.type = 'template'
+		componentInput.type = 'templatev2'
 		componentInput['eval'] = componentInput.value
+		componentInput['connections'] = [{ componentId: 'ctx', id: 'email' }]
 	}
 
 	let clientWidth: number
@@ -31,13 +32,23 @@
 				bind:selected={componentInput.type}
 			>
 				{#if componentInput.fieldType === 'template'}
-					<ToggleButton
-						tooltip={`Templated string (use \$\{<output>.x\} )`}
-						value="template"
-						disabled={disableStatic}
-						icon={CurlyBraces}
-						label="Template"
-					/>
+					{#if componentInput.type == 'template'}
+						<ToggleButton
+							tooltip={`Templated string (use \$\{<output>.x\} )`}
+							value="template"
+							disabled={disableStatic}
+							icon={CurlyBraces}
+							label="Template"
+						/>
+					{:else}
+						<ToggleButton
+							tooltip={`Templated string (use \$\{<output>.x\} )`}
+							value="templatev2"
+							disabled={disableStatic}
+							icon={CurlyBraces}
+							label="Template"
+						/>
+					{/if}
 				{:else}
 					<ToggleButton
 						label="Static"

diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -29,6 +29,7 @@
 	import { Delete, ExternalLink } from 'lucide-svelte'
 	import GridCondition from './GridCondition.svelte'
 	import { isTriggerable } from './script/utils'
+	import { inferDeps } from '../appUtilsInfer'
 
 	export let componentSettings: { item: GridItem; parent: string | undefined } | undefined =
 		undefined
@@ -94,7 +95,9 @@
 	let viewCssOptions = false
 
 	$: extraLib =
-		componentSettings?.item?.data?.componentInput?.type === 'template' && $worldStore
+		(componentSettings?.item?.data?.componentInput?.type === 'template' ||
+			componentSettings?.item?.data?.componentInput?.type === 'templatev2') &&
+		$worldStore
 			? buildExtraLib(
 					$worldStore?.outputsById ?? {},
 					componentSettings?.item?.data?.id,
@@ -179,14 +182,39 @@
 								format={componentInput?.format}
 								bind:componentInput={componentSettings.item.data.componentInput}
 							/>
-						{:else if componentSettings.item.data.componentInput.type === 'template' && componentSettings.item.data.componentInput !== undefined}
+						{:else if componentSettings.item.data?.componentInput?.type === 'template' || componentSettings.item.data?.componentInput?.type === 'templatev2'}
 							<div class="py-1 min-h-[28px] rounded border border-1 border-gray-500">
 								<TemplateEditor
 									fontSize={12}
 									bind:code={componentSettings.item.data.componentInput.eval}
 									{extraLib}
+									on:change={(e) => {
+										if (componentSettings?.item.data.componentInput?.type === 'templatev2') {
+											inferDeps(
+												'`' + e.detail.code + '`',
+												$worldStore.outputsById,
+												componentSettings?.item.data.componentInput,
+												app
+											)
+										}
+									}}
 								/>
 							</div>
+							{#if componentSettings.item.data?.componentInput?.type === 'templatev2'}
+								{#if componentSettings.item.data?.componentInput.connections?.length > 0}
+									<div class="flex flex-wrap gap-2 items-center">
+										<div class="text-2xs text-tertiary">Re-evaluated on changes to:</div>
+										<div class="flex flex-wrap gap-1">
+											{#each componentSettings.item.data?.componentInput.connections as connection (connection.componentId + '-' + connection.id)}
+												<span
+													class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border"
+													>{connection.componentId + '.' + connection.id}</span
+												>
+											{/each}
+										</div>
+									</div>
+								{/if}
+							{/if}
 						{:else if componentSettings.item.data.componentInput.type === 'connected' && component.componentInput !== undefined}
 							<ConnectedInputEditor
 								bind:componentInput={componentSettings.item.data.componentInput}

diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
@@ -58,7 +58,7 @@
 			}}
 		/>
 	</div>
-	{#if componentInput.connections.length > 0}
+	{#if componentInput.connections?.length > 0}
 		<div class="flex flex-wrap gap-2 items-center">
 			<div class="text-2xs text-tertiary">Re-evaluated on changes to:</div>
 			<div class="flex flex-wrap gap-1">

diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte
@@ -65,7 +65,7 @@
 		<div class="text-xs font-semibold text-secondary mb-1">Events</div>
 		<div class="flex flex-row gap-2 flex-wrap">
 			{#each triggerEvents as triggerEvent}
-				<span class={classNames(badgeClass, colors['green'])}>{triggerEvent}</span>
+				<span class={classNames(badgeClass)}>{triggerEvent}</span>
 			{/each}
 		</div>
 	{/if}

diff --git a/frontend/src/lib/components/apps/inputType.ts b/frontend/src/lib/components/apps/inputType.ts
@@ -79,6 +79,12 @@ export type TemplateInput = {
 	type: 'template'
 }
 
+export type TemplateV2Input = {
+	eval: string
+	type: 'templatev2'
+	connections: InputConnectionEval[]
+}
+
 export type RunnableByPath = {
 	name: string
 	path: string
@@ -119,6 +125,7 @@ export type AppInputSpec<T extends InputType, U, V extends InputType = never> =
 	| UploadInput
 	| ResultInput
 	| TemplateInput
+	| TemplateV2Input
 ) &
 	InputConfiguration<T, V>