various

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

@@ -410,7 +410,7 @@ export default class EachBlockWrapper extends Wrapper {
 
 		block.chunks.destroy.push(b`
 			for (let #i = 0; #i < ${view_length}; #i += 1) {
-				${iterations}[#i].d(${parent_node ? '' : 'detaching'});
+				${iterations}[#i].d(${parent_node ? null : 'detaching'});
 			}
 		`);
 	}

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

@@ -273,7 +273,7 @@ function get_event_handler(
 			uses_context: true,
 			mutation: store
 				? mutate_store(store, value, tail)
-				: b`${snippet}.${tail} = ${value};`,
+				: b`${snippet} = ${value};`,
 			contextual_dependencies: new Set([object.name, property.name])
 		};
 	}

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

@@ -162,10 +162,10 @@ export default class ElementWrapper extends Wrapper {
 						});
 
 						const lets = this.node.lets;
-						const seen = new Set(lets.map(l => l.name));
+						const seen = new Set(lets.map(l => l.name.name));
 
 						(owner as unknown as InlineComponentWrapper).node.lets.forEach(l => {
-							if (!seen.has(l.name)) lets.push(l);
+							if (!seen.has(l.name.name)) lets.push(l);
 						});
 
 						const fn = get_context_merger(lets);
@@ -649,7 +649,7 @@ export default class ElementWrapper extends Wrapper {
 			const name = block.get_unique_name(`${this.var.name}_transition`);
 			const snippet = intro.expression
 				? intro.expression.manipulate(block)
-				: '{}';
+				: x`{}`;
 
 			block.add_variable(name);
 
@@ -695,7 +695,7 @@ export default class ElementWrapper extends Wrapper {
 				block.add_variable(intro_name);
 				const snippet = intro.expression
 					? intro.expression.manipulate(block)
-					: '{}';
+					: x`{}`;
 
 				const fn = component.qualify(intro.name);
 
@@ -737,7 +737,7 @@ export default class ElementWrapper extends Wrapper {
 				block.add_variable(outro_name);
 				const snippet = outro.expression
 					? outro.expression.manipulate(block)
-					: '{}';
+					: x`{}`;
 
 				const fn = component.qualify(outro.name);
 

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

@@ -131,7 +131,7 @@ export default class SlotWrapper extends Wrapper {
 		const listeners = block.event_listeners;
 		block.event_listeners = [];
 		this.fragment.render(block, parent_node, parent_nodes);
-		block.render_listeners(`_${slot}`);
+		block.render_listeners(`_${slot.name}`);
 		block.event_listeners = listeners;
 
 		// block.builders.create.pop_condition();

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

@@ -65,8 +65,8 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 	);
 
 	const slot = node.get_static_attribute_value('slot');
-	const component = node.find_nearest(/InlineComponent/);
-	if (slot && component) {
+	const nearest_inline_component = node.find_nearest(/InlineComponent/);
+	if (slot && nearest_inline_component) {
 		const slot = node.attributes.find((attribute) => attribute.name === 'slot');
 		const slot_name = (slot.chunks[0] as Text).data;
 		const target = renderer.targets[renderer.targets.length - 1];
@@ -74,10 +74,10 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 		target.slots[slot_name] = '';
 
 		const lets = node.lets;
-		const seen = new Set(lets.map(l => l.name));
+		const seen = new Set(lets.map(l => l.name.name));
 
-		component.lets.forEach(l => {
-			if (!seen.has(l.name)) lets.push(l);
+		nearest_inline_component.lets.forEach(l => {
+			if (!seen.has(l.name.name)) lets.push(l);
 		});
 
 		options.slot_scopes.set(slot_name, get_slot_scope(node.lets));

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

@@ -2,12 +2,12 @@ import { escape, escape_template, stringify } from '../../utils/stringify';
 import { quote_name_if_necessary } from '../../../utils/names';
 import { snip } from '../../utils/snip';
 import Renderer, { RenderOptions } from '../Renderer';
-import { stringify_props } from '../../utils/stringify_props';
 import { get_slot_scope } from './shared/get_slot_scope';
 import { AppendTarget } from '../../../interfaces';
 import InlineComponent from '../../nodes/InlineComponent';
 import { INode } from '../../nodes/interfaces';
 import Text from '../../nodes/Text';
+import { p, x } from 'code-red';
 
 function stringify_attribute(chunk: INode) {
 	if (chunk.type === 'Text') {
@@ -43,8 +43,8 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend
 		// TODO this probably won't work for contextual bindings
 		const snippet = snip(binding.expression);
 
-		binding_props.push(`${binding.name}: ${snippet}`);
-		binding_fns.push(`${binding.name}: $$value => { ${snippet} = $$value; $$settled = false }`);
+		binding_props.push(p`${binding.name}: ${snippet}`);
+		binding_fns.push(p`${binding.name}: $$value => { ${snippet} = $$value; $$settled = false }`);
 	});
 
 	const uses_spread = node.attributes.find(attr => attr.is_spread);
@@ -65,14 +65,15 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend
 				.join(', ')
 		})`;
 	} else {
-		props = stringify_props(
-			node.attributes
-				.map(attribute => `${quote_name_if_necessary(attribute.name)}: ${get_attribute_value(attribute)}`)
-				.concat(binding_props)
-		);
+		props = x`{
+			${node.attributes.map(attribute => p`${attribute.name}: ${get_attribute_value(attribute)}`)}
+			${binding_props}
+		}`;
 	}
 
-	const bindings = stringify_props(binding_fns);
+	const bindings = x`{
+		${binding_fns}
+	}`;
 
 	const expression = (
 		node.name === 'svelte:self'
@@ -110,7 +111,9 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend
 		renderer.targets.pop();
 	}
 
-	const slots = stringify_props(slot_fns);
+	const slots = x`{
+		${slot_fns}
+	}`;
 
 	renderer.append(`\${@validate_component(${expression}, '${node.name}').$$render($$result, ${props}, ${bindings}, ${slots})}`);
 }

src/compiler/compile/utils/stringify_props.ts

@@ -1,11 +0,0 @@
-export function stringify_props(props: string[]) {
-	if (!props.length) return '{}';
-
-	const joined = props.join(', ');
-	if (joined.length > 40) {
-		// make larger data objects readable
-		return `{\n\t${props.join(',\n\t')}\n}`;
-	}
-
-	return `{ ${joined} }`;
-}