From e12308d45dbacb4d74f139bf8f725d00c361deab Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Tue, 22 Oct 2024 12:13:27 +0200
Subject: [PATCH] fix: support Svelte 3/4 in playground

closes #433
---
 .../tutorial/adapters/rollup/index.svelte.ts  |  2 +-
 .../(authed)/playground/[id]/+page.server.ts  |  2 +-
 .../repl/src/lib/workers/bundler/index.ts     | 34 ++++++++++++++++---
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
index 6d77228c0f..f9b868b3ff 100644
--- a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
+++ b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
@@ -24,7 +24,7 @@ export async function create(): Promise<Adapter> {
 
 	bundler = new Bundler({
 		packages_url: 'https://unpkg.com',
-		svelte_url: `https://unpkg.com/svelte@next`, // TODO remove @next once 5.0 is released
+		svelte_url: `https://unpkg.com/svelte`,
 		// svelte_url: `${browser ? location.origin : ''}/svelte`, // TODO think about bringing back main-build for Playground?
 		onstatus(val) {
 			if (!done && val === null) {
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.server.ts b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.server.ts
index 0373bbc781..6bb2dfbdce 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.server.ts
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.server.ts
@@ -22,6 +22,6 @@ export async function load({ fetch, params, url }) {
 					slug: example.slug
 				}))
 			})),
-		version: url.searchParams.get('version') || 'next' // TODO replace with 'latest' when 5.0 is released
+		version: url.searchParams.get('version') || 'latest'
 	};
 }
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index ba329e4cf0..54d244b9ab 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -19,6 +19,7 @@ import type { File } from 'editor';
 
 let packages_url: string;
 let svelte_url: string;
+let version: string;
 let current_id: number;
 
 let fulfil_ready: (arg?: never) => void;
@@ -31,11 +32,18 @@ self.addEventListener('message', async (event: MessageEvent<BundleMessageData>)
 		case 'init': {
 			({ packages_url, svelte_url } = event.data);
 
-			const { version } = await fetch(`${svelte_url}/package.json`).then((r) => r.json());
+			({ version } = await fetch(`${svelte_url}/package.json`).then((r) => r.json()));
 			console.log(`Using Svelte compiler version ${version}`);
 
-			const compiler = await fetch(`${svelte_url}/compiler/index.js`).then((r) => r.text());
-			(0, eval)(compiler + '\n//# sourceURL=compiler/index.js@' + version);
+			if (version.startsWith('4.')) {
+				// unpkg doesn't set the correct MIME type for .cjs files
+				// https://github.com/mjackson/unpkg/issues/355
+				const compiler = await fetch(`${svelte_url}/compiler.cjs`).then((r) => r.text());
+				(0, eval)(compiler + '\n//# sourceURL=compiler.cjs@' + version);
+			} else {
+				const compiler = await fetch(`${svelte_url}/compiler/index.js`).then((r) => r.text());
+				(0, eval)(compiler + '\n//# sourceURL=compiler/index.js@' + version);
+			}
 
 			fulfil_ready();
 			break;
@@ -359,7 +367,7 @@ async function get_bundle(
 					dev: true
 				});
 
-				if (result.css) {
+				if (result.css?.code) {
 					// resolve local files by inlining them
 					result.css.code = result.css.code.replace(
 						/url\(['"]?(\..+?\.(svg|webp|png))['"]?\)/g,
@@ -481,7 +489,9 @@ async function bundle({
 		type: 'file',
 		name: '__entry.js',
 		basename: '__entry.js',
-		contents: `
+		contents:
+			version.split('.')[0] >= '5'
+				? `
 			import { unmount as u } from 'svelte';
 			import { styles } from './__shared.js';
 			export { mount, untrack } from 'svelte';
@@ -490,6 +500,20 @@ async function bundle({
 				u(component);
 				styles.forEach(style => style.remove());
 			}
+		`
+				: `
+			import { styles } from './__shared.js';
+			export {default as App} from './App.svelte';
+			export function mount(component, options) {
+				return new component(options);
+			}
+			export function unmount(component) {
+				component.$destroy();
+				styles.forEach(style => style.remove());
+			}
+			export function untrack(fn) {
+				return fn();
+			}
 		`,
 		text: true
 	});