feat(runtime-vapor): support functional slot in vdom component

packages/reactivity/__tests__/readonly.spec.ts

@@ -523,7 +523,7 @@ describe('reactivity/readonly', () => {
   })
 })
 
-test.todo('should be able to trigger with triggerRef', () => {
+test('should be able to trigger with triggerRef', () => {
   const r = shallowRef({ a: 1 })
   const ror = readonly(r)
   let dummy

packages/reactivity/src/baseHandlers.ts

@@ -96,15 +96,20 @@ class BaseReactiveHandler implements ProxyHandler<Target> {
       }
     }
 
+    const wasRef = isRef(target)
     const res = Reflect.get(
       target,
       key,
       // if this is a proxy wrapping a ref, return methods using the raw ref
       // as receiver so that we don't have to call `toRaw` on the ref in all
       // its class methods
-      isRef(target) ? target : receiver,
+      wasRef ? target : receiver,
     )
 
+    if (wasRef && key !== 'value') {
+      return res
+    }
+
     if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
       return res
     }

packages/reactivity/src/dep.ts

@@ -15,12 +15,6 @@ class Dep implements Dependency {
   _subs: Link | undefined = undefined
   subsTail: Link | undefined = undefined
 
-  /**
-   * @internal
-   */
-  readonly __v_skip = true
-  // TODO isolatedDeclarations ReactiveFlags.SKIP
-
   constructor(
     private map: KeyToDepMap,
     private key: unknown,

packages/runtime-core/src/helpers/renderSlot.ts

@@ -35,7 +35,7 @@ export function renderSlot(
   let slot = slots[name]
 
   // vapor slots rendered in vdom
-  if (slot && slots._vapor) {
+  if (slot && (slot as any).__vapor) {
     const ret = (openBlock(), createBlock(VaporSlot, props))
     ret.vs = { slot, fallback }
     return ret

packages/runtime-vapor/__tests__/vdomInterop.spec.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h } from '@vue/runtime-dom'
+import { createVNode, defineComponent, h, renderSlot } from '@vue/runtime-dom'
 import { makeInteropRender } from './_utils'
 import { createComponent, defineVaporComponent } from '../src'
 
@@ -9,7 +9,66 @@ describe('vdomInterop', () => {
 
   describe.todo('emit', () => {})
 
-  describe.todo('slots', () => {})
+  describe('slots', () => {
+    test('basic', () => {
+      const VDomChild = defineComponent({
+        setup(_, { slots }) {
+          return () => renderSlot(slots, 'default')
+        },
+      })
+
+      const VaporChild = defineVaporComponent({
+        setup() {
+          return createComponent(
+            VDomChild as any,
+            null,
+            {
+              default: () => document.createTextNode('default slot'),
+            },
+            true,
+          )
+        },
+      })
+
+      const { html } = define({
+        setup() {
+          return () => h(VaporChild as any)
+        },
+      }).render()
+
+      expect(html()).toBe('default slot')
+    })
+
+    test('functional slot', () => {
+      const VDomChild = defineComponent({
+        setup(_, { slots }) {
+          console.log(slots.default)
+          return () => createVNode(slots.default!)
+        },
+      })
+
+      const VaporChild = defineVaporComponent({
+        setup() {
+          return createComponent(
+            VDomChild as any,
+            null,
+            {
+              default: () => document.createTextNode('default slot'),
+            },
+            true,
+          )
+        },
+      })
+
+      const { html } = define({
+        setup() {
+          return () => h(VaporChild as any)
+        },
+      }).render()
+
+      expect(html()).toBe('default slot')
+    })
+  })
 
   describe.todo('provide', () => {})
 

packages/runtime-vapor/src/componentProps.ts

@@ -186,7 +186,7 @@ export function getAttrFromRawProps(rawProps: RawProps, key: string): unknown {
       source = dynamicSources[i]
       isDynamic = isFunction(source)
       source = isDynamic ? (source as Function)() : source
-      if (hasOwn(source, key)) {
+      if (source && hasOwn(source, key)) {
         const value = isDynamic ? source[key] : source[key]()
         if (merged) {
           merged.push(value)

packages/runtime-vapor/src/vdomInterop.ts

@@ -134,11 +134,17 @@ const vaporSlotPropsProxyHandler: ProxyHandler<
 
 const vaporSlotsProxyHandler: ProxyHandler<any> = {
   get(target, key) {
-    if (key === '_vapor') {
-      return target
-    } else {
-      return target[key]
-    }
+    const fn = target[key]
+    return isFunction(fn)
+      ? new Proxy(fn, {
+          get(fnTarget, fnKey) {
+            if (fnKey === '__vapor') {
+              return true
+            }
+            return fnTarget[fnKey]
+          },
+        })
+      : fn
   },
 }