windmill-components 1.60.4 → 1.83.1

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

@@ -1,36 +1,73 @@
 <script>import { isCodeInjection } from '../../../flows/utils';
-import { getContext } from 'svelte';
+import { deepEqual } from 'fast-equals';
+import { createEventDispatcher, getContext, onDestroy } from 'svelte';
 import { accessPropertyByPath } from '../../utils';
+import { computeGlobalContext, eval_like } from './eval';
 export let input;
 export let value;
 export let id = undefined;
-export let row = {};
 export let error = '';
-const { worldStore } = getContext('AppEditorContext');
-$: state = $worldStore?.state;
-$: input && $worldStore && row && handleConnection();
-$: input && input.type == 'template' && $state && (value = getValue(input));
-$: input && input.type == 'eval' && $state && (value = evalExpr(input));
-function handleConnection() {
-    if (input.type === 'connected') {
-        $worldStore?.connect(input, onValueChange);
+export let extraContext = {};
+export let key = '';
+const { componentControl, runnableComponents } = getContext('AppViewerContext');
+const dispatch = createEventDispatcher();
+if (input == undefined) {
+    dispatch('done');
+}
+let lastInput = input ? JSON.parse(JSON.stringify(input)) : undefined;
+onDestroy(() => (lastInput = undefined));
+$: if (input && !deepEqual(input, lastInput)) {
+    lastInput = JSON.parse(JSON.stringify(input));
+    // Needed because of file uploads
+    if (input?.['value'] instanceof ArrayBuffer) {
+        lastInput.value = input?.['value'];
+    }
+}
+const { worldStore, state, mode } = getContext('AppViewerContext');
+$: stateId = $worldStore?.stateId;
+let timeout = undefined;
+const debounce_ms = 50;
+function debounce(cb) {
+    if (timeout) {
+        clearTimeout(timeout);
+    }
+    timeout = setTimeout(cb, debounce_ms);
+}
+$: lastInput && $worldStore && debounce(handleConnection);
+$: lastInput &&
+    lastInput.type == 'template' &&
+    $stateId &&
+    $state &&
+    debounce(async () => {
+        value = await getValue(lastInput);
+        dispatch('done');
+    });
+$: lastInput &&
+    lastInput.type == 'eval' &&
+    $stateId &&
+    $state &&
+    debounce(async () => (value = await evalExpr(lastInput)));
+async function handleConnection() {
+    if (lastInput?.type === 'connected') {
+        $worldStore?.connect(lastInput, onValueChange, `${id}-${key}`);
     }
-    else if (input.type === 'row') {
-        setTimeout(() => (value = row?.[input['column']]), 0);
+    else if (lastInput?.type === 'static' || lastInput?.type == 'template') {
+        value = await getValue(lastInput);
     }
-    else if (input.type === 'static' || input.type == 'template') {
-        setTimeout(() => (value = getValue(input)), 0);
+    else if (lastInput?.type == 'eval') {
+        value = await evalExpr(lastInput);
     }
-    else if (input.type == 'eval') {
-        setTimeout(() => ((value = evalExpr(input)), 0));
+    else if (lastInput?.type == 'upload') {
+        value = lastInput.value;
     }
     else {
-        setTimeout(() => (value = undefined), 0);
+        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, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
         error = '';
         return r;
     }
@@ -39,21 +76,12 @@ 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()]))
-        ];
-    })
-        .concat(row ? [['row', row]] : []));
-}
-export function getValue(input) {
+async function getValue(input) {
+    if (!input)
+        return;
     if (input.type === 'template' && isCodeInjection(input.eval)) {
         try {
-            const r = eval_like('`' + input.eval + '`', computeGlobalContext());
+            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
             error = '';
             return r;
         }
@@ -68,29 +96,9 @@ 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 (input.type === 'connected' && newValue !== undefined && newValue !== null) {
-        const { connection } = input;
+    if (lastInput?.type === 'connected' && newValue !== undefined && newValue !== null) {
+        const { connection } = lastInput;
         if (!connection) {
             // No connection
             return;

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

@@ -1,15 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { RichConfiguration } from '../../types';
 declare const __propDef: {
     props: {
-        input: AppInput;
+        input: AppInput | RichConfiguration;
         value: string | number | boolean | Record<string | number, any> | undefined;
         id?: string | undefined;
-        row?: Record<string, any> | undefined;
         error?: string | undefined;
-        getValue?: ((input: AppInput) => any) | undefined;
+        extraContext?: Record<string, any> | undefined;
+        key?: string | undefined;
     };
     events: {
+        done: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
@@ -18,6 +21,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/Loader.svelte

@@ -0,0 +1,18 @@
+<script>import { Loader2 } from 'lucide-svelte';
+import { fade } from 'svelte/transition';
+export let loading;
+</script>
+
+{#if !loading}
+	<slot />
+{:else}
+	<div class="w-full h-full">
+		<div
+			out:fade|local={{ duration: 50 }}
+			class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
+		>
+			<Loader2 class="animate-spin" size={16} />
+			<span class="text-xs mt-1">Loading</span>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        loading: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type LoaderProps = typeof __propDef.props;
+export type LoaderEvents = typeof __propDef.events;
+export type LoaderSlots = typeof __propDef.slots;
+export default class Loader extends SvelteComponentTyped<LoaderProps, LoaderEvents, LoaderSlots> {
+}
+export {};

package/components/apps/components/helpers/NonRunnableComponent.svelte

@@ -1,16 +1,16 @@
-<script>import { getContext } from 'svelte';
+<script>import { Loader2 } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import { fade } from 'svelte/transition';
 import InputValue from './InputValue.svelte';
 export let componentInput;
 export let id;
 export let result;
+export let render;
 // Sync the result to the output
-const { worldStore } = getContext('AppEditorContext');
-$: outputs = $worldStore?.outputsById[id];
-$: if (outputs?.loading != undefined) {
-    outputs.loading.set(false, true);
-}
+const { worldStore } = getContext('AppViewerContext');
+$: outputs = $worldStore?.outputsById?.[id];
 function setOutput(v) {
-    outputs.result?.set(v, true);
+    outputs?.result?.set(v, true);
 }
 $: result && outputs && setOutput(result);
 </script>
@@ -19,4 +19,8 @@ $: result && outputs && setOutput(result);
 	<InputValue {id} input={componentInput} bind:value={result} />
 {/if}
 
-<slot />
+{#if render}
+	<slot />
+{:else}
+	<div class="w-full h-full" />
+{/if}

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         componentInput: AppInput;
         id: string;
         result: any;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,19 +1,11 @@
-<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('AppEditorContext');
+export let loading;
+const { runnableComponents } = getContext('AppViewerContext');
 async function refresh() {
-    window.dispatchEvent(new Event('pointerup'));
-    await $runnableComponents[componentId]?.();
+    await $runnableComponents[componentId]?.cb?.();
 }
-let loading = false;
-$: $worldStore?.outputsById[componentId]?.['loading']?.subscribe({
-    next: (value) => {
-        loading = value;
-    }
-});
 </script>
 
 <button

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         componentId: string;
+        loading: boolean;
     };
     events: {
         pointerdown: PointerEvent;

package/components/apps/components/helpers/ResizeWrapper.svelte

@@ -0,0 +1,23 @@
+<script>import { getContext } from 'svelte';
+import { findGridItem } from '../../editor/appUtils';
+export let id;
+export let shouldWrap = false;
+const { app, breakpoint, mode } = getContext('AppViewerContext');
+$: gridItem = findGridItem($app, id);
+let wrapper;
+$: {
+    if (wrapper && gridItem && shouldWrap) {
+        const wrapperHeight = wrapper.getBoundingClientRect().height;
+        const width = $breakpoint === 'sm' ? 3 : 12;
+        gridItem[width].h = Math.ceil(wrapperHeight / 36);
+    }
+}
+</script>
+
+{#if shouldWrap && $mode !== 'preview'}
+	<div class="h-full w-full" bind:this={wrapper}>
+		<slot />
+	</div>
+{:else}
+	<slot />
+{/if}

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        shouldWrap?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ResizeWrapperProps = typeof __propDef.props;
+export type ResizeWrapperEvents = typeof __propDef.events;
+export type ResizeWrapperSlots = typeof __propDef.slots;
+export default class ResizeWrapper extends SvelteComponentTyped<ResizeWrapperProps, ResizeWrapperEvents, ResizeWrapperSlots> {
+}
+export {};

package/components/apps/components/helpers/ResolveConfig.svelte

@@ -0,0 +1,29 @@
+<script>import { InputValue } from '.';
+export let id;
+export let extraKey = '';
+export let key;
+export let resolvedConfig;
+export let configuration;
+$: configuration?.type == 'oneOf' && handleSelected(configuration.selected);
+function handleSelected(selected) {
+    if (resolvedConfig?.selected != undefined && resolvedConfig?.selected != selected) {
+        resolvedConfig.selected = selected;
+    }
+}
+</script>
+
+{#if configuration?.type == 'oneOf' && resolvedConfig?.type == 'oneOf'}
+	{@const choice = resolvedConfig.selected}
+	{#each Object.keys(configuration.configuration?.[choice] ?? {}) as nestedKey (nestedKey)}
+		{#if resolvedConfig.configuration?.[choice] != undefined}
+			<InputValue
+				key={key + choice + nestedKey + extraKey}
+				{id}
+				input={configuration?.configuration?.[choice]?.[nestedKey]}
+				bind:value={resolvedConfig.configuration[choice][nestedKey]}
+			/>
+		{/if}
+	{/each}
+{:else}
+	<InputValue key={key + extraKey} {id} input={configuration} bind:value={resolvedConfig} />
+{/if}

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RichConfiguration } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        extraKey?: string | undefined;
+        key: string;
+        resolvedConfig: any;
+        configuration: RichConfiguration;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ResolveConfigProps = typeof __propDef.props;
+export type ResolveConfigEvents = typeof __propDef.events;
+export type ResolveConfigSlots = typeof __propDef.slots;
+export default class ResolveConfig extends SvelteComponentTyped<ResolveConfigProps, ResolveConfigEvents, ResolveConfigSlots> {
+}
+export {};