BANG88 / typescript-react-intl

Extracts string messages from TypeScript React components or ts files that use React Intl.

typescript-react-intl

Extracts string messages from TypeScript React components or ts files that use React Intl. You can use it in React Native too.

Usage

If you have many files to processes,you can get contents use node-glob with fs module Custom component support since version 0.3.0. checkout tests/index.js

npm i typescript-react-intl -D

var parse = require("typescript-react-intl").default;

// results is an array
// contents is your tsx file
var results = parse(contents);

// or if you want support custom components
var results = parse(contents, {
  tagNames: ["MyComponent", "StyledText"],
});

React-intl

Only support <FormattedMessage/> and defineMessages We don't use <FormattedHtmlMessage/>

Examples

var fs = require("fs");
var glob = require("glob");
var parser = require("typescript-react-intl").default;

function runner(pattern, cb) {
  var results = [];
  pattern = pattern || "src/**/*.@(tsx|ts)";
  glob(pattern, function(err, files) {
    if (err) {
      throw new Error(err);
    }
    files.forEach((f) => {
      var contents = fs.readFileSync(f).toString();
      var res = parser(contents);
      results = results.concat(res);
    });

    cb && cb(results);
  });
}

// demo
runner(null, function(res) {
  var locale = {};

  res.forEach((r) => {
    locale[r.id] = r.defaultMessage;
  });

  var locales = {
    en: locale,
  };

  // save file to disk。you can save as a json file,just change the ext and contents as you want.
  fs.writeFileSync(
    `src/translations/all.ts`,
    `export default ${JSON.stringify(locales, null, 2)}\r`,
  );
});