Skip to content

Commit

Permalink
Load XBlocks with webpack rather than RequireJS
Browse files Browse the repository at this point in the history
  • Loading branch information
cpennington committed May 29, 2018
1 parent 9455790 commit d08e199
Show file tree
Hide file tree
Showing 67 changed files with 597 additions and 324 deletions.
1 change: 0 additions & 1 deletion cms/djangoapps/contentstore/features/common.py
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
8 changes: 4 additions & 4 deletions cms/djangoapps/pipeline_js/js/xmodule.js
Original file line number Diff line number Diff line change
Expand Up @@ -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([]);
}
);
4 changes: 0 additions & 4 deletions cms/envs/acceptance.py
Original file line number Diff line number Diff line change
Expand Up @@ -110,10 +110,6 @@ def seed():
# 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
Expand Down
2 changes: 0 additions & 2 deletions cms/envs/test.py
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,6 @@

# 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"
Expand Down
55 changes: 55 additions & 0 deletions cms/static/karma_cms_webpack.conf.js
Original file line number Diff line number Diff line change
@@ -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);
};
26 changes: 12 additions & 14 deletions cms/templates/container.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,20 +43,18 @@
</%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">
Expand Down
4 changes: 2 additions & 2 deletions cms/templates/edit-tabs.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions cms/templates/library.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
</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},
Expand Down
5 changes: 5 additions & 0 deletions cms/templates/studio_xblock_wrapper.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
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)
Expand Down Expand Up @@ -38,6 +39,10 @@
});
</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}">
Expand Down
13 changes: 13 additions & 0 deletions common/lib/conftest.py
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,16 @@
# Patch the xml libs before anything else.
from safe_lxml import defuse_xml_libs
defuse_xml_libs()

import pytest

@pytest.fixture(autouse=True)
def no_webpack_loader(monkeypatch):
monkeypatch.setattr(
"webpack_loader.templatetags.webpack_loader.render_bundle",
lambda entry, extension=None, config='DEFAULT', attrs='': ''
)
monkeypatch.setattr(
"webpack_loader.utils.get_as_tags",
lambda entry, extension=None, config='DEFAULT', attrs='': []
)
Original file line number Diff line number Diff line change
@@ -1,70 +1,68 @@
/* JavaScript for Vertical Student View. */

/* global Set:false */ // false means do not assign to Set
/* global ViewedEventTracker:false */

// The vertical marks blocks complete if they are completable by viewing. The
// global variable SEEN_COMPLETABLES tracks blocks between separate loads of
// the same vertical (when a learner goes from one tab to the next, and then
// navigates back within a given sequential) to protect against duplicate calls
// to the server.

import BookmarkButton from 'course_bookmarks/js/views/bookmark_button';
import {ViewedEventTracker} from '../../../../../../../../lms/static/completion/js/ViewedEvent.js';

var SEEN_COMPLETABLES = new Set();

window.VerticalStudentView = function(runtime, element) {
'use strict';
RequireJS.require(['course_bookmarks/js/views/bookmark_button'], function(BookmarkButton) {
var $element = $(element);
var $bookmarkButtonElement = $element.find('.bookmark-button');
return new BookmarkButton({
el: $bookmarkButtonElement,
bookmarkId: $bookmarkButtonElement.data('bookmarkId'),
usageId: $element.data('usageId'),
bookmarked: $element.parent('#seq_content').data('bookmarked'),
apiUrl: $bookmarkButtonElement.data('bookmarksApiUrl')
});
var $element = $(element);
var $bookmarkButtonElement = $element.find('.bookmark-button');
return new BookmarkButton({
el: $bookmarkButtonElement,
bookmarkId: $bookmarkButtonElement.data('bookmarkId'),
usageId: $element.data('usageId'),
bookmarked: $element.parent('#seq_content').data('bookmarked'),
apiUrl: $bookmarkButtonElement.data('bookmarksApiUrl')
});
RequireJS.require(['bundles/ViewedEvent'], function() {
var tracker, vertical, viewedAfter;
var completableBlocks = [];
var vertModDivs = element.getElementsByClassName('vert-mod');
if (vertModDivs.length === 0) {
return;
}
vertical = vertModDivs[0];
$(element).find('.vert').each(function(idx, block) {
if (block.dataset.completableByViewing !== undefined) {
completableBlocks.push(block);
}
});
if (completableBlocks.length > 0) {
viewedAfter = parseInt(vertical.dataset.completionDelayMs, 10);
if (!(viewedAfter >= 0)) {
// parseInt will return NaN if it fails to parse, which is not >= 0.
viewedAfter = 5000;
}
tracker = new ViewedEventTracker(completableBlocks, viewedAfter);
tracker.addHandler(function(block, event) {
var blockKey = block.dataset.id;

if (blockKey && !SEEN_COMPLETABLES.has(blockKey)) {
if (event.elementHasBeenViewed) {
$.ajax({
type: 'POST',
url: runtime.handlerUrl(element, 'publish_completion'),
data: JSON.stringify({
block_key: blockKey,
completion: 1.0
})
}).then(
function() {
SEEN_COMPLETABLES.add(blockKey);
}
);
}
}
});
var tracker, vertical, viewedAfter;
var completableBlocks = [];
var vertModDivs = element.getElementsByClassName('vert-mod');
if (vertModDivs.length === 0) {
return;
}
vertical = vertModDivs[0];
$(element).find('.vert').each(function(idx, block) {
if (block.dataset.completableByViewing !== undefined) {
completableBlocks.push(block);
}
});
if (completableBlocks.length > 0) {
viewedAfter = parseInt(vertical.dataset.completionDelayMs, 10);
if (!(viewedAfter >= 0)) {
// parseInt will return NaN if it fails to parse, which is not >= 0.
viewedAfter = 5000;
}
tracker = new ViewedEventTracker(completableBlocks, viewedAfter);
tracker.addHandler(function(block, event) {
var blockKey = block.dataset.id;

if (blockKey && !SEEN_COMPLETABLES.has(blockKey)) {
if (event.elementHasBeenViewed) {
$.ajax({
type: 'POST',
url: runtime.handlerUrl(element, 'publish_completion'),
data: JSON.stringify({
block_key: blockKey,
completion: 1.0
})
}).then(
function() {
SEEN_COMPLETABLES.add(blockKey);
}
);
}
}
});
}
};
9 changes: 5 additions & 4 deletions common/lib/xmodule/xmodule/js/fixtures/video.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,18 @@
<span tabindex="0" class="spinner" aria-hidden="false" aria-label="${_('Loading video player')}"></span>
<span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
<div class="video-player-pre"></div>
<section class="video-player">
<div class="video-player">
<iframe id="id"></iframe>
</section>
</div>
<div class="video-player-post"></div>
<section class="video-controls is-hidden">
<div class="closed-captions"></div>
<div class="video-controls is-hidden">
<div class="slider"></div>
<div>
<div class="vcr"><div class="vidtime">0:00 / 0:00</div></div>
<div class="secondary-controls"></div>
</div>
</section>
</div>
</article>
</div>
<div class="focus_grabber last"></div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
<iframe id="id"></iframe>
</section>
<div class="video-player-post"></div>
<div class="closed-captions"></div>
<section class="video-controls is-hidden">
<div class="slider"></div>
<div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
<iframe id="id"></iframe>
</section>
<div class="video-player-post"></div>
<div class="closed-captions"></div>
<section class="video-controls is-hidden">
<div class="slider"></div>
<div>
Expand Down
3 changes: 3 additions & 0 deletions common/lib/xmodule/xmodule/js/fixtures/video_hls.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,15 @@
<article class="video-wrapper">
<span tabindex="0" class="spinner" aria-hidden="false" aria-label="${_('Loading video player')}"></span>
<span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
<div class="video-player-pre"></div>
<section class="video-player">
<div id="id"></div>
<h4 class="hd hd-4 video-hls-error is-hidden">
Your browser does not support this video format. Try using a different browser.
</h4>
</section>
<div class="video-player-post"></div>
<div class="closed-captions"></div>
<section class="video-controls is-hidden"></section>
</article>
</div>
Expand Down
3 changes: 3 additions & 0 deletions common/lib/xmodule/xmodule/js/fixtures/video_html5.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,12 @@
<article class="video-wrapper">
<span tabindex="0" class="spinner" aria-hidden="false" aria-label="${_('Loading video player')}"></span>
<span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
<div class="video-player-pre"></div>
<section class="video-player">
<div id="id"></div>
</section>
<div class="video-player-post"></div>
<div class="closed-captions"></div>
<section class="video-controls is-hidden"></section>
</article>
</div>
Expand Down
3 changes: 3 additions & 0 deletions common/lib/xmodule/xmodule/js/fixtures/video_no_captions.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,12 @@
<article class="video-wrapper">
<span tabindex="0" class="spinner" aria-hidden="false" aria-label="${_('Loading video player')}"></span>
<span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
<div class="video-player-pre"></div>
<section class="video-player">
<iframe id="id"></iframe>
</section>
<div class="video-player-post"></div>
<div class="closed-captions"></div>
<section class="video-controls is-hidden"></section>
</article>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
<iframe id="id"></iframe>
</section>
<div class="video-player-post"></div>
<div class="closed-captions"></div>
<section class="video-controls is-hidden">
<div class="slider"></div>
<div>
Expand Down
Loading

0 comments on commit d08e199

Please sign in to comment.