windmill-components 1.83.3 → 1.84.6

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

@@ -104,6 +104,14 @@ function stripSchema(inputs, s) {
     });
     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;
@@ -114,6 +122,14 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
         }
         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;

package/components/apps/components/inputs/AppTextInput.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-import { initOutput } from '../../editor/appUtils';
-import { concatCustomCss, selectId } from '../../utils';
+import { initOutput, selectId } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;

package/components/apps/editor/AppEditorHeader.svelte

@@ -171,7 +171,10 @@ let selectedJobId = undefined;
 let testJobLoader;
 let job = undefined;
 let testIsLoading = false;
-$: selectedJobId && testJobLoader?.watchJob(selectedJobId);
+$: selectedJobId && !selectedJobId?.includes('Frontend') && testJobLoader?.watchJob(selectedJobId);
+$: if (selectedJobId?.includes('Frontend') && selectedJobId) {
+    job = undefined;
+}
 $: hasErrors = Object.keys($errorByComponent).length > 0;
 let lock = false;
 function onKeyDown(event) {
@@ -290,7 +293,39 @@ function onKeyDown(event) {
 				<div class="h-full w-full overflow-auto">
 					{#if selectedJobId}
 						{#if !job}
-							<Skeleton layout={[[40]]} />
+							{@const jobResult = $jobs.find((j) => j.job == selectedJobId)}
+
+							{#if jobResult?.error !== undefined}
+								<Splitpanes horizontal class="grow border w-full">
+									<Pane size={50} minSize={10}>
+										<LogViewer
+											content={`Logs are avaiable in the browser console directly`}
+											isLoading={false}
+										/>
+									</Pane>
+									<Pane size={50} minSize={10} class="text-sm text-gray-600">
+										<pre class="overflow-x-auto break-words relative h-full px-2">
+											<DisplayResult result={{ error: { name: 'Frontend execution error', message: jobResult.error } }} />
+										</pre>
+									</Pane>
+								</Splitpanes>
+							{:else if jobResult?.result !== undefined}
+								<Splitpanes horizontal class="grow border w-full">
+									<Pane size={50} minSize={10}>
+										<LogViewer
+											content={`Logs are avaiable in the browser console directly`}
+											isLoading={false}
+										/>
+									</Pane>
+									<Pane size={50} minSize={10} class="text-sm text-gray-600">
+										<pre class="overflow-x-auto break-words relative h-full px-2">
+											<DisplayResult result={jobResult.result} />
+										</pre>
+									</Pane>
+								</Splitpanes>
+							{:else}
+								<Skeleton layout={[[40]]} />
+							{/if}
 						{:else}
 							<div class="flex flex-col h-full w-full gap-4 mb-4">
 								{#if job?.['running']}

package/components/apps/editor/SubGridEditor.svelte

@@ -3,11 +3,10 @@ import { createEventDispatcher, getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
 import Component from './component/Component.svelte';
-import { expandGriditem, findGridItem } from './appUtils';
+import { expandGriditem, findGridItem, selectId } from './appUtils';
 import { push } from '../../../history';
 import Grid from '../svelte-grid/Grid.svelte';
 import GridViewer from './GridViewer.svelte';
-import { selectId } from '../utils';
 import ComponentWrapper from './component/ComponentWrapper.svelte';
 export let containerHeight = undefined;
 export let containerWidth = undefined;
@@ -23,7 +22,6 @@ export let shouldHighlight = true;
 const dispatch = createEventDispatcher();
 const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
-const { manuallyOpened } = getContext('ContextPanel');
 $: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight;
 const onpointerdown = (e) => {
     dispatch('focus');

package/components/apps/editor/appUtils.d.ts

@@ -3,7 +3,9 @@ import { components, type AppComponent, type BaseComponent } from './component';
 import type { Output, World } from '../rx';
 import type { FilledItem } from '../svelte-grid/types';
 import type { EvalAppInput, StaticAppInput } from '../inputType';
+import { type Writable } from 'svelte/store';
 export declare function dfs(grid: GridItem[], id: string, subgrids: Record<string, GridItem[]>): string[] | undefined;
+export declare function selectId(e: PointerEvent, id: string, selectedComponent: Writable<string[] | undefined>, app: App): void;
 export declare function findGridItemParentGrid(app: App, id: string): string | undefined;
 export declare function allsubIds(app: App, parentId: string): string[];
 export declare function findGridItem(app: App, id: string): GridItem | undefined;

package/components/apps/editor/appUtils.js

@@ -3,6 +3,8 @@ import { ccomponents, components, getRecommendedDimensionsByComponent } from './
 import { gridColumns } from '../gridUtils';
 import { allItems } from '../utils';
 import gridHelp from '../svelte-grid/utils/helper';
+import { get } from 'svelte/store';
+import { sendUserToast } from '../../../utils';
 export function dfs(grid, id, subgrids) {
     for (const item of grid) {
         if (item.id === id) {
@@ -22,6 +24,33 @@ export function dfs(grid, id, subgrids) {
     }
     return undefined;
 }
+export function selectId(e, id, selectedComponent, app) {
+    if (e.shiftKey) {
+        selectedComponent.update((old) => {
+            if (old && old?.[0]) {
+                if (findGridItemParentGrid(app, old[0]) != findGridItemParentGrid(app, id)) {
+                    sendUserToast('Cannot multi select items from different grids', true);
+                    return old;
+                }
+            }
+            if (old == undefined) {
+                return [id];
+            }
+            if (old.includes(id)) {
+                return old;
+            }
+            return [...old, id];
+        });
+    }
+    else {
+        if (get(selectedComponent)?.includes(id)) {
+            return;
+        }
+        else {
+            selectedComponent.set([id]);
+        }
+    }
+}
 function findGridItemById(root, subGrids, id) {
     for (const gridItem of allItems(root, subGrids)) {
         if (gridItem.id === id) {

package/components/apps/editor/component/ComponentWrapper.svelte

@@ -1,6 +1,5 @@
 <script>import { getContext } from 'svelte';
-import { selectId } from '../../utils';
-import { dfs } from '../appUtils';
+import { dfs, selectId } from '../appUtils';
 export let id;
 export let type;
 const { app, connectingInput, selectedComponent, focusedGrid } = getContext('AppViewerContext');

package/components/apps/types.d.ts

@@ -108,6 +108,8 @@ export type AppViewerContext = {
     jobs: Writable<{
         job: string;
         component: string;
+        result?: string;
+        error?: string;
     }[]>;
     noBackend: boolean;
     errorByComponent: Writable<Record<string, {

package/components/apps/utils.d.ts

@@ -2,8 +2,6 @@ import type { Schema } from '../../common';
 import type { App, ComponentCssProperty, GridItem } from './types';
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
 import type { Output } from './rx';
-import { type Writable } from 'svelte/store';
-export declare function selectId(e: PointerEvent, id: string, selectedComponent: Writable<string[] | undefined>, app: App): void;
 export declare function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[];
 export declare function loadSchema(workspace: string, path: string, runType: 'script' | 'flow' | 'hubscript'): Promise<Schema>;
 export declare function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): Record<string, StaticAppInput>;

package/components/apps/utils.js

@@ -2,35 +2,6 @@ import { FlowService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
 import { emptySchema, sendUserToast } from '../../utils';
 import { twMerge } from 'tailwind-merge';
-import { get } from 'svelte/store';
-import { findGridItemParentGrid } from './editor/appUtils';
-export function selectId(e, id, selectedComponent, app) {
-    if (e.shiftKey) {
-        selectedComponent.update((old) => {
-            if (old && old?.[0]) {
-                if (findGridItemParentGrid(app, old[0]) != findGridItemParentGrid(app, id)) {
-                    sendUserToast('Cannot multi select items from different grids', true);
-                    return old;
-                }
-            }
-            if (old == undefined) {
-                return [id];
-            }
-            if (old.includes(id)) {
-                return old;
-            }
-            return [...old, id];
-        });
-    }
-    else {
-        if (get(selectedComponent)?.includes(id)) {
-            return;
-        }
-        else {
-            selectedComponent.set([id]);
-        }
-    }
-}
 export function allItems(grid, subgrids) {
     if (subgrids == undefined) {
         return grid;

package/package.json

@@ -1,10 +1,10 @@
 {
 	"name": "windmill-components",
-	"version": "1.83.3",
+	"version": "1.84.6",
 	"devDependencies": {
 		"@playwright/test": "^1.31.1",
 		"@sveltejs/adapter-static": "^1.0.0",
-		"@sveltejs/kit": "1.15.0",
+		"@sveltejs/kit": "^1.0.0-next.589",
 		"@sveltejs/package": "^1.0.2",
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/typography": "^0.5.8",