fix: nativeOn test case + test nested components

diff --git a/packages/core/__tests__/attrsFallthrough.spec.ts b/packages/core/__tests__/attrsFallthrough.spec.ts
index 73ef657e249b6eff2e5b94da4e943b9b416ace55..8f2c21fddac285165e544b271b0daf37b983fbfc 100644 (file)
--- a/packages/core/__tests__/attrsFallthrough.spec.ts
+++ b/packages/core/__tests__/attrsFallthrough.spec.ts
@@ -141,4 +141,93 @@ describe('attribute fallthrough', () => {
     expect(node.style.color).toBe('red')
     expect(node.style.fontWeight).toBe('bold')
   })
+
+  it('should fallthrough on multi-nested components', async () => {
+    const nativeClick = jest.fn()
+    const childUpdated = jest.fn()
+    const grandChildUpdated = jest.fn()
+
+    class Hello extends Component {
+      data() {
+        return {
+          count: 0
+        }
+      }
+      inc() {
+        this.count++
+        nativeClick()
+      }
+      render() {
+        return h(Child, {
+          foo: 1,
+          id: 'test',
+          class: 'c' + this.count,
+          style: { color: this.count ? 'red' : 'green' },
+          nativeOnClick: this.inc
+        })
+      }
+    }
+
+    class Child extends Component {
+      static options = {
+        props: {
+          foo: Number
+        }
+      }
+      updated() {
+        childUpdated()
+      }
+      render(props: any) {
+        return h(GrandChild, props)
+      }
+    }
+
+    class GrandChild extends Component {
+      static options = {
+        props: {
+          foo: Number
+        }
+      }
+      updated() {
+        grandChildUpdated()
+      }
+      render(props: any) {
+        return h(
+          'div',
+          {
+            class: 'c2',
+            style: { fontWeight: 'bold' }
+          },
+          props.foo
+        )
+      }
+    }
+
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+    render(h(Hello), root)
+
+    const node = root.children[0] as HTMLElement
+
+    // with declared props, any parent attr that isn't a prop falls through
+    expect(node.getAttribute('id')).toBe('test')
+    // ...while declared ones remain props
+    expect(node.hasAttribute('foo')).toBe(false)
+
+    // class, style and nativeOn* always fallthrough
+    expect(node.getAttribute('class')).toBe('c2 c0')
+    expect(node.style.color).toBe('green')
+    expect(node.style.fontWeight).toBe('bold')
+    node.dispatchEvent(new CustomEvent('click'))
+    expect(nativeClick).toHaveBeenCalled()
+
+    await nextTick()
+    expect(childUpdated).toHaveBeenCalled()
+    expect(grandChildUpdated).toHaveBeenCalled()
+    expect(node.getAttribute('id')).toBe('test')
+    expect(node.hasAttribute('foo')).toBe(false)
+    expect(node.getAttribute('class')).toBe('c2 c1')
+    expect(node.style.color).toBe('red')
+    expect(node.style.fontWeight).toBe('bold')
+  })
 })

diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts
index 834a7cce3df66dd79448ba4c21db8083f091b538..25cd87f0240947fe19a14c3941a80a0c52cdb6bf 100644 (file)
--- a/packages/core/src/utils.ts
+++ b/packages/core/src/utils.ts
@@ -6,7 +6,7 @@ export const onRE = /^on/
 export const nativeOnRE = /^nativeOn/
 export const vnodeHookRE = /^vnode/
 export const handlersRE = /^on|^nativeOn|^vnode/
-export const reservedPropRE = /^(?:key|ref|slots)$|^nativeOn|^vnode/
+export const reservedPropRE = /^(?:key|ref|slots)$|^vnode/
 
 export function normalizeStyle(
   value: any