vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.68k stars 8.33k forks source link

Custom Element type based defineProps does not convert attribute to number in production build #8080

Open jlangstrom opened 1 year ago

jlangstrom commented 1 year ago

Vue version

3.3.0-alpha.9

Link to minimal reproduction

https://github.com/jlangstrom/ts-vue-ce-props

Steps to reproduce

Hi friends,

  1. Clone repo
  2. npm install
  3. npm run issue:test:e2e:dev
  4. npm run issue:test:e2e:prod

The README in the repo describes the tests.

What is expected?

Both tests to pass regardless if using dev build or production build.

What is actually happening?

The e2e test with production build fails.

When using Typescript and type based compile time prop definitions. The props are not converted into runtime props in the production build. This seems to have an impact on the Vue3 custom element casting its props defined as numbers into numbers from string.

When sending a prop through an attribute on the custom element that is defined as being a number it will still be a string in the web component in a production build.

System Info

No response

Any additional comments?

Here I've done a fork that attempts to fix the issue in the compiler-sfc. You can probably comment on how to do it better.

Have a nice day. Thank you for reading.

edison1105 commented 1 day ago

The issue can no longer be reproduced using the latest version of Vue.