Skip to content

LG-3237: React internationalization string element interpolation#3997

Merged
aduth merged 4 commits intomasterfrom
aduth-interpolate-string-react
Aug 3, 2020
Merged

LG-3237: React internationalization string element interpolation#3997
aduth merged 4 commits intomasterfrom
aduth-interpolate-string-react

Conversation

@aduth
Copy link
Copy Markdown
Contributor

@aduth aduth commented Jul 30, 2020

Why: Localized strings may contain HTML markup, which React will escape by default. This provides a mechanism to be able to safely replace intended HTML markup with equivalent React elements substitutes.

See inline code documentation for formatHTML for more details, limitations, etc.

Before After
Before screenshot After screenshot

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This gives me pause. Technically the u here is a component, and the rule should apply to all components. But I'm also motivated to not over-complicate how one interfaces with formatHTML to impose that they define a separate component function with its own propTypes, defaultProps, etc. Conversely, I could have chosen to not assign the "handlers" mapping with the value being of type Component, and instead more of a generic "function which returns an element". The nice thing about this usage is that you could choose to extract or reuse a traditional component here (e.g. { button: MyFancyButton }).

I see some value in having the rule in general, in how it's self-documenting and provides some availability of type-hinting for capable IDEs.

But it's also something where, if we decide to integrate more of the TypeScript tooling, it's completely redundant with standard JSDoc function parameter documentation (where the parameter is the props object of a particular shape).

Copy link
Copy Markdown
Contributor

@zachmargolis zachmargolis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

aduth added 4 commits August 3, 2020 08:24
**Why**: Localized strings may contain HTML markup, which React will escape by default. This provides a mechanism to be able to safely replace intended HTML markup with equivalent React elements substitutes.
**Why**: The implementation is acknowledged as naive. Use documentation to prevent developer from getting themself in trouble
**Why**: Clarifies that it relies on React interpolation to replace with styles
@aduth aduth force-pushed the aduth-interpolate-string-react branch from da980e9 to 5cae041 Compare August 3, 2020 12:26
@aduth aduth merged commit 40615ba into master Aug 3, 2020
@aduth aduth deleted the aduth-interpolate-string-react branch August 3, 2020 13:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants