Inferno: Consider supporting `className` instead of `class` on SVG elements similar to React

[mstijak]

React allows using className on SVG elements.
Please consider supporting this with inferno-compat too.

[russelgal]

<svg class="..."></svg> working for me instead className

[trueadm]

@mstijak This should work on 1.0 – have you tested it there? SVG elements can't actually use className, that's part of the reason why.

[mstijak]

@trueadm I'm using [email protected]. I probably missed something. I'll check again...

[buzinas]

Not working here too. I was using class for everything, but it's complicated when you want to use with destructuring etc, because of it being a reserved word in Javascript. Then, I changed everything to className, but the SVGs stopped working. So, I switched back to class only the SVGs.

Actually, I think that class and className should work exactly in the same way,

[Havunen]

className will give better performance, but svg don't support classname API. We could hide this behavior from user by internally using patchAttribute when className is sent to SVG

[buzinas]

@Havunen That would be a great solution, imo.

[Havunen]

class and className will now both work for SVG. Implemented in 1.0. https://github.com/trueadm/inferno/commit/aa17a5298a5a9592275b2e86a96ac806267c68a4
Closing this issue.

[buzinas]

@Havunen not sure if this solves the issue. The className already worked for SVG, the only problem was when it was being patched to another value. The className property is _readonly_ when talking about SVGs. None of those tests check that, and it doesn't seem that any of the file changes handle that too.

Am I missing anything?

[Havunen]

It should work because it uses internally setAttribute('class', *) instead className API. See tests here: https://github.com/trueadm/inferno/blob/aa17a5298a5a9592275b2e86a96ac806267c68a4/src/DOM/__tests__/svg.spec.browser.js#L326-L331

Or maybe I missed something... :P

[Havunen]

Removing implementation makes all tests fail with:
TypeError: Cannot assign to read only property 'className' of object '#<SVGSVGElement>'
double verified it fixes this issue.

[buzinas]

Oh, great, thanks! So it will work starting from v1.0 :)