[refactor] move monaco logic into editor component

Author: dummdidumm

src/lib/client/monaco/monaco.js

@@ -43,101 +43,4 @@ if (browser) {
 	monaco = await import('monaco-editor');
 }
 
-/**
- * file extension -> monaco language
- * @type {Record<string, string>}
- * */
-const types = {
-	js: 'javascript',
-	ts: 'typescript',
-	svelte: 'html' // TODO
-};
-
-/**
- * URL -> model
- * @type {Map<string, import('monaco-editor').editor.ITextModel>}
- * */
-const models = new Map();
-
-let notify_adapter = true;
-
-/**
- *
- * @param {import('$lib/types').Stub[]} stubs
- * @param {() => import('$lib/types').Adapter} adapter
- * @param {boolean} [notify]
- */
-function update_files(stubs, adapter, notify = true) {
-	notify_adapter = notify;
-	for (const stub of stubs) {
-		if (stub.type === 'directory') {
-			continue;
-		}
-
-		const model = models.get(stub.name);
-
-		if (model) {
-			const value = model.getValue();
-
-			if (stub.contents !== value) {
-				model.pushEditOperations(
-					[],
-					[
-						{
-							range: model.getFullModelRange(),
-							text: stub.contents
-						}
-					],
-					() => null
-				);
-			}
-		} else {
-			create_file(stub, adapter);
-		}
-	}
-
-	for (const [name, model] of models) {
-		if (!stubs.some((stub) => stub.name === name)) {
-			model.dispose();
-			models.delete(name);
-		}
-	}
-	notify = true;
-}
-
-/**
- * @param {import('$lib/types').FileStub} stub
- * @param {() => import('$lib/types').Adapter} adapter
- */
-function create_file(stub, adapter) {
-	// deep-copy stub so we can mutate it and not create a memory leak
-	stub = JSON.parse(JSON.stringify(stub));
-
-	const type = /** @type {string} */ (stub.basename.split('.').pop());
-
-	const model = monaco.editor.createModel(
-		stub.contents,
-		types[type] || type,
-		new monaco.Uri().with({ path: stub.name })
-	);
-
-	model.updateOptions({ tabSize: 2 });
-
-	model.onDidChangeContent(() => {
-		const contents = model.getValue();
-
-		if (notify_adapter) {
-			stub.contents = contents;
-			adapter()?.update([stub]);
-		}
-	});
-
-	models.set(stub.name, model);
-}
-
-/** @param {string} name */
-function get_model(name) {
-	return models.get(name);
-}
-
-export { monaco, get_model, create_file, update_files };
+export { monaco };

src/routes/tutorial/[slug]/+page.svelte

@@ -5,7 +5,7 @@
 	import SplitPane from '$lib/components/SplitPane.svelte';
 	import Editor from './Editor.svelte';
 	import Folder from './Folder.svelte';
-	import { browser, dev } from '$app/environment';
+	import { dev } from '$app/environment';
 	import ImageViewer from './ImageViewer.svelte';
 	import Sidebar from './Sidebar.svelte';
 	import Chrome from './Chrome.svelte';
@@ -25,14 +25,6 @@
 	/** @type {Map<string, string>} */
 	let expected;
 
-	/**
-	 * Only available in the browser
-	 * @type {Promise<typeof import('$lib/client/monaco/monaco.js')>}
-	 * */
-	const monaco_import = browser ? import('$lib/client/monaco/monaco.js') : new Promise(() => {});
-
-	/** @type {import('monaco-editor').editor.ITextModel} */
-	let current_model;
 	/** @type {import('$lib/types').Stub[]}*/
 	let current_stubs = [];
 
@@ -71,18 +63,11 @@
 	const { select } = setContext('filetree', {
 		select: async (file) => {
 			$selected = file;
-			const { get_model } = await monaco_import;
-			current_model = /** @type {import("monaco-editor").editor.ITextModel} */ (
-				get_model(file.name)
-			);
 		},
 
 		add: async (stubs) => {
 			current_stubs = [...current_stubs, ...stubs];
 
-			const { update_files } = await monaco_import;
-			update_files(current_stubs, () => adapter);
-
 			await load_files(current_stubs);
 
 			if (stubs[0].type === 'file') {
@@ -109,9 +94,6 @@
 				return new_stub;
 			});
 
-			const { update_files } = await monaco_import;
-			update_files(current_stubs, () => adapter);
-
 			await load_files(current_stubs);
 
 			if (to_rename.type === 'file') {
@@ -123,9 +105,6 @@
 			const out = current_stubs.filter((s) => s.name.startsWith(stub.name));
 			current_stubs = current_stubs.filter((s) => !out.includes(s));
 
-			const { update_files } = await monaco_import;
-			update_files(current_stubs, () => adapter);
-
 			if ($selected && out.includes($selected)) {
 				$selected = null;
 			}
@@ -154,9 +133,6 @@
 		complete_states = {};
 		current_stubs = Object.values(data.section.a);
 
-		const { update_files } = await monaco_import;
-		update_files(current_stubs, () => adapter);
-
 		select(
 			/** @type {import('$lib/types').FileStub} */ (
 				current_stubs.find((stub) => stub.name === data.section.focus)
@@ -410,8 +386,6 @@
 
 									completed = !completed;
 									current_stubs = Object.values(completed ? b : data.section.a);
-									const { update_files } = await monaco_import;
-									update_files(current_stubs, () => adapter, false);
 									adapter?.reset(current_stubs);
 
 									completing = false;
@@ -426,7 +400,7 @@
 						</section>
 
 						<section class="editor-container" slot="b">
-							<Editor model={current_model} />
+							<Editor stubs={current_stubs} selected={$selected} {adapter} />
 							<ImageViewer selected={$selected} />
 						</section>
 					</SplitPane>