From 7b057e4fc29f9d1fc24dfe3cbebf422dd7d8be6a Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 17 Mar 2017 17:45:25 -0400 Subject: [PATCH] implement bind:group for checkbox inputs (#312) --- src/generators/Generator.js | 2 + src/generators/dom/index.js | 4 ++ src/generators/dom/visitors/Element.js | 4 +- .../attributes/addElementAttributes.js | 18 +++-- .../visitors/attributes/addElementBinding.js | 71 ++++++++++++++++--- .../binding/getStaticAttributeValue.js | 11 +++ .../attributes/getStaticAttributeValue.js | 0 src/shared/dom.js | 8 +++ .../binding-input-checkbox-group/_config.js | 10 +-- .../binding-input-checkbox-group/main.html | 2 +- 10 files changed, 105 insertions(+), 25 deletions(-) create mode 100644 src/generators/dom/visitors/attributes/binding/getStaticAttributeValue.js create mode 100644 src/generators/dom/visitors/attributes/getStaticAttributeValue.js diff --git a/src/generators/Generator.js b/src/generators/Generator.js index f2757dbe37..f0571d96c1 100644 --- a/src/generators/Generator.js +++ b/src/generators/Generator.js @@ -22,6 +22,8 @@ export default class Generator { this.components = {}; this.events = {}; + this.bindingGroups = []; + // track which properties are needed, so we can provide useful info // in dev mode this.expectedProperties = {}; diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js index 3c337a2f2a..406e676e95 100644 --- a/src/generators/dom/index.js +++ b/src/generators/dom/index.js @@ -343,6 +343,10 @@ export default function dom ( parsed, source, options, names ) { ); } + if ( generator.bindingGroups.length ) { + constructorBlock.addLine( `this._bindingGroups = [ ${Array( generator.bindingGroups.length ).fill( '[]' ).join( ', ' )} ];` ); + } + constructorBlock.addBlock( deindent` this._observers = { pre: Object.create( null ), diff --git a/src/generators/dom/visitors/Element.js b/src/generators/dom/visitors/Element.js index 275f98429e..0e76e0d708 100644 --- a/src/generators/dom/visitors/Element.js +++ b/src/generators/dom/visitors/Element.js @@ -20,7 +20,8 @@ export default { allUsedContexts: [], init: new CodeBuilder(), - update: new CodeBuilder() + update: new CodeBuilder(), + teardown: new CodeBuilder() }; const isToplevel = generator.current.localElementDepth === 0; @@ -85,6 +86,7 @@ export default { generator.current.builders.init.addBlock( local.init ); if ( !local.update.isEmpty() ) generator.current.builders.update.addBlock( local.update ); + if ( !local.teardown.isEmpty() ) generator.current.builders.teardown.addBlock( local.teardown ); generator.createMountStatement( name ); diff --git a/src/generators/dom/visitors/attributes/addElementAttributes.js b/src/generators/dom/visitors/attributes/addElementAttributes.js index a6e577de40..f355354ab2 100644 --- a/src/generators/dom/visitors/attributes/addElementAttributes.js +++ b/src/generators/dom/visitors/attributes/addElementAttributes.js @@ -2,6 +2,7 @@ import attributeLookup from './lookup.js'; import addElementBinding from './addElementBinding'; import deindent from '../../../../utils/deindent.js'; import flattenReference from '../../../../utils/flattenReference.js'; +import getStaticAttributeValue from './binding/getStaticAttributeValue.js'; export default function addElementAttributes ( generator, node, local ) { node.attributes.forEach( attribute => { @@ -13,8 +14,12 @@ export default function addElementAttributes ( generator, node, local ) { let dynamic = false; - const isBoundOptionValue = node.name === 'option' && name === 'value'; // TODO check it's actually bound - const propertyName = isBoundOptionValue ? '__value' : metadata && metadata.propertyName; + const isIndirectlyBoundValue = name === 'value' && ( + node.name === 'option' || // TODO check it's actually bound + node.name === 'input' && /^(checkbox|radio)$/.test( getStaticAttributeValue( node, 'type' ) ) + ); + + const propertyName = isIndirectlyBoundValue ? '__value' : metadata && metadata.propertyName; const isXlink = name.slice( 0, 6 ) === 'xlink:'; @@ -134,12 +139,11 @@ export default function addElementAttributes ( generator, node, local ) { local.update.addLine( updater ); } - if ( isBoundOptionValue ) { - local.init.addLine( `${local.name}.value = ${local.name}.__value` ); + if ( isIndirectlyBoundValue ) { + const updateValue = `${local.name}.value = ${local.name}.__value;`; - if (dynamic) { - local.update.addLine( `${local.name}.value = ${local.name}.__value` ); - } + local.init.addLine( updateValue ); + if ( dynamic ) local.update.addLine( updateValue ); } } diff --git a/src/generators/dom/visitors/attributes/addElementBinding.js b/src/generators/dom/visitors/attributes/addElementBinding.js index c96ed057d7..7958fc0480 100644 --- a/src/generators/dom/visitors/attributes/addElementBinding.js +++ b/src/generators/dom/visitors/attributes/addElementBinding.js @@ -1,9 +1,10 @@ import deindent from '../../../../utils/deindent.js'; import flattenReference from '../../../../utils/flattenReference.js'; import getSetter from './binding/getSetter.js'; +import getStaticAttributeValue from './binding/getStaticAttributeValue.js'; export default function createBinding ( generator, node, attribute, current, local ) { - const { name } = flattenReference( attribute.value ); + const { name, keypath } = flattenReference( attribute.value ); const { snippet, contexts, dependencies } = generator.contextualise( attribute.value ); if ( dependencies.length > 1 ) throw new Error( 'An unexpected situation arose. Please raise an issue at https://github.com/sveltejs/svelte/issues — thanks!' ); @@ -14,20 +15,20 @@ export default function createBinding ( generator, node, attribute, current, loc const handler = current.getUniqueName( `${local.name}ChangeHandler` ); - const isMultipleSelect = node.name === 'select' && node.attributes.find( attr => attr.name.toLowerCase() === 'multiple' ); // TODO ensure that this is a static attribute - const value = getBindingValue( local, node, attribute, isMultipleSelect ); + const isMultipleSelect = node.name === 'select' && node.attributes.find( attr => attr.name.toLowerCase() === 'multiple' ); // TODO use getStaticAttributeValue + const bindingGroup = attribute.name === 'group' ? getBindingGroup( generator, current, attribute, keypath ) : null; + const value = getBindingValue( generator, local, node, attribute, isMultipleSelect, bindingGroup ); const eventName = getBindingEventName( node ); let setter = getSetter({ current, name, context: '__svelte', attribute, dependencies, snippet, value }); - - // special case - if ( node.name === 'select' && !isMultipleSelect ) { - setter = `var selectedOption = ${local.name}.selectedOptions[0] || ${local.name}.options[0];\n` + setter; - } - let updateElement; + // special case + else if ( attribute.name === 'group' ) { + const type = getStaticAttributeValue( node, 'type' ); + + if ( type === 'checkbox' ) { + local.init.addLine( + `component._bindingGroups[${bindingGroup}].push( ${local.name} );` + ); + + local.teardown.addBlock( + `component._bindingGroups[${bindingGroup}].splice( component._bindingGroups[${bindingGroup}].indexOf( ${local.name} ), 1 );` + ); + + updateElement = `${local.name}.checked = ~${snippet}.indexOf( ${local.name}.__value );`; + } + + else if ( type === 'radio' ) { + throw new Error( 'TODO' ); + } + + else { + throw new Error( `Unexpected bind:group` ); // TODO catch this in validation with a better error + } + } + + // everything else + else { updateElement = `${local.name}.${attribute.name} = ${snippet};`; } @@ -93,14 +122,34 @@ function getBindingEventName ( node ) { return 'change'; } -function getBindingValue ( local, node, attribute, isMultipleSelect ) { +function getBindingValue ( generator, local, node, attribute, isMultipleSelect, bindingGroup ) { + // + if ( attribute.name === 'group' ) { + return `${generator.helper( 'getBindingGroupValue' )}( component._bindingGroups[${bindingGroup}] )`; + } + + // everything else return `${local.name}.${attribute.name}`; +} + +function getBindingGroup ( generator, current, attribute, keypath ) { + // TODO handle contextual bindings — `keypath` should include unique ID of + // each block that provides context + let index = generator.bindingGroups.indexOf( keypath ); + if ( index === -1 ) { + index = generator.bindingGroups.length; + generator.bindingGroups.push( keypath ); + } + + return index; } \ No newline at end of file diff --git a/src/generators/dom/visitors/attributes/binding/getStaticAttributeValue.js b/src/generators/dom/visitors/attributes/binding/getStaticAttributeValue.js new file mode 100644 index 0000000000..20e5183956 --- /dev/null +++ b/src/generators/dom/visitors/attributes/binding/getStaticAttributeValue.js @@ -0,0 +1,11 @@ +export default function getStaticAttributeValue ( node, name ) { + const attribute = node.attributes.find( attr => attr.name.toLowerCase() === name ); + if ( !attribute ) return null; + + if ( attribute.value.length !== 1 || attribute.value[0].type !== 'Text' ) { + // TODO catch this in validation phase, give a more useful error (with location etc) + throw new Error( `'${name} must be a static attribute` ); + } + + return attribute.value[0].data; +} \ No newline at end of file diff --git a/src/generators/dom/visitors/attributes/getStaticAttributeValue.js b/src/generators/dom/visitors/attributes/getStaticAttributeValue.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/shared/dom.js b/src/shared/dom.js index 574b672ce5..5657a11333 100644 --- a/src/shared/dom.js +++ b/src/shared/dom.js @@ -53,3 +53,11 @@ export function setAttribute ( node, attribute, value ) { export function setXlinkAttribute ( node, attribute, value ) { node.setAttributeNS( 'http://www.w3.org/1999/xlink', attribute, value ); } + +export function getBindingGroupValue ( group ) { + var value = []; + for ( var i = 0; i < group.length; i += 1 ) { + if ( group[i].checked ) value.push( group[i].__value ); + } + return value; +} \ No newline at end of file diff --git a/test/generator/samples/binding-input-checkbox-group/_config.js b/test/generator/samples/binding-input-checkbox-group/_config.js index 154c4490cb..fac1795eca 100644 --- a/test/generator/samples/binding-input-checkbox-group/_config.js +++ b/test/generator/samples/binding-input-checkbox-group/_config.js @@ -5,13 +5,13 @@ const values = [ ]; export default { - // solo: true, - data: { values, selected: [ values[1] ] }, + 'skip-ssr': true, // values are rendered as [object Object] + html: ` {{/each}} -

{{selected.map( function ( value ) { return value.name; }) }}

\ No newline at end of file +

{{selected.map( function ( value ) { return value.name; }).join( ', ' ) }}

\ No newline at end of file