fix: revolve context.slots before setup

Author: liximomo

src/component/component.ts

@@ -42,7 +42,7 @@ type VueProxy<PropsOptions, RawBindings> = Vue2ComponentOptions<
 
 export interface SetupContext {
   readonly attrs: Record<string, string>;
-  readonly slots: { [key: string]: VNode[] | undefined };
+  readonly slots: { [key: string]: (...args: any[]) => VNode[] };
   readonly parent: ComponentInstance | null;
   readonly root: ComponentInstance;
 

src/helper.ts

@@ -1,7 +1,7 @@
-import Vue, { ComponentOptions, VueConstructor } from 'vue';
+import Vue, { VNode, ComponentOptions, VueConstructor } from 'vue';
 import { ComponentInstance } from './component';
 import { currentVue, getCurrentVM } from './runtimeContext';
-import { assert } from './utils';
+import { assert, warn } from './utils';
 
 export function ensureCurrentVMInFn(hook: string): ComponentInstance {
   const vm = getCurrentVM();
@@ -25,3 +25,42 @@ export function createComponentInstance<V extends Vue = Vue>(
 export function isComponentInstance(obj: any) {
   return currentVue && obj instanceof currentVue;
 }
+
+export function createSlotProxy(vm: ComponentInstance, slotName: string) {
+  return (...args: any) => {
+    if (!vm.$scopedSlots[slotName]) {
+      return warn(`slots.${slotName}() got called outside of the "render()" scope`, vm);
+    }
+
+    return vm.$scopedSlots[slotName]!.apply(vm, args);
+  };
+}
+
+export function resolveSlots(
+  slots: { [key: string]: Function } | void,
+  normalSlots: { [key: string]: VNode[] | undefined }
+): { [key: string]: true } {
+  let res: { [key: string]: true };
+  if (!slots) {
+    res = {};
+  } else if (slots._normalized) {
+    // fast path 1: child component re-render only, parent did not change
+    return slots._normalized as any;
+  } else {
+    res = {};
+    for (const key in slots) {
+      if (slots[key] && key[0] !== '$') {
+        res[key] = true;
+      }
+    }
+  }
+
+  // expose normal slots on scopedSlots
+  for (const key in normalSlots) {
+    if (!(key in res)) {
+      res[key] = true;
+    }
+  }
+
+  return res;
+}

src/setup.ts

@@ -2,6 +2,7 @@ import { VueConstructor } from 'vue';
 import { ComponentInstance, SetupContext, SetupFunction, Data } from './component';
 import { Ref, isRef, isReactive, nonReactive } from './reactivity';
 import { getCurrentVM, setCurrentVM } from './runtimeContext';
+import { resolveSlots, createSlotProxy } from './helper';
 import { hasOwn, isPlainObject, assert, proxy, warn, isFunction } from './utils';
 import { ref } from './apis/state';
 import vmStateManager from './vmStateManager';
@@ -63,6 +64,31 @@ function updateTemplateRef(vm: ComponentInstance) {
   vmStateManager.set(vm, 'refs', validNewKeys);
 }
 
+function resolveScopedSlots(vm: ComponentInstance, slotsProxy: { [x: string]: Function }): void {
+  const parentVode = (vm.$options as any)._parentVnode;
+  if (!parentVode) return;
+
+  const prevSlots = vmStateManager.get(vm, 'slots') || [];
+  const curSlots = resolveSlots(parentVode.data.scopedSlots, vm.$slots);
+  // remove staled slots
+  for (let index = 0; index < prevSlots.length; index++) {
+    const key = prevSlots[index];
+    if (!curSlots[key]) {
+      delete slotsProxy[key];
+    }
+  }
+
+  // proxy fresh slots
+  const slotNames = Object.keys(curSlots);
+  for (let index = 0; index < slotNames.length; index++) {
+    const key = slotNames[index];
+    if (!slotsProxy[key]) {
+      slotsProxy[key] = createSlotProxy(vm, key);
+    }
+  }
+  vmStateManager.set(vm, 'slots', slotNames);
+}
+
 function activateCurrentInstance(
   vm: ComponentInstance,
   fn: (vm_: ComponentInstance) => any,
@@ -134,21 +160,26 @@ export function mixin(Vue: VueConstructor) {
   function initSetup(vm: ComponentInstance, props: Record<any, any> = {}) {
     const setup = vm.$options.setup!;
     const ctx = createSetupContext(vm);
+
+    // resolve scopedSlots and slots to functions
+    resolveScopedSlots(vm, ctx.slots);
+
     let binding: ReturnType<SetupFunction<Data, Data>> | undefined | null;
     activateCurrentInstance(vm, () => {
       binding = setup(props, ctx);
     });
 
     if (!binding) return;
-
     if (isFunction(binding)) {
       // keep typescript happy with the binding type.
       const bindingFunc = binding;
       // keep currentInstance accessible for createElement
-      vm.$options.render = () => activateCurrentInstance(vm, vm_ => bindingFunc(vm_.$props, ctx));
+      vm.$options.render = () => {
+        resolveScopedSlots(vm, ctx.slots);
+        return activateCurrentInstance(vm, vm_ => bindingFunc(vm_.$props, ctx));
+      };
       return;
     }
-
     if (isPlainObject(binding)) {
       const bindingObj = binding;
       vmStateManager.set(vm, 'rawBindings', binding);
@@ -179,14 +210,10 @@ export function mixin(Vue: VueConstructor) {
   }
 
   function createSetupContext(vm: ComponentInstance & { [x: string]: any }): SetupContext {
-    const ctx = {} as SetupContext;
-    const props: Array<string | [string, string]> = [
-      'root',
-      'parent',
-      'refs',
-      ['slots', 'scopedSlots'],
-      'attrs',
-    ];
+    const ctx = {
+      slots: {},
+    } as SetupContext;
+    const props: Array<string | [string, string]> = ['root', 'parent', 'refs', 'attrs'];
     const methodReturnVoid = ['emit'];
     props.forEach(key => {
       let targetKey: string;

src/vmStateManager.ts

@@ -3,6 +3,7 @@ import { ComponentInstance, Data } from './component';
 export interface VfaState {
   refs?: string[];
   rawBindings?: Data;
+  slots?: string[];
 }
 
 function set<K extends keyof VfaState>(vm: ComponentInstance, key: K, value: VfaState[K]): void {

test/setup.spec.js

@@ -112,25 +112,6 @@ describe('setup', () => {
     expect(props.a).toBe(1);
   });
 
-  it('should receive SetupContext second params', () => {
-    let context;
-    const vm = new Vue({
-      setup(_, ctx) {
-        context = ctx;
-      },
-    });
-    expect(context).toBeDefined();
-    expect('parent' in context).toBe(true);
-    expect(context.root).toBe(vm.$root);
-    expect(context.parent).toBe(vm.$parent);
-    expect(context.slots).toBe(vm.$scopedSlots);
-    expect(context.attrs).toBe(vm.$attrs);
-
-    // CAUTION: this will be removed in 3.0
-    expect(context.refs).toBe(vm.$refs);
-    expect(typeof context.emit === 'function').toBe(true);
-  });
-
   it('warn for existing props', () => {
     new Vue({
       props: {

test/setupContext.spec.js

@@ -0,0 +1,130 @@
+const Vue = require('vue/dist/vue.common.js');
+const { ref, watch, createElement: h } = require('../src');
+
+describe('setupContext', () => {
+  it('should have proper properties', () => {
+    let context;
+    const vm = new Vue({
+      setup(_, ctx) {
+        context = ctx;
+      },
+    });
+    expect(context).toBeDefined();
+    expect('parent' in context).toBe(true);
+    expect(context.root).toBe(vm.$root);
+    expect(context.parent).toBe(vm.$parent);
+    expect(context.slots).toBeDefined();
+    expect(context.attrs).toBe(vm.$attrs);
+
+    // CAUTION: this will be removed in 3.0
+    expect(context.refs).toBe(vm.$refs);
+    expect(typeof context.emit === 'function').toBe(true);
+  });
+
+  it('slots should work in render function', () => {
+    const vm = new Vue({
+      template: `
+        <test>
+          <template slot="default">
+            <span>foo</span>
+          </template>
+          <template slot="item" slot-scope="props">
+            <span>{{ props.text || 'meh' }}</span>
+          </template>
+        </test>
+      `,
+      components: {
+        test: {
+          setup(_, { slots }) {
+            return () => {
+              return h('div', [slots.default(), slots.item()]);
+            };
+          },
+        },
+      },
+    }).$mount();
+    expect(vm.$el.innerHTML).toBe('<span>foo</span><span>meh</span>');
+  });
+
+  it('warn for slots calls outside of the render() function', () => {
+    warn = jest.spyOn(global.console, 'error').mockImplementation(() => null);
+
+    new Vue({
+      template: `
+        <test>
+          <template slot="default">
+            <span>foo</span>
+          </template>
+        </test>
+      `,
+      components: {
+        test: {
+          setup(_, { slots }) {
+            slots.default();
+          },
+        },
+      },
+    }).$mount();
+    expect(warn.mock.calls[0][0]).toMatch(
+      'slots.default() got called outside of the "render()" scope'
+    );
+    warn.mockRestore();
+  });
+
+  it('staled slots should be removed', () => {
+    const Child = {
+      template: '<div><slot value="foo"/></div>',
+    };
+    const vm = new Vue({
+      components: { Child },
+      template: `
+        <child>
+          <template slot-scope="{ value }" v-if="value">
+            foo {{ value }}
+          </template>
+        </child>
+      `,
+    }).$mount();
+    expect(vm.$el.textContent).toMatch(`foo foo`);
+  });
+
+  it('slots should be synchronized', done => {
+    let slotKeys;
+    const Foo = {
+      setup(_, { slots }) {
+        slotKeys = Object.keys(slots);
+        return () => {
+          slotKeys = Object.keys(slots);
+          return h('div', [
+            slots.default && slots.default('from foo default'),
+            slots.one && slots.one('from foo one'),
+            slots.two && slots.two('from foo two'),
+            slots.three && slots.three('from foo three'),
+          ]);
+        };
+      },
+    };
+
+    const vm = new Vue({
+      data: {
+        a: 'one',
+        b: 'two',
+      },
+      template: `
+        <foo>
+          <template #[a]="one">a {{ one }} </template>
+          <template v-slot:[b]="two">b {{ two }} </template>
+        </foo>
+      `,
+      components: { Foo },
+    }).$mount();
+    expect(slotKeys).toEqual(['one', 'two']);
+    expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(`a from foo one b from foo two`);
+    vm.a = 'two';
+    vm.b = 'three';
+    waitForUpdate(() => {
+      // expect(slotKeys).toEqual(['one', 'three']);
+      expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(`a from foo two b from foo three `);
+    }).then(done);
+  });
+});