feat: use rollup web worker for Svelte tutorial (#207)

* feat: use rollup web worker for Svelte tutorial

* drive by warnings fix for webcontainer

* stores -> runes for adapter state in order to better combine them; most usage locations untouched deliberately (they can be adjusted later on)

* js -> ts

* make sure loading screen shows up at the right times

* integrate REPL console into Svelte tutorial

* tidy up

* implement refresh for rollup build

* warning fixes

* adjust tutorial assets + remove global styles as they pollute other chapters

* apply tutorial styles to Svelte tutorials

* tweak headers

* like this?

* relaxed

* server tutorial assets through our own proxy due to header conflicts

* enable cross origin headers for all resources

* use crossorigin attribute instead of proxy

* document this shit

* prettier

* don't set headers here, happens on Vercel edge + dev middleware

* fix

* add attributes to get third party links working again

* fix

* make it possible use relative svg files by adjusting bundler to use base64 version of them

* support mp3 imports

* use same approach for images aswell

* remove unused files

* more detail about cross-origin isolation etc

* bring asset handling section up to date

* add some equivalent tooltip styles to the original

* automate cross-origin isolation

* oops

* fix

* remove old styles on unmount; bring back global styles

* revert margin change, no longer relevant

* the lettering is something called Silian Rail

---------

Co-authored-by: Rich Harris <[email protected]>

Author: dummdidumm

apps/svelte.dev/README.md

@@ -1,38 +1,25 @@
-# create-svelte
+# svelte.dev
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+This is the app behind [svelte.dev](https://svelte.dev), the official Svelte site.
 
-## Creating a project
+## Development
 
-If you're seeing this, you've probably already done this step. Congrats!
+### Tutorial
 
-```bash
-# create a new project in the current directory
-npx sv create
+The tutorial consists of two technically different parts: The Svelte tutorial and the SvelteKit tutorial. The SvelteKit tutorial uses [WebContainers](https://webcontainers.io/) under the hood in order to boot up a Node runtime in the browser. The Svelte tutorial uses Rollup in a web worker - it does not use WebContainers because a simple web worker is both faster and more reliable (there are known issues with iOS mobile).
 
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
+WebContainers require [cross-origin isolation](https://webcontainers.io/guides/quickstart#cross-origin-isolation), which means the document needs to have these headers:
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+```
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Opener-Policy: same-origin
 ```
 
-## Building
-
-To create a production version of your app:
+Because we're doing soft navigation between pages, these headers need to be set for all responses, not just the ones from `/tutorial`.
 
-```bash
-npm run build
-```
+The result of setting these headers is that the site can no longer embed URLs from other sites (like images from another domain) without those domains either having a `cross-origin-resource-policy: cross-origin` header (which most don't) or us adding the `crossorigin="anonymous"` attribute to the elements that load those URLs.
 
-You can preview the production build with `npm run preview`.
+When writing content for the tutorial, you need to be aware of the differences of loading content:
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+- When using root-relative paths, for a SvelteKit exercise the 'root' is the `static` directory inside the exercise itself, but for a Svelte exercise it is the root of the app so assets should do inside `apps/svelte.dev/static/tutorial`.
+- When importing relative assets in a Svelte exercise, Rollup inlines them into the bundle as base64

apps/svelte.dev/content/blog/2019-01-31-svelte-on-the-changelog.md

@@ -18,4 +18,4 @@ Unless you hang out in our [Discord server](https://svelte.dev/chat) or follow [
 
 On the podcast [Adam](https://twitter.com/adamstac), [Jerod](https://twitter.com/jerodsanto) and I talk about some of the changes and why we're making them. You can listen here or on the [podcast page](https://changelog.com/podcast/332).
 
-<audio data-theme="night" style="width: 100%" data-src="https://changelog.com/podcast/332/embed" src="https://cdn.changelog.com/uploads/podcast/332/the-changelog-332.mp3" preload="none" class="changelog-episode" controls></audio><p><a href="https://changelog.com/podcast/332">The Changelog 332: A UI framework without the framework</a> – Listen on <a href="https://changelog.com/">Changelog.com</a></p><script async src="//cdn.changelog.com/embed.js"></script>
+<audio crossorigin="anonymous" data-theme="night" style="width: 100%" data-src="https://changelog.com/podcast/332/embed" src="https://cdn.changelog.com/uploads/podcast/332/the-changelog-332.mp3" preload="none" class="changelog-episode" controls></audio><p><a href="https://changelog.com/podcast/332">The Changelog 332: A UI framework without the framework</a> – Listen on <a href="https://changelog.com/">Changelog.com</a></p><script async src="//cdn.changelog.com/embed.js"></script>

apps/svelte.dev/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md

@@ -24,7 +24,7 @@ To make that possible we first needed to rethink the concept at the heart of mod
 <div class="max">
 <figure style="max-width: 960px; margin: 0 auto">
 <div style="height: 0; padding: 0 0 57.1% 0; position: relative; margin: 0 auto;">
-	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/AdNJ3fydeao" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+	<iframe credentialless style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/AdNJ3fydeao" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <figcaption>'Rethinking Reactivity' from <a href="https://www.israel.yglfconf.com/">You Gotta Love Frontend Code Camp</a></figcaption>

apps/svelte.dev/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md

@@ -16,7 +16,7 @@ This was slightly tongue-in-cheek — as the talk explains, it's really more of
 <div class="max">
 <figure style="max-width: 960px; margin: 0 auto">
 <div style="height: 0; padding: 0 0 57.1% 0; position: relative; margin: 0 auto;">
-	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/qSfdtmcZ4d0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+	<iframe credentialless style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/qSfdtmcZ4d0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <figcaption>'Futuristic Web Development' from <a href="https://sveltesummit.com/">Svelte Summit</a></figcaption>

apps/svelte.dev/content/blog/2022-12-14-announcing-sveltekit-1.0.md

@@ -14,7 +14,7 @@ To get started, run `npm create svelte@latest`, and visit the [docs](https://kit
 <div class="max">
 <figure style="max-width: 960px; margin: 0 auto">
 <div style="height: 0; padding: 0 0 57.1% 0; position: relative; margin: 0 auto;">
-	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/N4BRVkQVoMc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+	<iframe credentialless style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/N4BRVkQVoMc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <figcaption>Svelte Radio Live: the Christmas special</figcaption>

apps/svelte.dev/content/blog/2023-03-09-zero-config-type-safety.md

@@ -11,7 +11,7 @@ But what if we didn't even need the annotations? Since `load` and `data` are par
 
 As of today, yes: it can.
 
-<video src="https://sveltejs.github.io/assets/video/zero-config-types.mp4" controls muted playsinline></video>
+<video crossorigin="anonymous" src="https://sveltejs.github.io/assets/video/zero-config-types.mp4" controls muted playsinline></video>
 
 If you're using VSCode, just upgrade the Svelte extension to the latest version, and you'll never have to annotate your `load` functions or `data` props again. Extensions for other editors can also use this feature, as long as they support the Language Server Protocol and TypeScript plugins. It even works with the latest version of our CLI diagnostics tool `svelte-check`!
 

apps/svelte.dev/content/blog/2023-08-31-view-transitions.md

@@ -74,7 +74,7 @@ onNavigate((navigation) => {
 
 With that, every navigation that occurs will trigger a view transition. You can already see this in action – by default, the browser will crossfade between the old and new pages.
 
-<video src="https://sveltejs.github.io/assets/video/vt-demo-1.mp4" controls muted playsinline></video>
+<video crossorigin="anonymous" src="https://sveltejs.github.io/assets/video/vt-demo-1.mp4" controls muted playsinline></video>
 
 <details>
 <summary>How the code works</summary>
@@ -161,7 +161,7 @@ header {
 
 Now, the header will not transition in and out on navigation, but the rest of the page will.
 
-<video src="https://sveltejs.github.io/assets/video/vt-demo-2.mp4" controls muted playsinline></video>
+<video crossorigin="anonymous" src="https://sveltejs.github.io/assets/video/vt-demo-2.mp4" controls muted playsinline></video>
 
 <details>
 <summary>Fixing the types</summary>
@@ -213,7 +213,7 @@ li[aria-current='page']::before {
 
 By adding that single line, the indicator will now smoothly slide to its new position instead of jumping.
 
-<video src="https://sveltejs.github.io/assets/video/vt-demo-3.mp4" controls muted playsinline></video>
+<video crossorigin="anonymous" src="https://sveltejs.github.io/assets/video/vt-demo-3.mp4" controls muted playsinline></video>
 
 (It might be easy to miss the difference – look at the small moving triangle indicator at the top of the screen!)
 

apps/svelte.dev/content/tutorial/+assets/src/app.html

@@ -7,258 +7,8 @@
 		<meta name="color-scheme" content="dark light" />
 		%sveltekit.head%
 
-		<style>
-			html {
-				--bg-1: hsl(0, 0%, 100%);
-				--bg-2: hsl(206, 20%, 90%);
-				--bg-3: hsl(206, 20%, 80%);
-				--fg-1: hsl(0, 0%, 13%);
-				--fg-2: hsl(0, 0%, 20%);
-				--fg-2: hsl(0, 0%, 30%);
-				--link: hsl(208, 77%, 47%);
-				--link-hover: hsl(208, 77%, 55%);
-				--link-active: hsl(208, 77%, 40%);
-
-				&.dark {
-					--bg-1: hsl(0, 0%, 18%);
-					--bg-2: hsl(0, 0%, 30%);
-					--bg-3: hsl(0, 0%, 40%);
-					--fg-1: hsl(0, 0%, 90%);
-					--fg-2: hsl(0, 0%, 70%);
-					--fg-3: hsl(0, 0%, 60%);
-					--link: hsl(206, 96%, 72%);
-					--link-hover: hsl(206, 96%, 78%);
-					--link-active: hsl(206, 96%, 64%);
-				}
-			}
-
-			body {
-				--border-radius: 4px;
-				--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-					'Open Sans', 'Helvetica Neue', sans-serif;
-				--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
-					'DejaVu Sans Mono', monospace;
-				background: var(--bg-1);
-				color: var(--fg-1);
-				font-family: var(--font);
-				line-height: 1.5;
-				margin: 1rem;
-				height: calc(100vh - 2rem);
-			}
-
-			h1,
-			h2,
-			h3,
-			h4,
-			h5,
-			h6 {
-				font-weight: normal;
-				font-variant-numeric: tabular-nums;
-				line-height: 1.1;
-			}
-
-			:is(h1, h2, h3, h4, h5, h6, p) {
-				margin: 1rem 0.1rem;
-			}
-
-			label {
-				margin: 0.5rem 0.1rem;
-			}
-
-			:is(h1, h2, h3, h4, h5, h6, p, label):first-child {
-				margin-top: 0;
-			}
-
-			:is(h1, h2, h3, h4, h5, h6, p, label):last-child {
-				margin-bottom: 0;
-			}
-
-			a {
-				color: var(--link);
-			}
-
-			a:hover {
-				color: var(--link-hover);
-			}
-
-			a:active {
-				color: var(--link-active);
-			}
-
-			label {
-				display: flex;
-				gap: 0.5rem;
-				align-items: center;
-			}
-
-			label input {
-				margin: 0;
-			}
-
-			button,
-			input,
-			select {
-				font-family: inherit;
-				font-size: inherit;
-			}
-
-			button {
-				background: var(--link);
-				color: var(--bg-1);
-				padding: 0.5rem 1rem;
-				border: none;
-				border-radius: var(--border-radius);
-			}
-
-			button:hover {
-				background: var(--link-hover);
-			}
-
-			button:active {
-				background: var(--link-active);
-			}
-
-			:is(button, button:hover, button:active):disabled {
-				background: var(--link);
-				filter: grayscale(1);
-				opacity: 0.4;
-			}
-
-			input,
-			textarea,
-			select {
-				padding: 0.5rem;
-				border: 1px solid var(--bg-2);
-				border-radius: var(--border-radius);
-				box-sizing: border-box;
-			}
-
-			input,
-			textarea {
-				background: var(--bg-1);
-				color: inherit;
-			}
-
-			select:not([multiple]) {
-				background: var(--bg-2);
-			}
-
-			textarea {
-				font-family: var(--font-mono);
-				font-size: 0.9rem;
-			}
-
-			form {
-				display: flex;
-				flex-direction: column;
-				gap: 1rem;
-				align-items: baseline;
-			}
-
-			ul:has(li):has(form) {
-				list-style: none;
-				padding: 0;
-			}
-
-			li form {
-				flex-direction: row;
-				gap: 0.5rem;
-				margin: 0.5rem 0;
-			}
-
-			nav {
-				position: relative;
-				display: flex;
-				gap: 1em;
-				padding: 1em;
-				background: var(--bg-2);
-				z-index: 2;
-				margin: 0 0 1em 0;
-				border-radius: var(--border-radius);
-			}
-
-			nav a {
-				text-decoration: none;
-			}
-
-			nav a[aria-current='true'] {
-				border-bottom: 2px solid;
-			}
-
-			ul:has(form) {
-				list-style: none;
-				padding: 0;
-			}
-
-			progress {
-				margin: 0.5rem 0;
-			}
-
-			progress:first-child {
-				margin-top: 0;
-			}
-
-			progress:lsat-child {
-				margin-bottom: 0;
-			}
-
-			.error {
-				color: red;
-			}
-
-			code {
-				background: var(--bg-2);
-				font-family: var(--font-mono);
-				font-size: 0.9em;
-				padding: 0.15rem 0.3rem;
-				border-radius: var(--border-radius);
-			}
-
-			ul.todos {
-				padding: 0;
-			}
-
-			ul.todos li:not(:has(> form)),
-			ul.todos li form {
-				position: relative;
-				display: flex;
-				align-items: center;
-				padding: 0.5em 0.5em 0.5em 1em;
-				margin: 0 0 0.5em 0;
-				gap: 0.5em;
-				border-radius: 5px;
-				user-select: none;
-				background: var(--bg-1);
-				filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.1));
-				transition:
-					filter 0.2s,
-					opacity 0.2s;
-			}
-
-			ul.todos .done {
-				filter: none;
-				opacity: 0.4;
-			}
-
-			ul.todos button {
-				border: none;
-				background-color: transparent;
-				background-repeat: no-repeat;
-				background-position: 50% 50%;
-				background-size: 1rem 1rem;
-				cursor: pointer;
-				width: 3em;
-				height: 3em;
-				margin: -0.5em -0.5em -0.5em 0;
-				aspect-ratio: 1;
-				opacity: 0.5;
-				transition: opacity 0.2s;
-			}
-
-			ul.todos button:hover {
-				opacity: 1;
-			}
-		</style>
+		<!-- duplication with svelte.dev/static/shared.css needed, else styles aren't applied during local dev -->
+		<link rel="stylesheet" href="/shared.css" />
 	</head>
 	<body>
 		<div style="display: contents">%sveltekit.body%</div>