Skip to content

Commit 5c6e7e8

Browse files
Rich-HarrisRich-Harris
authored
Merge pull request #1555 from fjorgemota/patch-1
Quote name of attribute to nested components
2 parents 6c20d14 + 9a0af96 commit 5c6e7e8

File tree

7 files changed

+99
-20
lines changed

7 files changed

+99
-20
lines changed

‎src/compile/nodes/Component.ts

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import stringifyProps from '../../utils/stringifyProps';
33
import CodeBuilder from '../../utils/CodeBuilder';
44
import getTailSnippet from '../../utils/getTailSnippet';
55
import getObject from '../../utils/getObject';
6-
import { quoteNameIfNecessary } from '../../utils/quoteIfNecessary';
6+
import { quoteNameIfNecessary, quotePropIfNecessary } from '../../utils/quoteIfNecessary';
77
import { escape, escapeTemplate, stringify } from '../../utils/stringify';
88
import Node from './shared/Node';
99
import Block from '../dom/Block';
@@ -145,7 +145,7 @@ export default class Component extends Node {
145145
const attributeObject = usesSpread
146146
? '{}'
147147
: stringifyProps(
148-
this.attributes.map(attr => `${attr.name}: ${attr.getValue()}`)
148+
this.attributes.map(attr => `${quoteNameIfNecessary(attr.name)}: ${attr.getValue()}`)
149149
);
150150

151151
if (this.attributes.length || this.bindings.length) {
@@ -216,7 +216,7 @@ export default class Component extends Node {
216216
updates.push(deindent`
217217
if (${[...attribute.dependencies]
218218
.map(dependency => `changed.${dependency}`)
219-
.join(' || ')}) ${name_changes}.${attribute.name} = ${attribute.getValue()};
219+
.join(' || ')}) ${name_changes}${quotePropIfNecessary(attribute.name)} = ${attribute.getValue()};
220220
`);
221221
}
222222
});
@@ -247,10 +247,10 @@ export default class Component extends Node {
247247

248248
const lhs = binding.value.node.type === 'MemberExpression'
249249
? binding.value.snippet
250-
: `${head}${tail} = childState.${binding.name}`;
250+
: `${head}${tail} = childState${quotePropIfNecessary(binding.name)}`;
251251

252252
setFromChild = deindent`
253-
${lhs} = childState.${binding.name};
253+
${lhs} = childState${quotePropIfNecessary(binding.name)};
254254
255255
${[...binding.value.dependencies]
256256
.map((name: string) => {
@@ -261,7 +261,7 @@ export default class Component extends Node {
261261
if (isStoreProp) hasStoreBindings = true;
262262
else hasLocalBindings = true;
263263
264-
return `${newState}.${prop} = ctx.${name};`;
264+
return `${newState}${quotePropIfNecessary(prop)} = ctx${quotePropIfNecessary(name)};`;
265265
})}
266266
`;
267267
}
@@ -276,32 +276,32 @@ export default class Component extends Node {
276276

277277
if (binding.value.node.type === 'MemberExpression') {
278278
setFromChild = deindent`
279-
${binding.value.snippet} = childState.${binding.name};
280-
${newState}.${prop} = ctx.${key};
279+
${binding.value.snippet} = childState${quotePropIfNecessary(binding.name)};
280+
${newState}${quotePropIfNecessary(prop)} = ctx${quotePropIfNecessary(key)};
281281
`;
282282
}
283283

284284
else {
285-
setFromChild = `${newState}.${prop} = childState.${binding.name};`;
285+
setFromChild = `${newState}${quotePropIfNecessary(prop)} = childState${quotePropIfNecessary(binding.name)};`;
286286
}
287287
}
288288

289289
statements.push(deindent`
290290
if (${binding.value.snippet} !== void 0) {
291-
${name_initial_data}.${binding.name} = ${binding.value.snippet};
292-
${name_updating}.${binding.name} = true;
291+
${name_initial_data}${quotePropIfNecessary(binding.name)} = ${binding.value.snippet};
292+
${name_updating}${quotePropIfNecessary(binding.name)} = true;
293293
}`
294294
);
295295

296296
builder.addConditional(
297-
`!${name_updating}.${binding.name} && changed.${binding.name}`,
297+
`!${name_updating}${quotePropIfNecessary(binding.name)} && changed${quotePropIfNecessary(binding.name)}`,
298298
setFromChild
299299
);
300300

301301
updates.push(deindent`
302-
if (!${name_updating}.${binding.name} && ${[...binding.value.dependencies].map((dependency: string) => `changed.${dependency}`).join(' || ')}) {
303-
${name_changes}.${binding.name} = ${binding.value.snippet};
304-
${name_updating}.${binding.name} = ${binding.value.snippet} !== void 0;
302+
if (!${name_updating}${quotePropIfNecessary(binding.name)} && ${[...binding.value.dependencies].map((dependency: string) => `changed.${dependency}`).join(' || ')}) {
303+
${name_changes}${quotePropIfNecessary(binding.name)} = ${binding.value.snippet};
304+
${name_updating}${quotePropIfNecessary(binding.name)} = ${binding.value.snippet} !== void 0;
305305
}
306306
`);
307307
});
@@ -326,7 +326,7 @@ export default class Component extends Node {
326326

327327
beforecreate = deindent`
328328
#component.root._beforecreate.push(() => {
329-
${name}._bind({ ${this.bindings.map(b => `${b.name}: 1`).join(', ')} }, ${name}.get());
329+
${name}._bind({ ${this.bindings.map(b => `${quoteNameIfNecessary(b.name)}: 1`).join(', ')} }, ${name}.get());
330330
});
331331
`;
332332
}
@@ -524,7 +524,7 @@ export default class Component extends Node {
524524
? getTailSnippet(binding.value.node)
525525
: '';
526526

527-
return `${binding.name}: ctx.${name}${tail}`;
527+
return `${quoteNameIfNecessary(binding.name)}: ctx${quotePropIfNecessary(name)}${tail}`;
528528
});
529529

530530
function getAttributeValue(attribute) {
@@ -552,14 +552,14 @@ export default class Component extends Node {
552552
if (attribute.isSpread) {
553553
return attribute.expression.snippet;
554554
} else {
555-
return `{ ${attribute.name}: ${getAttributeValue(attribute)} }`;
555+
return `{ ${quoteNameIfNecessary(attribute.name)}: ${getAttributeValue(attribute)} }`;
556556
}
557557
})
558558
.concat(bindingProps.map(p => `{ ${p} }`))
559559
.join(', ')
560560
})`
561561
: `{ ${this.attributes
562-
.map(attribute => `${attribute.name}: ${getAttributeValue(attribute)}`)
562+
.map(attribute => `${quoteNameIfNecessary(attribute.name)}: ${getAttributeValue(attribute)}`)
563563
.concat(bindingProps)
564564
.join(', ')} }`;
565565

@@ -590,7 +590,7 @@ export default class Component extends Node {
590590
if (${conditions.reverse().join('&&')}) {
591591
tmp = ${expression}.data();
592592
if ('${name}' in tmp) {
593-
ctx.${binding.name} = tmp.${name};
593+
ctx${quotePropIfNecessary(binding.name)} = tmp.${name};
594594
settled = false;
595595
}
596596
}

‎test/runtime/samples/component-binding-invalid-identifier/Counter.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<button on:click='set({ "x-count": state["x-count"] + 1 })'>+1</button>
2+
3+
<script>
4+
export default {
5+
data: () => ({
6+
"x-count": 0
7+
}),
8+
computed: {
9+
state(arg) {
10+
return arg;
11+
}
12+
}
13+
};
14+
</script>

‎test/runtime/samples/component-binding-invalid-identifier/_config.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
export default {
2+
'skip-ssr': true, // TODO delete this line, once binding works
3+
4+
html: `
5+
<button>+1</button>
6+
<p>count: 0</p>
7+
`,
8+
9+
test ( assert, component, target, window ) {
10+
const click = new window.MouseEvent( 'click' );
11+
const button = target.querySelector( 'button' );
12+
13+
button.dispatchEvent( click );
14+
15+
assert.equal( component.get().x, 1 );
16+
assert.htmlEqual( target.innerHTML, `
17+
<button>+1</button>
18+
<p>count: 1</p>
19+
` );
20+
21+
button.dispatchEvent( click );
22+
23+
assert.equal( component.get().x, 2 );
24+
assert.htmlEqual( target.innerHTML, `
25+
<button>+1</button>
26+
<p>count: 2</p>
27+
` );
28+
}
29+
};

‎test/runtime/samples/component-binding-invalid-identifier/main.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Counter bind:x-count='x'/>
2+
<p>count: {x}</p>
3+
4+
<script>
5+
import Counter from './Counter.html';
6+
7+
export default {
8+
components: {
9+
Counter
10+
}
11+
};
12+
</script>

‎test/runtime/samples/component-invalid-identifier/Widget.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<p>{state["b-c"]}</p>
2+
<script>
3+
export default {
4+
computed: {
5+
state(states) {
6+
return states;
7+
}
8+
}
9+
};
10+
</script>

‎test/runtime/samples/component-invalid-identifier/_config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
html: '<div><p>i am a widget</p></div>'
3+
};

‎test/runtime/samples/component-invalid-identifier/main.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div>
2+
<Widget b-c="i am a widget"/>
3+
</div>
4+
5+
<script>
6+
import Widget from './Widget.html';
7+
8+
export default {
9+
components: { Widget }
10+
};
11+
</script>

0 commit comments

Comments
 (0)