TypeScript

[googol7]

It would be very nice, if the tool also worked together with TypeScript.

[ericf]

Please say more…

[googol7]

In formatjs/formatjs#162 you said:

I only have plans to officially support the Babel plugin for extracting the default messages from source so they can be prepared for translation. It looks like you could have the TypeScript compiler output ES6 via the --target ES6 option, and then you could use Babel to transpile to ES3/5. It would be adding to your toolchain, but could open up your code base to more static analysis and tooling outside of what TypeScript provides.

It would be very nice though if "typescript-plugin-react-intl" could directly extract messages from TypeScript *.ts and *.tsx files.

[ericf]

Okay, but that's not something I will be writing.

[googol7]

at the moment my script makemessages.sh looks like this:

#!/bin/bash
rm -rf trans-tmp extracted-messages
node_modules/.bin/tsc -p . --target ES6 --module es6 --jsx preserve --outDir trans-tmp
node_modules/.bin/babel --plugins react-intl "trans-tmp/**/*.jsx"

[davidjsalazarmoreno]

Thank you @googol7, your script works for me.

[googol7]

I’m also using react-intl-translations-manager now. So my script makemessages.sh now looks like this:

#! /usr/bin/env python
# -*- coding: utf-8 -*-

import os
import sys
import subprocess

commands = [
    "rm -rf src/app/l10n.bak",
    "cp -r src/app/l10n src/app/l10n.bak",
    "rm -rf trans-tmp extracted-messages",
    "node_modules/.bin/tsc -p . --target ES6 --module es6 --jsx preserve --outDir trans-tmp",
    "node_modules/.bin/babel --plugins react-intl \"trans-tmp/**/*.jsx\"",
]

progress = ""

for command in commands:
    progress += "."
    sys.stdout.write('%s\r' % (progress)),
    sys.stdout.flush()

    proc = subprocess.Popen([ command ], stdout=subprocess.PIPE, shell=True, stderr=subprocess.STDOUT,)
    (out, err) = proc.communicate()

    if "SyntaxError:" in out:
        print "SyntaxError occured. Stopping operation.\n"
        print out
        sys.exit(1)
        break

subprocess.Popen([ "npm run manage:translations" ], shell=True).wait()

sys.exit(0)

package.json contains:

  "scripts": {
    "manage:translations": "node_modules/.bin/babel-node ./translationRunner.js"
  },

translationRunner.js looks like this:

import manageTranslations, { readMessageFiles, createSingleMessagesFile } from "react-intl-translations-manager"

const messagesDir = "extracted-messages"
const translationsDir = "src/app/l10n/"
const singleMessageFileDir = "."

manageTranslations({
    messagesDirectory: messagesDir,
    translationsDirectory: translationsDir,
    languages: ["en", "cs", "de", "es", "fr", "it", "ja"],
})

const extractedMessages = readMessageFiles(messagesDir)

createSingleMessagesFile({
    messages: extractedMessages,
    directory: singleMessageFileDir,
    jsonSpaceIndentation: 4,
})

[krzkaczor]

You can use babel@7 to extract ids from typescript codebase without tsc compilation step 🎉
https://github.com/Neufund/platform-frontend/pull/534/files#diff-e56633f72ecc521128b3db6586074d2cR1