Load XBlocks with webpack rather than RequireJS

cms/djangoapps/contentstore/features/common.py

@@ -247,7 +247,6 @@ def create_unit_from_course_outline():
         world.css_click(selector)
 
     world.wait_for_mathjax()
-    world.wait_for_xmodule()
     world.wait_for_loading()
 
     assert world.is_css_present('ul.new-component-type')

cms/djangoapps/pipeline_js/js/xmodule.js

@@ -52,9 +52,9 @@ define(
             return deferred.promise();
         }
 
-        if (!window.xmoduleUrls) {
-            throw Error('window.xmoduleUrls must be defined');
-        }
-        return requireQueue(window.xmoduleUrls);
+        // if (!window.xmoduleUrls) {
+        //     throw Error('window.xmoduleUrls must be defined');
+        // }
+        return requireQueue([]);
     }
 );

cms/envs/acceptance.py

@@ -110,10 +110,6 @@ FEATURES['ENABLE_DISCUSSION_SERVICE'] = False
 # We do not yet understand why this occurs. Setting this to true is a stopgap measure
 USE_I18N = True
 
-# Override the test stub webpack_loader that is installed in test.py.
-INSTALLED_APPS = [app for app in INSTALLED_APPS if app != 'openedx.tests.util.webpack_loader']
-INSTALLED_APPS.append('webpack_loader')
-
 # Include the lettuce app for acceptance testing, including the 'harvest' django-admin command
 # django.contrib.staticfiles used to be loaded by lettuce, now we must add it ourselves
 # django.contrib.staticfiles is not added to lms as there is a ^/static$ route built in to the app

cms/envs/test.py

@@ -54,8 +54,6 @@ TEST_ROOT = path('test_root')
 
 # Want static files in the same dir for running on jenkins.
 STATIC_ROOT = TEST_ROOT / "staticfiles"
-INSTALLED_APPS = [app for app in INSTALLED_APPS if app != 'webpack_loader']
-INSTALLED_APPS.append('openedx.tests.util.webpack_loader')
 WEBPACK_LOADER['DEFAULT']['STATS_FILE'] = STATIC_ROOT / "webpack-stats.json"
 
 GITHUB_REPO_ROOT = TEST_ROOT / "data"

cms/static/karma_cms_webpack.conf.js

@@ -0,0 +1,55 @@
+/* eslint-env node */
+
+// Karma config for cms suite.
+// Docs and troubleshooting tips in common/static/common/js/karma.common.conf.js
+
+'use strict';
+var path = require('path');
+var configModule = require(path.join(__dirname, '../../common/static/common/js/karma.common.conf.js'));
+
+var options = {
+
+    includeCommonFiles: true,
+
+    libraryFiles: [],
+
+    libraryFilesToInclude: [
+    ],
+
+    // Make sure the patterns in sourceFiles and specFiles do not match the same file.
+    // Otherwise Istanbul which is used for coverage tracking will cause tests to not run.
+    sourceFiles: [],
+    //     {pattern: 'js/factories/login.js', webpack: true},
+    //     {pattern: 'js/factories/xblock_validation.js', webpack: true},
+    //     {pattern: 'js/factories/container.js', webpack: true},
+    //     {pattern: 'js/factories/context_course.js', webpack: true},
+    //     {pattern: 'js/factories/edit_tabs.js', webpack: true},
+    //     {pattern: 'js/factories/library.js', webpack: true},
+    //     {pattern: 'js/factories/textbooks.js', webpack: true},
+    // ],
+
+    // All spec files should be imported in main_webpack.js, rather than being listed here
+    specFiles: [],
+
+    fixtureFiles: [
+        {pattern: '../templates/js/**/*.underscore'},
+        {pattern: 'templates/**/*.underscore'}
+    ],
+
+    runFiles: [
+        {pattern: 'cms/js/spec/main_webpack.js', webpack: true},
+        {pattern: 'jasmine.cms.conf.js', included: true}
+    ],
+
+    preprocessors: {}
+};
+
+options.runFiles
+    .filter(function(file) { return file.webpack; })
+    .forEach(function(file) {
+        options.preprocessors[file.pattern] = ['webpack'];
+    });
+
+module.exports = function(config) {
+    configModule.configure(config, options);
+};

cms/templates/container.html

@@ -43,20 +43,18 @@ from openedx.core.djangolib.markup import HTML, Text
 </%block>
 
 <%block name="page_bundle">
-    <script type="text/javascript">
-        <%! from pipeline_js.utils import get_xmodule_urls %>
-        window.xmoduleUrls = ${get_xmodule_urls() | n, dump_js_escaped_json};
-    </script>
-    <%static:invoke_page_bundle page_name="js/pages/container" class_name="ContainerFactory">
-        ${component_templates | n, dump_js_escaped_json},
-        ${xblock_info | n, dump_js_escaped_json},
-        "${action | n, js_escaped_string}",
-        {
-            isUnitPage: ${is_unit_page | n, dump_js_escaped_json},
-            canEdit: true,
-            outlineURL: "${outline_url | n, js_escaped_string}"
-        }
-    </%static:invoke_page_bundle>
+    <%static:webpack entry="js/factories/container">
+        ContainerFactory(
+            ${component_templates | n, dump_js_escaped_json},
+            ${xblock_info | n, dump_js_escaped_json},
+            "${action | n, js_escaped_string}",
+            {
+                isUnitPage: ${is_unit_page | n, dump_js_escaped_json},
+                canEdit: true,
+                outlineURL: "${outline_url | n, js_escaped_string}"
+            }
+        );
+    </%static:webpack>
 </%block>
 
 <%block name="content">

cms/templates/edit-tabs.html

@@ -19,8 +19,8 @@
 % endfor
 </%block>
 
-<%block name="requirejs">
-    require(["js/factories/edit_tabs"], function (EditTabsFactory) {
+<%block name="page_bundle">
+    <%static:webpack entry="js/factories/edit_tabs">
         EditTabsFactory("${context_course.location | n, js_escaped_string}", "${reverse('tabs_handler', kwargs={'course_key_string': context_course.id})}");
     });
 </%block>

cms/templates/library.html

@@ -25,8 +25,8 @@ from openedx.core.djangolib.markup import HTML, Text
 </script>
 </%block>
 
-<%block name="requirejs">
-    require(["js/factories/library"], function(LibraryFactory) {
+<%block name="page_bundle">
+    <%static:webpack entry="js/factories/library">
         LibraryFactory(
             ${component_templates | n, dump_js_escaped_json},
             ${xblock_info | n, dump_js_escaped_json},

cms/templates/studio_xblock_wrapper.html

@@ -7,6 +7,7 @@ from lms.lib.utils import is_unit
 from openedx.core.djangolib.js_utils import (
     dump_js_escaped_json, js_escaped_string
 )
+from xmodule.x_module import XModule, XModuleDescriptor
 %>
 <%
 xblock_url = xblock_studio_url(xblock)
@@ -38,6 +39,10 @@ block_is_unit = is_unit(xblock)
     });
 </script>
 
+% if isinstance(xblock, (XModule, XModuleDescriptor)):
+    <%static:webpack entry="${getattr(xblock.__class__, 'unmixed_class', xblock.__class__).__name__}"/>
+% endif
+
 % if not is_root:
     % if is_reorderable:
     <li class="studio-xblock-wrapper is-draggable" data-locator="${xblock.location}" data-course-key="${xblock.location.course_key}">