bug: React + SSR results in commonly named props not having their values set

[kyleMessnerLillyContractor]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Framework Output Target

SSR (@stencil/ssr)

Output Target Version

0.4.0

Stencil Version

4.43.5

Reproduction URL

n/a

Describe the Bug

When a component has a prop that includes a key in this possibleStandardNames object then during SSR the prop value will be undefined.

It seems like the prop gets mapped to a different name but the component code is looking for the camelcased version of the prop.

Steps to Reproduce

1. Create a component with a prop that matches a key in the above linked object (we found this with maxLength) and have it render typeof this.maxLength
2. Build the component with @stencil/react-output-target
3. SSR that component using @stencil/ssr
4. Observe result served shows the host tag having both maxLength="10" and maxlength="10" attributes plus the the string undefined as its rendered content.

Expected Behavior

Given I have a component with the following prop:

@Prop() maxLength: number;

and then I supply the prop value when using the component in a framework that uses @stencil/react-output-target + @stencil/ssr:

<my-component maxLength={10} />

That the component has access to that value during SSR.

Additional Context

According to the comment at the top of that file, this object is supposed to be a copy of the React object however the two objects appear to be inverted. In the React codebase it seems like the idea is the object is a mapping from common misspellings to their correctly spelled counterparts where as the stencil SSR object is the inverse. Though perhaps stencil version of this object is supposed to actually be React prop names mapped to HTML attribute names? I'm not sure.

Logs