Move course import JS to Webpack

cms/envs/aws.py

@@ -116,6 +116,7 @@ GITHUB_REPO_ROOT = ENV_TOKENS.get('GITHUB_REPO_ROOT', GITHUB_REPO_ROOT)
 STATIC_ROOT_BASE = ENV_TOKENS.get('STATIC_ROOT_BASE', None)
 if STATIC_ROOT_BASE:
     STATIC_ROOT = path(STATIC_ROOT_BASE) / EDX_PLATFORM_REVISION
+    WEBPACK_LOADER['DEFAULT']['STATS_FILE'] = STATIC_ROOT / "webpack-stats.json"
 
 EMAIL_BACKEND = ENV_TOKENS.get('EMAIL_BACKEND', EMAIL_BACKEND)
 EMAIL_FILE_PATH = ENV_TOKENS.get('EMAIL_FILE_PATH', None)

cms/envs/bok_choy.env.json

@@ -100,7 +100,6 @@
     "SERVER_EMAIL": "devops@example.com",
     "SESSION_COOKIE_DOMAIN": null,
     "SITE_NAME": "localhost",
-    "STATIC_ROOT_BASE": "** OVERRIDDEN **",
     "STATIC_URL_BASE": "/static/",
     "SYSLOG_SERVER": "",
     "TECH_SUPPORT_EMAIL": "technical@example.com",

cms/envs/bok_choy.py

@@ -64,6 +64,8 @@ STATICFILES_DIRS = [
     (TEST_ROOT / "staticfiles" / "cms").abspath(),
 ]
 
+WEBPACK_LOADER['DEFAULT']['STATS_FILE'] = TEST_ROOT / "staticfiles" / "cms" / "webpack-stats.json"
+
 # Silence noisy logs
 import logging
 LOG_OVERRIDES = [

cms/envs/common.py

@@ -747,6 +747,15 @@ REQUIRE_EXCLUDE = ("build.txt",)
 # returns a list with the command arguments to execute.
 REQUIRE_ENVIRONMENT = "node"
 
+########################## DJANGO WEBPACK LOADER ##############################
+
+WEBPACK_LOADER = {
+    'DEFAULT': {
+        'BUNDLE_DIR_NAME': 'bundles/',
+        'STATS_FILE': os.path.join(STATIC_ROOT, 'webpack-stats.json')
+    }
+}
+
 ################################# CELERY ######################################
 
 # Message configuration
@@ -881,6 +890,7 @@ INSTALLED_APPS = (
     'pipeline',
     'static_replace',
     'require',
+    'webpack_loader',
 
     # Theming
     'openedx.core.djangoapps.theming',

cms/envs/test.py

@@ -66,6 +66,7 @@ TEST_ROOT = path('test_root')
 
 # Want static files in the same dir for running on jenkins.
 STATIC_ROOT = TEST_ROOT / "staticfiles"
+WEBPACK_LOADER['DEFAULT']['STATS_FILE'] = STATIC_ROOT / "webpack-stats.json"
 
 GITHUB_REPO_ROOT = TEST_ROOT / "data"
 DATA_DIR = TEST_ROOT / "data"

cms/envs/test_static_optimized.py

@@ -40,6 +40,7 @@ LOG_DIR = (TEST_ROOT / "log").abspath()
 
 # Store the static files under test root so that they don't overwrite existing static assets
 STATIC_ROOT = (TEST_ROOT / "staticfiles" / "cms").abspath()
+WEBPACK_LOADER['DEFAULT']['STATS_FILE'] = STATIC_ROOT / "webpack-stats.json"
 
 # Disable uglify when tests are running (used by build.js).
 # 1. Uglify is by far the slowest part of the build process

cms/static/cms/js/build.js

@@ -41,7 +41,6 @@
             'js/factories/export',
             'js/factories/group_configurations',
             'js/certificates/factories/certificates_page_factory',
-            'js/factories/import',
             'js/factories/index',
             'js/factories/library',
             'js/factories/login',

cms/static/cms/js/main.js

@@ -2,10 +2,15 @@
 
 (function(AjaxPrefix) {
     'use strict';
-    define(['domReady', 'jquery', 'underscore.string', 'backbone', 'gettext',
-            'common/js/components/views/feedback_notification', 'coffee/src/ajax_prefix',
-            'jquery.cookie'],
-    function(domReady, $, str, Backbone, gettext, NotificationView) {
+    define([
+        'domReady',
+        'jquery',
+        'underscore.string',
+        'backbone',
+        'gettext',
+        '../../../../common/static/common/js/components/views/feedback_notification',
+        'jquery.cookie'
+    ], function(domReady, $, str, Backbone, gettext, NotificationView) {
         var main, sendJSON;
         main = function() {
             AjaxPrefix.addAjaxPrefix(jQuery, function() {

cms/static/js/views/import.js → cms/static/js/features/import/views/import.js

@@ -11,18 +11,18 @@ define(
         var COOKIE_NAME = 'lastimportupload';
 
         var STAGE = {
-            'UPLOADING': 0,
-            'UNPACKING': 1,
-            'VERIFYING': 2,
-            'UPDATING': 3,
-            'SUCCESS': 4
+            UPLOADING: 0,
+            UNPACKING: 1,
+            VERIFYING: 2,
+            UPDATING: 3,
+            SUCCESS: 4
         };
 
         var STATE = {
-            'READY': 1,
-            'IN_PROGRESS': 2,
-            'SUCCESS': 3,
-            'ERROR': 4
+            READY: 1,
+            IN_PROGRESS: 2,
+            SUCCESS: 3,
+            ERROR: 4
         };
 
         var current = {stage: 0, state: STATE.READY};
@@ -35,6 +35,8 @@ define(
             wrapper: $('div.wrapper-status')
         };
 
+        var CourseImport;
+
         /** ******** Private functions *****************************************/
 
         /**
@@ -55,32 +57,11 @@ define(
         };
 
         /**
-         * Sets the Import in the "error" status.
-         *
-         * Immediately stops any further polling from the server.
-         * Displays the error message at the list element that corresponds
-         * to the stage where the error occurred.
-         *
-         * @param {string} msg Error message to display.
-         * @param {int} [stage=current.stage] Stage of import process at which error occurred.
-         */
-        var error = function(msg, stage) {
-            current.stage = Math.abs(stage || current.stage); // Could be negative
-            current.state = STATE.ERROR;
-
-            destroyEventListeners();
-            clearTimeout(timeout.id);
-            updateFeedbackList(msg);
-
-            deferred.resolve();
-        };
-
-        /**
          * Initializes the event listeners
          *
          */
         var initEventListeners = function() {
-            $(window).on('beforeunload.import', function() {
+            $(window).on('beforeunload.import', function() {  // eslint-disable-line consistent-return
                 if (current.stage < STAGE.UNPACKING) {
                     return gettext('Your import is in progress; navigating away will abort it.');
                 }
@@ -101,25 +82,6 @@ define(
         };
 
         /**
-         * Sets the Import on the "success" status
-         *
-         * If it wasn't already, marks the stored import as "completed",
-         * and updates its date timestamp
-         */
-        var success = function() {
-            current.state = STATE.SUCCESS;
-
-            if (CourseImport.storedImport().completed !== true) {
-                storeImport(true);
-            }
-
-            destroyEventListeners();
-            updateFeedbackList();
-
-            deferred.resolve();
-        };
-
-        /**
          * Updates the Import feedback status list
          *
          * @param {string} [currStageMsg=''] The message to show on the
@@ -158,8 +120,11 @@ define(
                 $(stage)
                     .removeClass('is-complete is-started has-error')
                     .addClass('is-not-started')
-                    .find('p.error').remove().end()
-                    .find('p.copy').show();
+                    .find('p.error')
+                    .remove()
+                    .end()
+                    .find('p.copy')
+                    .show();
             }
 
             switch (current.state) {
@@ -201,6 +166,9 @@ define(
                 errorStage($curr);
 
                 break;
+
+            default:
+                break;
             }
 
             if (current.state === STATE.SUCCESS) {
@@ -210,9 +178,49 @@ define(
             }
         };
 
+        /**
+         * Sets the Import in the "error" status.
+         *
+         * Immediately stops any further polling from the server.
+         * Displays the error message at the list element that corresponds
+         * to the stage where the error occurred.
+         *
+         * @param {string} msg Error message to display.
+         * @param {int} [stage=current.stage] Stage of import process at which error occurred.
+         */
+        var error = function(msg, stage) {
+            current.stage = Math.abs(stage || current.stage); // Could be negative
+            current.state = STATE.ERROR;
+
+            destroyEventListeners();
+            clearTimeout(timeout.id);
+            updateFeedbackList(msg);
+
+            deferred.resolve();
+        };
+
+        /**
+         * Sets the Import on the "success" status
+         *
+         * If it wasn't already, marks the stored import as "completed",
+         * and updates its date timestamp
+         */
+        var success = function() {
+            current.state = STATE.SUCCESS;
+
+            if (CourseImport.storedImport().completed !== true) {
+                storeImport(true);
+            }
+
+            destroyEventListeners();
+            updateFeedbackList();
+
+            deferred.resolve();
+        };
+
         /** ******** Public functions ******************************************/
 
-        var CourseImport = {
+        CourseImport = {
 
             /**
              * Cancels the import and sets the Object to the error state

cms/templates/import.html

@@ -239,13 +239,8 @@ else:
   %endif
   </section>
 </div>
+<%static:webpack entry="Import">
+  Import('${import_status_url | n, js_escaped_string}', ${library | n, dump_js_escaped_json});
+</%static:webpack>
 </%block>
 
-<%block name="requirejs">
-  require(["js/factories/import"], function(ImportFactory) {
-      ImportFactory(
-          "${import_status_url | n, js_escaped_string}",
-          ${library | n, dump_js_escaped_json}
-      );
-  });
-</%block>

common/static/common/js/components/views/feedback_notification.js

-(function(define) {
-    'use strict';
-    define(['jquery', 'underscore', 'underscore.string', 'common/js/components/views/feedback'],
-        function($, _, str, SystemFeedbackView) {
-            var Notification = SystemFeedbackView.extend({
-                options: $.extend({}, SystemFeedbackView.prototype.options, {
-                    type: 'notification',
-                    closeIcon: false
-                })
-            });
+define(['jquery', 'underscore', 'underscore.string', '../../../../common/js/components/views/feedback'],
+    function($, _, str, SystemFeedbackView) {
+        var Notification = SystemFeedbackView.extend({
+            options: $.extend({}, SystemFeedbackView.prototype.options, {
+                type: 'notification',
+                closeIcon: false
+            })
+        });
 
-        // create Notification.Warning, Notification.Confirmation, etc
-            var capitalCamel, intents;
-            capitalCamel = _.compose(str.capitalize, str.camelize);
-            intents = ['warning', 'error', 'confirmation', 'announcement', 'step-required', 'help', 'mini'];
-            _.each(intents, function(intent) {
-                var subclass;
-                subclass = Notification.extend({
-                    options: $.extend({}, Notification.prototype.options, {
-                        intent: intent
-                    })
-                });
-                Notification[capitalCamel(intent)] = subclass;
+    // create Notification.Warning, Notification.Confirmation, etc
+        var capitalCamel, intents;
+        capitalCamel = _.compose(str.capitalize, str.camelize);
+        intents = ['warning', 'error', 'confirmation', 'announcement', 'step-required', 'help', 'mini'];
+        _.each(intents, function(intent) {
+            var subclass;
+            subclass = Notification.extend({
+                options: $.extend({}, Notification.prototype.options, {
+                    intent: intent
+                })
             });
+            Notification[capitalCamel(intent)] = subclass;
+        });
 
-        // set more sensible defaults for Notification.Mini views
-            var miniOptions = Notification.Mini.prototype.options;
-            miniOptions.minShown = 1250;
-            miniOptions.closeIcon = false;
+    // set more sensible defaults for Notification.Mini views
+        var miniOptions = Notification.Mini.prototype.options;
+        miniOptions.minShown = 1250;
+        miniOptions.closeIcon = false;
 
-            return Notification;
-        });
-}).call(this, define || RequireJS.define);
+        return Notification;
+    });

openedx/features/course_experience/.eslintrc.js

 module.exports = {
   extends: 'eslint-config-edx',
   root: true,
+  settings: {
+    'import/resolver': 'webpack',
+  },
 };

openedx/features/course_experience/static/course_experience/js/CourseOutline.js

 /* globals Logger */
 
-import { keys } from 'edx-ui-toolkit/src/js/utils/constants';
+import { keys } from 'edx-ui-toolkit/js/utils/constants';
 
 // @TODO: Figure out how to make webpack handle default exports when libraryTarget: 'window'
 export class CourseOutline {  // eslint-disable-line import/prefer-default-export

openedx/features/course_experience/static/course_experience/js/spec/CourseOutline_spec.js

 /* globals Logger, loadFixtures */
 
-import { keys } from 'edx-ui-toolkit/src/js/utils/constants';
+import { keys } from 'edx-ui-toolkit/js/utils/constants';
 
 import { CourseOutline } from '../CourseOutline';
 

package.json

@@ -7,16 +7,20 @@
     "babel-preset-env": "^1.2.1",
     "backbone": "~1.3.2",
     "backbone.paginator": "~2.0.3",
+    "coffee-loader": "^0.7.3",
     "coffee-script": "1.6.1",
     "edx-pattern-library": "0.18.1",
     "edx-ui-toolkit": "1.5.2",
+    "exports-loader": "^0.6.4",
     "hls.js": "0.7.2",
+    "imports-loader": "^0.7.1",
     "jquery": "~2.2.0",
     "jquery-migrate": "^1.4.1",
     "jquery.scrollto": "~2.1.2",
     "moment": "^2.15.1",
     "moment-timezone": "~0.5.5",
     "picturefill": "~3.0.2",
+    "raw-loader": "^0.5.1",
     "requirejs": "~2.3.2",
     "uglify-js": "2.7.0",
     "underscore": "~1.8.3",

pavelib/assets.py

@@ -705,16 +705,26 @@ def execute_compile_sass(args):
 
 
 def execute_webpack(prod, settings=None):
-    sh(cmd("NODE_ENV={node_env} STATIC_ROOT={static_root} $(npm bin)/webpack".format(
-        node_env="production" if prod else "development",
-        static_root=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings)
-    )))
+    sh(
+        cmd(
+            "NODE_ENV={node_env} STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack"
+                .format(
+                    node_env="production" if prod else "development",
+                    static_root_lms=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings),
+                    static_root_cms=Env.get_django_setting("STATIC_ROOT", "cms", settings=settings)
+                )
+        )
+    )
 
 
 def execute_webpack_watch(settings=None):
-    run_background_process("STATIC_ROOT={static_root} $(npm bin)/webpack --watch --watch-poll=200".format(
-        static_root=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings)
-    ))
+    run_background_process(
+        "STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack --watch --watch-poll=200"
+            .format(
+                static_root_lms=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings),
+                static_root_cms=Env.get_django_setting("STATIC_ROOT", "cms", settings=settings)
+            )
+    )
 
 
 def get_parsed_option(command_opts, opt_key, default=None):

pavelib/paver_tests/test_servers.py

@@ -41,11 +41,12 @@ EXPECTED_RUN_SERVER_COMMAND = (
 EXPECTED_INDEX_COURSE_COMMAND = (
     u"python manage.py {system} --settings={settings} reindex_course --setup"
 )
-EXPECTED_PRINT_SETTINGS_COMMAND = (
-    u"python manage.py {system} --settings={settings} print_settings STATIC_ROOT --format=value 2>/dev/null"
-)
+EXPECTED_PRINT_SETTINGS_COMMAND = [
+    u"python manage.py lms --settings={settings} print_settings STATIC_ROOT --format=value 2>/dev/null",
+    u"python manage.py cms --settings={settings} print_settings STATIC_ROOT --format=value 2>/dev/null"
+]
 EXPECTED_WEBPACK_COMMAND = (
-    u"NODE_ENV={node_env} STATIC_ROOT={static_root} $(npm bin)/webpack"
+    u"NODE_ENV={node_env} STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack"
 )
 
 
@@ -240,13 +241,11 @@ class TestPaverServerTasks(PaverTestCase):
             expected_messages.append(u"xmodule_assets common/static/xmodule")
             expected_messages.append(u"install npm_assets")
             expected_messages.append(EXPECTED_COFFEE_COMMAND.format(platform_root=self.platform_root))
-            expected_messages.append(EXPECTED_PRINT_SETTINGS_COMMAND.format(
-                system="lms",
-                settings=expected_asset_settings
-            ))
+            expected_messages.extend([c.format(settings=expected_asset_settings) for c in EXPECTED_PRINT_SETTINGS_COMMAND])
             expected_messages.append(EXPECTED_WEBPACK_COMMAND.format(
                 node_env="production" if expected_asset_settings != "devstack" else "development",
-                static_root=None
+                static_root_lms=None,
+                static_root_cms=None
             ))
             expected_messages.extend(self.expected_sass_commands(system=system, asset_settings=expected_asset_settings))
         if expected_collect_static:
@@ -285,10 +284,11 @@ class TestPaverServerTasks(PaverTestCase):
             expected_messages.append(u"xmodule_assets common/static/xmodule")
             expected_messages.append(u"install npm_assets")
             expected_messages.append(EXPECTED_COFFEE_COMMAND.format(platform_root=self.platform_root))
-            expected_messages.append(EXPECTED_PRINT_SETTINGS_COMMAND.format(system="lms", settings=expected_asset_settings))
+            expected_messages.extend([c.format(settings=expected_asset_settings) for c in EXPECTED_PRINT_SETTINGS_COMMAND])
             expected_messages.append(EXPECTED_WEBPACK_COMMAND.format(
                 node_env="production" if expected_asset_settings != "devstack" else "development",
-                static_root=None
+                static_root_lms=None,
+                static_root_cms=None
             ))
             expected_messages.extend(self.expected_sass_commands(asset_settings=expected_asset_settings))
         if expected_collect_static:

webpack.config.js

@@ -12,7 +12,8 @@ var wpconfig = {
     context: __dirname,
 
     entry: {
-        CourseOutline: './openedx/features/course_experience/static/course_experience/js/CourseOutline.js'
+        CourseOutline: './openedx/features/course_experience/static/course_experience/js/CourseOutline.js',
+        Import: './cms/static/js/features/import/factories/import.js'
     },
 
     output: {
@@ -21,7 +22,7 @@ var wpconfig = {
         libraryTarget: 'window'
     },
 
-    devtool: isProd ? false : 'eval-source-map',
+    devtool: isProd ? false : 'source-map',
 
     plugins: [
         new webpack.NoEmitOnErrorsPlugin(),
@@ -33,8 +34,18 @@ var wpconfig = {
             debug: !isProd
         }),
         new BundleTracker({
-            path: process.env.STATIC_ROOT,
+            path: process.env.STATIC_ROOT_CMS,
             filename: 'webpack-stats.json'
+        }),
+        new BundleTracker({
+            path: process.env.STATIC_ROOT_LMS,
+            filename: 'webpack-stats.json'
+        }),
+        new webpack.ProvidePlugin({
+            _: 'underscore',
+            $: 'jquery',
+            jQuery: 'jquery',
+            'window.jQuery': 'jquery'
         })
     ],
 
@@ -44,12 +55,51 @@ var wpconfig = {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 use: 'babel-loader'
+            },
+            {
+                test: /\.coffee$/,
+                exclude: /node_modules/,
+                use: 'coffee-loader'
+            },
+            {
+                test: /\.underscore$/,
+                use: 'raw-loader'
+            },
+            {
+                // This file is used by both RequireJS and Webpack and depends on window globals
+                // This is a dirty hack and shouldn't be replicated for other files.
+                test: path.resolve(__dirname, 'cms/static/cms/js/main.js'),
+                use: {
+                    loader: 'imports-loader',
+                    options: {
+                        AjaxPrefix: 'exports-loader?this.AjaxPrefix!../../../../common/static/coffee/src/ajax_prefix.coffee'
+                    }
+                }
             }
         ]
     },
 
     resolve: {
-        extensions: ['.js', '.json']
+        extensions: ['.js', '.json', '.coffee'],
+        alias: {
+            'edx-ui-toolkit': 'edx-ui-toolkit/src/',  // @TODO: some paths in toolkit are not valid relative paths
+            'jquery.ui': 'jQuery-File-Upload/js/vendor/jquery.ui.widget.js',
+            jquery: 'jquery/src/jquery'  // Use the non-dist form of jQuery for better debugging + optimization
+        },
+        modules: [
+            'node_modules',
+            'common/static/js/vendor/'
+        ]
+    },
+
+    resolveLoader: {
+        alias: {
+            text: 'raw-loader'  // Compatibility with RequireJSText's text! loader, uses raw-loader under the hood
+        }
+    },
+
+    externals: {
+        gettext: 'gettext'
     },
 
     watchOptions: {
@@ -59,7 +109,7 @@ var wpconfig = {
 
 if (isProd) {
     wpconfig.plugins = wpconfig.plugins.concat([
-        new webpack.LoaderOptionsPlugin({
+        new webpack.LoaderOptionsPlugin({  // This may not be needed; legacy option for loaders written for webpack 1
             minimize: true
         }),
         new webpack.optimize.UglifyJsPlugin()