feat(runtime-vapor): template ref on component (#185)

Author: Doctor-wu

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

@@ -0,0 +1,97 @@
+import { ref, shallowRef } from '@vue/reactivity'
+import { createComponent } from '../src/apiCreateComponent'
+import { setRef } from '../src/dom/templateRef'
+import { makeRender } from './_utils'
+import {
+  type ComponentInternalInstance,
+  getCurrentInstance,
+} from '../src/component'
+
+const define = makeRender()
+describe('api: expose', () => {
+  test('via setup context', () => {
+    const { component: Child } = define({
+      setup(_, { expose }) {
+        expose({
+          foo: 1,
+          bar: ref(2),
+        })
+        return {
+          bar: ref(3),
+          baz: ref(4),
+        }
+      },
+    })
+    const childRef = ref()
+    const { render } = define({
+      render: () => {
+        const n0 = createComponent(Child)
+        setRef(n0, childRef)
+        return n0
+      },
+    })
+
+    render()
+    expect(childRef.value).toBeTruthy()
+    expect(childRef.value.foo).toBe(1)
+    expect(childRef.value.bar).toBe(2)
+    expect(childRef.value.baz).toBeUndefined()
+  })
+
+  test('via setup context (expose empty)', () => {
+    let childInstance: ComponentInternalInstance | null = null
+    const { component: Child } = define({
+      setup(_) {
+        childInstance = getCurrentInstance()
+      },
+    })
+    const childRef = shallowRef()
+    const { render } = define({
+      render: () => {
+        const n0 = createComponent(Child)
+        setRef(n0, childRef)
+        return n0
+      },
+    })
+
+    render()
+    expect(childInstance!.exposed).toBeUndefined()
+    expect(childRef.value).toBe(childInstance!)
+  })
+
+  test('warning for ref', () => {
+    const { render } = define({
+      setup(_, { expose }) {
+        expose(ref(1))
+      },
+    })
+    render()
+    expect(
+      'expose() should be passed a plain object, received ref',
+    ).toHaveBeenWarned()
+  })
+
+  test('warning for array', () => {
+    const { render } = define({
+      setup(_, { expose }) {
+        expose(['focus'])
+      },
+    })
+    render()
+    expect(
+      'expose() should be passed a plain object, received array',
+    ).toHaveBeenWarned()
+  })
+
+  test('warning for function', () => {
+    const { render } = define({
+      setup(_, { expose }) {
+        expose(() => null)
+      },
+    })
+    render()
+    expect(
+      'expose() should be passed a plain object, received function',
+    ).toHaveBeenWarned()
+  })
+})

packages/runtime-vapor/__tests__/dom/templateRef.spec.ts

@@ -0,0 +1,26 @@
+import { ref, setRef, template } from '../../src'
+import { makeRender } from '../_utils'
+
+const define = makeRender()
+
+describe('api: template ref', () => {
+  test('string ref mount', () => {
+    const t0 = template('<div ref="refKey"></div>')
+    const el = ref(null)
+    const { render } = define({
+      setup() {
+        return {
+          refKey: el,
+        }
+      },
+      render() {
+        const n0 = t0()
+        setRef(n0 as Element, 'refKey')
+        return n0
+      },
+    })
+
+    const { host } = render()
+    expect(el.value).toBe(host.children[0])
+  })
+})

packages/runtime-vapor/src/component.ts

@@ -1,5 +1,5 @@
 import { EffectScope, isRef } from '@vue/reactivity'
-import { EMPTY_OBJ, isArray, isFunction } from '@vue/shared'
+import { EMPTY_OBJ, hasOwn, isArray, isFunction } from '@vue/shared'
 import type { Block } from './apiRender'
 import type { DirectiveBinding } from './directives'
 import {
@@ -327,6 +327,12 @@ export function createComponentInstance(
   return instance
 }
 
+export function isVaporComponent(
+  val: unknown,
+): val is ComponentInternalInstance {
+  return !!val && hasOwn(val, componentKey)
+}
+
 function getAttrsProxy(instance: ComponentInternalInstance): Data {
   return (
     instance.attrsProxy ||

packages/runtime-vapor/src/dom/templateRef.ts

@@ -4,7 +4,11 @@ import {
   isRef,
   onScopeDispose,
 } from '@vue/reactivity'
-import { currentInstance } from '../component'
+import {
+  type ComponentInternalInstance,
+  currentInstance,
+  isVaporComponent,
+} from '../component'
 import { VaporErrorCodes, callWithErrorHandling } from '../errorHandling'
 import {
   EMPTY_OBJ,
@@ -18,25 +22,28 @@ import { warn } from '../warning'
 import { queuePostFlushCb } from '../scheduler'
 
 export type NodeRef = string | Ref | ((ref: Element) => void)
+export type RefEl = Element | ComponentInternalInstance
 
 /**
  * Function for handling a template ref
  */
-export function setRef(el: Element, ref: NodeRef, refFor = false) {
+export function setRef(el: RefEl, ref: NodeRef, refFor = false) {
   if (!currentInstance) return
   const { setupState, isUnmounted } = currentInstance
 
   if (isUnmounted) {
     return
   }
 
+  const refValue = isVaporComponent(el) ? el.exposed || el : el
+
   const refs =
     currentInstance.refs === EMPTY_OBJ
       ? (currentInstance.refs = {})
       : currentInstance.refs
 
   if (isFunction(ref)) {
-    const invokeRefSetter = (value: Element | null) => {
+    const invokeRefSetter = (value?: Element | Record<string, any>) => {
       callWithErrorHandling(
         ref,
         currentInstance,
@@ -45,8 +52,8 @@ export function setRef(el: Element, ref: NodeRef, refFor = false) {
       )
     }
 
-    invokeRefSetter(el)
-    onScopeDispose(() => invokeRefSetter(null))
+    invokeRefSetter(refValue)
+    onScopeDispose(() => invokeRefSetter())
   } else {
     const _isString = isString(ref)
     const _isRef = isRef(ref)
@@ -62,7 +69,7 @@ export function setRef(el: Element, ref: NodeRef, refFor = false) {
             : ref.value
 
           if (!isArray(existing)) {
-            existing = [el]
+            existing = [refValue]
             if (_isString) {
               refs[ref] = existing
               if (hasOwn(setupState, ref)) {
@@ -75,16 +82,16 @@ export function setRef(el: Element, ref: NodeRef, refFor = false) {
             } else {
               ref.value = existing
             }
-          } else if (!existing.includes(el)) {
-            existing.push(el)
+          } else if (!existing.includes(refValue)) {
+            existing.push(refValue)
           }
         } else if (_isString) {
-          refs[ref] = el
+          refs[ref] = refValue
           if (hasOwn(setupState, ref)) {
-            setupState[ref] = el
+            setupState[ref] = refValue
           }
         } else if (_isRef) {
-          ref.value = el
+          ref.value = refValue
         } else if (__DEV__) {
           warn('Invalid template ref type:', ref, `(${typeof ref})`)
         }
@@ -95,7 +102,7 @@ export function setRef(el: Element, ref: NodeRef, refFor = false) {
       onScopeDispose(() => {
         queuePostFlushCb(() => {
           if (isArray(existing)) {
-            remove(existing, el)
+            remove(existing, refValue)
           } else if (_isString) {
             refs[ref] = null
             if (hasOwn(setupState, ref)) {