Skip to content

Commit

Permalink
Merge pull request #1812 from sveltejs/gh-1205-b
Browse files Browse the repository at this point in the history 
render server bindings
  • Loading branch information
@Rich-Harris
Rich-Harris authored Oct 27, 2018
2 parents d1f35df + 837d248 commit 3cf60cb
Show file tree
Hide file tree
Showing 36 changed files with 520 additions and 201 deletions.
10 changes: 10 additions & 0 deletions src/compile/render-ssr/handlers/Element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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())}`;
}
Expand Down
2 changes: 1 addition & 1 deletion test/runtime/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ describe("runtime", () => {
});
} else {
component.destroy();
assert.equal(target.innerHTML, "");
assert.htmlEqual(target.innerHTML, "");
}
})
.catch(err => {
Expand Down
23 changes: 22 additions & 1 deletion test/runtime/samples/binding-input-checkbox-deep-contextual/_config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`,

Expand Down
10 changes: 9 additions & 1 deletion test/runtime/samples/binding-input-checkbox/_config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand Down
41 changes: 23 additions & 18 deletions test/runtime/samples/binding-input-number/_config.js
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 19 additions & 14 deletions test/runtime/samples/binding-input-range-change/_config.js
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 19 additions & 14 deletions test/runtime/samples/binding-input-range/_config.js
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 56 additions & 16 deletions test/runtime/samples/binding-input-text-contextual/_config.js
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 19 additions & 14 deletions test/runtime/samples/binding-input-text-deconflicted/_config.js
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,40 @@
export default {
data: {
component: {
name: 'world'
}
name: 'world',
},
},

html: `
<h1>Hello world!</h1>
<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>
` );
}
`);
},
};
Loading

0 comments on commit 3cf60cb

Please sign in to comment.