Protect void elements from translations which try to set their children #155
Conversation
stasm
force-pushed
the
localized-protect-void
branch
from
828b1b0 to
6ce6ca3
Compare
|
@hkasemir Would you mind reviewing this? |
| // "void element tags must neither have `children` nor use | ||
| // `dangerouslySetInnerHTML`" error. | ||
| if (elem.type in VOID_ELEMENTS) { | ||
| return cloneElement(elem, localizedProps); |
There was a problem hiding this comment.
any chance we'd want to log a warning to the console to indicate an invalid message format? Or do we prefer silently handling the error?
There was a problem hiding this comment.
I'd like to tackle the problem of error reporting in a separate PR.
| ); | ||
|
|
||
| assert.ok(wrapper.contains( | ||
| <input title="TITLE" /> |
| 'source': true, | ||
| 'track': true, | ||
| 'wbr': true | ||
| }; |
There was a problem hiding this comment.
also a quick search of void elements produced a larger list than this:
https://github.com/wooorm/html-void-elements/
any reason we're using this smaller list?
There was a problem hiding this comment.
though this does look suspiciously exactly like what is in the React code: https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/omittedCloseTags.js
There was a problem hiding this comment.
Ah, nice find in React's source. I'll use their file instead of the void-elements package because what we really care about here is not a complete list of void elements but rather the list that React uses to throw errors.
stasm
force-pushed
the
localized-protect-void
branch
2 times, most recently
from
08d6fbc to
2874a99
Compare
A broken translation may accidentally set a value which <Localized> will normally insert as a child of its wrapped component. For void elements we need to actively forbid this because React throws when trying to set children of void elements, breaking the entire app.
stasm
force-pushed
the
localized-protect-void
branch
from
2874a99 to
67cd61f
Compare
A broken translation may accidentally set a value which
<Localized>will normally insert as a child of its wrapped component. For void elements we need to actively forbid this because React throws when trying to set children of void elements, breaking the entire app.