feat(compiler-sfc): support props name to be defined as a string

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

@@ -78,6 +78,24 @@ return (_ctx, _cache) => {
 }"
 `;
 
+exports[`sfc props transform > default values w/ runtime declaration & key is string 1`] = `
+"import { mergeDefaults as _mergeDefaults } from 'vue'
+
+export default {
+  props: _mergeDefaults(['foo', 'foo:bar'], {
+  foo: 1,
+  \\"foo:bar\\": 'foo-bar'
+}),
+  setup(__props) {
+
+
+
+return () => {}
+}
+
+}"
+`;
+
 exports[`sfc props transform > default values w/ runtime declaration 1`] = `
 "import { mergeDefaults as _mergeDefaults } from 'vue'
 
@@ -96,6 +114,26 @@ 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 },
+    bar: { type: Number, required: true, default: 2 },
+    \\"foo:bar\\": { type: String, required: true, default: 'foo-bar' },
+    \\"onUpdate:modelValue\\": { type: Function, required: true }
+  },
+  setup(__props: any) {
+
+
+
+return () => {}
+}
+
+})"
+`;
+
 exports[`sfc props transform > default values w/ type declaration 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 

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

@@ -83,6 +83,28 @@ describe('sfc props transform', () => {
 })`)
     assertCode(content)
   })
+  test('default values w/ runtime declaration & key is string', () => {
+    const { content, bindings } = compile(`
+      <script setup>
+      const { foo = 1, 'foo:bar': fooBar = 'foo-bar' } = defineProps(['foo', 'foo:bar'])
+      </script>
+    `)
+    expect(bindings).toStrictEqual({
+      __propsAliases: {
+        fooBar: 'foo:bar'
+      },
+      foo: BindingTypes.PROPS,
+      'foo:bar': BindingTypes.PROPS,
+      fooBar: BindingTypes.PROPS_ALIASED
+    })
+
+    expect(content).toMatch(`
+  props: _mergeDefaults(['foo', 'foo:bar'], {
+  foo: 1,
+  "foo:bar": 'foo-bar'
+}),`)
+    assertCode(content)
+  })
 
   test('default values w/ type declaration', () => {
     const { content } = compile(`
@@ -99,6 +121,37 @@ describe('sfc props transform', () => {
     assertCode(content)
   })
 
+  test('default values w/ type declaration & key is string', () => {
+    const { content, bindings } = compile(`
+      <script setup lang="ts">
+      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
+        "onUpdate:modelValue": (val: number) => void  // double-quoted string containing symbols
+      }>()
+      </script>
+    `)
+    expect(bindings).toStrictEqual({
+      __propsAliases: {
+        fooBar: 'foo:bar'
+      },
+      foo: BindingTypes.PROPS,
+      bar: 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, default: 'foo-bar' },
+    "onUpdate:modelValue": { type: Function, required: true }
+  },`)
+    assertCode(content)
+  })
+
   test('default values w/ type declaration, prod mode', () => {
     const { content } = compile(
       `

packages/compiler-sfc/src/compileScript.ts

@@ -834,8 +834,9 @@ export function compileScript(
         }
 
         const { type, required } = props[key]
+        const finalKey = getEscapedKey(key)
         if (!isProd) {
-          return `${key}: { type: ${toRuntimeTypeString(
+          return `${finalKey}: { type: ${toRuntimeTypeString(
             type
           )}, required: ${required}${
             defaultString ? `, ${defaultString}` : ``
@@ -850,12 +851,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  }`
@@ -1625,7 +1628,7 @@ export function compileScript(
       const defaults: string[] = []
       for (const key in propsDestructuredBindings) {
         const d = genDestructuredDefaultValue(key)
-        if (d) defaults.push(`${key}: ${d}`)
+        if (d) defaults.push(`${getEscapedKey(key)}: ${d}`)
       }
       if (defaults.length) {
         declCode = `${helper(
@@ -1890,16 +1893,17 @@ function extractRuntimeProps(
   for (const m of members) {
     if (
       (m.type === 'TSPropertySignature' || m.type === 'TSMethodSignature') &&
-      m.key.type === 'Identifier'
+      (m.key.type === 'Identifier' || m.key.type === 'StringLiteral')
     ) {
       let type
+      const keyName = m.key.type === 'StringLiteral' ? m.key.value : m.key.name
       if (m.type === 'TSMethodSignature') {
         type = ['Function']
       } else if (m.typeAnnotation) {
         type = inferRuntimeType(m.typeAnnotation.typeAnnotation, declaredTypes)
       }
-      props[m.key.name] = {
-        key: m.key.name,
+      props[keyName] = {
+        key: keyName,
         required: !m.optional,
         type: type || [`null`]
       }
@@ -2355,3 +2359,12 @@ export function resolveObjectKey(node: Node, computed: boolean) {
   }
   return undefined
 }
+
+/**
+ * key may contain symbols such
+ * e.g. onUpdate:modelValue -> "onUpdate:modelValue"
+ */
+export const escapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
+function getEscapedKey(key: string) {
+  return escapeSymbolsRE.test(key) ? JSON.stringify(key) : key
+}

packages/compiler-sfc/src/cssVars.ts

@@ -10,6 +10,7 @@ import {
 import { SFCDescriptor } from './parse'
 import { PluginCreator } from 'postcss'
 import hash from 'hash-sum'
+import { escapeSymbolsRE } from './compileScript'
 
 export const CSS_VARS_HELPER = `useCssVars`
 
@@ -31,10 +32,7 @@ function genVarName(id: string, raw: string, isProd: boolean): string {
     return hash(id + raw)
   } else {
     // escape ASCII Punctuation & Symbols
-    return `${id}-${raw.replace(
-      /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g,
-      s => `\\${s}`
-    )}`
+    return `${id}-${raw.replace(escapeSymbolsRE, s => `\\${s}`)}`
   }
 }