fix arrow function precedence (#4385)

* update code-red

* fix code-red usage

* update changelog

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * Fix binding to module-level variables ([#4086](https://github.com/sveltejs/svelte/issues/4086))
 * Disallow attribute/prop names from matching two-way-bound names or `{shorthand}` attribute/prop names ([#4325](https://github.com/sveltejs/svelte/issues/4325))
+* Fix code generation error with precedence of arrow functions ([#4384](https://github.com/sveltejs/svelte/issues/4384))
 
 ## 3.18.1
 

package-lock.json

@@ -597,9 +597,9 @@
       "dev": true
     },
     "code-red": {
-      "version": "0.0.32",
-      "resolved": "https://registry.npmjs.org/code-red/-/code-red-0.0.32.tgz",
-      "integrity": "sha512-mE+EZc2vJ4HxiejW5S2CvcVDKtopFEmrqAd9DTBDLCNjLgxekPP8wLi/ZiwDTwZwwW3dzeetaubLaMlIvkhVNw==",
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-0.1.1.tgz",
+      "integrity": "sha512-2pEIyya4fxI9HxQcrl9dJl20+9He1nLeja50zkf7gK2OTTV9NpD3CgA74gzXnPqWv2zJpa6uXNSaE0haOCpOsw==",
       "dev": true,
       "requires": {
         "acorn": "^7.1.0",

package.json

@@ -70,7 +70,7 @@
     "acorn": "^7.1.0",
     "agadoo": "^1.1.0",
     "c8": "^5.0.1",
-    "code-red": "0.0.32",
+    "code-red": "0.1.1",
     "codecov": "^3.5.0",
     "css-tree": "1.0.0-alpha22",
     "eslint": "^6.3.0",

src/compiler/compile/render_dom/Renderer.ts

@@ -197,7 +197,7 @@ export default class Renderer {
 
 		return filtered
 			.map(n => x`$$invalidate(${this.context_lookup.get(n).index}, ${n})`)
-			.reduce((lhs, rhs) => x`${lhs}, ${rhs}}`);
+			.reduce((lhs, rhs) => x`${lhs}, ${rhs}`);
 	}
 
 	dirty(names, is_reactive_declaration = false): Expression {

src/compiler/compile/render_dom/index.ts

@@ -403,9 +403,9 @@ export default function dom(
 
 				${set && b`$$self.$set = ${set};`}
 
-				${capture_state && x`$$self.$capture_state = ${capture_state};`}
+				${capture_state && b`$$self.$capture_state = ${capture_state};`}
 
-				${inject_state && x`$$self.$inject_state = ${inject_state};`}
+				${inject_state && b`$$self.$inject_state = ${inject_state};`}
 
 				${injected.map(name => b`let ${name};`)}
 

src/compiler/compile/render_dom/invalidate.ts

@@ -67,7 +67,7 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names:
 
 			if (head.subscribable && head.reassigned) {
 				const subscribe = `$$subscribe_${head.name}`;
-				invalidate = x`${subscribe}(${invalidate})}`;
+				invalidate = x`${subscribe}(${invalidate})`;
 			}
 
 			return invalidate;

src/compiler/compile/render_dom/wrappers/AwaitBlock.ts

@@ -205,7 +205,7 @@ export default class AwaitBlockWrapper extends Wrapper {
 
 					} else {
 						const #child_ctx = #ctx.slice();
-						${this.node.value && x`#child_ctx[${value_index}] = ${info}.resolved;`}
+						${this.node.value && b`#child_ctx[${value_index}] = ${info}.resolved;`}
 						${info}.block.p(#child_ctx, #dirty);
 					}
 				`);
@@ -219,7 +219,7 @@ export default class AwaitBlockWrapper extends Wrapper {
 				block.chunks.update.push(b`
 					{
 						const #child_ctx = #ctx.slice();
-						${this.node.value && x`#child_ctx[${value_index}] = ${info}.resolved;`}
+						${this.node.value && b`#child_ctx[${value_index}] = ${info}.resolved;`}
 						${info}.block.p(#child_ctx, #dirty);
 					}
 				`);

src/compiler/compile/render_dom/wrappers/Element/Binding.ts

@@ -97,7 +97,7 @@ export default class BindingWrapper {
 			const type = parent.node.get_static_attribute_value('type');
 
 			if (type === null || type === "" || type === "text" || type === "email" || type === "password") {
-				update_conditions.push(x`(${parent.var}.${this.node.name} !== ${this.snippet})`);
+				update_conditions.push(x`${parent.var}.${this.node.name} !== ${this.snippet}`);
 			}
 		}
 

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -415,7 +415,7 @@ export default class ElementWrapper extends Wrapper {
 
 		const is = this.attributes.find(attr => attr.node.name === 'is');
 		if (is) {
-			return x`@element_is("${name}", ${is.render_chunks(block).reduce((lhs, rhs) => x`${lhs} + ${rhs}`)});`;
+			return x`@element_is("${name}", ${is.render_chunks(block).reduce((lhs, rhs) => x`${lhs} + ${rhs}`)})`;
 		}
 
 		return x`@element("${name}")`;
@@ -632,7 +632,7 @@ export default class ElementWrapper extends Wrapper {
 
 	add_this_binding(block: Block, this_binding: Binding) {
 		const { renderer } = this;
-		
+
 		renderer.component.has_reactive_assignments = true;
 
 		const binding_callback = bind_this(renderer.component, block, this_binding.node, this.var);

src/compiler/compile/render_dom/wrappers/MustacheTag.ts

@@ -17,7 +17,7 @@ export default class MustacheTagWrapper extends Tag {
 	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
 		const { init } = this.rename_this_method(
 			block,
-			value => x`@set_data(${this.var}, ${value});`
+			value => x`@set_data(${this.var}, ${value})`
 		);
 
 		block.add_element(

src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts

@@ -48,7 +48,7 @@ export default class RawMustacheTagWrapper extends Tag {
 
 			const { init } = this.rename_this_method(
 				block,
-				content => x`${html_tag}.p(${content});`
+				content => x`${html_tag}.p(${content})`
 			);
 
 			const update_anchor = in_head ? 'null' : needs_anchor ? html_anchor : this.next ? this.next.var : 'null';

src/compiler/compile/render_ssr/handlers/AwaitBlock.ts

@@ -12,9 +12,9 @@ export default function(node: AwaitBlock, renderer: Renderer, options: RenderOpt
 	const then = renderer.pop();
 
 	renderer.add_expression(x`
-		(function(__value) {
+		function(__value) {
 			if (@is_promise(__value)) return ${pending};
 			return (function(${node.value}) { return ${then}; }(__value));
-		}(${node.expression.node}))
+		}(${node.expression.node})
 	`);
 }

src/compiler/compile/render_ssr/handlers/Element.ts

@@ -65,7 +65,7 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 			}
 		});
 
-		renderer.add_expression(x`@spread([${args}], ${class_expression});`);
+		renderer.add_expression(x`@spread([${args}], ${class_expression})`);
 	} else {
 		let add_class_attribute = !!class_expression;
 		node.attributes.forEach(attribute => {

src/compiler/compile/render_ssr/handlers/Head.ts

@@ -12,5 +12,5 @@ export default function(node: Head, renderer: Renderer, options: RenderOptions)
 	renderer.render(node.children, head_options);
 	const result = renderer.pop();
 
-	renderer.add_expression(x`($$result.head += ${result}, "")`);
+	renderer.add_expression(x`$$result.head += ${result}, ""`);
 }

src/compiler/compile/render_ssr/handlers/Title.ts

@@ -12,5 +12,5 @@ export default function(node: Title, renderer: Renderer, options: RenderOptions)
 	renderer.add_string(`</title>`);
 	const result = renderer.pop();
 
-	renderer.add_expression(x`($$result.title = ${result}, "")`);
+	renderer.add_expression(x`$$result.title = ${result}, ""`);
 }