treat quoted property names the same way as identifiers -

src/generators/Generator.ts

@@ -12,6 +12,7 @@ import namespaces from '../utils/namespaces';
 import { removeNode, removeObjectKey } from '../utils/removeNode';
 import wrapModule from './shared/utils/wrapModule';
 import annotateWithScopes from '../utils/annotateWithScopes';
+import getName from '../utils/getName';
 import clone from '../utils/clone';
 import DomBlock from './dom/Block';
 import SsrBlock from './server-side-rendering/Block';
@@ -497,13 +498,13 @@ export default class Generator {
 
 			if (defaultExport) {
 				defaultExport.declaration.properties.forEach((prop: Node) => {
-					templateProperties[prop.key.name] = prop;
+					templateProperties[getName(prop.key)] = prop;
 				});
 
 				['helpers', 'events', 'components', 'transitions'].forEach(key => {
 					if (templateProperties[key]) {
 						templateProperties[key].value.properties.forEach((prop: Node) => {
-							this[key].add(prop.key.name);
+							this[key].add(getName(prop.key));
 						});
 					}
 				});
@@ -574,15 +575,15 @@ export default class Generator {
 
 				if (templateProperties.components) {
 					templateProperties.components.value.properties.forEach((property: Node) => {
-						addDeclaration(property.key.name, property.value, 'components');
+						addDeclaration(getName(property.key), property.value, 'components');
 					});
 				}
 
 				if (templateProperties.computed) {
 					const dependencies = new Map();
 
 					templateProperties.computed.value.properties.forEach((prop: Node) => {
-						const key = prop.key.name;
+						const key = getName(prop.key);
 						const value = prop.value;
 
 						const deps = value.params.map(
@@ -605,12 +606,12 @@ export default class Generator {
 
 						computations.push({ key, deps });
 
-						const prop = templateProperties.computed.value.properties.find((prop: Node) => prop.key.name === key);
+						const prop = templateProperties.computed.value.properties.find((prop: Node) => getName(prop.key) === key);
 						addDeclaration(key, prop.value, 'computed');
 					};
 
 					templateProperties.computed.value.properties.forEach((prop: Node) =>
-						visit(prop.key.name)
+						visit(getName(prop.key))
 					);
 				}
 
@@ -620,13 +621,13 @@ export default class Generator {
 
 				if (templateProperties.events && dom) {
 					templateProperties.events.value.properties.forEach((property: Node) => {
-						addDeclaration(property.key.name, property.value, 'events');
+						addDeclaration(getName(property.key), property.value, 'events');
 					});
 				}
 
 				if (templateProperties.helpers) {
 					templateProperties.helpers.value.properties.forEach((property: Node) => {
-						addDeclaration(property.key.name, property.value, 'helpers');
+						addDeclaration(getName(property.key), property.value, 'helpers');
 					});
 				}
 
@@ -663,7 +664,7 @@ export default class Generator {
 
 				if (templateProperties.transitions) {
 					templateProperties.transitions.value.properties.forEach((property: Node) => {
-						addDeclaration(property.key.name, property.value, 'transitions');
+						addDeclaration(getName(property.key), property.value, 'transitions');
 					});
 				}
 			}

src/generators/server-side-rendering/index.ts

@@ -5,6 +5,7 @@ import Block from './Block';
 import preprocess from './preprocess';
 import visit from './visit';
 import { removeNode, removeObjectKey } from '../../utils/removeNode';
+import getName from '../../utils/getName';
 import { Parsed, Node, CompileOptions } from '../../interfaces';
 import { AppendTarget } from './interfaces';
 import { stringify } from '../../utils/stringify';
@@ -132,7 +133,7 @@ export default function ssr(
 				}
 
 				${templateProperties.components.value.properties.map((prop: Node) => {
-					return `addComponent(%components-${prop.key.name});`;
+					return `addComponent(%components-${getName(prop.key)});`;
 				})}
 			`}
 

src/utils/getName.ts

@@ -0,0 +1,6 @@
+import { Node } from '../interfaces';
+
+export default function getMethodName(node: Node) {
+	if (node.type === 'Identifier') return node.name;
+	if (node.type === 'Literal') return String(node.value);
+}

src/utils/removeNode.ts

@@ -1,4 +1,5 @@
 import MagicString from 'magic-string';
+import getName from '../utils/getName';
 import { Node } from '../interfaces';
 
 const keys = {
@@ -51,7 +52,7 @@ export function removeObjectKey(code: MagicString, node: Node, key: string) {
 	let i = node.properties.length;
 	while (i--) {
 		const property = node.properties[i];
-		if (property.key.type === 'Identifier' && property.key.name === key) {
+		if (property.key.type === 'Identifier' && getName(property.key) === key) {
 			removeNode(code, node, property);
 		}
 	}

src/validate/js/index.ts

@@ -3,6 +3,7 @@ import fuzzymatch from '../utils/fuzzymatch';
 import checkForDupes from './utils/checkForDupes';
 import checkForComputedKeys from './utils/checkForComputedKeys';
 import namespaces from '../../utils/namespaces';
+import getName from '../../utils/getName';
 import { Validator } from '../';
 import { Node } from '../../interfaces';
 
@@ -29,7 +30,7 @@ export default function validateJs(validator: Validator, js: Node) {
 			const props = validator.properties;
 
 			node.declaration.properties.forEach((prop: Node) => {
-				props.set(prop.key.name, prop);
+				props.set(getName(prop.key), prop);
 			});
 
 			// Remove these checks in version 2
@@ -49,25 +50,26 @@ export default function validateJs(validator: Validator, js: Node) {
 
 			// ensure all exported props are valid
 			node.declaration.properties.forEach((prop: Node) => {
-				const propValidator = propValidators[prop.key.name];
+				const name = getName(prop.key);
+				const propValidator = propValidators[name];
 
 				if (propValidator) {
 					propValidator(validator, prop);
 				} else {
-					const match = fuzzymatch(prop.key.name, validPropList);
+					const match = fuzzymatch(name, validPropList);
 					if (match) {
 						validator.error(
-							`Unexpected property '${prop.key.name}' (did you mean '${match}'?)`,
+							`Unexpected property '${name}' (did you mean '${match}'?)`,
 							prop.start
 						);
 					} else if (/FunctionExpression/.test(prop.value.type)) {
 						validator.error(
-							`Unexpected property '${prop.key.name}' (did you mean to include it in 'methods'?)`,
+							`Unexpected property '${name}' (did you mean to include it in 'methods'?)`,
 							prop.start
 						);
 					} else {
 						validator.error(
-							`Unexpected property '${prop.key.name}'`,
+							`Unexpected property '${name}'`,
 							prop.start
 						);
 					}
@@ -86,7 +88,7 @@ export default function validateJs(validator: Validator, js: Node) {
 	['components', 'methods', 'helpers', 'transitions'].forEach(key => {
 		if (validator.properties.has(key)) {
 			validator.properties.get(key).value.properties.forEach((prop: Node) => {
-				validator[key].set(prop.key.name, prop.value);
+				validator[key].set(getName(prop.key), prop.value);
 			});
 		}
 	});

src/validate/js/propValidators/components.ts

@@ -1,5 +1,6 @@
 import checkForDupes from '../utils/checkForDupes';
 import checkForComputedKeys from '../utils/checkForComputedKeys';
+import getName from '../../../utils/getName';
 import { Validator } from '../../';
 import { Node } from '../../../interfaces';
 
@@ -16,14 +17,16 @@ export default function components(validator: Validator, prop: Node) {
 	checkForComputedKeys(validator, prop.value.properties);
 
 	prop.value.properties.forEach((component: Node) => {
-		if (component.key.name === 'state') {
+		const name = getName(component.key);
+
+		if (name === 'state') {
 			validator.error(
 				`Component constructors cannot be called 'state' due to technical limitations`,
 				component.start
 			);
 		}
 
-		if (!/^[A-Z]/.test(component.key.name)) {
+		if (!/^[A-Z]/.test(name)) {
 			validator.warn(`Component names should be capitalised`, component.start);
 		}
 	});

src/validate/js/propValidators/methods.ts

@@ -2,6 +2,7 @@ import checkForAccessors from '../utils/checkForAccessors';
 import checkForDupes from '../utils/checkForDupes';
 import checkForComputedKeys from '../utils/checkForComputedKeys';
 import usesThisOrArguments from '../utils/usesThisOrArguments';
+import getName from '../../../utils/getName';
 import { Validator } from '../../';
 import { Node } from '../../../interfaces';
 
@@ -21,9 +22,11 @@ export default function methods(validator: Validator, prop: Node) {
 	checkForComputedKeys(validator, prop.value.properties);
 
 	prop.value.properties.forEach((prop: Node) => {
-		if (builtin.has(prop.key.name)) {
+		const name = getName(prop.key);
+
+		if (builtin.has(name)) {
 			validator.error(
-				`Cannot overwrite built-in method '${prop.key.name}'`,
+				`Cannot overwrite built-in method '${name}'`,
 				prop.start
 			);
 		}

src/validate/js/utils/checkForDupes.ts

@@ -1,5 +1,6 @@
 import { Validator } from '../../';
 import { Node } from '../../../interfaces';
+import getName from '../../../utils/getName';
 
 export default function checkForDupes(
 	validator: Validator,
@@ -8,10 +9,12 @@ export default function checkForDupes(
 	const seen = new Set();
 
 	properties.forEach(prop => {
-		if (seen.has(prop.key.name)) {
-			validator.error(`Duplicate property '${prop.key.name}'`, prop.start);
+		const name = getName(prop.key);
+
+		if (seen.has(name)) {
+			validator.error(`Duplicate property '${name}'`, prop.start);
 		}
 
-		seen.add(prop.key.name);
+		seen.add(name);
 	});
 }

test/validator/samples/method-quoted/errors.json

@@ -0,0 +1 @@
+[]

test/validator/samples/method-quoted/input.html

@@ -0,0 +1,10 @@
+<button on:click='foo()'></button>
+
+<script>
+	export default {
+		methods: {
+			'foo': () => {},
+			'bar': () => {}
+		}
+	};
+</script>