Support v-slot

package.json

@@ -77,12 +77,12 @@
  "sinon-chai": "^3.3.0",
  "typescript": "3",
  "vee-validate": "^2.1.3",
- "vue": "^2.5.22",
+ "vue": "^2.6.11",
  "vue-class-component": "^6.1.2",
  "vue-loader": "^13.6.2",
  "vue-router": "^3.0.1",
- "vue-server-renderer": "^2.5.22",
- "vue-template-compiler": "^2.5.22",
+ "vue-server-renderer": "^2.6.11",
+ "vue-template-compiler": "^2.6.11",
  "vuepress": "^0.14.2",
  "vuepress-theme-vue": "^1.0.3",
  "vuex": "^3.0.1",

packages/create-instance/create-component-stubs.js

@@ -1,7 +1,13 @@
 // @flow
 
 import Vue from 'vue'
-import { throwError, camelize, capitalize, hyphenate } from '../shared/util'
+import {
+ throwError,
+ camelize,
+ capitalize,
+ hyphenate,
+ keys
+} from '../shared/util'
 import {
  componentNeedsCompiling,
  templateContainsComponent,
@@ -75,6 +81,24 @@ function resolveOptions(component, _Vue) {
  return options
 }
 
+function getScopedSlotRenderFunctions(ctx: any): Array<string> {
+ // In Vue 2.6+ a new v-slot syntax was introduced
+ // scopedSlots are now saved in parent._vnode.data.scopedSlots
+ // We filter out the _normalized and $stable key
+ if (
+ ctx &&
+ ctx.$options &&
+ ctx.$options.parent._vnode &&
+ ctx.$options.parent._vnode.data &&
+ ctx.$options.parent._vnode.data.scopedSlots
+ ) {
+ const slotKeys: Array<string> = ctx.$options.parent._vnode.data.scopedSlots
+ return keys(slotKeys).filter(x => x[0] !== '_' && !x.includes('$'))
+ }
+
+ return []
+}
+
 export function createStubFromComponent(
  originalComponent: Component,
  name: string,
@@ -109,7 +133,12 @@ export function createStubFromComponent(
  ...this.$props
  }
  },
- context ? context.children : this.$options._renderChildren
+ context
+ ? context.children
+ : this.$options._renderChildren ||
+ getScopedSlotRenderFunctions(this).map(x =>
+ this.$options.parent._vnode.data.scopedSlots[x]()
+ )
  )
  }
  }

packages/shared/util.js

@@ -36,6 +36,10 @@ function hasOwnProperty(obj, prop) {
  return Object.prototype.hasOwnProperty.call(obj, prop)
 }
 
+export function keys<T: string>(obj: any): Array<T> {
+ return Object.keys(obj)
+}
+
 export function resolveComponent(id: string, components: Object) {
  if (typeof id !== 'string') {
  return

test/resources/components/component-with-v-slot-syntax.vue

@@ -0,0 +1,17 @@
+<template>
+ <ComponentWithVSlot>
+ <template v-slot:newSyntax>
+ <p class="new-example">new slot syntax</p>
+ </template>
+ </ComponentWithVSlot>
+</template>
+
+<script>
+import ComponentWithVSlot from './component-with-v-slot.vue'
+
+export default {
+ name: 'ComponentWithVSlotSyntax',
+
+ components: { ComponentWithVSlot }
+}
+</script>

test/resources/components/component-with-v-slot.vue

@@ -0,0 +1,11 @@
+<template>
+ <div>
+ <slot name="newSyntax" />
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'ComponentWithVSlot'
+}
+</script>

test/specs/shallow-mount.spec.js

@@ -7,6 +7,8 @@ import ComponentWithNestedChildren from '~resources/components/component-with-ne
 import ComponentWithLifecycleHooks from '~resources/components/component-with-lifecycle-hooks.vue'
 import ComponentWithoutName from '~resources/components/component-without-name.vue'
 import ComponentAsAClassWithChild from '~resources/components/component-as-a-class-with-child.vue'
+import ComponentWithVSlotSyntax from '~resources/components/component-with-v-slot-syntax.vue'
+import ComponentWithVSlot from '~resources/components/component-with-v-slot.vue'
 import RecursiveComponent from '~resources/components/recursive-component.vue'
 import { vueVersion } from '~resources/utils'
 import { describeRunIf, itDoNotRunIf } from 'conditional-specs'
@@ -96,6 +98,42 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
  )
  })
 
+ it('renders SFC with named slots with v-slot syntax', () => {
+ const wrapper = shallowMount(ComponentWithVSlotSyntax)
+
+ expect(wrapper.find(ComponentWithVSlot).exists()).to.equal(true)
+ expect(wrapper.find('.new-example').exists()).to.equal(true)
+ expect(wrapper.html()).to.equal(
+ '<componentwithvslot-stub>\n' +
+ ' <p class="new-example">new slot syntax</p>\n' +
+ '</componentwithvslot-stub>'
+ )
+ })
+
+ it('renders named slots with v-slot syntax', () => {
+ const localVue = createLocalVue()
+ localVue.component('Foo', {
+ template: '<div><slot name="newSyntax" /></div>'
+ })
+ const TestComponent = {
+ template: `
+ <Foo>
+ <template v-slot:newSyntax>
+ <p class="new-example">text</p>
+ </template>
+ </Foo>
+ `
+ }
+ const wrapper = shallowMount(TestComponent, {
+ localVue
+ })
+ expect(wrapper.find({ name: 'Foo' }).exists()).to.equal(true)
+ expect(wrapper.find('.new-example').exists()).to.equal(true)
+ expect(wrapper.html()).to.equal(
+ '<foo-stub>\n' + ' <p class="new-example">text</p>\n' + '</foo-stub>'
+ )
+ })
+
  it('renders no children if none supplied', () => {
  const TestComponent = {
  template: '<child />',

yarn.lock

@@ -6290,7 +6290,7 @@ lodash.sortby@^4.7.0:
  version "4.7.0"
  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
 
-lodash.template@^4.0.2, lodash.template@^4.4.0:
+lodash.template@^4.0.2, lodash.template@^4.4.0, lodash.template@^4.5.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
@@ -8787,6 +8787,11 @@ serialize-javascript@^1.4.0:
  version "1.5.0"
  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.5.0.tgz#1aa336162c88a890ddad5384baebc93a655161fe"
 
+serialize-javascript@^2.1.2:
+ version "2.1.2"
+ resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
+ integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
+
 set-blocking@^2.0.0, set-blocking@~2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@@ -10092,18 +10097,18 @@ vue-server-renderer@^2.5.16:
  serialize-javascript "^1.3.0"
  source-map "0.5.6"
 
-vue-server-renderer@^2.5.22:
- version "2.5.22"
- resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.5.22.tgz#f119efef289c865adc22fda0ae7595299bedbdcf"
- integrity sha512-PQ0PubA6b2MyZud/gepWeiUuDFSbRfa6h1qYINcbwXRr4Z3yLTHprEQuFnWikdkTkZpeLFYUqZrDxPbDcJ71mA==
+vue-server-renderer@^2.6.11:
+ version "2.6.11"
+ resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.11.tgz#be8c9abc6aacc309828a755c021a05fc474b4bc3"
+ integrity sha512-V3faFJHr2KYfdSIalL+JjinZSHYUhlrvJ9pzCIjjwSh77+pkrsXpK4PucdPcng57+N77pd1LrKqwbqjQdktU1A==
  dependencies:
  chalk "^1.1.3"
  hash-sum "^1.0.2"
  he "^1.1.0"
- lodash.template "^4.4.0"
+ lodash.template "^4.5.0"
  lodash.uniq "^4.5.0"
  resolve "^1.2.0"
- serialize-javascript "^1.3.0"
+ serialize-javascript "^2.1.2"
  source-map "0.5.6"
 
 vue-style-loader@^3.0.0:
@@ -10127,10 +10132,10 @@ vue-template-compiler@^2.5.16:
  de-indent "^1.0.2"
  he "^1.1.0"
 
-vue-template-compiler@^2.5.22:
- version "2.5.22"
- resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.22.tgz#c3d3c02c65f1908205c4fbd3b0ef579e51239955"
- integrity sha512-1VTw/NPTUeHNiwhkq6NkFzO7gYLjFCueBN0FX8NEiQIemd5EUMQ5hxrF7O0zCPo5tae+U9S/scETPea+hIz8Eg==
+vue-template-compiler@^2.6.11:
+ version "2.6.11"
+ resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
+ integrity sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==
  dependencies:
  de-indent "^1.0.2"
  he "^1.1.0"
@@ -10143,10 +10148,10 @@ vue@^2.5.16:
  version "2.5.16"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
 
-vue@^2.5.22:
- version "2.5.22"
- resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.22.tgz#3bf88041af08b8539c37b268b70ca79245e9cc30"
- integrity sha512-pxY3ZHlXNJMFQbkjEgGVMaMMkSV1ONpz+4qB55kZuJzyJOhn6MSy/YZdzhdnumegNzVTL/Dn3Pp4UrVBYt1j/g==
+vue@^2.6.11:
+ version "2.6.11"
+ resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
+ integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
 
 vuepress-html-webpack-plugin@^3.2.0:
  version "3.2.0"