import jquery (automatically), jquery-ui and jquery plugins

this allows webpack to handle our dependency tree for jquery and jquery-related modules, rather than requiring us to do it manually

kitsune/dashboards/jinja2/dashboards/aggregated_metrics.html

@@ -2,7 +2,7 @@
 {% from "dashboards/includes/macros.html" import localization_sidebar_nav %}
 {% from "dashboards/includes/macros.html" import product_choice_list with context %}
 {% set title = _('Aggregated Localization Metrics') %}
-{% set scripts = ('wiki', 'jqueryui', 'rickshaw', 'wiki.dashboard') %}
+{% set scripts = ('wiki', 'rickshaw', 'wiki.dashboard') %}
 {% set crumbs = [(None, title)] %}
 {% set classes = 'aggregated-metrics' %}
 

kitsune/dashboards/jinja2/dashboards/locale_metrics.html

@@ -2,7 +2,7 @@
 {% from "dashboards/includes/macros.html" import localization_sidebar_nav %}
 {% from "dashboards/includes/macros.html" import product_choice_list with context %}
 {% set title = _('[{locale}] Locale Metrics')|f(locale=current_locale) %}
-{% set scripts = ('wiki', 'jqueryui', 'rickshaw', 'wiki.dashboard') %}
+{% set scripts = ('wiki', 'rickshaw', 'wiki.dashboard') %}
 {% set crumbs = [(None, title)] %}
 {% set classes = 'locale-metrics' %}
 

kitsune/dashboards/jinja2/dashboards/localization.html

@@ -2,7 +2,7 @@
 {% from "dashboards/includes/macros.html" import print_readout, overview_section, product_choice_list, print_subscription_menu with context %}
 {% from "dashboards/includes/macros.html" import localization_sidebar_nav %}
 {% set title = _('[{locale}][{product}] Localization Dashboard')|fe(locale=current_locale, product=pgettext('DB: products.Product.title', product.title) if product else _('All Products')) %}
-{% set scripts = ('wiki', 'jqueryui', 'wiki.dashboard') %}
+{% set scripts = ('wiki', 'wiki.dashboard') %}
 {% set crumbs = [(None, title)] %}
 {% set classes = 'localization-dashboard' %}
 {# TODO: Move required dashboard scripts out of wiki.js into their own or refactor up? #}

kitsune/forums/jinja2/forums/edit_post.html

@@ -7,7 +7,7 @@
 (url('forums.threads', forum.slug), forum.name),
 (url('forums.posts', forum.slug, thread.id), thread.title),
 (None, _('Edit a post'))] %}
-{% set scripts = ('forums', 'jqueryui') %}
+{% set scripts = ('forums',) %}
 
 {% block content %}
   <div id="edit-post" class="grid_12">

kitsune/forums/jinja2/forums/new_thread.html

@@ -6,7 +6,7 @@
 {% set crumbs = [(url('forums.forums'), _('Forums')),
 (url('forums.threads', forum.slug), forum.name),
 (None, _('Create a new thread'))] %}
-{% set scripts = ('forums', 'jqueryui') %}
+{% set scripts = ('forums',) %}
 
 {% block content %}
   <div id="new-thread" class="sumo-page-section">

kitsune/forums/jinja2/forums/posts.html

@@ -11,7 +11,7 @@
 {% if posts.number > 1 %}
   {% set canonical_url = canonical_url|urlparams(page=posts.number) %}
 {% endif %}
-{% set scripts = ('forums', 'jqueryui') %}
+{% set scripts = ('forums',) %}
 
 
 {% block content %}

kitsune/kbforums/jinja2/kbforums/edit_post.html

@@ -8,7 +8,7 @@
                  (url('wiki.discuss.threads', document.slug), _('Discuss')),
                  (url('wiki.discuss.posts', document.slug, thread.id), thread.title),
                  (None, _('Edit a post'))] %}
-{% set scripts = ('forums', 'jqueryui') %}
+{% set scripts = ('forums',) %}
 
 {% block content %}
   <article id="edit-post" class="sumo-page-section">

kitsune/kbforums/jinja2/kbforums/new_thread.html

@@ -7,7 +7,7 @@
 {% set crumbs = [(document.get_absolute_url(), document.title),
                  (url('wiki.discuss.threads', document.slug), _('Discuss')),
                  (None, _('Create a new thread'))] %}
-{% set scripts = ('forums', 'jqueryui') %}
+{% set scripts = ('forums',) %}
 
 {% block content %}
   <article id="new-thread" class="sumo-page-section">

kitsune/kbforums/jinja2/kbforums/posts.html

@@ -7,7 +7,7 @@
 {% set crumbs = [(document.get_absolute_url(), document.title),
                  (url('wiki.discuss.threads', document.slug), _('Discuss')),
                  (None, thread.title)] %}
-{% set scripts = ('forums', 'jqueryui') %}
+{% set scripts = ('forums',) %}
 
 {% block side_top_top %}
   <ul id="thread-actions" class="sidebar-nav">

kitsune/kpi/jinja2/kpi/dashboard.html

@@ -3,7 +3,7 @@
 {% set classes = ('kpi-dashboard ') %}
 {% set title = _('KPI Dashboard') %}
 {% set crumbs = [(None, title)] %}
-{% set scripts = ('jqueryui', 'rickshaw', 'kpi.dashboard') %}
+{% set scripts = ('rickshaw', 'kpi.dashboard') %}
 
 {% block below_main %}
   <article id="kpi-dash" class="sumo-page-section">

kitsune/messages/jinja2/messages/base.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% from "messages/includes/macros.html" import message_tabs %}
 {% from "includes/common_macros.html" import scam_banner %}
-{% set scripts = ('messages', 'jqueryui') %}
+{% set scripts = ('messages',) %}
 
 {% block above_main %}
   {{ scam_banner() }}

kitsune/questions/jinja2/questions/base.html

@@ -1,4 +1,4 @@
 {% extends "base.html" %}
 {% if not scripts %}
-  {% set scripts = ('questions', 'jqueryui') %}
+  {% set scripts = ('questions',) %}
 {% endif %}

kitsune/questions/jinja2/questions/includes/question_editing_frame.html

@@ -14,7 +14,7 @@ we can compute the edit-title URL.
 {% from "questions/includes/aaq_macros.html" import progress_bar %}
 {% from "questions/includes/aaq_macros.html" import troubleshooting_instructions with context %}
 {% from "upload/attachments.html" import attachments_form %}
-{% set scripts = ('questions', 'jqueryui', 'questions.geo',) %}
+{% set scripts = ('questions', 'questions.geo',) %}
 
 {% set hide_aaq_link = True %}
 

kitsune/questions/jinja2/questions/metrics.html

@@ -3,7 +3,7 @@
 {% set title = _('Support Forum Metrics') %}
 {% set crumbs = [(url('questions.home'), _('Support Forums')),
                  (None, _('Metrics'))] %}
-{% set scripts = ('jqueryui', 'rickshaw', 'questions.metrics') %}
+{% set scripts = ('rickshaw', 'questions.metrics') %}
 
 {% block below_main %}
 <section class="sumo-page-section">

kitsune/search/jinja2/search/base.html

@@ -6,6 +6,6 @@
   {% set crumbs = [(None, title)] %}
 {% endif %}
 {% if not scripts %}
-  {% set scripts = ('search', 'jqueryui') %}
+  {% set scripts = ('search',) %}
 {% endif %}
 {% set hide_header_search = True %}

kitsune/sumo/static/sumo/js/ajaxpreview.js

@@ -1,3 +1,5 @@
+import "sumo/js/libs/jquery.lazyload";
+
 /*
  * Wiki content previews - ajaxified.
  */

kitsune/sumo/static/sumo/js/gallery.js

@@ -1,3 +1,6 @@
+import "sumo/js/libs/jquery.ajaxupload";
+import "sumo/js/kbox";
+
 (function($) {
   'use strict';
 

kitsune/sumo/static/sumo/js/geoip-locale.js

@@ -1,3 +1,5 @@
+import "sumo/js/libs/jquery.cookie";
+
 /* Please do not directly use this code or SUMO key. */
 /* Contact MLS team for your own credentials. */
 /* https://location.services.mozilla.com/contact */

kitsune/sumo/static/sumo/js/main.js

@@ -1,3 +1,6 @@
+import "sumo/js/libs/jquery.cookie";
+import "sumo/js/libs/jquery.placeholder";
+
 // Use a global k to share data accross JS files
 window.k = window.k || {};
 

kitsune/sumo/static/sumo/js/markup.js

@@ -1,3 +1,5 @@
+import "jquery-ui/ui/widgets/autocomplete";
+
 /*
   Marky, the markup toolbar builder
 

kitsune/sumo/static/sumo/js/messages.js

@@ -1,3 +1,5 @@
+import "sumo/js/libs/jquery.autoresize";
+
 /*
  * Make textarea in replies auto expanding.
  * Private messaging.

kitsune/sumo/static/sumo/js/questions.js

@@ -1,4 +1,6 @@
 import questionmarkIcon from "sumo/img/questions/icon.questionmark.png";
+import "sumo/js/libs/jquery.cookie";
+
 /*
 * questions.js
 * Scripts for the questions app.

kitsune/sumo/static/sumo/js/questions.metrics-dashboard.js

@@ -1,3 +1,5 @@
+import "jquery-ui/ui/widgets/datepicker";
+
 (function() {
 
   function init() {

kitsune/sumo/static/sumo/js/rickshaw_utils.js

@@ -1,3 +1,6 @@
+import "jquery-ui/ui/widgets/datepicker";
+import "jquery-ui/ui/widgets/slider";
+
 (function () {
   'use strict';
 

kitsune/sumo/static/sumo/js/search.js

@@ -1,3 +1,6 @@
+import "jquery-ui/ui/widgets/datepicker";
+import "jquery-ui/ui/widgets/tabs";
+
 $(document).ready(function() {
   // initiate tabs
   var tabs = $('#search-tabs').tabs(),

kitsune/sumo/static/sumo/js/tags.filter.js

@@ -1,3 +1,5 @@
+import "jquery-ui/ui/widgets/autocomplete";
+
 /*
  * A tag filtering form.
  */

kitsune/sumo/static/sumo/js/tags.js

@@ -1,3 +1,5 @@
+import "jquery-ui/ui/widgets/autocomplete";
+
 /*
 * tags.js
 * Scripts to support tagging.

kitsune/sumo/static/sumo/js/ui.js

@@ -1,3 +1,5 @@
+import "jquery-ui/ui/widgets/datepicker";
+
 (function($) {
   'use strict';
 

kitsune/sumo/static/sumo/js/upload.js

@@ -1,3 +1,5 @@
+import "sumo/js/libs/jquery.ajaxupload";
+
 function dialogSet(inner, title) {
   var kbox = new KBox($('<p/>').text(inner), {
     title: title,

kitsune/sumo/static/sumo/js/users.autocomplete.js

@@ -1,3 +1,5 @@
+import "sumo/js/libs/jquery.tokeninput";
+
 /*
  * users.autocomplete.js
  * A username autocomplete widget.

kitsune/sumo/static/sumo/js/wiki.dashboard.js

@@ -1,3 +1,5 @@
+import "jquery-ui/ui/widgets/datepicker";
+
 /*
  * kb dashboard chart
  */

kitsune/sumo/static/sumo/js/wiki.js

@@ -1,4 +1,10 @@
 import spinnerImg from "sumo/img/spinner.gif";
+import "sumo/js/libs/jquery.cookie";
+import "sumo/js/libs/jquery.lazyload";
+import "sumo/js/kbox";
+import "sumo/js/libs/django/prepopulate";
+import "jquery-ui/ui/widgets/datepicker";
+
 /*
  * wiki.js
  * Scripts for the wiki app.
@@ -59,18 +65,6 @@ import spinnerImg from "sumo/img/spinner.gif";
       $('.submit input').removeAttr('disabled');
     }
 
-    if ($body.is('.edit, .new')) {
-      // collapse the topics listing per product and show only one topic list
-      // // at at a time
-      // $(function () {
-      //   $('#accordion').accordion({
-      //     collapsible: true,
-      //     heightStyle: 'content',
-      //     active: false
-      //   });
-      // });
-    }
-
     if ($body.is('.translate')) {  // Translate page
       initToggleDiff();
       initTranslationDraft();

kitsune/wiki/jinja2/wiki/base.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% if not scripts %}
-  {% set scripts = ('jqueryui', 'wiki') %}
+  {% set scripts = ('wiki',) %}
 {% endif %}
 {% if product %}
   {% set search_params = {'product': product.slug} %}

kitsune/wiki/jinja2/wiki/edit.html

@@ -9,7 +9,7 @@
 {% set crumbs = [(document.get_absolute_url(), document.title),
                  (None, _('Edit Article'))] %}
 {% set classes = 'edit' %}
-{% set scripts = ('wiki', 'wiki.diff', 'wiki.editor', 'jqueryui') %}
+{% set scripts = ('wiki', 'wiki.diff', 'wiki.editor') %}
 
 {% block content %}
   <div class="user-messages">

kitsune/wiki/jinja2/wiki/history.html

@@ -1,7 +1,7 @@
 {% extends "wiki/base.html" %}
 {% from "wiki/includes/sidebar_modules.html" import document_tools with context %}
 {% from "layout/errorlist.html" import errorlist %}
-{% set scripts = ('wiki', 'jqueryui', 'rickshaw', 'wiki.history') %}
+{% set scripts = ('wiki', 'rickshaw', 'wiki.history') %}
 {% set meta = (('robots', 'noindex'),) %}
 {% set title = _('Revision History | {document}')|fe(document=document.title) %}
 {% set crumbs = [(document.get_absolute_url(), document.title),

kitsune/wiki/jinja2/wiki/new_document.html

@@ -7,7 +7,7 @@
 {# TODO: Change KB url to landing page when we have one #}
 {% set crumbs = [(None, _('New Article'))] %}
 {% set classes = 'new' %}
-{% set scripts = ('wiki', 'wiki.editor', 'jqueryui') %}
+{% set scripts = ('wiki', 'wiki.editor') %}
 
 {% block content %}
   <div class="grid_9">

kitsune/wiki/jinja2/wiki/recent_revisions.html

@@ -1,7 +1,7 @@
 {% extends "wiki/base.html" %}
 {% from "dashboards/includes/macros.html" import localization_sidebar_nav %}
 
-{% set scripts = ('jqueryui', 'wiki', 'wiki.diff') %}
+{% set scripts = ('wiki', 'wiki.diff') %}
 {% set title = _('Recent Revisions') %}
 {% set crumbs = [(None, title)] %}
 {% set meta = [('robots', 'noindex, nofollow')] %}

kitsune/wiki/jinja2/wiki/translate.html

@@ -8,7 +8,7 @@
 {% set crumbs = [(parent.get_absolute_url(), parent.title),
                  (None, _('Translate Article'))] %}
 {% set classes = 'translate' %}
-{% set scripts = ('wiki', 'wiki.diff', 'wiki.editor', 'jqueryui') %}
+{% set scripts = ('wiki', 'wiki.diff', 'wiki.editor') %}
 
 {% block content %}
   {% set language = settings.LANGUAGES_DICT[locale.lower()] %}

package-lock.json

@@ -10847,9 +10847,9 @@
       "integrity": "sha1-3Yt0J4snEC0p32Pq4oMIqM+htYM="
     },
     "jquery-ui": {
-      "version": "1.10.5",
-      "resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.10.5.tgz",
-      "integrity": "sha1-gmrtPdH4jTKudddN9IZD3EMaWBU="
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.12.1.tgz",
+      "integrity": "sha1-vLQEXI3QU5wTS8FIjN0+dop6nlE="
     },
     "js-tokens": {
       "version": "1.0.0",

package.json

@@ -45,7 +45,7 @@
     "flux": "~2.0.2",
     "fontawesome": "^4.3.0",
     "jquery": "1.11.3",
-    "jquery-ui": "~1.10.2",
+    "jquery-ui": "1.12.1",
     "modernizr": "3.3.1",
     "nunjucks": "^1.3.4",
     "react": "0.13.3",

webpack.config.js

@@ -1,3 +1,4 @@
+const webpack = require("webpack");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
 const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
@@ -43,6 +44,11 @@ module.exports = (env, argv) => {
     },
     entry: entrypoints,
     plugins: [
+      new webpack.ProvidePlugin({
+        $: "jquery",
+        jQuery: "jquery",
+        "window.jQuery": "jquery",
+      }),
       new MiniCssExtractPlugin({
         filename: dev ? "[name].css" : "[name].[contenthash].css",
       }),

webpack/entrypoints.js

@@ -3,9 +3,6 @@ const entrypoints = {
   common: [
     "sumo/js/i18n.js",
     "underscore/underscore.js",
-    "jquery",
-    "sumo/js/libs/jquery.cookie.js",
-    "sumo/js/libs/jquery.placeholder.js",
     "sumo/js/templates/macros.js",
     "sumo/js/templates/search-results-list.js",
     "sumo/js/templates/search-results.js",
@@ -48,16 +45,12 @@ const entrypoints = {
     "sumo/js/show-fx-download.js",
   ],
   community: [
-    "jquery",
     "community/js/community.js",
     "community/js/select.js",
   ],
   "community.metrics": [
     "kpi/js/kpi.browserify.js",
   ],
-  jqueryui: [
-    "sumo/js/jquery-ui-custom.js",
-  ],
   questions: [
     "sumo/js/markup.js",
     "sumo/js/ajaxvote.js",
@@ -65,12 +58,10 @@ const entrypoints = {
     "sumo/js/remote.js",
     "sumo/js/aaq.js",
     "sumo/js/questions.js",
-    "sumo/js/libs/jquery.tokeninput.js",
     "sumo/js/tags.filter.js",
     "sumo/js/tags.js",
     "sumo/js/reportabuse.js",
     "sumo/js/questions.metrics.js",
-    "sumo/js/libs/jquery.ajaxupload.js",
     "sumo/js/upload.js",
   ],
   "questions.metrics": [
@@ -93,15 +84,11 @@ const entrypoints = {
     "sumo/js/reportabuse.js",
   ],
   gallery: [
-    "sumo/js/libs/jquery.ajaxupload.js",
     "sumo/js/gallery.js",
   ],
   wiki: [
     "sumo/js/markup.js",
     "sumo/js/libs/django/urlify.js",
-    "sumo/js/libs/django/prepopulate.js",
-    "sumo/js/libs/jquery.lazyload.js",
-    "sumo/js/libs/jquery.tokeninput.js",
     "sumo/js/users.autocomplete.js",
     "sumo/js/showfor.js",
     "sumo/js/ajaxvote.js",
@@ -118,6 +105,8 @@ const entrypoints = {
   rickshaw: [
     "d3/d3.js",
     "sumo/js/libs/d3.layout.min.js",
+    "jquery-ui/ui/widgets/sortable",
+    "jquery-ui/ui/widgets/slider",
     "sumo/js/libs/rickshaw.js",
     "sumo/js/rickshaw_utils.js",
   ],
@@ -144,14 +133,11 @@ const entrypoints = {
   ],
   messages: [
     "sumo/js/markup.js",
-    "sumo/js/libs/jquery.autoresize.js",
-    "sumo/js/libs/jquery.tokeninput.js",
     "sumo/js/users.autocomplete.js",
     "sumo/js/ajaxpreview.js",
     "sumo/js/messages.js",
   ],
   groups: [
-    "sumo/js/libs/jquery.tokeninput.js",
     "sumo/js/users.autocomplete.js",
     "sumo/js/markup.js",
     "sumo/js/groups.js",

webpack/global-expose-rules.js

@@ -28,23 +28,6 @@ module.exports = [
     "URLify"
   ),
   exportAndExpose("../kitsune/sumo/static/sumo/js/upload.js", "dialogSet"),
-  // making jquery and jquery-ui play nice, and exposed globally is a bit difficult, but this works:
-  {
-    test: require.resolve("jquery"),
-    loader: "exports-loader",
-    options: {
-      type: "module",
-      exports: "default $",
-    },
-  },
-  {
-    test: require.resolve("../kitsune/sumo/static/sumo/js/jquery-ui-custom.js"),
-    loader: "exports-loader",
-    options: {
-      type: "module",
-      exports: "default $",
-    },
-  },
   // this library attempts to expose a bunch of stuff globally by adding them to `this`, imports-loader makes that work:
   {
     test: require.resolve(