fix(reactivity-transform): fix props access codegen for non-identifier prop names (#5436)

fix #5425

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

@@ -134,6 +134,25 @@ return () => {}
 }"
 `;
 
+exports[`sfc props transform non-identifier prop names 1`] = `
+"import { toDisplayString as _toDisplayString } from \\"vue\\"
+
+
+export default {
+  props: { 'foo.bar': Function },
+  setup(__props) {
+
+      
+      let x = __props[\\"foo.bar\\"]
+      
+return (_ctx, _cache) => {
+  return _toDisplayString(__props[\\"foo.bar\\"])
+}
+}
+
+}"
+`;
+
 exports[`sfc props transform rest spread 1`] = `
 "import { createPropsRestProxy as _createPropsRestProxy } from 'vue'
 

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

@@ -127,6 +127,28 @@ describe('sfc props transform', () => {
     })
   })
 
+  // #5425
+  test('non-identifier prop names', () => {
+    const { content, bindings } = compile(`
+      <script setup>
+      const { 'foo.bar': fooBar } = defineProps({ 'foo.bar': Function })
+      let x = fooBar
+      </script>
+      <template>{{ fooBar }}</template>
+    `)
+    expect(content).toMatch(`x = __props["foo.bar"]`)
+    expect(content).toMatch(`toDisplayString(__props["foo.bar"])`)
+    assertCode(content)
+    expect(bindings).toStrictEqual({
+      x: BindingTypes.SETUP_LET,
+      'foo.bar': BindingTypes.PROPS,
+      fooBar: BindingTypes.PROPS_ALIASED,
+      __propsAliases: {
+        fooBar: 'foo.bar'
+      }
+    })
+  })
+
   test('rest spread', () => {
     const { content, bindings } = compile(`
       <script setup>

packages/compiler-sfc/src/compileScript.ts

@@ -431,7 +431,11 @@ export function compileScript(
                 prop.key
               )
             }
-            const propKey = (prop.key as Identifier).name
+            
+            const propKey = prop.key.type === 'StringLiteral'
+              ? prop.key.value
+              : (prop.key as Identifier).name
+            
             if (prop.value.type === 'AssignmentPattern') {
               // default value { foo = 123 }
               const { left, right } = prop.value