fix(compiler-sfc): updated code

Author: baiwusanyu-c

packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap

@@ -103,8 +103,8 @@ export default /*#__PURE__*/_defineComponent({
   props: {
     foo: { type: Number, required: true, default: 1 },
     bar: { type: Number, required: true, default: 2 },
-    'foo:bar': { type: String, required: true },
-    'onUpdate:modelValue': { type: Function, required: true }
+    \\"foo:bar\\": { type: String, required: true, default: 'foo-bar' },
+    \\"onUpdate:modelValue\\": { type: Function, required: true }
   },
   setup(__props: any) {
 

packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts

@@ -102,7 +102,7 @@ describe('sfc props transform', () => {
   test('default values w/ type declaration & key is string', () => {
     const { content, bindings } = compile(`
       <script setup lang="ts">
-      const { foo = 1, bar = 2 } = defineProps<{ 
+      const { foo = 1, bar = 2, 'foo:bar': fooBar = 'foo-bar' } = defineProps<{ 
           "foo": number // double-quoted string
           "bar": number // single-quoted string
           'foo:bar': string // single-quoted string containing symbols
@@ -111,17 +111,21 @@ describe('sfc props transform', () => {
       </script>
     `)
     expect(bindings).toStrictEqual({
+      __propsAliases: {
+        fooBar: 'foo:bar'
+      },
       foo: BindingTypes.PROPS,
       bar: BindingTypes.PROPS,
-      "'foo:bar'": BindingTypes.PROPS,
-      "'onUpdate:modelValue'": BindingTypes.PROPS
+      'foo:bar': BindingTypes.PROPS,
+      fooBar: BindingTypes.PROPS_ALIASED,
+      'onUpdate:modelValue': BindingTypes.PROPS
     })
     expect(content).toMatch(`
   props: {
     foo: { type: Number, required: true, default: 1 },
     bar: { type: Number, required: true, default: 2 },
-    'foo:bar': { type: String, required: true },
-    'onUpdate:modelValue': { type: Function, required: true }
+    "foo:bar": { type: String, required: true, default: 'foo-bar' },
+    "onUpdate:modelValue": { type: Function, required: true }
   },`)
     assertCode(content)
   })

packages/compiler-sfc/src/compileScript.ts

@@ -834,8 +834,11 @@ export function compileScript(
         }
 
         const { type, required } = props[key]
+        // key may contain symbols such
+        // e.g. onUpdate:modelValue -> "onUpdate:modelValue"
+        const finalKey = /^[a-z0-9]+$/i.test(key) ? key : `"${key}"`
         if (!isProd) {
-          return `${key}: { type: ${toRuntimeTypeString(
+          return `${finalKey}: { type: ${toRuntimeTypeString(
             type
           )}, required: ${required}${
             defaultString ? `, ${defaultString}` : ``
@@ -850,12 +853,14 @@ export function compileScript(
           // #4783 for boolean, should keep the type
           // #7111 for function, if default value exists or it's not static, should keep it
           // in production
-          return `${key}: { type: ${toRuntimeTypeString(type)}${
+          return `${finalKey}: { type: ${toRuntimeTypeString(type)}${
             defaultString ? `, ${defaultString}` : ``
           } }`
         } else {
           // production: checks are useless
-          return `${key}: ${defaultString ? `{ ${defaultString} }` : 'null'}`
+          return `${finalKey}: ${
+            defaultString ? `{ ${defaultString} }` : 'null'
+          }`
         }
       })
       .join(',\n    ')}\n  }`
@@ -1893,13 +1898,7 @@ function extractRuntimeProps(
       (m.key.type === 'Identifier' || m.key.type === 'StringLiteral')
     ) {
       let type, keyName
-      if (m.key.type === 'StringLiteral') {
-        keyName = /^[a-z0-9]+$/i.test(m.key.value)
-          ? m.key.value
-          : `'${m.key.value}'`
-      } else {
-        keyName = m.key.name
-      }
+      keyName = m.key.type === 'StringLiteral' ? m.key.value : m.key.name
       if (m.type === 'TSMethodSignature') {
         type = ['Function']
       } else if (m.typeAnnotation) {