akameco/babel-plugin-react-intl-autoPublic

NotificationsYou must be signed in to change notification settings
Fork34
Star210

i18n for the component age. Auto management react-intl ID.

License

MIT license

210 stars 34 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 428 Commits
.github		.github
examples/with-typescript		examples/with-typescript
src		src
.all-contributorsrc		.all-contributorsrc
.babelrc		.babelrc
.coveralls.yml		.coveralls.yml
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc		.eslintrc
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
jest.config.js		jest.config.js
license		license
package.json		package.json
readme.md		readme.md
tsconfig.json		tsconfig.json
types.d.ts		types.d.ts
yarn.lock		yarn.lock

Repository files navigation

babel-plugin-react-intl-auto

⚠️DEPRECATED - This plugin is deprecated. React Intl has evolved intoFormatJS which now includes automatic ID generation out of the box. For new projects, we recommend using FormatJS directly.

i18n for the component age. Auto management react-intl ID.

React Intl is awesome. But, Global ID management is difficult and confusing.

Many projects, likereact-boilerplate, give the ID to the name of the component as a prefix.But it is redundant and troublesome.

This babel-plugin releases you from cumbersome ID management.Based on the file path, this automatically generates a prefixed id.

Also, we strongly encourage you to useextract-react-intl-messages.You can generate json automatically.

Goodbye, global ID!!

Before

import{defineMessages,FormattedMessage}from'react-intl'exportdefaultdefineMessages({hello:{id:'App.Components.Greeting.hello',defaultMessage:'hello {name}',},welcome:{id:'App.Components.Greeting.welcome',defaultMessage:'Welcome!',},})constMyComponent=()=>(<FormattedMessageid="App.Components.Greeting.goodbye"defaultMessage="goodbye {name}"/>)

After

With babel-plugin-react-intl-auto.

import{defineMessages,FormattedMessage}from'react-intl'exportdefaultdefineMessages({hello:'hello {name}',welcome:'Welcome!',})constMyComponent=()=><FormattedMessagedefaultMessage="goodbye {name}"/>

Seeexamples.

With`extract-react-intl-messages`

Example usage withextract-react-intl-messages.

$ extract-messages -l=en -o translations 'src/**/*.js'

en.json

{"components.App.hello":"hello {name}","components.App.welcome":"Welcome","components.App.189751785":"goodbye {name}"// unique hash of defaultMessage}

Install

npm

$ npm install --save-dev babel-plugin-react-intl-auto# Optional: TypeScript support$ npm install --save-dev @babel/plugin-transform-typescript

yarn

$ yarn add --dev babel-plugin-react-intl-auto# Optional: TypeScript support$ yarn add --dev @babel/plugin-transform-typescript

Usage

.babelrc

{"plugins": [    ["react-intl-auto",      {"removePrefix":"app/","filebase":false      }    ]  ]}

with injectIntl

Input:

import{injectIntl}from'react-intl'constMyComponent=({ intl})=>{constlabel=intl.formatMessage({defaultMessage:'Submit button'})return<buttonaria-label={label}>{label}</button>}injectIntl(MyComponent)

↓ 　 ↓ 　 ↓

Output:

import{injectIntl}from'react-intl'constMyComponent=({ intl})=>{constlabel=intl.formatMessage({id:'App.Components.Button.label',defaultMessage:'Submit button',})return<buttonaria-label={label}>{label}</button>}injectIntl(MyComponent)

with useIntl

Input:

import{useIntl}from'react-intl'constMyComponent=()=>{constintl=useIntl()constlabel=intl.formatMessage({defaultMessage:'Submit button'})return<buttonaria-label={label}>{label}</button>}

↓ 　 ↓ 　 ↓

Output:

import{useIntl}from'react-intl'constMyComponent=()=>{constintl=useIntl()constlabel=intl.formatMessage({id:'App.Components.Button.label',defaultMessage:'Submit button',})return<buttonaria-label={label}>{label}</button>}

Options

removePrefix

remove prefix.

Type:string | boolean |regexp
Default:''

ifremovePrefix istrue, no file path prefix is included in the id.

Example (src/components/App/messages.js)

whenremovePrefix is"src"

import{defineMessages}from'react-intl';exportdefaultdefineMessages({hello:'hello world'});↓↓↓↓↓↓import{defineMessages}from'react-intl';exportdefaultdefineMessages({hello:{    id:'components.App.hello',defaultMessage:'hello world'}});

whenremovePrefix is"src.components"

import{defineMessages}from'react-intl';exportdefaultdefineMessages({hello:'hello world'});↓↓↓↓↓↓import{defineMessages}from'react-intl';exportdefaultdefineMessages({hello:{    id:'App.hello',defaultMessage:'hello world'}});

whenremovePrefix istrue

import{defineMessages}from'react-intl';exportdefaultdefineMessages({hello:'hello world'});↓↓↓↓↓↓import{defineMessages}from'react-intl';exportdefaultdefineMessages({hello:{id:'hello',defaultMessage:'hello world'}});

filebase

Type:boolean
Default:false

iffilebase istrue, generate id with filename.

moduleSourceName

Type:string
Default:react-intl

if set, enables to use custom module as a source fordefineMessages etc.

https://github.com/akameco/babel-plugin-react-intl-auto/issues/74#issuecomment-528562743

includeExportName

Type:boolean | 'all'
Default:false

ifincludeExportName istrue, adds named exports as part of the id.

Only works withdefineMessages.

Example

exportconsttest=defineMessages({hello:'hello {name}',})↓↓↓↓↓↓exportconsttest=defineMessages({hello:{id:'path.to.file.test.hello',defaultMessage:'hello {name}',},})

If includeExportName is'all', it will also adddefault to the id on defaultexports.

extractComments

Use leading comments as the message description.

Only works withdefineMessages

Type:boolean
Default:true

Example

exportconsttest=defineMessages({// Message used to greet the userhello:'hello {name}',})↓↓↓↓↓↓exportconsttest=defineMessages({hello:{id:'path.to.file.test.hello',defaultMessage:'hello {name}',description:'Message used to greet the user',},})

useKey

Only works withintl.formatMessage,FormattedMessage andFormattedHTMLMessage. Instead ofgenerating an ID by hashingdefaultMessage, it will use thekey property ifit exists.

Type:boolean
Default:false

Example

intl.formatMessage({key:'foobar',defaultMessage:'hello'});↓↓↓↓↓↓intl.formatMessage({key:'foobar',defaultMessage:'hello',"id":"path.to.file.foobar"});

<FormattedMessagekey="foobar"defaultMessage="hello"/>↓↓↓↓↓↓<FormattedMessageid="path.to.file.foobar"key="foobar"defaultMessage="hello"/>

separator

Allows you to specify a custom separator

Type:string
Default:.

Example

whenseparator is"_"

exportconsttest=defineMessages({hello:'hello {name}',})↓↓↓↓↓↓exportconsttest=defineMessages({hello:{id:'path_to_file_test_hello',defaultMessage:'hello {name}',},})

relativeTo

Allows you to specify the directory that is used when determining a file's prefix.

This option is useful for monorepo setups.

Type:string
Default:process.cwd()

Example

Folder structure with two sibling packages.packageB contains babel config and depends onpackageA.

|- packageA|||  -- componentA||- packageB|||  -- componentB|||  -- .babelrc

SetrelativeTo to parent directory inpackageB babel config

{"plugins":[["react-intl-auto",{"relativeTo":"..",// ...},],]}

Run babel in packageB

cd packageB&& babel

Messages incomponentA are prefixed relative to the project root

exportconsttest=defineMessages({hello:'hello {name}',})↓↓↓↓↓↓exportconsttest=defineMessages({hello:{id:'packageA.componentA.hello',defaultMessage:'hello {name}',},})

Support variable

Example

constmessages={hello:'hello world'}exportdefaultdefineMessages(messages)↓↓↓↓↓↓constmessages={hello:{id:'path.to.file.hello',defaultMessage:'hello wolrd'}};exportdefaultdefineMessages(messages);

TypeScript

TypeScript support is bundled with this package. Be sure to include our typedefinition and run@babel/plugin-transform-typescript beforehand. This way,you can also be empowered byextract-react-intl-messages.

tsconfig.json

{"compilerOptions": {// ..."jsx":"preserve"// ...  },"include": ["node_modules/babel-plugin-react-intl-auto/**/*.d.ts"]}

.babelrc

{"plugins": [["@babel/plugin-transform-typescript"], ["react-intl-auto"]]}

webpack.config.js

Usebabel-loader along withts-loader when using webpack as well.

module.exports={module:{rules:[{test:/\.tsx?$/,exclude:[/node_modules/],use:[{loader:'babel-loader',},{loader:'ts-loader',},],},],},}

babel-plugin-react-intl-id-hash

If you want short consistent hash values for the ID, you can usereact-intl-id-hash in addition to this plugin to help reduce your applications bundle size.

extract-react-intl-messages

Extract react-intl messages.

Contributors

Thanks goes to these wonderful people (emoji key):

_akameco 💻⚠️👀📖	_{Aleksander Heintz} 💻📖	_{Ryan Leckey} 💻	_Adam 💻📖	_{Guylian Cox} 💻📖⚠️	_{Carl Grundberg} 💡📖	_bradbarrow 💻📖⚠️
_{Mauro Gabriel Titimoli} 💻⚠️	_{Stanislav Ermakov} 💻	_Chitoku 💻	_{Kouta Kumagai} 📖💻⚠️	_{Shahyar G} 💻	_{Remco Haszing} 💻	_jmarceli 💻⚠️
_{Dominik Żegleń} 💻⚠️	_{Filip "Filson" Pasternak} 💻	_{Eric Masiello} 💻⚠️	_{Josh Poole} 💻⚠️