# react-intl-extract-webpack-plugin

> Webpack plugin to extract react-intl translations with suppport for on demand chunk loading per active locale during dynamic imports. Also supports HMR and SSR.

Latest version **1.1.3** (published 2018-12-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-intl-extract-webpack-plugin
pnpm add react-intl-extract-webpack-plugin
yarn add react-intl-extract-webpack-plugin
bun add react-intl-extract-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2018-12-18 |
| First published | 2018-12-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 251.7 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Author | Peter Pristas |
| Maintainers | pristas-peter |

## Links

- npm: https://www.npmjs.com/package/react-intl-extract-webpack-plugin
- npm.io page: https://npm.io/package/react-intl-extract-webpack-plugin

## Dependencies (3)

- [loader-utils](https://npm.io/package/loader-utils.md) 1.1.0
- [webpack-sources](https://npm.io/package/webpack-sources.md) ^1.3.0
- [intl-messageformat-parser](https://npm.io/package/intl-messageformat-parser.md) 1.4.0

## Recent versions

- 1.1.3 (latest) — 2018-12-18
- 1.1.2 — 2018-12-17

## README

# react-intl-extract-webpack-plugin

Webpack plugin to extract react-intl translations with suppport for on demand chunk loading per active locale during dynamic imports. Also supports HMR and SSR.

Usage:

* get familiar with react-intl ecosystem

* add to babel-loader's options:
    ```
    options: {
        ...
        plugins: [
            ...
            'react-intl-extract-webpack-plugin/babel',
            ...
        ]
        metadataSubscribers: [ReactIntlExtractWebpackPlugin.BABEL_LOADER_METADATA_SUBSCRIBER],
        ...
    },
    ```

* add plugin to webpack's config:

    ```
    const ReactIntlExtractWebpackPlugin = require('react-intl-extract-webpack-plugin');

        plugins: [
            ...
            new ReactIntlExtractWebpackPlugin(),
            ...
        ]
    ```

* create translations.js file in root of your project's folder (cwd for webpack)
  ```
  // type Descriptor = {
  //    id: string,
  //    defaultMessage?: string,
  //    description?: string,
  // }

  // type Translations = {
  //    [locale: string]: {
  //        [id: string]: string,
  //    },
  // } 

  module.exports = (descriptors: Iterator<Descriptor>) => {
      /// your code to resolve descriptor translations
      /// you can even query/update your SQL database or read json file
      return Promise(translations) as Promise<Translations>;
  }
  ```

* add this code in userland before ReactDOM.render:
  ```
    import React from 'react';
    import ReactDOM from 'react-dom';
    import {IntlProvider, addLocaleData} from 'react-intl';
    import initialize from 'react-intl-extract-webpack-plugin/browser';

    import App from './App';

    const chunkLoader = initialize();
    const locale = 'sk'; // <- you can resolve this dynamically

    Promise.all([ 
        // tip: use webpackImport magic comment to bundle only languages you need
        import(/* webpackChunkName: "[request]" */ `react-intl/locale-data/${locale}`),
        chunkLoader.setLocale(locale),
    ])
        .then(([locale]) => {
            addLocaleData(locale.default);
            ReactDOM.render(<IntlProvider messages={chunkLoader.messages} locale={chunkLoader.locale}><App /></IntlProvider>, document.getElementById('root'));
        })

  ```

Note: This plugin uses it's own babel plugin which is a fork of react-intl-babel-plugin. It does not enforce defaultMessage field to save bundle size when you want to dynamically switch between locales at the start of the app.

Note: react-intl's addLocaleData is not managed by chunk loader intentionally.

<br />

When new chunk is requested with import(...), chunkLoader loads all missing translations for current active locale using patched webpack's internals 

<br />

It is possible to dynamically change locale after bootstrap, chunkLoader stores already loaded webpack chunks and loads them all for newly set locale:
```
    Promise.all([
        import(/* webpackChunkName: "[request]" */ `react-intl/locale-data/${locale}`),
        chunkLoader.setLocale(locale),
    ]).then(() => {
        this.setState({
            locale: chunkLoader.locale,
            messages: chunkLoader.messages,
        }); // <- use this state as <IntlProvider> props, you will need to also use key={locale} hack to re-render everything until react-intl start's to use new React Context API
    })
```

<br />

For SSR you can use **react-intl-messages.[suffix].json** with all translations, manifest file **react-intl-manifest.[suffix].json** and **react-intl-chunkgroup-messages.[suffix].json** which are generated during build.

<br />

Webpack plugin also accepts options (defaults are):
```
{
    development: process.env.NODE_ENV === 'development',
    outputPath: 'static/intl/',
    suffix: '',
}
```

---
_Source: https://npm.io/package/react-intl-extract-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._