fix: make repl more robust (#1393)

- ensure tailwind tokens are preserved when rebundling with cache
- ensure cache is created the first time already and available for the second run
- more robust resolution
- pass better filename for compiler so __svelte_meta.loc.file is more useful (v0 needs this for analysis)

Author: dummdidumm

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

@@ -73,7 +73,7 @@
 				name = recovered.name;
 			}
 
-			repl.set({ files, tailwind: recovered.tailwind ?? false });
+			repl.set({ files, tailwind: recovered.tailwind ?? false, aliases: recovered.aliases });
 		} catch {
 			alert(`Couldn't load the code from the URL. Make sure you copied the link correctly.`);
 		}

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

@@ -100,6 +100,8 @@ const ABORT = { aborted: true };
 let previous: {
 	key: string;
 	cache: RollupCache | undefined;
+	/** Needed because if rollup cache hits then we won't be able to pick up all candidates in subsequent runs */
+	tailwind_candidates: Set<string>;
 };
 
 let tailwind: Awaited<ReturnType<typeof init_tailwind>>;
@@ -143,12 +145,14 @@ async function get_bundle(
 ) {
 	let bundle;
 
+	const key = JSON.stringify(options);
 	/** A set of package names (without subpaths) to include in pkg.devDependencies when downloading an app */
 	const imports: Set<string> = new Set();
 	const warnings: Warning[] = [];
 	const all_warnings: Array<{ message: string }> = [];
 
-	const tailwind_candidates: string[] = [];
+	const tailwind_candidates =
+		previous?.key === key ? previous.tailwind_candidates : new Set<string>();
 
 	function add_tailwind_candidates(ast: Node | undefined) {
 		if (!ast) return;
@@ -160,12 +164,16 @@ async function get_bundle(
 			},
 			Literal(node) {
 				if (typeof node.value === 'string' && node.value) {
-					tailwind_candidates.push(...node.value.split(' '));
+					for (const candidate of node.value.split(' ')) {
+						if (candidate) tailwind_candidates.add(candidate);
+					}
 				}
 			},
 			TemplateElement(node) {
 				if (node.value.raw) {
-					tailwind_candidates.push(...node.value.raw.split(' '));
+					for (const candidate of node.value.raw.split(' ')) {
+						if (candidate) tailwind_candidates.add(candidate);
+					}
 				}
 			}
 		});
@@ -283,20 +291,19 @@ async function get_bundle(
 		transform(code, id) {
 			if (uid !== current_id) throw ABORT;
 
-			const message = `bundling ${id.replace(VIRTUAL + '/', '').replace(NPM + '/', '')}`;
-			self.postMessage({ type: 'status', message });
+			const name = id.replace(VIRTUAL + '/', '').replace(NPM + '/', '');
 
-			if (!/\.(svelte|js|ts)$/.test(id)) return null;
+			self.postMessage({ type: 'status', message: `bundling ${name}` });
 
-			const name = id.split('/').pop()?.split('.')[0];
+			if (!/\.(svelte|js|ts)$/.test(id)) return null;
 
 			let result: CompileResult;
 
 			if (id.endsWith('.svelte')) {
 				const is_gt_5 = Number(svelte.VERSION.split('.')[0]) >= 5;
 
 				const compilerOptions: any = {
-					filename: name + '.svelte',
+					filename: name,
 					generate: is_gt_5 ? 'client' : 'dom',
 					dev: true,
 					fragments: options.fragments
@@ -323,7 +330,9 @@ async function get_bundle(
 						if (Array.isArray(node.value)) {
 							for (const chunk of node.value) {
 								if (chunk.type === 'Text') {
-									tailwind_candidates.push(...chunk.data.split(' '));
+									for (const candidate of chunk.data.split(' ')) {
+										if (candidate) tailwind_candidates.add(candidate);
+									}
 								}
 							}
 						}
@@ -363,7 +372,7 @@ async function get_bundle(
 				}
 			} else if (/\.svelte\.(js|ts)$/.test(id)) {
 				const compilerOptions: any = {
-					filename: name + '.js',
+					filename: name,
 					generate: 'client',
 					dev: true
 				};
@@ -400,13 +409,12 @@ async function get_bundle(
 		}
 	};
 
-	const key = JSON.stringify(options);
 	const handled_css_ids = new Set<string>();
 	let user_css = '';
 
 	bundle = await rollup({
 		input: './__entry.js',
-		cache: previous?.key === key && previous.cache,
+		cache: previous?.key === key ? previous.cache : true,
 		plugins: [
 			alias_plugin(options.aliases, virtual),
 			typescript_strip_types,
@@ -460,12 +468,12 @@ async function get_bundle(
 		}
 	});
 
-	previous = { key, cache: bundle.cache };
+	previous = { key, cache: bundle.cache, tailwind_candidates };
 
 	return {
 		bundle,
 		css: options.tailwind
-			? (tailwind ?? (await init_tailwind(user_css))).build(tailwind_candidates)
+			? (tailwind ?? (await init_tailwind(user_css))).build([...tailwind_candidates])
 			: user_css
 				? user_css
 				: null,

packages/repl/src/lib/workers/bundler/plugins/alias.ts

@@ -56,6 +56,17 @@ export function resolve(virtual: Map<string, File>, importee: string, importer:
 		}
 	}
 
+	if (url.href.endsWith('.ts') || url.href.endsWith('.js')) {
+		// One can mean the other (TS encourages you to import .ts files with .js suffixes, and bundlers handle these cases)
+		const other_suffix = url.href.endsWith('.ts') ? '.js' : '.ts';
+		const with_other_suffix = `${url.href.slice(VIRTUAL.length + 1, -3)}${other_suffix}`;
+		const file = virtual.get(with_other_suffix);
+
+		if (file) {
+			return url.href.slice(0, -3) + other_suffix;
+		}
+	}
+
 	throw new Error(
 		`'${importee}' (imported by ${importer.replace(VIRTUAL + '/', '')}) does not exist`
 	);