Merge branch 'gr-example'

Gertjan Reynaert · Gertjan Reynaert · commit 8b28709b9191 · 2016-07-01T09:54:08.000+02:00
diff --git a/contributing.md b/contributing.md
@@ -13,7 +13,17 @@ Here are the steps required for contributing:
 5. Make sure eslint errors are fixed, if eslint errors don't show up in your editor you can always check them with
   > npm run eslint
 
-6. Commit your changes according to the conventional changelog commit convention we use
-7. Create a pull request
+6. Check if everything works well by using the example application
+  1. Create a build for the translation manager
+    > npm run build
+  2. Create a build for the example application
+    > cd example
+
+    > npm run build
+  3. Run the translation manager
+    > npm run manage:translations
+
+7. Commit your changes according to the conventional changelog commit convention we use
+8. Create a pull request
 
 (If you encounter additional steps during your contribution, do not hesitate to update this document)
diff --git a/example/.babelrc b/example/.babelrc
@@ -0,0 +1,11 @@
+{
+  "presets": ["react", "es2015"],
+  "plugins":  [
+    [
+      "react-intl",
+      {
+        "messagesDir": "./src/locales/extractedMessages"
+      }
+    ]
+  ]
+}
diff --git a/example/.eslintignore b/example/.eslintignore
@@ -0,0 +1 @@
+**/node_modules
diff --git a/example/.eslintrc b/example/.eslintrc
@@ -0,0 +1,17 @@
+{
+  "extends": "airbnb",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    },
+  },
+  "env": {
+    "mocha": true
+  },
+  "rules": {
+    "arrow-parens": [2, "as-needed"],
+    "no-multiple-empty-lines": [2, {"max": 1, "maxEOF": 1}],
+  }
+}
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>React-intl-translations-manager</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/dist/src.js"></script>
+  </body>
+</html>
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "translation_manager_example",
+  "version": "1.0.0",
+  "description": "Example to test and demonstrate the usage of this plugin",
+  "private": true,
+  "scripts": {
+    "build": "babel src --out-dir dist",
+    "manage:translations": "babel-node ./translationRunner.js"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "babel-cli": "^6.4.0",
+    "babel-core": "^6.4.0",
+    "babel-preset-es2015": "6.9.0",
+    "babel-preset-react": "6.11.1",
+    "babel-plugin-react-intl": "2.1.3",
+    "eslint": "2.13.1",
+    "eslint-config-airbnb": "9.0.1",
+    "eslint-plugin-import": "1.10.0",
+    "eslint-plugin-jsx-a11y": "1.5.3",
+    "eslint-plugin-react": "5.2.2",
+    "react": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "react-intl": "^2.1.3"
+  }
+}
diff --git a/example/src/Application.js b/example/src/Application.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+import HelloWorld from './HelloWorld';
+import nlMessages from './nlMessages';
+
+class Application extends Component {
+  render() {
+    return (
+      <IntlProvider locale="nl" messages={nlMessages}>
+        <HelloWorld />
+      </IntlProvider>
+    );
+  }
+}
+
+ReactDOM.render(Application, document.getElementById('app'));
diff --git a/example/src/HelloWorld.js b/example/src/HelloWorld.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import { intlShape, defineMessages } from 'react-intl';
+
+const t = defineMessages({
+  helloWorld: {
+    id: 'hello_world',
+    description: 'A greeting to the world',
+    defaultMessage: 'Hello {name}',
+  },
+  name: {
+    id: 'hello_name',
+    description: 'Name input field placeholder',
+    defaultMessage: 'Your name',
+  },
+});
+
+class HelloWorld extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: '',
+    };
+  }
+
+  onNameChange(newName) {
+    this.setState({ name: newName });
+  }
+
+  render() {
+    const { formatMessage } = this.context.intl;
+
+    return (
+      <div>
+        { formatMessage(t.helloWorld, { name: this.state.name }) }
+        <input
+          type="text"
+          onChange={e => this.onNameChange(e.target.value)}
+          placeholder={formatMessage(t.name)}
+        />
+      </div>
+    );
+  }
+}
+
+HelloWorld.contextTypes = { intl: intlShape };
+
+export default HelloWorld;
diff --git a/example/translationRunner.js b/example/translationRunner.js
@@ -0,0 +1,9 @@
+import translationManager from '../dist/index';
+
+translationManager({
+  messagesDirectory: './src/locales/extractedMessages',
+  translationsDirectory: './src/locales/lang/',
+  whitelistsDirectory: './src/locales/whitelists/',
+  languages: ['nl'],
+  singleMessagesFile: true,
+});
diff --git a/src/createSingleMessagesFile.js b/src/createSingleMessagesFile.js
@@ -1,5 +1,6 @@
 import Path from 'path';
 import { writeFileSync } from 'fs';
+import { sync as mkdirpSync } from 'mkdirp';
 import stringify from './stringify';
 
 export default ({
@@ -19,6 +20,7 @@ export default ({
 
   const DIR = Path.join(directory, fileName);
 
+  mkdirpSync(directory);
   writeFileSync(
     DIR,
     stringify(messages, { space: jsonSpaceIndentation, sortKeys })
