Skip to content

Commit bcae68d

Browse files
Rich-HarrisRich-Harris
committed
treat quoted property names the same way as identifiers - fixes #914 
1 parent 4411ab1 commit bcae68d

File tree

10 files changed

+56
-25
lines changed

10 files changed

+56
-25
lines changed

‎src/generators/Generator.ts

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import namespaces from '../utils/namespaces';
1212
import { removeNode, removeObjectKey } from '../utils/removeNode';
1313
import wrapModule from './shared/utils/wrapModule';
1414
import annotateWithScopes from '../utils/annotateWithScopes';
15+
import getName from '../utils/getName';
1516
import clone from '../utils/clone';
1617
import DomBlock from './dom/Block';
1718
import SsrBlock from './server-side-rendering/Block';
@@ -497,13 +498,13 @@ export default class Generator {
497498

498499
if (defaultExport) {
499500
defaultExport.declaration.properties.forEach((prop: Node) => {
500-
templateProperties[prop.key.name] = prop;
501+
templateProperties[getName(prop.key)] = prop;
501502
});
502503

503504
['helpers', 'events', 'components', 'transitions'].forEach(key => {
504505
if (templateProperties[key]) {
505506
templateProperties[key].value.properties.forEach((prop: Node) => {
506-
this[key].add(prop.key.name);
507+
this[key].add(getName(prop.key));
507508
});
508509
}
509510
});
@@ -574,15 +575,15 @@ export default class Generator {
574575

575576
if (templateProperties.components) {
576577
templateProperties.components.value.properties.forEach((property: Node) => {
577-
addDeclaration(property.key.name, property.value, 'components');
578+
addDeclaration(getName(property.key), property.value, 'components');
578579
});
579580
}
580581

581582
if (templateProperties.computed) {
582583
const dependencies = new Map();
583584

584585
templateProperties.computed.value.properties.forEach((prop: Node) => {
585-
const key = prop.key.name;
586+
const key = getName(prop.key);
586587
const value = prop.value;
587588

588589
const deps = value.params.map(
@@ -605,12 +606,12 @@ export default class Generator {
605606

606607
computations.push({ key, deps });
607608

608-
const prop = templateProperties.computed.value.properties.find((prop: Node) => prop.key.name === key);
609+
const prop = templateProperties.computed.value.properties.find((prop: Node) => getName(prop.key) === key);
609610
addDeclaration(key, prop.value, 'computed');
610611
};
611612

612613
templateProperties.computed.value.properties.forEach((prop: Node) =>
613-
visit(prop.key.name)
614+
visit(getName(prop.key))
614615
);
615616
}
616617

@@ -620,13 +621,13 @@ export default class Generator {
620621

621622
if (templateProperties.events && dom) {
622623
templateProperties.events.value.properties.forEach((property: Node) => {
623-
addDeclaration(property.key.name, property.value, 'events');
624+
addDeclaration(getName(property.key), property.value, 'events');
624625
});
625626
}
626627

627628
if (templateProperties.helpers) {
628629
templateProperties.helpers.value.properties.forEach((property: Node) => {
629-
addDeclaration(property.key.name, property.value, 'helpers');
630+
addDeclaration(getName(property.key), property.value, 'helpers');
630631
});
631632
}
632633

@@ -663,7 +664,7 @@ export default class Generator {
663664

664665
if (templateProperties.transitions) {
665666
templateProperties.transitions.value.properties.forEach((property: Node) => {
666-
addDeclaration(property.key.name, property.value, 'transitions');
667+
addDeclaration(getName(property.key), property.value, 'transitions');
667668
});
668669
}
669670
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Block from './Block';
55
import preprocess from './preprocess';
66
import visit from './visit';
77
import { removeNode, removeObjectKey } from '../../utils/removeNode';
8+
import getName from '../../utils/getName';
89
import { Parsed, Node, CompileOptions } from '../../interfaces';
910
import { AppendTarget } from './interfaces';
1011
import { stringify } from '../../utils/stringify';
@@ -132,7 +133,7 @@ export default function ssr(
132133
}
133134
134135
${templateProperties.components.value.properties.map((prop: Node) => {
135-
return `addComponent(%components-${prop.key.name});`;
136+
return `addComponent(%components-${getName(prop.key)});`;
136137
})}
137138
`}
138139

‎src/utils/getName.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { Node } from '../interfaces';
2+
3+
export default function getMethodName(node: Node) {
4+
if (node.type === 'Identifier') return node.name;
5+
if (node.type === 'Literal') return String(node.value);
6+
}

‎src/utils/removeNode.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import MagicString from 'magic-string';
2+
import getName from '../utils/getName';
23
import { Node } from '../interfaces';
34

45
const keys = {
@@ -51,7 +52,7 @@ export function removeObjectKey(code: MagicString, node: Node, key: string) {
5152
let i = node.properties.length;
5253
while (i--) {
5354
const property = node.properties[i];
54-
if (property.key.type === 'Identifier' && property.key.name === key) {
55+
if (property.key.type === 'Identifier' && getName(property.key) === key) {
5556
removeNode(code, node, property);
5657
}
5758
}

‎src/validate/js/index.ts

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import fuzzymatch from '../utils/fuzzymatch';
33
import checkForDupes from './utils/checkForDupes';
44
import checkForComputedKeys from './utils/checkForComputedKeys';
55
import namespaces from '../../utils/namespaces';
6+
import getName from '../../utils/getName';
67
import { Validator } from '../';
78
import { Node } from '../../interfaces';
89

@@ -29,7 +30,7 @@ export default function validateJs(validator: Validator, js: Node) {
2930
const props = validator.properties;
3031

3132
node.declaration.properties.forEach((prop: Node) => {
32-
props.set(prop.key.name, prop);
33+
props.set(getName(prop.key), prop);
3334
});
3435

3536
// Remove these checks in version 2
@@ -49,25 +50,26 @@ export default function validateJs(validator: Validator, js: Node) {
4950

5051
// ensure all exported props are valid
5152
node.declaration.properties.forEach((prop: Node) => {
52-
const propValidator = propValidators[prop.key.name];
53+
const name = getName(prop.key);
54+
const propValidator = propValidators[name];
5355

5456
if (propValidator) {
5557
propValidator(validator, prop);
5658
} else {
57-
const match = fuzzymatch(prop.key.name, validPropList);
59+
const match = fuzzymatch(name, validPropList);
5860
if (match) {
5961
validator.error(
60-
`Unexpected property '${prop.key.name}' (did you mean '${match}'?)`,
62+
`Unexpected property '${name}' (did you mean '${match}'?)`,
6163
prop.start
6264
);
6365
} else if (/FunctionExpression/.test(prop.value.type)) {
6466
validator.error(
65-
`Unexpected property '${prop.key.name}' (did you mean to include it in 'methods'?)`,
67+
`Unexpected property '${name}' (did you mean to include it in 'methods'?)`,
6668
prop.start
6769
);
6870
} else {
6971
validator.error(
70-
`Unexpected property '${prop.key.name}'`,
72+
`Unexpected property '${name}'`,
7173
prop.start
7274
);
7375
}
@@ -86,7 +88,7 @@ export default function validateJs(validator: Validator, js: Node) {
8688
['components', 'methods', 'helpers', 'transitions'].forEach(key => {
8789
if (validator.properties.has(key)) {
8890
validator.properties.get(key).value.properties.forEach((prop: Node) => {
89-
validator[key].set(prop.key.name, prop.value);
91+
validator[key].set(getName(prop.key), prop.value);
9092
});
9193
}
9294
});

‎src/validate/js/propValidators/components.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import checkForDupes from '../utils/checkForDupes';
22
import checkForComputedKeys from '../utils/checkForComputedKeys';
3+
import getName from '../../../utils/getName';
34
import { Validator } from '../../';
45
import { Node } from '../../../interfaces';
56

@@ -16,14 +17,16 @@ export default function components(validator: Validator, prop: Node) {
1617
checkForComputedKeys(validator, prop.value.properties);
1718

1819
prop.value.properties.forEach((component: Node) => {
19-
if (component.key.name === 'state') {
20+
const name = getName(component.key);
21+
22+
if (name === 'state') {
2023
validator.error(
2124
`Component constructors cannot be called 'state' due to technical limitations`,
2225
component.start
2326
);
2427
}
2528

26-
if (!/^[A-Z]/.test(component.key.name)) {
29+
if (!/^[A-Z]/.test(name)) {
2730
validator.warn(`Component names should be capitalised`, component.start);
2831
}
2932
});

‎src/validate/js/propValidators/methods.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import checkForAccessors from '../utils/checkForAccessors';
22
import checkForDupes from '../utils/checkForDupes';
33
import checkForComputedKeys from '../utils/checkForComputedKeys';
44
import usesThisOrArguments from '../utils/usesThisOrArguments';
5+
import getName from '../../../utils/getName';
56
import { Validator } from '../../';
67
import { Node } from '../../../interfaces';
78

@@ -21,9 +22,11 @@ export default function methods(validator: Validator, prop: Node) {
2122
checkForComputedKeys(validator, prop.value.properties);
2223

2324
prop.value.properties.forEach((prop: Node) => {
24-
if (builtin.has(prop.key.name)) {
25+
const name = getName(prop.key);
26+
27+
if (builtin.has(name)) {
2528
validator.error(
26-
`Cannot overwrite built-in method '${prop.key.name}'`,
29+
`Cannot overwrite built-in method '${name}'`,
2730
prop.start
2831
);
2932
}

‎src/validate/js/utils/checkForDupes.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Validator } from '../../';
22
import { Node } from '../../../interfaces';
3+
import getName from '../../../utils/getName';
34

45
export default function checkForDupes(
56
validator: Validator,
@@ -8,10 +9,12 @@ export default function checkForDupes(
89
const seen = new Set();
910

1011
properties.forEach(prop => {
11-
if (seen.has(prop.key.name)) {
12-
validator.error(`Duplicate property '${prop.key.name}'`, prop.start);
12+
const name = getName(prop.key);
13+
14+
if (seen.has(name)) {
15+
validator.error(`Duplicate property '${name}'`, prop.start);
1316
}
1417

15-
seen.add(prop.key.name);
18+
seen.add(name);
1619
});
1720
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
[]

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<button on:click='foo()'></button>
2+
3+
<script>
4+
export default {
5+
methods: {
6+
'foo': () => {},
7+
'bar': () => {}
8+
}
9+
};
10+
</script>

0 commit comments

Comments
 (0)