Giter VIP home page Giter VIP logo

Comments (7)

googol7 avatar googol7 commented on May 24, 2024 10

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"

from babel-plugin-react-intl.

googol7 avatar googol7 commented on May 24, 2024 5

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,
})

from babel-plugin-react-intl.

krzkaczor avatar krzkaczor commented on May 24, 2024 5

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

from babel-plugin-react-intl.

ericf avatar ericf commented on May 24, 2024

Please say more…

from babel-plugin-react-intl.

googol7 avatar googol7 commented on May 24, 2024

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.

from babel-plugin-react-intl.

ericf avatar ericf commented on May 24, 2024

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

from babel-plugin-react-intl.

davidjsalazarmoreno avatar davidjsalazarmoreno commented on May 24, 2024

Thank you @googol7, your script works for me.

from babel-plugin-react-intl.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.