fix(custom-element): correctly handle number type props in prod

packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap

@@ -18,6 +18,66 @@ return { props, bar }
 }"
 `;
 
+exports[`defineProps > custom element retains the props type & default value & production mode 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+interface Props { 
+          foo?: number;
+      }
+
+export default /*#__PURE__*/_defineComponent({
+  __name: 'app.ce',
+  props: {
+    foo: { default: 5.5, type: Number }
+  },
+  setup(__props: any, { expose: __expose }) {
+  __expose();
+
+      const props = __props;
+
+return { props }
+}
+
+})"
+`;
+
+exports[`defineProps > custom element retains the props type & production mode 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  __name: 'app.ce',
+  props: {
+    foo: {type: Number}
+  },
+  setup(__props: any, { expose: __expose }) {
+  __expose();
+
+      const props = __props
+
+return { props }
+}
+
+})"
+`;
+
+exports[`defineProps > custom element retains the props type w/ production mode 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  __name: 'app.ce',
+  props: {
+    foo: {type: Number}
+  },
+  setup(__props: any, { expose: __expose }) {
+  __expose();
+
+      const props = __props
+
+return { props }
+}
+
+})"
+`;
+
 exports[`defineProps > defineProps w/ runtime options 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 

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

@@ -608,4 +608,35 @@ const props = defineProps({ foo: String })
       }).toThrow(`cannot accept both type and non-type arguments`)
     })
   })
+
+  // #8989
+  test('custom element retains the props type & production mode', () => {
+    const { content } = compile(
+      `<script setup lang="ts">
+      const props = defineProps<{ foo: number}>()
+      </script>`,
+      { isProd: true },
+      { filename: 'app.ce.vue' }
+    )
+
+    expect(content).toMatch(`foo: {type: Number}`)
+    assertCode(content)
+  })
+
+  test('custom element retains the props type & default value & production mode', () => {
+    const { content } = compile(
+      `<script setup lang="ts">
+      interface Props { 
+          foo?: number;
+      }
+      const props = withDefaults(defineProps<Props>(), {
+          foo: 5.5,
+      });
+      </script>`,
+      { isProd: true },
+      { filename: 'app.ce.vue' }
+    )
+    expect(content).toMatch(`foo: { default: 5.5, type: Number }`)
+    assertCode(content)
+  })
 })

packages/compiler-sfc/src/compileScript.ts

@@ -130,6 +130,14 @@ export interface SFCScriptCompileOptions {
    * using it, disable this and switch to the [Vue Macros implementation](https://vue-macros.sxzz.moe/features/reactivity-transform.html).
    */
   reactivityTransform?: boolean
+  /**
+   * Transform Vue SFCs into custom elements.
+   * - `true`: all `*.vue` imports are converted into custom elements
+   * - `RegExp`: matched files are converted into custom elements
+   *
+   * @default /\.ce\.vue$/
+   */
+  customElement?: boolean | RegExp | RegExp[]
 }
 
 export interface ImportBinding {

packages/compiler-sfc/src/script/context.ts

@@ -1,6 +1,6 @@
 import { CallExpression, Node, ObjectPattern, Program } from '@babel/types'
 import { SFCDescriptor } from '../parse'
-import { generateCodeFrame } from '@vue/shared'
+import { generateCodeFrame, isArray, isRegExp } from '@vue/shared'
 import { parse as babelParse, ParserPlugin } from '@babel/parser'
 import { ImportBinding, SFCScriptCompileOptions } from '../compileScript'
 import { PropsDestructureBindings } from './defineProps'
@@ -12,6 +12,7 @@ import { TypeScope } from './resolveType'
 export class ScriptCompileContext {
   isJS: boolean
   isTS: boolean
+  isCE = false
 
   scriptAst: Program | null
   scriptSetupAst: Program | null
@@ -95,6 +96,24 @@ export class ScriptCompileContext {
       scriptSetupLang === 'ts' ||
       scriptSetupLang === 'tsx'
 
+    const customElement = options.customElement
+    const filename = this.descriptor.filename
+
+    let isCE = false
+    if (typeof customElement === 'boolean') {
+      isCE = customElement
+    } else if (isRegExp(customElement)) {
+      isCE = customElement.test(filename)
+    } else if (isArray(customElement)) {
+      isCE = customElement.some(
+        pattern => isRegExp(pattern) && pattern.test(filename)
+      )
+    } else {
+      isCE = /\.ce\.vue$/.test(filename)
+    }
+
+    this.isCE = isCE
+
     // resolve parser plugins
     const plugins: ParserPlugin[] = resolveParserPlugins(
       (scriptLang || scriptSetupLang)!,

packages/compiler-sfc/src/script/defineProps.ts

@@ -274,6 +274,17 @@ function genRuntimePropFromType(
       defaultString
     ])} }`
   } else {
+    // #8989 for custom element, should keep the type
+    if (ctx.isCE) {
+      if (defaultString) {
+        return `${finalKey}: ${`{ ${defaultString}, type: ${toRuntimeTypeString(
+          type
+        )} }`}`
+      } else {
+        return `${finalKey}: {type: ${toRuntimeTypeString(type)}}`
+      }
+    }
+
     // production: checks are useless
     return `${finalKey}: ${defaultString ? `{ ${defaultString} }` : `{}`}`
   }