[feat] reload iframe in case of vite dev server restart

dummdidumm · dummdidumm · commit 726013ca9d48 · 2022-12-09T15:09:09.000+01:00
diff --git a/src/lib/client/adapters/filesystem/index.js b/src/lib/client/adapters/filesystem/index.js
@@ -51,10 +51,25 @@ export async function create(stubs) {
 			});
 
 			await new Promise((f) => setTimeout(f, 100)); // wait for chokidar
+
+			return will_restart_vite_dev_server(stubs);
 		},
 
 		async destroy() {
 			navigator.sendBeacon(`/backend/destroy?id=${id}`);
 		}
 	};
 }
+
+/**
+ * @param {import('$lib/types').Stub[]} stubs
+ */
+function will_restart_vite_dev_server(stubs) {
+	return stubs.some(
+		(stub) =>
+			stub.type === 'file' &&
+			(stub.name === '/vite.config.js' ||
+				stub.name === '/svelte.config.js' ||
+				stub.name === '/.env')
+	);
+}
diff --git a/src/lib/client/adapters/webcontainer/index.js b/src/lib/client/adapters/webcontainer/index.js
@@ -161,13 +161,7 @@ async function _create(stubs) {
 		// For some reason, server-ready is fired again when the vite dev server is restarted.
 		// We need to wait for it to finish before we can continue, else we might
 		// request files from Vite before it's ready, leading to a timeout.
-		const will_restart = new_stubs.some(
-			(stub) =>
-				stub.type === 'file' &&
-				(stub.name === '/vite.config.js' ||
-					stub.name === '/svelte.config.js' ||
-					stub.name === '/.env')
-		);
+		const will_restart = will_restart_vite_dev_server(new_stubs);
 		const promise = will_restart
 			? new Promise((fulfil, reject) => {
 					const error_unsub = vm.on('error', (error) => {
@@ -242,6 +236,8 @@ async function _create(stubs) {
 		stubs_to_map(stubs, current);
 
 		await new Promise((f) => setTimeout(f, 200)); // wait for chokidar
+
+		return will_restart_vite_dev_server(stubs);
 	}
 
 	async function destroy() {
@@ -258,6 +254,19 @@ async function _create(stubs) {
 	};
 }
 
+/**
+ * @param {import('$lib/types').Stub[]} stubs
+ */
+function will_restart_vite_dev_server(stubs) {
+	return stubs.some(
+		(stub) =>
+			stub.type === 'file' &&
+			(stub.name === '/vite.config.js' ||
+				stub.name === '/svelte.config.js' ||
+				stub.name === '/.env')
+	);
+}
+
 /**
  * @param {import('$lib/types').Stub[]} stubs
  * @returns {import('@webcontainer/api').FileSystemTree}
diff --git a/src/lib/types/index.d.ts b/src/lib/types/index.d.ts
@@ -22,7 +22,7 @@ export interface Adapter {
 	base: string;
 	/** Returns `false` if the reset was in such a way that a reload of the iframe isn't needed */
 	reset(files: Array<Stub>): Promise<boolean>;
-	update(file: Array<FileStub>): Promise<void>;
+	update(file: Array<FileStub>): Promise<boolean>;
 	destroy(): Promise<void>;
 }
 
diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
@@ -338,10 +338,25 @@
 		const stub = event.detail;
 		const index = current_stubs.findIndex((s) => s.name === stub.name);
 		current_stubs[index] = stub;
-		adapter?.update([stub]);
+		adapter?.update([stub]).then((reload) => {
+			if (reload) {
+				schedule_iframe_reload();
+			}
+		});
 		update_complete_states([stub]);
 	}
 
+	/** @type {any} */
+	let reload_timeout;
+	function schedule_iframe_reload() {
+		clearTimeout(reload_timeout);
+		reload_timeout = setTimeout(() => {
+			if (adapter) {
+				set_iframe_src(adapter.base);
+			}
+		}, 1000);
+	}
+
 	/**
 	 * @param {import('$lib/types').Stub[]} stubs
 	 */
@@ -356,7 +371,7 @@
 		}
 	}
 
-	/** @type {NodeJS.Timeout} */
+	/** @type {any} */
 	let timeout;
 
 	/** @param {MessageEvent} e */

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ export interface Adapter {`
`22`	`22`	`base: string;`
`23`	`23`	/** Returns `false` if the reset was in such a way that a reload of the iframe isn't needed */
`24`	`24`	`reset(files: Array<Stub>): Promise<boolean>;`
`25`		`- update(file: Array<FileStub>): Promise<void>;`
	`25`	`+ update(file: Array<FileStub>): Promise<boolean>;`
`26`	`26`	`destroy(): Promise<void>;`
`27`	`27`	`}`
`28`	`28`