Merge pull request sveltejs#54 from sveltejs/sveltejsgh-2

WebContainer integration

Author: Rich-Harris

.gitignore

@@ -6,4 +6,5 @@
 .env
 .env.*
 !.env.example
-.apps
+.apps
+.vercel

content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md

@@ -23,7 +23,7 @@ This tutorial is split into four main parts:
 - [Welcome to Svelte](/tutorial/welcome-to-svelte) (you are here)
 - [Introduction to SvelteKit](/tutorial/introducing-sveltekit)
 - [Advanced Svelte](/tutorial/tweens)
-- [Advanced SvelteKit](/tutorial/advanced-sveltekit)
+- [Advanced SvelteKit](/tutorial/sandbox)
 
 Each section will present an exercise designed to illustrate a feature. Later sections build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above.
 

content/tutorial/01-svelte/05-events/05-event-forwarding/README.md

@@ -4,7 +4,7 @@ title: Event forwarding
 
 Unlike DOM events, component events don't _bubble_. If you want to listen to an event on some deeply nested component, the intermediate components must _forward_ the event.
 
-In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](tutorial/component-events), but there's now an `Outer.svelte` component that contains `<Inner/>`.
+In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](/tutorial/component-events), but there's now an `Outer.svelte` component that contains `<Inner/>`.
 
 One way we could solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it:
 

content/tutorial/01-svelte/06-bindings/07-multiple-select-bindings/README.md

@@ -4,7 +4,7 @@ title: Select multiple
 
 A select can have a `multiple` attribute, in which case it will populate an array rather than selecting a single value.
 
-Returning to our [earlier ice cream example](tutorial/group-inputs), we can replace the checkboxes with a `<select multiple>`:
+Returning to our [earlier ice cream example](/tutorial/group-inputs), we can replace the checkboxes with a `<select multiple>`:
 
 ```svelte
 <h2>Flavours</h2>

content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md

@@ -4,7 +4,7 @@ title: onMount
 
 Every component has a _lifecycle_ that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.
 
-The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. We briefly encountered it [earlier](tutorial/bind-this) when we needed to interact with a `<canvas>` element after it had been rendered.
+The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. We briefly encountered it [earlier](/tutorial/bind-this) when we needed to interact with a `<canvas>` element after it had been rendered.
 
 We'll add an `onMount` handler that loads some data over the network:
 

content/tutorial/01-svelte/08-stores/02-auto-subscriptions/README.md

@@ -14,7 +14,7 @@ const unsubscribe = count.subscribe((value) => {
 
 > Calling a `subscribe` method returns an `unsubscribe` function.
 
-You now declared `unsubscribe`, but it still needs to be called, for example through the `onDestroy` [lifecycle hook](tutorial/ondestroy):
+You now declared `unsubscribe`, but it still needs to be called, for example through the `onDestroy` [lifecycle hook](/tutorial/ondestroy):
 
 ```svelte
 <script>

content/tutorial/03-advanced-svelte/02-transitions/04-custom-css-transitions/README.md

@@ -20,7 +20,7 @@ The function takes two arguments — the node to which the transition is applied
 
 - `delay` — milliseconds before the transition begins
 - `duration` — length of the transition in milliseconds
-- `easing` — a `p => t` easing function (see the chapter on [tweening](tutorial/tweened))
+- `easing` — a `p => t` easing function (see the chapter on [tweening](/tutorial/tweens))
 - `css` — a `(t, u) => css` function, where `u === 1 - t`
 - `tick` — a `(t, u) => {...}` function that has some effect on the node
 

content/tutorial/03-advanced-svelte/03-animations/01-animate/README.md

@@ -2,7 +2,7 @@
 title: The animate directive
 ---
 
-In the [previous chapter](tutorial/deferred-transitions), we used deferred transitions to create the illusion of motion as elements move from one todo list to the other.
+In the [previous chapter](/tutorial/deferred-transitions), we used deferred transitions to create the illusion of motion as elements move from one todo list to the other.
 
 To complete the illusion, we also need to apply motion to the elements that _aren't_ transitioning. For this, we use the `animate` directive.
 

content/tutorial/03-advanced-svelte/05-bindings/05-bind-this/README.md

@@ -12,4 +12,4 @@ The readonly `this` binding applies to every element (and component) and allows
 ></canvas>
 ```
 
-Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](tutorial/onmount).
+Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](/tutorial/onmount).

content/tutorial/03-advanced-svelte/07-composition/03-named-slots/app-a/src/lib/ContactCard.svelte

@@ -43,10 +43,10 @@
 	}
 
 	.address {
-		background-image: url(tutorial/icons/map-marker.svg);
+		background-image: url(/tutorial/icons/map-marker.svg);
 	}
 	.email {
-		background-image: url(tutorial/icons/email.svg);
+		background-image: url(/tutorial/icons/email.svg);
 	}
 	.missing {
 		color: #999;

content/tutorial/03-advanced-svelte/07-composition/03-named-slots/app-b/src/lib/ContactCard.svelte

@@ -43,10 +43,10 @@
 	}
 
 	.address {
-		background-image: url(tutorial/icons/map-marker.svg);
+		background-image: url(/tutorial/icons/map-marker.svg);
 	}
 	.email {
-		background-image: url(tutorial/icons/email.svg);
+		background-image: url(/tutorial/icons/email.svg);
 	}
 	.missing {
 		color: #999;

content/tutorial/03-advanced-svelte/08-context/01-context-api/README.md

@@ -19,7 +19,7 @@ setContext(key, {
 });
 ```
 
-The context object can be anything you like. Like [lifecycle functions](tutorial/onmount), `setContext` and `getContext` must be called during component initialisation. Calling it afterwards - for example inside `onMount` - will throw an error. In this example, since `map` isn't created until the component has mounted, our context object contains a `getMap` function rather than `map` itself.
+The context object can be anything you like. Like [lifecycle functions](/tutorial/onmount), `setContext` and `getContext` must be called during component initialisation. Calling it afterwards - for example inside `onMount` - will throw an error. In this example, since `map` isn't created until the component has mounted, our context object contains a `getMap` function rather than `map` itself.
 
 On the other side of the equation, in `MapMarker.svelte`, we can now get a reference to the Mapbox instance:
 

content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/app-a/src/lib/File.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <span
-	style="background-image: url(http://github.com/tutorial/icons/%3C/span%3E%7B%3Cspan%20class=%22pl-smi%22%3Etype%3C/span%3E%7D%3Cspan%20class=%22pl-s%22%3E.svg)"
+	style="background-image: url(http://github.com/%3Cspan%20class=%22x%20x-first%20x-last%22%3E/%3C/span%3Etutorial/icons/%3C/span%3E%7B%3Cspan%20class=%22pl-smi%22%3Etype%3C/span%3E%7D%3Cspan%20class=%22pl-s%22%3E.svg)"
 	>{name}</span
 >
 

content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/app-a/src/lib/Folder.svelte

@@ -31,15 +31,15 @@
 <style>
 	span {
 		padding: 0 0 0 1.5em;
-		background: url(tutorial/icons/folder.svg) 0
+		background: url(/tutorial/icons/folder.svg) 0
 			0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
 	}
 
 	.expanded {
-		background-image: url(tutorial/icons/folder-open.svg);
+		background-image: url(/tutorial/icons/folder-open.svg);
 	}
 
 	ul {

content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/app-b/src/lib/File.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <span
-	style="background-image: url(http://github.com/tutorial/icons/%3C/span%3E%7B%3Cspan%20class=%22pl-smi%22%3Etype%3C/span%3E%7D%3Cspan%20class=%22pl-s%22%3E.svg)"
+	style="background-image: url(http://github.com/%3Cspan%20class=%22x%20x-first%20x-last%22%3E/%3C/span%3Etutorial/icons/%3C/span%3E%7B%3Cspan%20class=%22pl-smi%22%3Etype%3C/span%3E%7D%3Cspan%20class=%22pl-s%22%3E.svg)"
 	>{name}</span
 >
 

content/tutorial/03-advanced-svelte/09-special-elements/01-svelte-self/app-b/src/lib/Folder.svelte

@@ -31,15 +31,15 @@
 <style>
 	span {
 		padding: 0 0 0 1.5em;
-		background: url(tutorial/icons/folder.svg) 0
+		background: url(/tutorial/icons/folder.svg) 0
 			0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
 	}
 
 	.expanded {
-		background-image: url(tutorial/icons/folder-open.svg);
+		background-image: url(/tutorial/icons/folder-open.svg);
 	}
 
 	ul {

content/tutorial/03-advanced-svelte/09-special-elements/03-svelte-window/README.md

@@ -10,4 +10,4 @@ On line 11, add the `keydown` listener:
 <svelte:window on:keydown={handleKeydown}/>
 ```
 
-> As with DOM elements, you can add [event modifiers](tutorial/event-modifiers) like `preventDefault`.
+> As with DOM elements, you can add [event modifiers](/tutorial/event-modifiers) like `preventDefault`.

content/tutorial/03-advanced-svelte/12-next-steps/01-congratulations/README.md

@@ -8,4 +8,4 @@ To get set up in your local development environment, check out [the quickstart g
 
 If you're looking for a more expansive framework that includes routing, server-side rendering and everything else, take a look at [SvelteKit](https://kit.svelte.dev).
 
-Most importantly: since you're now a member of the Svelte community, you should [join our friendly Discord chatroom](chat). That's where you'll find fellow Svelte users, and it's where we plan the future of the framework.
+Most importantly: since you're now a member of the Svelte community, you should [join our friendly Discord chatroom](https://svelte.dev/chat). That's where you'll find fellow Svelte users, and it's where we plan the future of the framework.

content/tutorial/common/package.json

@@ -9,8 +9,8 @@
 		"prepare": "svelte-kit sync"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "workspace:*",
-		"@sveltejs/kit": "workspace:*",
+		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/kit": "next",
 		"svelte": "^3.44.0"
 	},
 	"type": "module"

middleware.js

@@ -0,0 +1,9 @@
+export default function middleware(_request, _event) {
+	const response = new Response();
+
+	response.headers.set('cross-origin-opener-policy', 'same-origin');
+	response.headers.set('cross-origin-embedder-policy', 'require-corp');
+	response.headers.set('x-middleware-next', '1');
+
+	return response;
+}

package.json

@@ -3,7 +3,7 @@
 	"version": "0.0.1",
 	"scripts": {
 		"dev": "svelte-kit dev",
-		"build": "svelte-kit build",
+		"build": "svelte-kit build && node scripts/create-middleware.js",
 		"package": "svelte-kit package",
 		"preview": "svelte-kit preview",
 		"prepare": "svelte-kit sync",
@@ -26,6 +26,8 @@
 	"type": "module",
 	"dependencies": {
 		"@fontsource/roboto-mono": "^4.5.7",
+		"@webcontainer/api": "^0.0.1",
+		"base64-js": "^1.5.1",
 		"marked": "^4.0.16",
 		"monaco-editor": "^0.33.0",
 		"port-authority": "^2.0.1",

pnpm-lock.yaml

@@ -0,0 +1,41 @@
+// this generates some middleware that will set COOP/COEP headers
+// so that webcontainers work. ideally there'd be a more idiomatic
+// way to do this, but it'll do in the meantime
+
+import fs from 'fs';
+
+if (!fs.existsSync('.vercel/output/config.json')) {
+	throw new Error('.vercel/output does not exist');
+}
+
+const fn = `
+export default function middleware(_request, _event) {
+	const response = new Response();
+
+	response.headers.set('cross-origin-opener-policy', 'same-origin');
+	response.headers.set('cross-origin-embedder-policy', 'require-corp');
+	response.headers.set('x-middleware-next', '1');
+
+	return response;
+}
+`;
+
+const config = JSON.parse(fs.readFileSync('.vercel/output/config.json', 'utf-8'));
+config.routes.unshift({
+	src: '/(.*)',
+	middlewarePath: '_middleware',
+	continue: true
+});
+fs.writeFileSync('.vercel/output/config.json', JSON.stringify(config));
+
+fs.mkdirSync('.vercel/output/functions/_middleware.func');
+
+fs.writeFileSync(
+	'.vercel/output/functions/_middleware.func/.vc-config.json',
+	JSON.stringify({
+		runtime: 'edge',
+		entrypoint: 'index.js'
+	})
+);
+
+fs.writeFileSync('.vercel/output/functions/_middleware.func/index.js', fn);

scripts/create-middleware.js

@@ -0,0 +1,51 @@
+const loading = `
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128">
+<title>svelte-logo</title>
+<path
+	d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157"
+	style="fill: #ff3e00"
+/>
+<path
+	d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287"
+	style="fill: #fff"
+/>
+</svg>
+
+<style>
+body {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #f9f9f9;
+	user-select: none;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+}
+
+svg {
+	width: 100px;
+	height: 100px;
+	filter: grayscale(1) opacity(0.1);
+}
+</style>
+`;
+
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+	if (event.url.pathname === '/loading.html') {
+		return new Response(loading, {
+			headers: {
+				'Content-Type': 'text/html',
+				'Cross-Origin-Embedder-Policy': 'require-corp'
+			}
+		});
+	}
+
+	const response = await resolve(event);
+
+	response.headers.set('cross-origin-opener-policy', 'same-origin');
+	response.headers.set('cross-origin-embedder-policy', 'require-corp');
+
+	return response;
+}

src/hooks.js

@@ -38,7 +38,7 @@ export async function create(stubs) {
 			await new Promise((f) => setTimeout(f, 100)); // wait for chokidar
 		},
 
-		/** @param {import('$lib/types').Stub[]} stubs */
+		/** @param {import('$lib/types').FileStub[]} stubs */
 		async update(stubs) {
 			await fetch(`/backend/${id}`, {
 				method: 'put',