evenchange4/react-intl-cra

🔧 Extract messages of Creact React App from the command line.

⚠️ Deprecated - This repository is no longer maintained

Please use react-intl.macro or react-app-rewired solution.

react-intl-cra

Extract messages of Creact React App from the command line.

This is just a workaround for create-react-app #1227 and react-intl #869 in unofficial way.

Installation

$ yarn add react-intl-cra --dev

Demo

Standalone example based on Create-React-App: https://github.com/evenchange4/react-intl-po-example

$ react-intl-cra './src/**/*.js' -o messages.json

Output:

// messages.json

[
  {
    "id": "Account.account",
    "description": "Title",
    "defaultMessage": "帳戶",
    "filepath": "./src/containers/Account/messages.js"
  },
  {
    "id": "Account.myTestDevices",
    "defaultMessage": "我的測試裝置",
    "filepath": "./src/containers/Account/messages.js"
  },
  ...
]

API

$ react-intl-cra --help

Usage: react-intl-cra <pattern> [options]

<pattern> Glob pattern to specify files.
          Needs to be surrounded with quotes to prevent shell globbing.
          Guide to globs: https://github.com/isaacs/node-glob

Options:
  -o, --out-file  Output into a single file                             [string]
  -h, --help      Show help                                            [boolean]
  -v, --version   Show version number                                  [boolean]

Examples:
  react-intl-cra 'src/App.js'                   One file.
  react-intl-cra 'src/**/*.js'                  Pattern to specify files
  react-intl-cra 'src/**/*.js' -o message.json  Output into a single file.


For more information go to https://github.com/evenchange4/react-intl-cra

NPM Usage

import extract from 'react-intl-cra';

const result = extract('./src/**/*.js');

Development

Requirements

• node >= 9
• yarn >= 1.3.2

$ yarn install --pure-lockfile
$ yarn start

Test

$ yarn run format
$ yarn run eslint
$ yarn run flow
$ yarn run test:watch

NPM Release

Any git tags.

1. Create a new git tag
2. Update CHANGELOG.md

$ npm version patch
$ npm run changelog

---

CONTRIBUTING

• ⇄ Pull requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull requests must be accompanied by passing automated tests ($ yarn test).

CHANGELOG

LICENSE

MIT: http://michaelhsu.mit-license.org

react-intl-cra's Issues

Action required: Add a Renovate config

Hi,

You will need to add a config to this repository if you want Renovate to continue creating PRs. Renovate will soon begin skipping all repositories that don't have a valid config found, even if you've received PRs before.

To keep functionality exactly the same, you can add an empty JSON config ({}) to your repo in any of the following files: renovate.json, .github/renovate.json, .renovaterc, .renovaterc.json

React.Fragment Short Syntax fails to extract, SyntaxError unexpected token

• version: [email protected]
• node version: v8.11.4
• npm (or yarn) version: yarn 1.6.0

Do you want to request a feature or report a bug?:
Bug

What is the current behavior?:

Fragment short syntax breaks the parser.

yarn run v1.6.0
$ yarn run extract:messages && yarn run extract:pot-c
$ react-intl-cra ./src/**/*.js -o translations/generated-translations.json
C:\src\legacy-invoice-view-app\node_modules\babel-core\lib\transformation\file\index.js:558
      throw err;
      ^

SyntaxError: unknown: Unexpected token (19:5)
  17 | function App({ username, userToken, customerNumber }) {
  18 |   return (
> 19 |     <>
     |      ^
  20 |       <DoWhenAppMounts />
  21 |       <global-header
  22 |         consumer={'legacy-invoice-view'}
    at Parser.pp$5.raise (C:\src\legacy-invoice-view-app\node_modules\babylon\lib\index.js:4454:13)
    at Parser.pp.unexpected (C:\src\legacy-invoice-view-app\node_modules\babylon\lib\index.js:1761:8)
    at Parser.pp$9.jsxParseIdentifier (C:\src\legacy-invoice-view-app\node_modules\babylon\lib\index.js:7029:10)
    at Parser.pp$9.jsxParseNamespacedName (C:\src\legacy-invoice-view-app\node_modules\babylon\lib\index.js:7040:19)
    at Parser.pp$9.jsxParseElementName (C:\src\legacy-invoice-view-app\node_modules\babylon\lib\index.js:7055:19)
    at Parser.pp$9.jsxParseOpeningElementAt (C:\src\legacy-invoice-view-app\node_modules\babylon\lib\index.js:7145:20)
    at Parser.pp$9.jsxParseElementAt (C:\src\legacy-invoice-view-app\node_modules\babylon\lib\index.js:7169:29)
    at Parser.pp$9.jsxParseElement (C:\src\legacy-invoice-view-app\node_modules\babylon\lib\index.js:7224:15)
    at Parser.parseExprAtom (C:\src\legacy-invoice-view-app\node_modules\babylon\lib\index.js:7236:21)
    at Parser.pp$3.parseExprSubscripts (C:\src\legacy-invoice-view-app\node_modules\babylon\lib\index.js:3494:19)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

What is the expected behavior?:
Extract messages works even if the solution uses the shorthand syntax for React Fragments.

Suggested solution:
Update dependencies? No idea. Babylon package says it's now at "babel/babel as @babel/parser" -- don't know if that one works with the shorter syntax though.

Can't use with babel-plugin-transform-function-bind

I'm using babel-plugin-transform-function-bind and when I run command to extract messages I'm getting SyntaxError: unknown: Unexpected token about ::

react-intl-cra used to work before I added transform-function-bind. Is there any way I could get it back to functioning?

Thanks.

Don‘t use strict versions of dependencies

Looks like you have all your dependencies set as strict versions.

This makes it very difficult for package managers to deduplicate them with those installed for other reasons.

I suggest you to use the recommended caret-range.

Babylon throws error on decorator

react-intl-cra './src/**/*.js' -o messages.json
/home/ppozniak/.config/yarn/global/node_modules/babel-core/lib/transformation/file/index.js:590
      throw err;
      ^

SyntaxError: unknown: Unexpected token (8:0)
   6 | import { Text, LogoWrapper } from '@common';
   7 |
>  8 | @connect(state => ({

Additionally I am unable to run react-intl-cra locally. I had to install it globally or use node ./node_modules/react-intl-cra/bin