Comments (7)
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.
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.
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.
Please say more…
from babel-plugin-react-intl.
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.
Okay, but that's not something I will be writing.
from babel-plugin-react-intl.
Thank you @googol7, your script works for me.
from babel-plugin-react-intl.
Related Issues (20)
- react-native HOT 1
- Not working with babel-loader 8.x HOT 4
- Generate Message ID HOT 1
- The "path" argument must be of type string (v2.4.0) HOT 3
- Allow other component names than the build-in ones HOT 4
- plugin does not seem to do anything HOT 1
- Only defineMessages works. FormattedMessage is ignored. HOT 9
- file.log.warn causes TypeError: Cannot read property 'warn' of undefined HOT 3
- Am I supposed to use this plugin to obtain translation files? HOT 3
- Babel 7 support HOT 3
- Error: Cannot find module 'upath' HOT 3
- Cannot find module babel-plugin-react-intl when extracting messages HOT 1
- id containing multiple period would not work.
- [Babel 7] TypeError: Path must be a string. Received undefined HOT 7
- Any option to remove `defaultMessage` field in production? HOT 1
- cache is not working properly HOT 3
- Extracting message by formatMessage directly but defineMessages HOT 1
- Support spread syntax (or expression) for defineMessages
- Plugin does nothing, how to debug? (using with Gatsby) HOT 2
- [React Intl] `undefined()` must be called with an object expression with values that are React Intl Message Descriptors, also defined as object expressions. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from babel-plugin-react-intl.