feat: support aliases in playground (#1390)

* feat: support aliases in playground

supports a new `aliases` property when using the REPL instance programmatically, so you can e.g. alias `$lib` as `src/lib`

* fix, hopefully

Author: dummdidumm

packages/repl/src/lib/Repl.svelte

@@ -69,13 +69,22 @@
 		return {
 			imports: bundler!.result?.imports ?? [],
 			files: workspace.files,
-			tailwind: workspace.tailwind
+			tailwind: workspace.tailwind,
+			aliases: workspace.aliases
 		};
 	}
 
 	// TODO get rid
-	export async function set(data: { files: File[]; tailwind?: boolean }) {
-		workspace.reset(data.files, { tailwind: data.tailwind ?? false }, 'App.svelte');
+	export async function set(data: {
+		files: File[];
+		tailwind?: boolean;
+		aliases?: Record<string, string>;
+	}) {
+		workspace.reset(
+			data.files,
+			{ tailwind: data.tailwind ?? false, aliases: data.aliases },
+			'App.svelte'
+		);
 	}
 
 	// TODO get rid
@@ -88,7 +97,8 @@
 	async function rebundle() {
 		bundler!.bundle(workspace.files as File[], {
 			tailwind: workspace.tailwind,
-			fragments: workspace.compiler_options.fragments
+			fragments: workspace.compiler_options.fragments,
+			aliases: workspace.aliases
 		});
 	}
 

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

@@ -117,6 +117,7 @@ export class Workspace {
 	#files = $state.raw<Item[]>([]);
 	#current = $state.raw() as File;
 	#vim = $state(false);
+	#aliases = $state.raw(undefined) as undefined | Record<string, string>;
 	#tailwind = $state(false);
 
 	#handlers = {
@@ -400,13 +401,18 @@ export class Workspace {
 		this.#onreset?.(this.#files);
 	}
 
-	reset(new_files: Item[], options: { tailwind: boolean }, selected?: string) {
+	reset(
+		new_files: Item[],
+		options: { tailwind: boolean; aliases?: Record<string, string> },
+		selected?: string
+	) {
 		this.states.clear();
 		this.set(new_files, selected);
 
 		this.mark_saved();
 
 		this.#tailwind = options.tailwind;
+		this.#aliases = options.aliases;
 
 		this.#onreset(new_files);
 		this.#reset_diagnostics();
@@ -475,6 +481,15 @@ export class Workspace {
 		}
 	}
 
+	get aliases() {
+		return this.#aliases;
+	}
+
+	set aliases(value) {
+		this.#aliases = value;
+		this.#onupdate(this.#current);
+	}
+
 	get tailwind() {
 		return this.#tailwind;
 	}

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

@@ -12,6 +12,7 @@ import image from './plugins/image';
 import svg from './plugins/svg';
 import replace from './plugins/replace';
 import loop_protect from './plugins/loop-protect';
+import alias_plugin, { resolve } from './plugins/alias';
 import type { Plugin, RollupCache, TransformResult } from '@rollup/browser';
 import type { BundleMessageData, BundleOptions } from '../workers';
 import type { Warning } from '../../types';
@@ -195,20 +196,7 @@ async function get_bundle(
 			// importing a relative file
 			if (importee[0] === '.') {
 				if (importer.startsWith(VIRTUAL)) {
-					const url = new URL(importee, importer);
-
-					for (const suffix of ['', '.js', '.json', '.ts']) {
-						const with_suffix = `${url.href.slice(VIRTUAL.length + 1)}${suffix}`;
-						const file = virtual.get(with_suffix);
-
-						if (file) {
-							return url.href + suffix;
-						}
-					}
-
-					throw new Error(
-						`'${importee}' (imported by ${importer.replace(VIRTUAL + '/', '')}) does not exist`
-					);
+					return resolve(virtual, importee, importer);
 				}
 
 				if (current) {
@@ -420,6 +408,7 @@ async function get_bundle(
 		input: './__entry.js',
 		cache: previous?.key === key && previous.cache,
 		plugins: [
+			alias_plugin(options.aliases, virtual),
 			typescript_strip_types,
 			repl_plugin,
 			commonjs,

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

@@ -0,0 +1,64 @@
+import { VIRTUAL } from '../../constants';
+import type { File } from '$lib/Workspace.svelte';
+import type { Plugin } from '@rollup/browser';
+
+/**
+ * Alias plugin for resolving import aliases (e.g., $lib -> src/lib).
+ * This will also run on npm packages, so that e.g. SvelteKit libraries using $app/environment can also make use of this.
+ *
+ * @example
+ * // With aliases: { '$lib': 'src/lib' }
+ * // import foo from '$lib/foo' -> import foo from 'src/lib/foo'
+ * // import bar from '$lib' -> import bar from 'src/lib'
+ */
+function alias_plugin(aliases: Record<string, string> = {}, virtual: Map<string, File>): Plugin {
+	// Sort aliases by length (longest first) to avoid conflicts
+	const alias_entries = Object.entries(aliases).sort((a, b) => b[0].length - a[0].length);
+
+	return {
+		name: 'alias',
+		resolveId(importee, importer) {
+			// Skip if no aliases configured / this is a relative import
+			if (alias_entries.length === 0 || importee[0] === '.') {
+				return null;
+			}
+
+			// Check if the import matches any alias
+			for (const [alias_key, alias_path] of alias_entries) {
+				if (importee === alias_key) {
+					// Exact match - replace with alias path
+					return resolve(virtual, `${VIRTUAL}/${alias_path}`, importer);
+				} else if (importee.startsWith(alias_key + '/')) {
+					// Partial match - replace the prefix
+					const relative_path = importee.slice(alias_key.length + 1);
+					return resolve(virtual, `${VIRTUAL}/${alias_path}/${relative_path}`, importer);
+				}
+			}
+
+			// No alias match, let other plugins handle it
+			return null;
+		}
+	};
+}
+
+/**
+ * Tries to resolve the import path based on the virtual file map, trying different suffixes.
+ */
+export function resolve(virtual: Map<string, File>, importee: string, importer: string): string {
+	const url = new URL(importee, importer);
+
+	for (const suffix of ['', '.js', '.json', '.ts', '/index.js', '/index.ts']) {
+		const with_suffix = `${url.href.slice(VIRTUAL.length + 1)}${suffix}`;
+		const file = virtual.get(with_suffix);
+
+		if (file) {
+			return url.href + suffix;
+		}
+	}
+
+	throw new Error(
+		`'${importee}' (imported by ${importer.replace(VIRTUAL + '/', '')}) does not exist`
+	);
+}
+
+export default alias_plugin;

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

@@ -53,6 +53,7 @@ export interface BundleOptions {
 	tailwind?: boolean;
 	runes?: boolean;
 	fragments?: 'html' | 'tree';
+	aliases?: Record<string, string>;
 }
 
 export type BundleMessageData = {