feat: implement inheritAttrs

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

@@ -0,0 +1,56 @@
+import {
+  createComponent,
+  defineComponent,
+  getCurrentInstance,
+  nextTick,
+  ref,
+  setText,
+  template,
+  toRefs,
+  watch,
+  watchEffect,
+} from '../src'
+import { setCurrentInstance } from '../src/component'
+import { makeRender } from './_utils'
+
+const define = makeRender<any>()
+
+describe('attribute fallthrough', () => {
+  it('should allow attrs to fallthrough', async () => {
+    const t0 = template('<div>')
+    const { component: Child } = define({
+      props: ['foo'],
+      render() {
+        const instance = getCurrentInstance()!
+        const n0 = t0()
+        watchEffect(() => setText(n0, instance.props.foo))
+        return n0
+      },
+    })
+
+    const foo = ref(1)
+    const id = ref('a')
+    const { instance, host } = define({
+      setup() {
+        return { foo, id }
+      },
+      render(_ctx: Record<string, any>) {
+        return createComponent(Child, {
+          foo: () => _ctx.foo,
+          id: () => _ctx.id,
+        })
+      },
+    }).render()
+    const reset = setCurrentInstance(instance)
+    expect(host.innerHTML).toBe('<div id="a">1</div>')
+
+    foo.value++
+    await nextTick()
+    expect(host.innerHTML).toBe('<div id="a">2</div>')
+
+    id.value = 'b'
+    await nextTick()
+    expect(host.innerHTML).toBe('<div id="b">2</div>')
+    reset()
+  })
+})

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

@@ -222,6 +222,7 @@ describe('component: props', () => {
   test('optimized props updates', async () => {
     const t0 = template('<div>')
     const { component: Child } = define({
+      inheritAttrs: false,
       props: ['foo'],
       render() {
         const instance = getCurrentInstance()!
@@ -245,17 +246,14 @@ describe('component: props', () => {
       },
     }).render()
     const reset = setCurrentInstance(instance)
-    // expect(host.innerHTML).toBe('<div id="a">1</div>') // TODO: Fallthrough Attributes
     expect(host.innerHTML).toBe('<div>1</div>')
 
     foo.value++
     await nextTick()
-    // expect(host.innerHTML).toBe('<div id="a">2</div>') // TODO: Fallthrough Attributes
     expect(host.innerHTML).toBe('<div>2</div>')
 
     id.value = 'b'
     await nextTick()
-    // expect(host.innerHTML).toBe('<div id="b">2</div>') // TODO: Fallthrough Attributes
     reset()
   })
 
@@ -441,6 +439,7 @@ describe('component: props', () => {
   // #5016
   test('handling attr with undefined value', () => {
     const { render, host } = define({
+      inheritAttrs: false,
       render() {
         const instance = getCurrentInstance()!
         const t0 = template('<div></div>')

packages/runtime-vapor/src/apiRender.ts

@@ -1,10 +1,15 @@
 import { isArray, isFunction, isObject } from '@vue/shared'
 import { type ComponentInternalInstance, setCurrentInstance } from './component'
 import { insert, querySelector, remove } from './dom/element'
-import { flushPostFlushCbs, queuePostRenderEffect } from './scheduler'
-import { proxyRefs } from '@vue/reactivity'
+import {
+  createVaporPreScheduler,
+  flushPostFlushCbs,
+  queuePostRenderEffect,
+} from './scheduler'
+import { baseWatch, proxyRefs } from '@vue/reactivity'
 import { invokeLifecycle } from './componentLifecycle'
 import { VaporLifecycleHooks } from './apiLifecycle'
+import { fallThroughAttrs } from './componentAttrs'
 
 export const fragmentKey = Symbol(__DEV__ ? `fragmentKey` : ``)
 
@@ -47,7 +52,13 @@ export function setupComponent(instance: ComponentInternalInstance): void {
       // TODO: warn no template
       block = []
     }
-    return (instance.block = block)
+    instance.block = block
+    if (instance.inheritAttrs !== false) {
+      baseWatch(() => fallThroughAttrs(instance), undefined, {
+        scheduler: createVaporPreScheduler(instance),
+      })
+    }
+    return block
   })
   reset()
 }

packages/runtime-vapor/src/component.ts

@@ -28,6 +28,7 @@ export type FunctionalComponent = SetupFn & Omit<ObjectComponent, 'setup'>
 
 export interface ObjectComponent {
   props?: ComponentPropsOptions
+  inheritAttrs?: boolean
   emits?: EmitsOptions
   setup?: SetupFn
   render?(ctx: any): Block
@@ -60,6 +61,11 @@ export interface ComponentInternalInstance {
   emitted: Record<string, boolean> | null
   attrs: Data
   refs: Data
+  /**
+   * resolved inheritAttrs options
+   * @internal
+   */
+  inheritAttrs?: boolean
 
   // lifecycle
   isMounted: boolean
@@ -224,6 +230,9 @@ export function createComponentInstance(
      */
     // [VaporLifecycleHooks.SERVER_PREFETCH]: null,
   }
+  if (component.inheritAttrs != null) {
+    instance.inheritAttrs = component.inheritAttrs
+  }
   initProps(instance, rawProps, !isFunction(component))
   instance.emit = emit.bind(null, instance)
 

packages/runtime-vapor/src/componentAttrs.ts

@@ -1,6 +1,7 @@
-import { camelize, isFunction } from '@vue/shared'
+import { camelize, isArray, isFunction } from '@vue/shared'
 import type { ComponentInternalInstance } from './component'
 import { isEmitListener } from './componentEmits'
+import type { Block } from './apiRender'
 
 export function patchAttrs(instance: ComponentInternalInstance) {
   const attrs = instance.attrs
@@ -42,3 +43,20 @@ export function patchAttrs(instance: ComponentInternalInstance) {
     }
   }
 }
+
+export function fallThroughAttrs(instance: ComponentInternalInstance) {
+  const attrs = instance.attrs
+  const block = getFallThroughNode(instance.block!)
+  if (!block) return
+  for (const key in attrs) {
+    if (block instanceof Element) {
+      block.setAttribute(key, String(attrs[key]))
+    }
+  }
+}
+
+function getFallThroughNode(block: Block) {
+  if (block instanceof Node) return block
+  if (isArray(block) && block.length === 1) return getFallThroughNode(block[0])
+  return null
+}