Why does this create multiple files?

[tuckerconnelly]

Tried this out and it creates a directory structure mirroring the source code structure.

Why not just create a single file? Translators don't care about the source code structure lol.

Also now I have concat every file on the frontend before sending it down to the IntlProvider. A single file would be much better imo.

Edit: What I'm envisioning is, instead of creating an array of objects like this:

[
{ id: 'whatever', defaultMessage: 'message' }
{ id: 'whatever2', defaultMessage: 'another message' }
...
]

babel-plugin-react-intl would automatically generate a flat file for the "en" messages

{ whatever: 'message', whatever2: 'another message' }

So when I'm including messages to pass to I can just import the file generated by babel-plugin-react-intl

import enMessages from './enMessages'
<IntlProvider messages={enMessages} />

[GertjanReynaert]

Your envisioned result has a few flaws:
The exported output would drop the message descriptions, which is the most important to translators.
You also don't need to pass these exported results into your app, because these are extracts of your default messages. Your other language files however can certainly be of your envisioned flat format.

You might wan't to take a look at what react-intl-translations-manager does with these message files. If you still want a single defaultMessages file, you can let the package create one which will keep the filepaths and the descriptions.

[toadzky]

I wrote a quick script that combined all the output into a single javascript object with the id as the key, the defaultMessage as the value, with the description as a comment above each pair. The main reason was to keep the English (default) language file in the same format as all the other languages. It also makes it easy to just copy the file and change the name to a different language, then give it to a translator. @tuckerconnelly Let me know if you would like a copy.

[ericf]

See #2

[iamsaksham]

@toadzky Please share the script that combined all the output into a single javascript object with the id as the key, the defaultMessage as the value, with the description as a comment above each pair. Would love to have a copy of it

[toadzky]

Here's the script and the package.json I used with it. It's in ES7 so it will need to be run via babel-node. It assumes no duplicate keys (duplicates just overwrite IIRC). It was a one-off script for a particular project, so there are hardcoded strings for paths, etc that will need updating, but it should get you most of the way there.

package.json

{
  "name": "i18n",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "fs-extra": "0.26.5",
    "fs-promise": "0.4.1",
    "lodash": "4.4.0"
  }
}

index.js

import { ensureDir, writeFile, readFile, readdir, lstat } from 'fs-promise'
import { normalize, join } from 'path'
import { flattenDeep, chain, isEqual } from 'lodash'

async function loadMessages() {
  const files = await walk('./messages')
  const messages = await Promise.all(files.map(f => readFile(f, 'utf-8')))

  return flattenDeep(messages.map(JSON.parse))
}

async function walk(start) {
  start = normalize(start)
  const stat = await lstat(start)

  if (stat.isDirectory()) {
    let currentLevel = await readdir(start)
    let results = await Promise.all(currentLevel
      .map(f => join(start, f))
      .map(normalize)
      .map(walk)
    )
    return flattenDeep(results)
  }

  return [normalize(start)]
}

function uniqueify(messages) {
  return chain(messages).groupBy('id').values().map(desc => {
    if (desc.length > 1) {
      const allTheSame = desc.map(isEqual.bind(null, desc[0]))
        .reduce((res, v) => res && v, true)
      if (allTheSame) {
        return desc[0]
      }
      throw new Error(`Duplicated message id with differing content: ${desc[0].id}`) //eslint-disable-line
    }
    return desc[0]
  })

}

function buildString(messages) {
  const insides = messages
    .map(m => {
      const line = `//${m.description}\n  '${m.id}': '${m.defaultMessage.replace(/'/, "\'")}'` //eslint-disable-line
      if (line.length > 80) {
        return `${line}, //eslint-disable-line`
      }
      return line
    })
    .join(',\n  ')

  return `const messages = {\n  ${insides}\n}\n\nwindow.messages = messages\n`
}

ensureDir('../public/js/i18n')
  .then(loadMessages)
  .then(uniqueify)
  .then(buildString)
  .then(contents => writeFile('../public/js/i18n/en.js', contents))
  .then(() => console.log('Finished building i18n english content'))
  .catch((err) => console.error('Failed to build i18n english content', err))

[ericf]

I'd be open to looking at a PR that attempts to make plugin output to a single file. The main issue is that Babel operates on a single file at a time, potentially in parallel, and this plugin would have to read and write to the file in a race-y way.

To do this correctly, a file locking construct would likely need to be created, so that after processing one JS file, it doesn't overwrite the strings of another.

Also, a data structure would need to be created to group messages per source file.

[tuckerconnelly]

Sweg async brah 👍

Getting back to this now, thanks @toadzky ! 😄

[pospi]

You guys might find react-intl-po useful in combination with on-build-webpack, should be able to hookup shell commands to do the generation for each of your supported languages relatively easily. react-intl-translations-manager seems worth a look too.

[pospi]

All doing what I want now, so here's what I've got. react-intl-po didn't do what I was after, so I ended up forking it in order to generate *.po files (as opposed to *.pot). You can use pospi/react-intl-po#built in your dependencies until it's been merged into the main project.

You'll need these imports and variables set:

const path = require('path');
const { exec } = require('child_process');
const OnBuildPlugin = require('on-build-webpack');

const localesDir = path.resolve(process.cwd(), 'locales');    // set to `messagesDir` in the babel plugin options
const intlLocaleFiles = path.join(localesDir, 'src/**/*.json');
const defaultTranslationFile = path.join(localesDir, 'en.po');
const allTranslationFiles = path.join(localesDir, '*.po');

Note that my app has a toplevel src folder which means all the separate JSON files will end up underneath src/ in the output directory (localesDir) and not interfere with the merged *.po and *.json files.

In your Webpack plugins, add the following:

new OnBuildPlugin(stats => {
    // Generate *.po file for the default language (presumably `en`).
    // We don't need a *.pot file, the default lang is the template.
    exec(`rip json2pot '${intlLocaleFiles}' -o '${defaultTranslationFile}' -k id -v defaultMessage`, (err, data) => {
      if (err) return console.error(err);

      // From the resultant or manually translated *.po files, create JSON translations for the app
      /* eslint no-shadow: 0 */
      exec(`rip po2json '${allTranslationFiles}' -m '${intlLocaleFiles}' -o '${localesDir}' -k id`, (err, data) => {
        if (err) return console.error(err);
      });
    });
  })

Upon completing compilation you should now have everything you need under localesDir. If you're using babel only then you probably just need to run those shell commands after it finishes compiling instead of wiring into Webpack (: