babel-plugin-react-intl-auto-ext
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.1 • Public • Published

    babel-plugin-react-intl-auto

    Build Status Build status Coverage Status styled with prettier tested with jest All Contributors

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

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

    Many projects, like react-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 generate a prefixed id.

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

    Goodbye, global ID!!

    Before

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

    After

    With babel-plugin-react-intl-auto.

    import { defineMessages, FormattedMessage } from 'react-intl'
     
    export default defineMessages({
      hello: 'hello {name}',
      welcome: 'Welcome!',
    })
     
    const MyComponent = () => <FormattedMessage defaultMessage="goodbye {name}" />

    See examples.

    With extract-react-intl-messages

    Example usage with extract-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
    

    yarn

    $ yarn add --dev babel-plugin-react-intl-auto
    

    Usage

    .babelrc

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

    Options

    removePrefix

    remove prefix.

    Type: string | boolean
    Default: ''

    if removePrefix is true, no file path prefix is included in the id.

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

    when removePrefix is "src"

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

    when removePrefix is true

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

    filebase

    Type: boolean
    Default: false

    if filebase is true, generate id with filename.

    moduleSourceName

    Type: string
    Default: react-intl

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

    includeExportName

    Type: boolean | 'all'
    Default: false

    if includeExportName is true, adds named exports as part of the id.

    Only works with defineMessages.

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

    If includeExportName is 'all', it will also add default to the id on default exports.

    extractComments

    Use leading comments as the message description.

    Only works with defineMessages

    Type: boolean
    Default: true

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

    Support variable

    Example
    const messages = { hello: 'hello world' }
     
    export default defineMessages(messages)
     
          ↓ ↓ ↓ ↓ ↓ ↓
     
    const messages = {
      hello: {
        id: 'path.to.file.hello',
        defaultMessage: 'hello wolrd'
      }
    };
     
    export default defineMessages(messages);

    Related

    babel-plugin-react-intl-id-hash

    If you want short consistent hash values for the ID, you can use react-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

    💻

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

    License

    MIT © akameco

    Install

    npm i babel-plugin-react-intl-auto-ext

    DownloadsWeekly Downloads

    4

    Version

    1.5.1

    License

    MIT

    Unpacked Size

    24.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • filson14