Coder Social home page Coder Social logo

extract-react-intl's Introduction

This repo was migrated to the extract-react-intl-messages

extract-react-intl

Build Status tested with jest styled with prettier All Contributors

This package allows you to extract all messages from a glob. It will return an object with a key for each locale you pass, which in turn contains an object with the ids of each message defined by the defineMessages function of react-intl. The value of each of these keys will be an empty string, except for your defaultLocale which will be populated with the defaultMessage.

Install

$ yarn add --dev extract-react-intl

Usage

const extractReactIntl = require('extract-react-intl')

const pattern = 'app/**/*.js'
const locales = ['en', 'ja']

extractReactIntl(locales, pattern).then(result => {
  console.log(result)
  /*
{
  en:
   { 'components/App/hello': 'hello',
     'components/App/welcome': 'welcome to extract-react-intl' }
  ja:
   { 'components/App/hello': '',
     'components/App/world': '' }
}
  */
})

API

extractReactIntl(locales, pattern, [options])

Return a Promise wrapped extracted messages.

locales

Type: Array<string>

Example: ['en', 'ja']

pattern

Type: string

File path with glob.

options

Additional options.

defaultLocale

Type: string
Default: en

Set default locale for your app.

moduleSourceName

Type: string
Example: ./path/to/module
Default: react-intl

The ES6 module source name of the React Intl package. Defines from where defineMessages, <FormattedMessage /> and <FormattedHTMLMessage /> are imported.

cwd

Type: string
Default: .

You most likely don't need this.

Change run path.

Contributors

Thanks goes to these wonderful people (emoji key):

akameco
akameco

๐Ÿ’ป ๐Ÿ“– โš ๏ธ ๐Ÿš‡
nodaguti
nodaguti

๐Ÿ’ป โš ๏ธ
fix-fix
fix-fix

๐Ÿ’ป
enrique-ramirez
enrique-ramirez

๐Ÿ“–
bradbarrow
bradbarrow

๐Ÿ› ๐Ÿ’ป โš ๏ธ
Filip Filson Pasternak
Filip "Filson" Pasternak

๐Ÿ’ป

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT ยฉ akameco

extract-react-intl's People

Contributors

akameco avatar bradbarrow avatar enrique-ramirez avatar fix-fix avatar greenkeeper[bot] avatar nodaguti avatar remcohaszing avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

extract-react-intl's Issues

Enable passing babel-plugin-react-intl options.

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

What is the expected behavior?:
I have a case where I've wrapped react-intl with my own module with some custom functions and components to manage internationalization. I don't want the need to import some elements from it and some from react-intl. I prefer to use just one source. I've mentioned it in this issue.

babel-plugin-react-intl accepts few options to manipulate extracting process. With extract-react-intl context, most of them are not so helpful (especially if we assume using it with by extract-react-intl-messages), but one is. I mean moduleSourceName which lets plugin to know from where defineMessages or <FormattedMessage /> is imported. Of course, default is react-intl but in some cases one may want to use custom module.

Suggested solution:
It would be great to be able to pass custom module name to extract-react-intl which can forward it to babel-plugin-react-intl (I've tested it locally, simply by explicitly adding options to unshifted preset in the source code and it works).

Same thing would fit extract-react-intl-messages.

@akameco, I can try to manage some changes if you want (but never done that on someones github repo ๐Ÿ˜‰ ).

babel-plugin-react-intl execution order can cause unexpected errors

  • version: 0.5.1
  • node version: 8.9.3
  • npm (or yarn) version: yarn 1.3.2

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

Suggest a feature

What is the current behavior?:

Since extract-react-intl pushes babel-plugin-react-intl into the plugins list, it will be executed ahead of any user configured babel presets.

So if I have a preset:

// my-preset.js
{
  "presets": ["env", "stage-3"],
  "plugins": ["react-intl-auto"]
}

and I use that in my projects .babelrc:

//.babelrc
{
  presets: ["my-preset"]
}

then because of this line:

plugins.push(require('babel-plugin-react-intl').default)

The following are the options passed to transformFile inside extract-react-intl:

{
  presets: ['/some/path/to/my-preset.js'],
  plugins: ['/some/path/to/babel-plugin-react-intl/index.js'],
}

Babel prioritizes plugins in the top level config BEFORE plugins in any presets.

The result in my case above is that babel-plugin-react-intl is called BEFORE babel-plugin-react-intl-auto which is problematic.

If I had the following .babelrc file it will work because the plugins aren't in a preset:

//.babelrc
{
  presets: ["my-preset"],
  plugins: ["react-intl-auto"],
}

What is the expected desired behavior?:

I'd love to find a way for all the user's babel config/presets/plugins to be run before babel-plugin-react-intl so that I don't have to worry about the order of my own babel config to make this tool work.

Suggested solution:

If you were to unshift babel-plugin-react-intl into the presets instead of plugins, it'd make it lower in the execution order for babel:

- plugins.push(require('babel-plugin-react-intl').default)
+ presets.unshift({ plugins: [require('babel-plugin-react-intl').default] })

PeerDep warning + duplicate plugin errors

  • version: extract-react-intl-0.6.0.tgz#1696c2ce05513d936272af4b6663700df8414b55
  • node version: 8.11
  • npm (or yarn) version: yarn

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

What is the current behavior?:

$ extract-messages -l=source -o server/lang -d source --flat 'src/**/!(*.test).js'
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]
    at assertNoDuplicates (/Users/stevenlangbroek/Code/ec_portal/node_modules/@babel/core/lib/config/config-descriptors.js:205:13)
    at createDescriptors (/Users/stevenlangbroek/Code/ec_portal/node_modules/@babel/core/lib/config/config-descriptors.js:114:3)
    at createPluginDescriptors (/Users/stevenlangbroek/Code/ec_portal/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
    at alias (/Users/stevenlangbroek/Code/ec_portal/node_modules/@babel/core/lib/config/config-descriptors.js:63:49)
    at cachedFunction (/Users/stevenlangbroek/Code/ec_portal/node_modules/@babel/core/lib/config/caching.js:33:19)
    at plugins.plugins (/Users/stevenlangbroek/Code/ec_portal/node_modules/@babel/core/lib/config/config-descriptors.js:28:77)
    at mergeChainOpts (/Users/stevenlangbroek/Code/ec_portal/node_modules/@babel/core/lib/config/config-chain.js:319:26)
    at /Users/stevenlangbroek/Code/ec_portal/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at buildRootChain (/Users/stevenlangbroek/Code/ec_portal/node_modules/@babel/core/lib/config/config-chain.js:68:29)
    at loadPrivatePartialConfig (/Users/stevenlangbroek/Code/ec_portal/node_modules/@babel/core/lib/config/partial.js:85:55)
error Command failed with exit code 1.

What is the expected behavior?:
We're running babel 7 in our project, so I followed the instruction re: babel-core@bridge. Unfortunately the error still persists. I added some logging, and name in the assertNoDuplicated function is empty (these are added to a map to verify lack of duplication).

Suggested solution:
I'm not sure why it's still using "@babel/core" instead of babel-core, despite babel-core@bridge being installed. Any thoughts>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.