fix(runtime-vapor): guard attrs proxy traps for symbol keys (#14447)

Author: jackma9604

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

@@ -8,6 +8,7 @@ import {
   onUpdated,
   provide,
   ref,
+  toDisplayString,
   useAttrs,
   watch,
   watchEffect,
@@ -20,6 +21,7 @@ import {
   renderEffect,
   setInsertionState,
   template,
+  txt,
 } from '../src'
 import { makeRender } from './_utils'
 import type { VaporComponentInstance } from '../src/component'
@@ -510,6 +512,24 @@ describe('component', () => {
       'Property "foo" was accessed during render but is not defined on instance.',
     ).toHaveBeenWarned()
   })
+
+  test('display attrs', () => {
+    const App = defineVaporComponent({
+      props: {},
+      emits: [],
+      setup(props, { attrs }) {
+        const n0 = template('<div> ')() as any
+        const x0 = txt(n0) as any
+        renderEffect(() => setText(x0, toDisplayString(attrs)))
+        return n0
+      },
+    })
+    const { render } = define(App)
+    expect(render).not.toThrow(TypeError)
+    expect(
+      'Unhandled error during execution of setup function',
+    ).not.toHaveBeenWarned()
+  })
 })
 
 function getEffectsCount(scope: EffectScope): number {

packages/runtime-vapor/src/componentProps.ts

@@ -1,7 +1,6 @@
 import {
   EMPTY_ARR,
   NO,
-  YES,
   camelize,
   hasOwn,
   isArray,
@@ -98,9 +97,12 @@ export function getPropsProxyHandlers(
       : NO
   ) as (key: string | symbol) => key is string
   const isAttr = propsOptions
-    ? (key: string) =>
-        key !== '$' && !isProp(key) && !isEmitListener(emitsOptions, key)
-    : YES
+    ? (key: string | symbol) =>
+        isString(key) &&
+        key !== '$' &&
+        !isProp(key) &&
+        !isEmitListener(emitsOptions, key)
+    : (key: string | symbol) => isString(key)
 
   const getProp = (instance: VaporComponentInstance, key: string | symbol) => {
     // this enables direct watching of props and prevents `Invalid watch source` DEV warnings.
@@ -200,13 +202,13 @@ export function getPropsProxyHandlers(
     })
   }
 
-  const getAttr = (target: RawProps, key: string) => {
-    if (!isProp(key) && !isEmitListener(emitsOptions, key)) {
+  const getAttr = (target: RawProps, key: string | symbol) => {
+    if (isString(key) && !isProp(key) && !isEmitListener(emitsOptions, key)) {
       return getAttrFromRawProps(target, key)
     }
   }
 
-  const hasAttr = (target: RawProps, key: string) => {
+  const hasAttr = (target: RawProps, key: string | symbol) => {
     if (isAttr(key)) {
       return hasAttrFromRawProps(target, key)
     } else {
@@ -215,15 +217,15 @@ export function getPropsProxyHandlers(
   }
 
   const getOnceAttr = withOnceCache((instance, key) =>
-    getAttr(instance.rawProps, key as string),
+    getAttr(instance.rawProps, key),
   )
   const attrsHandlers = {
-    get: (target, key: string) =>
+    get: (target, key: string | symbol) =>
       once ? getOnceAttr(target, key) : getAttr(target.rawProps, key),
-    has: (target, key: string) => hasAttr(target.rawProps, key),
+    has: (target, key: string | symbol) => hasAttr(target.rawProps, key),
     ownKeys: target => getKeysFromRawProps(target.rawProps).filter(isAttr),
-    getOwnPropertyDescriptor(target, key: string) {
-      if (hasAttr(target.rawProps, key)) {
+    getOwnPropertyDescriptor(target, key: string | symbol) {
+      if (isString(key) && hasAttr(target.rawProps, key)) {
         return {
           configurable: true,
           enumerable: true,