feat(runtime-vapor): update attrs when props update

Author: Doctor-wu

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

@@ -246,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()
   })
 

packages/runtime-vapor/src/apiRender.ts

@@ -1,8 +1,12 @@
 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'
@@ -50,7 +54,9 @@ export function setupComponent(instance: ComponentInternalInstance): void {
     }
     instance.block = block
     if (instance.inheritAttrs !== false) {
-      fallThroughAttrs(instance)
+      baseWatch(() => fallThroughAttrs(instance), undefined, {
+        scheduler: createVaporPreScheduler(instance),
+      })
     }
     return block
   })