Hyperapp: Support for i18n

[kenota]

I've been looking at hyperapp for my project and I really like this library, although I am only getting used to pure functional approach.

I think the doc is missing important point of what would be 'the framework' way to add support for internationalisation?

[okwolf]

@kenota I've dealt with supporting internationalization (i18n) in large apps before, and there's not really "one right way" to do it.

Part of the problem is localizing your dates and numbers per national conventions. For this we have the Intl API (And polyfills thereof).

Another part of i18n is translating user-visible text into different languages. This one comes with lots of options depending on your use case and design constraints. If you are going to have multiple deployments for supporting different locales then you could pull in the correct content during your build/bundle step, assuming you have one. If, however, you have requirement to support dynamically changing the language at runtime then the next question is where does your content live? Are you requesting each new language from some API/CDN or does your bundle have all the languages already baked into it? For some folks it makes sense to keep their language strings static, but in other cases they need to be more dynamic.

Once you have answered the previous questions, we get to what I think is the heart of your original question: how do we render different language strings in our UI? If we want to support using components to do this (a la React Intl) then the next problem to solve is the need to pass the available language strings around as props to each component that needs them for rendering localized output (React Intl uses context for this purpose, see here for a discussion about how you might pre-wire components in Hyperapp, and some of the drawbacks).

Another approach might be deciding to write a (or use an existing) text wrapper function that will handle this formatting for you as an external dependency to your components. FormatJS has some building blocks that would help with just such a thing. And if you want to minimize the boilerplate there could be work added to your build step to automate any of the tedious parts of this.

[kenota]

@okwolf thank you for your reply. Very good decomposition of my question 👍

You are totally right, I was thinking about problem: how to render different language strings in the UI in hyperapp way. Since my app is very simple, I was thinking about having a global key-value map which is populated once on app load based on user locale, something like:

function Greeting (state, actions) => {
    return (<div> {GlobalLang['WELCOME_MSG']}, {state.username}!</div>);
}

to avoid passing it in state.

Thank you for FormatJS link, looks interesting. I think I might settle on global object + FormatJS because I am not planning to allow change of language once application is rendered. The only thing which bothers me, that it no more 'purely functional' since it is relying on something else to render, apart from state and actions.

Would be really great to have options you listed having in the doc for other developers getting their head around hypeapp.

[Swizz]

Since the i18n needs are most likely to be felt in the view, you can easily use components to create your own easy to use translation logic.

This is a kinda stupid example, but I think you will understand what I am trying to do here.

const Translate = ({data, locale}, [message]) => {
  const msg = new IntlMessageFormat(message, locale)
  return (<span>{msg.format(data)}</span>)
}

And you will use it that way.

const INTL = {
  'en-US': {
    messages: {
      photos: `{name} took {numPhotos, plural,
          =0 {no photos}
          =1 {one photo}
          other {# photos}
        } on {takenDate, date, long}.`
    }
  }
}


app({
  state: {
    photos: {
      name: 'Annie',
      numPhotos: 1000,
      takenDate: Date.now()
    }
  },
  view(state) {
    return (
      <main>
        <Translate locale="en-US" data={state.photos}>
          {INTL['en-US'].messages.photos}
        </Translate>
      </main>
    )
  }
})

[kenota]

@Swizz thank you for the example, this is very useful.

[Swizz]

Does this close your issue ?

[kenota]

Yep! Thank you.

[jorgebucaran]

Hey guys, @Swizz @kenota!

What was the lesson learned here? Sorry, I didn't have much time to address this issue, but would love to know what were your conclusions.

👋

[devhero]

Is it worth to use, even plan to integrate, the i18next library? It supports a lot of 'big' frameworks from react to vue.

[willin]

@jorgebucaran i have write a i18n plugin, pls help me to transfer to hyperapp org and publish to npm. thx.

Transfer ownership:

 You don’t have the permission to create repositories on hyperapp 

https://github.com/willin/i18n

[jorgebucaran]

Thank you, @willin. Before we can do that, there are a few things we need to work on. For starters, you can use this template to document the project.

You'll also need tests, coverage, and examples. I'd also like to discuss the API with you and other members, so would you be able to join our Slack? 👋

• http://hyperappjs.herokuapp.com/

[willin]

@jorgebucaran done