feat: add support for JSX scopedSlots value (#871)

Author: eddyerburgh

.babelrc

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

docs/api/options.md

@@ -69,30 +69,52 @@ expect(wrapper.find('div')).toBe(true)
 
 ## scopedSlots
 
-- type: `{ [name: string]: string }`
+- type: `{ [name: string]: string|Function }`
 
-Provide an object of scoped slots contents to the component. The key corresponds to the slot name. The value can be a template string.
+Provide an object of scoped slots to the component. The key corresponds to the slot name.
 
-There are three limitations.
+You can set the name of the props using the slot-scope attribute:
 
-* This option is only supported in vue@2.5+.
+```js
+shallowMount(Component, {
+  scopedSlots: {
+    foo: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
+  }
+})
+```
 
-* You can not use `<template>` tag as the root element in the `scopedSlots` option.
+Otherwise props are available as a `props` object when the slot is evaluated:
 
-* This does not support PhantomJS.  
-You can use [Puppeteer](https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer) as an alternative.
+```js
+shallowMount(Component, {
+  scopedSlots: {
+    default: '<p>{{props.index}},{{props.text}}</p>'
+  }
+})
+```
 
-Example:
+You can also pass a function that takes the props as an argument:
 
 ```js
-const wrapper = shallowMount(Component, {
+shallowMount(Component, {
+  scopedSlots: {
+    foo: function (props) {
+      return this.$createElement('div', props.index)
+    }
+  }
+})
+```
+
+Or you can use JSX. If write JSX in a method, `this.$createElement` is auto-injected by babel-plugin-transform-vue-jsx:
+
+```js
+shallowMount(Component, {
   scopedSlots: {
-    foo: '<p slot-scope="props">{{props.index}},{{props.text}}</p>'
+    foo (props) {
+      return <div>{ props.text }</div>
+    }
   }
 })
-expect(wrapper.find('#fooWrapper').html()).toBe(
-  `<div id="fooWrapper"><p>0,text1</p><p>1,text2</p><p>2,text3</p></div>`
-)
 ```
 
 ## stubs

flow/options.flow.js

@@ -5,7 +5,7 @@ declare type Options = {
   mocks?: Object,
   methods?: { [key: string]: Function },
   slots?: SlotsObject,
-  scopedSlots?: { [key: string]: string },
+  scopedSlots?: { [key: string]: string | Function },
   localVue?: Component,
   provide?: Object,
   stubs?: Stubs,

package.json

@@ -31,7 +31,9 @@
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.2",
     "babel-loader": "^7.1.3",
+    "babel-plugin-syntax-jsx": "^6.18.0",
     "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",
@@ -61,12 +63,12 @@
     "rollup": "^0.58.2",
     "sinon": "^2.3.2",
     "sinon-chai": "^2.10.0",
-    "vue": "^2.5.16",
+    "vue": "2.5.16",
     "vue-class-component": "^6.1.2",
     "vue-loader": "^13.6.2",
     "vue-router": "^3.0.1",
-    "vue-server-renderer": "^2.5.16",
-    "vue-template-compiler": "^2.5.16",
+    "vue-server-renderer": "2.5.16",
+    "vue-template-compiler": "2.5.16",
     "vuepress": "^0.10.0",
     "vuepress-theme-vue": "^1.0.3",
     "vuetify": "^0.16.9",

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

@@ -32,55 +32,59 @@ function getVueTemplateCompilerHelpers (): { [name: string]: Function } {
   names.forEach(name => {
     helpers[name] = vue._renderProxy[name]
   })
+  helpers.$createElement = vue._renderProxy.$createElement
   return helpers
 }
 
 function validateEnvironment (): void {
-  if (window.navigator.userAgent.match(/PhantomJS/i)) {
-    throwError(
-      `the scopedSlots option does not support PhantomJS. ` +
-        `Please use Puppeteer, or pass a component.`
-    )
-  }
-  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+.`)
   }
 }
 
-function validateTempldate (template: string): void {
-  if (template.trim().substr(0, 9) === '<template') {
-    throwError(
-      `the scopedSlots option does not support a template ` +
-        `tag as the root element.`
-    )
+const slotScopeRe = /<[^>]+ slot-scope=\"(.+)\"/
+
+// Hide warning about <template> disallowed as root element
+function customWarn (msg) {
+  if (msg.indexOf('Cannot use <template> as component root element') === -1) {
+    console.error(msg)
   }
 }
 
 export default function createScopedSlots (
-  scopedSlotsOption: ?{ [slotName: string]: string }
-): { [slotName: string]: (props: Object) => VNode | Array<VNode>} {
+  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]
-    validateTempldate(template)
-    const render = compileToFunctions(template).render
-    const domParser = new window.DOMParser()
-    const _document = domParser.parseFromString(template, 'text/html')
-    const slotScope = _document.body.firstChild.getAttribute(
-      'slot-scope'
-    )
-    const isDestructuring = isDestructuringSlotScope(slotScope)
-    scopedSlots[name] = function (props) {
-      if (isDestructuring) {
-        return render.call({ ...helpers, ...props })
+  for (const scopedSlotName in scopedSlotsOption) {
+    const slot = scopedSlotsOption[scopedSlotName]
+    const isFn = typeof slot === 'function'
+    // Type check to silence flow (can't use isFn)
+    const renderFn = typeof slot === 'function'
+      ? slot
+      : compileToFunctions(slot, { warn: customWarn }).render
+
+    const hasSlotScopeAttr = !isFn && slot.match(slotScopeRe)
+    const slotScope = hasSlotScopeAttr && hasSlotScopeAttr[1]
+    scopedSlots[scopedSlotName] = function (props) {
+      let res
+      if (isFn) {
+        res = renderFn.call({ ...helpers }, props)
+      } else if (slotScope && !isDestructuringSlotScope(slotScope)) {
+        res = renderFn.call({ ...helpers, [slotScope]: props })
+      } else if (slotScope && isDestructuringSlotScope(slotScope)) {
+        res = renderFn.call({ ...helpers, ...props })
       } else {
-        return render.call({ ...helpers, [slotScope]: props })
+        res = renderFn.call({ ...helpers, props })
       }
+      // res is Array if <template> is a root element
+      return Array.isArray(res) ? res[0] : res
     }
   }
   return scopedSlots

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'
@@ -14,7 +13,41 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
   })
 
   itDoNotRunIf(
-    vueVersion < 2.5 || isRunningPhantomJS,
+    vueVersion < 2.1,
+    'handles templates as the root node', () => {
+      const wrapper = mountingMethod({
+        template: '<div><slot name="single" :text="foo" :i="123"></slot></div>',
+        data: () => ({
+          foo: 'bar'
+        })
+      }, {
+        scopedSlots: {
+          single: '<template><p>{{props.text}},{{props.i}}</p></template>'
+        }
+      })
+      expect(wrapper.html()).to.equal('<div><p>bar,123</p></div>')
+    })
+
+  itDoNotRunIf(
+    vueVersion < 2.1,
+    'handles render functions', () => {
+      const wrapper = mountingMethod({
+        template: '<div><slot name="single" :text="foo" /></div>',
+        data: () => ({
+          foo: 'bar'
+        })
+      }, {
+        scopedSlots: {
+          single: function (props) {
+            return this.$createElement('p', props.text)
+          }
+        }
+      })
+      expect(wrapper.html()).to.equal('<div><p>bar</p></div>')
+    })
+
+  itDoNotRunIf(
+    vueVersion < 2.5,
     'mounts component scoped slots in render function',
     () => {
       const destructuringWrapper = mountingMethod(
@@ -29,7 +62,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         {
           scopedSlots: {
             default:
-              '<p slot-scope="{ index, item }">{{index}},{{item}}</p>'
+              '<template slot-scope="{ index, item }"><p>{{index}},{{item}}</p></template>'
           }
         }
       )
@@ -38,16 +71,16 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
       const notDestructuringWrapper = mountingMethod(
         {
           render: function () {
-            return this.$scopedSlots.default({
+            return this.$scopedSlots.named({
               index: 1,
               item: 'foo'
             })
           }
         },
         {
           scopedSlots: {
-            default:
-              '<p slot-scope="props">{{props.index}},{{props.item}}</p>'
+            named:
+              '<p slot-scope="foo">{{foo.index}},{{foo.item}}</p>'
           }
         }
       )
@@ -56,15 +89,15 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
   )
 
   itDoNotRunIf(
-    vueVersion < 2.5 || isRunningPhantomJS,
+    vueVersion < 2.5,
     'mounts component scoped slots',
     () => {
       const wrapper = mountingMethod(ComponentWithScopedSlots, {
         slots: { default: '<span>123</span>' },
         scopedSlots: {
           destructuring:
             '<p slot-scope="{ index, item }">{{index}},{{item}}</p>',
-          list: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>',
+          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>'
         }
@@ -106,51 +139,43 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
   )
 
   itDoNotRunIf(
-    vueVersion < 2.5 || isRunningPhantomJS,
-    'throws exception when it is seted to a template tag at top',
-    () => {
-      const fn = () => {
-        mountingMethod(ComponentWithScopedSlots, {
-          scopedSlots: {
-            single: '<template></template>'
-          }
+    vueVersion < 2.5,
+    'handles JSX', () => {
+      const wrapper = mountingMethod({
+        template: '<div><slot name="single" :text="foo"></slot></div>',
+        data: () => ({
+          foo: 'bar'
         })
-      }
-      const message =
-        '[vue-test-utils]: the scopedSlots option does not support a template tag as the root element.'
-      expect(fn)
-        .to.throw()
-        .with.property('message', message)
-    }
-  )
+      }, {
+        scopedSlots: {
+          single ({ text }) {
+            return <p>{ text }</p>
+          }
+        }
+      })
+      expect(wrapper.html()).to.equal('<div><p>bar</p></div>')
+    })
 
   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>'
-          }
+    vueVersion < 2.5,
+    'handles no slot-scope', () => {
+      const wrapper = mountingMethod({
+        template: '<div><slot name="single" :text="foo" :i="123"></slot></div>',
+        data: () => ({
+          foo: 'bar'
         })
-      }
-      const message =
-        '[vue-test-utils]: the scopedSlots option is only supported in vue@2.5+.'
-      expect(fn)
-        .to.throw()
-        .with.property('message', message)
-    }
-  )
+      }, {
+        scopedSlots: {
+          single: '<p>{{props.text}},{{props.i}}</p>'
+        }
+      })
+      expect(wrapper.html()).to.equal('<div><p>bar,123</p></div>')
+    })
 
   itDoNotRunIf(
-    vueVersion < 2.5,
-    'throws exception when using PhantomJS',
+    vueVersion > 2.0,
+    'throws exception when vue version < 2.1',
     () => {
-      if (window.navigator.userAgent.match(/Chrome|PhantomJS/i)) {
-        return
-      }
-      window = { navigator: { userAgent: 'PhantomJS' }} // eslint-disable-line no-native-reassign
       const fn = () => {
         mountingMethod(ComponentWithScopedSlots, {
           scopedSlots: {
@@ -159,7 +184,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
         })
       }
       const message =
-        '[vue-test-utils]: the scopedSlots option does not support PhantomJS. Please use Puppeteer, or pass a component.'
+        '[vue-test-utils]: the scopedSlots option is only supported in vue@2.1+.'
       expect(fn)
         .to.throw()
         .with.property('message', message)