feat: add rootDir option and set __svelte_meta.file like in svelte4 (#11627)

* feat: add rootDir option and set __svelte_meta.file like in svelte4

* Update packages/svelte/src/compiler/validate-options.js

* update tests

* centralise logic

* fix

* note to self

* Apply suggestions from code review

* lint

* one dollar towards the windows backslash bugfix foundation please

---------

Co-authored-by: Rich Harris <[email protected]>
Co-authored-by: Simon Holthausen <[email protected]>

Author: 3 people

.changeset/khaki-mails-scream.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: introduce `rootDir` compiler option, make `filename` relative to it

.changeset/kind-doors-grin.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: rename `__svelte_meta.filename` to `__svelte_meta.file` to align with svelte 4

packages/svelte/src/compiler/index.js

@@ -19,10 +19,10 @@ export { default as preprocess } from './preprocess/index.js';
  * @returns {import('#compiler').CompileResult}
  */
 export function compile(source, options) {
-	try {
-		state.reset({ source, filename: options.filename });
+	const validated = validate_component_options(options, '');
+	state.reset(source, validated);
 
-		const validated = validate_component_options(options, '');
+	try {
 		let parsed = _parse(source);
 
 		const { customElement: customElementOptions, ...parsed_options } = parsed.options || {};
@@ -49,7 +49,7 @@ export function compile(source, options) {
 		return result;
 	} catch (e) {
 		if (e instanceof CompileError) {
-			handle_compile_error(e, options.filename, source);
+			handle_compile_error(e);
 		}
 
 		throw e;
@@ -65,16 +65,16 @@ export function compile(source, options) {
  * @returns {import('#compiler').CompileResult}
  */
 export function compileModule(source, options) {
-	try {
-		state.reset({ source, filename: options.filename });
+	const validated = validate_module_options(options, '');
+	state.reset(source, validated);
 
-		const validated = validate_module_options(options, '');
+	try {
 		const analysis = analyze_module(parse_acorn(source, false), validated);
 		const result = transform_module(analysis, source, validated);
 		return result;
 	} catch (e) {
 		if (e instanceof CompileError) {
-			handle_compile_error(e, options.filename, source);
+			handle_compile_error(e);
 		}
 
 		throw e;
@@ -83,11 +83,9 @@ export function compileModule(source, options) {
 
 /**
  * @param {import('#compiler').CompileError} error
- * @param {string | undefined} filename
- * @param {string} source
  */
-function handle_compile_error(error, filename, source) {
-	error.filename = filename;
+function handle_compile_error(error) {
+	error.filename = state.filename;
 
 	if (error.position) {
 		const start = state.locator(error.position[0]);
@@ -134,25 +132,25 @@ function handle_compile_error(error, filename, source) {
  *
  * https://svelte.dev/docs/svelte-compiler#svelte-parse
  * @param {string} source
- * @param {{ filename?: string; modern?: boolean }} [options]
+ * @param {{ filename?: string; rootDir?: string; modern?: boolean }} [options]
  * @returns {import('#compiler').Root | import('./types/legacy-nodes.js').LegacyRoot}
  */
-export function parse(source, options = {}) {
-	state.reset({ source, filename: options.filename });
+export function parse(source, { filename, rootDir, modern } = {}) {
+	state.reset(source, { filename, rootDir }); // TODO it's weird to require filename/rootDir here. reconsider the API
 
 	/** @type {import('#compiler').Root} */
 	let ast;
 	try {
 		ast = _parse(source);
 	} catch (e) {
 		if (e instanceof CompileError) {
-			handle_compile_error(e, options.filename, source);
+			handle_compile_error(e);
 		}
 
 		throw e;
 	}
 
-	return to_public_ast(source, ast, options.modern);
+	return to_public_ast(source, ast, modern);
 }
 
 /**

packages/svelte/src/compiler/migrate/index.js

@@ -18,7 +18,7 @@ import { migrate_svelte_ignore } from '../utils/extract_svelte_ignore.js';
  */
 export function migrate(source) {
 	try {
-		reset({ source, filename: 'migrate.svelte' });
+		reset(source, { filename: 'migrate.svelte' });
 
 		let parsed = parse(source);
 

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

@@ -8,6 +8,7 @@ import { javascript_visitors_runes } from './visitors/javascript-runes.js';
 import { javascript_visitors_legacy } from './visitors/javascript-legacy.js';
 import { serialize_get_binding } from './utils.js';
 import { render_stylesheet } from '../css/index.js';
+import { filename } from '../../../state.js';
 
 /**
  * This function ensures visitor sets don't accidentally clobber each other
@@ -471,14 +472,7 @@ export function client_component(source, analysis, options) {
 	}
 
 	if (options.dev) {
-		if (options.filename) {
-			let filename = options.filename;
-			if (/(\/|\w:)/.test(options.filename)) {
-				// filename is absolute — truncate it
-				const parts = filename.split(/[/\\]/);
-				filename = parts.length > 3 ? ['...', ...parts.slice(-3)].join('/') : filename;
-			}
-
+		if (filename) {
 			// add `App.filename = 'App.svelte'` so that we can print useful messages later
 			body.unshift(
 				b.stmt(

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -27,7 +27,7 @@ import { DOMBooleanAttributes, HYDRATION_END, HYDRATION_START } from '../../../.
 import { escape_html } from '../../../../escaping.js';
 import { sanitize_template_string } from '../../../utils/sanitize_template_string.js';
 import { BLOCK_CLOSE, BLOCK_CLOSE_ELSE } from '../../../../internal/server/hydration.js';
-import { locator } from '../../../state.js';
+import { filename, locator } from '../../../state.js';
 
 export const block_open = t_string(`<!--${HYDRATION_START}-->`);
 export const block_close = t_string(`<!--${HYDRATION_END}-->`);
@@ -2412,14 +2412,7 @@ export function server_component(analysis, options) {
 		body.push(b.export_default(component_function));
 	}
 
-	if (options.dev && options.filename) {
-		let filename = options.filename;
-		if (/(\/|\w:)/.test(options.filename)) {
-			// filename is absolute — truncate it
-			const parts = filename.split(/[/\\]/);
-			filename = parts.length > 3 ? ['...', ...parts.slice(-3)].join('/') : filename;
-		}
-
+	if (options.dev && filename) {
 		// add `App.filename = 'App.svelte'` so that we can print useful messages later
 		body.unshift(
 			b.stmt(

packages/svelte/src/compiler/state.js

@@ -5,7 +5,11 @@ import { getLocator } from 'locate-character';
 /** @type {import('#compiler').Warning[]} */
 export let warnings = [];
 
-/** @type {string | undefined} */
+/**
+ * The filename (if specified in the compiler options) relative to the rootDir (if specified).
+ * This should not be used in the compiler output except in dev mode
+ * @type {string | undefined}
+ */
 export let filename;
 
 export let locator = getLocator('', { offsetLine: 1 });
@@ -26,14 +30,23 @@ export function pop_ignore() {
 }
 
 /**
- * @param {{
- *   source: string;
- *   filename: string | undefined;
- * }} options
+ * @param {string} source
+ * @param {{ filename?: string, rootDir?: string }} options
  */
-export function reset(options) {
-	filename = options.filename;
-	locator = getLocator(options.source, { offsetLine: 1 });
+export function reset(source, options) {
+	const root_dir = options.rootDir?.replace(/\\/g, '/');
+	filename = options.filename?.replace(/\\/g, '/');
+
+	if (
+		typeof filename === 'string' &&
+		typeof root_dir === 'string' &&
+		filename.startsWith(root_dir)
+	) {
+		// make filename relative to rootDir
+		filename = filename.replace(root_dir, '').replace(/^[/\\]/, '');
+	}
+
+	locator = getLocator(source, { offsetLine: 1 });
 	warnings = [];
 	ignore_stack = [];
 }

packages/svelte/src/compiler/types/index.d.ts

@@ -216,12 +216,22 @@ export interface ModuleCompileOptions {
 	 * Used for debugging hints and sourcemaps. Your bundler plugin will set it automatically.
 	 */
 	filename?: string;
+
+	/**
+	 * Used for ensuring filenames don't leak filesystem information. Your bundler plugin will set it automatically.
+	 * @default process.cwd() on node-like environments, undefined elsewhere
+	 */
+	rootDir?: string;
 }
 
 // The following two somewhat scary looking types ensure that certain types are required but can be undefined still
 
-export type ValidatedModuleCompileOptions = Omit<Required<ModuleCompileOptions>, 'filename'> & {
+export type ValidatedModuleCompileOptions = Omit<
+	Required<ModuleCompileOptions>,
+	'filename' | 'rootDir'
+> & {
 	filename: ModuleCompileOptions['filename'];
+	rootDir: ModuleCompileOptions['rootDir'];
 };
 
 export type ValidatedCompileOptions = ValidatedModuleCompileOptions &

packages/svelte/src/compiler/validate-options.js

@@ -10,6 +10,10 @@ import * as w from './warnings.js';
 const common = {
 	filename: string(undefined),
 
+	// default to process.cwd() where it exists to replicate svelte4 behavior
+	// see https://github.com/sveltejs/svelte/blob/b62fc8c8fd2640c9b99168f01b9d958cb2f7574f/packages/svelte/src/compiler/compile/Component.js#L211
+	rootDir: string(typeof process !== 'undefined' ? process.cwd?.() : undefined),
+
 	dev: boolean(false),
 
 	generate: validator('client', (input, keypath) => {

packages/svelte/src/internal/client/dev/elements.js

@@ -34,7 +34,7 @@ export function add_locations(fn, filename, locations) {
 function assign_location(element, filename, location) {
 	// @ts-expect-error
 	element.__svelte_meta = {
-		loc: { filename, line: location[0], column: location[1] }
+		loc: { file: filename, line: location[0], column: location[1] }
 	};
 
 	if (location[2]) {