Skip to content

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

License

Notifications You must be signed in to change notification settings

BANG88/typescript-react-intl

Repository files navigation

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.

Build Status

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`,
  );
});

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published