refactor(compiler-vapor): check reserved prop on compiler only

Author: sxzz

packages/compiler-vapor/src/transforms/transformElement.ts

@@ -8,12 +8,7 @@ import {
   createCompilerError,
   createSimpleExpression,
 } from '@vue/compiler-dom'
-import {
-  extend,
-  isBuiltInDirective,
-  isVaporReservedProp,
-  isVoidTag,
-} from '@vue/shared'
+import { extend, isBuiltInDirective, isVoidTag, makeMap } from '@vue/shared'
 import type {
   DirectiveTransformResult,
   NodeTransform,
@@ -27,6 +22,11 @@ import {
 } from '../ir'
 import { EMPTY_EXPRESSION } from './utils'
 
+export const isReservedProp = /*#__PURE__*/ makeMap(
+  // the leading comma is intentional so empty string "" is also included
+  ',key,ref,ref_for,ref_key,',
+)
+
 export const transformElement: NodeTransform = (node, context) => {
   return function postTransformElement() {
     node = context.node
@@ -145,9 +145,9 @@ function transformProp(
   context: TransformContext<ElementNode>,
 ): DirectiveTransformResult | void {
   const { name } = prop
-  if (isVaporReservedProp(name)) return
 
   if (prop.type === NodeTypes.ATTRIBUTE) {
+    if (isReservedProp(name)) return
     return {
       key: createSimpleExpression(prop.name, true, prop.nameLoc),
       value: prop.value

packages/compiler-vapor/src/transforms/vBind.ts

@@ -5,9 +5,10 @@ import {
   createCompilerError,
   createSimpleExpression,
 } from '@vue/compiler-dom'
-import { camelize, isVaporReservedProp } from '@vue/shared'
+import { camelize } from '@vue/shared'
 import type { DirectiveTransform, TransformContext } from '../transform'
 import { resolveExpression } from '../utils'
+import { isReservedProp } from './transformElement'
 
 // same-name shorthand - :arg is expanded to :arg="arg"
 export function normalizeBindShorthand(
@@ -52,7 +53,8 @@ export const transformVBind: DirectiveTransform = (dir, node, context) => {
   exp = resolveExpression(exp)
   arg = resolveExpression(arg)
 
-  if (arg.isStatic && isVaporReservedProp(arg.content)) return
+  if (arg.isStatic && isReservedProp(arg.content)) return
+
   let camel = false
   if (modifiers.includes('camel')) {
     if (arg.isStatic) {

packages/runtime-vapor/src/componentProps.ts

@@ -10,7 +10,6 @@ import {
   hyphenate,
   isArray,
   isFunction,
-  isVaporReservedProp,
 } from '@vue/shared'
 import { shallowReactive, shallowReadonly, toRaw } from '@vue/reactivity'
 import { warn } from './warning'
@@ -85,11 +84,6 @@ export function initProps(
   let rawCastValues: Data | undefined
   if (rawProps) {
     for (let key in rawProps) {
-      // key, ref are reserved and never passed down
-      if (isVaporReservedProp(key)) {
-        continue
-      }
-
       const valueGetter = () => rawProps[key]
       let camelKey
       if (options && hasOwn(options, (camelKey = camelize(key)))) {

packages/shared/src/general.ts

@@ -93,11 +93,6 @@ export const isReservedProp = /*#__PURE__*/ makeMap(
     'onVnodeBeforeUnmount,onVnodeUnmounted',
 )
 
-export const isVaporReservedProp = /*#__PURE__*/ makeMap(
-  // the leading comma is intentional so empty string "" is also included
-  ',key,ref,ref_for,ref_key,',
-)
-
 export const isBuiltInDirective = /*#__PURE__*/ makeMap(
   'bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo',
 )