L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-62497 javascript: add babel transpiling to Grunt for ES6 support

Browse Source
This commit is contained in:
Ryan Wyllie
2019-07-19 14:12:48 +08:00
committed by Andrew Nicols
parent 67b2262938
commit c53f86d408
10 changed files with 2976 additions and 1055 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintignore
+1 -1
View File
@@ -82,4 +82,4 @@ theme/boost/amd/src/tab.js
theme/boost/amd/src/tooltip.js
theme/boost/amd/src/util.js
theme/boost/amd/src/tether.js
theme/boost/scss/fontawesome/
theme/boost/scss/fontawesome/
.eslintrc
+36 -1
View File
@@ -1,5 +1,6 @@
{
'plugins': [
'babel',
'promise',
],
'env': {
@@ -204,10 +205,44 @@
},
{
files: ["**/amd/src/*.js"],
// We support es6 now. Woot!
env: {
es6: true
},
// We're using babel transpiling so use their parser
// for linting.
parser: 'babel-eslint',
// Check AMD with some slightly stricter rules.
rules: {
'no-unused-vars': 'error',
'no-implicit-globals': 'error'
'no-implicit-globals': 'error',
// Disable all of the rules that have babel versions.
'new-cap': 'off',
// Not using this rule for the time being because it isn't
// compatible with jQuery and ES6.
'no-invalid-this': 'off',
'object-curly-spacing': 'off',
'quotes': 'off',
'semi': 'off',
'no-unused-expressions': 'off',
// Enable all of the babel version of these rules.
'babel/new-cap': ['warn', { 'properties': false }],
// Not using this rule for the time being because it isn't
// compatible with jQuery and ES6.
'babel/no-invalid-this': 'off',
'babel/object-curly-spacing': 'warn',
// This is off in the original style int.
'babel/quotes': 'off',
'babel/semi': 'error',
'babel/no-unused-expressions': 'error',
// === Promises ===
// We have Promise now that we're using ES6.
'promise/no-native': 'off',
'promise/avoid-new': 'off'
},
parserOptions: {
'ecmaVersion': 9,
'sourceType': 'module'
}
}
]
.stylelintignore
+1 -1
View File
@@ -83,4 +83,4 @@ theme/boost/amd/src/tab.js
theme/boost/amd/src/tooltip.js
theme/boost/amd/src/util.js
theme/boost/amd/src/tether.js
theme/boost/scss/fontawesome/
theme/boost/scss/fontawesome/
Gruntfile.js
+48 -8
View File
@@ -67,7 +67,7 @@ module.exports = function(grunt) {
* @param {String} srcPath the matched src path
* @return {String} The rewritten destination path.
*/
var uglifyRename = function(destPath, srcPath) {
var babelRename = function(destPath, srcPath) {
destPath = srcPath.replace('src', 'build');
destPath = destPath.replace('.js', '.min.js');
destPath = path.resolve(cwd, destPath);
@@ -116,14 +116,53 @@ module.exports = function(grunt) {
// Check YUI module source files.
yui: {src: ['**/yui/src/**/*.js', '!*/**/yui/src/*/meta/*.js']}
},
uglify: {
amd: {
babel: {
options: {
sourceMaps: true,
comments: false,
plugins: [
'transform-es2015-modules-amd-lazy',
// This plugin modifies the Babel transpiling for "export default"
// so that if it's used then only the exported value is returned
// by the generated AMD module.
//
// It also adds the Moodle plugin name to the AMD module definition
// so that it can be imported as expected in other modules.
path.resolve('babel-plugin-add-module-to-define.js'),
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-syntax-import-meta',
['@babel/plugin-proposal-class-properties', {'loose': false}],
'@babel/plugin-proposal-json-strings'
],
presets: [
['minify', {
// This minification plugin needs to be disabled because it breaks the
// source map generation and causes invalid source maps to be output.
simplify: false,
builtIns: false
}],
['@babel/preset-env', {
targets: {
browsers: [
">0.25%",
"last 2 versions",
"not ie <= 10",
"not op_mini all",
"not Opera > 0",
"not dead"
]
},
modules: false,
useBuiltIns: false
}]
]
},
dist: {
files: [{
expand: true,
src: amdSrc,
rename: uglifyRename
}],
options: {report: 'none'}
rename: babelRename
}]
}
},
sass: {
@@ -330,9 +369,9 @@ module.exports = function(grunt) {
var files = Object.keys(changedFiles);
grunt.config('eslint.amd.src', files);
grunt.config('eslint.yui.src', files);
grunt.config('uglify.amd.files', [{expand: true, src: files, rename: uglifyRename}]);
grunt.config('shifter.options.paths', files);
grunt.config('gherkinlint.options.files', files);
grunt.config('babel.dist.files', [{expand: true, src: files, rename: babelRename}]);
changedFiles = Object.create(null);
}, 200);
@@ -347,13 +386,14 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-eslint');
grunt.loadNpmTasks('grunt-stylelint');
grunt.loadNpmTasks('grunt-babel');
// Register JS tasks.
grunt.registerTask('shifter', 'Run Shifter against the current directory', tasks.shifter);
grunt.registerTask('gherkinlint', 'Run gherkinlint against the current directory', tasks.gherkinlint);
grunt.registerTask('ignorefiles', 'Generate ignore files for linters', tasks.ignorefiles);
grunt.registerTask('yui', ['eslint:yui', 'shifter']);
grunt.registerTask('amd', ['eslint:amd', 'uglify']);
grunt.registerTask('amd', ['eslint:amd', 'babel']);
grunt.registerTask('js', ['amd', 'yui']);
// Register CSS taks.
babel-plugin-add-module-to-define.js
+205
View File
@@ -0,0 +1,205 @@
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* This is a babel plugin to add the Moodle module names to the AMD modules
* as part of the transpiling process.
*
* In addition it will also add a return statement for the default export if the
* module is using default exports. This is a highly specific Moodle thing because
* we're transpiling to AMD and none of the existing Babel 7 plugins work correctly.
*
* This will fix the issue where an ES6 module using "export default Foo" will be
* transpiled into an AMD module that returns {default: Foo}; Instead it will now
* just simply return Foo.
*
* Note: This means all other named exports in that module are ignored and won't be
* exported.
*
* @copyright 2018 Ryan Wyllie <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
"use strict";
module.exports = ({ template, types }) => {
const fs = require('fs');
const glob = require('glob');
const cwd = process.cwd();
// Static variable to hold the modules.
let moodleSubsystems = null;
let moodlePlugins = null;
/**
* Parse Moodle's JSON files containing the lists of components.
*
* The values are stored in the static variables because we
* only need to load them once per transpiling run.
*/
function loadMoodleModules() {
moodleSubsystems = {'lib': 'core'};
moodlePlugins = {};
let components = fs.readFileSync('lib/components.json');
components = JSON.parse(components);
for (const [component, path] of Object.entries(components.subsystems)) {
if (path) {
// Prefix "core_" to the front of the subsystems.
moodleSubsystems[path] = `core_${component}`;
}
}
for (const [component, path] of Object.entries(components.plugintypes)) {
if (path) {
moodlePlugins[path] = component;
}
}
for (const file of glob.sync('**/db/subplugins.json')) {
var rawContents = fs.readFileSync(file);
var subplugins = JSON.parse(rawContents);
for (const [component, path] of Object.entries(subplugins)) {
if (path) {
moodlePlugins[path] = component;
}
}
}
}
/**
* Search the list of components that match the given file name
* and return the Moodle component for that file, if found.
*
* Throw an exception if no matching component is found.
*
* @throws {Error}
* @param {string} searchFileName The file name to look for.
* @return {string} Moodle component
*/
function getModuleNameFromFileName(searchFileName) {
searchFileName = fs.realpathSync(searchFileName);
const relativeFileName = searchFileName.replace(`${cwd}/`, '');
const [componentPath, file] = relativeFileName.split('/amd/src/');
const fileName = file.replace('.js', '');
// Check subsystems first which require an exact match.
if (moodleSubsystems.hasOwnProperty(componentPath)) {
return `${moodleSubsystems[componentPath]}/${fileName}`;
}
// It's not a subsystem so it must be a plugin. Moodle defines root folders
// where plugins can be installed so our path with be <plugin_root>/<plugin_name>.
// Let's separate the two.
let pathParts = componentPath.split('/');
const pluginName = pathParts.pop();
const pluginPath = pathParts.join('/');
// The plugin path mutch match exactly because some plugins are subplugins of
// other plugins which means their paths would partially match.
if (moodlePlugins.hasOwnProperty(pluginPath)) {
return `${moodlePlugins[pluginPath]}_${pluginName}/${fileName}`;
}
// This matches the previous PHP behaviour that would throw an exception
// if it couldn't parse an AMD file.
throw new Error('Unable to find module name for ' + searchFileName);
}
// This is heavily inspired by the babel-plugin-add-module-exports plugin.
// See: https://github.com/59naga/babel-plugin-add-module-exports
//
// This is used when we detect a module using "export default Foo;" to make
// sure the transpiled code just returns Foo directly rather than an object
// with the default property (i.e. {default: Foo}).
//
// Note: This means that we can't support modules that combine named exports
// with a default export.
function addModuleExportsDefaults(path, exportObjectName) {
const rootPath = path.findParent(path => {
return path.key === 'body' || !path.parentPath;
});
// HACK: `path.node.body.push` instead of path.pushContainer(due doesn't work in Plugin.post).
// This is hardcoded to work specifically with AMD.
rootPath.node.body.push(template(`return ${exportObjectName}.default`)())
}
return {
pre() {
this.seenDefine = false;
this.addedReturnForDefaultExport = false;
if (moodleSubsystems === null) {
loadMoodleModules();
}
},
visitor: {
// Plugin ordering is only respected if we visit the "Program" node.
// See: https://babeljs.io/docs/en/plugins.html#plugin-preset-ordering
//
// We require this to run after the other AMD module transformation so
// let's visit the "Program" node.
Program: {
exit(path) {
path.traverse({
CallExpression(path) {
// If we find a "define" function call.
if (!this.seenDefine && path.get('callee').isIdentifier({name: 'define'})) {
// We only want to modify the first instance of define that we find.
this.seenDefine = true;
// Get the Moodle component for the file being processed.
var moduleName = getModuleNameFromFileName(this.file.opts.filename);
// Add the module name as the first argument to the define function.
path.node.arguments.unshift(types.stringLiteral(moduleName));
// Add a space after the define function in the built file so that previous versions
// of Moodle will not try to add the module name to the file when it's being served
// by PHP. This forces the regex in PHP to not match for this file.
path.node.callee.name = 'define ';
}
// Check for any Object.defineProperty('exports', 'default') calls.
if (!this.addedReturnForDefaultExport && path.get('callee').matchesPattern('Object.defineProperty')) {
const [identifier, prop] = path.get('arguments')
const objectName = identifier.get('name').node
const propertyName = prop.get('value').node
if ((objectName === 'exports' || objectName === '_exports') && propertyName === 'default') {
addModuleExportsDefaults(path, objectName);
this.addedReturnForDefaultExport = true;
}
}
},
AssignmentExpression(path) {
// Check for an exports.default assignments.
if (
!this.addedReturnForDefaultExport &&
(
path.get('left').matchesPattern('exports.default') ||
path.get('left').matchesPattern('_exports.default')
)
) {
const objectName = path.get('left.object.name').node;
addModuleExportsDefaults(path, objectName);
this.addedReturnForDefaultExport = true;
}
}
}, this);
}
}
}
};
};
lib/classes/requirejs.php
+4 -3
View File
@@ -75,9 +75,10 @@ class core_requirejs {
* <componentdir>/amd/src/modulename.js
*
* @param boolean $debug If true, returns the paths to the original (unminified) source files.
* @param boolean $includelazy If true, includes modules with the -lazy suffix.
* @return array $files An array of mappings from module names to file paths.
*/
public static function find_all_amd_modules($debug = false) {
public static function find_all_amd_modules($debug = false, $includelazy = false) {
global $CFG;
$jsdirs = array();
@@ -118,8 +119,8 @@ class core_requirejs {
$extension = $item->getExtension();
if ($extension === 'js') {
$filename = str_replace('.min', '', $item->getBaseName('.js'));
// We skip lazy loaded modules.
if (strpos($filename, '-lazy') === false) {
// We skip lazy loaded modules unless specifically requested.
if ($includelazy || strpos($filename, '-lazy') === false) {
$modulename = $component . '/' . $filename;
$jsfiles[$modulename] = $item->getRealPath();
}
lib/jssourcemap.php
+133
View File
@@ -0,0 +1,133 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* This file is serving the javascript source map.
*
* @package core
* @copyright 2019 Ryan Wyllie
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
// Disable moodle specific debug messages and any errors in output,
// comment out when debugging or better look into error log!
define('NO_DEBUG_DISPLAY', true);
// We need just the values from config.php and minlib.php.
define('ABORT_AFTER_CONFIG', true);
require('../config.php'); // This stops immediately at the beginning of lib/setup.php.
require_once("$CFG->dirroot/lib/jslib.php");
require_once("$CFG->dirroot/lib/classes/requirejs.php");
$slashargument = min_get_slash_argument();
if (!$slashargument) {
// The above call to min_get_slash_argument should always work.
die('Invalid request');
}
$slashargument = ltrim($slashargument, '/');
if (substr_count($slashargument, '/') < 1) {
header('HTTP/1.0 404 not found');
die('Slash argument must contain both a revision and a file path');
}
// Split into revision and module name.
list($rev, $file) = explode('/', $slashargument, 2);
$rev = min_clean_param($rev, 'INT');
$file = '/' . min_clean_param($file, 'SAFEPATH');
// Only load js files from the js modules folder from the components.
$jsfiles = array();
list($unused, $component, $module) = explode('/', $file, 3);
// No subdirs allowed - only flat module structure please.
if (strpos('/', $module) !== false) {
die('Invalid module');
}
// Some (huge) modules are better loaded lazily (when they are used). If we are requesting
// one of these modules, only return the one module, not the combo.
$lazysuffix = "-lazy.js";
$lazyload = (strpos($module, $lazysuffix) !== false);
if ($lazyload) {
$jsfiles = core_requirejs::find_one_amd_module($component, $module, false);
} else {
$jsfiles = core_requirejs::find_all_amd_modules(false);
}
// Create the empty source map.
$map = [
'version' => 3,
'file' => $CFG->wwwroot . '/lib/requirejs.php/' . $slashargument,
'sections' => []
];
$line = 0;
// Sort the files to ensure consistent ordering for source map generation.
asort($jsfiles);
foreach ($jsfiles as $modulename => $jsfile) {
$shortfilename = str_replace($CFG->dirroot, '', $jsfile);
$srcfilename = str_replace('/amd/build/', '/amd/src/', $shortfilename);
$srcfilename = str_replace('.min.js', '.js', $srcfilename);
$mapfile = $jsfile . '.map';
if (file_exists($mapfile)) {
$mapdata = file_get_contents($mapfile);
$mapdata = json_decode($mapdata, true);
unset($mapdata['sourcesContent']);
$mapdata['sources'][0] = $CFG->wwwroot . $srcfilename;
$map['sections'][] = [
'offset' => [
'line' => $line,
'column' => 0
],
'map' => $mapdata
];
$js = file_get_contents($jsfile);
// Remove source map link.
$js = preg_replace('~//# sourceMappingURL.*$~s', '', $js);
} else {
// No sourcemap for this section which means we will have returned the original
// source file to the browser. We have to provide an empty source map to
// ensure that this section is not treated as part of the previous map.
$map['sections'][] = [
'offset' => [
'line' => $line,
'column' => 0,
],
'map' => [
'version' => 3,
'file' => $shortfilename,
'sources' => [$CFG->wwwroot . $srcfilename],
'sourcesContent' => [null],
'names' => [],
'mappings' => ''
]
];
// Load the original source file to calculate the number of lines we'll need to
// skip forward for the next source map section.
$js = file_get_contents($CFG->dirroot . $srcfilename);
}
$js = rtrim($js);
$line += substr_count($js, "\n") + 1;
}
js_send_uncached(json_encode($map), 'jssourcemap.php');
lib/requirejs.php
+64 -20
View File
@@ -104,12 +104,20 @@ if ($rev > 0 and $rev < (time() + 60 * 60)) {
$content = $js . $content;
continue;
}
// Remove source map link.
$js = preg_replace('~//# sourceMappingURL.*$~s', '', $js);
$js = rtrim($js);
$js .= "\n";
// Inject the module name into the define.
$replace = 'define(\'' . $modulename . '\', ';
$search = 'define(';
// Replace only the first occurrence.
$js = implode($replace, explode($search, $js, 2));
if (preg_match('/define\(\s*\[/', $js)) {
// If the JavaScript module has been defined without specifying a name then we'll
// add the Moodle module name now.
$replace = 'define(\'' . $modulename . '\', ';
$search = 'define(';
// Replace only the first occurrence.
$js = implode($replace, explode($search, $js, 2));
}
$content .= $js;
}
@@ -123,29 +131,65 @@ if ($rev > 0 and $rev < (time() + 60 * 60)) {
}
}
// Ok, now we need to start normal moodle because we need access to the autoloader.
define('ABORT_AFTER_CONFIG_CANCEL', true);
// Session not used here.
define('NO_MOODLE_COOKIES', true);
// Ignore upgrade check.
define('NO_UPGRADE_CHECK', true);
require("$CFG->dirroot/lib/setup.php");
if ($lazyload) {
$jsfiles = core_requirejs::find_one_amd_module($component, $module, true);
$jsfiles = core_requirejs::find_one_amd_module($component, $module, false);
} else {
$jsfiles = core_requirejs::find_all_amd_modules(true);
$jsfiles = core_requirejs::find_all_amd_modules(false);
}
$content = '';
// The content of the resulting file.
$result = [];
// Sort the files to ensure consistent ordering for source map generation.
asort($jsfiles);
foreach ($jsfiles as $modulename => $jsfile) {
$shortfilename = str_replace($CFG->dirroot, '', $jsfile);
$js = "// ---- $shortfilename ----\n";
$js .= file_get_contents($jsfile) . "\n";
// Inject the module name into the define.
$replace = 'define(\'' . $modulename . '\', ';
$search = 'define(';
$mapfile = $jsfile . '.map';
if (strpos($js, $search) === false) {
// We can't call debugging because we only have minimal config loaded.
header('HTTP/1.0 500 error');
die('JS file: ' . $shortfilename . ' cannot be loaded, or does not contain a javascript module in AMD format. "define()" not found.');
if (file_exists($mapfile)) {
// We've got a a source map file so we can return the minified file here and
// the source map will be used by the browser to debug.
$js = file_get_contents($jsfile);
// Remove source map link from the individual file because we add back a single
// source map link to the whole file at the end.
$js = preg_replace('~//# sourceMappingURL.*$~s', '', $js);
} else {
// This file doesn't have a map file. We might be dealing with an older source file from
// a plugin or previous version of Moodle so we should just return the full original source
// like we used to.
$originalsource = str_replace('/amd/build/', '/amd/src/', $jsfile);
$originalsource = str_replace('.min.js', '.js', $originalsource);
$js = file_get_contents($originalsource);
}
// Replace only the first occurrence.
$js = implode($replace, explode($search, $js, 2));
$content .= $js;
$js = rtrim($js);
if (preg_match('/define\(\s*\[/', $js)) {
// If the JavaScript module has been defined without specifying a name then we'll
// add the Moodle module name now.
$replace = 'define(\'' . $modulename . '\', ';
// Replace only the first occurrence.
$js = implode($replace, explode('define(', $js, 2));
} else if (!preg_match('/define\s*\(/', $js)) {
debugging('JS file: ' . $shortfilename . ' cannot be loaded, or does not contain a javascript' .
' module in AMD format. "define()" not found.', DEBUG_DEVELOPER);
}
$result[] = $js;
}
$mapdataurl = '//# sourceMappingURL=' . (new \moodle_url('/lib/jssourcemap.php/' . $slashargument))->out();
$result[] = $mapdataurl;
$content = implode("\n", $result);
js_send_uncached($content, 'requirejs.php');
npm-shrinkwrap.json
Generated
+2470 -1020
View File
File diff suppressed because it is too large Load Diff
package.json
+14 -1
View File
@@ -3,11 +3,24 @@
"private": true,
"description": "Moodle",
"devDependencies": {
"@babel/core": "7.4.5",
"@babel/plugin-proposal-class-properties": "7.4.4",
"@babel/plugin-proposal-json-strings": "7.2.0",
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/plugin-syntax-import-meta": "7.2.0",
"@babel/preset-env": "7.4.5",
"ajv": "6.9.1",
"async": "1.5.2",
"eslint": "4.6.1",
"babel-eslint": "10.0.1",
"babel-plugin-transform-es2015-modules-amd-lazy": "2.0.1",
"babel-preset-minify": "0.5.0",
"eslint": "4.12.1",
"eslint-plugin-babel": "5.3.0",
"eslint-plugin-promise": "3.5.0",
"gherkin-lint": "1.1.3",
"glob": "7.1.3",
"grunt": "1.0.1",
"grunt-babel": "8.0.0",
"grunt-contrib-uglify": "1.0.1",
"grunt-contrib-watch": "1.0.0",
"grunt-eslint": "20.1.0",