From 224f88f6ce11c392c9f8411de6d5cbe8f4eb9862 Mon Sep 17 00:00:00 2001 From: eddyerburgh Date: Fri, 23 Nov 2018 08:11:32 +0000 Subject: [PATCH 1/4] feat: support listeners for functional components --- .../create-functional-component.js | 14 ++++- test/specs/mounting-options/listeners.spec.js | 52 ++++++++++++++----- 2 files changed, 53 insertions(+), 13 deletions(-) diff --git a/packages/create-instance/create-functional-component.js b/packages/create-instance/create-functional-component.js index ee3feb392..f3f11097a 100644 --- a/packages/create-instance/create-functional-component.js +++ b/packages/create-instance/create-functional-component.js @@ -15,11 +15,23 @@ export default function createFunctionalComponent ( validateSlots(mountingOptions.slots) } + const context = + mountingOptions.context || + component.FunctionalRenderContext + + const listeners = mountingOptions.listeners + + if (listeners) { + Object.keys(listeners).forEach(key => { + context.on[key] = listeners[key] + }) + } + return { render (h: Function) { return h( component, - mountingOptions.context || component.FunctionalRenderContext, + context, (mountingOptions.context && mountingOptions.context.children && mountingOptions.context.children.map( diff --git a/test/specs/mounting-options/listeners.spec.js b/test/specs/mounting-options/listeners.spec.js index dcf469542..98f94cf88 100644 --- a/test/specs/mounting-options/listeners.spec.js +++ b/test/specs/mounting-options/listeners.spec.js @@ -8,21 +8,49 @@ import { import { itDoNotRunIf } from 'conditional-specs' describeWithShallowAndMount('options.listeners', mountingMethod => { - itDoNotRunIf(isRunningPhantomJS, 'handles inherit listeners', () => { - if (!listenersSupported) return - const aListener = () => {} - const wrapper = mountingMethod( - compileToFunctions('

'), - { - listeners: { - aListener + itDoNotRunIf( + isRunningPhantomJS || !listenersSupported, 'handles inherit listeners', () => { + if (!listenersSupported) return + const aListener = () => {} + const wrapper = mountingMethod( + compileToFunctions('

'), + { + listeners: { + aListener + } } + ) + + expect(wrapper.vm.$listeners.aListener.fns).to.equal(aListener) + }) + + itDoNotRunIf( + isRunningPhantomJS || !listenersSupported, + 'passes listeners to functional components', () => { + if (!listenersSupported) return + const TestComponent = { + render (h, ctx) { + ctx.listeners.aListener() + ctx.listeners.bListener() + return h('div') + }, + functional: true } - ) - expect(wrapper.vm.$listeners.aListener.fns).to.equal(aListener) - expect(wrapper.vm.$listeners.aListener.fns).to.equal(aListener) - }) + mountingMethod( + TestComponent, + { + context: { + on: { + bListener () {} + } + }, + listeners: { + aListener () {} + } + } + ) + }) itDoNotRunIf( vueVersion < 2.5, From 42307515218854e71b4e6795dcbedf18658c4d41 Mon Sep 17 00:00:00 2001 From: eddyerburgh Date: Fri, 23 Nov 2018 08:25:20 +0000 Subject: [PATCH 2/4] fix: use context for listeners and scoped slots --- .../create-functional-component.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/create-instance/create-functional-component.js b/packages/create-instance/create-functional-component.js index 61d07aaf9..00f78a696 100644 --- a/packages/create-instance/create-functional-component.js +++ b/packages/create-instance/create-functional-component.js @@ -16,15 +16,26 @@ export default function createFunctionalComponent ( validateSlots(mountingOptions.slots) } - const data = mountingOptions.context || - component.FunctionalRenderContext || {} - data.scopedSlots = createScopedSlots(mountingOptions.scopedSlots) + const context = + mountingOptions.context || + component.FunctionalRenderContext || + {} + + const listeners = mountingOptions.listeners + + if (listeners) { + Object.keys(listeners).forEach(key => { + context.on[key] = listeners[key] + }) + } + + context.scopedSlots = createScopedSlots(mountingOptions.scopedSlots) return { render (h: Function) { return h( component, - data, + context, (mountingOptions.context && mountingOptions.context.children && mountingOptions.context.children.map( From 554bfe1806019496e67150dab81a8273e13f00a1 Mon Sep 17 00:00:00 2001 From: eddyerburgh Date: Fri, 23 Nov 2018 08:29:35 +0000 Subject: [PATCH 3/4] refactor: remove unneccesary returns --- test/specs/mounting-options/listeners.spec.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/test/specs/mounting-options/listeners.spec.js b/test/specs/mounting-options/listeners.spec.js index 98f94cf88..23e4e4831 100644 --- a/test/specs/mounting-options/listeners.spec.js +++ b/test/specs/mounting-options/listeners.spec.js @@ -10,7 +10,6 @@ import { itDoNotRunIf } from 'conditional-specs' describeWithShallowAndMount('options.listeners', mountingMethod => { itDoNotRunIf( isRunningPhantomJS || !listenersSupported, 'handles inherit listeners', () => { - if (!listenersSupported) return const aListener = () => {} const wrapper = mountingMethod( compileToFunctions('

'), @@ -27,7 +26,6 @@ describeWithShallowAndMount('options.listeners', mountingMethod => { itDoNotRunIf( isRunningPhantomJS || !listenersSupported, 'passes listeners to functional components', () => { - if (!listenersSupported) return const TestComponent = { render (h, ctx) { ctx.listeners.aListener() From d81ffe7641386864ce4007e9d3bed2dc70b129f9 Mon Sep 17 00:00:00 2001 From: eddyerburgh Date: Fri, 23 Nov 2018 08:32:07 +0000 Subject: [PATCH 4/4] refactor: fix formatting --- test/specs/mounting-options/listeners.spec.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/specs/mounting-options/listeners.spec.js b/test/specs/mounting-options/listeners.spec.js index 23e4e4831..11487e201 100644 --- a/test/specs/mounting-options/listeners.spec.js +++ b/test/specs/mounting-options/listeners.spec.js @@ -9,7 +9,8 @@ import { itDoNotRunIf } from 'conditional-specs' describeWithShallowAndMount('options.listeners', mountingMethod => { itDoNotRunIf( - isRunningPhantomJS || !listenersSupported, 'handles inherit listeners', () => { + isRunningPhantomJS || !listenersSupported, + 'handles inherit listeners', () => { const aListener = () => {} const wrapper = mountingMethod( compileToFunctions('

'),