feat(ZNTA-1989): conditionally load Intl polyfill

server/zanata-frontend/pom.xml

@@ -132,6 +132,7 @@
                   <include>editor.min.js</include>
                   <include>editor.css</include>
                   <include>editor.css.map</include>
+                  <include>intl-polyfill.min.js</include>
                   <include>frontend.min.js</include>
                   <include>frontend.legacy.min.js</include>
                   <include>frontend.css</include>

server/zanata-frontend/src/frontend/app/editor/index.js

@@ -33,77 +33,89 @@ import './index.css'
  *  - rendering the React component tree to the page
  *  - ensuring the required css for the React component tree is available
  */
+function runApp () {
+  // TODO add all the relevant locale data
+  // Something like:
+  //  import en from './react-intl/locale-data/en'
+  //  import de from './react-intl/locale-data/de'
+  //    ... then just addLocaleData(en) etc.
+  // See https://github.com/yahoo/react-intl/blob/master/UPGRADE.md
+  // if ('ReactIntlLocaleData' in window) {
+  //   Object.keys(window.ReactIntlLocaleData).forEach(lang => {
+  //     addLocaleData(window.ReactIntlLocaleData[lang])
+  //   })
+  // }
+  addLocaleData({
+    locale: 'en-US'
+  })
 
-// TODO add all the relevant locale data
-// Something like:
-//  import en from './react-intl/locale-data/en'
-//  import de from './react-intl/locale-data/de'
-//    ... then just addLocaleData(en) etc.
-// See https://github.com/yahoo/react-intl/blob/master/UPGRADE.md
-// if ('ReactIntlLocaleData' in window) {
-//   Object.keys(window.ReactIntlLocaleData).forEach(lang => {
-//     addLocaleData(window.ReactIntlLocaleData[lang])
-//   })
-// }
-addLocaleData({
-  locale: 'en-US'
-})
+  // example uses createHistory, but the latest bundles history with
+  // react-router and has some defaults, so now I am just using one of those.
+  // const history = createHistory()
+  const history = browserHistory
 
-// example uses createHistory, but the latest bundles history with react-router
-// and has some defaults, so now I am just using one of those.
-// const history = createHistory()
-const history = browserHistory
-
-const loggerMiddleware = createLogger({
-  predicate: (getState, action) =>
-    process.env && (process.env.NODE_ENV === 'development'),
-  actionTransformer: (action) => {
-    if (typeof action.type !== 'symbol') {
-      console.warn('You should use a Symbol for this action type: ' +
-        String(action.type))
-    }
-    return {
-      ...action,
-      // allow symbol action type to be printed properly in logs
-      type: String(action.type)
+  const loggerMiddleware = createLogger({
+    predicate: (getState, action) =>
+      process.env && (process.env.NODE_ENV === 'development'),
+    actionTransformer: (action) => {
+      if (typeof action.type !== 'symbol') {
+        console.warn('You should use a Symbol for this action type: ' +
+          String(action.type))
+      }
+      return {
+        ...action,
+        // allow symbol action type to be printed properly in logs
+        type: String(action.type)
+      }
     }
-  }
-})
+  })
+
+  const reduxRouterMiddleware = syncHistory(history)
+  const createStoreWithMiddleware =
+    applyMiddleware(
+      titleUpdateMiddleware,
+      newContextFetchMiddleware,
+      searchSelectedPhraseMiddleware,
+      reduxRouterMiddleware,
+      thunk,
+      apiMiddleware,
+      // must run after thunk because it fails with thunks
+      getStateInActions,
+      loggerMiddleware
+    )(createStore)
 
-const reduxRouterMiddleware = syncHistory(history)
-const createStoreWithMiddleware =
-  applyMiddleware(
-    titleUpdateMiddleware,
-    newContextFetchMiddleware,
-    searchSelectedPhraseMiddleware,
-    reduxRouterMiddleware,
-    thunk,
-    apiMiddleware,
-    // must run after thunk because it fails with thunks
-    getStateInActions,
-    loggerMiddleware
-  )(createStore)
+  const store = createStoreWithMiddleware(rootReducer)
+  reduxRouterMiddleware.listenForReplays(store)
 
-const store = createStoreWithMiddleware(rootReducer)
-reduxRouterMiddleware.listenForReplays(store)
+  const rootElement = document.getElementById('appRoot')
 
-const rootElement = document.getElementById('appRoot')
+  // FIXME current (old) behaviour when not enough params are specified is to
+  //       reset to blank app and not even keep the project/version part of the
+  //       URL. As soon as it has the /translate part of the URL it grabs the
+  //       first doc and language in the list and goes ahead.
+  //   Should be able to do better than that.
 
-// FIXME current (old) behaviour when not enough params are specified is to
-//       reset to blank app and not even keep the project/version part of the
-//       URL. As soon as it has the /translate part of the URL it grabs the
-//       first doc and language in the list and goes ahead.
-//   Should be able to do better than that.
+  ReactDOM.render(
+    <IntlProvider locale={locale} formats={formats}>
+      <Provider store={store}>
+        <Router history={history}>
+          {/* The ** is docId, captured as params.splat by react-router. */}
+          <Route
+            path="/project/translate/:projectSlug/v/:versionSlug/**"
+            component={Root} />
+          <Route path="/*" component={NeedSlugMessage} />
+        </Router>
+      </Provider>
+    </IntlProvider>, rootElement)
+}
 
-ReactDOM.render(
-  <IntlProvider locale={locale} formats={formats}>
-    <Provider store={store}>
-      <Router history={history}>
-        {/* The ** is docId, captured as params.splat by react-router. */}
-        <Route
-          path="/project/translate/:projectSlug/v/:versionSlug/**"
-          component={Root} />
-        <Route path="/*" component={NeedSlugMessage} />
-      </Router>
-    </Provider>
-  </IntlProvider>, rootElement)
+if (window.Intl) {
+  runApp()
+} else {
+  // Intl not present, so polyfill it.
+  require.ensure([], () => {
+    // This is 'require' on purpose, do not change to 'import'
+    require('intl')
+    runApp()
+  }, 'intl-polyfill')
+}

server/zanata-frontend/src/frontend/package.json

@@ -93,6 +93,7 @@
     "file-saver": "1.3.0",
     "fs-extra": "3.0.1",
     "history": "2.1.2",
+    "intl": "1.2.5",
     "js-beautify": "1.6.4",
     "lodash": "4.13.1",
     "moment": "2.13.0",

server/zanata-frontend/src/frontend/webpack.config.js

@@ -3,7 +3,7 @@
  *
  * Cleanup needed:
  *  - This config is used for a first-pass build that is required for atomic css
- *    to work. This should be fixed so that atomic works without the extra build.
+ *   to work. This should be fixed so that atomic works without the extra build.
  *  - This outputs to a different file than the production build, but we could
  *    just use the same filename for all builds.
  */
@@ -27,7 +27,8 @@ module.exports = {
   },
   output: {
     path: join(__dirname, 'dist'),
-    filename: '[name].js'
+    filename: '[name].js',
+    chunkFilename: '[name].js'
   },
   module: {
     /* Checks for errors in syntax, and for problematic and inconsistent

server/zanata-frontend/src/frontend/webpack.prod.config.js

@@ -6,7 +6,6 @@
  */
 
 var webpack = require('webpack')
-var path = require('path')
 var merge = require('webpack-merge')
 var defaultConfig = require('./webpack.config.js')
 
@@ -16,7 +15,8 @@ module.exports = merge.smart(defaultConfig, {
   },
   cache: false,
   output: {
-    filename: '[name].min.js'
+    filename: '[name].min.js',
+    chunkFilename: '[name].min.js'
   },
   module: {
     loaders: [

server/zanata-frontend/src/frontend/yarn.lock

@@ -3954,6 +3954,10 @@ intl-relativeformat@^1.3.0:
   dependencies:
     intl-messageformat "1.3.0"
 
+intl@1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/intl/-/intl-1.2.5.tgz#82244a2190c4e419f8371f5aa34daa3420e2abde"
+
 invariant@2.x.x, invariant@^2.0.0, invariant@^2.1.0, invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"