moment: load translations in browser, moment: only load necessary dat…

…a, remove jquery, remove bluebird

package.json

@@ -75,7 +75,6 @@
     "in-app-purchase": "^1.1.6",
     "intro.js": "^2.6.0",
     "jade": "~1.11.0",
-    "jquery": "^3.1.1",
     "js2xmlparser": "~1.0.0",
     "lodash": "^4.17.4",
     "merge-stream": "^1.0.0",

webpack/config/index.js

@@ -21,7 +21,7 @@ module.exports = {
     productionGzipExtensions: ['js', 'css'],
     // Run the build command with an extra argument to
     // View the bundle analyzer report after build finishes:
-    // `npm run build --report`
+    // `npm run client:build --report`
     // Set to `true` or `false` to always turn it on or off
     bundleAnalyzerReport: process.env.npm_config_report, // eslint-disable-line no-process-env
   },

webpack/webpack.base.conf.js

@@ -3,8 +3,8 @@
 const path = require('path');
 const config = require('./config');
 const utils = require('./utils');
-const projectRoot = path.resolve(__dirname, '../');
 const webpack = require('webpack');
+const projectRoot = path.resolve(__dirname, '../');
 const autoprefixer = require('autoprefixer');
 const postcssEasyImport = require('postcss-easy-import');
 const IS_PROD = process.env.NODE_ENV === 'production';
@@ -36,7 +36,6 @@ const baseConfig = {
       path.join(projectRoot, 'node_modules'),
     ],
     alias: {
-      jquery: 'jquery/src/jquery',
       website: path.resolve(projectRoot, 'website'),
       common: path.resolve(projectRoot, 'website/common'),
       client: path.resolve(projectRoot, 'website/client'),
@@ -45,10 +44,7 @@ const baseConfig = {
     },
   },
   plugins: [
-    new webpack.ProvidePlugin({
-      $: 'jquery',
-      jQuery: 'jquery',
-    }),
+    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(NOT_EXISTING)$/),
   ],
   module: {
     rules: [

website/client/.eslintrc

@@ -6,9 +6,6 @@
   "plugins": [
     "html"
   ],
-  "globals": {
-    "$": true,
-  },
   "parser": "babel-eslint",
   "rules": {
     "strict": 0

website/client/components/chat/chatMessages.vue

@@ -125,7 +125,6 @@
 
 <script>
 import axios from 'axios';
-import Bluebird from 'bluebird';
 import moment from 'moment';
 import cloneDeep from 'lodash/cloneDeep';
 import { mapState } from 'client/libs/store';
@@ -203,7 +202,7 @@ export default {
         }
       });
 
-      let results = await Bluebird.all(promises);
+      let results = await Promise.all(promises);
       results.forEach(result => {
         let userData = result.data.data;
         this.$set(this.cachedProfileData, userData._id, userData);

website/client/components/settings/subscription.vue

@@ -112,12 +112,14 @@ import filter from 'lodash/filter';
 import sortBy from 'lodash/sortBy';
 import min from 'lodash/min';
 import { mapState } from 'client/libs/store';
+import encodeParams from 'client/libs/encodeParams';
 
 import subscriptionBlocks from '../../../common/script/content/subscriptionBlocks';
 import planGemLimits from '../../../common/script/libs/planGemLimits';
 import amazonPaymentsModal from '../payments/amazonModal';
 import paymentsMixin from '../../mixins/payments';
 
+// TODO
 const STRIPE_PUB_KEY = 'pk_test_6pRNASCoBOKtIshFeQd4XMUh';
 
 export default {
@@ -314,7 +316,7 @@ export default {
         queryParams.groupId = group._id;
       }
 
-      let cancelUrl = `/${paymentMethod}/subscribe/cancel?${$.param(queryParams)}`;
+      let cancelUrl = `/${paymentMethod}/subscribe/cancel?${encodeParams(queryParams)}`;
       await axios.get(cancelUrl);
       //  Success
       alert(this.$t('paypalCanceled'));

website/client/libs/encodeParams.js

@@ -0,0 +1,7 @@
+// Equivalent of jQuery's param
+
+export default function (params) {
+  Object.keys(params).map((k) => {
+    return `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`;
+  }).join('&');
+}

website/client/libs/i18n.js

@@ -2,8 +2,29 @@
 // Can be anywhere inside vue as 'this.$t' or '$t' in templates.
 
 import i18n from 'common/script/i18n';
+import moment from 'moment';
 
-i18n.strings = window.i18n.strings;
+const i18nData = window.i18n;
+
+if (i18nData) {
+  // window.i18n is injected by the server
+  i18n.strings = i18nData.strings;
+  const language = i18nData.language;
+
+  // Load Moment.js locale
+  if (language && i18nData.momentLang && language.momentLangCode) {
+    // Make moment available under `window` so that the locale can be set
+    window.moment = moment;
+
+    // Execute the script and set the locale
+    const head = document.getElementsByTagName('head')[0];
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.text = i18nData.momentLang;
+    head.appendChild(script);
+    moment.locale(language.momentLangCode);
+  }
+}
 
 export default {
   install (Vue) {

website/server/controllers/api-v3/i18n.js

@@ -1,7 +1,26 @@
-import * as i18n from '../../libs/i18n';
+import {
+  translations,
+  momentLangs,
+  availableLanguages,
+} from '../../libs/i18n';
+import _ from 'lodash';
 
 const api = {};
 
+function geti18nBrowserScript (language) {
+  const langCode = language.code;
+
+  return `(function () {
+    if (!window) return;
+    window.i18n = ${JSON.stringify({
+      availableLanguages,
+      language,
+      strings: translations[langCode],
+      momentLang: momentLangs[language.momentLangCode],
+    })};
+  })()`;
+}
+
 /**
  * @api {get} /api/v3/i18n/browser-script Returns a JS script to make all the i18n strings available in the browser
  * under window.i18n.strings
@@ -13,11 +32,13 @@ api.geti18nBrowserScript = {
   method: 'GET',
   url: '/i18n/browser-script',
   async handler (req, res) {
+    const language = _.find(availableLanguages, {code: req.language});
+
     res.set({
       'Content-Type': 'application/javascript',
     });
 
-    const jsonResString = `window.i18n = {strings: ${JSON.stringify(i18n.translations[req.language])}}`;
+    const jsonResString = geti18nBrowserScript(language);
     res.status(200).send(jsonResString);
   },
 };