Merge pull request #3147 from sveltejs/gh-2693

distinguish between lazy and non-lazy expressions

Author: Rich-Harris

src/compiler/compile/nodes/Animation.ts

@@ -34,7 +34,7 @@ export default class Animation extends Node {
 		block.has_animation = true;
 
 		this.expression = info.expression
-			? new Expression(component, this, scope, info.expression)
+			? new Expression(component, this, scope, info.expression, true)
 			: null;
 	}
 }

src/compiler/compile/nodes/EventHandler.ts

@@ -21,7 +21,7 @@ export default class EventHandler extends Node {
 		this.modifiers = new Set(info.modifiers);
 
 		if (info.expression) {
-			this.expression = new Expression(component, this, template_scope, info.expression);
+			this.expression = new Expression(component, this, template_scope, info.expression, true);
 			this.uses_context = this.expression.uses_context;
 
 			if (/FunctionExpression/.test(info.expression.type) && info.expression.params.length === 0) {

src/compiler/compile/nodes/Transition.ts

@@ -34,7 +34,7 @@ export default class Transition extends Node {
 		}
 
 		this.expression = info.expression
-			? new Expression(component, this, scope, info.expression)
+			? new Expression(component, this, scope, info.expression, true)
 			: null;
 	}
 }

src/compiler/compile/nodes/shared/Expression.ts

@@ -86,7 +86,7 @@ export default class Expression {
 	rendered: string;
 
 	// todo: owner type
-	constructor(component: Component, owner: Owner, template_scope: TemplateScope, info) {
+	constructor(component: Component, owner: Owner, template_scope: TemplateScope, info, lazy?: boolean) {
 		// TODO revert to direct property access in prod?
 		Object.defineProperties(this, {
 			component: {
@@ -146,11 +146,11 @@ export default class Expression {
 
 						contextual_dependencies.add(name);
 
-						if (!function_expression) {
+						if (!lazy) {
 							template_scope.dependencies_for_name.get(name).forEach(name => dependencies.add(name));
 						}
 					} else {
-						if (!function_expression) {
+						if (!lazy) {
 							dependencies.add(name);
 						}
 

test/js/samples/action-custom-event-handler/expected.js

@@ -23,7 +23,12 @@ function create_fragment(ctx) {
 			foo_action = foo.call(null, button, ctx.foo_function) || {};
 		},
 
-		p: noop,
+		p(changed, ctx) {
+			if (typeof foo_action.update === 'function' && changed.bar) {
+				foo_action.update.call(null, ctx.foo_function);
+			}
+		},
+
 		i: noop,
 		o: noop,
 

test/runtime/samples/reactive-function-inline/_config.js

@@ -0,0 +1,8 @@
+export default {
+	html: '<p>0</p>',
+
+	test({ assert, component, target }) {
+		component.selected = 3;
+		assert.htmlEqual(target.innerHTML, '<p>3</p>');
+	}
+};

test/runtime/samples/reactive-function-inline/main.svelte

@@ -0,0 +1,6 @@
+<script>
+	let list = [0, 1, 2, 3, 4];
+	export let selected = 0;
+</script>
+
+<p>{list.filter(x => x === selected)}</p>

test/runtime/samples/reactive-function/_config.js

@@ -2,10 +2,8 @@ export default {
 	html: '<p>50</p>',
 
 	test({ assert, component, target }) {
-		console.group('range [50,100]');
 		component.range = [50, 100];
 		assert.htmlEqual(target.innerHTML, '<p>75</p>');
-		console.groupEnd();
 
 		component.range = [50, 60];
 		assert.htmlEqual(target.innerHTML, '<p>55</p>');