move vue and vue-calendar-heatmap to webpack (#10188)

- unvendor vue and vue-calendar-heatmap
- remove unused moment.js leftover from previous heatmap version
- ensure webpack loads the full version of vue
- fix vue devmode warning related to 'searchLimit' type

I wanted to name the chunk heatmap.js but adblockers don't like that
filename [1].

[1] 3899d5dff3/easyprivacy/easyprivacy_general.txt (L2095)

.eslintrc

@@ -23,7 +23,6 @@ globals:
   emojify: false
   SimpleMDE: false
   u2fApi: false
-  Vue: false
 
 rules:
   arrow-body-style: [0]

package-lock.json

@@ -10255,6 +10255,11 @@
         "irregular-plurals": "^2.0.0"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -15033,6 +15038,16 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "optional": true
     },
+    "v-tooltip": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.0.3.tgz",
+      "integrity": "sha512-KZZY3s+dcijzZmV2qoDH4rYmjMZ9YKGBVoUznZKQX0e3c2GjpJm3Sldzz8HHH2Ud87JqhZPB4+4gyKZ6m98cKQ==",
+      "requires": {
+        "lodash": "^4.17.15",
+        "popper.js": "^1.16.0",
+        "vue-resize": "^0.4.5"
+      }
+    },
     "v8-compile-cache": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz",
@@ -15217,6 +15232,21 @@
         "core-js": "^3.6.1",
         "gsap": "^3.0.4",
         "vue": "^2.6.11"
+      },
+      "dependencies": {
+        "vue": {
+          "version": "2.6.11",
+          "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
+          "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
+        }
+      }
+    },
+    "vue-calendar-heatmap": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/vue-calendar-heatmap/-/vue-calendar-heatmap-0.8.4.tgz",
+      "integrity": "sha512-Hx7OYBY1ghUIxKmFIIzpLT4XlcrwnI3WpadJEj/sKj5quoxwEuSDKmf94v0zWOHeQ/2CrB1G66geaKR/O56+OQ==",
+      "requires": {
+        "v-tooltip": "^2.0.0-rc.32"
       }
     },
     "vue-hot-reload-api": {
@@ -15238,6 +15268,11 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-resize": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
+      "integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -13,7 +13,9 @@
     "jquery-migrate": "3.1.0",
     "jquery.are-you-sure": "1.9.0",
     "swagger-ui": "3.25.0",
-    "vue-bar-graph": "1.2.0"
+    "vue": "2.6.11",
+    "vue-bar-graph": "1.2.0",
+    "vue-calendar-heatmap": "0.8.4"
   },
   "devDependencies": {
     "@babel/core": "7.8.4",

public/vendor/librejs.html

@@ -51,9 +51,9 @@
           <td><a href="https://github.com/bluef/gitgraph.js">gitgraph.js-latest</a></td>
         </tr>
         <tr>
-          <td><a href="./plugins/vue/vue.min.js">vue.min.js</a></td>
+          <td><a href="../js/index.js">vue</a></td>
           <td><a href="https://github.com/vuejs/vue/blob/dev/LICENSE">Expat</a></td>
-          <td><a href="https://github.com/vuejs/vue/archive/v2.6.6.tar.gz">vue.js-v2.6.6.tar.gz</a></td>
+          <td><a href="https://github.com/vuejs/vue/archive/v2.6.11.tar.gz">vue.js-v2.6.11.tar.gz</a></td>
         </tr>
         <tr>
           <td><a href="./plugins/emojify/emojify.custom.js">emojify.custom.js</a></td>
@@ -131,14 +131,9 @@
           <td><a href="https://github.com/swagger-api/swagger-ui/archive/v3.22.1.tar.gz">swagger-ui-v3.22.1.tar.gz</a></td>
         </tr>
         <tr>
-          <td><a href="./plugins/vue-calendar-heatmap/">vue-calendar-heatmap</a></td>
+          <td><a href="../js/userheatmap.js">vue-calendar-heatmap</a></td>
           <td><a href="https://github.com/WildCodeSchool/vue-calendar-heatmap/blob/master/README.md">MIT</a></td>
-          <td><a href="https://github.com/WildCodeSchool/vue-calendar-heatmap/archive/master.zip">7f48b20.zip</a></td>
-        </tr>
-        <tr>
-          <td><a href="./plugins/moment/">moment.js</a></td>
-          <td><a href="https://github.com/moment/moment/blob/develop/LICENSE">MIT</a></td>
-          <td><a href="https://github.com/moment/moment/archive/2.22.2.tar.gz">0.4.1.tar.gz</a></td>
+          <td><a href="https://github.com/WildCodeSchool/vue-calendar-heatmap/archive/master.zip">master.zip</a></td>
         </tr>
       </tbody>
     </table>

public/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.css

@@ -1,112 +0,0 @@
-
-svg.vch__wrapper[data-v-a9cfea66] {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  line-height: 10px;
-}
-svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9cfea66] {
-  font-size: 10px;
-}
-svg.vch__wrapper .vch__days__labels__wrapper text.vch__day__label[data-v-a9cfea66],
-svg.vch__wrapper .vch__legend__wrapper text[data-v-a9cfea66] {
-  font-size: 9px;
-}
-svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9cfea66],
-svg.vch__wrapper .vch__days__labels__wrapper text.vch__day__label[data-v-a9cfea66],
-svg.vch__wrapper .vch__legend__wrapper text[data-v-a9cfea66] {
-  fill: #767676;
-}
-svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover {
-  stroke: #555;
-  stroke-width: 1px;
-}
-svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:focus {
-  outline: none;
-}
-
-.vue-tooltip-theme.tooltip {
-  display: block !important;
-  z-index: 10000;
-}
-.vue-tooltip-theme.tooltip .tooltip-inner {
-  background: rgba(0, 0, 0, .7);
-  border-radius: 3px;
-  color: #ebedf0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  font-size: 12px;
-  line-height: 16px;
-  padding: 14px 10px;
-}
-.vue-tooltip-theme.tooltip .tooltip-inner b {
-  color: white;
-}
-.vue-tooltip-theme.tooltip .tooltip-arrow {
-  width: 0;
-  height: 0;
-  border-style: solid;
-  position: absolute;
-  margin: 5px;
-  border-color: black;
-  z-index: 1;
-}
-.vue-tooltip-theme.tooltip[x-placement^="top"] {
-  margin-bottom: 5px;
-}
-.vue-tooltip-theme.tooltip[x-placement^="top"] .tooltip-arrow {
-  border-width: 5px 5px 0 5px;
-  border-left-color: transparent !important;
-  border-right-color: transparent !important;
-  border-bottom-color: transparent !important;
-  bottom: -5px;
-  left: calc(50% - 5px);
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.vue-tooltip-theme.tooltip[x-placement^="bottom"] {
-  margin-top: 5px;
-}
-.vue-tooltip-theme.tooltip[x-placement^="bottom"] .tooltip-arrow {
-  border-width: 0 5px 5px 5px;
-  border-left-color: transparent !important;
-  border-right-color: transparent !important;
-  border-top-color: transparent !important;
-  top: -5px;
-  left: calc(50% - 5px);
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.vue-tooltip-theme.tooltip[x-placement^="right"] {
-  margin-left: 5px;
-}
-.vue-tooltip-theme.tooltip[x-placement^="right"] .tooltip-arrow {
-  border-width: 5px 5px 5px 0;
-  border-left-color: transparent !important;
-  border-top-color: transparent !important;
-  border-bottom-color: transparent !important;
-  left: -5px;
-  top: calc(50% - 5px);
-  margin-left: 0;
-  margin-right: 0;
-}
-.vue-tooltip-theme.tooltip[x-placement^="left"] {
-  margin-right: 5px;
-}
-.vue-tooltip-theme.tooltip[x-placement^="left"] .tooltip-arrow {
-  border-width: 5px 0 5px 5px;
-  border-top-color: transparent !important;
-  border-right-color: transparent !important;
-  border-bottom-color: transparent !important;
-  right: -5px;
-  top: calc(50% - 5px);
-  margin-left: 0;
-  margin-right: 0;
-}
-.vue-tooltip-theme.tooltip[aria-hidden='true'] {
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity .15s, visibility .15s;
-}
-.vue-tooltip-theme.tooltip[aria-hidden='false'] {
-  visibility: visible;
-  opacity: 1;
-  transition: opacity .15s;
-}

public/vendor/plugins/vue/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2013-present, Yuxi (Evan) You
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

templates/base/footer.tmpl

@@ -108,16 +108,8 @@
 	</script>
 {{end}}
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/emojify/emojify.custom.js"></script>
-	<script src="{{StaticUrlPrefix}}/vendor/plugins/vue/vue.min.js"></script>
 	<script src="{{StaticUrlPrefix}}/fomantic/semantic.min.js?v={{MD5 AppVer}}"></script>
 	<script src="{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}"></script>
-{{if .EnableHeatmap}}
-	<script src="{{StaticUrlPrefix}}/vendor/plugins/moment/moment.min.js" charset="utf-8"></script>
-	<script src="{{StaticUrlPrefix}}/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.browser.js" charset="utf-8"></script>
-	<script type="text/javascript">
-		window.initHeatmap('user-heatmap', '{{.HeatmapUser}}');
-	</script>
-{{end}}
 {{template "custom/footer" .}}
 </body>
 </html>

templates/base/head.tmpl

@@ -93,6 +93,8 @@
 			SimpleMDE: {{if .RequireSimpleMDE}}true{{else}}false{{end}},
 			Tribute: {{if .RequireTribute}}true{{else}}false{{end}},
 			U2F: {{if .RequireU2F}}true{{else}}false{{end}},
+			Heatmap: {{if .EnableHeatmap}}true{{else}}false{{end}},
+			heatmapUser: {{if .HeatmapUser}}'{{.HeatmapUser}}'{{else}}null{{end}},
 		};
 	</script>
 	<link rel="shortcut icon" href="{{StaticUrlPrefix}}/img/favicon.png">
@@ -124,9 +126,6 @@
 {{end}}
 {{if .RequireDropzone}}
 	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.css">
-{{end}}
-{{if .EnableHeatmap}}
-	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.css">
 {{end}}
 	<style class="list-search-style"></style>
 {{if .PageIsUserProfile}}

templates/pwa/serviceworker_js.tmpl

@@ -8,6 +8,7 @@ var urlsToCache = [
   '{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/js/jquery.js?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/js/swagger.js?v={{MD5 AppVer}}',
+  '{{StaticUrlPrefix}}/js/userheatmap.js',
   '{{StaticUrlPrefix}}/vendor/plugins/codemirror/addon/mode/loadmode.js',
   '{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js',
   '{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.js',
@@ -15,11 +16,11 @@ var urlsToCache = [
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.js',
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js',
   '{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.js',
-  '{{StaticUrlPrefix}}/vendor/plugins/vue/vue.min.js',
 
   // css
   '{{StaticUrlPrefix}}/css/index.css?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/css/swagger.css?v={{MD5 AppVer}}',
+  '{{StaticUrlPrefix}}/css/userheatmap.css',
   '{{StaticUrlPrefix}}/fomantic/semantic.min.css?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/vendor/assets/font-awesome/css/font-awesome.min.css',
   '{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.css',

web_src/js/features/userHeatmap.js

@@ -0,0 +1,98 @@
+import Vue from 'vue';
+
+const { AppSubUrl, heatmapUser } = window.config;
+
+export default async function initHeatmap() {
+  const el = document.getElementById('user-heatmap');
+  if (!el) return;
+
+  const { CalendarHeatmap } = await import(/* webpackChunkName: "userheatmap" */'vue-calendar-heatmap');
+  Vue.component('calendarHeatmap', CalendarHeatmap);
+
+  const vueDelimeters = ['${', '}'];
+
+  Vue.component('activity-heatmap', {
+    delimiters: vueDelimeters,
+
+    props: {
+      user: {
+        type: String,
+        required: true
+      },
+      suburl: {
+        type: String,
+        required: true
+      },
+      locale: {
+        type: Object,
+        required: true
+      }
+    },
+
+    data() {
+      return {
+        isLoading: true,
+        colorRange: [],
+        endDate: null,
+        values: [],
+        totalContributions: 0,
+      };
+    },
+
+    mounted() {
+      this.colorRange = [
+        this.getColor(0),
+        this.getColor(1),
+        this.getColor(2),
+        this.getColor(3),
+        this.getColor(4),
+        this.getColor(5)
+      ];
+      this.endDate = new Date();
+      this.loadHeatmap(this.user);
+    },
+
+    methods: {
+      loadHeatmap(userName) {
+        const self = this;
+        $.get(`${this.suburl}/api/v1/users/${userName}/heatmap`, (chartRawData) => {
+          const chartData = [];
+          for (let i = 0; i < chartRawData.length; i++) {
+            self.totalContributions += chartRawData[i].contributions;
+            chartData[i] = { date: new Date(chartRawData[i].timestamp * 1000), count: chartRawData[i].contributions };
+          }
+          self.values = chartData;
+          self.isLoading = false;
+        });
+      },
+
+      getColor(idx) {
+        const el = document.createElement('div');
+        el.className = `heatmap-color-${idx}`;
+        document.body.appendChild(el);
+
+        const color = getComputedStyle(el).backgroundColor;
+
+        document.body.removeChild(el);
+
+        return color;
+      }
+    },
+
+    template: '<div><div v-show="isLoading"><slot name="loading"></slot></div><h4 class="total-contributions" v-if="!isLoading"><span v-html="totalContributions"></span> total contributions in the last 12 months</h4><calendar-heatmap v-show="!isLoading" :locale="locale" :no-data-text="locale.no_contributions" :tooltip-unit="locale.contributions" :end-date="endDate" :values="values" :range-color="colorRange"/></div>'
+  });
+
+  new Vue({
+    delimiters: vueDelimeters,
+    el,
+
+    data: {
+      suburl: AppSubUrl,
+      heatmapUser,
+      locale: {
+        contributions: 'contributions',
+        no_contributions: 'No contributions',
+      },
+    },
+  });
+}

web_src/js/index.js

@@ -1,10 +1,12 @@
 /* globals wipPrefixes, issuesTribute, emojiTribute */
-/* exported timeAddManual, toggleStopwatch, cancelStopwatch, initHeatmap */
+/* exported timeAddManual, toggleStopwatch, cancelStopwatch */
 /* exported toggleDeadlineForm, setDeadline, updateDeadline, deleteDependencyModal, cancelCodeComment, onOAuthLoginClick */
 
-import 'jquery.are-you-sure';
 import './publicPath.js';
 import './polyfills.js';
+
+import Vue from 'vue';
+import 'jquery.are-you-sure';
 import './vendor/semanticDropdown.js';
 import { svg } from './utils.js';
 
@@ -12,6 +14,7 @@ import initContextPopups from './features/contextPopup.js';
 import initHighlight from './features/highlight.js';
 import initGitGraph from './features/gitGraph.js';
 import initClipboard from './features/clipboard.js';
+import initUserHeatmap from './features/userHeatmap.js';
 
 import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
 
@@ -2612,6 +2615,7 @@ $(document).ready(async () => {
     initHighlight(),
     initGitGraph(),
     initClipboard(),
+    initUserHeatmap(),
   ]);
 });
 
@@ -2917,7 +2921,7 @@ function initVueApp() {
     delimiters: ['${', '}'],
     el,
     data: {
-      searchLimit: (document.querySelector('meta[name=_search_limit]') || {}).content,
+      searchLimit: Number((document.querySelector('meta[name=_search_limit]') || {}).content),
       suburl: AppSubUrl,
       uid: Number((document.querySelector('meta[name=_context_uid]') || {}).content),
       activityTopAuthors: window.ActivityTopAuthors || [],
@@ -2945,102 +2949,6 @@ window.cancelStopwatch = function () {
   $('#cancel_stopwatch_form').submit();
 };
 
-window.initHeatmap = function (appElementId, heatmapUser, locale) {
-  const el = document.getElementById(appElementId);
-  if (!el) {
-    return;
-  }
-
-  locale = locale || {};
-
-  locale.contributions = locale.contributions || 'contributions';
-  locale.no_contributions = locale.no_contributions || 'No contributions';
-
-  const vueDelimeters = ['${', '}'];
-
-  Vue.component('activity-heatmap', {
-    delimiters: vueDelimeters,
-
-    props: {
-      user: {
-        type: String,
-        required: true
-      },
-      suburl: {
-        type: String,
-        required: true
-      },
-      locale: {
-        type: Object,
-        required: true
-      }
-    },
-
-    data() {
-      return {
-        isLoading: true,
-        colorRange: [],
-        endDate: null,
-        values: [],
-        totalContributions: 0,
-      };
-    },
-
-    mounted() {
-      this.colorRange = [
-        this.getColor(0),
-        this.getColor(1),
-        this.getColor(2),
-        this.getColor(3),
-        this.getColor(4),
-        this.getColor(5)
-      ];
-      this.endDate = new Date();
-      this.loadHeatmap(this.user);
-    },
-
-    methods: {
-      loadHeatmap(userName) {
-        const self = this;
-        $.get(`${this.suburl}/api/v1/users/${userName}/heatmap`, (chartRawData) => {
-          const chartData = [];
-          for (let i = 0; i < chartRawData.length; i++) {
-            self.totalContributions += chartRawData[i].contributions;
-            chartData[i] = { date: new Date(chartRawData[i].timestamp * 1000), count: chartRawData[i].contributions };
-          }
-          self.values = chartData;
-          self.isLoading = false;
-        });
-      },
-
-      getColor(idx) {
-        const el = document.createElement('div');
-        el.className = `heatmap-color-${idx}`;
-        document.body.appendChild(el);
-
-        const color = getComputedStyle(el).backgroundColor;
-
-        document.body.removeChild(el);
-
-        return color;
-      }
-    },
-
-    template: '<div><div v-show="isLoading"><slot name="loading"></slot></div><h4 class="total-contributions" v-if="!isLoading"><span v-html="totalContributions"></span> total contributions in the last 12 months</h4><calendar-heatmap v-show="!isLoading" :locale="locale" :no-data-text="locale.no_contributions" :tooltip-unit="locale.contributions" :end-date="endDate" :values="values" :range-color="colorRange" />'
-  });
-
-  new Vue({
-    delimiters: vueDelimeters,
-    el,
-
-    data: {
-      suburl: AppSubUrl,
-      heatmapUser,
-      locale
-    },
-  });
-};
-
 function initFilterBranchTagDropdown(selector) {
   $(selector).each(function () {
     const $dropdown = $(this);

webpack.config.js

@@ -204,6 +204,9 @@ module.exports = {
   },
   resolve: {
     symlinks: false,
+    alias: {
+      vue$: 'vue/dist/vue.esm.js', // needed because vue's default export is the runtime only
+    },
   },
   watchOptions: {
     ignored: [