WebContainer integration

[Rich-Harris]

Work-in-progress! Closes #2.

This creates a WebContainer, using @webcontainer/api, populates its filesystem, installs dependencies and calls npm run dev. For some reason the server-ready event isn't firing — need to investigate why.

Monaco workers are failing to load, probably because of the COOP/COEP headers. Remains to be seen if that will be fatal in production.

Am also seeing this — it's not possible to load <iframe src="https://github.com/loading.html"> apparently

[Rich-Harris]

The issue was that third party cookies were blocked. Will need to add some messaging directing people to allow cookies.

On main, the app fetches modules from the Vite dev server so that it can compare what you've written with what's expected (without doing a brittle byte-for-byte comparison). That fails on this branch, because of the cross-origin fetch. Not sure if there's a way to work around that (could we make the Vite dev server add the relevant headers, and if so would that work?) — need to investigate.

[Rich-Harris]

Some more breadcrumbs: the files fail to fetch initially, but are later fetched just fine via the webcontainer's service worker:

I wonder if this is just an order-of-operations thing — maybe the service worker isn't registered at the point we first try to fetch those files from the Vite dev server?

[Rich-Harris]

This is what happens when a module imports App.svelte (which has a URL like https://localhost3000-2yz4--3005.local-corp.webcontainer.io/src/lib/App.svelte):

This is what happens when we fetch the same file:

By the time this fails, the service worker is already registered. Not sure why the request is going to Cloudfront instead of being handled by the worker.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
learn-svelte-dev	✅ Ready (Inspect)	Visit Preview	Jun 10, 2022 at 8:43PM (UTC)

[Rich-Harris]

holy shit it works! https://learn-svelte-n9hbykwwx-svelte.vercel.app/tutorial/welcome-to-svelte

I'm going to merge this, then open issues for the remaining TODOs