windmill-components 1.70.0 → 1.77.0

package/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte

@@ -1,11 +1,12 @@
 <script>import { Button, Drawer, DrawerContent, Tab, Tabs } from '../../../common';
 import FlowScriptPicker from '../../../flows/pickers/FlowScriptPicker.svelte';
 import PickHubScript from '../../../flows/pickers/PickHubScript.svelte';
+import Tooltip from '../../../Tooltip.svelte';
 import { Script } from '../../../../gen';
 import { inferArgs } from '../../../../infer';
 import { initialCode } from '../../../../script_helpers';
 import { capitalize, emptySchema, getScriptByPath } from '../../../../utils';
-import { faCodeBranch } from '@fortawesome/free-solid-svg-icons';
+import { faCodeBranch, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { Building, Globe2 } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { fly } from 'svelte/transition';
@@ -17,7 +18,7 @@ export let id;
 let tab = 'inlinescripts';
 let filter = '';
 let picker;
-const { appPath, app } = getContext('AppEditorContext');
+const { appPath, app } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 async function inferInlineScriptSchema(language, content, schema) {
     try {
@@ -115,7 +116,29 @@ function loadSchemaFromTriggerable(path, arg1) {
 </Drawer>
 
 <div class="flex flex-col px-4 py-2 gap-2 text-sm" in:fly={{ duration: 50 }}>
-	<div>Choose a language:</div>
+	<div class="mt-4 flex justify-between gap-8 mb-2">
+		<div class="font-bold items-baseline">Choose a language:</div>
+		<div class="flex gap-2">
+			<Button
+				on:click={() => picker?.openDrawer()}
+				size="xs"
+				color="blue"
+				startIcon={{ icon: faCodeBranch }}
+				btnClasses="truncate"
+			>
+				fork a detached script
+			</Button>
+			<Button
+				on:click={() => dispatch('delete')}
+				size="xs"
+				color="red"
+				variant="border"
+				btnClasses="truncate"
+			>
+				Cancel
+			</Button>
+		</div>
+	</div>
 	<div class="flex gap-2 flex-row flex-wrap">
 		{#each langs as lang}
 			<FlowScriptPicker
@@ -134,6 +157,7 @@ function loadSchemaFromTriggerable(path, arg1) {
 				createInlineScriptByLanguage(Script.language.DENO, name, 'pgsql')
 			}}
 		/>
+
 		<!-- <FlowScriptPicker
 			label={`MySQL`}
 			lang="mysql"
@@ -142,16 +166,34 @@ function loadSchemaFromTriggerable(path, arg1) {
 			}}
 		/> -->
 	</div>
-
-	<div class="mt-4">
-		<Button
-			on:click={() => picker?.openDrawer()}
-			size="sm"
-			color="blue"
-			startIcon={{ icon: faCodeBranch }}
-			btnClasses="truncate"
+	<div>
+		<div class="text-xs mb-1 mt-2"
+			>Frontend only script:&nbsp;<Tooltip
+				>Frontend scripts are executed in the browser and can manipulate the app context directly</Tooltip
+			></div
 		>
-			or fork a detached/Workspace/Hub script
-		</Button>
+		<FlowScriptPicker
+			label={`JavaScript`}
+			lang="javascript"
+			on:click={() => {
+				const newInlineScript = {
+					content: `// read outputs and ctx
+console.log(ctx.email)
+
+// access a global state store
+if (!state.foo) { state.foo = 0 }
+state.foo += 1
+
+// you can also navigate to another page
+//await goto("?foo=bar")
+
+return state.foo`,
+					language: 'frontend',
+					path: 'frontend script',
+					schema: undefined
+				}
+				dispatch('new', newInlineScript)
+			}}
+		/>
 	</div>
 </div>

package/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         id: string;
     };
     events: {
+        delete: CustomEvent<any>;
         new: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -1,20 +1,25 @@
 <script>import Button from '../../../common/button/Button.svelte';
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher, getContext, onMount } from 'svelte';
-import { CheckCircle, Code2, Maximize2, Trash2, X } from 'lucide-svelte';
+import { CornerDownLeft, Maximize2, Plus, Trash2, X } from 'lucide-svelte';
 import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte';
 import { inferArgs } from '../../../../infer';
 import Badge from '../../../common/badge/Badge.svelte';
-import { fly } from 'svelte/transition';
 import Editor from '../../../Editor.svelte';
 import { emptySchema, scriptLangToEditorLang } from '../../../../utils';
-import Tooltip from '../../../Tooltip.svelte';
 import Popover from '../../../Popover.svelte';
+import { computeFields } from './utils';
+import { deepEqual } from 'fast-equals';
+import Kbd from '../../../common/kbd/Kbd.svelte';
+import SimpleEditor from '../../../SimpleEditor.svelte';
+import { buildExtraLib } from '../../utils';
 let inlineScriptEditorDrawer;
 export let inlineScript;
 export let name = undefined;
 export let id;
-const { runnableComponents } = getContext('AppEditorContext');
+export let defaultUserInput = false;
+export let fields = {};
+export let syncFields = false;
+const { runnableComponents, stateId, worldStore, state } = getContext('AppViewerContext');
 let editor;
 let validCode = true;
 async function inferInlineScriptSchema(language, content, schema) {
@@ -30,113 +35,172 @@ async function inferInlineScriptSchema(language, content, schema) {
 }
 onMount(async () => {
     if (inlineScript && !inlineScript.schema) {
-        inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, emptySchema());
+        if (inlineScript.language != 'frontend') {
+            inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, emptySchema());
+        }
+    }
+    if (inlineScript.schema) {
+        loadSchemaAndInputsByName();
     }
 });
 const dispatch = createEventDispatcher();
 let runLoading = false;
+async function loadSchemaAndInputsByName() {
+    if (syncFields) {
+        const newSchema = inlineScript.schema ?? emptySchema();
+        const newFields = computeFields(newSchema, defaultUserInput, fields);
+        if (!deepEqual(newFields, fields)) {
+            fields = newFields;
+            $stateId++;
+        }
+    }
+}
+let isMac = navigator.userAgent.indexOf('Mac OS X') !== -1;
+$: extraLib =
+    inlineScript.language == 'frontend' && worldStore
+        ? buildExtraLib($worldStore?.outputsById ?? {}, id, false, $state, true)
+        : undefined;
 </script>
 
-<InlineScriptEditorDrawer {editor} bind:this={inlineScriptEditorDrawer} bind:inlineScript />
+{#if inlineScript.language != 'frontend'}
+	<InlineScriptEditorDrawer {editor} bind:this={inlineScriptEditorDrawer} bind:inlineScript />
+{/if}
 
-<div class="h-full flex flex-col gap-1" transition:fly|local={{ duration: 50 }}>
+<div class="h-full flex flex-col gap-1">
 	<div class="flex justify-between w-full gap-2 px-2 pt-1 flex-row items-center">
 		{#if name !== undefined}
-			<input bind:value={name} placeholder="Inline script name" />
+			<input
+				on:keydown|stopPropagation
+				bind:value={name}
+				placeholder="Inline script name"
+				class="!text-xs !rounded-xs"
+			/>
 		{/if}
 		<div class="flex w-full flex-row gap-2 items-center justify-end">
 			{#if validCode}
-				<Badge color="green" baseClass="!p-0 !h-[30px] aspect-square center-center">
-					<CheckCircle size={16} />
-				</Badge>
+				<Badge color="green" baseClass="!text-2xs">Valid</Badge>
 			{:else}
-				<Badge color="red" baseClass="!p-0 !h-[30px] aspect-square center-center">
-					<X size={16} />
-				</Badge>
+				<Badge color="red" baseClass="!text-2xs">Invalid</Badge>
 			{/if}
 
 			{#if id.startsWith('unused-') || id.startsWith('bg_')}
 				<Popover notClickable placement="bottom">
 					<Button
 						size="xs"
-						color="red"
-						variant="border"
-						btnClasses="!px-1.5"
+						color="light"
+						btnClasses="!px-2 !bg-red-100 hover:!bg-red-200"
 						aria-label="Delete"
 						on:click={() => dispatch('delete')}
 					>
-						<Trash2 size={16} />
+						<Trash2 size={14} class="text-red-800" />
 					</Button>
 					<svelte:fragment slot="text">Delete</svelte:fragment>
 				</Popover>
 			{/if}
-			<Popover notClickable placement="bottom">
-				<Button
-					size="xs"
-					color="blue"
-					variant="border"
-					btnClasses="!px-1.5"
-					aria-label="Open full editor"
-					on:click={() => {
-						inlineScriptEditorDrawer?.openDrawer()
-					}}
-				>
-					<Maximize2 size={16} />
-				</Button>
-				<svelte:fragment slot="text">Open full editor</svelte:fragment>
-			</Popover>
+			{#if inlineScript.language != 'frontend'}
+				<Popover notClickable placement="bottom">
+					<Button
+						size="xs"
+						color="light"
+						btnClasses="!px-2 !bg-gray-100 hover:!bg-gray-200"
+						aria-label="Open full editor"
+						on:click={() => {
+							inlineScriptEditorDrawer?.openDrawer()
+						}}
+					>
+						<Maximize2 size={14} />
+					</Button>
+					<svelte:fragment slot="text">Open full editor</svelte:fragment>
+				</Popover>
+			{/if}
+
 			<Button
 				variant="border"
 				size="xs"
-				color="blue"
+				color="light"
+				btnClasses="!px-2 !py-1"
 				on:click={async () => {
 					editor.format()
 				}}
 			>
-				Format&nbsp;<Tooltip placement="bottom">Ctrl+S</Tooltip>
+				<div class="flex flex-row gap-1 items-center">
+					Format
+
+					<div class="flex flex-row items-center gap-1">
+						<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
+						<Kbd>S</Kbd>
+					</div>
+				</div>
 			</Button>
 			{#if $runnableComponents[id] != undefined}
 				<Button
 					loading={runLoading}
 					size="xs"
-					color="blue"
+					color="dark"
+					variant="border"
+					btnClasses="!px-2 !py-1 !bg-gray-700 !text-white hover:!bg-gray-900"
 					on:click={async () => {
 						runLoading = true
 						await $runnableComponents[id]?.()
 						runLoading = false
 					}}
 				>
-					Run&nbsp;
-					<Tooltip light placement="bottom">Ctrl+Enter</Tooltip>
+					<div class="flex flex-row gap-1 items-center">
+						Run
+
+						<div class="flex flex-row items-center gap-1">
+							<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
+							<Kbd>
+								<div class="h-4 flex items-center justify-center">
+									<CornerDownLeft size={10} />
+								</div>
+							</Kbd>
+						</div>
+					</div>
 				</Button>
 			{/if}
 		</div>
 	</div>
 
 	<div class="border h-full">
-		<Editor
-			bind:this={editor}
-			class="flex flex-1 grow h-full"
-			lang={scriptLangToEditorLang(inlineScript?.language)}
-			bind:code={inlineScript.content}
-			fixedOverflowWidgets={true}
-			cmdEnterAction={async () => {
-				runLoading = true
-				await $runnableComponents[id]?.()
-				runLoading = false
-			}}
-			on:change={async (e) => {
-				if (inlineScript) {
-					const oldSchema = JSON.stringify(inlineScript.schema)
-					if (inlineScript.schema == undefined) {
-						inlineScript.schema = emptySchema()
-					}
-					await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
-					if (JSON.stringify(inlineScript.schema) != oldSchema) {
-						inlineScript = inlineScript
+		{#if inlineScript.language != 'frontend'}
+			<Editor
+				bind:this={editor}
+				class="flex flex-1 grow h-full"
+				lang={scriptLangToEditorLang(inlineScript?.language)}
+				bind:code={inlineScript.content}
+				fixedOverflowWidgets={true}
+				cmdEnterAction={async () => {
+					runLoading = true
+					await $runnableComponents[id]?.()
+					runLoading = false
+				}}
+				on:change={async (e) => {
+					if (inlineScript && inlineScript.language != 'frontend') {
+						const oldSchema = JSON.stringify(inlineScript.schema)
+						if (inlineScript.schema == undefined) {
+							inlineScript.schema = emptySchema()
+						}
+						await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
+						if (JSON.stringify(inlineScript.schema) != oldSchema) {
+							inlineScript = inlineScript
+							loadSchemaAndInputsByName()
+						}
 					}
-				}
-			}}
-		/>
+				}}
+			/>
+		{:else}
+			<SimpleEditor
+				cmdEnterAction={async () => {
+					runLoading = true
+					await $runnableComponents[id]?.()
+					runLoading = false
+				}}
+				class="h-full"
+				{extraLib}
+				bind:code={inlineScript.content}
+				lang="javascript"
+			/>
+		{/if}
 	</div>
 </div>

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte.d.ts

@@ -1,12 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
 import type { InlineScript } from '../../types';
+import type { AppInput } from '../../inputType';
 declare const __propDef: {
     props: {
         inlineScript: InlineScript;
         name?: string | undefined;
         id: string;
+        defaultUserInput?: boolean | undefined;
+        fields?: Record<string, AppInput> | undefined;
+        syncFields?: boolean | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
         delete: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte

@@ -19,7 +19,7 @@ export function openDrawer() {
 			editor?.setCode(inlineScript.content)
 		}}
 	>
-		{#if inlineScript}
+		{#if inlineScript && inlineScript.language != 'frontend'}
 			<ScriptEditor
 				noSyncFromGithub
 				lang={inlineScript.language}

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte

@@ -12,6 +12,7 @@ import InlineScriptEditor from './InlineScriptEditor.svelte';
 import { computeFields } from './utils';
 import { deepEqual } from 'fast-equals';
 export let componentInput;
+export let defaultUserInput = false;
 export let id;
 async function fork(path) {
     let { content, language, schema } = await getScriptByPath(path);
@@ -53,6 +54,11 @@ $: if (componentInput &&
     componentInput.runnable.runType == 'script') {
     refreshScript(componentInput.runnable);
 }
+function deleteInlineScript() {
+    if (componentInput && componentInput.type == 'runnable') {
+        componentInput = clearResultAppInput(componentInput);
+    }
+}
 </script>
 
 <Drawer bind:this={drawerFlowViewer} size="1200px">
@@ -65,19 +71,19 @@ $: if (componentInput &&
 	{#if componentInput?.runnable?.type === 'runnableByName' && componentInput?.runnable?.name !== undefined}
 		{#if componentInput.runnable.inlineScript}
 			<InlineScriptEditor
+				{defaultUserInput}
 				{id}
 				bind:inlineScript={componentInput.runnable.inlineScript}
 				bind:name={componentInput.runnable.name}
-				on:delete={() => {
-					if (componentInput && componentInput.type == 'runnable') {
-						componentInput = clearResultAppInput(componentInput)
-					}
-				}}
+				bind:fields={componentInput.fields}
+				syncFields
+				on:delete={deleteInlineScript}
 			/>
 		{:else}
 			<EmptyInlineScript
 				{id}
 				name={componentInput.runnable.name}
+				on:delete={deleteInlineScript}
 				on:new={(e) => {
 					if (
 						componentInput &&

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte.d.ts

@@ -3,6 +3,7 @@ import type { AppInput } from '../../inputType';
 declare const __propDef: {
     props: {
         componentInput: AppInput | undefined;
+        defaultUserInput?: boolean | undefined;
         id: string;
     };
     events: {

package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -5,8 +5,16 @@ import InlineScriptsPanelList from './InlineScriptsPanelList.svelte';
 import InlineScriptEditor from './InlineScriptEditor.svelte';
 import EmptyInlineScript from './EmptyInlineScript.svelte';
 import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte';
-const { app, staticOutputs, runnableComponents } = getContext('AppEditorContext');
+const { app, staticOutputs, runnableComponents } = getContext('AppViewerContext');
 let selectedScriptComponentId = undefined;
+function deleteBackgroundScript(index) {
+    // remove the script from the array at the index
+    $app.hiddenInlineScripts.splice(index, 1);
+    $app.hiddenInlineScripts = [...$app.hiddenInlineScripts];
+    delete $staticOutputs[`bg_${index}`];
+    delete $runnableComponents[`bg_${index}`];
+    $staticOutputs = $staticOutputs;
+}
 </script>
 
 <SplitPanesWrapper>
@@ -16,18 +24,22 @@ let selectedScriptComponentId = undefined;
 		</Pane>
 		<Pane size={75}>
 			{#if !selectedScriptComponentId}
-				<span class="p-2 text-sm text-gray-600">Select a script on the left panel</span>
+				<div class="text-sm text-gray-500 text-center py-8 px-2">
+					Select a script on the left panel
+				</div>
 			{/if}
 
-			{#each $app.grid as gridItem (gridItem.data.id)}
-				{#if gridItem.data.id === selectedScriptComponentId}
+			{#each $app.grid as gridItem, index (gridItem?.data?.id ?? index)}
+				{#if gridItem?.data?.id && gridItem.data.id === selectedScriptComponentId}
 					<InlineScriptEditorPanel
+						defaultUserInput={gridItem?.data?.type == 'formcomponent' ||
+							gridItem?.data?.type == 'buttonformcomponent'}
 						id={gridItem.data.id}
 						bind:componentInput={gridItem.data.componentInput}
 					/>
 				{/if}
 
-				{#if gridItem.data.type === 'tablecomponent'}
+				{#if gridItem?.data?.type === 'tablecomponent'}
 					{#each gridItem.data.actionButtons as actionButton, index (index)}
 						{#if actionButton.id === selectedScriptComponentId}
 							<InlineScriptEditorPanel
@@ -41,15 +53,17 @@ let selectedScriptComponentId = undefined;
 
 			{#if $app.subgrids}
 				{#each Object.keys($app.subgrids ?? {}) as key (key)}
-					{#each $app.subgrids[key] as gridItem (gridItem.data.id)}
-						{#if gridItem.data.id === selectedScriptComponentId}
+					{#each $app.subgrids[key] as gridItem (gridItem?.data?.id)}
+						{#if gridItem?.data?.id && gridItem.data.id === selectedScriptComponentId}
 							<InlineScriptEditorPanel
+								defaultUserInput={gridItem.data?.type == 'formcomponent' ||
+									gridItem.data?.type == 'buttonformcomponent'}
 								id={gridItem.data.id}
 								bind:componentInput={gridItem.data.componentInput}
 							/>
 						{/if}
 
-						{#if gridItem.data.type === 'tablecomponent'}
+						{#if gridItem?.data?.type === 'tablecomponent'}
 							{#each gridItem.data.actionButtons as actionButton, index (index)}
 								{#if actionButton.id === selectedScriptComponentId}
 									<InlineScriptEditorPanel
@@ -84,20 +98,15 @@ let selectedScriptComponentId = undefined;
 							id={`bg_${index}`}
 							bind:inlineScript={hiddenInlineScript.inlineScript}
 							bind:name={hiddenInlineScript.name}
-							on:delete={() => {
-								// remove the script from the array at the index
-								$app.hiddenInlineScripts.splice(index, 1)
-								$app.hiddenInlineScripts = [...$app.hiddenInlineScripts]
-
-								delete $staticOutputs[`bg_${index}`]
-								delete $runnableComponents[`bg_${index}`]
-								$staticOutputs = $staticOutputs
-							}}
+							bind:fields={hiddenInlineScript.fields}
+							syncFields
+							on:delete={() => deleteBackgroundScript(index)}
 						/>
 					{:else}
 						<EmptyInlineScript
 							id={`b_${index}`}
 							name={hiddenInlineScript.name}
+							on:delete={() => deleteBackgroundScript(index)}
 							on:new={(e) => {
 								hiddenInlineScript.inlineScript = e.detail
 							}}