feat: allow version to be a pkg.pr.new url

Co-authored-by: Oscar Dominguez <[email protected]>

Author: paoloricciuti

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

@@ -11,6 +11,15 @@ export async function load({ fetch, params, url }) {
 
 	const [gist, examples] = await Promise.all([res.json(), examples_res as Promise<Examples>]);
 
+	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 {}
+
 	return {
 		gist,
 		examples: examples
@@ -22,6 +31,7 @@ export async function load({ fetch, params, url }) {
 					slug: example.slug
 				}))
 			})),
-		version: url.searchParams.get('version') || 'latest'
+		version: url.searchParams.get('version') || 'latest',
+		is_pkg_pr_new
 	};
 }

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') {
+		if (version !== 'local' && !data.is_pkg_pr_new) {
 			fetch(`https://unpkg.com/svelte@${version}/package.json`)
 				.then((r) => r.json())
 				.then((pkg) => {
@@ -151,7 +151,9 @@
 	const svelteUrl =
 		browser && version === 'local'
 			? `${location.origin}/playground/local`
-			: `https://unpkg.com/svelte@${version}`;
+			: data.is_pkg_pr_new
+				? version
+				: `https://unpkg.com/svelte@${version}`;
 
 	const relaxed = $derived(data.gist.relaxed || (data.user && data.user.id === data.gist.owner));
 </script>
@@ -203,6 +205,7 @@
 				{can_escape}
 				injectedJS={mapbox_setup}
 				{onchange}
+				isPkgPrNew={data.is_pkg_pr_new}
 				previewTheme={$theme.current}
 			/>
 		</div>

packages/editor/package.json

@@ -63,6 +63,7 @@
 	"type": "module",
 	"dependencies": {
 		"@lezer/highlight": "^1.2.1",
-		"esm-env": "^1.0.0"
+		"esm-env": "^1.0.0",
+		"tarparser": "^0.0.2"
 	}
 }

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

@@ -96,6 +96,7 @@ 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;
@@ -156,19 +157,22 @@ 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);
@@ -497,9 +501,11 @@ export class Workspace {
 
 			seen.push(file.name);
 
-			compile_file(file, this.#svelte_version, this.compiler_options).then((compiled) => {
-				this.compiled[file.name] = compiled;
-			});
+			compile_file(file, this.#svelte_version, this.#is_pkg_pr_new, this.compiler_options).then(
+				(compiled) => {
+					this.compiled[file.name] = compiled;
+				}
+			);
 		}
 
 		for (const key of keys) {
@@ -529,9 +535,11 @@ export class Workspace {
 		this.modified[file.name] = true;
 
 		if (BROWSER && is_svelte_file(file)) {
-			compile_file(file, this.#svelte_version, this.compiler_options).then((compiled) => {
-				this.compiled[file.name] = compiled;
-			});
+			compile_file(file, this.#svelte_version, this.#is_pkg_pr_new, this.compiler_options).then(
+				(compiled) => {
+					this.compiled[file.name] = compiled;
+				}
+			);
 		}
 
 		this.#onupdate(file);

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

@@ -39,6 +39,7 @@ 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
@@ -53,7 +54,7 @@ export function compile_file(
 
 	const file_callbacks = callbacks.get(filename)!;
 
-	worker.postMessage({ id, file, version, options });
+	worker.postMessage({ id, file, version, options, is_pkg_pr_new });
 
 	return new Promise((fulfil) => {
 		file_callbacks.set(id, fulfil);

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

@@ -1,4 +1,5 @@
 import type { File } from '../Workspace.svelte';
+import { parseTar } from 'tarparser';
 
 // hack for magic-string and Svelte 4 compiler
 // do not put this into a separate module and import it, would be treeshaken in prod
@@ -16,18 +17,39 @@ addEventListener('message', async (event) => {
 	if (!inited) {
 		inited = true;
 		const svelte_url = `https://unpkg.com/svelte@${event.data.version}`;
-		const { version } = await fetch(`${svelte_url}/package.json`).then((r) => r.json());
-
+		let local_files;
+		let package_json;
+		if (event.data.is_pkg_pr_new) {
+			const maybe_tar = await fetch(event.data.version);
+			if (maybe_tar.headers.get('content-type') === 'application/tar+gzip') {
+				const buffer = await maybe_tar.arrayBuffer();
+				local_files = await parseTar(buffer);
+				const package_json_content = local_files.find(
+					(file) => file.name === 'package/package.json'
+				)?.text;
+				if (package_json_content) {
+					package_json = JSON.parse(package_json_content);
+				}
+			}
+		}
+		const { version } =
+			package_json ?? (await fetch(`${svelte_url}/package.json`).then((r) => r.json()));
 		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());
+			const compiler =
+				local_files?.find((file) => file.name === 'package/compiler.cjs')?.text ??
+				(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 = await fetch(`${svelte_url}/compiler.js`).then((r) => r.text());
+			const compiler =
+				local_files?.find((file) => file.name === 'package/compiler.js')?.text ??
+				(await fetch(`${svelte_url}/compiler.js`).then((r) => r.text()));
 			(0, eval)(compiler + '\n//# sourceURL=compiler.js@' + version);
 		} else {
-			const compiler = await fetch(`${svelte_url}/compiler/index.js`).then((r) => r.text());
+			const compiler =
+				local_files?.find((file) => file.name === 'package/compiler/index.js')?.text ??
+				(await fetch(`${svelte_url}/compiler/index.js`).then((r) => r.text()));
 			(0, eval)(compiler + '\n//# sourceURL=compiler/index.js@' + version);
 		}
 

packages/editor/src/tarparser.d.ts

@@ -0,0 +1,78 @@
+declare module 'tarparser' {
+	/**
+	 * @typedef FileDescription
+	 * @property {string} name - The name of the file.
+	 * @property {"file"|"directory"} type - The type of the file, either "file" or "directory".
+	 * @property {number} size - The size of the file in bytes.
+	 * @property {Uint8Array} data - The binary data of the file content.
+	 * @property {string} text - A getter to decode and return the file content as a UTF-8 string.
+	 * @property {FileAttrs} attrs - file attributes
+	 */
+	/**
+	 * @typedef FileAttrs
+	 * @property {string} mode - The file permissions in octal format.
+	 * @property {number} uid - User ID of the file owner.
+	 * @property {number} gid - Group ID of the file owner.
+	 * @property {number} mtime - Last modification time in Unix time format.
+	 * @property {string} user - The username of the file owner.
+	 * @property {string} group - The group name of the file owner.
+	 */
+	/**
+	 * Parses a tar file from binary data and returns an array of FileDescription objects.
+	 * @param {ArrayBuffer|Uint8Array} data - The binary data of the tar file.
+	 * @returns {Promise<FileDescription[]>} - An array of FileDescription objects representing the parsed files in the tar archive.
+	 */
+	export function parseTar(data: ArrayBuffer | Uint8Array): Promise<FileDescription[]>;
+	export type FileDescription = {
+		/**
+		 * - The name of the file.
+		 */
+		name: string;
+		/**
+		 * - The type of the file, either "file" or "directory".
+		 */
+		type: 'file' | 'directory';
+		/**
+		 * - The size of the file in bytes.
+		 */
+		size: number;
+		/**
+		 * - The binary data of the file content.
+		 */
+		data: Uint8Array;
+		/**
+		 * - A getter to decode and return the file content as a UTF-8 string.
+		 */
+		text: string;
+		/**
+		 * - file attributes
+		 */
+		attrs: FileAttrs;
+	};
+	export type FileAttrs = {
+		/**
+		 * - The file permissions in octal format.
+		 */
+		mode: string;
+		/**
+		 * - User ID of the file owner.
+		 */
+		uid: number;
+		/**
+		 * - Group ID of the file owner.
+		 */
+		gid: number;
+		/**
+		 * - Last modification time in Unix time format.
+		 */
+		mtime: number;
+		/**
+		 * - The username of the file owner.
+		 */
+		user: string;
+		/**
+		 * - The group name of the file owner.
+		 */
+		group: string;
+	};
+}

packages/repl/package.json

@@ -86,6 +86,7 @@
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",
 		"svelte": "5.0.1",
+		"tarparser": "^0.0.2",
 		"zimmerframe": "^1.1.2"
 	}
 }

packages/repl/src/lib/Bundler.ts

@@ -12,21 +12,25 @@ 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
+		onstatus,
+		is_pkg_pr_new
 	}: {
 		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 });
+			worker.postMessage({ type: 'init', packages_url, svelte_url, is_pkg_pr_new });
 			workers.set(this.hash, worker);
 		}
 
@@ -54,12 +58,12 @@ export default class Bundler {
 	bundle(files: File[], options: CompileOptions = {}): Promise<BundleResult> {
 		return new Promise<any>((fulfil) => {
 			this.handlers.set(uid, fulfil);
-
 			this.worker.postMessage({
 				uid,
 				type: 'bundle',
 				files,
-				options
+				options,
+				is_pkg_pr_new: this.#is_pkg_pr_new
 			});
 
 			uid += 1;

packages/repl/src/lib/Repl.svelte

@@ -22,6 +22,7 @@
 		injectedJS?: string;
 		injectedCSS?: string;
 		previewTheme?: 'light' | 'dark';
+		isPkgPrNew?: boolean;
 		onchange?: () => void;
 	}
 
@@ -37,7 +38,8 @@
 		injectedJS = '',
 		injectedCSS = '',
 		previewTheme = 'light',
-		onchange = () => {}
+		onchange = () => {},
+		isPkgPrNew
 	}: Props = $props();
 
 	// TODO pass in real data
@@ -51,7 +53,8 @@
 
 	const workspace = new Workspace([dummy], {
 		initial: 'App.svelte',
-		svelte_version: svelteUrl.split('@')[1],
+		svelte_version: isPkgPrNew ? svelteUrl : svelteUrl.split('@')[1],
+		is_pkg_pr_new: isPkgPrNew,
 		onupdate() {
 			rebundle();
 			onchange?.();
@@ -120,6 +123,7 @@
 		? 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