Js-lingui: Create example on other repos

[sedubois]

To gain visibility I think it would be super useful to demonstrate the integration of js-lingui in other popular frameworks/libs, such as https://github.com/gatsbyjs/gatsby and https://github.com/zeit/next.js.

That's easy to say for me because unfortunately I have no time to contribute pull requests! But this looks like an inspiring project and I think it might deserve to be more visible, especially now that v2 is out.

[tricoder42]

I can't agree more. I'm a bit overwhelmed by work atm, but hopefully at the end of February I could focus on this.

[morloy]

We're migrating our website to jslingui now, but it's still a work-in-progress.

After a few hours of work I finally figured out how to integrate it with Gatsby.
If you follow the official documentation, some extra steps are necessary (instructions might be incomplete):

1. Upgrade Gatsby to React v16
2. Manually install react-dom v16:

npm i --save react-dom

1. Create a custom .babelrc with the following content:

{
  "plugins": [
    "@lingui/babel-plugin-transform-js",
    "@lingui/babel-plugin-transform-react",
  ],
  "env": {
    "extract": {
      "presets": [
        "@babel/preset-react",
        "@babel/preset-flow",
      ],
      "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-proposal-class-properties",
      ]
    },
  }
}

1. Extracting languages requires a different version of Babel, thus run it with:

BABEL_ENV=extract lingui extract

Hot reloading

You can directly use the messages.json in Gatsby:

import en from '../locale/en/messages.json';

export default () => (
  <I18nProvider language="en" catalogs={{ en: { messages: en } }}>
    <App />
  </I18nProvider>
);

[tricoder42]

@morloy This is great stuff, thank you for sharing! I've never worked with Gatsby, but as a static site tool it always operates in development mode?

[morloy]

No, but when you build the site, I think everything gets bundled and minified with webpack. So no need to actually "compile" the messages.json. However, I haven't tested with complex features like plurals, etc.

[tricoder42]

The problem might be when you use variables or plurals inside translations. Then you'll probably have to use either compiled message catalog or @lingui/loader webpack loader which compiles catalogs on the fly.

[morloy]

We've now finished with finished the redesign of your company website using GatsbyJS and js-lingui.
Have a look at the result at Ledgy.com and of course the source to learn how to run the two together.

[tricoder42]

This is really great! I'm gonna create showcase page in docs soon. Thank you for your effort! 👍

[pcraig3]

Hey there @tricoder42, thanks for all your effort thus far! Lingui looks like a super interesting project. Specifically, we've found the locale files very easy to work with and we would love to use it more broadly. We've been experimenting with it at work and had some good results in the past, but then some not-so-good results more recently.

• We tried integrating it with Next.js recently, but couldn't figure out how to get it going.
• I also tried hooking it into a new create-react-app project, using the next branch (which uses babel 7) and following along with your tutorial, but in the end I couldn't get the translations to show up. (I can upload the code if that would be useful to you.)

Is there a sense of when more up-to-date instructions for integration with some JS frameworks might exist, or any other pointers you could pass along?

Again, this isn't urgent and it's cool what you've done so far, but if you have any more info it would be great to hear 😄.

[dcroitoru]

I created a Gatsby starter that makes use of js-lingui:
https://github.com/dcroitoru/gatsby-starter-i18n-lingui.git

[langpavel]

Can this be closed? I know, this can be never-ending story, but it's not issue at all. More examples are welcomed and I'm thinking about migrate react-intl branch of react-starter-kit

[tricoder42]

You're right, the scope of this issue is too broad. Let's focus on:

• [ ] Integration with GatsbyJS (guide, link to starter)
• [ ] Integration with Create React App (this was also requested at medium.com at it basically needs to document how to use lingui without babel plugins)

... and then close this issue.

What do you mean by migrate react-intl branch of react-starter-kit? Do you want to write migration guide from react-intl? Does react-starter-kit uses react-intl in a specific way?

[langpavel]

Hi @tricoder42, react-starter-kit have it's own message extraction script, I believe this can be omitted if I migrate to lingui

[tricoder42]

Closing this one in favor of #278, CRA example will be added as part of 3.0 release

[dreadwail]

For those who come across this thread seeking a working example with Next.js, you can find it here now:

https://github.com/zeit/next.js/tree/canary/examples/with-lingui