Move from script tags to Javascript imports

Previously some of the Vue code relied on script tags being present in
the host application, to include dependencies such as lodash or marked.
This is not ideal for encapsulation since it means the Vue components
are not self-contained, makes testing harder, etc.

As such, this change replaces the script tag includes with ES6 imports.

Additionally, the lodash dependency (which was used only for debouncing)
is replaced in this change with the vue-debounce library which offers a
debouncing directive. This simplifies the code and avoids potential
gotchas with the this context in the debounced function.

app/server/package-lock.json

@@ -3888,6 +3888,11 @@
         "object-visit": "1.0.1"
       }
     },
+    "marked": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.6.tgz",
+      "integrity": "sha1-ssbGGPzOzk74bE/Gy4p8v1rtqNc="
+    },
     "md5.js": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz",
@@ -6194,6 +6199,11 @@
       "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-3.4.0.tgz",
       "integrity": "sha512-uikAXl66g49rawH7Uto3gKh/7vxflcd5xyYbnQVGKSYEh9VI9JGMZ1KNPAEr+8ViRd2FX1hPDVevKBONK6v1fw=="
     },
+    "vue-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vue-debounce/-/vue-debounce-1.1.0.tgz",
+      "integrity": "sha512-hgxb9/ydNODMzUyoKesIMVmfWC6pZW/yqgO4IOcRgX/ELxWj+xJyk34dNtcATTyIumSWUNtnZmQeySDAzo8y3A=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz",

app/server/package.json

@@ -13,8 +13,10 @@
   "dependencies": {
     "axios": "^0.18.0",
     "chart.js": "^2.7.2",
+    "marked": "^0.3.6",
     "vue": "^2.5.16",
     "vue-chartjs": "^3.4.0",
+    "vue-debounce": "^1.1.0",
     "vue-loader": "^15.2.4",
     "vue-shortkey": "^3.1.6"
   },

app/server/static/js/demo/demo_mixin.js

@@ -1,4 +1,4 @@
-/* global marked:readonly */
+import * as marked from 'marked';
 
 const annotationMixin = {
   data() {

app/server/static/js/guideline.js

@@ -1,9 +1,10 @@
-/* global _:readonly */
-/* global marked:readonly */
-
+import * as marked from 'marked';
 import Vue from 'vue';
+import vueDebounce from 'vue-debounce';
 import HTTP from './http';
 
+Vue.use(vueDebounce);
+
 const vm = new Vue({ // eslint-disable-line no-unused-vars
   el: '#mail-app',
   data: {
@@ -28,15 +29,15 @@ const vm = new Vue({ // eslint-disable-line no-unused-vars
   },
 
   methods: {
-    update: _.debounce((e) => {
-      this.input = e.target.value;
+    update(value) {
+      this.input = value;
       const payload = {
         guideline: this.input,
       };
       HTTP.patch('', payload).then((response) => {
         this.project = response.data;
       });
-    }, 300),
+    },
   },
 
 });

app/server/static/js/mixin.js

@@ -1,5 +1,4 @@
-/* global marked:readonly */
-
+import * as marked from 'marked';
 import HTTP from './http';
 
 const getOffsetFromUrl = (url) => {

app/server/templates/admin/guideline.html

@@ -7,7 +7,7 @@
 {% block content-area %}
 <div id="editor" class="columns is-gapless">
   <div class="column is-6">
-    <textarea class="editorMarkdown_textarea" :value="input" @input="update"></textarea>
+    <textarea class="editorMarkdown_textarea" :value="input" v-debounce="update"></textarea>
   </div>
   <div class="column is-6 has-background-white" style="border-right: 1px solid #dbdbdb;border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb">
     <div class="content pt20 pb20 pr20 pl20" style="line-height: 150%">
@@ -17,7 +17,5 @@
 </div>
 {% endblock %}
 {% block footer %}
-<script src="https://unpkg.com/marked@0.3.6"></script>
-<script src="https://unpkg.com/lodash@4.16.0"></script>
 {% render_bundle 'guideline' 'js' %}
 {% endblock %}

app/server/templates/annotation/annotation_base.html

@@ -2,8 +2,6 @@
 {% load static %}
 {% block header %}
 <link rel="stylesheet" href="{% static 'css/annotation.css' %}">
-<script src="https://unpkg.com/marked@0.3.6/lib/marked.js"></script>
-<script src="https://unpkg.com/lodash@4.16.0/lodash.js"></script>
 {% endblock %}
 {% block navigation %}
 {% if user.is_superuser %}