diff --git a/src/compile/render-dom/wrappers/Element/Binding.ts b/src/compile/render-dom/wrappers/Element/Binding.ts index 959d617111..89c1674965 100644 --- a/src/compile/render-dom/wrappers/Element/Binding.ts +++ b/src/compile/render-dom/wrappers/Element/Binding.ts @@ -105,11 +105,11 @@ export default class BindingWrapper { const bindingGroup = getBindingGroup(renderer, this.node.value.node); block.builders.hydrate.addLine( - `#component._bindingGroups[${bindingGroup}].push(${parent.var});` + `(#component.$$bindingGroups[${bindingGroup}] || (#component.$$bindingGroups[${bindingGroup}] = [])).push(${parent.var});` ); block.builders.destroy.addLine( - `#component._bindingGroups[${bindingGroup}].splice(#component._bindingGroups[${bindingGroup}].indexOf(${parent.var}), 1);` + `#component.$$bindingGroups[${bindingGroup}].splice(#component.$$bindingGroups[${bindingGroup}].indexOf(${parent.var}), 1);` ); } @@ -295,7 +295,7 @@ function getValueFromDom( if (name === 'group') { const bindingGroup = getBindingGroup(renderer, binding.node.value.node); if (type === 'checkbox') { - return `@getBindingGroupValue(#component._bindingGroups[${bindingGroup}])`; + return `@getBindingGroupValue(#component.$$bindingGroups[${bindingGroup}])`; } return `${element.var}.__value`; diff --git a/src/internal/SvelteComponent.js b/src/internal/SvelteComponent.js index 5d17b64205..1028ee035d 100644 --- a/src/internal/SvelteComponent.js +++ b/src/internal/SvelteComponent.js @@ -9,6 +9,7 @@ export class SvelteComponent { ); this.$$dirty = null; + this.$$bindingGroups = []; // TODO find a way to not have this here? if (options.props) { this.$$inject_props(options.props); diff --git a/src/parse/state/tag.ts b/src/parse/state/tag.ts index 7fccb7d88f..c9d5aece72 100644 --- a/src/parse/state/tag.ts +++ b/src/parse/state/tag.ts @@ -384,12 +384,29 @@ function readAttribute(parser: Parser, uniqueNames: Set) { parser.allowWhitespace(); - let value = parser.eat('=') ? readAttributeValue(parser) : true; - const end = parser.index; - const colon_index = name.indexOf(':'); const type = colon_index !== 1 && get_directive_type(name.slice(0, colon_index)); + let value; + + if (parser.eat('=')) { + if (type === 'Binding') { + // TODO should this be a special case? tbh this whole thing + // could use a lil refactoring probably + const quote = parser.read(/['"']/); + const expression = readExpression(parser); + value = [{ type: 'MustacheTag', start: expression.start, end: expression.end, expression }]; + + if (quote) parser.eat(quote, true); + } else { + value = readAttributeValue(parser); + } + } else { + value = true; + } + + const end = parser.index; + if (type) { name = name.slice(colon_index + 1); @@ -398,7 +415,7 @@ function readAttribute(parser: Parser, uniqueNames: Set) { end, type, name, - expression: value[0] && value[0].expression + [type === 'Binding' ? 'value' : 'expression']: value[0] && value[0].expression }; } diff --git a/test/runtime/samples/action/_config.js b/test/runtime/samples/action/_config.js index fcbfd2ac82..49ec4dd18c 100644 --- a/test/runtime/samples/action/_config.js +++ b/test/runtime/samples/action/_config.js @@ -3,20 +3,20 @@ export default { `, - test ( assert, component, target, window ) { - const button = target.querySelector( 'button' ); - const eventEnter = new window.MouseEvent( 'mouseenter' ); - const eventLeave = new window.MouseEvent( 'mouseleave' ); + test(assert, component, target, window) { + const button = target.querySelector('button'); + const eventEnter = new window.MouseEvent('mouseenter'); + const eventLeave = new window.MouseEvent('mouseleave'); - button.dispatchEvent( eventEnter ); - assert.htmlEqual( target.innerHTML, ` + button.dispatchEvent(eventEnter); + assert.htmlEqual(target.innerHTML, `
Perform an Action
- ` ); + `); - button.dispatchEvent( eventLeave ); - assert.htmlEqual( target.innerHTML, ` + button.dispatchEvent(eventLeave); + assert.htmlEqual(target.innerHTML, ` - ` ); + `); } }; diff --git a/test/runtime/samples/attribute-prefer-expression/_config.js b/test/runtime/samples/attribute-prefer-expression/_config.js index 2bcbbb8511..e9f60dbc24 100644 --- a/test/runtime/samples/attribute-prefer-expression/_config.js +++ b/test/runtime/samples/attribute-prefer-expression/_config.js @@ -2,18 +2,18 @@ export default { 'skip-ssr': true, props: { - foo: false + foo: false, }, - test ( assert, component, target ) { - const inputs = target.querySelectorAll( 'input' ); + test(assert, component, target) { + const inputs = target.querySelectorAll('input'); - assert.ok( inputs[0].checked ); - assert.ok( !inputs[1].checked ); + assert.ok(inputs[0].checked); + assert.ok(!inputs[1].checked); component.foo = true; - assert.ok( !inputs[0].checked ); - assert.ok( inputs[1].checked ); - } + assert.ok(!inputs[0].checked); + assert.ok(inputs[1].checked); + }, };