diff --git a/frontend/src/app.css b/frontend/src/app.css index 5a9474a3ba..ed9593db2a 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -39,6 +39,10 @@ .monaco-editor textarea:focus { box-shadow: none !important; } + + .monaco-editor span.mtk20 { + color: black !important; + } } @layer components { diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte index b80f0ff5ab..764f6ad789 100644 --- a/frontend/src/lib/components/InputTransformForm.svelte +++ b/frontend/src/lib/components/InputTransformForm.svelte @@ -14,6 +14,9 @@ import type VariableEditor from './VariableEditor.svelte' import type ItemPicker from './ItemPicker.svelte' import type { InputTransform } from '$lib/gen' + import TemplateEditor from './TemplateEditor.svelte' + import Tooltip from './Tooltip.svelte' + import { escape } from 'svelte/internal' export let schema: Schema export let arg: InputTransform | any @@ -99,6 +102,10 @@ } const { focusProp, propPickerConfig } = getContext('PropPickerWrapper') + + $: isStaticTemplate(inputCat) && propertyType == 'static' && setPropertyType(arg.value) + const openBracket = '${' + const closeBracket = '}' {#if arg != undefined} @@ -174,7 +181,11 @@ > {#if isStaticTemplate(inputCat)} - {'${} '}TemplatableWrite javascript expressions between "{openBracket}" and "{closeBracket}". You may + refer to contextual objects like 'flow_input', or 'result' or functions like + 'resource' and 'variable' + {:else} Static @@ -207,7 +218,11 @@ Connect input → {/if} - {#if propertyType === undefined || propertyType == 'static'} + {#if isStaticTemplate(inputCat) && propertyType == 'static'} +
+ +
+ {:else if propertyType === undefined || propertyType == 'static'} { - if (isStaticTemplate(inputCat)) { - setPropertyType(e.detail.rawValue) - } - }} {variableEditor} {itemPicker} bind:pickForField diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte index 33ad78bee7..ad90af3298 100644 --- a/frontend/src/lib/components/Path.svelte +++ b/frontend/src/lib/components/Path.svelte @@ -299,7 +299,7 @@ } else if (kind === 'group') { meta.owner = 'all' } else { - meta.owner = $userStore?.username ?? '' + meta.owner = $userStore?.username?.split('@')[0] ?? '' } } }} diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte index 3af46c1288..81f8c4c233 100644 --- a/frontend/src/lib/components/SimpleEditor.svelte +++ b/frontend/src/lib/components/SimpleEditor.svelte @@ -1,5 +1,6 @@ + + + +
+ + diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte index e5800676a3..aadee5e28c 100644 --- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte +++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte @@ -26,9 +26,9 @@ let runnableComponent: RunnableComponent - - - + + + - - + + {#if result} diff --git a/frontend/src/lib/components/apps/components/dataDisplay/AppPieChart.svelte b/frontend/src/lib/components/apps/components/dataDisplay/AppPieChart.svelte index c30fa84461..53f6e777ef 100644 --- a/frontend/src/lib/components/apps/components/dataDisplay/AppPieChart.svelte +++ b/frontend/src/lib/components/apps/components/dataDisplay/AppPieChart.svelte @@ -63,8 +63,8 @@ } - - + + {#if result} diff --git a/frontend/src/lib/components/apps/components/dateInputs/AppDateInput.svelte b/frontend/src/lib/components/apps/components/dateInputs/AppDateInput.svelte index daae340ad2..dbfba0c3d8 100644 --- a/frontend/src/lib/components/apps/components/dateInputs/AppDateInput.svelte +++ b/frontend/src/lib/components/apps/components/dateInputs/AppDateInput.svelte @@ -27,9 +27,9 @@ } - - - + + + - - - + + + + import { isCodeInjection } from '$lib/components/flows/utils' import { getContext } from 'svelte' import type { AppInput } from '../../inputType' import type { AppEditorContext } from '../../types' @@ -8,25 +9,79 @@ export let input: AppInput export let value: T + export let id: string | undefined = undefined const { worldStore } = getContext('AppEditorContext') + $: state = $worldStore?.state $: input && $worldStore && handleConnection() + $: input && $state && input.type == 'template' && setValue() + function handleConnection() { if (input.type === 'connected') { - $worldStore?.connect(input, onValueChange) - } else if (input.type === 'static') { + $worldStore?.connect(input, onValueChange, value) + } else if (input.type === 'static' || input.type == 'template') { setValue() } else { value = undefined } } - function setValue() { - if (input.type === 'static') { - value = input.value + function computeGlobalContext() { + Object.prototype.toString = function () { + return JSON.stringify(this) } + return Object.fromEntries( + Object.entries($worldStore?.outputsById ?? {}) + .filter(([k, _]) => k != id) + .map(([key, value]) => { + return [ + key, + Object.fromEntries(Object.entries(value ?? {}).map((x) => [x[0], x[1].peak()])) + ] + }) + ) + } + + function setValue() { + console.log(computeGlobalContext()) + if (input.type === 'template' && isCodeInjection(input.eval)) { + try { + value = eval_like('`' + input.eval + '`', computeGlobalContext()) + } catch (e) { + value = e.message + } + } else if (input.type === 'static') { + value = input.value + } else if (input.type === 'template') { + value = input.eval + } + } + + function create_context_function_template(eval_string, context) { + return ` + return function (context) { + "use strict"; + ${ + Object.keys(context).length > 0 + ? `let ${Object.keys(context).map((key) => ` ${key} = context['${key}']`)};` + : `` + } + return ${eval_string}; + } + ` + } + + function make_context_evaluator(eval_string, context) { + let template = create_context_function_template(eval_string, context) + let functor = Function(template) + return functor() + } + + function eval_like(text, context = {}) { + let evaluator = make_context_evaluator(text, context) + return evaluator(context) } function onValueChange(newValue: any): void { diff --git a/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte index fd0789d090..53d8c3eb0c 100644 --- a/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte @@ -26,7 +26,7 @@ {#if componentInput.type !== 'runnable'} - + {/if} diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte index ccb3305462..cb29b83223 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte @@ -199,7 +199,7 @@ {#each Object.keys(inputs ?? {}) as key} - + {/each} - + - + - - - + + + - +
@@ -110,7 +110,7 @@ - +
diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte index 646783ac29..6985a1a764 100644 --- a/frontend/src/lib/components/apps/editor/AppPreview.svelte +++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte @@ -49,7 +49,7 @@ mounted = true }) - $: mounted && ($worldStore = buildWorld($staticOutputs)) + $: mounted && ($worldStore = buildWorld($staticOutputs, undefined)) $: width = $breakpoint === 'sm' ? 'w-[640px]' : 'w-full ' diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte index 1e2a321431..bb8e577815 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte @@ -34,7 +34,7 @@ - {#each Object.entries($staticOutputs) as [componentId, outputs], index} + {#each Object.entries($staticOutputs) as [componentId, outputs] (componentId)} {#if outputs.length > 0 && $worldStore?.outputsById[componentId]}