Experiment with DOM Overlays

[Swatinem]

One thing that fluent supports are DOM Overlays, which I would really love to use for multiple reasons:

• you often have to define different translation keys for nested things
• it is confusing because you often have to mix <Localized /> Component with usage of the raw intl object via the context
• it is blocking better type generation, since basically any parameter could potentially be a ReactNode.
• sometimes it might be a good idea to actually create markup in your translations
• passing react elements via props is super ugly

translations = {
  "foo": "Translation with react {elem}",
  "nested-prop": "translated property",
  "nested-children": "and translated nested children!",
}
function render() {
  const intl = useContext(…)
  return <Localized id="foo" params={{
    elem: <MyComponent propViaCode={true} translatedProp={intl.nestedProp()}>
      <Localized id="nested-children" />
    </MyComponent>
  }} />
}

It would be a lot nicer to define translated props directly in the translations, without creating separate translation keys.

Example:

translations = {
  "foo": "Translation with react <elem translatedProp="translated property">and translated nested children!</elem>"
}
function render() {
  return <Localized id="foo"><MyComponent key="elem" propViaCode={true} /></Localized>
}

Open Questions:

• how should the matching happen? using the nodeName matching a react key?
• what should happen to elements defined in the translations but not in react children? For example for things like <em> or <strong>
• what should happen to elements defined in the react children but not in the translations? Translations are free to use and re-order any of the elements defined in react. Should they also be able to not use an element?
• how can we make this lightweight without basically re-implementing the whole virtual dom?
• at some point, we would like to separate generating react-specific code and non-react code, how will this interact?
• I would have to implement all the html element parsing and make sure the markup is valid, which will be a huge pain…

References:

Fluent DOM Overlays

[Swatinem]

I created https://github.com/Swatinem/rendez to merge arbitrary react subtrees. Next steps would be to correctly parse html tags inside of translation strings and transform them to react elements to pass over to rendez.