windmill-components 1.75.0 → 1.77.0

package/components/apps/components/display/table/AppAggridTable.svelte

@@ -86,7 +86,10 @@ function onCellValueChanged(event) {
 		</div>
 	{:else if result != undefined}
 		<Alert title="Parsing issues" type="error" size="xs">
-			The result should be an array of objects
+			The result should be an array of objects, received:
+			<pre class="overflow-auto">
+				{JSON.stringify(result)}
+			</pre>
 		</Alert>
 	{/if}
 </RunnableWrapper>

package/components/apps/components/display/table/AppTable.svelte

@@ -248,7 +248,10 @@ $: css = concatCustomCss($app.css?.tablecomponent, customCss);
 		</div>
 	{:else if result != undefined}
 		<Alert title="Parsing issues" type="error" size="xs">
-			The result should be an array of objects
+			The result should be an array of objects. Received:
+			<pre class="overflow-auto">
+				{JSON.stringify(result)}
+			</pre>
 		</Alert>
 	{/if}
 </RunnableWrapper>

package/components/apps/components/helpers/HiddenComponent.svelte

@@ -3,6 +3,7 @@ export let id;
 export let name;
 export let inlineScript;
 export let fields;
+export let autoRefresh = false;
 let result = undefined;
 export const staticOutputs = ['result', 'loading'];
 </script>
@@ -11,6 +12,7 @@ export const staticOutputs = ['result', 'loading'];
 	render={false}
 	{id}
 	{fields}
+	{autoRefresh}
 	bind:result
 	runnable={{
 		name,
@@ -18,6 +20,7 @@ export const staticOutputs = ['result', 'loading'];
 		type: 'runnableByName'
 	}}
 	wrapperClass="hidden"
+	recomputable
 >
 	<slot />
 </RunnableComponent>

package/components/apps/components/helpers/HiddenComponent.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         name: string;
         inlineScript: InlineScript | undefined;
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        autoRefresh?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/helpers/InputValue.svelte

@@ -1,11 +1,18 @@
 <script>import { isCodeInjection } from '../../../flows/utils';
 import { deepEqual } from 'fast-equals';
-import { getContext } from 'svelte';
+import { createEventDispatcher, getContext } from 'svelte';
 import { accessPropertyByPath } from '../../utils';
+import { computeGlobalContext, eval_like } from './eval';
 export let input;
 export let value;
 export let id = undefined;
 export let error = '';
+export let extraContext = {};
+const { componentControl } = getContext('AppViewerContext');
+const dispatch = createEventDispatcher();
+if (input == undefined) {
+    dispatch('done');
+}
 let lastInput = input ? JSON.parse(JSON.stringify(input)) : undefined;
 $: if (input && !deepEqual(input, lastInput)) {
     lastInput = JSON.parse(JSON.stringify(input));
@@ -14,8 +21,8 @@ $: if (input && !deepEqual(input, lastInput)) {
         lastInput.value = input?.['value'];
     }
 }
-const { worldStore } = getContext('AppViewerContext');
-$: state = $worldStore?.state;
+const { worldStore, state, mode } = getContext('AppViewerContext');
+$: stateId = $worldStore?.stateId;
 let timeout = undefined;
 const debounce_ms = 50;
 function debounce(cb) {
@@ -27,21 +34,26 @@ function debounce(cb) {
 $: lastInput && $worldStore && debounce(handleConnection);
 $: lastInput &&
     lastInput.type == 'template' &&
+    $stateId &&
     $state &&
-    debounce(() => (value = getValue(lastInput)));
+    debounce(async () => {
+        value = await getValue(lastInput);
+        dispatch('done');
+    });
 $: lastInput &&
     lastInput.type == 'eval' &&
+    $stateId &&
     $state &&
-    debounce(() => (value = evalExpr(lastInput)));
-function handleConnection() {
+    debounce(async () => (value = await evalExpr(lastInput)));
+async function handleConnection() {
     if (lastInput.type === 'connected') {
-        $worldStore?.connect(lastInput, onValueChange);
+        $worldStore?.connect(lastInput, onValueChange, id);
     }
     else if (lastInput.type === 'static' || lastInput.type == 'template') {
-        value = getValue(lastInput);
+        value = await getValue(lastInput);
     }
     else if (lastInput.type == 'eval') {
-        value = evalExpr(lastInput);
+        value = await evalExpr(lastInput);
     }
     else if (lastInput.type == 'upload') {
         value = lastInput.value;
@@ -49,10 +61,11 @@ function handleConnection() {
     else {
         value = undefined;
     }
+    dispatch('done');
 }
-function evalExpr(input) {
+async function evalExpr(input) {
     try {
-        const r = eval_like(input.expr, computeGlobalContext());
+        const r = await eval_like(input.expr, computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore);
         error = '';
         return r;
     }
@@ -61,20 +74,10 @@ function evalExpr(input) {
         return value;
     }
 }
-function computeGlobalContext() {
-    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()]))
-        ];
-    }));
-}
-export function getValue(input) {
+async function getValue(input) {
     if (input.type === 'template' && isCodeInjection(input.eval)) {
         try {
-            const r = eval_like('`' + input.eval + '`', computeGlobalContext());
+            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, id, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore);
             error = '';
             return r;
         }
@@ -89,26 +92,6 @@ export function getValue(input) {
         return 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) {
     if (lastInput.type === 'connected' && newValue !== undefined && newValue !== null) {
         const { connection } = lastInput;

package/components/apps/components/helpers/InputValue.svelte.d.ts

@@ -2,13 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
 declare const __propDef: {
     props: {
-        input: AppInput;
+        input: AppInput | undefined;
         value: string | number | boolean | Record<string | number, any> | undefined;
         id?: string | undefined;
         error?: string | undefined;
-        getValue?: ((input: AppInput) => any) | undefined;
+        extraContext?: Record<string, any> | undefined;
     };
     events: {
+        done: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
@@ -17,6 +19,5 @@ export type InputValueProps = typeof __propDef.props;
 export type InputValueEvents = typeof __propDef.events;
 export type InputValueSlots = typeof __propDef.slots;
 export default class InputValue extends SvelteComponentTyped<InputValueProps, InputValueEvents, InputValueSlots> {
-    get getValue(): (input: AppInput) => any;
 }
 export {};

package/components/apps/components/helpers/RefreshButton.svelte

@@ -1,6 +1,4 @@
-<script>import Button from '../../../common/button/Button.svelte';
-import { faRefresh } from '@fortawesome/free-solid-svg-icons';
-import { RefreshCcw, RefreshCw } from 'lucide-svelte';
+<script>import { RefreshCw } from 'lucide-svelte';
 import { getContext } from 'svelte';
 export let componentId;
 const { runnableComponents, worldStore } = getContext('AppViewerContext');
@@ -10,6 +8,7 @@ async function refresh() {
 }
 let loading = false;
 $: $worldStore?.outputsById[componentId]?.['loading']?.subscribe({
+    id: 'refresh-' + componentId,
     next: (value) => {
         loading = value;
     }

package/components/apps/components/helpers/RunnableComponent.svelte

@@ -5,9 +5,10 @@ import SchemaForm from '../../../SchemaForm.svelte';
 import TestJobLoader from '../../../TestJobLoader.svelte';
 import { AppService } from '../../../../gen';
 import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '../../../../utils';
-import { Bug, Loader2 } from 'lucide-svelte';
-import { getContext, onMount } from 'svelte';
-import { fade } from 'svelte/transition';
+import { Bug } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
+import { computeGlobalContext, eval_like } from './eval';
 import InputValue from './InputValue.svelte';
 import RefreshButton from './RefreshButton.svelte';
 // Component props
@@ -25,15 +26,24 @@ export let initializing = undefined;
 export let gotoUrl = undefined;
 export let gotoNewTab = undefined;
 export let render;
-const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId } = getContext('AppViewerContext');
-onMount(() => {
-    if (autoRefresh) {
+export let recomputable = false;
+export let recomputeIds = [];
+const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId, state, componentControl } = getContext('AppViewerContext');
+$: autoRefresh && handleAutorefresh();
+if (recomputable) {
+    $runnableComponents[id] = async () => {
+        await executeComponent(true);
+    };
+    $runnableComponents = $runnableComponents;
+}
+function handleAutorefresh() {
+    if (autoRefresh && $worldStore) {
         $runnableComponents[id] = async () => {
             await executeComponent(true);
         };
         executeComponent(true);
     }
-});
+}
 let args = undefined;
 let testIsLoading = false;
 let runnableInputValues = {};
@@ -56,22 +66,23 @@ let currentStaticValues = lazyStaticValues;
 $: fields && (currentStaticValues = computeStaticValues());
 $: if (JSON.stringify(currentStaticValues) != JSON.stringify(lazyStaticValues)) {
     lazyStaticValues = currentStaticValues;
+    refreshIfAutoRefresh();
+}
+$: fields && (lazyStaticValues = computeStaticValues());
+$: (runnableInputValues || extraQueryParams || args) && testJobLoader && refreshIfAutoRefresh();
+$: runnable?.type == 'runnableByName' &&
+    runnable.inlineScript?.language == 'frontend' &&
+    ($stateId || $state) &&
+    refreshIfAutoRefresh();
+function refreshIfAutoRefresh() {
     if (autoRefresh) {
         setDebouncedExecute();
     }
 }
-$: fields && (lazyStaticValues = computeStaticValues());
-$: (runnableInputValues || extraQueryParams || args) &&
-    autoRefresh &&
-    testJobLoader &&
-    setDebouncedExecute();
 // Test job internal state
 let testJob = undefined;
 let testJobLoader = undefined;
-$: outputs = $worldStore?.outputsById[id];
-$: if (outputs?.loading != undefined) {
-    outputs.loading.set(false, true);
-}
+$: outputs = initOutput($worldStore, id, { result: undefined, loading: false });
 $: outputs?.loading?.set(testIsLoading);
 $: schemaStripped = stripSchema(fields, $stateId);
 function stripSchema(inputs, s) {
@@ -102,6 +113,19 @@ $: disabledArgs = Object.keys(fields ?? {}).reduce((disabledArgsAccumulator, inp
     return disabledArgsAccumulator;
 }, []);
 async function executeComponent(noToast = false) {
+    if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
+        outputs?.loading?.set(true);
+        try {
+            const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, id, {}), false, $state, $mode == 'dnd', $componentControl, $worldStore);
+            setResult(r);
+            $state = $state;
+        }
+        catch (e) {
+            sendUserToast('Error running frontend script: ' + e.message, true);
+        }
+        outputs?.loading?.set(false);
+        return;
+    }
     if (noBackend) {
         if (!noToast) {
             sendUserToast('This app is not connected to a windmill backend, it is a static preview');
@@ -167,6 +191,26 @@ function recordError(error) {
         };
     }
 }
+function setResult(res) {
+    outputs.result?.set(res);
+    result = res;
+    const previousJobId = Object.keys($errorByComponent).find((key) => $errorByComponent[key].componentId === id);
+    if (previousJobId && !result?.error) {
+        delete $errorByComponent[previousJobId];
+        $errorByComponent = $errorByComponent;
+    }
+    if (gotoUrl && gotoUrl != '' && result?.error == undefined) {
+        if (gotoNewTab) {
+            window.open(gotoUrl, '_blank');
+        }
+        else {
+            goto(gotoUrl);
+        }
+    }
+    if (recomputeIds) {
+        recomputeIds.map((id) => $runnableComponents?.[id]?.());
+    }
+}
 $: result?.error && recordError(result.error);
 </script>
 
@@ -183,24 +227,7 @@ $: result?.error && recordError(result.error);
 			const startedAt = new Date(testJob.started_at).getTime()
 			if (startedAt > lastStartedAt) {
 				lastStartedAt = startedAt
-				outputs.result?.set(testJob?.result)
-				result = testJob.result
-
-				const previousJobId = Object.keys($errorByComponent).find(
-					(key) => $errorByComponent[key].componentId === id
-				)
-
-				if (previousJobId && !result?.error) {
-					delete $errorByComponent[previousJobId]
-					$errorByComponent = $errorByComponent
-				}
-				if (gotoUrl && gotoUrl != '' && result?.error == undefined) {
-					if (gotoNewTab) {
-						window.open(gotoUrl, '_blank')
-					} else {
-						goto(gotoUrl)
-					}
-				}
+				setResult(e.detail.result)
 			}
 		}
 	}}

package/components/apps/components/helpers/RunnableComponent.svelte.d.ts

@@ -16,6 +16,8 @@ declare const __propDef: {
         gotoUrl?: string | undefined;
         gotoNewTab?: boolean | undefined;
         render: boolean;
+        recomputable?: boolean | undefined;
+        recomputeIds?: string[] | undefined;
         runComponent?: (() => Promise<void>) | undefined;
     };
     events: {

package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -16,6 +16,7 @@ export let runnableStyle = '';
 export let goto = undefined;
 export let gotoNewTab = undefined;
 export let render;
+export let recomputeIds = [];
 const { staticExporter, noBackend } = getContext('AppViewerContext');
 $: if (initializing && result) {
     initializing = false;
@@ -35,6 +36,7 @@ function isRunnableDefined() {
 	<slot />
 {:else if componentInput.type === 'runnable' && isRunnableDefined()}
 	<RunnableComponent
+		{recomputeIds}
 		gotoUrl={goto}
 		{gotoNewTab}
 		{flexWrap}

package/components/apps/components/helpers/RunnableWrapper.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
         goto?: string | undefined;
         gotoNewTab?: boolean | undefined;
         render: boolean;
+        recomputeIds?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/eval.d.ts

@@ -0,0 +1,5 @@
+import type { World } from '../../rx';
+export declare function computeGlobalContext(world: World | undefined, id: string | undefined, extraContext?: any): any;
+export declare function eval_like(text: string, context: {} | undefined, noReturn: boolean, state: Record<string, any>, editor: boolean, controlComponents: Record<string, {
+    setTab?: (index: number) => void;
+}>, worldStore: World | undefined): Promise<any>;

package/components/apps/components/helpers/eval.js

@@ -0,0 +1,57 @@
+import { sendUserToast } from '../../../../utils';
+export function computeGlobalContext(world, id, extraContext = {}) {
+    return {
+        ...Object.fromEntries(Object.entries(world?.outputsById ?? {})
+            .filter(([k, _]) => k != id && k != 'state')
+            .map(([key, value]) => {
+            return [
+                key,
+                Object.fromEntries(Object.entries(value ?? {}).map((x) => [x[0], x[1].peak()]))
+            ];
+        })),
+        ...extraContext
+    };
+}
+function create_context_function_template(eval_string, context, noReturn) {
+    return `
+return async function (context, state, goto, setTab) {
+"use strict";
+${Object.keys(context).length > 0
+        ? `let ${Object.keys(context).map((key) => ` ${key} = context['${key}']`)};`
+        : ``}
+${noReturn ? `return ${eval_string}` : eval_string}
+}                                                                                                                   
+`;
+}
+function make_context_evaluator(eval_string, context, noReturn) {
+    let template = create_context_function_template(eval_string, context, noReturn);
+    let functor = Function(template);
+    return functor();
+}
+export async function eval_like(text, context = {}, noReturn, state, editor, controlComponents, worldStore) {
+    const proxiedState = new Proxy(state, {
+        set(target, key, value) {
+            if (typeof key !== 'string') {
+                throw new Error('Invalid key');
+            }
+            let o = worldStore?.newOutput('state', key, value);
+            o?.set(value);
+            target[key] = value;
+            return true;
+        }
+    });
+    let evaluator = make_context_evaluator(text, context, noReturn);
+    return await evaluator(context, proxiedState, async (x, newTab) => {
+        if (newTab || editor) {
+            if (!newTab) {
+                sendUserToast('In editor mode, `goto` opens a new tab to prevent losing your work. To test the redirection , use the preview mode.');
+            }
+            window.open(x, '_blank');
+        }
+        else {
+            await newTab(x);
+        }
+    }, (id, index) => {
+        controlComponents[id]?.setTab?.(index);
+    });
+}

package/components/apps/components/layout/AppContainer.svelte

@@ -1,13 +1,11 @@
 <script>import { getContext } from 'svelte';
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { concatCustomCss } from '../../utils';
-import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let configuration;
 export let componentContainerHeight;
 export let customCss = undefined;
 export let render;
-let noPadding = undefined;
 export const staticOutputs = [];
 const { app, focusedGrid, selectedComponent } = getContext('AppViewerContext');
 function onFocus() {
@@ -20,13 +18,10 @@ $: $selectedComponent === id && onFocus();
 $: css = concatCustomCss($app.css?.containercomponent, customCss);
 </script>
 
-<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
-
-<div>
+<div class="w-full h-full">
 	{#if $app.subgrids?.[`${id}-0`]}
 		<SubGridEditor
 			visible={render}
-			{noPadding}
 			{id}
 			class={css?.container.class}
 			style={css?.container.style}

package/components/apps/components/layout/AppDrawer.svelte

@@ -15,7 +15,6 @@ export let noWFull = false;
 export let render;
 const { app, focusedGrid, selectedComponent } = getContext('AppViewerContext');
 let gridContent = undefined;
-let noPadding = undefined;
 let drawerTitle = undefined;
 let appDrawer;
 let labelValue;
@@ -54,7 +53,6 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 </div>
 
 <InputValue {id} input={configuration.gridContent} bind:value={gridContent} />
-<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
 <InputValue {id} input={configuration.drawerTitle} bind:value={drawerTitle} />
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
 <InputValue {id} input={configuration.color} bind:value={color} />
@@ -73,7 +71,6 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 			{#if $app.subgrids?.[`${id}-0`]}
 				<SubGridEditor
 					visible={open && render}
-					{noPadding}
 					{id}
 					class={css?.container.class}
 					style={css?.container.style}

package/components/apps/components/layout/AppSplitpanes.svelte

@@ -11,9 +11,7 @@ export let customCss = undefined;
 export let horizontal = false;
 export let panes;
 export let render;
-const { app, focusedGrid, selectedComponent } = getContext('AppViewerContext');
-const { componentControl } = getContext('AppEditorContext');
-let noPadding = undefined;
+const { app, focusedGrid, selectedComponent, componentControl } = getContext('AppViewerContext');
 function onFocus() {
     $focusedGrid = {
         parentComponentId: id,
@@ -54,8 +52,6 @@ $: {
 }
 </script>
 
-<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
-
 <div class="h-full w-full border" on:pointerdown|stopPropagation>
 	<Splitpanes {horizontal}>
 		{#each sumedup as paneSize, index (index)}
@@ -64,7 +60,6 @@ $: {
 					<SubGridEditor
 						visible={render}
 						noYPadding
-						{noPadding}
 						{id}
 						shouldHighlight={$focusedGrid?.subGridIndex === index}
 						class={css?.container.class}