bs-react-intl-ppx

Installation

Get the package:

# yarn
yarn add --dev @ahrefs/bs-react-intl-ppx
# or npm
npm install --save-dev @ahrefs/bs-react-intl-ppx

Then add it to bsconfig.json:

"ppx-flags": ["@ahrefs/bs-react-intl-ppx/ppx"],

Overview

This ppx allows you to create ReactIntl.messages records without specifying id, which significantly reduces the amount of boilerplate code and simplifies the translation process.

Examples:

This code

let message: ReactIntl.message = [%intl "i am message"]

will be compiled to the (javascript):

var message = {
  id: "168c9a2987fad481c5882847ac102aaf",
  defaultMessage: "i am message"
};

Ppx also supports descripted messages:

let descriptedMessage: ReactIntl.message = [%intl {msg: "blabla", desc: "i am description"}]

Usage with rescript-react-intl

// Some component
[@react.component]
let make = () => {
  let intl = ReactIntl.useIntl();
  // helper functions
  let l = message => intl->ReactIntl.Intl.formatMessage(message);

  <>
    <h1>[%intl "Some header"]->l->React.string</h1>
    <p>[%intl "Some body"]->l->React.string</p>
  </>
}

You can define your own FormattedMessage component, which accepts ReactIntl.message instead of id and defaultMessage.

/// FormattedMessage.re
[@react.component]
let make = (~item: ReactIntl.message, ~values: Js.t({..})) =>
  <ReactIntl.FormattedMessage id={item.id} defaultMessage={item.defaultMessage} values />;

Draft phrases

If you want to make extactor ignore some phrases, you can use intl_draft / intl_draft.s/ intl_draft.el extensions. It is helpful if you don't want some draft phrases (likely to change soon) to be sent to translators.

Advanced usage

There is an option to generate localized string straight from the ppx (without explicit helper functions usage). This option could be helpful for you if you don't need to change page language without page reloading.

• Ppx supports intl.s annotation:

let message: string = [%intl.s "i am message"] // type string

converts to ⬇️

let message: string = {id: "168c9a2987fad481c5882847ac102aaf", defaultMessage: "i am message"}->ReactIntPpxAdaptor.Message.to_s

• Ppx supports intl.el annotation:

let element: React.element = [%intl.el "i am message"]

converts to ⬇️

let element: React.element = {id: "168c9a2987fad481c5882847ac102aaf", defaultMessage: "i am message"}->ReactIntPpxAdaptor.Message.to_s->React.string

• Ppx supports variables, plural forms and rich text formatting in payload. In this case ppx will return function instead of ReactIntl.message

let element: React.element = [%intl.el "i am message with {variable}"]

converts to ⬇️

let element: React.element =
  (values: {. "variable": React.element}) => {id: "168c9a2987fad481c5kgmcntg5k3dsd5", defaultMessage: "i am message with {variable}"}->ReactIntPpxAdaptor.Message.format_to_s(_, values)->React.string

To use those features you have to define ReactIntlPpxAdaptor in your app (see test folder for details).