windmill-components 1.493.10 → 1.501.4

package/package/components/Dev.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import SchemaForm from './SchemaForm.svelte';
 import TestJobLoader from './TestJobLoader.svelte';
-import { Button, Drawer } from './common';
+import { Button } from './common';
 import { WindmillIcon } from './icons';
 import LogPanel from './scriptEditor/LogPanel.svelte';
 import { JobService, OpenAPI, WorkspaceService } from '../gen';
@@ -8,7 +8,7 @@ import { inferArgs } from '../infer';
 import { setCopilotInfo, userStore, workspaceStore } from '../stores';
 import { emptySchema, sendUserToast } from '../utils';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
-import { onDestroy, onMount, setContext } from 'svelte';
+import { onDestroy, onMount, setContext, untrack } from 'svelte';
 import DarkModeToggle from './sidebar/DarkModeToggle.svelte';
 import { page } from '$app/stores';
 import { getUserExt } from '../user';
@@ -23,46 +23,17 @@ import { loadSchemaFromModule } from './flows/flowInfers';
 import { CornerDownLeft, Play } from 'lucide-svelte';
 import Toggle from './Toggle.svelte';
 import { setLicense } from '../enterpriseUtils';
-import { pickScript } from './flows/flowStateUtils';
 import { approximateFindPythonRelativePath, isTypescriptRelativePath, parseTypescriptDeps } from '../relative_imports';
 import Tooltip from './Tooltip.svelte';
 import { workspaceAIClients } from './copilot/lib';
 import { Triggers } from './triggers/triggers.svelte';
-$: token = $page.url.searchParams.get('wm_token') ?? undefined;
-$: workspace = $page.url.searchParams.get('workspace') ?? undefined;
-$: themeDarkRaw = $page.url.searchParams.get('activeColorTheme');
-$: themeDark = themeDarkRaw == '2' || themeDarkRaw == '4';
-$: if (token) {
-    OpenAPI.WITH_CREDENTIALS = true;
-    OpenAPI.TOKEN = token;
-    loadUser();
-}
+import { TestSteps } from './flows/testSteps.svelte';
 let flowCopilotContext = {
-    drawerStore: writable(undefined),
-    modulesStore: writable([]),
-    currentStepStore: writable(undefined),
-    genFlow,
     shouldUpdatePropertyType: writable({}),
     exprsToSet: writable({}),
     generatedExprs: writable({}),
     stepInputsLoading: writable(false)
 };
-const { modulesStore } = flowCopilotContext;
-async function genFlow(idx, flowModules, stepOnly = false) {
-    let module = stepOnly ? $modulesStore[0] : $modulesStore[idx];
-    if (module && module.selectedCompletion) {
-        const [hubScriptModule, hubScriptState] = await pickScript(module.selectedCompletion.path, `${module.selectedCompletion.summary} (${module.selectedCompletion.app})`, module.id, undefined);
-        const flowModule = {
-            id: module.id,
-            value: hubScriptModule.value,
-            summary: hubScriptModule.summary
-        };
-        $flowStateStore[module.id] = hubScriptState;
-        flowModules.splice(idx, 0, flowModule);
-        $flowStore = $flowStore;
-        sendUserToast('Added module', false);
-    }
-}
 setContext('FlowCopilotContext', flowCopilotContext);
 async function setupCopilotInfo() {
     if (workspace) {
@@ -77,13 +48,6 @@ async function setupCopilotInfo() {
         }
     }
 }
-$: if (workspace) {
-    $workspaceStore = workspace;
-    setupCopilotInfo();
-}
-$: if (workspace && token) {
-    loadUser();
-}
 async function loadUser() {
     try {
         const user = await getUserExt(workspace);
@@ -93,40 +57,35 @@ async function loadUser() {
         sendUserToast(`Failed to load user ${e}`, true);
     }
 }
-let darkModeToggle;
-let darkMode = undefined;
-let modeInitialized = false;
+let darkModeToggle = $state();
+let darkMode = $state(undefined);
+let modeInitialized = $state(false);
 function initializeMode() {
     modeInitialized = true;
-    darkModeToggle.toggle();
+    darkModeToggle?.toggle();
 }
-$: darkModeToggle &&
-    themeDark != darkMode &&
-    darkMode != undefined &&
-    !modeInitialized &&
-    initializeMode();
-let testJobLoader;
+let testJobLoader = $state();
 let socket = undefined;
 // Test args input
-let args = {};
-let isValid = true;
+let args = $state({});
+let isValid = $state(true);
 // Test
-let testIsLoading = false;
-let testJob;
-let pastPreviews = [];
-let validCode = true;
-let currentScript = undefined;
-let schema = emptySchema();
+let testIsLoading = $state(false);
+let testJob = $state();
+let pastPreviews = $state([]);
+let validCode = $state(true);
+let currentScript = $state(undefined);
+let schema = $state(emptySchema());
 const href = window.location.href;
 const indexQ = href.indexOf('?');
 const searchParams = indexQ > -1 ? new URLSearchParams(href.substring(indexQ)) : undefined;
 if (searchParams?.has('local')) {
     connectWs();
 }
-let useLock = false;
+let useLock = $state(false);
 let lockChanges = false;
 let timeout = undefined;
-let loadingCodebaseButton = false;
+let loadingCodebaseButton = $state(false);
 let lastCommandId = '';
 const el = (event) => {
     // sendUserToast(`Received message from parent ${event.data.type}`, true)
@@ -147,7 +106,7 @@ const el = (event) => {
     }
     else if (event.data.type == 'testPreviewBundle') {
         if (event.data.id == lastCommandId && currentScript) {
-            testJobLoader.runPreview(currentScript.path, event.data.file, currentScript.language, args, currentScript.tag, useLock ? currentScript.lock : undefined);
+            testJobLoader?.runPreview(currentScript.path, event.data.file, currentScript.language, args, currentScript.tag, useLock ? currentScript.lock : undefined);
         }
         else {
             sendUserToast(`Bundle received ${lastCommandId} was obsolete, ignoring`, true);
@@ -289,7 +248,7 @@ function connectWs() {
         console.error(e);
     }
 }
-let typescriptBundlePreviewMode = false;
+let typescriptBundlePreviewMode = $state(false);
 function runTest() {
     if (mode == 'script') {
         if (!currentScript) {
@@ -339,7 +298,7 @@ async function onKeyDown(event) {
         document.execCommand('paste');
     }
 }
-let relativePaths = [];
+let relativePaths = $state([]);
 let lastPath = undefined;
 async function replaceScript(lastEdit) {
     mode = 'script';
@@ -365,12 +324,14 @@ async function replaceScript(lastEdit) {
         validCode = false;
     }
 }
-let mode = 'script';
-const flowStore = writable({
-    summary: '',
-    value: { modules: [] },
-    extra_perms: {},
-    schema: emptySchema()
+let mode = $state('script');
+const flowStore = $state({
+    val: {
+        summary: '',
+        value: { modules: [] },
+        extra_perms: {},
+        schema: emptySchema()
+    }
 });
 let lastUriPath = undefined;
 async function replaceFlow(lastEdit) {
@@ -379,14 +340,14 @@ async function replaceFlow(lastEdit) {
     // sendUserToast(JSON.stringify(lastEdit.flow), true)
     // return
     try {
-        if (!deepEqual(lastEdit.flow, $flowStore)) {
+        if (!deepEqual(lastEdit.flow, flowStore)) {
             if (!lastEdit.flow.summary) {
                 lastEdit.flow.summary = 'New flow';
             }
             if (!lastEdit.flow.value?.modules) {
                 lastEdit.flow.value = { modules: [] };
             }
-            $flowStore = lastEdit.flow;
+            flowStore.val = lastEdit.flow;
             inferModuleArgs($selectedIdStore);
         }
     }
@@ -395,11 +356,11 @@ async function replaceFlow(lastEdit) {
     }
 }
 const flowStateStore = writable({});
-const previewArgsStore = writable({});
+const previewArgsStore = $state({ val: {} });
 const scriptEditorDrawer = writable(undefined);
 const moving = writable(undefined);
-const history = initHistory($flowStore);
-const testStepStore = writable({});
+const history = initHistory(flowStore.val);
+const testSteps = new TestSteps();
 const selectedIdStore = writable('settings-metadata');
 const triggersCount = writable(undefined);
 setContext('TriggerContext', {
@@ -417,7 +378,7 @@ setContext('FlowEditorContext', {
     pathStore: writable(''),
     flowStateStore,
     flowStore,
-    testStepStore,
+    testSteps,
     saveDraft: () => { },
     initialPathStore: writable(''),
     fakeInitialPath: '',
@@ -429,13 +390,13 @@ setContext('FlowEditorContext', {
         selectedTab: undefined,
         editPanelSize: undefined,
         payloadData: undefined
-    })
+    }),
+    currentEditor: writable(undefined)
 });
 setContext('PropPickerContext', {
     flowPropPickerConfig: writable(undefined),
     pickablePropertiesFiltered: writable(undefined)
 });
-$: updateFlow($flowStore);
 let lastSent = undefined;
 function updateFlow(flow) {
     if (lockChanges) {
@@ -446,15 +407,14 @@ function updateFlow(flow) {
         window?.parent.postMessage({ type: 'flow', flow, uriPath: lastUriPath }, '*');
     }
 }
-$: $selectedIdStore && inferModuleArgs($selectedIdStore);
-let flowPreviewButtons;
-let reload = 0;
+let flowPreviewButtons = $state();
+let reload = $state(0);
 async function inferModuleArgs(selectedIdStore) {
     if (selectedIdStore == '') {
         return;
     }
     //@ts-ignore
-    dfs($flowStore.value.modules, async (mod) => {
+    dfs(flowStore.value.modules, async (mod) => {
         if (mod.id == selectedIdStore) {
             if (mod.value.type == 'rawscript' ||
                 mod.value.type === 'script' ||
@@ -477,9 +437,44 @@ async function inferModuleArgs(selectedIdStore) {
         }
     });
 }
+let token = $derived($page.url.searchParams.get('wm_token') ?? undefined);
+let workspace = $derived($page.url.searchParams.get('workspace') ?? undefined);
+let themeDarkRaw = $derived($page.url.searchParams.get('activeColorTheme'));
+let themeDark = $derived(themeDarkRaw == '2' || themeDarkRaw == '4');
+$effect(() => {
+    if (token) {
+        OpenAPI.WITH_CREDENTIALS = true;
+        OpenAPI.TOKEN = token;
+        untrack(() => loadUser());
+    }
+});
+$effect(() => {
+    if (workspace) {
+        $workspaceStore = workspace;
+        untrack(() => setupCopilotInfo());
+    }
+});
+$effect(() => {
+    if (workspace && token) {
+        untrack(() => loadUser());
+    }
+});
+$effect(() => {
+    darkModeToggle &&
+        themeDark != darkMode &&
+        darkMode != undefined &&
+        !modeInitialized &&
+        untrack(() => initializeMode());
+});
+$effect(() => {
+    flowStore.val && untrack(() => updateFlow(flowStore.val));
+});
+$effect(() => {
+    $selectedIdStore && untrack(() => inferModuleArgs($selectedIdStore));
+});
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 
 <TestJobLoader
 	on:done={loadPastTests}
@@ -619,10 +614,9 @@ async function inferModuleArgs(selectedIdStore) {
 				</div>
 				<Splitpanes horizontal class="h-full max-h-screen grow">
 					<Pane size={67}>
-						{#if $flowStore?.value?.modules}
+						{#if flowStore.val?.value?.modules}
 							<div id="flow-editor"></div>
 							<FlowModuleSchemaMap
-								bind:modules={$flowStore.value.modules}
 								disableAi
 								disableTutorials
 								smallErrorHandler={true}
@@ -639,10 +633,10 @@ async function inferModuleArgs(selectedIdStore) {
 								noEditor
 								on:applyArgs={(ev) => {
 									if (ev.detail.kind === 'preprocessor') {
-										$testStepStore['preprocessor'] = ev.detail.args ?? {}
+										testSteps.setStepArgs('preprocessor', ev.detail.args ?? {})
 										$selectedIdStore = 'preprocessor'
 									} else {
-										$previewArgsStore = ev.detail.args ?? {}
+										previewArgsStore.val = ev.detail.args ?? {}
 										flowPreviewButtons?.openPreview()
 									}
 								}}

package/package/components/Dev.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Dev: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Dev = InstanceType<typeof Dev>;
+declare const Dev: import("svelte").Component<Record<string, never>, {}, "">;
+type Dev = ReturnType<typeof Dev>;
 export default Dev;

package/package/components/DiffDrawer.svelte

@@ -4,20 +4,27 @@ import { scriptLangToEditorLang } from '../scripts';
 import Tabs from './common/tabs/Tabs.svelte';
 import Tab from './common/tabs/Tab.svelte';
 import { cleanValueProperties, orderedJsonStringify, orderedYamlStringify, replaceFalseWithUndefined } from '../utils';
-let contentType = undefined;
-let diffType = undefined;
-let diffViewer;
-export let restoreDeployed = async () => { };
-export let restoreDraft = async () => { };
-let data = undefined;
+let diffType = $state(undefined);
+let contentType = $derived.by(() => {
+    if (!data || !diffType)
+        return undefined;
+    const dataType = diffType === 'custom' ? 'original' : diffType;
+    return data[dataType]?.content !== data.current.content
+        ? 'content'
+        : data[dataType]?.metadata !== data.current.metadata
+            ? 'metadata'
+            : undefined;
+});
+let diffViewer = $state(undefined);
+let { restoreDeployed = async () => { }, restoreDraft = async () => { } } = $props();
+let data = $state(undefined);
 export function openDrawer() {
     data = undefined;
-    contentType = undefined;
     diffType = undefined;
-    diffViewer.openDrawer();
+    diffViewer?.openDrawer();
 }
 export function closeDrawer() {
-    diffViewer.closeDrawer();
+    diffViewer?.closeDrawer();
 }
 function prepareDiff(data) {
     const metadata = structuredClone(cleanValueProperties(replaceFalseWithUndefined(data)));
@@ -64,20 +71,6 @@ export function setDiff(diff) {
         diffType = 'custom';
     }
 }
-function updateContentType(data_, diffType_) {
-    if (!data_)
-        return;
-    if (!diffType_)
-        return;
-    const dataType = diffType_ === 'custom' ? 'original' : diffType_;
-    contentType =
-        data_[dataType]?.content !== data_.current.content
-            ? 'content'
-            : data_[dataType]?.metadata !== data_.current.metadata
-                ? 'metadata'
-                : undefined;
-}
-$: updateContentType(data, diffType);
 </script>
 
 <Drawer bind:this={diffViewer} size="1200px" on:close>
@@ -203,18 +196,18 @@ $: updateContentType(data, diffType);
 				<Loader2 class="animate-spin" />
 			{/if}
 		</div>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			{#if data?.button}
 				<Button
 					color="light"
 					on:click={() => {
 						if (data?.button) {
 							data.button.onClick()
-							diffViewer.closeDrawer()
+							diffViewer?.closeDrawer()
 						}
 					}}>{data.button.text}</Button
 				>
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>

package/package/components/DiffDrawer.svelte.d.ts

@@ -1,4 +1,8 @@
 import { type Value } from '../utils';
+interface Props {
+    restoreDeployed?: () => Promise<void>;
+    restoreDraft?: () => Promise<void>;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,32 +16,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const DiffDrawer: $$__sveltets_2_IsomorphicComponent<{
-    restoreDeployed?: () => Promise<void>;
-    restoreDraft?: () => Promise<void>;
-    openDrawer?: () => void;
-    closeDrawer?: () => void;
-    setDiff?: (diff: {
-        mode: "normal";
-        deployed: Value;
-        draft: Value | undefined;
-        current: Value;
-        defaultDiffType?: "deployed" | "draft";
-        button?: {
-            text: string;
-            onClick: () => void;
-        };
-    } | {
-        mode: "simple";
-        original: Value;
-        current: Value;
-        title: string;
-        button?: {
-            text: string;
-            onClick: () => void;
-        };
-    }) => void;
-}, {
+declare const DiffDrawer: $$__sveltets_2_IsomorphicComponent<Props, {
     close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -64,6 +43,6 @@ declare const DiffDrawer: $$__sveltets_2_IsomorphicComponent<{
             onClick: () => void;
         };
     }) => void;
-}, string>;
+}, "">;
 type DiffDrawer = InstanceType<typeof DiffDrawer>;
 export default DiffDrawer;