windmill-components 1.532.0 → 1.542.4

package/package/components/RunChart.svelte

@@ -2,60 +2,23 @@
 import zoomPlugin from 'chartjs-plugin-zoom';
 import Tooltip2 from './Tooltip.svelte';
 import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement, TimeScale, LogarithmicScale } from 'chart.js';
-import { createEventDispatcher } from 'svelte';
 import { getDbClockNow } from '../forLater';
 import Button from './common/button/Button.svelte';
 import { Scatter } from './chartjs-wrappers/chartJs';
-export let jobs = [];
-export let maxIsNow = false;
-export let minTimeSet = undefined;
-export let maxTimeSet = undefined;
-export let selectedIds = [];
-export let canSelect = true;
-export let lastFetchWentToEnd = false;
-const dispatch = createEventDispatcher();
+import DarkModeObserver from './DarkModeObserver.svelte';
+let { jobs = [], maxIsNow = false, minTimeSet = undefined, maxTimeSet = undefined, selectedIds = $bindable([]), canSelect = true, lastFetchWentToEnd = false, onPointClicked, onLoadExtra, onZoom } = $props();
 const SUCCESS_COLOR = '#4ade80';
 // const SUCCESS_COLOR_TRANSPARENT = '#c9b638'
-const SUCCESS_COLOR_TRANSPARENT = mergeColors(SUCCESS_COLOR, getBackgorundColor(), 0.8);
+const SUCCESS_COLOR_TRANSPARENT = $derived(mergeColors(SUCCESS_COLOR, getBackgroundColor(), 0.8));
 const FAIL_COLOR = '#f87171';
-const FAIL_COLOR_TRANSPARENT = mergeColors(FAIL_COLOR, getBackgorundColor(), 0.8);
-$: success = jobs?.filter((x) => x.success);
-$: failed = jobs?.filter((x) => !x.success);
+const FAIL_COLOR_TRANSPARENT = $derived(mergeColors(FAIL_COLOR, getBackgroundColor(), 0.8));
 ChartJS.register(Title, Tooltip, Legend, zoomPlugin, LineElement, CategoryScale, LinearScale, LogarithmicScale, PointElement, TimeScale);
-$: data = {
-    datasets: [
-        {
-            borderColor: 'rgba(99,0,125, 0)',
-            backgroundColor: FAIL_COLOR,
-            radius: 3,
-            label: 'Failed',
-            data: failed?.map((job) => ({
-                x: job.started_at,
-                y: job.duration_ms,
-                id: job.id,
-                path: job.script_path
-            })) ?? []
-        },
-        {
-            borderColor: 'rgba(99,0,125, 0)',
-            backgroundColor: SUCCESS_COLOR,
-            radius: 3,
-            label: 'Successful',
-            data: success?.map((job) => ({
-                x: job.started_at,
-                y: job.duration_ms,
-                id: job.id,
-                path: job.script_path
-            })) ?? []
-        }
-    ]
-};
 const zoomOptions = {
     pan: {
         enabled: true,
         modifierKey: 'ctrl',
         onPanComplete: ({ chart }) => {
-            dispatch('zoom', {
+            onZoom({
                 min: addSeconds(new Date(chart.scales.x.min), -1),
                 max: addSeconds(new Date(chart.scales.x.max), 1)
             });
@@ -67,20 +30,20 @@ const zoomOptions = {
         },
         mode: 'x',
         onZoom: ({ chart }) => {
-            dispatch('zoom', {
+            onZoom({
                 min: addSeconds(new Date(chart.scales.x.min), -1),
                 max: addSeconds(new Date(chart.scales.x.max), 1)
             });
         }
     }
 };
-function isDark() {
-    return document.documentElement.classList.contains('dark');
-}
-ChartJS.defaults.color = isDark() ? '#ccc' : '#666';
-ChartJS.defaults.borderColor = isDark() ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
-function getBackgorundColor() {
-    return isDark() ? '#2e3440' : '#ffffff';
+let darkMode = $state(false);
+$effect(() => {
+    ChartJS.defaults.color = darkMode ? '#ccc' : '#666';
+    ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+});
+function getBackgroundColor() {
+    return darkMode ? '#2e3440' : '#ffffff';
 }
 function hexToRgb(hexColor) {
     hexColor = hexColor.replace(/^#/, '');
@@ -106,22 +69,9 @@ function mergeColors(color1, color2, slider) {
     const blendedRgb = rgb1.map((c1, i) => Math.round(c1 * (1 - slider) + rgb2[i] * slider));
     return rgbToHex(blendedRgb);
 }
-function highlightSelectedPoints(ids) {
-    if (!canSelect || ids.length === 0) {
-        data.datasets[0].backgroundColor = FAIL_COLOR;
-        data.datasets[1].backgroundColor = SUCCESS_COLOR;
-    }
-    else {
-        data.datasets[0].backgroundColor = data.datasets[0].data.map((p) => ids.includes(p.id) ? FAIL_COLOR : FAIL_COLOR_TRANSPARENT);
-        data.datasets[1].backgroundColor = data.datasets[1].data.map((p) => ids.includes(p.id) ? SUCCESS_COLOR : SUCCESS_COLOR_TRANSPARENT);
-    }
-}
 function getPath(x) {
     return x.path;
 }
-let minTime = addSeconds(new Date(), -300);
-let maxTime = getDbClockNow();
-$: computeMinMaxTime(jobs, minTimeSet, maxTimeSet);
 function minJobTime(jobs) {
     let min = new Date(jobs[0].started_at);
     for (const job of jobs) {
@@ -147,31 +97,69 @@ function computeMinMaxTime(jobs, minTimeSet, maxTimeSet) {
     let minTimeSetDate = minTimeSet ? new Date(minTimeSet) : undefined;
     let maxTimeSetDate = maxTimeSet ? new Date(maxTimeSet) : undefined;
     if (minTimeSetDate && maxTimeSetDate) {
-        minTime = minTimeSetDate;
-        maxTime = maxTimeSetDate;
-        return;
+        return { minTime: minTimeSetDate, maxTime: maxTimeSetDate };
     }
     if (jobs == undefined || jobs?.length == 0) {
-        minTime = minTimeSetDate ?? addSeconds(new Date(), -300);
-        maxTime = maxTimeSetDate ?? getDbClockNow();
-        return;
+        const computedMinTime = minTimeSetDate ?? addSeconds(new Date(), -300);
+        const computedMaxTime = maxTimeSetDate ?? getDbClockNow();
+        return { minTime: computedMinTime, maxTime: computedMaxTime };
     }
     const maxJob = maxIsNow ? getDbClockNow() : maxJobTime(jobs);
     const minJob = minJobTime(jobs);
     const diff = (maxJob.getTime() - minJob.getTime()) / 20000;
-    minTime = minTimeSetDate ?? addSeconds(minJob, -diff);
-    if (maxIsNow) {
-        maxTime = maxTimeSetDate ?? maxJob;
-    }
-    else {
-        maxTime = maxTimeSetDate ?? addSeconds(maxJob, diff);
-    }
+    let computedMinTime = minTimeSetDate ?? addSeconds(minJob, -diff);
+    let computedMaxTime = maxIsNow
+        ? (maxTimeSetDate ?? maxJob)
+        : (maxTimeSetDate ?? addSeconds(maxJob, diff));
+    return { minTime: computedMinTime, maxTime: computedMaxTime };
 }
 function addSeconds(date, seconds) {
     date.setTime(date.getTime() + seconds * 1000);
     return date;
 }
-$: scatterOptions = {
+let success = $derived(jobs?.filter((x) => x.success));
+let failed = $derived(jobs?.filter((x) => !x.success));
+let data = $derived.by(() => {
+    const data = {
+        datasets: [
+            {
+                borderColor: 'rgba(99,0,125, 0)',
+                backgroundColor: FAIL_COLOR,
+                radius: 3,
+                label: 'Failed',
+                data: failed?.map((job) => ({
+                    x: job.started_at,
+                    y: job.duration_ms,
+                    id: job.id,
+                    path: job.script_path
+                })) ?? []
+            },
+            {
+                borderColor: 'rgba(99,0,125, 0)',
+                backgroundColor: SUCCESS_COLOR,
+                radius: 3,
+                label: 'Successful',
+                data: success?.map((job) => ({
+                    x: job.started_at,
+                    y: job.duration_ms,
+                    id: job.id,
+                    path: job.script_path
+                })) ?? []
+            }
+        ]
+    };
+    if (!canSelect || selectedIds.length === 0) {
+        data.datasets[0].backgroundColor = FAIL_COLOR;
+        data.datasets[1].backgroundColor = SUCCESS_COLOR;
+    }
+    else {
+        data.datasets[0].backgroundColor = data.datasets[0].data.map((p) => selectedIds.includes(p.id) ? FAIL_COLOR : FAIL_COLOR_TRANSPARENT);
+        data.datasets[1].backgroundColor = data.datasets[1].data.map((p) => selectedIds.includes(p.id) ? SUCCESS_COLOR : SUCCESS_COLOR_TRANSPARENT);
+    }
+    return data;
+});
+const minMaxTime = $derived.by(() => computeMinMaxTime(jobs, minTimeSet, maxTimeSet));
+let scatterOptions = $derived({
     responsive: true,
     maintainAspectRatio: false,
     plugins: {
@@ -187,11 +175,11 @@ $: scatterOptions = {
             }
         }
     },
-    onClick: (e, u) => {
+    onClick: (_e, u) => {
         if (canSelect) {
             const ids = u.map((j) => data.datasets[j.datasetIndex].data[j.index].id);
             selectedIds = ids;
-            dispatch('pointClicked', ids);
+            onPointClicked(ids);
         }
     },
     scales: {
@@ -200,8 +188,8 @@ $: scatterOptions = {
             grid: {
                 display: false
             },
-            min: minTime,
-            max: maxTime
+            min: minMaxTime.minTime,
+            max: minMaxTime.maxTime
         },
         y: {
             grid: {
@@ -215,10 +203,11 @@ $: scatterOptions = {
         }
     },
     animation: false
-};
-$: data && scatterOptions && highlightSelectedPoints(selectedIds);
+});
 </script>
 
+<DarkModeObserver bind:darkMode />
+
 <!-- {JSON.stringify(minTime)}
 {JSON.stringify(maxTime)}
 
@@ -228,12 +217,8 @@ $: data && scatterOptions && highlightSelectedPoints(selectedIds);
 <!-- {JSON.stringify(jobs?.map((x) => x.started_at))} -->
 <div class="relative max-h-40">
 	{#if !lastFetchWentToEnd}
-		<div class="absolute top-[-10px] left-[60px]"
-			><Button
-				size="xs"
-				color="transparent"
-				variant="contained"
-				on:click={() => dispatch('loadExtra')}
+		<div class="absolute top-[-26px] left-[160px]"
+			><Button size="xs" color="transparent" variant="contained" on:click={() => onLoadExtra()}
 				>Load more <Tooltip2
 					>There are more jobs to load but only the first 1000 were fetched</Tooltip2
 				></Button

package/package/components/RunChart.svelte.d.ts

@@ -1,19 +1,6 @@
 import 'chartjs-adapter-date-fns';
 import type { CompletedJob } from '../gen';
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const RunChart: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     jobs?: CompletedJob[] | undefined;
     maxIsNow?: boolean;
     minTimeSet?: string | undefined;
@@ -21,12 +8,13 @@ declare const RunChart: $$__sveltets_2_IsomorphicComponent<{
     selectedIds?: string[];
     canSelect?: boolean;
     lastFetchWentToEnd?: boolean;
-}, {
-    loadExtra: CustomEvent<any>;
-    zoom: CustomEvent<any>;
-    pointClicked: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RunChart = InstanceType<typeof RunChart>;
+    onPointClicked: (ids: string[]) => void;
+    onLoadExtra: () => void;
+    onZoom: (zoom: {
+        min: Date;
+        max: Date;
+    }) => void;
+}
+declare const RunChart: import("svelte").Component<Props, {}, "selectedIds">;
+type RunChart = ReturnType<typeof RunChart>;
 export default RunChart;

package/package/components/RunForm.svelte

@@ -25,7 +25,7 @@ export async function setArgs(nargs) {
 export function run() {
     runAction(scheduledForStr, args ?? {}, invisible_to_owner, overrideTag);
 }
-let { runnable = $bindable(), runAction, buttonText = 'Run', schedulable = true, detailed = true, autofocus = false, topButton = false, loading = false, noVariablePicker = false, viewKeybinding = false, scheduledForStr = $bindable(), invisible_to_owner = $bindable(), overrideTag = $bindable(), args = $bindable(), jsonView = false, isValid = $bindable(true) } = $props();
+let { runnable, runAction, buttonText = 'Run', schedulable = true, detailed = true, autofocus = false, topButton = false, loading = false, noVariablePicker = false, viewKeybinding = false, scheduledForStr = $bindable(), invisible_to_owner = $bindable(), overrideTag = $bindable(), args = $bindable(), jsonView = false, isValid = $bindable(true) } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
@@ -238,7 +238,7 @@ $effect(() => {
 								bind:scheduledForStr
 								bind:invisible_to_owner
 								bind:overrideTag
-								bind:runnable
+								{runnable}
 							/>
 						{/snippet}
 					</Popover>

package/package/components/RunForm.svelte.d.ts

@@ -33,6 +33,6 @@ declare const RunForm: import("svelte").Component<Props, {
     setArgs: (nargs: Record<string, any>) => Promise<void>;
     run: () => void;
     setCode: (code: string) => void;
-}, "args" | "invisible_to_owner" | "runnable" | "isValid" | "scheduledForStr" | "overrideTag">;
+}, "args" | "invisible_to_owner" | "isValid" | "scheduledForStr" | "overrideTag">;
 type RunForm = ReturnType<typeof RunForm>;
 export default RunForm;

package/package/components/RunFormAdvancedPopup.svelte

@@ -53,7 +53,19 @@ async function loadWorkerGroups() {
 	{#if !$userStore?.operator}
 		{#if $workerTags && $workerTags?.length > 0}
 			<div class="w-full">
-				<select placeholder="Worker group" bind:value={overrideTag}>
+				<select
+					placeholder="Worker group"
+					bind:value={
+						() => overrideTag ?? '',
+						(v) => {
+							if (v == '') {
+								overrideTag = undefined
+							} else {
+								overrideTag = v
+							}
+						}
+					}
+				>
 					{#if overrideTag}
 						<option value="">reset to default</option>
 					{:else}

package/package/components/S3FilePicker.svelte

@@ -489,7 +489,7 @@ $effect.pre(() => {
 								>
 									{#snippet header()}{/snippet}
 									{#snippet footer()}{/snippet}
-									{#snippet children({ index, style })}
+									{#snippet item({ index, style })}
 										{@const file_info = allFilesByKey[displayedFileKeys[index]]}
 
 										<div

package/package/components/SchemaForm.svelte

@@ -14,7 +14,7 @@ import ArgInput from './ArgInput.svelte';
 import { createEventDispatcher, untrack } from 'svelte';
 import { deepEqual } from 'fast-equals';
 import { dragHandleZone } from '@windmill-labs/svelte-dnd-action';
-let { schema = $bindable(), hiddenArgs = [], schemaFieldTooltip = {}, args = $bindable(undefined), disabledArgs = [], disabled = false, isValid = $bindable(true), autofocus = false, defaultValues = {}, shouldHideNoInputs = false, compact = false, linkedSecret = $bindable(undefined), linkedSecretCandidates = undefined, noVariablePicker = false, flexWrap = false, noDelete = false, prettifyHeader = false, disablePortal = false, showSchemaExplorer = false, showReset = false, onlyMaskPassword = false, dndConfig = undefined, items = undefined, helperScript = undefined, lightHeader = false, diff = {}, nestedParent = undefined, shouldDispatchChanges = false, nestedClasses = '', dynamicEnums = {}, largeGap = false, css = undefined, displayType = true, appPath = undefined, className = '', computeS3ForceViewerPolicies = undefined, workspace = undefined, actions } = $props();
+let { schema = $bindable(), hiddenArgs = [], schemaFieldTooltip = {}, args = $bindable(undefined), disabledArgs = [], disabled = false, isValid = $bindable(true), autofocus = false, defaultValues = {}, shouldHideNoInputs = false, compact = false, linkedSecret = $bindable(undefined), linkedSecretCandidates = undefined, noVariablePicker = false, flexWrap = false, noDelete = false, prettifyHeader = false, disablePortal = false, showSchemaExplorer = false, showReset = false, onlyMaskPassword = false, dndConfig = undefined, items = undefined, helperScript = undefined, lightHeader = false, diff = {}, nestedParent = undefined, shouldDispatchChanges = false, nestedClasses = '', dynamicEnums = {}, largeGap = false, css = undefined, displayType = true, appPath = undefined, className = '', computeS3ForceViewerPolicies = undefined, workspace = undefined, actions: actions_render = undefined } = $props();
 const dispatch = createEventDispatcher();
 let inputCheck = $state({});
 export function setDefaults() {
@@ -135,7 +135,6 @@ $effect.pre(() => {
 $effect.pre(() => {
     isValid = allTrue(inputCheck ?? {});
 });
-const actions_render = $derived(actions);
 </script>
 
 {#if showReset}

package/package/components/SchemaForm.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Schema } from '../common';
-import { type DynamicSelect } from '../utils';
+import { type DynamicInput } from '../utils';
 import { type Options as DndOptions } from '@windmill-labs/svelte-dnd-action';
 import type { SchemaDiff } from './schema/schemaUtils.svelte';
 import type { ComponentCustomCSS } from './apps/types';
@@ -30,7 +30,7 @@ interface Props {
         id: string;
         value: string;
     }[] | undefined;
-    helperScript?: DynamicSelect.HelperScript;
+    helperScript?: DynamicInput.HelperScript;
     lightHeader?: boolean;
     diff?: Record<string, SchemaDiff>;
     nestedParent?: {

package/package/components/ScriptBuilder.svelte

@@ -133,7 +133,7 @@ async function loadTriggers() {
 // Add triggers context store
 const triggersState = $state(new Triggers([
     { type: 'webhook', path: '', isDraft: false },
-    { type: 'email', path: '', isDraft: false },
+    { type: 'default_email', path: '', isDraft: false },
     ...(script.draft_triggers ?? [])
 ], undefined, saveSessionDraft));
 const captureOn = writable(undefined);
@@ -908,7 +908,7 @@ async function loadWorkerTags() {
 														>
 															<LanguageIcon {lang} />
 															<span class="ml-2 py-2 truncate">{label}</span>
-															{#if lang === 'nu' || lang === 'ruby'}
+															{#if lang === 'ruby'}
 																<span class="text-tertiary !text-xs"> BETA </span>
 															{/if}
 														</Button>
@@ -1571,6 +1571,7 @@ async function loadWorkerTags() {
 			bind:hasPreprocessor
 			bind:captureTable
 			bind:assets={script.assets}
+			enablePreprocessorSnippet
 		/>
 	</div>
 {:else}

package/package/components/ScriptEditor.svelte

@@ -35,7 +35,8 @@ import { aiChatManager, AIMode } from './copilot/chat/AIChatManager.svelte';
 import { triggerableByAI } from '../actions/triggerableByAI.svelte';
 import AssetsDropdownButton from './assets/AssetsDropdownButton.svelte';
 import { assetEq } from './assets/lib';
-let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, assets = $bindable(), editor_bar_right } = $props();
+import { editor as meditor } from 'monaco-editor';
+let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, assets = $bindable(), editor_bar_right, enablePreprocessorSnippet = false } = $props();
 $effect.pre(() => {
     if (schema == undefined) {
         schema = emptySchema();
@@ -273,7 +274,7 @@ function getError(job) {
 function showDiffMode() {
     diffMode = true;
     diffEditor?.setOriginal(lastDeployedCode ?? '');
-    diffEditor?.setModified(editor?.getCode() ?? '');
+    diffEditor?.setModifiedModel(editor?.getModel());
     diffEditor?.show();
     editor?.hide();
 }
@@ -296,9 +297,9 @@ $effect(() => {
     };
     untrack(() => {
         aiChatManager.scriptEditorOptions = options;
-        aiChatManager.scriptEditorApplyCode = (code, applyAll = false) => {
+        aiChatManager.scriptEditorApplyCode = async (code, opts) => {
             hideDiffMode();
-            editor?.reviewAndApplyCode(code, applyAll);
+            await editor?.reviewAndApplyCode(code, opts);
         };
         aiChatManager.scriptEditorShowDiffMode = showDiffMode;
     });
@@ -491,18 +492,32 @@ $effect(() => {
 						automaticLayout={true}
 						{fixedOverflowWidgets}
 						{args}
+						{enablePreprocessorSnippet}
 					/>
 					<DiffEditor
-						class="h-full"
+						className="h-full"
 						bind:this={diffEditor}
+						modifiedModel={editor?.getModel() as meditor.ITextModel}
 						automaticLayout
 						defaultLang={scriptLangToEditorLang(lang)}
 						{fixedOverflowWidgets}
-						showButtons={diffMode}
-						on:hideDiffMode={hideDiffMode}
-						on:seeHistory={() => {
-							showHistoryDrawer = true
-						}}
+						buttons={diffMode
+							? [
+									{
+										text: 'See changes history',
+										onClick: () => {
+											showHistoryDrawer = true
+										}
+									},
+									{
+										text: 'Quit diff mode',
+										onClick: () => {
+											hideDiffMode()
+										},
+										color: 'red'
+									}
+								]
+							: []}
 					/>
 				{/key}
 			</div>

package/package/components/ScriptEditor.svelte.d.ts

@@ -35,6 +35,7 @@ interface Props {
     disableAi?: boolean;
     assets?: AssetWithAltAccessType[];
     editor_bar_right?: import('svelte').Snippet;
+    enablePreprocessorSnippet?: boolean;
 }
 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> & {
@@ -74,6 +75,6 @@ declare const ScriptEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     setCollaborationMode: () => Promise<void>;
     disableCollaboration: () => void;
     updateArgs: (newArgs: Record<string, any>) => Promise<void>;
-}, "args" | "code" | "assets" | "schema" | "selectedTab" | "editor" | "diffEditor" | "hasPreprocessor" | "captureTable">;
+}, "args" | "code" | "assets" | "schema" | "editor" | "selectedTab" | "diffEditor" | "hasPreprocessor" | "captureTable">;
 type ScriptEditor = InstanceType<typeof ScriptEditor>;
 export default ScriptEditor;

package/package/components/ServiceLogsInner.svelte

@@ -12,7 +12,7 @@ import { copyToClipboard, scroll_into_view_if_needed_polyfill, truncateRev } fro
 import LogSnippetViewer from './LogSnippetViewer.svelte';
 import { Button, Drawer, DrawerContent } from './common';
 import ClipboardCopy from 'lucide-svelte/icons/clipboard-copy';
-import AnsiUp from 'ansi_up';
+import { AnsiUp } from 'ansi_up';
 import SplitPanesOrColumnOnMobile from './splitPanes/SplitPanesOrColumnOnMobile.svelte';
 import Select from './select/Select.svelte';
 import { goto } from '../navigation';

package/package/components/ShareModal.svelte.d.ts

@@ -16,7 +16,7 @@ declare const ShareModal: $$__sveltets_2_IsomorphicComponent<Record<string, neve
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    openDrawer: (newPath: string, kind_l: "resource" | "script" | "flow" | "app" | "variable" | "schedule" | "group_" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "gcp_trigger" | "sqs_trigger") => Promise<void>;
+    openDrawer: (newPath: string, kind_l: "resource" | "script" | "flow" | "app" | "variable" | "schedule" | "group_" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "gcp_trigger" | "sqs_trigger" | "email_trigger") => Promise<void>;
 }, "">;
 type ShareModal = InstanceType<typeof ShareModal>;
 export default ShareModal;

package/package/components/SimpleEditor.svelte

@@ -7,51 +7,6 @@
 	import '@codingame/monaco-vscode-standalone-css-language-features'
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
 	import '@codingame/monaco-vscode-standalone-html-language-features'
-	import {
-		editor as meditor,
-		KeyCode,
-		KeyMod,
-		Uri as mUri,
-		languages,
-		type IRange,
-		type IDisposable,
-		type IPosition
-	} from 'monaco-editor'
-
-	languages.typescript.javascriptDefaults.setCompilerOptions({
-		target: languages.typescript.ScriptTarget.Latest,
-		allowNonTsExtensions: true,
-		noSemanticValidation: false,
-		noLib: true,
-		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
-	})
-	function setDiagnosticsOptions() {
-		languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-			noSemanticValidation: false,
-			noSyntaxValidation: false,
-			noSuggestionDiagnostics: false,
-			diagnosticCodesToIgnore: [1108]
-		})
-	}
-	setDiagnosticsOptions()
-	languages.json.jsonDefaults.setDiagnosticsOptions({
-		validate: true,
-		allowComments: false,
-		schemas: [],
-		enableSchemaRequest: true
-	})
-	languages.json.jsonDefaults.setModeConfiguration({
-		documentRangeFormattingEdits: false,
-		documentFormattingEdits: true,
-		hovers: true,
-		completionItems: true,
-		documentSymbols: true,
-		tokens: true,
-		colors: true,
-		foldingRanges: true,
-		selectionRanges: true,
-		diagnostics: true
-	})
 </script>
 
 <script lang="ts">import { BROWSER } from 'esm-env';
@@ -77,6 +32,8 @@ import { initVim } from './monaco_keybindings';
 import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
 import { editorPositionMap } from '../utils';
 import { langToExt } from '../editorLangUtils';
+import { editor as meditor, KeyCode, KeyMod, Uri as mUri, languages } from 'monaco-editor';
+import { setMonacoJavascriptOptions, setMonacoJsonOptions } from './monacoLanguagesOptions';
 // import { createConfiguredEditor } from 'vscode/monaco'
 // import type { IStandaloneCodeEditor } from 'vscode/vscode/vs/editor/standalone/browser/standaloneCodeEditor'
 let divEl = null;
@@ -247,30 +204,10 @@ $effect(() => {
 });
 let fontSize = $derived(small ? 12 : 14);
 async function loadMonaco() {
+    setMonacoJsonOptions();
+    setMonacoJavascriptOptions();
     await initializeVscode();
     initialized = true;
-    // if (lang === 'javascript') {
-    // 	languages.typescript.javascriptDefaults.setCompilerOptions({
-    // 		target: languages.typescript.ScriptTarget.Latest,
-    // 		allowNonTsExtensions: true,
-    // 		noSemanticValidation: false,
-    // 		noLib: true,
-    // 		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
-    // 	})
-    // 	languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-    // 		noSemanticValidation: false,
-    // 		noSyntaxValidation: false,
-    // 		noSuggestionDiagnostics: false,
-    // 		diagnosticCodesToIgnore: [1108]
-    // 	})
-    // } else if (lang === 'json') {
-    // 	languages.json.jsonDefaults.setDiagnosticsOptions({
-    // 		validate: true,
-    // 		allowComments: false,
-    // 		schemas: [],
-    // 		enableSchemaRequest: true
-    // 	})
-    // }
     try {
         model = meditor.createModel(code ?? '', lang, mUri.parse(uri));
     }
@@ -289,7 +226,6 @@ async function loadMonaco() {
         return;
     }
     try {
-        console.log('fixedOverflowWidgets', fixedOverflowWidgets);
         editor = meditor.create(divEl, {
             ...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets, $relativeLineNumbers),
             model,