Automatically generate javascript files for react-intl when the server starts up.

Author: JasonYCHuang

CHANGELOG.md

@@ -6,6 +6,9 @@ Contributors: please follow the recommendations outlined at [keepachangelog.com]
 ## [Unreleased]
 *Please add entries here for your pull requests.*
 
+##### Changed
+- Automatically generate __i18n__ javascript files for `react-intl` when the serve starts up. [#642](https://github.com/shakacode/react_on_rails/pull/642) by [JasonYCHuang](https://github.com/JasonYCHuang).
+
 ## [6.3.4] - 2016-12-25
 ##### Fixed
 - Disable Turbolinks support when not supported. [#650](https://github.com/shakacode/react_on_rails/pull/650) by [ka2n](https://github.com/ka2n).

README.md

@@ -2,8 +2,6 @@
 
 **For a complete example of this gem, see our live demo at [www.reactrails.com](http://www.reactrails.com). ([Source Code](https://github.com/shakacode/react-webpack-rails-tutorial))**
 
-Aloha from Justin Gordon ([bio](http://www.railsonmaui.com/about)) and the [ShakaCode](http://www.shakacode.com) Team! We're actively looking for new projects involving React, React-Native, and Rails. Please contact me at [[email protected]](mailto:[email protected]) if we could potentially help you in any way. Besides consulting on bigger projects, [ShakaCode](http://www.shakacode.com) is doing ScreenHero plus Slack/Github based coaching for React on Rails. See our blog post [Can ShakaCode Help You?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9) for more information. 
-
 We're offering a free half-hour project consultation, on anything from React on Rails to any aspect of web application development for both consumer and enterprise products. In addition to React.js and Rails, we're doing React-Native iOS and Android apps!
 
 Whether you have a new project or need help on an existing project, feel free to contact me directly at [[email protected]](mailto:[email protected]) and thanks in advance for any referrals!
@@ -50,6 +48,7 @@ React on Rails integrates Facebook's [React](https://github.com/facebook/react)
     - [Installation Summary](#installation-summary)
     - [Initializer Configuration: config/initializers/react_on_rails.rb](#initializer-configuration)
     - [Including your React Component in your Rails Views](#including-your-react-component-in-your-rails-views)
+    - [I18n](#i18n)
 + [How it Works](#how-it-works)
     - [Client-Side Rendering vs. Server-Side Rendering](#client-side-rendering-vs-server-side-rendering)
     - [Building the Bundles](#building-the-bundles)
@@ -168,7 +167,104 @@ Configure the `config/initializers/react_on_rails.rb`. You can adjust some neces
     // inside your React component
     this.props.name // "Stranger"
   ```
-  
+
+### I18n
+
+You can enable the i18n functionality with [react-intl](https://github.com/yahoo/react-intl). ReactOnRails also converts traditional Rails locale files, `*.yml`, to required javascript files, `translations.js` & `default.js`, automatically.
+
+For more detail, you can refer to [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial)
+
+1. Add `react-intl` to `client/package.json`, and remember to `bundle && npm install`
+
+  ```js
+  "dependencies": {
+    ...
+    "intl": "^1.2.5",
+    "react-intl": "^2.1.5",
+    ...
+  }
+  ```
+
+2. In `client/webpack.client.base.config.js`, set `react-intl` as an entry point.
+
+  ```js
+  module.exports = {
+    ...
+    entry: {
+      ...
+      vendor: [
+        ...
+        'react-intl',
+      ],
+      ...
+  ```
+
+3. ReactOnRails uses locale files as you did before in Rails: `config/locales/*.yml`. Therefore, you don't need to create additional local files.
+
+4. Update settings in `config/initializers/react_on_rails.rb` to what you need:
+
+  ```ruby
+  # Replace the following line to the location where you keep translation.js & default.js.
+  config.i18n_dir = Rails.root.join("PATH_TO", "YOUR_JS_I18N_FOLDER")
+  # Default locale
+  config.default_locale = "en"
+  # The location of rails locales
+  config.rails_locales_path = Rails.application.config.i18n.load_path
+  ```
+
+5. Add following lines to `config/application.rb`, this will help you to generate `translations.js` & `default.js` automatically when you starts the server.
+
+  ```js
+  module YourModule
+    class Application < Rails::Application
+      ...
+      config.after_initialize do
+        ReactOnRails::LocalesToJs.new.convert
+      end
+    end
+  end
+  ```
+
+6. In React, you need to initialize `react-intl`, and set parameters for it.
+
+  For more detail, you can refer to [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial)
+
+  > `translations.js`: All your locales in json format.
+  >
+  > `default.js`: [1] `defaultLocale` is your default locale, like "en". [2] `defaultMessages` is the place where you can get your local values with localeKeyInCamelForm, and it also contains fallback when something went wrong.
+  >
+  > There is no need to track and lint `translations.js` & `default.js`, and you can add them to `.gitignore` and `.eslintignore`.
+
+  ```js
+  ...
+  import { addLocaleData } from 'react-intl';
+  import en from 'react-intl/locale-data/en';
+  import de from 'react-intl/locale-data/de';
+  import { translations } from 'path_to/i18n/translations';
+  import { defaultLocale } from 'path_to/i18n/default';
+  ...
+  // Initizalize all locales for react-intl.
+  addLocaleData([...en, ...de]);
+  ...
+  // set locale and messages for IntlProvider.
+  const locale = method_to_get_current_locale() || defaultLocale;
+  const messages = translations[locale];
+  ...
+  return (
+    <IntlProvider locale={locale} key={locale} messages={messages}>
+      <CommentScreen {...{ actions, data }} />
+    </IntlProvider>
+  )
+  ```
+  ```js
+  // In your component.
+  import { defaultMessages } from 'path_to/i18n/default';
+  ...
+  return (
+    { formatMessage(defaultMessages.yourLocaleKeyInCamelCase) }
+  )
+  ```
+
 ## NPM
 All JavaScript in React On Rails is loaded from npm: [react-on-rails](https://www.npmjs.com/package/react-on-rails). To manually install this (you did not use the generator), assuming you have a standard configuration, run this command:
 
@@ -241,11 +337,6 @@ The `railsContext` has: (see implementation in file [react_on_rails_helper.rb](a
     pathname: uri.path, # /posts
     search: uri.query, # id=30&limit=5
 
-    # Locale settings
-    i18nLocale: I18n.locale,
-    i18nDefaultLocale: I18n.default_locale,
-    httpAcceptLanguage: request.env["HTTP_ACCEPT_LANGUAGE"],
-
     # Other
     serverSide: boolean # Are we being called on the server or client? NOTE, if you conditionally
      # render something different on the server than the client, then React will only show the
@@ -257,9 +348,6 @@ The `railsContext` has: (see implementation in file [react_on_rails_helper.rb](a
 ##### Needing the current url path for server rendering
 Suppose you want to display a nav bar with the current navigation link highlighted by the URL. When you server render the code, you will need to know the current URL/path if that is what you want your logic to be based on. The new `railsContext` has this information so the application of an "active" class can be done server side.
 
-##### Needing the I18n.locale
-Suppose you want to server render your react components with localization applied given the current Rails locale. The `railsContext` contains the I18n.locale.
-
 ##### Configuring different code for server side rendering
 Suppose you want to turn off animation when doing server side rendering. The `serverSide` value is just what you need.
 

lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt

@@ -59,6 +59,16 @@ ReactOnRails.configure do |config|
   config.server_renderer_pool_size = 1 # increase if you're on JRuby
   config.server_renderer_timeout = 20 # seconds
 
+  ################################################################################
+  # I18N OPTIONS
+  ################################################################################
+  # Replace the following line to the location where you keep translation.js & default.js.
+  config.i18n_dir = Rails.root.join("client", "app", "libs", "i18n")
+  # Default locale
+  config.default_locale = "en"
+  # The location of rails locales
+  config.rails_locales_path = Rails.application.config.i18n.load_path
+
   ################################################################################
   # MISCELLANEOUS OPTIONS
   ################################################################################

lib/react_on_rails.rb

@@ -16,3 +16,4 @@
 require "react_on_rails/test_helper/webpack_assets_status_checker"
 require "react_on_rails/test_helper/ensure_assets_compiled"
 require "react_on_rails/test_helper/node_process_launcher"
+require "react_on_rails/locales_to_js"

lib/react_on_rails/configuration.rb

@@ -72,6 +72,9 @@ def self.configuration
       server_render_method: "",
       symlink_non_digested_assets_regex: /\.(png|jpg|jpeg|gif|tiff|woff|ttf|eot|svg|map)/,
       npm_build_test_command: "",
+      i18n_dir: "",
+      default_locale: "",
+      rails_locales_path: "",
       npm_build_production_command: ""
     )
   end
@@ -84,6 +87,7 @@ class Configuration
                   :skip_display_none, :generated_assets_dirs, :generated_assets_dir,
                   :webpack_generated_files, :rendering_extension, :npm_build_test_command,
                   :npm_build_production_command,
+                  :i18n_dir, :default_locale, :rails_locales_path,
                   :server_render_method, :symlink_non_digested_assets_regex
 
     def initialize(server_bundle_js_file: nil, prerender: nil, replay_console: nil,
@@ -94,12 +98,16 @@ def initialize(server_bundle_js_file: nil, prerender: nil, replay_console: nil,
                    generated_assets_dir: nil, webpack_generated_files: nil,
                    rendering_extension: nil, npm_build_test_command: nil,
                    npm_build_production_command: nil,
+                   i18n_dir: nil, default_locale: nil, rails_locales_path: nil,
                    server_render_method: nil, symlink_non_digested_assets_regex: nil)
       self.server_bundle_js_file = server_bundle_js_file
       self.generated_assets_dirs = generated_assets_dirs
       self.generated_assets_dir = generated_assets_dir
       self.npm_build_test_command = npm_build_test_command
       self.npm_build_production_command = npm_build_production_command
+      self.i18n_dir = i18n_dir
+      self.default_locale = default_locale
+      self.rails_locales_path = rails_locales_path
 
       self.prerender = prerender
       self.replay_console = replay_console

lib/react_on_rails/locales_to_js.rb

@@ -0,0 +1,104 @@
+require "erb"
+
+module ReactOnRails
+  class LocalesToJs
+    def initialize
+      @locale_files = set_locale_files
+      @default_locale = set_default_locale
+      @translations, @defaults = generate_translations
+    end
+
+    def convert
+      i18n_js_files.each do |f|
+        template = send("template_#{f}")
+        path = send("path_#{f}")
+        create_js_file(template, path)
+      end
+    end
+
+    private
+
+    def i18n_js_files
+      %w(translations_js default_js)
+    end
+
+    def create_js_file(template, path)
+      result = ERB.new(template).result()
+      File.open(path, "w") do |f|
+        f.write(result)
+      end
+    end
+
+    def generate_translations
+      translations = {}
+      defaults = {}
+      @locale_files.each do |f|
+        translation = YAML.load(File.open(f))
+        key = translation.keys[0]
+        val = flatten(translation[key])
+        translations = translations.deep_merge(key => val)
+        defaults = defaults.deep_merge(flatten_defaults(val)) if key == @default_locale
+      end
+      [translations.to_json, defaults.to_json]
+    end
+
+    def format(input)
+      input.to_s.tr(".", "_").camelize(:lower).to_sym
+    end
+
+    def flatten_defaults(val)
+      flatten(val).each_with_object({}) do |(k, v), h|
+        key = format(k)
+        h[key] = { id: k, defaultMessage: v }
+      end
+    end
+
+    def flatten(translations)
+      translations.each_with_object({}) do |(k, v), h|
+        if v.is_a? Hash
+          flatten(v).map { |hk, hv| h["#{k}.#{hk}".to_sym] = hv }
+        else
+          h[k] = v
+        end
+      end
+    end
+
+    def i18n_dir
+      ReactOnRails.configuration.i18n_dir
+    end
+
+    def set_locale_files
+      ReactOnRails.configuration.rails_locales_path
+    end
+
+    def set_default_locale
+      ReactOnRails.configuration.default_locale || "en"
+    end
+
+    def path_translations_js
+      i18n_dir + "translations.js"
+    end
+
+    def path_default_js
+      i18n_dir + "default.js"
+    end
+
+    def template_translations_js
+      <<-JS
+export const translations = #{@translations};
+      JS
+    end
+
+    def template_default_js
+      <<-JS
+import { defineMessages } from 'react-intl';
+
+const defaultLocale = \'#{@default_locale}\';
+
+const defaultMessages = defineMessages(#{@defaults});
+
+export { defaultMessages, defaultLocale };
+      JS
+    end
+  end
+end

spec/dummy/config/initializers/react_on_rails.rb

@@ -71,6 +71,16 @@ def self.custom_context(view_context)
   config.server_renderer_pool_size = 1 # increase if you're on JRuby
   config.server_renderer_timeout = 20 # seconds
 
+  ################################################################################
+  # I18N OPTIONS
+  ################################################################################
+  # Replace the following line to the location where you keep translation.js & default.js.
+  config.i18n_dir = Rails.root.join("client", "app", "libs", "i18n")
+  # Default locale
+  config.default_locale = "en"
+  # The location of rails locales
+  config.rails_locales_path = Rails.application.config.i18n.load_path
+
   ################################################################################
   # MISCELLANEOUS OPTIONS
   ################################################################################

spec/react_on_rails/locales_to_js_spec.rb

@@ -0,0 +1,22 @@
+require_relative "spec_helper"
+require "tmpdir"
+
+module ReactOnRails
+  RSpec.describe LocalesToJs do
+    let(:i18n_dir) { Pathname.new(Dir.mktmpdir) }
+    let(:locale_dir) { File.expand_path("../../dummy/config/locales/", __FILE__) }
+
+    it "generates translations.js & default.js" do
+      ReactOnRails.configure do |config|
+        config.i18n_dir = i18n_dir
+        config.default_locale = "en"
+        config.rails_locales_path = Dir["#{locale_dir}/*"]
+      end
+
+      ReactOnRails::LocalesToJs.new.convert
+
+      files = Dir["#{i18n_dir.to_path}/*"].map { |p| Pathname.new(p).basename.to_s }
+      expect(files).to include("translations.js", "default.js")
+    end
+  end
+end