Skip to content

Commit

Permalink
MDL-62497 javascript: add babel transpiling to Grunt for ES6 support
Browse files Browse the repository at this point in the history
  • Loading branch information
ryanwyllie authored and andrewnicols committed Jul 19, 2019
1 parent 67b2262 commit c53f86d
Show file tree
Hide file tree
Showing 10 changed files with 3,053 additions and 1,132 deletions.
2 changes: 1 addition & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -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/
37 changes: 36 additions & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
'plugins': [
'babel',
'promise',
],
'env': {
Expand Down Expand Up @@ -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'
}
}
]
Expand Down
2 changes: 1 addition & 1 deletion .stylelintignore
Original file line number Diff line number Diff line change
Expand Up @@ -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/
56 changes: 48 additions & 8 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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);

Expand All @@ -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.
Expand Down
205 changes: 205 additions & 0 deletions babel-plugin-add-module-to-define.js
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
};
};
7 changes: 4 additions & 3 deletions lib/classes/requirejs.php
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,10 @@ public static function find_one_amd_module($component, $jsfilename, $debug = fal
* <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();
Expand Down Expand Up @@ -118,8 +119,8 @@ public static function find_all_amd_modules($debug = false) {
$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();
}
Expand Down
Loading

0 comments on commit c53f86d

Please sign in to comment.