msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

render server bindings

Browse Source
pull/1812/head
Rich Harris 7 years ago
parent 5f51856f86
commit 837d248257
36 changed files with 520 additions and 201 deletions

10
src/compile/render-ssr/handlers/Element.ts
Unescape View File

@ -112,6 +112,16 @@ export default function(node, renderer, options) {
});
}
node.bindings.forEach(binding => {
const { name, value: { snippet } } = binding;
if (name === 'group') {
// TODO server-render group bindings
} else {
openingTag += ' ${(v => v ? ("' + name + '" + (v === true ? "" : "=" + JSON.stringify(v))) : "")(' + snippet + ')}';
}
});
if (addClassAttribute) {
openingTag += `\${((v) => v ? ' class="' + v + '"' : '')([${classExpr}].join(' ').trim())}`;
}

2
test/runtime/index.js
Unescape View File

@ -165,7 +165,7 @@ describe("runtime", () => {
});
} else {
component.destroy();
assert.equal(target.innerHTML, "");
assert.htmlEqual(target.innerHTML, "");
}
})
.catch(err => {

23
test/runtime/samples/binding-input-checkbox-deep-contextual/_config.js
Unescape View File

@ -8,7 +8,28 @@ export default {
},
html: `
<div><input type="checkbox"><p>one</p></div><div><input type="checkbox"><p>two</p></div><div><input type="checkbox"><p>three</p></div>
<div>
<input type="checkbox"><p>one</p>
</div>
<div>
<input type="checkbox"><p>two</p>
</div>
<div>
<input type="checkbox"><p>three</p>
</div>
<p>1 completed</p>
`,
ssrHtml: `
<div>
<input type="checkbox" checked><p>one</p>
</div>
<div>
<input type="checkbox"><p>two</p>
</div>
<div>
<input type="checkbox"><p>three</p>
</div>
<p>1 completed</p>
`,

10
test/runtime/samples/binding-input-checkbox/_config.js
Unescape View File

@ -3,7 +3,15 @@ export default {
foo: true
},
html: `<input type="checkbox">\n<p>true</p>`,
html: `
<input type="checkbox">
<p>true</p>
`,
ssrHtml: `
<input type="checkbox" checked>
<p>true</p>
`,
test ( assert, component, target, window ) {
const input = target.querySelector( 'input' );

41
test/runtime/samples/binding-input-number/_config.js
Unescape View File

@ -1,43 +1,48 @@
export default {
data: {
count: 42
count: 42,
},
html: `
<input type='number'>
<input type=number>
<p>number 42</p>
`,
test ( assert, component, target, window ) {
const input = target.querySelector( 'input' );
assert.equal( input.value, '42' );
ssrHtml: `
<input type=number value=42>
<p>number 42</p>
`,
const event = new window.Event( 'input' );
test(assert, component, target, window) {
const input = target.querySelector('input');
assert.equal(input.value, '42');
const event = new window.Event('input');
input.value = '43';
input.dispatchEvent( event );
input.dispatchEvent(event);
assert.equal( component.get().count, 43 );
assert.htmlEqual( target.innerHTML, `
assert.equal(component.get().count, 43);
assert.htmlEqual(target.innerHTML, `
<input type='number'>
<p>number 43</p>
` );
`);
component.set({ count: 44 });
assert.equal( input.value, '44' );
assert.htmlEqual( target.innerHTML, `
assert.equal(input.value, '44');
assert.htmlEqual(target.innerHTML, `
<input type='number'>
<p>number 44</p>
` );
`);
// empty string should be treated as undefined
input.value = '';
input.dispatchEvent( event );
input.dispatchEvent(event);
assert.equal( component.get().count, undefined );
assert.htmlEqual( target.innerHTML, `
assert.equal(component.get().count, undefined);
assert.htmlEqual(target.innerHTML, `
<input type='number'>
<p>undefined undefined</p>
` );
}
`);
},
};

33
test/runtime/samples/binding-input-range-change/_config.js
Unescape View File

@ -1,33 +1,38 @@
export default {
data: {
count: 42
count: 42,
},
html: `
<input type='range'>
<input type=range>
<p>number 42</p>
`,
test ( assert, component, target, window ) {
const input = target.querySelector( 'input' );
assert.equal( input.value, '42' );
ssrHtml: `
<input type=range value=42>
<p>number 42</p>
`,
const event = new window.Event( 'change' );
test(assert, component, target, window) {
const input = target.querySelector('input');
assert.equal(input.value, '42');
const event = new window.Event('change');
input.value = '43';
input.dispatchEvent( event );
input.dispatchEvent(event);
assert.equal( component.get().count, 43 );
assert.htmlEqual( target.innerHTML, `
assert.equal(component.get().count, 43);
assert.htmlEqual(target.innerHTML, `
<input type='range'>
<p>number 43</p>
` );
`);
component.set({ count: 44 });
assert.equal( input.value, '44' );
assert.htmlEqual( target.innerHTML, `
assert.equal(input.value, '44');
assert.htmlEqual(target.innerHTML, `
<input type='range'>
<p>number 44</p>
` );
}
`);
},
};

33
test/runtime/samples/binding-input-range/_config.js
Unescape View File

@ -1,33 +1,38 @@
export default {
data: {
count: 42
count: 42,
},
html: `
<input type='range'>
<input type=range>
<p>number 42</p>
`,
test ( assert, component, target, window ) {
const input = target.querySelector( 'input' );
assert.equal( input.value, '42' );
ssrHtml: `
<input type=range value=42>
<p>number 42</p>
`,
const event = new window.Event( 'input' );
test(assert, component, target, window) {
const input = target.querySelector('input');
assert.equal(input.value, '42');
const event = new window.Event('input');
input.value = '43';
input.dispatchEvent( event );
input.dispatchEvent(event);
assert.equal( component.get().count, 43 );
assert.htmlEqual( target.innerHTML, `
assert.equal(component.get().count, 43);
assert.htmlEqual(target.innerHTML, `
<input type='range'>
<p>number 43</p>
` );
`);
component.set({ count: 44 });
assert.equal( input.value, '44' );
assert.htmlEqual( target.innerHTML, `
assert.equal(input.value, '44');
assert.htmlEqual(target.innerHTML, `
<input type='range'>
<p>number 44</p>
` );
}
`);
},
};

72
test/runtime/samples/binding-input-text-contextual/_config.js
Unescape View File

@ -1,29 +1,69 @@
export default {
data: {
items: [
'one',
'two',
'three'
]
items: ['one', 'two', 'three'],
},
html: `<div><input><p>one</p></div><div><input><p>two</p></div><div><input><p>three</p></div><!---->`,
test ( assert, component, target, window ) {
const inputs = [ ...target.querySelectorAll( 'input' ) ];
html: `
<div>
<input><p>one</p>
</div>
<div>
<input><p>two</p>
</div>
<div>
<input><p>three</p>
</div>
`,
ssrHtml: `
<div>
<input value=one><p>one</p>
</div>
<div>
<input value=two><p>two</p>
</div>
<div>
<input value=three><p>three</p>
</div>
`,
test(assert, component, target, window) {
const inputs = [...target.querySelectorAll('input')];
const items = component.get().items;
const event = new window.Event( 'input' );
const event = new window.Event('input');
assert.equal( inputs[0].value, 'one' );
assert.equal(inputs[0].value, 'one');
inputs[1].value = 'four';
inputs[1].dispatchEvent( event );
inputs[1].dispatchEvent(event);
assert.equal( items[1], 'four' );
assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>three</p></div><!---->` );
assert.equal(items[1], 'four');
assert.htmlEqual(target.innerHTML, `
<div>
<input><p>one</p>
</div>
<div>
<input><p>four</p>
</div>
<div>
<input><p>three</p>
</div>
`);
items[2] = 'five';
component.set({ items });
assert.equal( inputs[2].value, 'five' );
assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>five</p></div><!---->` );
}
assert.equal(inputs[2].value, 'five');
assert.htmlEqual(target.innerHTML, `
<div>
<input><p>one</p>
</div>
<div>
<input><p>four</p>
</div>
<div>
<input><p>five</p>
</div>
`);
},
};

33
test/runtime/samples/binding-input-text-deconflicted/_config.js
Unescape View File

@ -1,8 +1,8 @@
export default {
data: {
component: {
name: 'world'
}
name: 'world',
},
},
html: `
@ -10,26 +10,31 @@ export default {
<input>
`,
test ( assert, component, target, window ) {
const input = target.querySelector( 'input' );
assert.equal( input.value, 'world' );
ssrHtml: `
<h1>Hello world!</h1>
<input value=world>
`,
const event = new window.Event( 'input' );
test(assert, component, target, window) {
const input = target.querySelector('input');
assert.equal(input.value, 'world');
const event = new window.Event('input');
input.value = 'everybody';
input.dispatchEvent( event );
input.dispatchEvent(event);
assert.equal( input.value, 'everybody' );
assert.htmlEqual( target.innerHTML, `
assert.equal(input.value, 'everybody');
assert.htmlEqual(target.innerHTML, `
<h1>Hello everybody!</h1>
<input>
` );
`);
component.set({ component: { name: 'goodbye' } });
assert.equal( input.value, 'goodbye' );
assert.htmlEqual( target.innerHTML, `
assert.equal(input.value, 'goodbye');
assert.htmlEqual(target.innerHTML, `
<h1>Hello goodbye!</h1>
<input>
` );
}
`);
},
};

41
test/runtime/samples/binding-input-text-deep-computed-dynamic/_config.js
Unescape View File

@ -4,8 +4,8 @@ export default {
obj: {
foo: 'a',
bar: 'b',
baz: 'c'
}
baz: 'c',
},
},
html: `
@ -13,43 +13,48 @@ export default {
<pre>{"foo":"a","bar":"b","baz":"c"}</pre>
`,
test ( assert, component, target, window ) {
const input = target.querySelector( 'input' );
const event = new window.Event( 'input' );
ssrHtml: `
<input value=b>
<pre>{"foo":"a","bar":"b","baz":"c"}</pre>
`,
assert.equal( input.value, 'b' );
test(assert, component, target, window) {
const input = target.querySelector('input');
const event = new window.Event('input');
assert.equal(input.value, 'b');
// edit bar
input.value = 'e';
input.dispatchEvent( event );
input.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, `
assert.htmlEqual(target.innerHTML, `
<input>
<pre>{"foo":"a","bar":"e","baz":"c"}</pre>
` );
`);
// edit baz
component.set({ prop: 'baz' });
assert.equal( input.value, 'c' );
assert.equal(input.value, 'c');
input.value = 'f';
input.dispatchEvent( event );
input.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, `
assert.htmlEqual(target.innerHTML, `
<input>
<pre>{"foo":"a","bar":"e","baz":"f"}</pre>
` );
`);
// edit foo
component.set({ prop: 'foo' });
assert.equal( input.value, 'a' );
assert.equal(input.value, 'a');
input.value = 'd';
input.dispatchEvent( event );
input.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, `
assert.htmlEqual(target.innerHTML, `
<input>
<pre>{"foo":"d","bar":"e","baz":"f"}</pre>
` );
}
`);
},
};

38
test/runtime/samples/binding-input-text-deep-computed/_config.js
Unescape View File

@ -2,29 +2,43 @@ export default {
data: {
prop: 'name',
user: {
name: 'alice'
}
name: 'alice',
},
},
html: `
<input>
<p>hello alice</p>
`,
html: `<input>\n<p>hello alice</p>`,
ssrHtml: `
<input value=alice>
<p>hello alice</p>
`,
test ( assert, component, target, window ) {
const input = target.querySelector( 'input' );
test(assert, component, target, window) {
const input = target.querySelector('input');
assert.equal( input.value, 'alice' );
assert.equal(input.value, 'alice');
const event = new window.Event( 'input' );
const event = new window.Event('input');
input.value = 'bob';
input.dispatchEvent( event );
input.dispatchEvent(event);
assert.equal( target.innerHTML, `<input>\n<p>hello bob</p>` );
assert.htmlEqual(target.innerHTML, `
<input>
<p>hello bob</p>
`);
const user = component.get().user;
user.name = 'carol';
component.set({ user });
assert.equal( input.value, 'carol' );
assert.equal( target.innerHTML, `<input>\n<p>hello carol</p>` );
}
assert.equal(input.value, 'carol');
assert.htmlEqual(target.innerHTML, `
<input>
<p>hello carol</p>
`);
},
};

45
test/runtime/samples/binding-input-text-deep-contextual-computed-dynamic/_config.js
Unescape View File

@ -1,11 +1,13 @@
export default {
data: {
prop: 'bar',
objects: [{
objects: [
{
foo: 'a',
bar: 'b',
baz: 'c'
}]
baz: 'c',
},
],
},
html: `
@ -13,43 +15,48 @@ export default {
<pre>{"foo":"a","bar":"b","baz":"c"}</pre>
`,
test ( assert, component, target, window ) {
const input = target.querySelector( 'input' );
const event = new window.Event( 'input' );
ssrHtml: `
<input value=b>
<pre>{"foo":"a","bar":"b","baz":"c"}</pre>
`,
assert.equal( input.value, 'b' );
test(assert, component, target, window) {
const input = target.querySelector('input');
const event = new window.Event('input');
assert.equal(input.value, 'b');
// edit bar
input.value = 'e';
input.dispatchEvent( event );
input.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, `
assert.htmlEqual(target.innerHTML, `
<input>
<pre>{"foo":"a","bar":"e","baz":"c"}</pre>
` );
`);
// edit baz
component.set({ prop: 'baz' });
assert.equal( input.value, 'c' );
assert.equal(input.value, 'c');
input.value = 'f';
input.dispatchEvent( event );
input.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, `
assert.htmlEqual(target.innerHTML, `
<input>
<pre>{"foo":"a","bar":"e","baz":"f"}</pre>
` );
`);
// edit foo
component.set({ prop: 'foo' });
assert.equal( input.value, 'a' );
assert.equal(input.value, 'a');
input.value = 'd';
input.dispatchEvent( event );
input.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, `
assert.htmlEqual(target.innerHTML, `
<input>
<pre>{"foo":"d","bar":"e","baz":"f"}</pre>
` );
}
`);
},
};

44
test/runtime/samples/binding-input-text-deep-contextual/_config.js
Unescape View File

@ -3,27 +3,47 @@ export default {
items: [
{ description: 'one' },
{ description: 'two' },
{ description: 'three' }
]
{ description: 'three' },
],
},
html: `<div><input><p>one</p></div><div><input><p>two</p></div><div><input><p>three</p></div><!---->`,
test ( assert, component, target, window ) {
const inputs = [ ...target.querySelectorAll( 'input' ) ];
assert.equal( inputs[0].value, 'one' );
html: `
<div><input><p>one</p></div>
<div><input><p>two</p></div>
<div><input><p>three</p></div>
`,
const event = new window.Event( 'input' );
ssrHtml: `
<div><input value=one><p>one</p></div>
<div><input value=two><p>two</p></div>
<div><input value=three><p>three</p></div>
`,
test(assert, component, target, window) {
const inputs = [...target.querySelectorAll('input')];
assert.equal(inputs[0].value, 'one');
const event = new window.Event('input');
inputs[1].value = 'four';
inputs[1].dispatchEvent( event );
inputs[1].dispatchEvent(event);
assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>three</p></div><!---->` );
assert.htmlEqual(target.innerHTML, `
<div><input><p>one</p></div>
<div><input><p>four</p></div>
<div><input><p>three</p></div>
`);
const items = component.get().items;
items[2].description = 'five';
component.set({ items });
assert.equal( inputs[2].value, 'five' );
assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>five</p></div><!---->` );
}
assert.equal(inputs[2].value, 'five');
assert.htmlEqual(target.innerHTML, `
<div><input><p>one</p></div>
<div><input><p>four</p></div>
<div><input><p>five</p></div>
`);
},
};

38
test/runtime/samples/binding-input-text-deep/_config.js
Unescape View File

@ -1,29 +1,43 @@
export default {
data: {
user: {
name: 'alice'
}
name: 'alice',
},
},
html: `
<input>
<p>hello alice</p>
`,
html: `<input>\n<p>hello alice</p>`,
ssrHtml: `
<input value=alice>
<p>hello alice</p>
`,
test ( assert, component, target, window ) {
const input = target.querySelector( 'input' );
test(assert, component, target, window) {
const input = target.querySelector('input');
assert.equal( input.value, 'alice' );
assert.equal(input.value, 'alice');
const event = new window.Event( 'input' );
const event = new window.Event('input');
input.value = 'bob';
input.dispatchEvent( event );
input.dispatchEvent(event);
assert.equal( target.innerHTML, `<input>\n<p>hello bob</p>` );
assert.htmlEqual(target.innerHTML, `
<input>
<p>hello bob</p>
`);
const user = component.get().user;
user.name = 'carol';
component.set({ user });
assert.equal( input.value, 'carol' );
assert.equal( target.innerHTML, `<input>\n<p>hello carol</p>` );
}
assert.equal(input.value, 'carol');
assert.htmlEqual(target.innerHTML, `
<input>
<p>hello carol</p>
`);
},
};

5
test/runtime/samples/binding-input-text/_config.js
Unescape View File

@ -8,6 +8,11 @@ export default {
<p>hello world</p>
`,
ssrHtml: `
<input value="world">
<p>hello world</p>
`,
test(assert, component, target, window) {
const input = target.querySelector('input');
assert.equal(input.value, 'world');

10
test/runtime/samples/binding-select-implicit-option-value/_config.js
Unescape View File

@ -14,6 +14,16 @@ export default {
<p>foo: 2</p>
`,
ssrHtml: `
<select value=2>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
<p>foo: 2</p>
`,
test(assert, component, target, window) {
const select = target.querySelector('select');
const options = [...target.querySelectorAll('option')];

26
test/runtime/samples/binding-select-initial-value/_config.js
Unescape View File

@ -11,17 +11,29 @@ export default {
<p>selected: b</p>
`,
ssrHtml: `
<p>selected: b</p>
<select value=b>
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
</select>
<p>selected: b</p>
`,
data: {
selected: 'b'
selected: 'b',
},
test ( assert, component, target ) {
const select = target.querySelector( 'select' );
const options = [ ...target.querySelectorAll( 'option' ) ];
test(assert, component, target) {
const select = target.querySelector('select');
const options = [...target.querySelectorAll('option')];
assert.equal( select.value, 'b' );
assert.ok( options[1].selected );
assert.equal(select.value, 'b');
assert.ok(options[1].selected);
component.destroy();
}
},
};

36
test/runtime/samples/binding-select/_config.js
Unescape View File

@ -11,24 +11,36 @@ export default {
<p>selected: one</p>
`,
ssrHtml: `
<p>selected: one</p>
<select value=one>
<option value='one'>one</option>
<option value='two'>two</option>
<option value='three'>three</option>
</select>
<p>selected: one</p>
`,
data: {
selected: 'one'
selected: 'one',
},
test ( assert, component, target, window ) {
const select = target.querySelector( 'select' );
const options = [ ...target.querySelectorAll( 'option' ) ];
test(assert, component, target, window) {
const select = target.querySelector('select');
const options = [...target.querySelectorAll('option')];
assert.deepEqual( options, select.options );
assert.equal( component.get().selected, 'one' );
assert.deepEqual(options, select.options);
assert.equal(component.get().selected, 'one');
const change = new window.Event( 'change' );
const change = new window.Event('change');
options[1].selected = true;
select.dispatchEvent( change );
select.dispatchEvent(change);
assert.equal( component.get().selected, 'two' );
assert.htmlEqual( target.innerHTML, `
assert.equal(component.get().selected, 'two');
assert.htmlEqual(target.innerHTML, `
<p>selected: two</p>
<select>
@ -38,8 +50,8 @@ export default {
</select>
<p>selected: two</p>
` );
`);
component.set({ selected: 'three' });
}
},
};

29
test/runtime/samples/binding-textarea/_config.js
Unescape View File

@ -1,6 +1,6 @@
export default {
data: {
value: 'some text'
value: 'some text',
},
html: `
@ -8,25 +8,30 @@ export default {
<p>some text</p>
`,
test ( assert, component, target, window ) {
const textarea = target.querySelector( 'textarea' );
assert.equal( textarea.value, 'some text' );
ssrHtml: `
<textarea value="some text"></textarea>
<p>some text</p>
`,
const event = new window.Event( 'input' );
test(assert, component, target, window) {
const textarea = target.querySelector('textarea');
assert.equal(textarea.value, 'some text');
const event = new window.Event('input');
textarea.value = 'hello';
textarea.dispatchEvent( event );
textarea.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, `
assert.htmlEqual(target.innerHTML, `
<textarea></textarea>
<p>hello</p>
` );
`);
component.set({ value: 'goodbye' });
assert.equal( textarea.value, 'goodbye' );
assert.htmlEqual( target.innerHTML, `
assert.equal(textarea.value, 'goodbye');
assert.htmlEqual(target.innerHTML, `
<textarea></textarea>
<p>goodbye</p>
` );
}
`);
},
};

23
test/runtime/samples/component-binding-deep/_config.js
Unescape View File

@ -4,19 +4,22 @@ export default {
<p>foo</p>
`,
test ( assert, component, target, window ) {
const event = new window.MouseEvent( 'input' );
const input = target.querySelector( 'input' );
ssrHtml: `
<input value=foo>
<p>foo</p>
`,
test(assert, component, target, window) {
const event = new window.MouseEvent('input');
const input = target.querySelector('input');
input.value = 'blah';
input.dispatchEvent( event );
input.dispatchEvent(event);
assert.deepEqual( component.get().deep, { name: 'blah' } );
assert.htmlEqual( target.innerHTML, `
assert.deepEqual(component.get().deep, { name: 'blah' });
assert.htmlEqual(target.innerHTML, `
<input>
<p>blah</p>
` );
component.destroy();
}
`);
},
};

7
test/runtime/samples/component-binding-each-nested/_config.js
Unescape View File

@ -4,6 +4,13 @@ export default {
<p>foo, bar, baz</p>
`,
ssrHtml: `
<input value=foo>
<input value=bar>
<input value=baz>
<p>foo, bar, baz</p>
`,
test ( assert, component, target, window ) {
const event = new window.MouseEvent( 'input' );
const inputs = target.querySelectorAll( 'input' );

7
test/runtime/samples/component-binding-each/_config.js
Unescape View File

@ -4,6 +4,13 @@ export default {
<p>foo, bar, baz</p>
`,
ssrHtml: `
<input value=foo>
<input value=bar>
<input value=baz>
<p>foo, bar, baz</p>
`,
test ( assert, component, target, window ) {
const event = new window.MouseEvent( 'input' );
const inputs = target.querySelectorAll( 'input' );

8
test/runtime/samples/deconflict-component-refs/_config.js
Unescape View File

@ -7,6 +7,14 @@ export default {
</ul>
`,
ssrHtml: `
<ul>
<li><input value=foo></li>
<li>bar</li>
<li>baz</li>
</ul>
`,
data: {
components: [
{ name: 'foo', edit: true },

6
test/runtime/samples/each-block-deconflict-name-context/_config.js
Unescape View File

@ -11,6 +11,12 @@ export default {
<input>
`,
ssrHtml: `
<input value=x>
<input value=y>
<input value=z>
`,
test(assert, component, target, window) {
const inputs = target.querySelectorAll('input');

6
test/runtime/samples/each-block-destructured-object-binding/_config.js
Unescape View File

@ -9,6 +9,12 @@ export default {
<p>Doctor Who</p>
`,
ssrHtml: `
<input value=Doctor>
<input value=Who>
<p>Doctor Who</p>
`,
test(assert, component, target, window) {
const inputs = target.querySelectorAll('input');

17
test/runtime/samples/globals-not-overwritten-by-bindings/_config.js
Unescape View File

@ -16,6 +16,23 @@ export default {
</div>
`,
ssrHtml: `
<div class="todo done">
<input type="checkbox" checked>
<input type="text" value="Buy some milk">
</div>
<div class="todo done">
<input type="checkbox" checked>
<input type="text" value="Do the laundry">
</div>
<div class="todo ">
<input type="checkbox">
<input type="text" value="Find life's true purpose">
</div>
`,
data: {
todos: {
first: {

18
test/runtime/samples/if-block-no-outro-else-with-outro/_config.js
Unescape View File

@ -1,10 +1,24 @@
export default {
nestedTransitions: true,
html: '<div>A wild component appears</div><p>x</p><input type="text">',
html: `
<div>A wild component appears</div>
<p>x</p>
<input type=text>
`,
ssrHtml: `
<div>A wild component appears</div>
<p>x</p>
<input type=text value=x>
`,
test(assert, component, target) {
component.set({ x: 'y' });
assert.htmlEqual(target.innerHTML, '<div>A wild component appears</div><p>y</p><input type="text">');
assert.htmlEqual(target.innerHTML, `
<div>A wild component appears</div>
<p>y</p>
<input type=text>
`);
},
};

8
test/runtime/samples/observe-binding-ignores-unchanged/_config.js
Unescape View File

@ -1,6 +1,12 @@
export default {
html: `
<input type='number'>
<input type=number>
<p>field1: 1</p>
<p>field2: 2</p>
`,
ssrHtml: `
<input type=number value=1>
<p>field1: 1</p>
<p>field2: 2</p>
`,

5
test/runtime/samples/spread-component-with-bind/_config.js
Unescape View File

@ -4,6 +4,11 @@ export default {
<input>
`,
ssrHtml: `
<p>foo</p>
<input value=foo>
`,
test (assert, component, target, window) {
const input = target.querySelector('input');

5
test/runtime/samples/store-binding/_config.js
Unescape View File

@ -12,6 +12,11 @@ export default {
<input>
`,
ssrHtml: `
<h1>Hello world!</h1>
<input value=world>
`,
test(assert, component, target, window) {
const input = target.querySelector('input');
const event = new window.Event('input');

5
test/runtime/samples/store-component-binding-deep/_config.js
Unescape View File

@ -14,6 +14,11 @@ export default {
<input>
`,
ssrHtml: `
<h1>Hello world!</h1>
<input value=world>
`,
test(assert, component, target, window) {
const input = target.querySelector('input');
const event = new window.Event('input');

15
test/runtime/samples/store-component-binding-each/_config.js
Unescape View File

@ -8,7 +8,16 @@ export default {
store,
html: `
<input><input><input>
<input>
<input>
<input>
<p>foo, bar, baz</p>
`,
ssrHtml: `
<input value=foo>
<input value=bar>
<input value=baz>
<p>foo, bar, baz</p>
`,
@ -21,7 +30,9 @@ export default {
assert.deepEqual(store.get().a, ['blah', 'bar', 'baz']);
assert.htmlEqual(target.innerHTML, `
<input><input><input>
<input>
<input>
<input>
<p>blah, bar, baz</p>
`);

5
test/runtime/samples/store-component-binding/_config.js
Unescape View File

@ -12,6 +12,11 @@ export default {
<input>
`,
ssrHtml: `
<h1>Hello world!</h1>
<input value=world>
`,
test(assert, component, target, window) {
const input = target.querySelector('input');
const event = new window.Event('input');

4
test/server-side-rendering/index.js
Unescape View File

@ -120,7 +120,9 @@ describe("ssr", () => {
store: (config.store !== true) && config.store
});
if (config.html) {
if (config.ssrHtml) {
assert.htmlEqual(html, config.ssrHtml);
} else if (config.html) {
assert.htmlEqual(html, config.html);
}
} catch (err) {

1
test/server-side-rendering/samples/bindings/_expected.html
Unescape View File

@ -0,0 +1 @@
<input value='bar'>

8
test/server-side-rendering/samples/bindings/main.html
Unescape View File

@ -0,0 +1,8 @@
<input bind:value=foo >
<script>
export default {
data() {
return { foo: 'bar' };
}
};
</script>
Write Preview
Loading…
Cancel
Save