Merge pull request #6765 from edx/andya/requirejs-in-lms
Add RequireJS to the LMS
This commit is contained in:
Andy Armstrong
@@ -1,4 +1,6 @@
|
||||
from edxmako.shortcuts import render_to_string
|
||||
from django.conf import settings as django_settings
|
||||
from staticfiles.storage import staticfiles_storage
|
||||
|
||||
from pipeline.conf import settings
|
||||
from pipeline.packager import Packager
|
||||
@@ -79,3 +81,78 @@ def render_individual_js(package, paths, templates=None):
|
||||
if templates:
|
||||
tags.append(render_inline_js(package, templates))
|
||||
return '\n'.join(tags)
|
||||
|
||||
|
||||
def render_require_js_path_overrides(path_overrides): # pylint: disable=invalid-name
|
||||
"""Render JavaScript to override default RequireJS paths.
|
||||
|
||||
The Django pipeline appends a hash to JavaScript files,
|
||||
so if the JS asset isn't included in the bundle for the page,
|
||||
we need to tell RequireJS where to look.
|
||||
|
||||
For example:
|
||||
|
||||
"js/vendor/jquery.min.js" --> "js/vendor/jquery.min.abcd1234"
|
||||
|
||||
We would then add a line in a <script> tag:
|
||||
|
||||
require.paths['jquery'] = 'js/vendor/jquery.min.abcd1234'
|
||||
|
||||
so that any reference to 'jquery' in a JavaScript module
|
||||
will cause RequireJS to load '/static/js/vendor/jquery.min.abcd1234.js'
|
||||
|
||||
If running in DEBUG mode (as in devstack), the resolved JavaScript URLs
|
||||
won't contain hashes, so the new paths will match the original paths.
|
||||
|
||||
Arguments:
|
||||
path_overrides (dict): Mapping of RequireJS module names to
|
||||
filesystem paths.
|
||||
|
||||
Returns:
|
||||
unicode: The HTML of the <script> tag with the path overrides.
|
||||
|
||||
"""
|
||||
# Render the <script> tag that overrides the paths defined in `require.paths`
|
||||
# Note: We don't use a Mako template to render this because Mako apparently
|
||||
# acquires a lock when loading templates, which can lead to a deadlock if
|
||||
# this function is called from within another template.
|
||||
html = ['<script type="text/javascript">']
|
||||
|
||||
# The rendered <script> tag with overrides should be included *after*
|
||||
# the application's RequireJS config, which defines a `require` object.
|
||||
# Just in case the `require` object hasn't been loaded, we create a default
|
||||
# object. This will avoid a JavaScript error that might cause the rest of the
|
||||
# page to fail; however, it may mean that these overrides won't be available
|
||||
# to RequireJS.
|
||||
html.extend([
|
||||
'var require = require || {};',
|
||||
'require.paths = require.paths || [];'
|
||||
])
|
||||
|
||||
# Specify override the base URL to point to STATIC_URL
|
||||
html.append(
|
||||
"require.baseUrl = '{url}'".format(
|
||||
url=django_settings.STATIC_URL
|
||||
)
|
||||
)
|
||||
|
||||
for module, url_path in path_overrides.iteritems():
|
||||
# Calculate the full URL, including any hashes added to the filename by the pipeline.
|
||||
# This will also include the base static URL (for example, "/static/") and the
|
||||
# ".js" extension.
|
||||
actual_url = staticfiles_storage.url(url_path)
|
||||
|
||||
# RequireJS assumes that every file it tries to load has a ".js" extension, so
|
||||
# we need to remove ".js" from the module path.
|
||||
# RequireJS also already has a base URL set to the base static URL, so we can remove that.
|
||||
path = actual_url.replace('.js', '').replace(django_settings.STATIC_URL, '')
|
||||
|
||||
# Add the path override to the inline JavaScript.
|
||||
html.append(
|
||||
"require.paths['{module}'] = '{path}';".format(
|
||||
module=module,
|
||||
path=path
|
||||
)
|
||||
)
|
||||
html.append('</script>')
|
||||
return "\n".join(html)
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
from staticfiles.storage import staticfiles_storage
|
||||
from pipeline_mako import compressed_css, compressed_js
|
||||
from django.utils.translation import get_language_bidi
|
||||
from require.templatetags.require import require_module
|
||||
%>
|
||||
|
||||
<%def name='url(file, raw=False)'><%
|
||||
@@ -37,6 +38,10 @@ except:
|
||||
%endif
|
||||
</%def>
|
||||
|
||||
<%def name='require_module(module)'>
|
||||
${require_module(module)}
|
||||
</%def>
|
||||
|
||||
<%def name="include(path)"><%
|
||||
from django.template.loaders.filesystem import _loader
|
||||
source, template_path = _loader.load_template_source(path)
|
||||
|
||||
0
common/djangoapps/pipeline_mako/tests/__init__.py
Normal file
0
common/djangoapps/pipeline_mako/tests/__init__.py
Normal file
29
common/djangoapps/pipeline_mako/tests/test_render.py
Normal file
29
common/djangoapps/pipeline_mako/tests/test_render.py
Normal file
@@ -0,0 +1,29 @@
|
||||
"""Tests for rendering functions in the mako pipeline. """
|
||||
|
||||
from django.test import TestCase
|
||||
from pipeline_mako import render_require_js_path_overrides
|
||||
|
||||
|
||||
class RequireJSPathOverridesTest(TestCase):
|
||||
"""Test RequireJS path overrides. """
|
||||
|
||||
OVERRIDES = {
|
||||
'jquery': 'js/vendor/jquery.min.js',
|
||||
'backbone': 'js/vendor/backbone-min.js',
|
||||
'text': 'js/vendor/text.js'
|
||||
}
|
||||
|
||||
OVERRIDES_JS = (
|
||||
"<script type=\"text/javascript\">\n"
|
||||
"var require = require || {};\n"
|
||||
"require.paths = require.paths || [];\n"
|
||||
"require.baseUrl = '/static/'\n"
|
||||
"require.paths['jquery'] = 'js/vendor/jquery.min';\n"
|
||||
"require.paths['text'] = 'js/vendor/text';\n"
|
||||
"require.paths['backbone'] = 'js/vendor/backbone-min';\n"
|
||||
"</script>"
|
||||
)
|
||||
|
||||
def test_requirejs_path_overrides(self):
|
||||
result = render_require_js_path_overrides(self.OVERRIDES)
|
||||
self.assertEqual(result, self.OVERRIDES_JS)
|
||||
0
common/lib/django_require/__init__.py
Normal file
0
common/lib/django_require/__init__.py
Normal file
13
common/lib/django_require/staticstorage.py
Normal file
13
common/lib/django_require/staticstorage.py
Normal file
@@ -0,0 +1,13 @@
|
||||
"""
|
||||
:class:`~django_require.staticstorage.OptimizedCachedRequireJsStorage`
|
||||
"""
|
||||
|
||||
from pipeline.storage import PipelineCachedStorage
|
||||
from require.storage import OptimizedFilesMixin
|
||||
|
||||
|
||||
class OptimizedCachedRequireJsStorage(OptimizedFilesMixin, PipelineCachedStorage):
|
||||
"""
|
||||
Custom storage backend that is used by Django-require.
|
||||
"""
|
||||
pass
|
||||
390
common/static/js/vendor/text.js
vendored
Normal file
390
common/static/js/vendor/text.js
vendored
Normal file
@@ -0,0 +1,390 @@
|
||||
/**
|
||||
* @license RequireJS text 2.0.12 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved.
|
||||
* Available via the MIT or new BSD license.
|
||||
* see: http://github.com/requirejs/text for details
|
||||
*/
|
||||
/*jslint regexp: true */
|
||||
/*global require, XMLHttpRequest, ActiveXObject,
|
||||
define, window, process, Packages,
|
||||
java, location, Components, FileUtils */
|
||||
|
||||
define(['module'], function (module) {
|
||||
'use strict';
|
||||
|
||||
var text, fs, Cc, Ci, xpcIsWindows,
|
||||
progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'],
|
||||
xmlRegExp = /^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im,
|
||||
bodyRegExp = /<body[^>]*>\s*([\s\S]+)\s*<\/body>/im,
|
||||
hasLocation = typeof location !== 'undefined' && location.href,
|
||||
defaultProtocol = hasLocation && location.protocol && location.protocol.replace(/\:/, ''),
|
||||
defaultHostName = hasLocation && location.hostname,
|
||||
defaultPort = hasLocation && (location.port || undefined),
|
||||
buildMap = {},
|
||||
masterConfig = (module.config && module.config()) || {};
|
||||
|
||||
text = {
|
||||
version: '2.0.12',
|
||||
|
||||
strip: function (content) {
|
||||
//Strips <?xml ...?> declarations so that external SVG and XML
|
||||
//documents can be added to a document without worry. Also, if the string
|
||||
//is an HTML document, only the part inside the body tag is returned.
|
||||
if (content) {
|
||||
content = content.replace(xmlRegExp, "");
|
||||
var matches = content.match(bodyRegExp);
|
||||
if (matches) {
|
||||
content = matches[1];
|
||||
}
|
||||
} else {
|
||||
content = "";
|
||||
}
|
||||
return content;
|
||||
},
|
||||
|
||||
jsEscape: function (content) {
|
||||
return content.replace(/(['\\])/g, '\\$1')
|
||||
.replace(/[\f]/g, "\\f")
|
||||
.replace(/[\b]/g, "\\b")
|
||||
.replace(/[\n]/g, "\\n")
|
||||
.replace(/[\t]/g, "\\t")
|
||||
.replace(/[\r]/g, "\\r")
|
||||
.replace(/[\u2028]/g, "\\u2028")
|
||||
.replace(/[\u2029]/g, "\\u2029");
|
||||
},
|
||||
|
||||
createXhr: masterConfig.createXhr || function () {
|
||||
//Would love to dump the ActiveX crap in here. Need IE 6 to die first.
|
||||
var xhr, i, progId;
|
||||
if (typeof XMLHttpRequest !== "undefined") {
|
||||
return new XMLHttpRequest();
|
||||
} else if (typeof ActiveXObject !== "undefined") {
|
||||
for (i = 0; i < 3; i += 1) {
|
||||
progId = progIds[i];
|
||||
try {
|
||||
xhr = new ActiveXObject(progId);
|
||||
} catch (e) {}
|
||||
|
||||
if (xhr) {
|
||||
progIds = [progId]; // so faster next time
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return xhr;
|
||||
},
|
||||
|
||||
/**
|
||||
* Parses a resource name into its component parts. Resource names
|
||||
* look like: module/name.ext!strip, where the !strip part is
|
||||
* optional.
|
||||
* @param {String} name the resource name
|
||||
* @returns {Object} with properties "moduleName", "ext" and "strip"
|
||||
* where strip is a boolean.
|
||||
*/
|
||||
parseName: function (name) {
|
||||
var modName, ext, temp,
|
||||
strip = false,
|
||||
index = name.indexOf("."),
|
||||
isRelative = name.indexOf('./') === 0 ||
|
||||
name.indexOf('../') === 0;
|
||||
|
||||
if (index !== -1 && (!isRelative || index > 1)) {
|
||||
modName = name.substring(0, index);
|
||||
ext = name.substring(index + 1, name.length);
|
||||
} else {
|
||||
modName = name;
|
||||
}
|
||||
|
||||
temp = ext || modName;
|
||||
index = temp.indexOf("!");
|
||||
if (index !== -1) {
|
||||
//Pull off the strip arg.
|
||||
strip = temp.substring(index + 1) === "strip";
|
||||
temp = temp.substring(0, index);
|
||||
if (ext) {
|
||||
ext = temp;
|
||||
} else {
|
||||
modName = temp;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
moduleName: modName,
|
||||
ext: ext,
|
||||
strip: strip
|
||||
};
|
||||
},
|
||||
|
||||
xdRegExp: /^((\w+)\:)?\/\/([^\/\\]+)/,
|
||||
|
||||
/**
|
||||
* Is an URL on another domain. Only works for browser use, returns
|
||||
* false in non-browser environments. Only used to know if an
|
||||
* optimized .js version of a text resource should be loaded
|
||||
* instead.
|
||||
* @param {String} url
|
||||
* @returns Boolean
|
||||
*/
|
||||
useXhr: function (url, protocol, hostname, port) {
|
||||
var uProtocol, uHostName, uPort,
|
||||
match = text.xdRegExp.exec(url);
|
||||
if (!match) {
|
||||
return true;
|
||||
}
|
||||
uProtocol = match[2];
|
||||
uHostName = match[3];
|
||||
|
||||
uHostName = uHostName.split(':');
|
||||
uPort = uHostName[1];
|
||||
uHostName = uHostName[0];
|
||||
|
||||
return (!uProtocol || uProtocol === protocol) &&
|
||||
(!uHostName || uHostName.toLowerCase() === hostname.toLowerCase()) &&
|
||||
((!uPort && !uHostName) || uPort === port);
|
||||
},
|
||||
|
||||
finishLoad: function (name, strip, content, onLoad) {
|
||||
content = strip ? text.strip(content) : content;
|
||||
if (masterConfig.isBuild) {
|
||||
buildMap[name] = content;
|
||||
}
|
||||
onLoad(content);
|
||||
},
|
||||
|
||||
load: function (name, req, onLoad, config) {
|
||||
//Name has format: some.module.filext!strip
|
||||
//The strip part is optional.
|
||||
//if strip is present, then that means only get the string contents
|
||||
//inside a body tag in an HTML string. For XML/SVG content it means
|
||||
//removing the <?xml ...?> declarations so the content can be inserted
|
||||
//into the current doc without problems.
|
||||
|
||||
// Do not bother with the work if a build and text will
|
||||
// not be inlined.
|
||||
if (config && config.isBuild && !config.inlineText) {
|
||||
onLoad();
|
||||
return;
|
||||
}
|
||||
|
||||
masterConfig.isBuild = config && config.isBuild;
|
||||
|
||||
var parsed = text.parseName(name),
|
||||
nonStripName = parsed.moduleName +
|
||||
(parsed.ext ? '.' + parsed.ext : ''),
|
||||
url = req.toUrl(nonStripName),
|
||||
useXhr = (masterConfig.useXhr) ||
|
||||
text.useXhr;
|
||||
|
||||
// Do not load if it is an empty: url
|
||||
if (url.indexOf('empty:') === 0) {
|
||||
onLoad();
|
||||
return;
|
||||
}
|
||||
|
||||
//Load the text. Use XHR if possible and in a browser.
|
||||
if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) {
|
||||
text.get(url, function (content) {
|
||||
text.finishLoad(name, parsed.strip, content, onLoad);
|
||||
}, function (err) {
|
||||
if (onLoad.error) {
|
||||
onLoad.error(err);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
//Need to fetch the resource across domains. Assume
|
||||
//the resource has been optimized into a JS module. Fetch
|
||||
//by the module name + extension, but do not include the
|
||||
//!strip part to avoid file system issues.
|
||||
req([nonStripName], function (content) {
|
||||
text.finishLoad(parsed.moduleName + '.' + parsed.ext,
|
||||
parsed.strip, content, onLoad);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
write: function (pluginName, moduleName, write, config) {
|
||||
if (buildMap.hasOwnProperty(moduleName)) {
|
||||
var content = text.jsEscape(buildMap[moduleName]);
|
||||
write.asModule(pluginName + "!" + moduleName,
|
||||
"define(function () { return '" +
|
||||
content +
|
||||
"';});\n");
|
||||
}
|
||||
},
|
||||
|
||||
writeFile: function (pluginName, moduleName, req, write, config) {
|
||||
var parsed = text.parseName(moduleName),
|
||||
extPart = parsed.ext ? '.' + parsed.ext : '',
|
||||
nonStripName = parsed.moduleName + extPart,
|
||||
//Use a '.js' file name so that it indicates it is a
|
||||
//script that can be loaded across domains.
|
||||
fileName = req.toUrl(parsed.moduleName + extPart) + '.js';
|
||||
|
||||
//Leverage own load() method to load plugin value, but only
|
||||
//write out values that do not have the strip argument,
|
||||
//to avoid any potential issues with ! in file names.
|
||||
text.load(nonStripName, req, function (value) {
|
||||
//Use own write() method to construct full module value.
|
||||
//But need to create shell that translates writeFile's
|
||||
//write() to the right interface.
|
||||
var textWrite = function (contents) {
|
||||
return write(fileName, contents);
|
||||
};
|
||||
textWrite.asModule = function (moduleName, contents) {
|
||||
return write.asModule(moduleName, fileName, contents);
|
||||
};
|
||||
|
||||
text.write(pluginName, nonStripName, textWrite, config);
|
||||
}, config);
|
||||
}
|
||||
};
|
||||
|
||||
if (masterConfig.env === 'node' || (!masterConfig.env &&
|
||||
typeof process !== "undefined" &&
|
||||
process.versions &&
|
||||
!!process.versions.node &&
|
||||
!process.versions['node-webkit'])) {
|
||||
//Using special require.nodeRequire, something added by r.js.
|
||||
fs = require.nodeRequire('fs');
|
||||
|
||||
text.get = function (url, callback, errback) {
|
||||
try {
|
||||
var file = fs.readFileSync(url, 'utf8');
|
||||
//Remove BOM (Byte Mark Order) from utf8 files if it is there.
|
||||
if (file.indexOf('\uFEFF') === 0) {
|
||||
file = file.substring(1);
|
||||
}
|
||||
callback(file);
|
||||
} catch (e) {
|
||||
if (errback) {
|
||||
errback(e);
|
||||
}
|
||||
}
|
||||
};
|
||||
} else if (masterConfig.env === 'xhr' || (!masterConfig.env &&
|
||||
text.createXhr())) {
|
||||
text.get = function (url, callback, errback, headers) {
|
||||
var xhr = text.createXhr(), header;
|
||||
xhr.open('GET', url, true);
|
||||
|
||||
//Allow plugins direct access to xhr headers
|
||||
if (headers) {
|
||||
for (header in headers) {
|
||||
if (headers.hasOwnProperty(header)) {
|
||||
xhr.setRequestHeader(header.toLowerCase(), headers[header]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Allow overrides specified in config
|
||||
if (masterConfig.onXhr) {
|
||||
masterConfig.onXhr(xhr, url);
|
||||
}
|
||||
|
||||
xhr.onreadystatechange = function (evt) {
|
||||
var status, err;
|
||||
//Do not explicitly handle errors, those should be
|
||||
//visible via console output in the browser.
|
||||
if (xhr.readyState === 4) {
|
||||
status = xhr.status || 0;
|
||||
if (status > 399 && status < 600) {
|
||||
//An http 4xx or 5xx error. Signal an error.
|
||||
err = new Error(url + ' HTTP status: ' + status);
|
||||
err.xhr = xhr;
|
||||
if (errback) {
|
||||
errback(err);
|
||||
}
|
||||
} else {
|
||||
callback(xhr.responseText);
|
||||
}
|
||||
|
||||
if (masterConfig.onXhrComplete) {
|
||||
masterConfig.onXhrComplete(xhr, url);
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.send(null);
|
||||
};
|
||||
} else if (masterConfig.env === 'rhino' || (!masterConfig.env &&
|
||||
typeof Packages !== 'undefined' && typeof java !== 'undefined')) {
|
||||
//Why Java, why is this so awkward?
|
||||
text.get = function (url, callback) {
|
||||
var stringBuffer, line,
|
||||
encoding = "utf-8",
|
||||
file = new java.io.File(url),
|
||||
lineSeparator = java.lang.System.getProperty("line.separator"),
|
||||
input = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(file), encoding)),
|
||||
content = '';
|
||||
try {
|
||||
stringBuffer = new java.lang.StringBuffer();
|
||||
line = input.readLine();
|
||||
|
||||
// Byte Order Mark (BOM) - The Unicode Standard, version 3.0, page 324
|
||||
// http://www.unicode.org/faq/utf_bom.html
|
||||
|
||||
// Note that when we use utf-8, the BOM should appear as "EF BB BF", but it doesn't due to this bug in the JDK:
|
||||
// http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=4508058
|
||||
if (line && line.length() && line.charAt(0) === 0xfeff) {
|
||||
// Eat the BOM, since we've already found the encoding on this file,
|
||||
// and we plan to concatenating this buffer with others; the BOM should
|
||||
// only appear at the top of a file.
|
||||
line = line.substring(1);
|
||||
}
|
||||
|
||||
if (line !== null) {
|
||||
stringBuffer.append(line);
|
||||
}
|
||||
|
||||
while ((line = input.readLine()) !== null) {
|
||||
stringBuffer.append(lineSeparator);
|
||||
stringBuffer.append(line);
|
||||
}
|
||||
//Make sure we return a JavaScript string and not a Java string.
|
||||
content = String(stringBuffer.toString()); //String
|
||||
} finally {
|
||||
input.close();
|
||||
}
|
||||
callback(content);
|
||||
};
|
||||
} else if (masterConfig.env === 'xpconnect' || (!masterConfig.env &&
|
||||
typeof Components !== 'undefined' && Components.classes &&
|
||||
Components.interfaces)) {
|
||||
//Avert your gaze!
|
||||
Cc = Components.classes;
|
||||
Ci = Components.interfaces;
|
||||
Components.utils['import']('resource://gre/modules/FileUtils.jsm');
|
||||
xpcIsWindows = ('@mozilla.org/windows-registry-key;1' in Cc);
|
||||
|
||||
text.get = function (url, callback) {
|
||||
var inStream, convertStream, fileObj,
|
||||
readData = {};
|
||||
|
||||
if (xpcIsWindows) {
|
||||
url = url.replace(/\//g, '\\');
|
||||
}
|
||||
|
||||
fileObj = new FileUtils.File(url);
|
||||
|
||||
//XPCOM, you so crazy
|
||||
try {
|
||||
inStream = Cc['@mozilla.org/network/file-input-stream;1']
|
||||
.createInstance(Ci.nsIFileInputStream);
|
||||
inStream.init(fileObj, 1, 0, false);
|
||||
|
||||
convertStream = Cc['@mozilla.org/intl/converter-input-stream;1']
|
||||
.createInstance(Ci.nsIConverterInputStream);
|
||||
convertStream.init(inStream, "utf-8", inStream.available(),
|
||||
Ci.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER);
|
||||
|
||||
convertStream.readString(inStream.available(), readData);
|
||||
convertStream.close();
|
||||
inStream.close();
|
||||
callback(readData.value);
|
||||
} catch (e) {
|
||||
throw new Error((fileObj && fileObj.path || '') + ': ' + e);
|
||||
}
|
||||
};
|
||||
}
|
||||
return text;
|
||||
});
|
||||
Reference in New Issue
Block a user