From f1d8f2e6190bc1fbaca7d618fbeb24b502b5a80a Mon Sep 17 00:00:00 2001
From: Matteo Pagliazzi <matteopagliazzi@gmail.com>
Date: Tue, 22 Aug 2017 12:23:16 +0200
Subject: [PATCH] moment: load translations in browser, moment: only load
 necessary data, remove jquery, remove bluebird

---
 npm-shrinkwrap.json                           | 24 +++++-------------
 package.json                                  |  1 -
 webpack/config/index.js                       |  2 +-
 webpack/webpack.base.conf.js                  |  8 ++----
 website/client/.eslintrc                      |  3 ---
 .../client/components/chat/chatMessages.vue   |  3 +--
 .../components/settings/subscription.vue      |  4 ++-
 website/client/libs/encodeParams.js           |  7 ++++++
 website/client/libs/i18n.js                   | 23 ++++++++++++++++-
 website/server/controllers/api-v3/i18n.js     | 25 +++++++++++++++++--
 10 files changed, 65 insertions(+), 35 deletions(-)
 create mode 100644 website/client/libs/encodeParams.js

diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index 137bbd39465..9fd4d5fdd37 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -1,6 +1,6 @@
 {
   "name": "habitica",
-  "version": "3.110.0",
+  "version": "3.111.0",
   "dependencies": {
     "@gulp-sourcemaps/map-sources": {
       "version": "1.0.0",
@@ -2433,13 +2433,11 @@
       "version": "4.0.0",
       "from": "cross-env@>=4.0.0 <5.0.0",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-4.0.0.tgz",
-      "dev": true,
       "dependencies": {
         "is-windows": {
           "version": "1.0.1",
           "from": "is-windows@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.1.tgz"
         }
       }
     },
@@ -2447,19 +2445,16 @@
       "version": "5.1.0",
       "from": "cross-spawn@>=5.0.1 <6.0.0",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-      "dev": true,
       "dependencies": {
         "lru-cache": {
           "version": "4.1.1",
           "from": "lru-cache@>=4.0.1 <5.0.0",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz"
         },
         "which": {
           "version": "1.3.0",
           "from": "which@>=1.2.9 <2.0.0",
-          "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz"
         }
       }
     },
@@ -7385,11 +7380,6 @@
       "resolved": "https://registry.npmjs.org/jpegtran-bin/-/jpegtran-bin-3.2.0.tgz",
       "optional": true
     },
-    "jquery": {
-      "version": "3.2.1",
-      "from": "jquery@>=3.1.1 <4.0.0",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.2.1.tgz"
-    },
     "js-base64": {
       "version": "2.1.9",
       "from": "js-base64@>=2.1.9 <3.0.0",
@@ -11687,14 +11677,12 @@
     "shebang-command": {
       "version": "1.2.0",
       "from": "shebang-command@>=1.2.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz"
     },
     "shebang-regex": {
       "version": "1.0.0",
       "from": "shebang-regex@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz"
     },
     "shell-quote": {
       "version": "1.4.3",
diff --git a/package.json b/package.json
index 38ff4abea96..96f90fa1b0c 100644
--- a/package.json
+++ b/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",
diff --git a/webpack/config/index.js b/webpack/config/index.js
index 5f07ce52a8d..ee409f46e57 100644
--- a/webpack/config/index.js
+++ b/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
   },
diff --git a/webpack/webpack.base.conf.js b/webpack/webpack.base.conf.js
index 6d7a041d092..6717b9ab842 100644
--- a/webpack/webpack.base.conf.js
+++ b/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: [
diff --git a/website/client/.eslintrc b/website/client/.eslintrc
index 2a1dea094ad..124afd60365 100644
--- a/website/client/.eslintrc
+++ b/website/client/.eslintrc
@@ -6,9 +6,6 @@
   "plugins": [
     "html"
   ],
-  "globals": {
-    "$": true,
-  },
   "parser": "babel-eslint",
   "rules": {
     "strict": 0
diff --git a/website/client/components/chat/chatMessages.vue b/website/client/components/chat/chatMessages.vue
index f349291bfb4..e833fdfdc9d 100644
--- a/website/client/components/chat/chatMessages.vue
+++ b/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);
diff --git a/website/client/components/settings/subscription.vue b/website/client/components/settings/subscription.vue
index a3702b0fa06..33755d13087 100644
--- a/website/client/components/settings/subscription.vue
+++ b/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'));
diff --git a/website/client/libs/encodeParams.js b/website/client/libs/encodeParams.js
new file mode 100644
index 00000000000..ac675bfe1c6
--- /dev/null
+++ b/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('&');
+}
\ No newline at end of file
diff --git a/website/client/libs/i18n.js b/website/client/libs/i18n.js
index 699ecc0dfbc..59c947e43a3 100644
--- a/website/client/libs/i18n.js
+++ b/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) {
diff --git a/website/server/controllers/api-v3/i18n.js b/website/server/controllers/api-v3/i18n.js
index e64de53a99a..f5f5005ed80 100644
--- a/website/server/controllers/api-v3/i18n.js
+++ b/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);
   },
 };