https://github.com/etienne-dldc/intl-template-literals-concept

Just an idea about how we could write intl components. Inspired by styled-components.
https://github.com/etienne-dldc/intl-template-literals-concept

concept i18n intl template-literals

Last synced: 19 days ago
JSON representation

Just an idea about how we could write intl components. Inspired by styled-components.

• Host: GitHub
• URL: https://github.com/etienne-dldc/intl-template-literals-concept
• Owner: etienne-dldc
• License: mit
• Created: 2016-11-20T16:27:33.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-11-20T17:20:26.000Z (about 8 years ago)
• Last Synced: 2024-10-29T01:05:24.831Z (2 months ago)
• Topics: concept, i18n, intl, template-literals
• Homepage:
• Size: 35.2 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Intl Template Literals (concept)

Just an idea about how we could write intl components. Inspired by [styled-components](https://github.com/styled-components/styled-components)

## The problem with current Intl component

Currently Intl components often look like this:

```js



  {name}, unreadCount}}

  />



```

with somewhere else in your code the message:

```js

const messages = {

  'welcome': `Hello {name}, you have {unreadCount, number} {unreadCount, plural,

    one {message}

    other {messages}

  }`

};

```

The main problem here is that when you read your code, you don't really know what `id="welcome"` will render. If you want to know what it says, you have to find the message associated with it, which is quite annoying.


## Solution (maybe) : Template Literals



What if we could do this:

```js



  formated.message`hello ${ {name} } you have ${ unreadCount } messages`;



```

And then you would declare your messages the following way:

```js

const messages = {

  'hello [name] you have [unreadCount] messages': `Hello {name}, you have {unreadCount, number} {unreadCount, plural,

    one {message}

    other {messages}

  }`

};

```


## How does it work ?

Well, for now it's just a concept so it does not "work" but I know how it could (possibly) work.  

First, your messages would have to be transformed to extract the values names and replace the message's id :

`hello [name] you have [unreadCount] messages` would become `hello [___] you have [___] messages` and an array to keep values names `['name', 'unreadCount']`.  

Then the `formated.message` template would look like this:

```js

formated.message = (strings, ...interpolations) => {

  const id = strings.join('[___]');

  const values = {};

  const valueNames = getValuesNamesForId(id); // get ['name', 'unreadCount']

  interpolations.forEach((value, index) => {

    values[valueNames[index]] = value;

  });

  return (

    

  );

};

```

## Is it a good idea ?

Hum... I don't know `¯\_(ツ)_/¯`.