Handle issues with JQuery in Studio and LMS

LEARNER-1341

cms/envs/common.py

@@ -600,7 +600,13 @@ STATICFILES_FINDERS = [
 
 # Don't use compression by default
 PIPELINE_CSS_COMPRESSOR = None
-PIPELINE_JS_COMPRESSOR = None
+PIPELINE_JS_COMPRESSOR = 'pipeline.compressors.uglifyjs.UglifyJSCompressor'
+
+# Don't wrap JavaScript as there is code that depends upon updating the global namespace
+PIPELINE_DISABLE_WRAPPER = True
+
+# Specify the UglifyJS binary to use
+PIPELINE_UGLIFYJS_BINARY = 'node_modules/.bin/uglifyjs'
 
 from openedx.core.lib.rooted_paths import rooted_glob
 
@@ -675,9 +681,34 @@ PIPELINE_CSS = {
     },
 }
 
+base_vendor_js = [
+    'js/src/utility.js',
+    'js/src/logger.js',
+    'common/js/vendor/jquery.js',
+    'common/js/vendor/jquery-migrate.js',
+    'js/vendor/jquery.cookie.js',
+    'js/vendor/url.min.js',
+    'common/js/vendor/underscore.js',
+    'common/js/vendor/underscore.string.js',
+    'common/js/vendor/backbone.js',
+    'js/vendor/URI.min.js',
+
+    # Make some edX UI Toolkit utilities available in the global "edx" namespace
+    'edx-ui-toolkit/js/utils/global-loader.js',
+    'edx-ui-toolkit/js/utils/string-utils.js',
+    'edx-ui-toolkit/js/utils/html-utils.js',
+
+    # Finally load RequireJS
+    'common/js/vendor/require.js'
+]
+
 # test_order: Determines the position of this chunk of javascript on
 # the jasmine test page
 PIPELINE_JS = {
+    'base_vendor': {
+        'source_filenames': base_vendor_js,
+        'output_filename': 'js/cms-base-vendor.js',
+    },
     'module-js': {
         'source_filenames': (
             rooted_glob(COMMON_ROOT / 'static/', 'xmodule/descriptors/js/*.js') +
@@ -738,23 +769,9 @@ REQUIRE_BUILD_PROFILE = "cms/js/build.js"
 # The name of the require.js script used by your project, relative to REQUIRE_BASE_URL.
 REQUIRE_JS = "js/vendor/requiresjs/require.js"
 
-# A dictionary of standalone modules to build with almond.js.
-REQUIRE_STANDALONE_MODULES = {}
-
 # Whether to run django-require in debug mode.
 REQUIRE_DEBUG = False
 
-# A tuple of files to exclude from the compilation result of r.js.
-REQUIRE_EXCLUDE = ("build.txt",)
-
-# The execution environment in which to run r.js: auto, node or rhino.
-# auto will autodetect the environment and make use of node if available and
-# rhino if not.
-# It can also be a path to a custom class that subclasses
-# require.environments.Environment and defines some "args" function that
-# returns a list with the command arguments to execute.
-REQUIRE_ENVIRONMENT = "node"
-
 ########################## DJANGO WEBPACK LOADER ##############################
 
 WEBPACK_LOADER = {

cms/static/cms/js/build.js

 (function() {
     'use strict';
-    var commonLibrariesPath = 'common/js/common_libraries';
-
-    var getModule = function(moduleName, excludeCommonDeps) {
-        var module = {
-            name: moduleName
-        };
-
-        if (excludeCommonDeps) {
-            module.exclude = [commonLibrariesPath];
-        }
-
-        return module;
-    };
 
     var getModulesList = function(modules) {
-        var result = [getModule(commonLibrariesPath)];
-        return result.concat(modules.map(function(moduleName) {
-            return getModule(moduleName, true);
-        }));
+        return modules.map(function(moduleName) {
+            return {name: moduleName};
+        });
     };
 
-
     var jsOptimize = process.env.REQUIRE_BUILD_PROFILE_OPTIMIZE !== undefined ?
         process.env.REQUIRE_BUILD_PROFILE_OPTIMIZE : 'uglify2';
 
@@ -77,10 +62,23 @@
          * file should be skipped because it has no dependencies.
          */
         paths: {
-            'gettext': 'empty:',
-            'xmodule': 'empty:',
-            'mathjax': 'empty:',
-            'youtube': 'empty:'
+            backbone: 'empty:',
+            gettext: 'empty:',
+            jquery: 'empty:',
+            'jquery.cookie': 'empty:',
+            'jquery-migrate': 'empty:',
+            logger: 'empty:',
+            mathjax: 'empty:',
+            underscore: 'empty:',
+            'underscore.string': 'empty:',
+            URI: 'empty:',
+            utility: 'empty:',
+            xmodule: 'empty:',
+            youtube: 'empty:',
+
+            // Don't bundle UI Toolkit helpers as they are loaded into the "edx" namespace
+            'edx-ui-toolkit/js/utils/html-utils': 'empty:',
+            'edx-ui-toolkit/js/utils/string-utils': 'empty:'
         },
 
         /**

cms/static/cms/js/require-config.js

 /* globals _, requirejs */
-/* eslint-disable quote-props */
+/* eslint-disable quote-props, no-console, no-plusplus */
 
 (function(require, define) {
     'use strict';
 
+    var defineDependency, librarySetup;
+
+    // We do not wish to bundle common libraries (that may also be used by non-RequireJS code on the page
+    // into the optimized files. Therefore load these libraries through script tags and explicitly define them.
+    // Note that when the optimizer executes this code, window will not be defined.
     if (window) {
-        // MathJax Fast Preview was introduced in 2.5. However, it
-        // causes undesirable flashing/font size changes when
-        // MathJax is used for interactive preview (equation editor).
-        // Setting processSectionDelay to 0 (see below) fully eliminates
-        // fast preview, but to reduce confusion, we are also setting
-        // the option as displayed in the context menu to false.
-        // When upgrading to 2.6, check if this variable name changed.
-        window.MathJax = {
-            menuSettings: {CHTMLpreview: false}
+        defineDependency = function(globalName, name, noShim) {
+            var getGlobalValue = function() {
+                    var globalNamePath = globalName.split('.'),
+                        result = window,
+                        i;
+                    for (i = 0; i < globalNamePath.length; i++) {
+                        result = result[globalNamePath[i]];
+                    }
+                    return result;
+                },
+                globalValue = getGlobalValue();
+            if (globalValue) {
+                if (noShim) {
+                    define(name, {});
+                } else {
+                    define(name, [], function() { return globalValue; });
+                }
+            } else {
+                console.error('Expected library to be included on page, but not found on window object: ' + name);
+            }
+        };
+
+        librarySetup = function() {
+            // This is the function to setup all the vendor libraries
+
+            // Underscore.string no longer installs itself directly on '_'. For compatibility with existing
+            // code, add it to '_' with its previous name.
+            if (window._ && window.s) {
+                window._.str = window.s;
+            }
+
+            window.$.ajaxSetup({
+                contents: {
+                    script: false
+                }
+            });
+
+            // MathJax Fast Preview was introduced in 2.5. However, it
+            // causes undesirable flashing/font size changes when
+            // MathJax is used for interactive preview (equation editor).
+            // Setting processSectionDelay to 0 (see below) fully eliminates
+            // fast preview, but to reduce confusion, we are also setting
+            // the option as displayed in the context menu to false.
+            // When upgrading to 2.6, check if this variable name changed.
+            window.MathJax = {
+                menuSettings: {CHTMLpreview: false}
+            };
         };
-        // Since we are serving the gettext catalog as static files,
-        // the URL for the gettext file will vary depending on which locale
-        // needs to be served. To handle this, we load the correct file in the
-        // rendered template and then use this to ensure that RequireJS knows
-        // how to find it.
-        define('gettext', function() { return window.gettext; });
+
+        defineDependency('jQuery', 'jquery');
+        defineDependency('jQuery', 'jquery-migrate');
+        defineDependency('_', 'underscore');
+        defineDependency('s', 'underscore.string');
+        defineDependency('gettext', 'gettext');
+        defineDependency('Logger', 'logger');
+        defineDependency('URI', 'URI');
+        defineDependency('jQuery.url', 'jquery.url');
+        defineDependency('Backbone', 'backbone');
+
+        // Add the UI Toolkit helper classes that have been installed in the 'edx' namespace
+        defineDependency('edx.HtmlUtils', 'edx-ui-toolkit/js/utils/html-utils');
+        defineDependency('edx.StringUtils', 'edx-ui-toolkit/js/utils/string-utils');
+
+        // utility.js adds two functions to the window object, but does not return anything
+        defineDependency('isExternal', 'utility', true);
+
+        librarySetup();
     }
 
     require.config({

cms/templates/base.html

@@ -56,11 +56,15 @@ from openedx.core.djangolib.js_utils import (
 
     <a class="nav-skip" href="#main">${_("Skip to main content")}</a>
 
+    <%static:js group='base_vendor'/>
+
     <script type="text/javascript">
       window.baseUrl = "${settings.STATIC_URL | n, js_escaped_string}";
-      var require = {baseUrl: window.baseUrl};
+      require.config({
+          baseUrl: window.baseUrl
+      });
     </script>
-    <script type="text/javascript" src="${static.url("common/js/vendor/require.js")}"></script>
+
     <script type="text/javascript" src="${static.url("cms/js/require-config.js")}"></script>
 
     <!-- view -->
@@ -92,26 +96,24 @@ from openedx.core.djangolib.js_utils import (
 
     <%block name="jsextra"></%block>
     <script type="text/javascript">
-      require(['common/js/common_libraries'], function () {
-          require(['js/factories/base'], function () {
-              require(['js/models/course'], function(Course) {
-                  % if context_course:
-                      window.course = new Course({
-                          id: "${context_course.id | n, js_escaped_string}",
-                          name: "${context_course.display_name_with_default | n, js_escaped_string}",
-                          url_name: "${context_course.location.name | n, js_escaped_string}",
-                          org: "${context_course.location.org | n, js_escaped_string}",
-                          num: "${context_course.location.course | n, js_escaped_string}",
-                          display_course_number: "${context_course.display_coursenumber | n, js_escaped_string}",
-                          revision: "${context_course.location.revision | n, js_escaped_string}",
-                          self_paced: ${context_course.self_paced | n, dump_js_escaped_json}
-                      });
-                  % endif
-                  % if user.is_authenticated():
-                      require(['js/sock']);
-                  % endif
-                  <%block name='requirejs'></%block>
-              });
+      require(['js/factories/base'], function () {
+          require(['js/models/course'], function(Course) {
+              % if context_course:
+                  window.course = new Course({
+                      id: "${context_course.id | n, js_escaped_string}",
+                      name: "${context_course.display_name_with_default | n, js_escaped_string}",
+                      url_name: "${context_course.location.name | n, js_escaped_string}",
+                      org: "${context_course.location.org | n, js_escaped_string}",
+                      num: "${context_course.location.course | n, js_escaped_string}",
+                      display_course_number: "${context_course.display_coursenumber | n, js_escaped_string}",
+                      revision: "${context_course.location.revision | n, js_escaped_string}",
+                      self_paced: ${context_course.self_paced | n, dump_js_escaped_json}
+                  });
+              % endif
+              % if user.is_authenticated():
+                  require(['js/sock']);
+              % endif
+              <%block name='requirejs'></%block>
           });
       });
     </script>

common/static/common/js/common_libraries.js

-define([
-    'edx-ui-toolkit/js/utils/string-utils',
-    'edx-ui-toolkit/js/utils/html-utils',
-    'domReady!',
-    'jquery',
-    'jquery-migrate',
-    'backbone',
-    'underscore',
-    'gettext'
-],
-    function(StringUtils, HtmlUtils) {
-        'use strict';
-
-        // Install utility classes in the edX namespace to make them
-        // available to code that doesn't use RequireJS,
-        // e.g. XModules and XBlocks.
-        if (window) {
-            window.edx = window.edx || {};
-            window.edx.StringUtils = StringUtils;
-            window.edx.HtmlUtils = HtmlUtils;
-        }
-    });

lms/envs/common.py

@@ -1248,9 +1248,6 @@ STATICFILES_FINDERS = [
 PIPELINE_CSS_COMPRESSOR = None
 PIPELINE_JS_COMPRESSOR = 'pipeline.compressors.uglifyjs.UglifyJSCompressor'
 
-# Setting that will only affect the edX version of django-pipeline until our changes are merged upstream
-PIPELINE_COMPILE_INPLACE = True
-
 # Don't wrap JavaScript as there is code that depends upon updating the global namespace
 PIPELINE_DISABLE_WRAPPER = True
 
@@ -1732,21 +1729,9 @@ REQUIRE_BUILD_PROFILE = "lms/js/build.js"
 # The name of the require.js script used by your project, relative to REQUIRE_BASE_URL.
 REQUIRE_JS = "common/js/vendor/require.js"
 
-# A dictionary of standalone modules to build with almond.js.
-REQUIRE_STANDALONE_MODULES = {}
-
 # Whether to run django-require in debug mode.
 REQUIRE_DEBUG = False
 
-# A tuple of files to exclude from the compilation result of r.js.
-REQUIRE_EXCLUDE = ("build.txt",)
-
-# The execution environment in which to run r.js: auto, node or rhino.
-# auto will autodetect the environment and make use of node if available and rhino if not.
-# It can also be a path to a custom class that subclasses require.environments.Environment
-# and defines some "args" function that returns a list with the command arguments to execute.
-REQUIRE_ENVIRONMENT = "node"
-
 # In production, the Django pipeline appends a file hash to JavaScript file names.
 # This makes it difficult for RequireJS to load its requirements, since module names
 # specified in JavaScript code do not include the hash.

lms/static/lms/js/require-config.js

 /* globals _, requirejs */
-/* eslint-disable quote-props */
+/* eslint-disable quote-props, no-console, no-plusplus */
 
 (function(require, define) {
     'use strict';

webpack.config.js

@@ -127,7 +127,12 @@ var wpconfig = {
     },
 
     externals: {
-        gettext: 'gettext'
+        backbone: 'Backbone',
+        gettext: 'gettext',
+        jquery: 'jQuery',
+        logger: 'Logger',
+        underscore: '_',
+        URI: 'URI'
     },
 
     watchOptions: {