├── .gitignore ├── LICENSE.md ├── README.md ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### JetBrains template 3 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio 4 | 5 | *.iml 6 | 7 | ## Directory-based project format: 8 | .idea/ 9 | # if you remove the above rule, at least ignore the following: 10 | 11 | # User-specific stuff: 12 | .idea/workspace.xml 13 | .idea/tasks.xml 14 | .idea/dictionaries 15 | 16 | # Sensitive or high-churn files: 17 | .idea/dataSources.ids 18 | .idea/dataSources.xml 19 | .idea/sqlDataSources.xml 20 | .idea/dynamic.xml 21 | .idea/uiDesigner.xml 22 | 23 | # Gradle: 24 | .idea/gradle.xml 25 | .idea/libraries 26 | 27 | # Mongo Explorer plugin: 28 | .idea/mongoSettings.xml 29 | 30 | ## File-based project format: 31 | *.ipr 32 | *.iws 33 | 34 | ## Plugin-specific files: 35 | 36 | # IntelliJ 37 | /out/ 38 | 39 | # mpeltonen/sbt-idea plugin 40 | .idea_modules/ 41 | 42 | # JIRA plugin 43 | atlassian-ide-plugin.xml 44 | 45 | # Crashlytics plugin (for Android Studio and IntelliJ) 46 | com_crashlytics_export_strings.xml 47 | crashlytics.properties 48 | crashlytics-build.properties 49 | ### Node template 50 | # Logs 51 | logs 52 | *.log 53 | npm-debug.log* 54 | 55 | # Runtime data 56 | pids 57 | *.pid 58 | *.seed 59 | 60 | # Directory for instrumented libs generated by jscoverage/JSCover 61 | lib-cov 62 | 63 | # Coverage directory used by tools like istanbul 64 | coverage 65 | 66 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 67 | .grunt 68 | 69 | # node-waf configuration 70 | .lock-wscript 71 | 72 | # Compiled binary addons (http://nodejs.org/api/addons.html) 73 | build/Release 74 | 75 | # Dependency directory 76 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git 77 | node_modules 78 | ### OSX template 79 | .DS_Store 80 | .AppleDouble 81 | .LSOverride 82 | 83 | # Icon must end with two \r 84 | Icon 85 | 86 | # Thumbnails 87 | ._* 88 | 89 | # Files that might appear in the root of a volume 90 | .DocumentRevisions-V100 91 | .fseventsd 92 | .Spotlight-V100 93 | .TemporaryItems 94 | .Trashes 95 | .VolumeIcon.icns 96 | 97 | # Directories potentially created on remote AFP share 98 | .AppleDB 99 | .AppleDesktop 100 | Network Trash Folder 101 | Temporary Items 102 | .apdisk 103 | 104 | 105 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Ognian Tschakalov, OGI-IT 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | 11 | 12 | MIT (http://www.opensource.org/licenses/mit-license.php) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-intl-webpack-plugin 2 | 3 | This plugin helps when using react-intl for internationalization of react apps. 4 | 5 | ## Workflow 6 | 7 | 1. Use `` for adding text in your react components. 8 | 2. Use the babel plugin `babel-plugin-react-intl` to extract them from your source code. 9 | 3. Use `react-intl-webpack-plugin` to combine them into one message file called `reactIntlMessages.json` and put this file into the webpack output path. 10 | 4. Use CAT (Computer Aided Translation) tools (like the cloud based memsource.com or okapi) to translate this file into the translated file. These tools use a concept called Translation Memory (TM) . This is a separate file where all translations are stored and with this file all translations can be reapplied to a newly generated `reactIntlMessages.json` file. 11 | 5. Save the TM file and the translated json file in a separate directory of your source code. 12 | 6. Use `reactIntlJson-loader` to load the translated files and convert them to messages. 13 | 14 | ## Installation 15 | 16 | `npm install react-intl-webpack-plugin --save-dev` 17 | 18 | webpack.config.js: 19 | - add the plugin 20 | ``` 21 | var ReactIntlPlugin=require('react-intl-webpack-plugin'); 22 | ... 23 | plugins: [ 24 | ... 25 | new ReactIntlPlugin() 26 | ], 27 | ``` 28 | - modify your babel-loader to contain the `metadataSubscribers` option 29 | ``` 30 | module: { 31 | loaders: [ 32 | ... 33 | { 34 | test: /\.js?$/, loader: 'babel-loader', 35 | query: { 36 | "cacheDirectory": true, 37 | "metadataSubscribers":[ReactIntlPlugin.metadataContextFunctionName], 38 | "plugins": ["transform-runtime", 39 | ["react-intl", { 40 | "enforceDescriptions": false 41 | }]], 42 | "presets": ['react', "es2015", "stage-1"] 43 | } 44 | }, 45 | ``` 46 | 47 | - the generated file is called `reactIntlMessages.json` 48 | 49 | ## Options 50 | You can pass a hash of configuration options to react-intl-webpack-plugin. Allowed values are as follows: 51 | 52 | |Name|Type|Default|Description| 53 | |:--:|:--:|:-----:|:----------| 54 | |**[`filename`](#)**|`{String}`|`./reactIntlMessages.json`|The output filename| 55 | 56 | 57 | ## Notes 58 | 59 | - Keep in mind that as long as you use webpack-dev-server all assets are generated in memory. To access those assets use either: 60 | - the browser an check http://localhost:devServerPort/reactIntlMessages.json 61 | - or, add a script to package.json like `"trans:refreshJsonDEV": "curl localhost:3100/reactIntlMessages.json >./dist/reactIntlMessages.json"` 62 | - or start your webpack build to generate the assets into the build directory. 63 | 64 | - If no messages are generated it could be helpful to cleanup the `cacheDirectory` of the babel-loader, or set `"cacheDirectory": false` temporarily 65 | 66 | ## License 67 | 68 | MIT (http://www.opensource.org/licenses/mit-license.php) 69 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by ogi on 27.05.16. 3 | */ 4 | function ReactIntlPlugin(options) { 5 | this.options = Object.assign({}, { 6 | filename: './reactIntlMessages.json' 7 | }, options); 8 | } 9 | 10 | ReactIntlPlugin.prototype.apply = function (compiler) { 11 | 12 | var messages = {}; 13 | var options = this.options; 14 | 15 | compiler.hooks.compilation.tap("ReactIntlPlugin", function(compilation) { 16 | // console.log("The compiler is starting a new compilation..."); 17 | 18 | compilation.hooks.normalModuleLoader.tap("ReactIntlPlugin", function (context, module) { 19 | // console.log("registering function: ", __dirname, "in loader context"); 20 | context["metadataReactIntlPlugin"] = function (metadata) { 21 | // do something with metadata and module 22 | // console.log("module:",module,"collecting metadata:", metadata); 23 | messages[module.resource] = metadata["react-intl"].messages; 24 | } 25 | }) 26 | }) 27 | 28 | compiler.hooks.emit.tapAsync("ReactIntlPlugin", function (compilation, callback) { 29 | // console.log("emitting messages"); 30 | 31 | // check for duplicates and flatten 32 | var jsonMessages = []; 33 | var idIndex = {}; 34 | Object.keys(messages).map(function (e) { 35 | messages[e].map(function (m) { 36 | if (!idIndex[m.id]) { 37 | idIndex[m.id] = e; 38 | jsonMessages.push(m); 39 | } else { 40 | compilation.errors.push("ReactIntlPlugin -> duplicate id: '" + m.id + "'.Found in '" + idIndex[m.id] + "' and '" + e + "'."); 41 | } 42 | }) 43 | }); 44 | 45 | // order jsonString based on id (since files are under version control this makes changes easier visible) 46 | jsonMessages.sort(function (a, b){ 47 | return ( a.id < b.id ) ? -1 : ( a.id > b.id ? 1 : 0 ) 48 | }) 49 | 50 | var jsonString = JSON.stringify(jsonMessages, undefined, 2); 51 | // console.log("jsonString:",jsonString); 52 | 53 | // Insert this list into the Webpack build as a new file asset: 54 | compilation.assets[options.filename] = { 55 | source: function () { 56 | return jsonString; 57 | }, 58 | size: function () { 59 | return jsonString.length; 60 | } 61 | }; 62 | 63 | callback(); 64 | }); 65 | }; 66 | 67 | module.exports = ReactIntlPlugin; 68 | module.exports.metadataContextFunctionName = "metadataReactIntlPlugin"; 69 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-intl-webpack-plugin", 3 | "version": "0.3.1", 4 | "author": "Ognian Tschakalov", 5 | "description": "ReactIntlPlugin for webpack", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/Ognian/react-intl-webpack-plugin.git" 10 | }, 11 | "peerDependencies": { 12 | "babel-loader": ">= 6.0.0", 13 | "babel-plugin-react-intl": ">= 2.3.0", 14 | "webpack":">= 4.0.0" 15 | } 16 | } 17 | --------------------------------------------------------------------------------