From 846837ce6505b649edbfe7bab661cdc53a630593 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 28 Sep 2022 19:16:05 +0200
Subject: [PATCH] simplify script editor code bindings

---
 .../src/lib/components/ScriptBuilder.svelte   | 37 +++----------------
 .../src/lib/components/ScriptEditor.svelte    | 19 ++++------
 2 files changed, 13 insertions(+), 43 deletions(-)

diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 45cb709742..069f07745d 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -6,9 +6,8 @@
 	import { inferArgs } from '$lib/infer'
 	import { initialCode, isInitialCode } from '$lib/script_helpers'
 	import { workspaceStore } from '$lib/stores'
-	import { emptySchema, encodeState, sendUserToast, setQueryWithoutLoad } from '$lib/utils'
+	import { encodeState, sendUserToast, setQueryWithoutLoad } from '$lib/utils'
 	import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte'
-	import { onDestroy } from 'svelte'
 	import SvelteMarkdown from 'svelte-markdown'
 	import Path from './Path.svelte'
 	import RadioButton from './RadioButton.svelte'
@@ -18,9 +17,6 @@
 	import CenteredPage from './CenteredPage.svelte'
 	import Tooltip from './Tooltip.svelte'
 
-	let editor: ScriptEditor
-	let scriptSchema: ScriptSchema
-
 	export let script: Script
 	export let initialPath: string = ''
 	export let template: 'pgsql' | 'script' = 'script'
@@ -44,6 +40,9 @@
 
 	async function editScript(): Promise<void> {
 		try {
+			if (!script.schema) {
+				await inferArgs(script.language, script.content, script.schema)
+			}
 			const newHash = await ScriptService.createScript({
 				workspace: $workspaceStore!,
 				requestBody: {
@@ -65,34 +64,12 @@
 		}
 	}
 
-	export function setCode(script: Script) {
-		editor?.getEditor().setCode(script.content)
-
-		if (scriptSchema) {
-			if (script.schema) {
-				scriptSchema.setSchema(script.schema)
-			} else {
-				scriptSchema.setSchema(emptySchema())
-			}
-		}
-	}
-
-	async function inferSchema() {
-		await inferArgs(script.language, script.content, script.schema)
-	}
-
 	async function changeStep(step: number) {
-		if (step == 3) {
-			script.content = editor?.getEditor().getCode() ?? script.content
-			await inferSchema()
-			script.schema = script.schema
+		if (step > 1) {
+			await inferArgs(script.language, script.content, script.schema)
 		}
 		goto(`?step=${step}`)
 	}
-
-	onDestroy(() => {
-		editor?.$destroy()
-	})
 </script>
 
 <div class="flex flex-col h-screen">
@@ -154,7 +131,6 @@
 					<button
 						class="default-button-secondary px-6 max-h-8 mr-2"
 						on:click={async () => {
-							await inferSchema()
 							editScript()
 						}}
 					>
@@ -324,7 +300,6 @@
 		</CenteredPage>
 	{:else if step === 2}
 		<ScriptEditor
-			bind:this={editor}
 			bind:schema={script.schema}
 			path={script.path}
 			bind:code={script.content}
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 787b4a33f8..784effa29b 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -23,6 +23,7 @@
 	import EditorBar from './EditorBar.svelte'
 	import Button from './common/button/Button.svelte'
 	import TestJobLoader from './TestJobLoader.svelte'
+	import { onMount } from 'svelte'
 
 	// Exported
 	export let schema: Schema = emptySchema()
@@ -49,10 +50,6 @@
 
 	$: lastSave = localStorage.getItem(path ?? 'last_save')
 
-	export function getEditor(): Editor {
-		return editor
-	}
-
 	function onKeyDown(event: KeyboardEvent) {
 		if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
 			event.preventDefault()
@@ -61,7 +58,7 @@
 	}
 
 	function runTest() {
-		testJobLoader.runPreview(path, editor.getCode(), lang, args)
+		testJobLoader.runPreview(path, code, lang, args)
 	}
 
 	async function loadPastTests(): Promise<void> {
@@ -80,7 +77,7 @@
 				isDefault.push(k)
 			}
 		})
-		await inferArgs(lang, editor.getCode(), schema)
+		await inferArgs(lang, code, schema)
 		schema = schema
 
 		isDefault
@@ -92,6 +89,10 @@
 			}
 		}
 	}
+
+	onMount(() => {
+		inferSchema()
+	})
 </script>
 
 <TestJobLoader
@@ -132,7 +133,6 @@
 				<div
 					class="p-2 h-full"
 					on:mouseleave={() => {
-						code = getEditor().getCode()
 						inferSchema()
 					}}
 				>
@@ -144,15 +144,10 @@
 							runTest()
 						}}
 						formatAction={async () => {
-							code = getEditor().getCode()
 							await inferSchema()
 							localStorage.setItem(path ?? 'last_save', code)
 							lastSave = code
 						}}
-						on:blur={() => {
-							code = getEditor().getCode()
-							inferSchema()
-						}}
 						class="flex flex-1 h-full"
 						lang={scriptLangToEditorLang(lang)}
 						automaticLayout={true}