It would be good if the VDOM tree could find translations for components and send them there somehow, kinda like props, so that components would be re-rendered automatically whenever the user changes language.
The t()-method could return an object, TranslationDescriptor that contains the path and options to the translation, and then when rendering, the VDOM could pick the best translation... This would be good because I would like to have some sort of slots in there...
<h1 title="Welcome to my <strong class='/app/components/UI/Strong.strong?abc123'>website<strong>!">Hello</h1>
<!-- or: -->
<h1 title="Welcome to my <Strong>website<Strong>!">Hello</h1>
<!-- or: -->
<h1 title="Welcome to my website">Hello</h1>
The last thing would be the easiest to implement and maybe lead to less weird issues..
String interpolation would not work though.
Another idea I have is that translated strings could be of a StringWithLang class or something and that VNodes would check the languages of their children or something and set the lang attribute on their DOM-node (if it differs from parent nodes)... Then this would be automatic: https://www.youtube.com/watch?v=Rx7lE8j5MNA
It would be nice to have all different languages in one file. While translating, I found it annoying to have to open a lot of different files. This would also work better with the current resource system... until the new one is done
I'm thinking that for components with common translation strings, like, for example if there is a button saying Cancel in multiple places... instead of duplicating the text Cancel across several different translation files, it would be better to just have a CancelButton component and have the translations in there.
It should be possible to override the preferred language for a subtree.
For example, one might have English content under ´/en/´ and Swedish content under /sv/
A future idea would be to make an app for editing translations, kinda like https://webtranslateit.com/, and it could be deployed easily around the world so that your translators get low latency.
This is a start...
I would like to make the API nicer, for example, components should not have to do:
The following should be enough:
It would be good if the VDOM tree could find translations for components and send them there somehow, kinda like props, so that components would be re-rendered automatically whenever the user changes language.
The
t()
-method could return an object,TranslationDescriptor
that contains the path and options to the translation, and then when rendering, the VDOM could pick the best translation... This would be good because I would like to have some sort of slots in there...But what should happen if this happens?
Now we would expect to maybe get
The last thing would be the easiest to implement and maybe lead to less weird issues..
String interpolation would not work though.
Another idea I have is that translated strings could be of a
StringWithLang
class or something and that VNodes would check the languages of their children or something and set thelang
attribute on their DOM-node (if it differs from parent nodes)... Then this would be automatic: https://www.youtube.com/watch?v=Rx7lE8j5MNAIt would be nice to have all different languages in one file. While translating, I found it annoying to have to open a lot of different files. This would also work better with the current resource system... until the new one is done
I'm thinking that for components with common translation strings, like, for example if there is a button saying
Cancel
in multiple places... instead of duplicating the textCancel
across several different translation files, it would be better to just have aCancelButton
component and have the translations in there.https://github.com/twitter/twitter-cldr-rb looks useful, although I don't like how it overrides core classes
What about this API?
React/FormatJS version:
It should be possible to override the preferred language for a subtree. For example, one might have English content under ´/en/´ and Swedish content under
/sv/
A future idea would be to make an app for editing translations, kinda like https://webtranslateit.com/, and it could be deployed easily around the world so that your translators get low latency.