windmill-components 1.558.3 → 1.596.0

package/package/components/Editor.svelte

@@ -21,8 +21,8 @@ import { dbSchemas, codeCompletionSessionEnabled, lspTokenStore, formatOnSave, v
 import { editorConfig, updateOptions } from '../editorUtils';
 import { createHash as randomHash } from '../editorLangUtils';
 import { workspaceStore } from '../stores';
-import { ResourceService, UserService } from '../gen';
-import { initializeVscode, keepModelAroundToAvoidDisposalOfWorkers } from './vscode';
+import { ResourceService, UserService, WorkspaceService } from '../gen';
+import { initializeVscode, keepModelAroundToAvoidDisposalOfWorkers, MONACO_Y_PADDING } from './vscode';
 import { initializeMode } from 'monaco-graphql/esm/initializeMode.js';
 import { editor as meditor, languages, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor';
 import EditorTheme from './EditorTheme.svelte';
@@ -30,6 +30,7 @@ import { BIGQUERY_TYPES, DUCKDB_TYPES, MSSQL_TYPES, MYSQL_TYPES, ORACLEDB_TYPES,
 import { setupTypeAcquisition } from '../ata/index';
 import { initWasmTs } from '../infer';
 import { initVim } from './monaco_keybindings';
+import { updateSqlQueriesInWorker, waitForWorkerInitialization } from './sqlTypeService';
 import { parseTypescriptDeps } from '../relative_imports';
 import { scriptLangToEditorLang } from '../scripts';
 import * as htmllang from '../svelteMonarch';
@@ -44,14 +45,17 @@ import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
 import { editorPositionMap } from '../utils';
 import { extToLang, langToExt } from '../editorLangUtils';
 import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
-import { getDbSchemas } from './apps/components/display/dbtable/utils';
-import { PYTHON_PREPROCESSOR_MODULE_CODE, TS_PREPROCESSOR_MODULE_CODE } from '../script_helpers';
+import { canHavePreprocessor, getPreprocessorModuleCode } from '../script_helpers';
 import { setMonacoTypescriptOptions } from './monacoLanguagesOptions';
 import { copilotInfo } from '../aiStore';
+import { getDbSchemas } from './apps/components/display/dbtable/metadata';
+import { rawAppLintStore } from './raw_apps/lintStore';
+import { MarkerSeverity } from 'monaco-editor';
+import { resource, useDebounce, watch } from 'runed';
 // import EditorTheme from './EditorTheme.svelte'
 let divEl = $state(null);
 let editor = $state(null);
-let { code = $bindable(), cmdEnterAction = undefined, formatAction = undefined, automaticLayout = true, websocketAlive = $bindable(), shouldBindKey = true, fixedOverflowWidgets = true, path = undefined, yContent = undefined, awareness = undefined, folding = false, args = undefined, useWebsockets = true, small = false, scriptLang, disabled = false, lineNumbersMinChars = 3, files = {}, extraLib = undefined, changeTimeout = 500, loadAsync = false, key = undefined, class: clazz = undefined, moduleId = undefined, enablePreprocessorSnippet = false } = $props();
+let { code = $bindable(), cmdEnterAction = undefined, formatAction = undefined, automaticLayout = true, websocketAlive = $bindable(), shouldBindKey = true, fixedOverflowWidgets = true, path = undefined, yContent = undefined, awareness = undefined, folding = false, args = undefined, useWebsockets = true, small = false, scriptLang, disabled = false, lineNumbersMinChars = 3, files = {}, extraLib = undefined, changeTimeout = 500, loadAsync = false, key = undefined, class: clazz = undefined, moduleId = undefined, enablePreprocessorSnippet = false, rawAppRunnableKey = undefined, preparedAssetsSqlQueries } = $props();
 $effect.pre(() => {
     if (websocketAlive == undefined) {
         websocketAlive = {
@@ -139,6 +143,11 @@ export function insertAtCursor(code) {
         editor.trigger('keyboard', 'type', { text: code });
     }
 }
+export function insertAtCurrentLine(code) {
+    if (editor) {
+        insertAtLine(code, editor.getPosition()?.lineNumber ?? 0);
+    }
+}
 export function arrowDown() {
     if (editor) {
         let pos = editor.getPosition();
@@ -211,6 +220,25 @@ export function setCode(ncode, noHistory = false) {
             editor.pushUndoStop();
         }
     }
+    // Update lint diagnostics after code change
+    updateRawAppLintDiagnostics();
+}
+/** Collect Monaco markers and update the raw app lint store */
+function updateRawAppLintDiagnostics() {
+    if (!rawAppRunnableKey || !model)
+        return;
+    const markers = meditor.getModelMarkers({ resource: model.uri });
+    const lintErrors = markers
+        .filter((m) => m.severity === MarkerSeverity.Error || m.severity === MarkerSeverity.Warning)
+        .map((m) => ({
+        message: m.message,
+        severity: m.severity === MarkerSeverity.Error ? 'error' : 'warning',
+        startLineNumber: m.startLineNumber,
+        startColumn: m.startColumn,
+        endLineNumber: m.endLineNumber,
+        endColumn: m.endColumn
+    }));
+    rawAppLintStore.setDiagnostics(rawAppRunnableKey, lintErrors);
 }
 function updateCode() {
     const ncode = getCode();
@@ -290,10 +318,44 @@ export function getScriptLang() {
 }
 let command = undefined;
 let sqlTypeCompletor = $state(undefined);
+let resultCollectionCompletor = $state(undefined);
 function addSqlTypeCompletions() {
-    if (sqlTypeCompletor) {
-        sqlTypeCompletor.dispose();
-    }
+    sqlTypeCompletor?.dispose();
+    resultCollectionCompletor?.dispose();
+    resultCollectionCompletor = languages.registerCompletionItemProvider('sql', {
+        triggerCharacters: ['='],
+        provideCompletionItems: function (model, position) {
+            const lineContent = model.getLineContent(position.lineNumber);
+            const match = lineContent.match(/^--\s*result_collection=/);
+            if (!match) {
+                return { suggestions: [] };
+            }
+            const word = model.getWordUntilPosition(position);
+            const range = {
+                startLineNumber: position.lineNumber,
+                endLineNumber: position.lineNumber,
+                startColumn: word.startColumn,
+                endColumn: word.endColumn
+            };
+            const suggestions = [
+                'last_statement_all_rows',
+                'last_statement_first_row',
+                'last_statement_all_rows_scalar',
+                'last_statement_first_row_scalar',
+                'all_statements_all_rows',
+                'all_statements_first_row',
+                'all_statements_all_rows_scalar',
+                'all_statements_first_row_scalar'
+            ].map((label) => ({
+                label: label,
+                kind: languages.CompletionItemKind.Function,
+                insertText: label,
+                range,
+                sortText: 'a'
+            }));
+            return { suggestions };
+        }
+    });
     sqlTypeCompletor = languages.registerCompletionItemProvider('sql', {
         triggerCharacters: scriptLang === 'postgresql' ? [':'] : ['('],
         provideCompletionItems: function (model, position) {
@@ -347,12 +409,19 @@ async function updateSchema(newSchemaRes) {
     if (typeof newSchemaRes === 'string') {
         const resourcePath = newSchemaRes.replace('$res:', '');
         dbSchema = $dbSchemas[resourcePath];
-        if (lang === 'graphql' && dbSchema === undefined) {
-            await getDbSchemas(lang, resourcePath, $workspaceStore, $dbSchemas, (e) => {
-                console.error('error getting graphql db schema', e);
-            });
-            dbSchema = $dbSchemas[resourcePath];
+        if (dbSchema === undefined) {
+            if (lang === 'graphql') {
+                await getDbSchemas('graphql', resourcePath, $workspaceStore, $dbSchemas, (e) => {
+                    console.error('error getting graphql db schema', e);
+                });
+            }
+            else if (lang === 'sql') {
+                await getDbSchemas(scriptLang ?? '', resourcePath, $workspaceStore, $dbSchemas, (e) => {
+                    console.error(`error getting SQL (${scriptLang}) db schema`, e);
+                });
+            }
         }
+        dbSchema = $dbSchemas[resourcePath];
     }
     else {
         dbSchema = undefined;
@@ -464,7 +533,11 @@ function addPreprocessorCompletions(lang) {
     if (preprocessorCompletor) {
         preprocessorCompletor.dispose();
     }
-    const preprocessorCode = lang === 'typescript' ? TS_PREPROCESSOR_MODULE_CODE : PYTHON_PREPROCESSOR_MODULE_CODE;
+    const windmillLang = lang === 'typescript' ? 'deno' : lang === 'python' ? 'python3' : lang;
+    const preprocessorCode = getPreprocessorModuleCode(windmillLang);
+    if (!preprocessorCode) {
+        return;
+    }
     preprocessorCompletor = languages.registerCompletionItemProvider(lang, {
         provideCompletionItems: function (model, position) {
             const word = model.getWordUntilPosition(position);
@@ -842,6 +915,7 @@ export async function reloadWebsocket() {
     }
 }
 let pathTimeout = undefined;
+let yPadding = MONACO_Y_PADDING;
 function getHostname() {
     return BROWSER ? window.location.protocol + '//' + window.location.host : 'SSR';
 }
@@ -997,7 +1071,8 @@ async function loadMonaco() {
             lineNumbersMinChars,
             // overflowWidgetsDomNode: widgets,
             tabSize: lang == 'python' ? 4 : 2,
-            folding
+            folding,
+            padding: { bottom: yPadding, top: yPadding }
         });
         if (key && editorPositionMap?.[key]) {
             editor.setPosition(editorPositionMap[key]);
@@ -1010,6 +1085,20 @@ async function loadMonaco() {
     }
     keepModelAroundToAvoidDisposalOfWorkers();
     // updateEditorKeybindingsMode(editor, 'vim', undefined)
+    // Raw app lint collection: listen for marker changes and report to store
+    let markerChangeDisposable = undefined;
+    if (rawAppRunnableKey && model) {
+        markerChangeDisposable = meditor.onDidChangeMarkers((uris) => {
+            if (!model || !rawAppRunnableKey)
+                return;
+            const modelUri = model.uri.toString();
+            if (uris.some((u) => u.toString() === modelUri)) {
+                updateRawAppLintDiagnostics();
+            }
+        });
+        // Initial lint diagnostics collection
+        updateRawAppLintDiagnostics();
+    }
     let ataModel = undefined;
     editor?.onDidChangeModelContent((event) => {
         timeoutModel && clearTimeout(timeoutModel);
@@ -1108,6 +1197,9 @@ async function loadMonaco() {
             closeWebsockets();
             vimDisposable?.dispose();
             closeAIInlineWidget();
+            markerChangeDisposable?.dispose();
+            // Note: We don't clear lint diagnostics on dispose - they persist across runnable switches
+            // Diagnostics are only updated when Monaco reports new markers for this runnable
             console.log('disposing editor');
             model?.dispose();
             editor && editor.dispose();
@@ -1121,6 +1213,38 @@ async function loadMonaco() {
 export async function fetchPackageDeps(deps) {
     ata?.(deps);
 }
+let customTsTypesData = resource([() => lang], async () => {
+    if (lang !== 'typescript')
+        return undefined;
+    let datatables = await WorkspaceService.listDataTables({ workspace: $workspaceStore ?? '' });
+    let ducklakes = await WorkspaceService.listDucklakes({ workspace: $workspaceStore ?? '' });
+    return { datatables, ducklakes };
+});
+function setTypescriptCustomTypes() {
+    if (!customTsTypesData.current)
+        return;
+    if (lang !== 'typescript')
+        return;
+    const ducklakeNames = customTsTypesData.current.ducklakes;
+    const datatableNames = customTsTypesData.current.datatables;
+    const ducklakeNameType = ducklakeNames.length
+        ? ducklakeNames.map((name) => JSON.stringify(name)).join(' | ')
+        : 'string';
+    const datatableNameType = datatableNames.length
+        ? datatableNames.map((name) => JSON.stringify(name)).join(' | ')
+        : 'string';
+    const isDucklakeOptional = ducklakeNames.includes('main');
+    const isDataTableOptional = datatableNames.includes('main');
+    let disposeTs = languages.typescript.typescriptDefaults.addExtraLib(`export {};
+			declare module 'windmill-client' {
+				import { type DatatableSqlTemplateFunction, type SqlTemplateFunction } from 'windmill-client';
+				export function ducklake(name${isDucklakeOptional ? '?' : ''}: ${ducklakeNameType}): SqlTemplateFunction;
+				export function datatable(name${isDataTableOptional ? '?' : ''}: ${datatableNameType}): DatatableSqlTemplateFunction;
+			}`, 'file:///custom_wmill_types.d.ts');
+    return () => {
+        disposeTs.dispose();
+    };
+}
 async function setTypescriptRTNamespace() {
     if (scriptLang &&
         (scriptLang === 'bun' ||
@@ -1267,6 +1391,7 @@ onDestroy(() => {
     sqlSchemaCompletor && sqlSchemaCompletor.dispose();
     autocompletor && autocompletor.dispose();
     sqlTypeCompletor && sqlTypeCompletor.dispose();
+    resultCollectionCompletor && resultCollectionCompletor.dispose();
     preprocessorCompletor && preprocessorCompletor.dispose();
     timeoutModel && clearTimeout(timeoutModel);
     loadTimeout && clearTimeout(loadTimeout);
@@ -1334,10 +1459,10 @@ $effect(() => {
 $effect(() => {
     initialized && lang === 'sql' && scriptLang
         ? untrack(() => addSqlTypeCompletions())
-        : sqlTypeCompletor?.dispose();
+        : (sqlTypeCompletor?.dispose(), resultCollectionCompletor?.dispose());
 });
 $effect(() => {
-    initialized && (lang === 'typescript' || lang === 'python') && enablePreprocessorSnippet
+    initialized && canHavePreprocessor(lang) && enablePreprocessorSnippet
         ? untrack(() => addPreprocessorCompletions(lang))
         : preprocessorCompletor?.dispose();
 });
@@ -1401,13 +1526,45 @@ $effect(() => {
         lineNumbers: $relativeLineNumbers ? 'relative' : 'on'
     });
 });
+let isTsWorkerInitialized = resource([() => lang, () => initialized, () => filePath], async () => {
+    if (lang !== 'typescript' || !initialized)
+        return false;
+    console.log('[Editor.isTsWorkerInitialized] Waiting for TS Worker...');
+    await waitForWorkerInitialization(filePath);
+    console.log('[Editor.isTsWorkerInitialized] TS Worker initialized successfully');
+    return true;
+});
+// Update SQL query type information in the TypeScript worker
+// This enables TypeScript to show proper types for SQL template literals
+let handleSqlTypingInTs = useDebounce(function handleSqlTypingInTs() {
+    if (lang !== 'typescript' || !isTsWorkerInitialized.current)
+        return;
+    if (!preparedAssetsSqlQueries || preparedAssetsSqlQueries.length === 0) {
+        // Clear SQL queries if none exist
+        updateSqlQueriesInWorker(filePath, []);
+        return;
+    }
+    // Send SQL query information to the custom TypeScript worker
+    // The worker will inject type parameters into the code that TypeScript analyzes
+    // Worker async function call freezes if we pass a Proxy, $state.snapshot() is very important here
+    updateSqlQueriesInWorker(filePath, $state.snapshot(preparedAssetsSqlQueries));
+}, 250);
+watch([
+    () => preparedAssetsSqlQueries,
+    () => lang,
+    () => filePath,
+    () => isTsWorkerInitialized.current
+], () => {
+    handleSqlTypingInTs();
+});
+watch([() => customTsTypesData.current], setTypescriptCustomTypes);
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
 <EditorTheme />
 {#if !editor}
 	<div class="inset-0 absolute overflow-clip">
-		<FakeMonacoPlaceHolder {code} />
+		<FakeMonacoPlaceHolder {code} lineNumbersWidth={51} />
 	</div>
 {/if}
 <div bind:this={divEl} class="{clazz} editor {disabled ? 'disabled' : ''}"></div>

package/package/components/Editor.svelte.d.ts

@@ -4,6 +4,7 @@ import { type Preview } from '../gen';
 import type { Text } from 'yjs';
 import { editor as meditor, type IDisposable } from 'monaco-editor';
 import { type DepsToGet } from '../ata/index';
+import { type InferAssetsSqlQueryDetails } from '../infer';
 import { AIChatEditorHandler, type ReviewChangesOpts } from './copilot/chat/monaco-adapter';
 interface Props {
     code?: string;
@@ -34,6 +35,9 @@ interface Props {
     class?: string | undefined;
     moduleId?: string;
     enablePreprocessorSnippet?: boolean;
+    /** When set, enables raw app lint collection mode and reports Monaco markers to the lint store under this key */
+    rawAppRunnableKey?: string | undefined;
+    preparedAssetsSqlQueries?: InferAssetsSqlQueryDetails[] | undefined;
 }
 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> & {
@@ -62,6 +66,7 @@ declare const Editor: $$__sveltets_2_IsomorphicComponent<Props, {
     getCode: () => string;
     getModel: () => meditor.IEditorModel | undefined;
     insertAtCursor: (code: string) => void;
+    insertAtCurrentLine: (code: string) => void;
     arrowDown: () => void;
     backspace: () => void;
     insertAtBeginning: (code: string) => void;