fix: support Svelte 3/4 in playground (sveltejs#499)

closes sveltejs#433

Author: dummdidumm

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) {

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'
 	};
 }

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
 	});