diff --git a/src/generators/Generator.ts b/src/generators/Generator.ts
index 6e78d0fc74..8f2dad24e4 100644
--- a/src/generators/Generator.ts
+++ b/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,7 +575,7 @@ 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');
});
}
@@ -582,7 +583,7 @@ export default class Generator {
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');
});
}
}
diff --git a/src/generators/server-side-rendering/index.ts b/src/generators/server-side-rendering/index.ts
index 5e6bd25d8d..b4590df95d 100644
--- a/src/generators/server-side-rendering/index.ts
+++ b/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)});`;
})}
`}
diff --git a/src/utils/getName.ts b/src/utils/getName.ts
new file mode 100644
index 0000000000..d236bbaec8
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/utils/removeNode.ts b/src/utils/removeNode.ts
index 6abea2f8c9..26095b483c 100644
--- a/src/utils/removeNode.ts
+++ b/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);
}
}
diff --git a/src/validate/js/index.ts b/src/validate/js/index.ts
index 01754b7d00..be120c5a4a 100644
--- a/src/validate/js/index.ts
+++ b/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);
});
}
});
diff --git a/src/validate/js/propValidators/components.ts b/src/validate/js/propValidators/components.ts
index a7ca5eb990..7d46470d0b 100644
--- a/src/validate/js/propValidators/components.ts
+++ b/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);
}
});
diff --git a/src/validate/js/propValidators/methods.ts b/src/validate/js/propValidators/methods.ts
index 7d8547ef39..66fd27eea1 100644
--- a/src/validate/js/propValidators/methods.ts
+++ b/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
);
}
diff --git a/src/validate/js/utils/checkForDupes.ts b/src/validate/js/utils/checkForDupes.ts
index 8565ab5388..0473d7a265 100644
--- a/src/validate/js/utils/checkForDupes.ts
+++ b/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);
});
}
diff --git a/test/validator/samples/method-quoted/errors.json b/test/validator/samples/method-quoted/errors.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/samples/method-quoted/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/samples/method-quoted/input.html b/test/validator/samples/method-quoted/input.html
new file mode 100644
index 0000000000..790276eebc
--- /dev/null
+++ b/test/validator/samples/method-quoted/input.html
@@ -0,0 +1,10 @@
+
+
+
\ No newline at end of file