Skip to content

Commit 3c99785

Browse files
Rich-HarrisRich-Harris
committed
Merge branch 'master' into gh-1434 
2 parents b5945e1 + 3cf60cb commit 3c99785

File tree

36 files changed

+520
-201
lines changed

36 files changed

+520
-201
lines changed

‎src/compile/render-ssr/handlers/Element.ts

+10
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,16 @@ export default function(node, renderer, options) {
120120
});
121121
}
122122

123+
node.bindings.forEach(binding => {
124+
const { name, value: { snippet } } = binding;
125+
126+
if (name === 'group') {
127+
// TODO server-render group bindings
128+
} else {
129+
openingTag += ' ${(v => v ? ("' + name + '" + (v === true ? "" : "=" + JSON.stringify(v))) : "")(' + snippet + ')}';
130+
}
131+
});
132+
123133
if (addClassAttribute) {
124134
openingTag += `\${((v) => v ? ' class="' + v + '"' : '')([${classExpr}].join(' ').trim())}`;
125135
}

‎test/runtime/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ describe("runtime", () => {
165165
});
166166
} else {
167167
component.destroy();
168-
assert.equal(target.innerHTML, "");
168+
assert.htmlEqual(target.innerHTML, "");
169169
}
170170
})
171171
.catch(err => {

‎test/runtime/samples/binding-input-checkbox-deep-contextual/_config.js

+22-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,28 @@ export default {
88
},
99

1010
html: `
11-
<div><input type="checkbox"><p>one</p></div><div><input type="checkbox"><p>two</p></div><div><input type="checkbox"><p>three</p></div>
11+
<div>
12+
<input type="checkbox"><p>one</p>
13+
</div>
14+
<div>
15+
<input type="checkbox"><p>two</p>
16+
</div>
17+
<div>
18+
<input type="checkbox"><p>three</p>
19+
</div>
20+
<p>1 completed</p>
21+
`,
22+
23+
ssrHtml: `
24+
<div>
25+
<input type="checkbox" checked><p>one</p>
26+
</div>
27+
<div>
28+
<input type="checkbox"><p>two</p>
29+
</div>
30+
<div>
31+
<input type="checkbox"><p>three</p>
32+
</div>
1233
<p>1 completed</p>
1334
`,
1435

‎test/runtime/samples/binding-input-checkbox/_config.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,15 @@ export default {
33
foo: true
44
},
55

6-
html: `<input type="checkbox">\n<p>true</p>`,
6+
html: `
7+
<input type="checkbox">
8+
<p>true</p>
9+
`,
10+
11+
ssrHtml: `
12+
<input type="checkbox" checked>
13+
<p>true</p>
14+
`,
715

816
test ( assert, component, target, window ) {
917
const input = target.querySelector( 'input' );

‎test/runtime/samples/binding-input-number/_config.js

+23-18
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,48 @@
11
export default {
22
data: {
3-
count: 42
3+
count: 42,
44
},
55

66
html: `
7-
<input type='number'>
7+
<input type=number>
88
<p>number 42</p>
99
`,
1010

11-
test ( assert, component, target, window ) {
12-
const input = target.querySelector( 'input' );
13-
assert.equal( input.value, '42' );
11+
ssrHtml: `
12+
<input type=number value=42>
13+
<p>number 42</p>
14+
`,
1415

15-
const event = new window.Event( 'input' );
16+
test(assert, component, target, window) {
17+
const input = target.querySelector('input');
18+
assert.equal(input.value, '42');
19+
20+
const event = new window.Event('input');
1621

1722
input.value = '43';
18-
input.dispatchEvent( event );
23+
input.dispatchEvent(event);
1924

20-
assert.equal( component.get().count, 43 );
21-
assert.htmlEqual( target.innerHTML, `
25+
assert.equal(component.get().count, 43);
26+
assert.htmlEqual(target.innerHTML, `
2227
<input type='number'>
2328
<p>number 43</p>
24-
` );
29+
`);
2530

2631
component.set({ count: 44 });
27-
assert.equal( input.value, '44' );
28-
assert.htmlEqual( target.innerHTML, `
32+
assert.equal(input.value, '44');
33+
assert.htmlEqual(target.innerHTML, `
2934
<input type='number'>
3035
<p>number 44</p>
31-
` );
36+
`);
3237

3338
// empty string should be treated as undefined
3439
input.value = '';
35-
input.dispatchEvent( event );
40+
input.dispatchEvent(event);
3641

37-
assert.equal( component.get().count, undefined );
38-
assert.htmlEqual( target.innerHTML, `
42+
assert.equal(component.get().count, undefined);
43+
assert.htmlEqual(target.innerHTML, `
3944
<input type='number'>
4045
<p>undefined undefined</p>
41-
` );
42-
}
46+
`);
47+
},
4348
};

‎test/runtime/samples/binding-input-range-change/_config.js

+19-14
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,38 @@
11
export default {
22
data: {
3-
count: 42
3+
count: 42,
44
},
55

66
html: `
7-
<input type='range'>
7+
<input type=range>
88
<p>number 42</p>
99
`,
1010

11-
test ( assert, component, target, window ) {
12-
const input = target.querySelector( 'input' );
13-
assert.equal( input.value, '42' );
11+
ssrHtml: `
12+
<input type=range value=42>
13+
<p>number 42</p>
14+
`,
1415

15-
const event = new window.Event( 'change' );
16+
test(assert, component, target, window) {
17+
const input = target.querySelector('input');
18+
assert.equal(input.value, '42');
19+
20+
const event = new window.Event('change');
1621

1722
input.value = '43';
18-
input.dispatchEvent( event );
23+
input.dispatchEvent(event);
1924

20-
assert.equal( component.get().count, 43 );
21-
assert.htmlEqual( target.innerHTML, `
25+
assert.equal(component.get().count, 43);
26+
assert.htmlEqual(target.innerHTML, `
2227
<input type='range'>
2328
<p>number 43</p>
24-
` );
29+
`);
2530

2631
component.set({ count: 44 });
27-
assert.equal( input.value, '44' );
28-
assert.htmlEqual( target.innerHTML, `
32+
assert.equal(input.value, '44');
33+
assert.htmlEqual(target.innerHTML, `
2934
<input type='range'>
3035
<p>number 44</p>
31-
` );
32-
}
36+
`);
37+
},
3338
};

‎test/runtime/samples/binding-input-range/_config.js

+19-14
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,38 @@
11
export default {
22
data: {
3-
count: 42
3+
count: 42,
44
},
55

66
html: `
7-
<input type='range'>
7+
<input type=range>
88
<p>number 42</p>
99
`,
1010

11-
test ( assert, component, target, window ) {
12-
const input = target.querySelector( 'input' );
13-
assert.equal( input.value, '42' );
11+
ssrHtml: `
12+
<input type=range value=42>
13+
<p>number 42</p>
14+
`,
1415

15-
const event = new window.Event( 'input' );
16+
test(assert, component, target, window) {
17+
const input = target.querySelector('input');
18+
assert.equal(input.value, '42');
19+
20+
const event = new window.Event('input');
1621

1722
input.value = '43';
18-
input.dispatchEvent( event );
23+
input.dispatchEvent(event);
1924

20-
assert.equal( component.get().count, 43 );
21-
assert.htmlEqual( target.innerHTML, `
25+
assert.equal(component.get().count, 43);
26+
assert.htmlEqual(target.innerHTML, `
2227
<input type='range'>
2328
<p>number 43</p>
24-
` );
29+
`);
2530

2631
component.set({ count: 44 });
27-
assert.equal( input.value, '44' );
28-
assert.htmlEqual( target.innerHTML, `
32+
assert.equal(input.value, '44');
33+
assert.htmlEqual(target.innerHTML, `
2934
<input type='range'>
3035
<p>number 44</p>
31-
` );
32-
}
36+
`);
37+
},
3338
};

‎test/runtime/samples/binding-input-text-contextual/_config.js

+56-16
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,69 @@
11
export default {
22
data: {
3-
items: [
4-
'one',
5-
'two',
6-
'three'
7-
]
3+
items: ['one', 'two', 'three'],
84
},
9-
html: `<div><input><p>one</p></div><div><input><p>two</p></div><div><input><p>three</p></div><!---->`,
10-
test ( assert, component, target, window ) {
11-
const inputs = [ ...target.querySelectorAll( 'input' ) ];
5+
6+
html: `
7+
<div>
8+
<input><p>one</p>
9+
</div>
10+
<div>
11+
<input><p>two</p>
12+
</div>
13+
<div>
14+
<input><p>three</p>
15+
</div>
16+
`,
17+
18+
ssrHtml: `
19+
<div>
20+
<input value=one><p>one</p>
21+
</div>
22+
<div>
23+
<input value=two><p>two</p>
24+
</div>
25+
<div>
26+
<input value=three><p>three</p>
27+
</div>
28+
`,
29+
30+
test(assert, component, target, window) {
31+
const inputs = [...target.querySelectorAll('input')];
1232
const items = component.get().items;
13-
const event = new window.Event( 'input' );
33+
const event = new window.Event('input');
1434

15-
assert.equal( inputs[0].value, 'one' );
35+
assert.equal(inputs[0].value, 'one');
1636

1737
inputs[1].value = 'four';
18-
inputs[1].dispatchEvent( event );
38+
inputs[1].dispatchEvent(event);
1939

20-
assert.equal( items[1], 'four' );
21-
assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>three</p></div><!---->` );
40+
assert.equal(items[1], 'four');
41+
assert.htmlEqual(target.innerHTML, `
42+
<div>
43+
<input><p>one</p>
44+
</div>
45+
<div>
46+
<input><p>four</p>
47+
</div>
48+
<div>
49+
<input><p>three</p>
50+
</div>
51+
`);
2252

2353
items[2] = 'five';
2454

2555
component.set({ items });
26-
assert.equal( inputs[2].value, 'five' );
27-
assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>five</p></div><!---->` );
28-
}
56+
assert.equal(inputs[2].value, 'five');
57+
assert.htmlEqual(target.innerHTML, `
58+
<div>
59+
<input><p>one</p>
60+
</div>
61+
<div>
62+
<input><p>four</p>
63+
</div>
64+
<div>
65+
<input><p>five</p>
66+
</div>
67+
`);
68+
},
2969
};

‎test/runtime/samples/binding-input-text-deconflicted/_config.js

+19-14
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,40 @@
11
export default {
22
data: {
33
component: {
4-
name: 'world'
5-
}
4+
name: 'world',
5+
},
66
},
77

88
html: `
99
<h1>Hello world!</h1>
1010
<input>
1111
`,
1212

13-
test ( assert, component, target, window ) {
14-
const input = target.querySelector( 'input' );
15-
assert.equal( input.value, 'world' );
13+
ssrHtml: `
14+
<h1>Hello world!</h1>
15+
<input value=world>
16+
`,
1617

17-
const event = new window.Event( 'input' );
18+
test(assert, component, target, window) {
19+
const input = target.querySelector('input');
20+
assert.equal(input.value, 'world');
21+
22+
const event = new window.Event('input');
1823

1924
input.value = 'everybody';
20-
input.dispatchEvent( event );
25+
input.dispatchEvent(event);
2126

22-
assert.equal( input.value, 'everybody' );
23-
assert.htmlEqual( target.innerHTML, `
27+
assert.equal(input.value, 'everybody');
28+
assert.htmlEqual(target.innerHTML, `
2429
<h1>Hello everybody!</h1>
2530
<input>
26-
` );
31+
`);
2732

2833
component.set({ component: { name: 'goodbye' } });
29-
assert.equal( input.value, 'goodbye' );
30-
assert.htmlEqual( target.innerHTML, `
34+
assert.equal(input.value, 'goodbye');
35+
assert.htmlEqual(target.innerHTML, `
3136
<h1>Hello goodbye!</h1>
3237
<input>
33-
` );
34-
}
38+
`);
39+
},
3540
};

0 commit comments

Comments
 (0)