get non-webcontainer version working, and embeddable on cross-origin-isolated site (sveltejs#84)

Author: Rich-Harris

src/routes/backend/_apps.js

@@ -31,6 +31,17 @@ const sveltekit = path.resolve(sveltekit_pkg_file, '..', sveltekit_pkg.bin['svel
 const apps = new Map();
 globalThis.__apps = apps;
 
+const hooks_src = `/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+	const response = await resolve(event);
+
+	response.headers.set('cross-origin-opener-policy', 'same-origin');
+	response.headers.set('cross-origin-embedder-policy', 'require-corp');
+	response.headers.set('cross-origin-resource-policy', 'cross-origin');
+
+	return response;
+}`;
+
 /**
  * @param {{
  *   files: import('$lib/types').FileStub[]
@@ -40,6 +51,14 @@ export async function create({ files }) {
 	const id = String(Date.now());
 	const filenames = write_files(id, files);
 
+	// TODO this enables embedding on cross-origin sites, which is
+	// necessary for the JSNation talk, but will currently break if an app
+	// already has a src/hooks.js file (though it could be worked
+	// around easily enough if necessary)
+	if (!files.find((stub) => stub.name === '/src/hooks.js')) {
+		fs.writeFileSync(`.apps/${id}/src/hooks.js`, hooks_src);
+	}
+
 	const port = await ports.find(3001);
 
 	apps.set(id, {

src/routes/tutorial/[slug]/_/Loading.svelte

@@ -5,7 +5,7 @@
 
 <div class="loading">
 	{#if initial}
-		<p>Initializing WebContainer. This may take a few seconds</p>
+		<p>initializing... this may take a few seconds</p>
 	{/if}
 
 	<svg width="107" height="128" viewBox="0 0 107 128">

src/routes/tutorial/[slug]/index.svelte

@@ -138,7 +138,10 @@
 		if (adapter) {
 			await adapter.reset(Object.values(b));
 		} else {
-			const module = await import('$lib/client/adapters/webcontainer/index.js');
+			const module = import.meta.env.VITE_USE_FILESYSTEM
+				? await import('$lib/client/adapters/filesystem/index.js')
+				: await import('$lib/client/adapters/webcontainer/index.js');
+
 			adapter = await module.create(Object.values(b));
 		}