mayu-live / framework

Mayu is a live updating server-side component-based VDOM rendering framework written in Ruby
https://mayu.live
GNU Affero General Public License v3.0
130 stars 4 forks source link

I18n support #43

Open aalin opened 1 year ago

aalin commented 1 year ago

This is a start...

I would like to make the API nicer, for example, components should not have to do:

:ruby
  translations("sv-SE", "en-US")
%p= t(:title)

The following should be enough:

%p= t(:title)

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...

title = "Welcome to my <Strong>website</Strong>!"
:ruby
  Strong = import("/app/components/Base/Strong")
%h1= t(:title, Strong:)

But what should happen if this happens?

:ruby
  Strong = import("/app/components/Base/Strong")
%h1{title: t(:title, Strong:)} Hello

Now we would expect to maybe get

<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.


https://github.com/twitter/twitter-cldr-rb looks useful, although I don't like how it overrides core classes


What about this API?

%div
  %p= T[:welcome, name: props[:name]]
%a(href="https://reactjs.org")
  = T[:content]

React/FormatJS version:

<a href="https://reactjs.org">
  <FormattedMessage id="app.content" defaultMessage="Learn React" />
</a>

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.