diff --git a/src/compile/Component.ts b/src/compile/Component.ts index d796d8eb81..6674325a57 100644 --- a/src/compile/Component.ts +++ b/src/compile/Component.ts @@ -16,15 +16,13 @@ import Stylesheet from './css/Stylesheet'; import { test } from '../config'; import Fragment from './nodes/Fragment'; import * as internal from '../internal/index'; -import { Node, ShorthandImport, Ast, CompileOptions, CustomElementOptions } from '../interfaces'; +import { Node, Ast, CompileOptions, CustomElementOptions } from '../interfaces'; import error from '../utils/error'; import getCodeFrame from '../utils/getCodeFrame'; import checkForComputedKeys from './validate/js/utils/checkForComputedKeys'; import checkForDupes from './validate/js/utils/checkForDupes'; -import propValidators from './validate/js/propValidators'; import fuzzymatch from './validate/utils/fuzzymatch'; import flattenReference from '../utils/flattenReference'; -import { instrument } from '../utils/instrument'; interface Computation { key: string; @@ -519,7 +517,7 @@ export default class Component { const { name } = flattenReference(node.left); if (scope.findOwner(name) === top_scope) { - this.instrument(node, parent, name); + this.instrument(node, parent, name, false); } } }, @@ -540,14 +538,18 @@ export default class Component { this.javascript = a !== b ? `[✂${a}-${b}✂]` : ''; } - instrument(node, parent, name) { + instrument(node, parent, name, is_event_handler) { // TODO only make values reactive if they're used // in the template if (parent.type === 'ArrowFunctionExpression' && node === parent.body) { - // TODO don't do the $$result dance if this is an event handler - this.code.prependRight(node.start, `{ const $$result = `); - this.code.appendLeft(node.end, `; $$make_dirty('${name}'); return $$result; }`); + if (is_event_handler) { + this.code.prependRight(node.start, `{ `); + this.code.appendLeft(node.end, `; $$make_dirty('${name}'); }`); + } else { + this.code.prependRight(node.start, `{ const $$result = `); + this.code.appendLeft(node.end, `; $$make_dirty('${name}'); return $$result; }`); + } } else { diff --git a/src/compile/nodes/EventHandler.ts b/src/compile/nodes/EventHandler.ts index 1f822296d7..f5119c8a02 100644 --- a/src/compile/nodes/EventHandler.ts +++ b/src/compile/nodes/EventHandler.ts @@ -46,7 +46,7 @@ export default class EventHandler extends Node { const { name } = flattenReference(node.left); if (!scope.has(name)) { - component.instrument(node, parent, name); + component.instrument(node, parent, name, true); } } }, diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts index a6d42595d8..7baf255a53 100644 --- a/src/compile/render-dom/wrappers/Element/index.ts +++ b/src/compile/render-dom/wrappers/Element/index.ts @@ -750,7 +750,7 @@ export default class ElementWrapper extends Wrapper { const fn = `ctx.${intro.name}`; - block.builders.intro.addConditional(`#component.$$root.$$intro`, deindent` + block.builders.intro.addConditional(`@intro.enabled`, deindent` if (${name}) ${name}.invalidate(); @after_update(() => { @@ -787,7 +787,7 @@ export default class ElementWrapper extends Wrapper { `); } - block.builders.intro.addConditional(`#component.$$root.$$intro`, deindent` + block.builders.intro.addConditional(`@intro.enabled`, deindent` @after_update(() => { ${introName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, true); ${introName}.run(1); diff --git a/src/compile/render-ssr/handlers/InlineComponent.ts b/src/compile/render-ssr/handlers/InlineComponent.ts index a315d7a392..1d0cea385a 100644 --- a/src/compile/render-ssr/handlers/InlineComponent.ts +++ b/src/compile/render-ssr/handlers/InlineComponent.ts @@ -100,7 +100,6 @@ export default function(node, renderer, options) { let open = `\${@validateSsrComponent(${expression}, '${node.name}')._render(__result, ${props}`; const component_options = []; - component_options.push(`store: options.store`); if (node.children.length) { const target: AppendTarget = { diff --git a/test/runtime/samples/action-custom-event-handler/main.html b/test/runtime/samples/action-custom-event-handler/main.html index 8ab3006c6a..eab3756e43 100644 --- a/test/runtime/samples/action-custom-event-handler/main.html +++ b/test/runtime/samples/action-custom-event-handler/main.html @@ -20,4 +20,4 @@ } - + diff --git a/test/runtime/samples/component-binding/_config.js b/test/runtime/samples/component-binding/_config.js index e74a8388b1..0a282c4656 100644 --- a/test/runtime/samples/component-binding/_config.js +++ b/test/runtime/samples/component-binding/_config.js @@ -1,4 +1,5 @@ export default { + solo: 1, 'skip-ssr': true, // TODO delete this line, once binding works html: ` @@ -6,24 +7,24 @@ export default {
count: 0
`, - test ( assert, component, target, window ) { - const click = new window.MouseEvent( 'click' ); - const button = target.querySelector( 'button' ); + test(assert, component, target, window) { + const click = new window.MouseEvent('click'); + const button = target.querySelector('button'); - button.dispatchEvent( click ); + button.dispatchEvent(click); - assert.equal( component.x, 1 ); - assert.htmlEqual( target.innerHTML, ` + assert.equal(component.x, 1); + assert.htmlEqual(target.innerHTML, `count: 1
- ` ); + `); - button.dispatchEvent( click ); + button.dispatchEvent(click); - assert.equal( component.x, 2 ); - assert.htmlEqual( target.innerHTML, ` + assert.equal(component.x, 2); + assert.htmlEqual(target.innerHTML, `count: 2
- ` ); + `); } };