diff --git a/compiler/generate/index.js b/compiler/generate/index.js index b865a1ff90..5e405566f2 100644 --- a/compiler/generate/index.js +++ b/compiler/generate/index.js @@ -234,6 +234,33 @@ export default function generate ( parsed, template ) { ` ); } + else if ( attribute.type === 'Binding' ) { + if ( attribute.value in current.contexts ) { + throw new Error( `Can only bind top-level properties` ); + } + + const handler = current.counter( `${name}ChangeHandler` ); + + initStatements.push( deindent` + var ${name}_updating = false; + function ${handler} () { + ${name}_updating = true; + component.set({ ${attribute.value}: ${name}.value }); + ${name}_updating = false; + } + + ${name}.addEventListener( 'input', ${handler}, false ); + ` ); + + updateStatements.push( deindent` + if ( !${name}_updating ) ${name}.value = root.${attribute.value}; + ` ); + + teardownStatements.push( deindent` + ${name}.removeEventListener( 'input', ${handler}, false ); + ` ); + } + else { throw new Error( `Not implemented: ${attribute.type}` ); } diff --git a/compiler/parse/read/directives.js b/compiler/parse/read/directives.js index 55e5f2e7e0..3573a5ded3 100644 --- a/compiler/parse/read/directives.js +++ b/compiler/parse/read/directives.js @@ -41,3 +41,26 @@ export function readEventHandlerDirective ( parser, start, name ) { expression }; } + +export function readBindingDirective ( parser, start, name ) { + const quoteMark = ( + parser.eat( `'` ) ? `'` : + parser.eat( `"` ) ? `"` : + null + ); + + const value = parser.read( /[a-zA-Z_$][a-zA-Z0-9_$]*/ ); // TODO – keypaths? /([a-zA-Z_$][a-zA-Z0-9_$]*)(\.[a-zA-Z_$][a-zA-Z0-9_$]*)*/ + if ( !value ) parser.error( `Expected valid property name` ); + + if ( quoteMark ) { + parser.eat( quoteMark, true ); + } + + return { + start, + end: parser.index, + type: 'Binding', + name, + value + }; +} diff --git a/compiler/parse/state/tag.js b/compiler/parse/state/tag.js index cb2178e30d..7332bccd66 100644 --- a/compiler/parse/state/tag.js +++ b/compiler/parse/state/tag.js @@ -1,7 +1,7 @@ import readExpression from '../read/expression.js'; import readScript from '../read/script.js'; import readStyle from '../read/style.js'; -import { readEventHandlerDirective } from '../read/directives.js'; +import { readEventHandlerDirective, readBindingDirective } from '../read/directives.js'; import { trimStart, trimEnd } from '../utils/trim.js'; const validTagName = /^[a-zA-Z]{1,}:?[a-zA-Z0-9\-]*/; @@ -144,6 +144,11 @@ function readAttribute ( parser ) { return readEventHandlerDirective( parser, start, name.slice( 3 ) ); } + if ( /^bind:/.test( name ) ) { + parser.eat( '=', true ); + return readBindingDirective( parser, start, name.slice( 5 ) ); + } + const value = parser.eat( '=' ) ? readAttributeValue( parser ) : true; return { diff --git a/test/compiler/binding-input-text/_config.js b/test/compiler/binding-input-text/_config.js new file mode 100644 index 0000000000..572205dc29 --- /dev/null +++ b/test/compiler/binding-input-text/_config.js @@ -0,0 +1,23 @@ +import * as assert from 'assert'; + +export default { + data: { + name: 'world' + }, + html: `\n
hello world
`, + test ( 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 ); + + assert.equal( target.innerHTML, `\nhello everybody
` ); + + component.set({ name: 'goodbye' }); + assert.equal( input.value, 'goodbye' ); + assert.equal( target.innerHTML, `\nhello goodbye
` ); + } +}; diff --git a/test/compiler/binding-input-text/main.svelte b/test/compiler/binding-input-text/main.svelte new file mode 100644 index 0000000000..806f31fbdd --- /dev/null +++ b/test/compiler/binding-input-text/main.svelte @@ -0,0 +1,2 @@ + +hello {{name}}
diff --git a/test/parser/binding/input.svelte b/test/parser/binding/input.svelte new file mode 100644 index 0000000000..6a7bf8566c --- /dev/null +++ b/test/parser/binding/input.svelte @@ -0,0 +1 @@ + diff --git a/test/parser/binding/output.json b/test/parser/binding/output.json new file mode 100644 index 0000000000..ec1fcd2862 --- /dev/null +++ b/test/parser/binding/output.json @@ -0,0 +1,27 @@ +{ + "html": { + "start": 0, + "end": 25, + "type": "Fragment", + "children": [ + { + "start": 0, + "end": 25, + "type": "Element", + "name": "input", + "attributes": [ + { + "start": 7, + "end": 24, + "type": "Binding", + "name": "value", + "value": "name" + } + ], + "children": [] + } + ] + }, + "css": null, + "js": null +}