fix(custom-elements): cast numbers with Number rules

[posva]

Fix #4370

By using Number(), we handle Infinity, NaN, and all other number syntaxes. I think this makes the most sense for the custom elements since it's also "the platform" and Infinity and NaN can be conveniently casted to a string too (String(Number('Infinity')) === 'Infinity')).

We could also take a look at the type of the prop being a Number and only apply the cast in that case. Let me know if that makes more sense.

[github-actions]

Size report

Path	Size
vue.global.prod.js	45.81 KB (+0.08% 🔺)
runtime-dom.global.prod.js	30.25 KB (+0.11% 🔺)
size-check.global.prod.js	17.41 KB (0%)

[zhangenming]

did we have two toNumber at the same time?

[posva]

It should definitely be renamed to something else

[yyx990803]

The test file customElement.spec.ts already exists 😂

[posva]

Cmd + P betrayed me! 😆

[yyx990803]

While this is a good improvement, I took another look at #4370 and feels there's a bit more to the original issue. Specifically for a prop declared as type: String, we probably should not attempt to parse it into a number at all. For example, if the original usage was something like <my-el phone="123456789">, it should be retained as a string.

[posva]

Yeah, I thought about it too. I have two questions then:

• Should I just look if the props is an object and if it exists and it's either not Number or not { type: Number }, skip the parseNumber() call.
• Should I still call parseNumber() for non existant props?

[matt-filion]

What would it take to get this fix included in a near term version push. It is holding up some of our pushes.

[posva]

Getting feedback on the two questions above from people using this would help move this forward

[akibrk]

On Vue 2, all wc target build props are passed as a string, we then parse it within the component as a number/boolean/object or whatever the use case is. Leaving it as a string would not be a bad idea, instead of trying to parse it for all cases.

<av-component data-is-open="true" data-id="xpd154" data-amount="12.18"></av-component>

• dataIsOpen will be a be string
• dataId will be string
• dataAmount will be string

In this case type assertion based on the prop type within defineCustomElement definition would not work.