feat: destructuring slot scope (#547)

Author: 38elements

packages/create-instance/create-instance.js

@@ -15,6 +15,19 @@ import deleteoptions from './delete-mounting-options'
 import createFunctionalComponent from './create-functional-component'
 import { componentNeedsCompiling } from 'shared/validators'
 
+function isDestructuringSlotScope (slotScope: string): boolean {
+  return slotScope[0] === '{' && slotScope[slotScope.length - 1] === '}'
+}
+
+function getVueTemplateCompilerHelpers (proxy: Object): Object {
+  const helpers = {}
+  const names = ['_c', '_o', '_n', '_s', '_l', '_t', '_q', '_i', '_m', '_f', '_k', '_b', '_v', '_e', '_u', '_g']
+  names.forEach((name) => {
+    helpers[name] = proxy[name]
+  })
+  return helpers
+}
+
 export default function createInstance (
   component: Component,
   options: Options,
@@ -74,12 +87,13 @@ export default function createInstance (
         const slotScope = vm.$_vueTestUtils_slotScopes[name]
         if (scopedSlotFn) {
           props = { ...bindObject, ...props }
-          const proxy = {}
-          const helpers = ['_c', '_o', '_n', '_s', '_l', '_t', '_q', '_i', '_m', '_f', '_k', '_b', '_v', '_e', '_u', '_g']
-          helpers.forEach((key) => {
-            proxy[key] = vm._renderProxy[key]
-          })
-          proxy[slotScope] = props
+          const helpers = getVueTemplateCompilerHelpers(vm._renderProxy)
+          let proxy = { ...helpers }
+          if (isDestructuringSlotScope(slotScope)) {
+            proxy = { ...helpers, ...props }
+          } else {
+            proxy[slotScope] = props
+          }
           return scopedSlotFn.call(proxy)
         } else {
           return renderSlot.call(vm._renderProxy, name, feedback, props, bindObject)

test/resources/components/component-with-scoped-slots.vue

@@ -1,19 +1,25 @@
 <template>
   <div>
-    <div id="foo">
-      <slot name="foo"
-            v-for="(item, index) in foo"
-            :text="item.text"
+    <div id="destructuring">
+      <slot name="destructuring"
+            v-for="(item, index) in items"
+            :item="item"
             :index="index">
       </slot>
     </div>
-    <div id="bar">
-      <slot name="bar"
-            v-for="(item, index) in bar"
+    <div id="list">
+      <slot name="list"
+            v-for="(item, index) in foo"
             :text="item.text"
             :index="index">
       </slot>
     </div>
+    <div id="single">
+      <slot name="single" :text="bar"></slot>
+    </div>
+    <div id="noProps">
+      <slot name="noProps"></slot>
+    </div>
     <div id="slots">
       <slot></slot>
     </div>
@@ -25,8 +31,9 @@
     name: 'component-with-scoped-slots',
     data () {
       return {
+        items: ['1', '2', '3'],
         foo: [{ text: 'a1' }, { text: 'a2' }, { text: 'a3' }],
-        bar: [{ text: 'A1' }, { text: 'A2' }, { text: 'A3' }]
+        bar: 'abc'
       }
     }
   }

test/specs/mounting-options/scopedSlots.spec.js

@@ -19,17 +19,25 @@ describeWithShallowAndMount('scopedSlots', (mountingMethod) => {
       const wrapper = mountingMethod(ComponentWithScopedSlots, {
         slots: { default: '<span>123</span>' },
         scopedSlots: {
-          'foo': '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>',
-          'bar': '<p slot-scope="bar">{{bar.text}},{{bar.index}}</p>'
+          destructuring: '<p slot-scope="{ index, item }">{{index}},{{item}}</p>',
+          list: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>',
+          single: '<p slot-scope="bar">{{bar.text}}</p>',
+          noProps: '<p slot-scope="baz">baz</p>'
         }
       })
+      expect(wrapper.find('#destructuring').html()).to.equal('<div id="destructuring"><p>0,1</p><p>1,2</p><p>2,3</p></div>')
       expect(wrapper.find('#slots').html()).to.equal('<div id="slots"><span>123</span></div>')
-      expect(wrapper.find('#foo').html()).to.equal('<div id="foo"><p>0,a1</p><p>1,a2</p><p>2,a3</p></div>')
-      expect(wrapper.find('#bar').html()).to.equal('<div id="bar"><p>A1,0</p><p>A2,1</p><p>A3,2</p></div>')
+      expect(wrapper.find('#list').html()).to.equal('<div id="list"><p>0,a1</p><p>1,a2</p><p>2,a3</p></div>')
+      expect(wrapper.find('#single').html()).to.equal('<div id="single"><p>abc</p></div>')
+      expect(wrapper.find('#noProps').html()).to.equal('<div id="noProps"><p>baz</p></div>')
+      wrapper.vm.items = [4, 5, 6]
       wrapper.vm.foo = [{ text: 'b1' }, { text: 'b2' }, { text: 'b3' }]
-      wrapper.vm.bar = [{ text: 'B1' }, { text: 'B2' }, { text: 'B3' }]
-      expect(wrapper.find('#foo').html()).to.equal('<div id="foo"><p>0,b1</p><p>1,b2</p><p>2,b3</p></div>')
-      expect(wrapper.find('#bar').html()).to.equal('<div id="bar"><p>B1,0</p><p>B2,1</p><p>B3,2</p></div>')
+      wrapper.vm.bar = 'ABC'
+      expect(wrapper.find('#destructuring').html()).to.equal('<div id="destructuring"><p>0,4</p><p>1,5</p><p>2,6</p></div>')
+      expect(wrapper.find('#slots').html()).to.equal('<div id="slots"><span>123</span></div>')
+      expect(wrapper.find('#list').html()).to.equal('<div id="list"><p>0,b1</p><p>1,b2</p><p>2,b3</p></div>')
+      expect(wrapper.find('#single').html()).to.equal('<div id="single"><p>ABC</p></div>')
+      expect(wrapper.find('#noProps').html()).to.equal('<div id="noProps"><p>baz</p></div>')
     }
   )
 
@@ -38,7 +46,7 @@ describeWithShallowAndMount('scopedSlots', (mountingMethod) => {
       const fn = () => {
         mountingMethod(ComponentWithScopedSlots, {
           scopedSlots: {
-            'foo': '<template></template>'
+            single: '<template></template>'
           }
         })
       }
@@ -52,7 +60,7 @@ describeWithShallowAndMount('scopedSlots', (mountingMethod) => {
       const fn = () => {
         mountingMethod(ComponentWithScopedSlots, {
           scopedSlots: {
-            'foo': '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
+            list: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
           }
         })
       }
@@ -70,7 +78,7 @@ describeWithShallowAndMount('scopedSlots', (mountingMethod) => {
       const fn = () => {
         mountingMethod(ComponentWithScopedSlots, {
           scopedSlots: {
-            'foo': '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
+            list: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
           }
         })
       }