windmill-components 1.13.2 → 1.13.3

package/components/Editor.svelte

@@ -6,6 +6,8 @@ import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import * as vscode from 'vscode';
+import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
 let divEl = null;
 let editor;
 export let deno = false;
@@ -255,6 +257,7 @@ async function loadMonaco() {
     });
     editor.onDidChangeModelContent((event) => {
         code = getCode();
+        dispatch('change');
     });
     if (lang == 'json') {
         monaco.languages.json.jsonDefaults.setDiagnosticsOptions({

package/components/Editor.svelte.d.ts

@@ -21,6 +21,8 @@ declare const __propDef: {
         reloadWebsocket?: (() => Promise<void>) | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/SchemaEditor.svelte

@@ -12,16 +12,11 @@ let argError = '';
 let editing = false;
 let oldArgName; // when editing argument and changing name
 let viewJsonSchema = false;
-let editor;
-$: schemaString = JSON.stringify(schema, null, '\t');
-export function getEditor() {
-    return editor;
-}
 // Binding is not enough because monaco Editor does not support two-way binding
 export function getSchema() {
     if (viewJsonSchema) {
         try {
-            schema = JSON.parse(editor.getCode());
+            schema = JSON.parse(schemaString);
             return schema;
         }
         catch (err) {
@@ -30,7 +25,7 @@ export function getSchema() {
     }
     else {
         try {
-            editor.setCode(JSON.stringify(schema, null, '\t'));
+            schemaString = JSON.stringify(schema, null, '\t');
             return schema;
         }
         catch (err) {
@@ -66,6 +61,8 @@ function handleAddOrEditArgument() {
         oldArgName = undefined;
         schemaModal.closeModal();
     }
+    schema = schema;
+    schemaString = JSON.stringify(schema, null, '\t');
 }
 function startEditArgument(argName) {
     argError = '';
@@ -83,7 +80,8 @@ function handleDeleteArgument(argName) {
     try {
         if (Object.keys(schema.properties).includes(argName)) {
             delete schema.properties[argName];
-            schema = schema; //needed for reactivity, see https://svelte.dev/tutorial/updating-arrays-and-objects
+            schema = schema;
+            schemaString = JSON.stringify(schema, null, '\t');
         }
         else {
             throw Error('Argument not found!');
@@ -96,21 +94,14 @@ function handleDeleteArgument(argName) {
 }
 function switchTab() {
     if (viewJsonSchema) {
-        let schemaString = editor.getCode();
         if (schemaString === '') {
             schemaString = JSON.stringify(emptySchema(), null, 4);
         }
-        try {
-            schema = JSON.parse(schemaString);
-            viewJsonSchema = false;
-        }
-        catch (err) {
-            sendUserToast(err, true);
-        }
+        viewJsonSchema = false;
     }
     else {
         try {
-            editor.setCode(JSON.stringify(schema, null, '\t'));
+            schemaString = JSON.stringify(schema, null, '\t');
             viewJsonSchema = true;
         }
         catch (err) {
@@ -153,61 +144,75 @@ function switchTab() {
 	</div>
 	<!--json schema or table view-->
 	<div class="border-t py-1  h-full overflow-y-auto">
-		<div class="h-full {viewJsonSchema ? 'hidden' : ''}">
-			{#if schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
-				<TableCustom class="w-full min-h-full">
-					<tr slot="header-row" class="underline">
-						<th>name</th>
-						<th>type</th>
-						<th>description</th>
-						<th>default</th>
-						<th>required</th>
-					</tr>
-					<tbody slot="body">
-						{#each Object.entries(schema.properties) as [name, property] (name)}
-							<tr>
-								<td>{name}</td>
-								<td
-									>{#if !property.type} any {:else} {property.type} {/if}</td
-								>
-								<td>{property.description}</td>
-								<td>{JSON.stringify(property.default) ?? ''}</td>
-								<td>{schema.required.includes(name) ? 'required' : 'optional'}</td>
-								<td class="">
-									<button class="mr-2" on:click={() => handleDeleteArgument(name)}
-										><svg
-											class="w-4 h-4"
-											fill="none"
-											stroke="currentColor"
-											viewBox="0 0 24 14"
-											xmlns="http://www.w3.org/2000/svg"
+		{#if !viewJsonSchema}
+			<div class="h-full">
+				{#if schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
+					<TableCustom class="w-full min-h-full">
+						<tr slot="header-row" class="underline">
+							<th>name</th>
+							<th>type</th>
+							<th>description</th>
+							<th>default</th>
+							<th>required</th>
+						</tr>
+						<tbody slot="body">
+							{#each Object.entries(schema.properties) as [name, property] (name)}
+								<tr>
+									<td>{name}</td>
+									<td
+										>{#if !property.type} any {:else} {property.type} {/if}</td
+									>
+									<td>{property.description}</td>
+									<td>{JSON.stringify(property.default) ?? ''}</td>
+									<td>{schema.required.includes(name) ? 'required' : 'optional'}</td>
+									<td class="">
+										<button class="mr-2" on:click={() => handleDeleteArgument(name)}
+											><svg
+												class="w-4 h-4"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 14"
+												xmlns="http://www.w3.org/2000/svg"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M6 18L18 6M6 6l12 12"
+												/>
+											</svg></button
 										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M6 18L18 6M6 6l12 12"
-											/>
-										</svg></button
+										<button
+											class="default-button-secondary text-xs inline-flex"
+											on:click={() => {
+												startEditArgument(name)
+											}}>edit</button
+										></td
 									>
-									<button
-										class="default-button-secondary text-xs inline-flex"
-										on:click={() => {
-											startEditArgument(name)
-										}}>edit</button
-									></td
-								>
-							</tr>
-						{/each}
-					</tbody>
-				</TableCustom>
-			{:else}
-				<div class="text-gray-700 text-xs italic">This script has no argument</div>
-			{/if}
-		</div>
-		<div class={viewJsonSchema ? '' : 'hidden'}>
-			<Editor code={schemaString} bind:this={editor} lang={'json'} class="small-editor" />
-		</div>
+								</tr>
+							{/each}
+						</tbody>
+					</TableCustom>
+				{:else}
+					<div class="text-gray-700 text-xs italic">This script has no argument</div>
+				{/if}
+			</div>
+		{:else}
+			<div>
+				<Editor
+					on:change={() => {
+						try {
+							schema = JSON.parse(schemaString)
+						} catch (err) {
+							sendUserToast(err.message, true)
+						}
+					}}
+					bind:code={schemaString}
+					lang={'json'}
+					class="small-editor"
+				/>
+			</div>
+		{/if}
 	</div>
 </div>
 

package/components/SchemaEditor.svelte.d.ts

@@ -1,10 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
-import Editor from './Editor.svelte';
 declare const __propDef: {
     props: {
         schema?: Schema | undefined;
-        getEditor?: (() => Editor) | undefined;
         getSchema?: (() => Schema) | undefined;
     };
     events: {
@@ -16,7 +14,6 @@ export declare type SchemaEditorProps = typeof __propDef.props;
 export declare type SchemaEditorEvents = typeof __propDef.events;
 export declare type SchemaEditorSlots = typeof __propDef.slots;
 export default class SchemaEditor extends SvelteComponentTyped<SchemaEditorProps, SchemaEditorEvents, SchemaEditorSlots> {
-    get getEditor(): () => Editor;
     get getSchema(): () => Schema;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "windmill-components",
-  "version": "1.13.2",
+  "version": "1.13.3",
   "devDependencies": {
     "@sveltejs/adapter-node": "^1.0.0-next.78",
     "@sveltejs/adapter-static": "^1.0.0-next.34",