fix(compat): do not auto invoke scoped slots when accessed via $slots

Author: andreww2012

packages/runtime-core/src/compat/componentFunctional.ts

@@ -4,6 +4,7 @@ import {
   getCurrentInstance,
 } from '../component'
 import { resolveInjections } from '../componentOptions'
+import type { ContextualRenderFn } from '../componentRenderContext'
 import type { InternalSlots } from '../componentSlots'
 import { getCompatListeners } from './instanceListeners'
 import { compatH } from './renderFn'
@@ -15,7 +16,10 @@ const normalizedFunctionalComponentMap = new WeakMap<
 export const legacySlotProxyHandlers: ProxyHandler<InternalSlots> = {
   get(target, key: string) {
     const slot = target[key]
-    return slot && slot()
+    return (
+      slot &&
+      ((slot as ContextualRenderFn)._ns /* non-scoped slot */ ? slot() : slot)
+    )
   },
 }
 

packages/runtime-core/src/componentSlots.ts

@@ -110,6 +110,12 @@ const normalizeSlot = (
   }, ctx) as Slot
   // NOT a compiled slot
   ;(normalized as ContextualRenderFn)._c = false
+  if (__COMPAT__) {
+    // Preserve non-scoped slot flag (can be set in `convertLegacySlots`)
+    ;(normalized as ContextualRenderFn)._ns = (
+      rawSlot as ContextualRenderFn
+    )._ns
+  }
   return normalized
 }
 
@@ -159,6 +165,9 @@ const normalizeVNodeSlots = (
   }
   const normalized = normalizeSlotValue(children)
   instance.slots.default = () => normalized
+  if (__COMPAT__) {
+    ;(instance.slots.default as ContextualRenderFn)._ns = true
+  }
 }
 
 export const initSlots = (

packages/vue-compat/__tests__/instance.spec.ts

@@ -309,6 +309,49 @@ describe('INSTANCE_SCOPED_SLOTS', () => {
   })
 })
 
+describe('RENDER_FUNCTION', () => {
+  test('should not auto invoke scoped slot accessed via $slots in a render function', () => {
+    new Vue({
+      template: `<child v-slot="{ msg }">{{ msg }}</child>`,
+      components: {
+        child: {
+          compatConfig: { MODE: 2 },
+          render() {
+            expect(() => this.$slots.default).not.toThrow()
+            expect(this.$slots.default).toBeTypeOf('function')
+          },
+        },
+      },
+    }).$mount()
+
+    expect(
+      deprecationData[DeprecationTypes.RENDER_FUNCTION].message,
+    ).toHaveBeenWarned()
+  })
+
+  test('should auto invoke non-scoped slot accessed via $slots in a render function', () => {
+    const DEFAULT_SLOT_CONTENTS = 'foo'
+
+    new Vue({
+      template: `<child>${DEFAULT_SLOT_CONTENTS}</child>`,
+      components: {
+        child: {
+          compatConfig: { MODE: 2 },
+          render() {
+            expect(this.$slots.default[0].children).toEqual(
+              DEFAULT_SLOT_CONTENTS,
+            )
+          },
+        },
+      },
+    }).$mount()
+
+    expect(
+      deprecationData[DeprecationTypes.RENDER_FUNCTION].message,
+    ).toHaveBeenWarned()
+  })
+})
+
 test('INSTANCE_ATTR_CLASS_STYLE', () => {
   const vm = new Vue({
     template: `<child class="foo" style="color:red" id="ok" />`,