windmill-components 1.85.0 → 1.87.0

package/components/apps/components/helpers/AlignWrapper.svelte

@@ -1,36 +0,0 @@
-<script>import { twMerge } from 'tailwind-merge';
-export let horizontalAlignment = undefined;
-export let verticalAlignment = undefined;
-export let noWFull = false;
-let c = '';
-export { c as class };
-export let style = '';
-export let render = true;
-function tailwindHorizontalAlignment(alignment) {
-    if (!alignment)
-        return '';
-    const classes = {
-        left: 'justify-start',
-        center: 'justify-center',
-        right: 'justify-end'
-    };
-    return classes[alignment];
-}
-function tailwindVerticalAlignment(alignment) {
-    if (!alignment)
-        return '';
-    const classes = {
-        top: 'items-start',
-        center: 'items-center',
-        bottom: 'items-end'
-    };
-    return classes[alignment];
-}
-$: classes = twMerge('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '', c);
-</script>
-
-{#if render}
-	<div class={classes} {style}>
-		<slot />
-	</div>
-{/if}

package/components/apps/components/helpers/DebouncedInput.svelte

@@ -1,25 +0,0 @@
-<script>export let placeholder = 'Search...';
-// Using 'any' so 'type="number"' can be passed to the input
-// which should return a number
-export let value;
-export let debounceDelay = 500;
-let parentClass = undefined;
-export { parentClass as class };
-let timer;
-function debounce(event) {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-        const target = event.target;
-        value = target.value;
-    }, debounceDelay);
-}
-</script>
-
-<input
-	bind:value
-	{placeholder}
-	on:pointerdown|stopPropagation
-	on:keyup={debounce}
-	class={parentClass}
-	{...$$restProps}
-/>

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

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        placeholder?: string | undefined;
-        value: any;
-        debounceDelay?: number | undefined;
-        class?: string | undefined;
-    };
-    events: {
-        pointerdown: PointerEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DebouncedInputProps = typeof __propDef.props;
-export type DebouncedInputEvents = typeof __propDef.events;
-export type DebouncedInputSlots = typeof __propDef.slots;
-export default class DebouncedInput extends SvelteComponentTyped<DebouncedInputProps, DebouncedInputEvents, DebouncedInputSlots> {
-}
-export {};

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

@@ -1,36 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { initOutput } from '../../editor/appUtils';
-import RunnableComponent from './RunnableComponent.svelte';
-export let id;
-export let name;
-export let inlineScript;
-export let fields;
-export let doNotRecomputeOnInputChanged;
-export let recomputableByRefreshButton;
-let result = undefined;
-const { worldStore } = getContext('AppViewerContext');
-let outputs = initOutput($worldStore, id, {
-    result: undefined,
-    loading: false
-});
-</script>
-
-<RunnableComponent
-	render={false}
-	{id}
-	{fields}
-	autoRefresh={true}
-	{doNotRecomputeOnInputChanged}
-	bind:result
-	transformer={undefined}
-	runnable={{
-		name,
-		inlineScript,
-		type: 'runnableByName'
-	}}
-	wrapperClass="hidden"
-	{outputs}
-	{recomputableByRefreshButton}
->
-	<slot />
-</RunnableComponent>

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

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
-import type { InlineScript } from '../../types';
-declare const __propDef: {
-    props: {
-        id: string;
-        name: string;
-        inlineScript: InlineScript | undefined;
-        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
-        doNotRecomputeOnInputChanged: boolean;
-        recomputableByRefreshButton: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type HiddenComponentProps = typeof __propDef.props;
-export type HiddenComponentEvents = typeof __propDef.events;
-export type HiddenComponentSlots = typeof __propDef.slots;
-export default class HiddenComponent extends SvelteComponentTyped<HiddenComponentProps, HiddenComponentEvents, HiddenComponentSlots> {
-}
-export {};

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

@@ -1,124 +0,0 @@
-<script>import { isCodeInjection } from '../../../flows/utils';
-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 error = '';
-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 (lastInput?.type === 'static' || lastInput?.type == 'template') {
-        value = await getValue(lastInput);
-    }
-    else if (lastInput?.type == 'eval') {
-        value = await evalExpr(lastInput);
-    }
-    else if (lastInput?.type == 'upload') {
-        value = lastInput.value;
-    }
-    else {
-        value = undefined;
-    }
-    dispatch('done');
-}
-async function evalExpr(input) {
-    try {
-        const r = await eval_like(input.expr, computeGlobalContext($worldStore, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
-        error = '';
-        return r;
-    }
-    catch (e) {
-        error = e.message;
-        return value;
-    }
-}
-async function getValue(input) {
-    if (!input)
-        return;
-    if (input.type === 'template' && isCodeInjection(input.eval)) {
-        try {
-            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, extraContext), true, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
-            error = '';
-            return r;
-        }
-        catch (e) {
-            return e.message;
-        }
-    }
-    else if (input.type === 'static') {
-        return input.value;
-    }
-    else if (input.type === 'template') {
-        return input.eval;
-    }
-}
-function onValueChange(newValue) {
-    if (lastInput?.type === 'connected' && newValue !== undefined && newValue !== null) {
-        const { connection } = lastInput;
-        if (!connection) {
-            // No connection
-            return;
-        }
-        const { path } = connection;
-        const hasSubPath = ['.', '['].some((x) => path.includes(x));
-        if (hasSubPath) {
-            const realPath = path
-                .replace(/\[(\w+)\]/g, '.$1')
-                .split('.')
-                .slice(1)
-                .join('.');
-            value = accessPropertyByPath(newValue, realPath);
-        }
-        else {
-            value = newValue;
-        }
-    }
-    else {
-        // TODO: handle disconnect
-    }
-}
-</script>

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

@@ -1,24 +0,0 @@
-<script>import { getContext } from 'svelte';
-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('AppViewerContext');
-$: outputs = $worldStore?.outputsById?.[id];
-function setOutput(v) {
-    outputs?.result?.set(v, true);
-}
-$: result && outputs && setOutput(result);
-</script>
-
-{#if componentInput.type !== 'runnable'}
-	<InputValue {id} input={componentInput} bind:value={result} />
-{/if}
-
-{#if render}
-	<slot />
-{:else}
-	<div class="w-full h-full" />
-{/if}

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

@@ -1,334 +0,0 @@
-<script>import Alert from '../../../common/alert/Alert.svelte';
-import LightweightSchemaForm from '../../../LightweightSchemaForm.svelte';
-import Popover from '../../../Popover.svelte';
-import TestJobLoader from '../../../TestJobLoader.svelte';
-import { AppService } from '../../../../gen';
-import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '../../../../utils';
-import { deepEqual } from 'fast-equals';
-import { Bug } from 'lucide-svelte';
-import { createEventDispatcher, getContext } from 'svelte';
-import { computeGlobalContext, eval_like } from './eval';
-import InputValue from './InputValue.svelte';
-import RefreshButton from './RefreshButton.svelte';
-// Component props
-export let id;
-export let fields;
-export let runnable;
-export let transformer;
-export let extraQueryParams = {};
-export let autoRefresh = true;
-export let result = undefined;
-export let forceSchemaDisplay = false;
-export let wrapperClass = '';
-export let wrapperStyle = '';
-export let initializing = undefined;
-export let render;
-export let outputs;
-export let extraKey = '';
-export let doNotRecomputeOnInputChanged = false;
-export let loading = false;
-export let recomputableByRefreshButton = true;
-const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId, state, componentControl } = getContext('AppViewerContext');
-const dispatch = createEventDispatcher();
-$runnableComponents[id] = {
-    autoRefresh: autoRefresh && recomputableByRefreshButton,
-    cb: async (inlineScript) => {
-        await executeComponent(true, inlineScript);
-    }
-};
-$runnableComponents = $runnableComponents;
-let args = undefined;
-let testIsLoading = false;
-let runnableInputValues = {};
-let executeTimeout = undefined;
-$: outputs.loading?.set(loading);
-function setDebouncedExecute() {
-    executeTimeout && clearTimeout(executeTimeout);
-    executeTimeout = setTimeout(() => {
-        executeComponent(true);
-    }, 200);
-}
-function computeStaticValues() {
-    return Object.entries(fields ?? {})
-        .filter(([k, v]) => v.type == 'static')
-        .map(([name, field]) => {
-        return [name, field['value']];
-    });
-}
-let lazyStaticValues = computeStaticValues();
-let currentStaticValues = lazyStaticValues;
-$: fields && (currentStaticValues = computeStaticValues());
-$: if (!deepEqual(currentStaticValues, lazyStaticValues)) {
-    lazyStaticValues = currentStaticValues;
-    refreshIfAutoRefresh('static changed');
-}
-$: (runnableInputValues || extraQueryParams || args) &&
-    testJobLoader &&
-    refreshIfAutoRefresh('arg changed');
-$: refreshOn =
-    runnable && runnable.type === 'runnableByName' ? runnable.inlineScript?.refreshOn ?? [] : [];
-function refreshIfAutoRefresh(_src) {
-    const refreshEnabled = autoRefresh && (!doNotRecomputeOnInputChanged || refreshOn?.length > 0);
-    if (refreshEnabled && $worldStore.initialized) {
-        setDebouncedExecute();
-    }
-}
-// Test job internal state
-let testJob = undefined;
-let testJobLoader = undefined;
-let schemaStripped = autoRefresh || forceSchemaDisplay ? emptySchema() : undefined;
-$: (autoRefresh || forceSchemaDisplay) &&
-    Object.keys(fields ?? {}).length > 0 &&
-    (schemaStripped = stripSchema(fields, $stateId));
-function stripSchema(inputs, s) {
-    if (inputs === undefined) {
-        return emptySchema();
-    }
-    let schema = runnable?.type == 'runnableByName' ? runnable.inlineScript?.schema : runnable?.schema;
-    try {
-        schemaStripped = JSON.parse(JSON.stringify(schema));
-    }
-    catch (e) {
-        console.warn('Error loading schema');
-        return emptySchema();
-    }
-    // Remove hidden static inputs
-    Object.keys(inputs ?? {}).forEach((key) => {
-        const input = inputs[key];
-        if (input.type === 'static' && schemaStripped !== undefined) {
-            delete schemaStripped.properties[key];
-        }
-        if (input.type === 'connected' && schemaStripped !== undefined) {
-            delete schemaStripped.properties[key];
-        }
-    });
-    return schemaStripped;
-}
-function generateNextFrontendJobId() {
-    const prefix = 'Frontend: ';
-    let nextJobNumber = 1;
-    while ($jobs.find((j) => j.job === `${prefix}#${nextJobNumber}`)) {
-        nextJobNumber++;
-    }
-    return `${prefix}#${nextJobNumber}`;
-}
-async function executeComponent(noToast = false, inlineScriptOverride) {
-    if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
-        loading = true;
-        try {
-            const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, {}), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
-            await setResult(r);
-            $state = $state;
-        }
-        catch (e) {
-            sendUserToast('Error running frontend script: ' + e.message, true);
-            // Manually add a fake job to the job list to show the error
-            const job = generateNextFrontendJobId();
-            const error = e.body ?? e.message;
-            $errorByComponent[job] = {
-                error,
-                componentId: id
-            };
-            $jobs = [{ job, component: id, error }, ...$jobs];
-        }
-        loading = false;
-        return;
-    }
-    if (noBackend) {
-        if (!noToast) {
-            sendUserToast('This app is not connected to a windmill backend, it is a static preview');
-        }
-        return;
-    }
-    if (runnable?.type === 'runnableByName' && !runnable.inlineScript) {
-        return;
-    }
-    loading = true;
-    try {
-        let njob = await testJobLoader?.abstractRun(() => {
-            const nonStaticRunnableInputs = {};
-            const staticRunnableInputs = {};
-            Object.keys(fields ?? {}).forEach((k) => {
-                let field = fields[k];
-                if (field?.type == 'static' && fields[k]) {
-                    staticRunnableInputs[k] = field.value;
-                }
-                else if (field?.type == 'user') {
-                    nonStaticRunnableInputs[k] = args?.[k];
-                }
-                else {
-                    nonStaticRunnableInputs[k] = runnableInputValues[k];
-                }
-            });
-            const requestBody = {
-                args: nonStaticRunnableInputs,
-                force_viewer_static_fields: !isEditor ? undefined : staticRunnableInputs
-            };
-            if (runnable?.type === 'runnableByName') {
-                const { inlineScript } = inlineScriptOverride
-                    ? { inlineScript: inlineScriptOverride }
-                    : runnable;
-                if (inlineScript) {
-                    requestBody['raw_code'] = {
-                        content: inlineScript.content,
-                        language: inlineScript.language,
-                        path: inlineScript.path
-                    };
-                }
-            }
-            else if (runnable?.type === 'runnableByPath') {
-                const { path, runType } = runnable;
-                requestBody['path'] = runType !== 'hubscript' ? `${runType}/${path}` : `script/${path}`;
-            }
-            return AppService.executeComponent({
-                workspace,
-                path: defaultIfEmptyString(appPath, 'newapp'),
-                requestBody
-            });
-        });
-        if (njob) {
-            $jobs = [{ job: njob, component: id }, ...$jobs];
-        }
-    }
-    catch (e) {
-        setResult({ error: e.body ?? e.message });
-        loading = false;
-    }
-}
-export async function runComponent() {
-    try {
-        await executeComponent();
-    }
-    catch (e) {
-        setResult({ error: e.body ?? e.message });
-    }
-}
-let lastStartedAt = Date.now();
-function recordError(error) {
-    if (testJob) {
-        $errorByComponent[testJob.id] = {
-            error: error,
-            componentId: id
-        };
-    }
-}
-async function setResult(res) {
-    const hasRes = res !== undefined && res !== null;
-    if (transformer) {
-        $worldStore.newOutput(id, 'raw', res);
-        res = await eval_like(transformer.content, computeGlobalContext($worldStore, { result: res }), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
-        if (hasRes && res === undefined) {
-            res = {
-                error: {
-                    name: 'TransformerError',
-                    message: 'An error occured in the transformer',
-                    stack: 'Transformer returned undefined'
-                }
-            };
-        }
-    }
-    outputs.result?.set(res);
-    result = res;
-    if (res?.error) {
-        recordError(res.error);
-    }
-    else {
-        dispatch('success');
-    }
-    const previousJobId = Object.keys($errorByComponent).find((key) => $errorByComponent[key].componentId === id);
-    if (previousJobId && !result?.error) {
-        delete $errorByComponent[previousJobId];
-        $errorByComponent = $errorByComponent;
-    }
-}
-</script>
-
-{#each Object.entries(fields ?? {}) as [key, v] (key)}
-	{#if v.type != 'static' && v.type != 'user'}
-		<InputValue
-			key={key + extraKey}
-			{id}
-			input={fields[key]}
-			bind:value={runnableInputValues[key]}
-		/>
-	{/if}
-{/each}
-
-{#if runnable?.type == 'runnableByName' && runnable.inlineScript?.language == 'frontend'}
-	{#each runnable.inlineScript.refreshOn ?? [] as { id: tid, key } (`${tid}-${key}`)}
-		{@const fkey = `${tid}-${key}${extraKey}`}
-		<InputValue
-			{id}
-			key={fkey}
-			input={{ type: 'connected', connection: { componentId: tid, path: key }, fieldType: 'any' }}
-			bind:value={runnableInputValues[fkey]}
-		/>
-	{/each}
-{/if}
-
-<TestJobLoader
-	workspaceOverride={workspace}
-	on:done={(e) => {
-		if (testJob) {
-			const startedAt = new Date(testJob.started_at).getTime()
-			if (startedAt > lastStartedAt) {
-				lastStartedAt = startedAt
-				setResult(e.detail.result)
-			}
-		}
-		loading = false
-	}}
-	bind:isLoading={testIsLoading}
-	bind:job={testJob}
-	bind:this={testJobLoader}
-/>
-
-{#if render}
-	<div class="h-full flex relative flex-row flex-wrap {wrapperClass}" style={wrapperStyle}>
-		{#if (autoRefresh || forceSchemaDisplay) && schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0}
-			<div class="px-2 h-fit min-h-0">
-				<LightweightSchemaForm schema={schemaStripped} bind:args />
-			</div>
-		{/if}
-
-		{#if !runnable && autoRefresh}
-			<Alert type="warning" size="xs" class="mt-2 px-1" title="Missing runnable">
-				Please select a runnable
-			</Alert>
-		{:else if result?.error && $mode === 'preview'}
-			<div
-				title="Error"
-				class={classNames(
-					'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-2  shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer',
-					'bg-red-100/80'
-				)}
-			>
-				<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
-					<Bug size={14} />
-					<span slot="text">
-						<div class="bg-white">
-							<Alert type="error" title="Error during execution">
-								<div class="flex flex-col gap-2">
-									An error occured, please contact the app author.
-									<span class="font-semibold">Job id: {testJob?.id}</span>
-								</div>
-							</Alert>
-						</div>
-					</span>
-				</Popover>
-			</div>
-			<div class="block grow w-full max-h-full border border-red-300 bg-red-50 relative">
-				<slot />
-			</div>
-		{:else}
-			<div class="block grow w-full max-h-full">
-				<slot />
-			</div>
-		{/if}
-		{#if !initializing && autoRefresh === true}
-			<div class="flex absolute top-1 right-1 z-50">
-				<RefreshButton {loading} componentId={id} />
-			</div>
-		{/if}
-	</div>
-{/if}

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

@@ -1,46 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { AppInputs, Runnable } from '../../inputType';
-import type { Output } from '../../rx';
-import type { InlineScript } from '../../types';
-declare const __propDef: {
-    props: {
-        id: string;
-        fields: AppInputs;
-        runnable: Runnable;
-        transformer: (InlineScript & {
-            language: 'frontend';
-        }) | undefined;
-        extraQueryParams?: Record<string, any> | undefined;
-        autoRefresh?: boolean | undefined;
-        result?: any;
-        forceSchemaDisplay?: boolean | undefined;
-        wrapperClass?: string | undefined;
-        wrapperStyle?: string | undefined;
-        initializing?: boolean | undefined;
-        render: boolean;
-        outputs: {
-            result: Output<any>;
-            loading: Output<boolean>;
-        };
-        extraKey?: string | undefined;
-        doNotRecomputeOnInputChanged?: boolean | undefined;
-        loading?: boolean | undefined;
-        recomputableByRefreshButton?: boolean | undefined;
-        runComponent?: (() => Promise<void>) | undefined;
-    };
-    events: {
-        success: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type RunnableComponentProps = typeof __propDef.props;
-export type RunnableComponentEvents = typeof __propDef.events;
-export type RunnableComponentSlots = typeof __propDef.slots;
-export default class RunnableComponent extends SvelteComponentTyped<RunnableComponentProps, RunnableComponentEvents, RunnableComponentSlots> {
-    get runComponent(): () => Promise<void>;
-}
-export {};