preact@10.0.0-rc.3 svg prop strokeWidth is not equal to stroke-width

For our project we use SVG arcs to render a circular chart. When upgrading from 8.5.2 to the newest rc, we noticed that our circle charts turned into blobs. Upon further inspection we realized that the issue occurs on all SVG path elements.

After some hair pulling and debugging and checking code differences we came to the conclusion that the newest version doesn’t correctly pass the strokeWidth property.

When changing it to stroke-width it started working properly again.

Code sandbox example of said behaviour. Check the difference between components Arc and Arc2, they only differ in strokeWidth vs stroke-width.

[andrewiggins]

Thanks everyone for the issue and digging in 😁. I took a look myself and below are some of my thoughts:

Re: the original issue (strokeWidth not working in preact) - preact core (not preact/compat) does not normalize SVG attributes and properties. SVG is pretty interesting when it comes to the names of its properties and attributes. Some properties (and their attributes) on SVG objects are camelCased (e.g. clipPathUnits on a clipPath element), some attributes are kebab-case (e.g. clip-path on many SVG elements), and other attributes (usu. ones inherited from the DOM, e.g. oninput are all lowercase - check out in your browser’s console). Normalizing all of these special cases is out of scope for preact core as it would be too big for the core renderer 😕 .

preact/compat however tries to mimic react which does normalize these attributes so we have a best effort attempt to get this right. So I think the recommendation, like @bojan88 hinted at, is that if this normalization is important to you and worth the bytes, then use preact/compat. Else, use the casing that matches what SVG expects which can be found on MDN (e.g. path).

As @mattly pointed out, preact core does do some normalization (for legacy reasons) specifically for DOM events which are typically always all lowercase, which is why onInput and onSubmit work in preact core.

However, it appear our TypeScript typings may be wrong. They do indeed state that strokeWidth is supported 😬. We probably need to update some things here and differentiate which properties are allowed in preact core and which properties are allowed in preact/compat. Perhaps we should open a separate issue for that?

[bojan88]

@KerryMahne from what I understand Preact is not converting camel case to kebab case. That’s being done in preact/compat module.

You just need to add this to the top of your script import { createElement as h } from "preact/compat";. Here’s updated code sandbox.