Boolean attribute rendering differs from Preact

[rmales]

Hi,

Boolean attribute rendering seems to differ from Preact itself (4.8.0 at least).

For example with the JSX:
<div aria-hidden={true} />

preact: <div aria-hidden="true"></div>
preact-render-to-string: <div aria-hidden></div>

http://jsfiddle.net/28ckgyzj/1/ (see console log)

(With ARIA attributes presence doesn't indicate truth as it does with the checked attribute for example).

Thanks

[developit]

@rmales Looks like this is specific to attributes (generally JSX attributes with dashes like aria-*). I'm not sure what to recommend, since ARIA is an addition to HTML and doesn't have quite the same boolean attribute semantics, as you mentioned. Thoughts?

In my own work, I tend to do the following:

let hidden = true;
<div aria-hidden={String(hidden)} />

[rmales]

@developit Thanks for your reply. I think your suggested approach is completely reasonable.

My issue was mainly one of suprise at the difference between the output of this library and the main Preact library. The output from React is consistent (although I don't know if you aim for parity with its string rendering): https://jsfiddle.net/rz6uk3pa/

I think React may have a whitelist for attributes which work like checked with other booleans being rendered as strings (although obviously there is a maintenance and size cost to that).

Thanks for your work on Preact all the same!

[sventschui]

Closing as this issue is almost 4 years old and we have released 6 major versions of preact and various versions of preact-render-to-string since then. Feel free to re-open if you still experience this issue with the latest versions.

[rmales]

The issue is still present (see https://codesandbox.io/s/objective-butterfly-thjrn?file=/src/index.js), whether it warrants reopening I leave up to you (as I no longer use this package).

[sventschui]

Thank you for taking the time to reply. This is totally valid and I reopened the issue. Sorry for the early close

[marvinhagemeister]

We did a change in core a while back for aria attributes specifically. They need to be handled differently.

See https://github.com/preactjs/preact/pull/2347/files

[sventschui]

Thanks for the heads up @marvinhagemeister , that makes me confident to do the same workaround here as well. Will PR in a second