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

add ssr for group bindings ()

Browse Source 
* add ssr for group bindings

* remove unnecessary chunk length check

* check if checkbox or radio

Co-authored-by: tanhauhau <lhtan93@gmail.com>
pull/6517/head
Jonnie 4 years ago committed by GitHub
parent ce43bd67c7
commit 7bcbe67939
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 230 additions and 7 deletions

11
src/compiler/compile/render_ssr/handlers/Element.ts
Unescape View File

@ -1,5 +1,5 @@
import { is_void } from '../../../utils/names';
import { get_attribute_value, get_class_attribute_value } from './shared/get_attribute_value';
import { get_attribute_expression, get_attribute_value, get_class_attribute_value } from './shared/get_attribute_value';
import { boolean_attributes } from './shared/boolean_attributes';
import Renderer, { RenderOptions } from '../Renderer';
import Element from '../../nodes/Element';
@ -110,7 +110,14 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
}
if (name === 'group') {
// TODO server-render group bindings
const value_attribute = node.attributes.find(({ name }) => name === 'value');
if (value_attribute) {
const value = get_attribute_expression(value_attribute);
const type = node.get_static_attribute_value('type');
const bound = expression.node;
const condition = type === 'checkbox' ? x`~${bound}.indexOf(${value})`: x`${value} === ${bound}`;
renderer.add_expression(x`${condition} ? @add_attribute("checked", true, 1) : ""`);
}
} else if (contenteditable && (name === 'textContent' || name === 'innerHTML')) {
node_contents = expression.node;

7
src/compiler/compile/render_ssr/handlers/shared/get_attribute_value.ts
Unescape View File

@ -26,3 +26,10 @@ export function get_attribute_value(attribute: Attribute): ESTreeExpression {
})
.reduce((lhs, rhs) => x`${lhs} + ${rhs}`);
}
export function get_attribute_expression(attribute: Attribute): ESTreeExpression {
if (attribute.chunks.length === 1 && attribute.chunks[0].type === 'Expression') {
return (attribute.chunks[0] as Expression).node as ESTreeExpression;
}
return get_attribute_value(attribute);
}

1
test/runtime/samples/attribute-prefer-expression/_config.js
Unescape View File

@ -1,5 +1,4 @@
export default {
skip_if_ssr: true,
props: {
foo: false

10
test/runtime/samples/binding-indirect-spread/_config.js
Unescape View File

@ -1,5 +1,13 @@
export default {
skip_if_ssr: true,
ssrHtml: `
<input type="radio" value="radio1">
<input type="radio" value="radio2" checked>
<input type="radio" value="radio3">
<input type="checkbox" value="check1">
<input type="checkbox" value="check2" checked>
<input type="checkbox" value="check3">
`,
async test({ assert, component, target, window }) {
const event = new window.MouseEvent('click');

15
test/runtime/samples/binding-input-checkbox-group-outside-each/_config.js
Unescape View File

@ -25,6 +25,21 @@ export default {
<p>Beta</p>`,
ssrHtml: `
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]" checked> Beta
</label>
<label>
<input type="checkbox" value="[object Object]"> Gamma
</label>
<p>Beta</p>`,
async test({ assert, component, target, window }) {
const inputs = target.querySelectorAll('input');
assert.equal(inputs[0].checked, false);

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

@ -25,6 +25,21 @@ export default {
<p>Beta</p>`,
ssrHtml: `
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]" checked> Beta
</label>
<label>
<input type="checkbox" value="[object Object]"> Gamma
</label>
<p>Beta</p>`,
async test({ assert, component, target, window }) {
const inputs = target.querySelectorAll('input');
assert.equal(inputs[0].checked, false);

48
test/runtime/samples/binding-input-group-each-1/_config.js
Unescape View File

@ -64,6 +64,54 @@ export default {
</div>
`,
ssrHtml: `
<div>
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]" checked> Beta
</label>
<label>
<input type="checkbox" value="[object Object]"> Gamma
</label>
<p>Beta</p>
</div>
<div>
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]"> Beta
</label>
<label>
<input type="checkbox" value="[object Object]"> Gamma
</label>
<p></p>
</div>
<div>
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]"> Beta
</label>
<label>
<input type="checkbox" value="[object Object]" checked> Gamma
</label>
<p>Gamma</p>
</div>
`,
async test({ assert, component, target, window }) {
const inputs = target.querySelectorAll('input');
assert.equal(inputs[0].checked, false);

13
test/runtime/samples/binding-input-group-each-2/_config.js
Unescape View File

@ -12,6 +12,19 @@ export default {
<p>1, 2, 3</p>`,
ssrHtml: `
<label>
<input type="checkbox" value="1" checked> 1
</label>
<label>
<input type="checkbox" value="2" checked> 2
</label>
<label>
<input type="checkbox" value="3" checked> 3
</label>
<p>1, 2, 3</p>`,
async test({ assert, component, target, window }) {
const inputs = target.querySelectorAll('input');
assert.equal(inputs[0].checked, true);

46
test/runtime/samples/binding-input-group-each-3/_config.js
Unescape View File

@ -63,7 +63,53 @@ export default {
<p>Gamma</p>
</div>
`,
ssrHtml: `
<div>
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]" checked> Beta
</label>
<label>
<input type="checkbox" value="[object Object]"> Gamma
</label>
<p>Beta</p>
</div>
<div>
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]"> Beta
</label>
<label>
<input type="checkbox" value="[object Object]"> Gamma
</label>
<p></p>
</div>
<div>
<label>
<input type="checkbox" value="[object Object]"> Alpha
</label>
<label>
<input type="checkbox" value="[object Object]"> Beta
</label>
<label>
<input type="checkbox" value="[object Object]" checked> Gamma
</label>
<p>Gamma</p>
</div>
`,
async test({ assert, component, target, window }) {
const inputs = target.querySelectorAll('input');
assert.equal(inputs[0].checked, false);

19
test/runtime/samples/binding-input-group-each-4/_config.js
Unescape View File

@ -17,7 +17,24 @@ export default {
<label><input type="checkbox" value="3"> 3</label>
<p>3</p>
`,
ssrHtml: `
<label><input type="checkbox" value="1" checked> 1</label>
<label><input type="checkbox" value="2"> 2</label>
<label><input type="checkbox" value="3"> 3</label>
<p>1</p>
<label><input type="checkbox" value="1"> 1</label>
<label><input type="checkbox" value="2" checked> 2</label>
<label><input type="checkbox" value="3"> 3</label>
<p>2</p>
<label><input type="checkbox" value="1"> 1</label>
<label><input type="checkbox" value="2"> 2</label>
<label><input type="checkbox" value="3"> 3</label>
<p></p>
<label><input type="checkbox" value="1"> 1</label>
<label><input type="checkbox" value="2"> 2</label>
<label><input type="checkbox" value="3" checked> 3</label>
<p>3</p>
`,
async test({ assert, component, target, window }) {
const inputs = target.querySelectorAll('input');
assert.equal(inputs[0].checked, true);

19
test/runtime/samples/binding-input-group-each-5/_config.js
Unescape View File

@ -17,7 +17,24 @@ export default {
<label><input type="checkbox" value="3"> 3</label>
<p>1</p>
`,
ssrHtml: `
<label><input type="checkbox" value="1" checked> 1</label>
<label><input type="checkbox" value="2"> 2</label>
<label><input type="checkbox" value="3"> 3</label>
<p>1</p>
<label><input type="checkbox" value="1" checked> 1</label>
<label><input type="checkbox" value="2" checked> 2</label>
<label><input type="checkbox" value="3" checked> 3</label>
<p>1, 2, 3</p>
<label><input type="checkbox" value="1"> 1</label>
<label><input type="checkbox" value="2" checked> 2</label>
<label><input type="checkbox" value="3"> 3</label>
<p>2</p>
<label><input type="checkbox" value="1" checked> 1</label>
<label><input type="checkbox" value="2"> 2</label>
<label><input type="checkbox" value="3"> 3</label>
<p>1</p>
`,
async test({ assert, component, target, window }) {
const inputs = target.querySelectorAll('input');
assert.equal(inputs[0].checked, true);

1
test/runtime/samples/binding-input-group-each-6/_config.js
Unescape View File

@ -13,7 +13,6 @@ export default {
<label><input type="checkbox" value="z"> z</label>
<p></p>
`,
async test({ assert, component, target, window }) {
const inputs = target.querySelectorAll('input');
assert.equal(inputs[0].checked, false);

15
test/runtime/samples/binding-input-radio-group/_config.js
Unescape View File

@ -25,6 +25,21 @@ export default {
<p>Beta</p>`,
ssrHtml: `
<label>
<input type="radio" value="[object Object]"> Alpha
</label>
<label>
<input type="radio" value="[object Object]" checked> Beta
</label>
<label>
<input type="radio" value="[object Object]"> Gamma
</label>
<p>Beta</p>`,
async test({ assert, component, target, window }) {
const inputs = target.querySelectorAll('input');
assert.equal(inputs[0].checked, false);

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

@ -0,0 +1,5 @@
<div>Cheese</div>
<input type="radio" value="Plain" checked>
<input type="radio" value="Whole wheat">
<input type="checkbox" value="Beans">
<input type="checkbox" value="Cheese" checked>

12
test/server-side-rendering/samples/bindings-group/main.svelte
Unescape View File

@ -0,0 +1,12 @@
<script>
let tortilla = 'Plain';
let fillings = ['Cheese'];
</script>
<div>{fillings.toString()}</div>
<input type="radio" bind:group={tortilla} value="Plain">
<input type="radio" bind:group={tortilla} value="Whole wheat">
<input type="checkbox" bind:group={fillings} value="Beans">
<input type="checkbox" bind:group={fillings} value="Cheese">
Write Preview
Loading…
Cancel
Save