fix: ensure $inspect.trace code is treeshaken out if unused (#14770)

* fix: ensure $inspect.trace code is treeshaken out if unused

* Update .changeset/tough-dingos-deliver.md

---------

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

.changeset/tough-dingos-deliver.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: treeshake `$inspect.trace` code if unused

packages/svelte/package.json

@@ -56,6 +56,9 @@
     "./internal/flags/legacy": {
       "default": "./src/internal/flags/legacy.js"
     },
+    "./internal/flags/tracing": {
+      "default": "./src/internal/flags/tracing.js"
+    },
     "./internal/server": {
       "default": "./src/internal/server/index.js"
     },

packages/svelte/scripts/check-treeshakeability.js

@@ -58,6 +58,7 @@ for (const key in pkg.exports) {
 	if (key === './internal') continue;
 	if (key === './internal/disclose-version') continue;
 	if (key === './internal/flags/legacy') continue;
+	if (key === './internal/flags/tracing') continue;
 
 	for (const type of ['browser', 'default']) {
 		if (!pkg.exports[key][type]) continue;
@@ -91,6 +92,7 @@ const bundle = await bundle_code(
 </script>
 
 <svelte:head><title>hi</title></svelte:head>
+<input bind:value={foo} />
 
 <a href={foo} class={foo}>a</a>
 <a {...foo}>a</a>
@@ -134,6 +136,15 @@ if (!bundle.includes('component_context.l')) {
 	console.error(`❌ Legacy code not treeshakeable`);
 }
 
+if (!bundle.includes(`'CreatedAt'`)) {
+	// eslint-disable-next-line no-console
+	console.error(`✅ $inspect.trace code treeshakeable`);
+} else {
+	failed = true;
+	// eslint-disable-next-line no-console
+	console.error(`❌ $inspect.trace code not treeshakeable`);
+}
+
 if (failed) {
 	// eslint-disable-next-line no-console
 	console.error(bundle);

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -408,6 +408,7 @@ export function analyze_component(root, source, options) {
 		template,
 		elements: [],
 		runes,
+		tracing: false,
 		immutable: runes || options.immutable,
 		exports: [],
 		uses_props: false,

packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js

@@ -171,6 +171,8 @@ export function CallExpression(node, context) {
 
 					context.state.scope.tracing = b.thunk(b.literal(label + ' ' + loc));
 				}
+
+				context.state.analysis.tracing = true;
 			}
 
 			break;

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

@@ -539,6 +539,10 @@ export function client_component(analysis, options) {
 		body.unshift(b.imports([], 'svelte/internal/flags/legacy'));
 	}
 
+	if (analysis.tracing) {
+		body.unshift(b.imports([], 'svelte/internal/flags/tracing'));
+	}
+
 	if (options.discloseVersion) {
 		body.unshift(b.imports([], 'svelte/internal/disclose-version'));
 	}

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

@@ -39,6 +39,7 @@ export interface ComponentAnalysis extends Analysis {
 	/** Used for CSS pruning and scoping */
 	elements: Array<AST.RegularElement | AST.SvelteElement>;
 	runes: boolean;
+	tracing: boolean;
 	exports: Array<{ name: string; alias: string | null }>;
 	/** Whether the component uses `$$props` */
 	uses_props: boolean;

packages/svelte/src/internal/client/proxy.js

@@ -14,6 +14,7 @@ import { STATE_SYMBOL, STATE_SYMBOL_METADATA } from './constants.js';
 import { UNINITIALIZED } from '../../constants.js';
 import * as e from './errors.js';
 import { get_stack } from './dev/tracing.js';
+import { tracing_mode_flag } from '../flags/index.js';
 
 /**
  * @template T
@@ -25,7 +26,7 @@ import { get_stack } from './dev/tracing.js';
 export function proxy(value, parent = null, prev) {
 	/** @type {Error | null} */
 	var stack = null;
-	if (DEV) {
+	if (DEV && tracing_mode_flag) {
 		stack = get_stack('CreatedAt');
 	}
 	// if non-proxyable, or is already a proxy, return `value`

packages/svelte/src/internal/client/reactivity/deriveds.js

@@ -25,6 +25,7 @@ import * as e from '../errors.js';
 import { destroy_effect } from './effects.js';
 import { inspect_effects, set_inspect_effects } from './sources.js';
 import { get_stack } from '../dev/tracing.js';
+import { tracing_mode_flag } from '../../flags/index.js';
 
 /**
  * @template V
@@ -62,7 +63,7 @@ export function derived(fn) {
 		parent: parent_derived ?? active_effect
 	};
 
-	if (DEV) {
+	if (DEV && tracing_mode_flag) {
 		signal.created = get_stack('CreatedAt');
 	}
 

packages/svelte/src/internal/client/reactivity/sources.js

@@ -32,7 +32,7 @@ import {
 	BLOCK_EFFECT
 } from '../constants.js';
 import * as e from '../errors.js';
-import { legacy_mode_flag } from '../../flags/index.js';
+import { legacy_mode_flag, tracing_mode_flag } from '../../flags/index.js';
 import { get_stack } from '../dev/tracing.js';
 
 export let inspect_effects = new Set();
@@ -60,7 +60,7 @@ export function source(v, stack) {
 		version: 0
 	};
 
-	if (DEV) {
+	if (DEV && tracing_mode_flag) {
 		signal.created = stack ?? get_stack('CreatedAt');
 		signal.debug = null;
 	}
@@ -170,7 +170,7 @@ export function internal_set(source, value) {
 		source.v = value;
 		source.version = increment_version();
 
-		if (DEV) {
+		if (DEV && tracing_mode_flag) {
 			source.updated = get_stack('UpdatedAt');
 		}
 

packages/svelte/src/internal/client/runtime.js

@@ -34,7 +34,7 @@ import { destroy_derived, execute_derived, update_derived } from './reactivity/d
 import * as e from './errors.js';
 import { lifecycle_outside_component } from '../shared/errors.js';
 import { FILENAME } from '../../constants.js';
-import { legacy_mode_flag } from '../flags/index.js';
+import { legacy_mode_flag, tracing_mode_flag } from '../flags/index.js';
 import { tracing_expressions, get_stack } from './dev/tracing.js';
 
 const FLUSH_MICROTASK = 0;
@@ -917,6 +917,7 @@ export function get(signal) {
 
 	if (
 		DEV &&
+		tracing_mode_flag &&
 		tracing_expressions !== null &&
 		active_reaction !== null &&
 		tracing_expressions.reaction === active_reaction

packages/svelte/src/internal/flags/index.js

@@ -1,5 +1,10 @@
 export let legacy_mode_flag = false;
+export let tracing_mode_flag = false;
 
 export function enable_legacy_mode_flag() {
 	legacy_mode_flag = true;
 }
+
+export function enable_tracing_mode_flag() {
+	tracing_mode_flag = true;
+}

packages/svelte/src/internal/flags/tracing.js

@@ -0,0 +1,3 @@
+import { enable_tracing_mode_flag } from './index.js';
+
+enable_tracing_mode_flag();