Manage camel-cased dominant-baseline attribute in preact/compat

[nmondon]

Hello!

What does it do?

Manage dominant-baseline attribute when written in camel case with preact/compat

Related issue

A tiny fix to manage #2858 for preact/compat.

Tests?

I also had a new unit test in render.test.js to ensure that camel-cased attributes listed in CAMEL_PROPS will be transformed... let me know if you want me to remove or modify it.

[coveralls]

Coverage remained the same at 99.622% when pulling 372185e on nmondon:fix-dominant-baseline-attr into 24a859b on preactjs:master.

[marvinhagemeister]

Awesome, thanks a bunch for the PR 🙌 Anything you want to do before marking it as ready to be merged? It's currently marked as a draft, but imo we can merge it in as is 👍

[nmondon]

Great! Nothing to add, I'm gonna change the stage

[developit]

I think this might be slightly smaller:

Suggested change

	const CAMEL_PROPS = /^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/;
	const CAMEL_PROPS = /^(?:accent|alignment|arabic|[bB]aseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/;

[nmondon]

Hi Jason, I'm not sure this will fix the transformation of dominantBaseline into dominant-baseline (or alignment-baseline) as this part of the regex only applies to the start of the string.
I see your point of targeting only Baseline$ instead of ^(dominant|alignment).

Here I presume that ^baseline was here to manage baseline-shift.
We can make an attempt of dealing with those 3 attributes (dominant-baseline, alignment-baseline and baseline-shift), something like:

([Bb]aseline management is deported at the end of the regex)

const CAMEL_PROPS = /(^(?:accent|arabic|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z])|([bB]aseline)/

I'm gonna figure this out

[nmondon]

This seems ok for the unit test and allows to manage the 3 attributes.

Suggested change

	const CAMEL_PROPS = /^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/;
	const CAMEL_PROPS = /(^(?:accent|arabic|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z])|([bB]aseline)/;

We can even get rid of the parentheses of the second capturing group [bB]aseline...

Suggested change

	const CAMEL_PROPS = /^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/;
	const CAMEL_PROPS = /(^(?:accent|arabic|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z])|[bB]aseline/;

Let me know what you think

[developit]

Approving the simple version for now.

[JamesHemery]

Hi @developit !

When this will be released ? Thanks you.

[developit]

@JamesHemery Should be this week or next, we are due for a patch release already.