Merge pull request #2766 from EmilTholin/debug-hoisted-variable

Don't get hoisted variable from ctx when using @debug

src/compile/render-dom/wrappers/DebugTag.ts

@@ -25,7 +25,7 @@ export default class DebugTagWrapper extends Wrapper {
 
 		if (!renderer.options.dev) return;
 
-		const { code } = component;
+		const { code, var_lookup } = component;
 
 		if (this.node.expressions.length === 0) {
 			// Debug all
@@ -50,23 +50,30 @@ export default class DebugTagWrapper extends Wrapper {
 
 			const condition = Array.from(dependencies).map(d => `changed.${d}`).join(' || ');
 
-			const identifiers = this.node.expressions.map(e => e.node.name).join(', ');
+			const ctx_identifiers = this.node.expressions
+				.filter(e => {
+					const looked_up_var = var_lookup.get(e.node.name);
+					return !(looked_up_var && looked_up_var.hoistable);
+				})
+				.map(e => e.node.name)
+				.join(', ');
+			const logged_identifiers = this.node.expressions.map(e => e.node.name).join(', ');
 
 			block.builders.update.add_block(deindent`
 				if (${condition}) {
-					const { ${identifiers} } = ctx;
-					console.${log}({ ${identifiers} });
+					const { ${ctx_identifiers} } = ctx;
+					console.${log}({ ${logged_identifiers} });
 					debugger;
 				}
 			`);
 
 			block.builders.create.add_block(deindent`
 				{
-					const { ${identifiers} } = ctx;
-					console.${log}({ ${identifiers} });
+					const { ${ctx_identifiers} } = ctx;
+					console.${log}({ ${logged_identifiers} });
 					debugger;
 				}
 			`);
 		}
 	}
-}
+}

test/js/samples/debug-hoisted/_config.js

@@ -0,0 +1,5 @@
+export default {
+	options: {
+		dev: true
+	}
+};

test/js/samples/debug-hoisted/expected.js

@@ -0,0 +1,56 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponentDev,
+	init,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+const file = undefined;
+
+function create_fragment(ctx) {
+	return {
+		c: function create() {
+			{
+				const { obj } = ctx;
+				console.log({ obj, kobzol });
+				debugger;
+			}
+		},
+
+		l: function claim(nodes) {
+			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+		},
+
+		m: noop,
+
+		p: function update(changed, ctx) {
+			if (changed.obj || changed.kobzol) {
+				const { obj } = ctx;
+				console.log({ obj, kobzol });
+				debugger;
+			}
+		},
+
+		i: noop,
+		o: noop,
+		d: noop
+	};
+}
+
+let kobzol = 5;
+
+function instance($$self) {
+	let obj = { x: 5 };
+
+	return { obj };
+}
+
+class Component extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, []);
+	}
+}
+
+export default Component;

test/js/samples/debug-hoisted/input.svelte

@@ -0,0 +1,6 @@
+<script>
+	let obj = { x: 5 };
+	let kobzol = 5;
+</script>
+
+{@debug obj, kobzol}