fix: move from full url to ref:[pr|hash]

Author: paoloricciuti

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.server.ts

@@ -13,12 +13,7 @@ export async function load({ fetch, params, url }) {
 
 	let version = url.searchParams.get('version') || 'latest';
 
-	let is_pkg_pr_new = false;
-
-	try {
-		const url = new URL(version);
-		is_pkg_pr_new = url.origin === 'https://pkg.pr.new';
-	} catch {}
+	let is_ref_version = version.startsWith('ref:');
 
 	return {
 		gist,
@@ -32,6 +27,6 @@ export async function load({ fetch, params, url }) {
 				}))
 			})),
 		version: url.searchParams.get('version') || 'latest',
-		is_pkg_pr_new
+		is_ref_version
 	};
 }

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

@@ -26,7 +26,7 @@
 	const can_escape = browser && !$page.url.hash;
 
 	onMount(() => {
-		if (version !== 'local' && !data.is_pkg_pr_new) {
+		if (version !== 'local' && !data.is_ref_version) {
 			fetch(`https://unpkg.com/svelte@${version}/package.json`)
 				.then((r) => r.json())
 				.then((pkg) => {
@@ -151,7 +151,7 @@
 	const svelteUrl =
 		browser && version === 'local'
 			? `${location.origin}/playground/local`
-			: data.is_pkg_pr_new
+			: data.is_ref_version
 				? version
 				: `https://unpkg.com/svelte@${version}`;
 
@@ -205,7 +205,6 @@
 				{can_escape}
 				injectedJS={mapbox_setup}
 				{onchange}
-				isPkgPrNew={data.is_pkg_pr_new}
 				previewTheme={$theme.current}
 			/>
 		</div>

packages/editor/src/lib/Workspace.svelte.ts

@@ -96,7 +96,6 @@ export class Workspace {
 	compiled = $state<Record<string, Compiled>>({});
 
 	#svelte_version: string;
-	#is_pkg_pr_new: boolean;
 	#readonly = false; // TODO do we need workspaces for readonly stuff?
 	#files = $state.raw<Item[]>([]);
 	#current = $state.raw() as File;
@@ -157,22 +156,19 @@ export class Workspace {
 		files: Item[],
 		{
 			svelte_version = 'latest',
-			is_pkg_pr_new = false,
 			initial,
 			readonly = false,
 			onupdate,
 			onreset
 		}: {
 			svelte_version?: string;
-			is_pkg_pr_new?: boolean;
 			initial?: string;
 			readonly?: boolean;
 			onupdate?: (file: File) => void;
 			onreset?: (items: Item[]) => void;
 		} = {}
 	) {
 		this.#svelte_version = svelte_version;
-		this.#is_pkg_pr_new = is_pkg_pr_new;
 		this.#readonly = readonly;
 
 		this.set(files, initial);
@@ -501,11 +497,9 @@ export class Workspace {
 
 			seen.push(file.name);
 
-			compile_file(file, this.#svelte_version, this.#is_pkg_pr_new, this.compiler_options).then(
-				(compiled) => {
-					this.compiled[file.name] = compiled;
-				}
-			);
+			compile_file(file, this.#svelte_version, this.compiler_options).then((compiled) => {
+				this.compiled[file.name] = compiled;
+			});
 		}
 
 		for (const key of keys) {
@@ -535,11 +529,9 @@ export class Workspace {
 		this.modified[file.name] = true;
 
 		if (BROWSER && is_svelte_file(file)) {
-			compile_file(file, this.#svelte_version, this.#is_pkg_pr_new, this.compiler_options).then(
-				(compiled) => {
-					this.compiled[file.name] = compiled;
-				}
-			);
+			compile_file(file, this.#svelte_version, this.compiler_options).then((compiled) => {
+				this.compiled[file.name] = compiled;
+			});
 		}
 
 		this.#onupdate(file);

packages/editor/src/lib/compile-worker/index.ts

@@ -39,7 +39,6 @@ if (BROWSER) {
 export function compile_file(
 	file: File,
 	version: string,
-	is_pkg_pr_new: boolean,
 	options: { generate: 'client' | 'server'; dev: boolean }
 ): Promise<Compiled> {
 	// @ts-ignore
@@ -54,7 +53,7 @@ export function compile_file(
 
 	const file_callbacks = callbacks.get(filename)!;
 
-	worker.postMessage({ id, file, version, options, is_pkg_pr_new });
+	worker.postMessage({ id, file, version, options });
 
 	return new Promise((fulfil) => {
 		file_callbacks.set(id, fulfil);

packages/editor/src/lib/compile-worker/worker.ts

@@ -17,10 +17,12 @@ addEventListener('message', async (event) => {
 	if (!inited) {
 		inited = true;
 		const svelte_url = `https://unpkg.com/svelte@${event.data.version}`;
-		let local_files;
+		let local_files: Awaited<ReturnType<typeof parseTar>>;
 		let package_json;
-		if (event.data.is_pkg_pr_new) {
-			const maybe_tar = await fetch(event.data.version);
+		if (event.data.version.startsWith('ref:')) {
+			const ref = event.data.version.substring('ref:'.length);
+
+			const maybe_tar = await fetch(`https://pkg.pr.new/svelte@${ref}`);
 			if (maybe_tar.headers.get('content-type') === 'application/tar+gzip') {
 				const buffer = await maybe_tar.arrayBuffer();
 				local_files = await parseTar(buffer);

packages/repl/src/lib/Bundler.ts

@@ -12,25 +12,21 @@ export default class Bundler {
 	hash: string;
 	worker: Worker;
 	handlers: Map<number, (data: BundleMessageData) => void>;
-	#is_pkg_pr_new: boolean;
 
 	constructor({
 		packages_url,
 		svelte_url,
-		onstatus,
-		is_pkg_pr_new
+		onstatus
 	}: {
 		packages_url: string;
 		svelte_url: string;
 		onstatus: (val: string | null) => void;
-		is_pkg_pr_new?: boolean;
 	}) {
 		this.hash = `${packages_url}:${svelte_url}`;
-		this.#is_pkg_pr_new = is_pkg_pr_new;
 
 		if (!workers.has(this.hash)) {
 			const worker = new Worker();
-			worker.postMessage({ type: 'init', packages_url, svelte_url, is_pkg_pr_new });
+			worker.postMessage({ type: 'init', packages_url, svelte_url });
 			workers.set(this.hash, worker);
 		}
 
@@ -62,8 +58,7 @@ export default class Bundler {
 				uid,
 				type: 'bundle',
 				files,
-				options,
-				is_pkg_pr_new: this.#is_pkg_pr_new
+				options
 			});
 
 			uid += 1;

packages/repl/src/lib/Repl.svelte

@@ -22,7 +22,6 @@
 		injectedJS?: string;
 		injectedCSS?: string;
 		previewTheme?: 'light' | 'dark';
-		isPkgPrNew?: boolean;
 		onchange?: () => void;
 	}
 
@@ -38,8 +37,7 @@
 		injectedJS = '',
 		injectedCSS = '',
 		previewTheme = 'light',
-		onchange = () => {},
-		isPkgPrNew
+		onchange = () => {}
 	}: Props = $props();
 
 	// TODO pass in real data
@@ -53,8 +51,7 @@
 
 	const workspace = new Workspace([dummy], {
 		initial: 'App.svelte',
-		svelte_version: isPkgPrNew ? svelteUrl : svelteUrl.split('@')[1],
-		is_pkg_pr_new: isPkgPrNew,
+		svelte_version: svelteUrl.startsWith('ref:') ? svelteUrl : svelteUrl.split('@')[1],
 		onupdate() {
 			rebundle();
 			onchange?.();
@@ -123,7 +120,6 @@
 		? new Bundler({
 				packages_url: packagesUrl,
 				svelte_url: svelteUrl,
-				is_pkg_pr_new: isPkgPrNew,
 				onstatus: (message) => {
 					if (message) {
 						// show bundler status, but only after time has elapsed, to

packages/repl/src/lib/workers/bundler/index.ts

@@ -33,24 +33,26 @@ const ready = new Promise((f) => {
 });
 
 let files: Map<string, () => string>;
-let package_json;
+let package_json: any;
 
 self.addEventListener('message', async (event: MessageEvent<BundleMessageData>) => {
 	switch (event.data.type) {
 		case 'init': {
 			({ packages_url, svelte_url } = event.data);
 
-			if (event.data.is_pkg_pr_new) {
-				let local_files;
+			if (svelte_url.startsWith('ref:')) {
+				let local_files: Awaited<ReturnType<typeof parseTar>>;
 
-				const maybe_tar = await fetch(svelte_url);
+				const ref = svelte_url.substring('ref:'.length);
+
+				const maybe_tar = await fetch(`https://pkg.pr.new/svelte@${ref}`);
 				if (maybe_tar.headers.get('content-type') === 'application/tar+gzip') {
 					const buffer = await maybe_tar.arrayBuffer();
 					local_files = await parseTar(buffer);
 					files = new Map(
 						local_files.map((file) => [file.name.substring('package'.length), () => file.text])
 					);
-					const package_json_content = files.get('/package.json')();
+					const package_json_content = files.get('/package.json')?.();
 					if (package_json_content) {
 						package_json = JSON.parse(package_json_content);
 					}
@@ -64,17 +66,17 @@ self.addEventListener('message', async (event: MessageEvent<BundleMessageData>)
 				// unpkg doesn't set the correct MIME type for .cjs files
 				// https://github.com/mjackson/unpkg/issues/355
 				const compiler =
-					files.get('/compiler.cjs')() ??
+					files.get('/compiler.cjs')?.() ??
 					(await fetch(`${svelte_url}/compiler.cjs`).then((r) => r.text()));
 				(0, eval)(compiler + '\n//# sourceURL=compiler.cjs@' + version);
 			} else if (version.startsWith('3.')) {
 				const compiler =
-					files.get('/compiler.js')() ??
+					files.get('/compiler.js')?.() ??
 					(await fetch(`${svelte_url}/compiler.js`).then((r) => r.text()));
 				(0, eval)(compiler + '\n//# sourceURL=compiler.js@' + version);
 			} else {
 				const compiler =
-					files.get('/compiler/index.js')() ??
+					files.get('/compiler/index.js')?.() ??
 					(await fetch(`${svelte_url}/compiler/index.js`).then((r) => r.text()));
 				(0, eval)(compiler + '\n//# sourceURL=compiler/index.js@' + version);
 			}
@@ -354,7 +356,7 @@ async function get_bundle(
 					}
 				};
 
-				let pkg;
+				let pkg: any;
 				let pkg_url_base = 'file:';
 				if (importee.startsWith(`svelte`)) {
 					pkg = package_json;
@@ -381,7 +383,7 @@ async function get_bundle(
 				const resolved_url = new URL(resolved);
 
 				if (resolved_url.protocol === 'file:') {
-					return files.get(resolved_url.pathname)();
+					return files.get(resolved_url.pathname)?.();
 				}
 			} catch {}
 

packages/repl/src/lib/workers/workers.d.ts

@@ -54,7 +54,6 @@ export type BundleMessageData = {
 	message: string;
 	packages_url: string;
 	svelte_url: string;
-	is_pkg_pr_new: boolean;
 	files: File[];
 	options: CompileOptions;
 };