Init

mobirollerteam · Jun 20, 2016 · b5bd921 · b5bd921
commit b5bd921
Show file tree

Hide file tree

Showing 24 changed files with 551 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "es2015", "stage-0"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+node_modules
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,78 @@
+# React Multilingual with redux
+
+A simple and slim multi-lingual component for React with Redux without react-intl or react-i18n
+
+## Wiring it up
+
+````
+import translations from './translations'
+import { IntlReducer as Intl, IntlProvider } from 'react-redux-multilingual'
+import { createStore, combineReducers } from 'redux'
+import { Provider } from 'react-redux'
+import App from './App'
+
+let reducers = combineReducers(Object.assign({}, { Intl }))
+let store = createStore(reducers)
+
+ReactDOM.render(
+  <Provider store={store}>
+    <IntlProvider translations={translations}>
+      <App />
+    </IntlProvider>
+  </Provider>
+, document.getElementById('root'))
+````
+
+## Translations format
+The translations props accepts object in this format
+
+````
+{
+  en: {
+    locale: 'en-US',
+    messages: {
+      hello: 'how are you {name}'
+    }
+  },
+  zh: {
+    locale: 'zh',
+    messages: {
+      hello: '你好！你好吗 {name}'
+    }
+  }
+}
+````
+
+## Translate using higher-order component (HOC)
+
+````
+import { withTranslate } from 'react-redux-multilingual'
+
+const App = ({ translate }) = {
+  return (
+    <div>
+      {translate('hello', { name: 'John Doe' })}
+    </div>
+  )
+}
+
+module.exports = withTranslate(App)
+````
+
+## Translate using Context
+
+````
+const App = (props) => {
+  return (
+    <div>
+      {this.context.translate('hello', { name: 'John Doe' })}
+    </div>
+  )
+}
+
+App.contextTypes = {
+  translate: React.propTypes.func
+}
+
+module.exports = App
+````
diff --git a/example/.babelrc b/example/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "es2015", "stage-0"]
+}
diff --git a/example/App.js b/example/App.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { withTranslate, IntlActions } from 'react-redux-multilingual'
+
+const App = ({ translate, dispatch }) => {
+  return (
+    <div>
+      <p>Hey theres</p>
+      {translate('hello')}
+
+      <p>
+        <button
+          onClick={() => {
+            dispatch(IntlActions.setLocale('en'))
+          }}>Switch to English</button>
+        <button
+          onClick={() => {
+            dispatch(IntlActions.setLocale('zh'))
+          }}>Switch to Chinese</button>
+      </p>
+    </div>
+  )
+}
+
+module.exports = connect()(withTranslate(App))
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Example</title>
+</head>
+<body>
+
+  <div id="root"></div>
+
+  <script src='bundle.js'></script>
+</body>
+</html>
diff --git a/example/index.js b/example/index.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import translations from './translations'
+import { IntlReducer as Intl, IntlProvider } from 'react-redux-multilingual'
+import { createStore, combineReducers } from 'redux'
+import { Provider } from 'react-redux'
+import App from './App'
+
+let reducers = combineReducers(Object.assign({}, { Intl }))
+let store = createStore(reducers)
+
+ReactDOM.render(
+  <Provider store={store}>
+    <IntlProvider translations={translations}>
+      <App />
+    </IntlProvider>
+  </Provider>
+, document.getElementById('root'))
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "example",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "react-redux": "^4.4.5",
+    "redux": "^3.5.2"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.10.1",
+    "babel-core": "^6.9.1",
+    "babel-eslint": "^6.0.4",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "express": "^4.14.0",
+    "webpack": "^1.13.1",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-hot-middleware": "^2.10.0"
+  }
+}
diff --git a/example/server.js b/example/server.js
@@ -0,0 +1,27 @@
+var path = require('path');
+var express = require('express');
+var webpack = require('webpack');
+var config = require('./webpack.config');
+
+var app = express();
+var compiler = webpack(config);
+
+app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo: true,
+  publicPath: config.output.publicPath
+}));
+
+app.use(require('webpack-hot-middleware')(compiler));
+
+app.get('*', function(req, res) {
+  res.sendFile(path.join(__dirname, 'index.html'));
+});
+
+app.listen(3009, 'localhost', function(err) {
+  if (err) {
+    console.log(err);
+    return;
+  }
+
+  console.log('Listening at http://localhost:3009');
+});
diff --git a/example/translations.js b/example/translations.js
@@ -0,0 +1,14 @@
+module.exports = {
+  en: {
+    locale: 'en-US',
+    messages: {
+      hello: 'Hello! How are you?'
+    }
+  },
+  zh: {
+    locale: 'zh',
+    messages: {
+      hello: '你好！你好吗'
+    }
+  }
+}
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -0,0 +1,27 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: [
+    './index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  resolve: {
+    alias: {
+      'react-redux-multilingual': path.join(__dirname, './../lib')
+    },
+    fallback: path.resolve(__dirname, './node_modules')
+  },
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      loaders: ['babel'],
+      include: path.join(__dirname, './'),
+      exclude: /(node_modules|bower_components)/
+    }]
+  }
+}
+
diff --git a/lib/actions.js b/lib/actions.js
@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setLocale = setLocale;
+function setLocale(locale) {
+  return {
+    type: 'SET_LOCALE',
+    locale: locale
+  };
+}
diff --git a/lib/index.js b/lib/index.js
@@ -0,0 +1,8 @@
+'use strict';
+
+module.exports = {
+  IntlReducer: require('./reducer'),
+  withTranslate: require('./withTranslate'),
+  IntlProvider: require('./provider'),
+  IntlActions: require('./actions')
+};
diff --git a/lib/provider.js b/lib/provider.js
@@ -0,0 +1,76 @@
+'use strict';
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactRedux = require('react-redux');
+
+var _utils = require('./utils');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var IntlProvider = function (_React$Component) {
+  _inherits(IntlProvider, _React$Component);
+
+  function IntlProvider(props) {
+    _classCallCheck(this, IntlProvider);
+
+    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(IntlProvider).call(this, props));
+
+    _this.translate = function (key, placeholders, isHTML) {
+      var result = (0, _utils.translateKey)(key, _this.props.translations[_this.props.locale]['messages']);
+      if (typeof placeholders === 'undefined') {
+        return result;
+      }
+      return isHTML ? _react2.default.createElement('div', { dangerouslySetInnerHTML: (0, _utils.createHTMLMarkup)((0, _utils.supplant)(result, placeholders)) }) : (0, _utils.supplant)(result, placeholders);
+    };
+
+    if (!props.translations || !props.locale) {
+      var namePart = _this.constructor.displayName ? ' of ' + _this.constructor.displayName : '';
+      throw new Error('Could not find translations or locale on this.props ' + namePart);
+    }
+    return _this;
+  }
+
+  _createClass(IntlProvider, [{
+    key: 'getChildContext',
+    value: function getChildContext() {
+      return {
+        translate: this.translate
+      };
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return _react.Children.only(this.props.children);
+    }
+  }]);
+
+  return IntlProvider;
+}(_react2.default.Component);
+
+IntlProvider.childContextTypes = {
+  translate: _react2.default.PropTypes.func
+};
+
+
+function mapPropsToState(state) {
+  var Intl = state.Intl;
+
+  return _extends({}, Intl, {
+    key: Intl.locale
+  });
+}
+
+module.exports = (0, _reactRedux.connect)(mapPropsToState)(IntlProvider);
diff --git a/lib/reducer.js b/lib/reducer.js
@@ -0,0 +1,23 @@
+'use strict';
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var initialState = {
+  locale: 'en'
+};
+
+function reducer() {
+  var state = arguments.length <= 0 || arguments[0] === undefined ? initialState : arguments[0];
+  var action = arguments[1];
+
+  switch (action.type) {
+    case 'SET_LOCALE':
+      return _extends({}, state, {
+        locale: action.locale
+      });
+    default:
+      return state;
+  }
+}
+
+module.exports = reducer;