res-react-intl

Reason/OCaml PPX generating ReactIntl `id` from `defaultMessage`

Usage no npm install needed!

<script type="module">
  import resReactIntl from 'https://cdn.skypack.dev/res-react-intl';
</script>

README

res-react-intl

Actions Status NPM Version

Reason/OCaml PPX generating ReactIntl id (short MD5) from defaultMessage.

Example

Input:

// Demo.re
open ReactIntl;

module Msg = {
  [@intl.messages];
  let hello = {defaultMessage: "Hello"};
};

[@react.component]
let make = () => {
  <FormattedMessage defaultMessage="Some default message" />;
};

Output:

// Demo.bs.js
// Generated by BUCKLESCRIPT, PLEASE EDIT WITH CARE
'use strict'

var React = require('react')
var ReactIntl = require('react-intl')

var Msg = {
  hello: {
    id: '_8b1a9953',
    defaultMessage: 'Hello',
  },
}

function Demo(Props) {
  return React.createElement(ReactIntl.FormattedMessage, {
    id: '_0beb880a',
    defaultMessage: 'Some default message',
  })
}

var make = Demo

exports.Msg = Msg
exports.make = make

Installation

With yarn or npm on Bucklescript projects

Install the PPX with yarn or npm

yarn add res-react-intl bs-react-intl
# Or
npm install res-react-intl bs-react-intl

And add the PPX in your bsconfig.json file:

{
  "bs-dependencies": ["bs-react-intl"],
  "ppx-flags": ["res-react-intl/ppx"]
}

Extract the messages:

res-react-intl-extract --allow-duplicates src

Developing

After cloning the repository, you should run both esy and yarn to install dependencies. res-react-intl uses esy for managing the important dependencies, and yarn is used solely for pre-commit linting/formatting of Reason files.

Relevant commands

  • esy build -> Builds the project
  • esy watch -> Watches for changes to Reason/OCaml files in the entire project, including in the /test directory
  • esy test_native -> Runs the native tests (in test/native)
  • esy test_bs -> Runs the BuckleScript tests (in test/bucklescript)

Releasing

  1. Bump the version of the ppx in esy.json on master (we use semantic versioning)
  2. Create and push a new tag
$ git checkout master
$ git tag vx.y.z
$ git push origin vx.y.z
  1. Create detailed release notes for the new version, following the Added/Changed/Fixed/Removed format. Note that the new version of the PPX will automatically be pushed to NPM and a release will be created on GitHub.

Background/Sources