named slots and event context

src/generators/nodes/Element.ts

@@ -253,7 +253,7 @@ export default class Element extends Node {
 
 		const slot = this.attributes.find((attribute: Node) => attribute.name === 'slot');
 		const initialMountNode = this.slotted ?
-			`${this.findNearest(/^Component/).var}._slotted.${slot.value[0].data}` : // TODO this looks bonkers
+			`${this.findNearest(/^Component/).var}._slotted.${slot.chunks[0].data}` : // TODO this looks bonkers
 			parentNode;
 
 		block.addVariable(name);

src/generators/nodes/EventHandler.ts

@@ -75,5 +75,9 @@ export default class EventHandler extends Node {
 				);
 			}
 		}
+
+		this.args.forEach(arg => {
+			arg.overwriteThis(this.parent.var);
+		});
 	}
 }

src/generators/nodes/shared/Expression.ts

@@ -14,6 +14,8 @@ export default class Expression {
 	contexts: Set<string>;
 	indexes: Set<string>;
 
+	thisReferences: Array<{ start: number, end: number }>;
+
 	constructor(compiler, parent, scope, info) {
 		// TODO revert to direct property access in prod?
 		Object.defineProperties(this, {
@@ -23,6 +25,7 @@ export default class Expression {
 		});
 
 		this.node = info;
+		this.thisReferences = [];
 
 		this.snippet = `[✂${info.start}-${info.end}✂]`;
 
@@ -34,7 +37,9 @@ export default class Expression {
 		const { code, helpers } = compiler;
 
 		let { map, scope: currentScope } = createScopes(info);
+
 		const isEventHandler = parent.type === 'EventHandler';
+		const { thisReferences } = this;
 
 		walk(info, {
 			enter(node: any, parent: any) {
@@ -46,6 +51,10 @@ export default class Expression {
 					return;
 				}
 
+				if (node.type === 'ThisExpression') {
+					thisReferences.push(node);
+				}
+
 				if (isReference(node, parent)) {
 					const { name } = flattenReference(node);
 
@@ -85,4 +94,12 @@ export default class Expression {
 		this.contexts = new Set(); // TODO...
 		this.indexes = new Set(); // TODO...
 	}
+
+	overwriteThis(name) {
+		this.thisReferences.forEach(ref => {
+			this.compiler.code.overwrite(ref.start, ref.end, name, {
+				storeName: true
+			});
+		});
+	}
 }

src/generators/server-side-rendering/visitors/Element.ts

@@ -29,7 +29,7 @@ export default function visitElement(
 	const slot = node.getStaticAttributeValue('slot');
 	if (slot && node.hasAncestor('Component')) {
 		const slot = node.attributes.find((attribute: Node) => attribute.name === 'slot');
-		const slotName = slot.value[0].data;
+		const slotName = slot.chunks[0].data;
 		const appendTarget = generator.appendTargets[generator.appendTargets.length - 1];
 		appendTarget.slotStack.push(slotName);
 		appendTarget.slots[slotName] = '';

src/generators/server-side-rendering/visitors/Slot.ts

@@ -9,7 +9,7 @@ export default function visitSlot(
 	node: Node
 ) {
 	const name = node.attributes.find((attribute: Node) => attribute.name);
-	const slotName = name && name.value[0].data || 'default';
+	const slotName = name && name.chunks[0].data || 'default';
 
 	generator.append(`\${options && options.slotted && options.slotted.${slotName} ? options.slotted.${slotName}() : \``);