fix: improve scopedSlots option

Author: 38elements

packages/create-instance/create-instance.js

@@ -10,6 +10,7 @@ import extractInstanceOptions from './extract-instance-options'
 import createFunctionalComponent from './create-functional-component'
 import { componentNeedsCompiling } from 'shared/validators'
 import { validateSlots } from './validate-slots'
+import getScopedSlots from './get-scoped-slots'
 
 export default function createInstance (
   component: Component,
@@ -122,6 +123,8 @@ export default function createInstance (
     options.provide = () => obj
   }
 
+  const scopedSlots = getScopedSlots(options.scopedSlots)
+
   const Parent = _Vue.extend({
     provide: options.provide,
     render (h) {
@@ -134,7 +137,8 @@ export default function createInstance (
           ref: 'vm',
           props: options.propsData,
           on: options.listeners,
-          attrs: options.attrs
+          attrs: options.attrs,
+          scopedSlots
         },
         slots
       )

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

@@ -0,0 +1,87 @@
+// @flow
+
+import Vue from 'vue'
+import { compileToFunctions } from 'vue-template-compiler'
+import { throwError, vueVersion } from 'shared/util'
+
+function isDestructuringSlotScope (slotScope: string): boolean {
+  return slotScope[0] === '{' && slotScope[slotScope.length - 1] === '}'
+}
+
+function getVueTemplateCompilerHelpers (): { [name: string]: Function } {
+  const vue = new Vue()
+  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] = vue._renderProxy[name]
+  })
+  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 ` + `[email protected]+.`)
+  }
+}
+
+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.`
+    )
+  }
+}
+
+export default function getScopedSlots (
+  scopedSlotsOption: ?{ [slotName: string]: string }
+): { [slotName: string]: (props: Object) => 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 })
+      } else {
+        return render.call({ ...helpers, [slotScope]: props })
+      }
+    }
+  }
+  return scopedSlots
+}

packages/test-utils/src/add-scoped-slots.js

@@ -12,7 +12,6 @@ import { findAllVueComponentsFromVm } from './find-vue-components'
 import { mergeOptions } from 'shared/merge-options'
 import config from './config'
 import warnIfNoWindow from './warn-if-no-window'
-import { addScopedSlots } from './add-scoped-slots'
 
 Vue.config.productionTip = false
 Vue.config.devtools = false
@@ -46,16 +45,6 @@ export default function mount (
   // Workaround for Vue < 2.5
   vm._staticTrees = []
 
-  if (options.scopedSlots) {
-    addScopedSlots(vm, options.scopedSlots)
-
-    if (mergedOptions.sync) {
-      vm._watcher.sync = true
-    }
-
-    vm.$forceUpdate()
-  }
-
   const componentsWithError = findAllVueComponentsFromVm(vm).filter(
     c => c._error
   )

packages/test-utils/src/mount.js

@@ -13,6 +13,48 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
     window = windowSave // eslint-disable-line no-native-reassign
   })
 
+  itDoNotRunIf(
+    vueVersion < 2.5 || isRunningPhantomJS,
+    'mounts component scoped slots',
+    () => {
+      const wrapperDefault = mountingMethod(
+        {
+          render: function () {
+            return this.$scopedSlots.default({
+              index: 1,
+              item: 'foo'
+            })
+          }
+        },
+        {
+          scopedSlots: {
+            default:
+              '<p slot-scope="{ index, item }">{{index}},{{item}}</p>'
+          }
+        }
+      )
+      expect(wrapperDefault.html()).to.equal('<p>1,foo</p>')
+
+      const wrapperFoo = mountingMethod(
+        {
+          render: function () {
+            return this.$scopedSlots.foo({
+              index: 1,
+              item: 'foo'
+            })
+          }
+        },
+        {
+          scopedSlots: {
+            foo:
+              '<p slot-scope="{ index, item }">{{index}},{{item}}</p>'
+          }
+        }
+      )
+      expect(wrapperFoo.html()).to.equal('<p>1,foo</p>')
+    }
+  )
+
   itDoNotRunIf(
     vueVersion < 2.5 || isRunningPhantomJS,
     'mounts component scoped slots',