fix(compiler-sfc): updated code

Author: baiwusanyu-c

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

@@ -1,107 +1,14 @@
 // Vitest Snapshot v1
 
-exports[`sfc props transform > $$() escape 1`] = `
-"import { toRef as _toRef } from 'vue'
-
-export default {
-  props: ['foo'],
-  setup(__props) {
-const __props_bar = _toRef(__props, 'bar');
-const __props_foo = _toRef(__props, 'foo');
-
-      
-      console.log((__props_foo))
-      console.log((__props_bar))
-      ;({ foo: __props_foo, baz: __props_bar })
-      
-return () => {}
-}
-
-}"
-`;
-
-exports[`sfc props transform > aliasing 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
-
-
-export default {
-  props: ['foo'],
-  setup(__props) {
-
-      
-      let x = foo
-      let y = __props.foo
-      
-return (_ctx, _cache) => {
-  return _toDisplayString(__props.foo + __props.foo)
-}
-}
-
-}"
-`;
-
-exports[`sfc props transform > basic usage 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
-
-
-export default {
-  props: ['foo'],
-  setup(__props) {
-
-      
-      console.log(__props.foo)
-      
-return (_ctx, _cache) => {
-  return _toDisplayString(__props.foo)
-}
-}
-
-}"
-`;
-
-exports[`sfc props transform > computed static key 1`] = `
-"import { toDisplayString as _toDisplayString } from \\"vue\\"
-
-
-export default {
-  props: ['foo'],
-  setup(__props) {
-
-    
-    console.log(__props.foo)
-    
-return (_ctx, _cache) => {
-  return _toDisplayString(__props.foo)
-}
-}
-
-}"
-`;
-
-exports[`sfc props transform > default values w/ runtime declaration 1`] = `
-"import { mergeDefaults as _mergeDefaults } from 'vue'
-
-export default {
-  props: _mergeDefaults(['foo', 'bar'], {
-  foo: 1,
-  bar: () => ({})
-}),
-  setup(__props) {
-
-      
-      
-return () => {}
-}
-
-}"
-`;
-
 exports[`sfc props transform > default values w/ type declaration & key is string 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
   props: {
-    foo: { type: Number, required: true, default: 1 }
+    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 }
   },
   setup(__props: any) {
 
@@ -112,114 +19,3 @@ return () => {}
 
 })"
 `;
-
-exports[`sfc props transform > default values w/ type declaration 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-
-export default /*#__PURE__*/_defineComponent({
-  props: {
-    foo: { type: Number, required: false, default: 1 },
-    bar: { type: Object, required: false, default: () => ({}) }
-  },
-  setup(__props: any) {
-
-      
-      
-return () => {}
-}
-
-})"
-`;
-
-exports[`sfc props transform > default values w/ type declaration, prod mode 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-
-export default /*#__PURE__*/_defineComponent({
-  props: {
-    foo: { default: 1 },
-    bar: { default: () => ({}) },
-    baz: null,
-    boola: { type: Boolean },
-    boolb: { type: [Boolean, Number] },
-    func: { type: Function, default: () => (() => {}) }
-  },
-  setup(__props: any) {
-
-      
-      
-return () => {}
-}
-
-})"
-`;
-
-exports[`sfc props transform > multiple variable declarations 1`] = `
-"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
-
-
-export default {
-  props: ['foo'],
-  setup(__props) {
-
-      const bar = 'fish', hello = 'world'
-      
-return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.foo) + \\" \\" + _toDisplayString(hello) + \\" \\" + _toDisplayString(bar), 1 /* TEXT */))
-}
-}
-
-}"
-`;
-
-exports[`sfc props transform > nested scope 1`] = `
-"export default {
-  props: ['foo', 'bar'],
-  setup(__props) {
-
-      
-      function test(foo) {
-        console.log(foo)
-        console.log(__props.bar)
-      }
-      
-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'
-
-export default {
-  props: ['foo', 'bar', 'baz'],
-  setup(__props) {
-
-const rest = _createPropsRestProxy(__props, [\\"foo\\",\\"bar\\"]);
-
-      
-      
-return () => {}
-}
-
-}"
-`;

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

@@ -1136,7 +1136,7 @@ const emit = defineEmits(['a', 'b'])
       `)
       assertCode(content)
     })
-    
+
     // #7111
     test('withDefaults (static) w/ production mode', () => {
       const { content } = compile(
@@ -1277,7 +1277,6 @@ const emit = defineEmits(['a', 'b'])
       expect(content).toMatch(`emits: ["foo", "bar"]`)
     })
 
-    
     test('defineEmits w/ type from normal script', () => {
       const { content } = compile(`
       <script lang="ts">

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

@@ -100,15 +100,28 @@ describe('sfc props transform', () => {
   })
 
   test('default values w/ type declaration & key is string', () => {
-    const { content , bindings} = compile(`
+    const { content, bindings } = compile(`
       <script setup lang="ts">
-      const { foo = 1 } = defineProps<{ "foo": number }>()
+      const { foo = 1, bar = 2 } = defineProps<{ 
+          "foo": number // double-quoted string
+          "bar": number // single-quoted string
+          'foo:bar': string // single-quoted string containing symbols
+          "onUpdate:modelValue": (val: number)=>void } // double-quoted string containing symbols
+          >()
       </script>
     `)
-    expect(bindings).toMatchObject({foo:'props'})
+    expect(bindings).toStrictEqual({
+      foo: BindingTypes.PROPS,
+      bar: BindingTypes.PROPS,
+      "'foo:bar'": BindingTypes.PROPS,
+      "'onUpdate:modelValue'": BindingTypes.PROPS
+    })
     expect(content).toMatch(`
   props: {
-    foo: { type: Number, required: true, default: 1 }
+    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 }
   },`)
     assertCode(content)
   })

packages/compiler-sfc/src/compileScript.ts

@@ -1889,12 +1889,14 @@ function extractRuntimeProps(
   const members = node.type === 'TSTypeLiteral' ? node.members : node.body
   for (const m of members) {
     if (
-        (m.type === 'TSPropertySignature' || m.type === 'TSMethodSignature') &&
-        (m.key.type === 'Identifier' || m.key.type === 'StringLiteral')
+      (m.type === 'TSPropertySignature' || m.type === 'TSMethodSignature') &&
+      (m.key.type === 'Identifier' || m.key.type === 'StringLiteral')
     ) {
-      let type, keyName;
-      if(m.key.type === 'StringLiteral'){
-        keyName = m.key.value
+      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
       }