From 06b4a32c0193b3b6912a4be52aa59b964db8e2d7 Mon Sep 17 00:00:00 2001 From: Clemens Wolff Date: Tue, 9 Apr 2019 10:04:04 -0400 Subject: [PATCH] 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 | 10 ++++++++++ app/server/package.json | 2 ++ app/server/static/js/demo/demo_mixin.js | 2 +- app/server/static/js/guideline.js | 13 +++++++------ app/server/static/js/mixin.js | 3 +-- app/server/templates/admin/guideline.html | 4 +--- .../templates/annotation/annotation_base.html | 2 -- 7 files changed, 22 insertions(+), 14 deletions(-) diff --git a/app/server/package-lock.json b/app/server/package-lock.json index d738ba69..a8ec0d7e 100644 --- a/app/server/package-lock.json +++ b/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", diff --git a/app/server/package.json b/app/server/package.json index 21dda24d..16154c49 100644 --- a/app/server/package.json +++ b/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" }, diff --git a/app/server/static/js/demo/demo_mixin.js b/app/server/static/js/demo/demo_mixin.js index d232548f..c13721a4 100644 --- a/app/server/static/js/demo/demo_mixin.js +++ b/app/server/static/js/demo/demo_mixin.js @@ -1,4 +1,4 @@ -/* global marked:readonly */ +import * as marked from 'marked'; const annotationMixin = { data() { diff --git a/app/server/static/js/guideline.js b/app/server/static/js/guideline.js index 3f5819c4..77f3a40f 100644 --- a/app/server/static/js/guideline.js +++ b/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), + }, }, }); diff --git a/app/server/static/js/mixin.js b/app/server/static/js/mixin.js index 888ed170..a3219bd6 100644 --- a/app/server/static/js/mixin.js +++ b/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) => { diff --git a/app/server/templates/admin/guideline.html b/app/server/templates/admin/guideline.html index fd26b117..91a55cf2 100644 --- a/app/server/templates/admin/guideline.html +++ b/app/server/templates/admin/guideline.html @@ -7,7 +7,7 @@ {% block content-area %}
- +
@@ -17,7 +17,5 @@
{% endblock %} {% block footer %} - - {% render_bundle 'guideline' 'js' %} {% endblock %} \ No newline at end of file diff --git a/app/server/templates/annotation/annotation_base.html b/app/server/templates/annotation/annotation_base.html index 44bbca92..3b4f1fde 100644 --- a/app/server/templates/annotation/annotation_base.html +++ b/app/server/templates/annotation/annotation_base.html @@ -2,8 +2,6 @@ {% load static %} {% block header %} - - {% endblock %} {% block navigation %} {% if user.is_superuser %}