feat: add support for JSX and strings without a slot-scope attribute

.babelrc

@@ -1,5 +1,5 @@
 {
   "presets": ["env", "stage-2", "flow-vue"],
-  "plugins": ["transform-decorators-legacy"],
+  "plugins": ["transform-decorators-legacy", "transform-vue-jsx"],
   "comments": false
 }

package.json

@@ -32,6 +32,7 @@
     "babel-eslint": "^8.2.2",
     "babel-loader": "^7.1.3",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
     "babel-polyfill": "^6.23.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-flow-vue": "^1.0.0",

packages/create-instance/create-scoped-slots.js

@@ -32,46 +32,45 @@ function getVueTemplateCompilerHelpers (): { [name: string]: Function } {
   names.forEach(name => {
     helpers[name] = vue._renderProxy[name]
   })
+  helpers.$createElement = vue._renderProxy.$createElement
   return helpers
 }
 
 function validateEnvironment (): void {
-  if (vueVersion < 2.5) {
-    throwError(`the scopedSlots option is only supported in ` + `vue@2.5+.`)
+  if (vueVersion < 2.1) {
+    throwError(`the scopedSlots option is only supported in ` + `vue@2.1+.`)
   }
 }
 
 const scopedSlotRe = /<[^>]+ slot-scope=\"(.+)\"/
 
 export default function createScopedSlots (
-  scopedSlotsOption: ?{ [slotName: string]: string }
+  scopedSlotsOption: ?{ [slotName: string]: string | Function }
 ): { [slotName: string]: (props: Object) => VNode | Array<VNode>} {
   const scopedSlots = {}
   if (!scopedSlotsOption) {
     return scopedSlots
   }
   validateEnvironment()
   const helpers = getVueTemplateCompilerHelpers()
-  for (const name in scopedSlotsOption) {
-    const template = scopedSlotsOption[name]
-    const render = compileToFunctions(template).render
-    const match = template.match(scopedSlotRe)
+  for (const s in scopedSlotsOption) {
+    const slot = scopedSlotsOption[s]
+    const isFn = typeof slot === 'function'
+    const renderFn = isFn
+      ? slot
+      : compileToFunctions(slot).renderFn
 
-    if (!match) {
-      throwError(
-        `the root tag in a scopedSlot template must have a ` +
-        `slot-scope attribute`
-      )
-    }
+    const hasSlotScopeAttr = !isFn && slot.match(scopedSlotRe)
+    // // $FlowIgnore
+    const slotScope = hasSlotScopeAttr && hasSlotScopeAttr[1]
 
-    // $FlowIgnore
-    const slotScope = match[1]
-    const isDestructuring = isDestructuringSlotScope(slotScope)
-    scopedSlots[name] = function (props) {
-      if (isDestructuring) {
-        return render.call({ ...helpers, ...props })
+    scopedSlots[s] = function (props) {
+      if (isFn) {
+        return renderFn.call({ ...helpers }, props)
+      } else if (slotScope && !isDestructuringSlotScope(slotScope)) {
+        return renderFn.call({ ...helpers, [slotScope]: props })
       } else {
-        return render.call({ ...helpers, [slotScope]: props })
+        return renderFn.call({ ...helpers, ...props })
       }
     }
   }

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

@@ -1,7 +1,6 @@
 import {
   describeWithShallowAndMount,
-  vueVersion,
-  isRunningPhantomJS
+  vueVersion
 } from '~resources/utils'
 import ComponentWithScopedSlots from '~resources/components/component-with-scoped-slots.vue'
 import { itDoNotRunIf } from 'conditional-specs'
@@ -38,15 +37,15 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
       const notDestructuringWrapper = mountingMethod(
         {
           render: function () {
-            return this.$scopedSlots.default({
+            return this.$scopedSlots.named({
               index: 1,
               item: 'foo'
             })
           }
         },
         {
           scopedSlots: {
-            default:
+            named:
               '<p slot-scope="props">{{props.index}},{{props.item}}</p>'
           }
         }
@@ -64,7 +63,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         scopedSlots: {
           destructuring:
             '<p slot-scope="{ index, item }">{{index}},{{item}}</p>',
-          list: '<template  slot-scope="foo"><p>{{foo.index}},{{foo.text}}</p></template>',
+          list: '<template slot-scope="foo"><p>{{foo.index}},{{foo.text}}</p></template>',
           single: '<p slot-scope="bar">{{bar.text}}</p>',
           noProps: '<p slot-scope="baz">baz</p>'
         }
@@ -105,37 +104,49 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
     }
   )
 
-  itDoNotRunIf(
-    vueVersion >= 2.5 || isRunningPhantomJS,
-    'throws exception when vue version < 2.5',
-    () => {
-      const fn = () => {
-        mountingMethod(ComponentWithScopedSlots, {
-          scopedSlots: {
-            list: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
-          }
-        })
+  it('handles JSX', () => {
+    const wrapper = mountingMethod({
+      template: '<div><slot name="single" :text="foo"></slot></div>',
+      data: () => ({
+        foo: 'bar'
+      })
+    }, {
+      scopedSlots: {
+        single ({ text }) {
+          return <p>{{ text }}</p>
+        }
       }
-      const message =
-        '[vue-test-utils]: the scopedSlots option is only supported in [email protected]+.'
-      expect(fn)
-        .to.throw()
-        .with.property('message', message)
-    }
-  )
+    })
+    expect(wrapper.html()).to.equal('<div><p>bar</p></div>')
+  })
 
-  it(
-    'throws exception when template does not include slot-scope attribute',
+  it('handles no slot-scope', () => {
+    const wrapper = mountingMethod({
+      template: '<div><slot name="single" :text="foo" :i="123"></slot></div>',
+      data: () => ({
+        foo: 'bar'
+      })
+    }, {
+      scopedSlots: {
+        single: '<p>{{text}},{{i}}</p>'
+      }
+    })
+    expect(wrapper.html()).to.equal('<div><p>bar,123</p></div>')
+  })
+
+  itDoNotRunIf(
+    vueVersion > 2.0,
+    'throws exception when vue version < 2.1',
     () => {
       const fn = () => {
         mountingMethod(ComponentWithScopedSlots, {
           scopedSlots: {
-            list: '<p>{{foo.index}},{{foo.text}}</p>'
+            list: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
           }
         })
       }
       const message =
-        '[vue-test-utils]: the root tag in a scopedSlot template must have a slot-scope attribute'
+        '[vue-test-utils]: the scopedSlots option is only supported in [email protected]+.'
       expect(fn)
         .to.throw()
         .with.property('message', message)

yarn.lock

@@ -1790,6 +1790,12 @@ babel-plugin-transform-strict-mode@^6.24.1:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
+babel-plugin-transform-vue-jsx@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-3.7.0.tgz#d40492e6692a36b594f7e9a1928f43e969740960"
+  dependencies:
+    esutils "^2.0.2"
+
 babel-plugin-transform-vue-jsx@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-4.0.1.tgz#2c8bddce87a6ef09eaa59869ff1bfbeeafc5f88d"