[4.0] Transpile es6 files (joomla#20954)

* Transpile es6 files as part of the --compilejs command * Update compile-es6.js * Update compilejs.js * Update compilejs.js * Update compilejs.js * fix all - Es6 everywhere (CLI) - Fix the incompatible html page for sub folders - ES6 transpiling when using —compilejs * again * m * mm * mmm
sakiss · Jul 5, 2018 · c6946c0 · c6946c0
1 parent fe39161
commit c6946c0
Show file tree

Hide file tree

Showing 19 changed files with 1,371 additions and 1,208 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,5 +1,5 @@
 # A list of files to ignore from linting
-*.js
 !*.es6.js
-!build/**/*.js
+build/**/**/*.js
 *.vue
+build/incompatible_page/*.js
diff --git a/administrator/index.php b/administrator/index.php
@@ -19,8 +19,8 @@
 {
 	die(
 		str_replace(
-			array('{{PHP_VERSION}}', '{{BASEPATH}}'),
-			array(JOOMLA_MINIMUM_PHP, 'http://' . $_SERVER['SERVER_NAME'] . '/'),
+			'{{PHP_VERSION}}',
+			JOOMLA_MINIMUM_PHP,
 			file_get_contents(dirname(__FILE__) . '/../templates/system/incompatible.html')
 		)
 	);

diff --git a/build.js b/build.js
@@ -5,91 +5,104 @@
  * node build.js --installer
  * node build.js --update
  * node build.js --compilejs
+ * node build.js --compilecejs
  * node build.js --compilecss
+ * node build.js --compilececss
  * Before making any PRs or building any package!
  *
  */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
 const Program = require('commander');
-const Chalk = require('chalk');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const chalk = require('chalk');
 
 // Joomla Build modules
 const installer = require('./build/build-modules-js/installation.js');
 const update = require('./build/build-modules-js/update.js');
 const css = require('./build/build-modules-js/compilescss.js');
 const Js = require('./build/build-modules-js/compilejs.js');
-const CEscss = require('./build/build-modules-js/compilecescss.js');
+const CEcss = require('./build/build-modules-js/compilecescss.js');
 const CEjs = require('./build/build-modules-js/compilecejs.js');
 
 // The settings
 const options = require('./package.json');
+const settings = require('./build/build-modules-js/settings.json');
+
+// Merge Joomla's specific settings to the main package.json object
+if ('settings' in settings) {
+  options.settings = settings.settings;
+}
 
-// Initialize CLI
+// Initialize the CLI
 Program
-	.version(options.version)
-	.option('--update', 'Updates the vendor scripts')
-	.option('--compilejs, --compilejs path', 'Compiles ES6 to ES5 scripts')
-	.option('--compilecss, --compilecss path', 'Compiles all the scss files to css')
-	.option('--compilecejs, --compilecejs path', 'Compiles/traspiles all the custom elements files')
-	.option('--compilecescss, --compilecescss path', 'Compiles/traspiles all the custom elements files')
-	.option('--watch, --watch path', 'Watch file changes and re-compile (Only work for compilecss and compilejs now).')
-	.option('--installer', 'Creates the language file for installer error page')
-	.on('--help', () => {
-		console.log(Chalk.cyan('\n  Version %s\n'), options.version);
-		process.exit(0);
-	})
-	.parse(process.argv);
+  .version(options.version)
+  .option('--update', 'Updates the vendor scripts')
+  .option('--compilejs, --compilejs path', 'Compiles ES6 to ES5 scripts')
+  .option('--compilecss, --compilecss path', 'Compiles all the scss files to css')
+  .option('--compilecejs, --compilecejs path', 'Compiles/traspiles all the custom elements files')
+  .option('--compilececss, --compilececss path', 'Compiles/traspiles all the custom elements files')
+  .option('--watch, --watch path', 'Watch file changes and re-compile (Only work for compilecss and compilejs now).')
+  .option('--installer', 'Creates the language file for installer error page')
+  .on('--help', () => {
+    // eslint-disable-next-line no-console
+    console.log(chalk.magenta(`Version: ${options.version} `));
+    process.exit(0);
+  })
+  .parse(process.argv);
 
 
 // Show help by default
 if (!process.argv.slice(2).length) {
-	Program.outputHelp();
-	process.exit(1);
+  Program.outputHelp();
+  process.exit(1);
 }
 
 // Update the vendor folder
 if (Program.update) {
-	Promise.resolve()
-		.then(update.update(options))
+  Promise.resolve()
+    .then(update.update(options))
 
-		// Exit with success
-		.then(() => process.exit(0))
+    // Exit with success
+    .then(() => process.exit(0))
 
-		// Handle errors
-		.catch((err) => {
-			console.error(Chalk.red(err));
-			process.exit(-1);
-		});
+    // Handle errors
+    .catch((err) => {
+      // eslint-disable-next-line no-console
+      console.error(`${chalk.red(err)}`);
+      process.exit(-1);
+    });
 }
 
 // Create the languages file for the error page on the installer
 if (Program.installer) {
-	installer.installation()
+  installer.installation();
 }
 
 // Convert scss to css
-if (Program['compilecss']) {
-	if (Program['watch']) {
-		css.watch(options, null, true);
-	} else {
-		css.css(options, Program.args[0])
-	}
+if (Program.compilecss) {
+  if (Program.watch) {
+    css.watch(options, null, true);
+  } else {
+    css.compile(options, Program.args[0]);
+  }
 }
 
 // Compress/transpile the javascript files
-if (Program['compilejs']) {
-	if (Program['watch']) {
-		Js.watch(options, null, false);
-	} else {
-		Js.js(options, Program.args[0])
-	}
+if (Program.compilejs) {
+  if (Program.watch) {
+    Js.watch(options, null, false);
+  } else {
+    Js.compile(options, Program.args[0]);
+  }
 }
 
 // Compress/transpile the Custom Elements files
-if (Program['compilecescss']) {
-	CEscss.compileCEscss(options, Program.args[0])
+if (Program.compilececss) {
+  CEcss.compile(options, Program.args[0]);
 }
 
 // Compress/transpile the Custom Elements files
-if (Program['compilecejs']) {
-	CEjs.compileCEjs(options, Program.args[0])
+if (Program.compilecejs) {
+  CEjs.compile(options, Program.args[0]);
 }
diff --git a/build/build-modules-js/compile-es6.js b/build/build-modules-js/compile-es6.js
@@ -2,36 +2,61 @@ const glob = require('glob');
 const fs = require('fs');
 const babel = require('babel-core');
 const os = require('os');
+const chalk = require('chalk');
 
 const pattern = './**/*.es6.js';
 const options = {
-  ignore: './node_modules/**',
+  ignore: [
+    './node_modules/**',
+    './build/webcomponents/js/**',
+  ],
+};
+
+const headerText = `PLEASE DO NOT MODIFY THIS FILE. WORK ON THE ES6 VERSION.
+OTHERWISE YOUR CHANGES WILL BE REPLACED ON THE NEXT BUILD.`;
+
+const babelOptions = {
+  plugins: [
+    ['add-header-comment', { header: [headerText] }],
+  ],
 };
 
 /**
  * Compiles es6 files to es5.
  * @param filePath
  */
 const compileFile = (filePath) => {
-  const headerText = `PLEASE DO NOT MODIFY THIS FILE. WORK ON THE ES6 VERSION.
-OTHERWISE YOUR CHANGES WILL BE REPLACED ON THE NEXT BUILD.`;
-  const babelOptions = {
-    plugins: [
-      ['add-header-comment', { header: [headerText] }],
-    ],
-  };
-
   babel.transformFile(filePath, babelOptions, (error, result) => {
-    if (error) process.exit(1);
+    if (error) {
+      // eslint-disable-next-line no-console
+      console.error(`${chalk.red(error)}`);
+      process.exit(1);
+    }
+
     const fileName = filePath.slice(0, -7);
-    fs.writeFile(`${fileName}.js`, result.code + os.EOL, (fsError) => {
-      if (fsError) process.exit(1);
-    });
+    fs.writeFile(
+      `${fileName}.js`,
+      result.code + os.EOL,
+      (fsError) => {
+        if (fsError) {
+          // eslint-disable-next-line no-console
+          console.error(`${chalk.red(fsError)}`);
+          process.exit(1);
+        }
+      }
+    );
   });
 };
 
 // Compile all files of the given pattern
 glob(pattern, options, (error, files) => {
-  if (error) process.exit(1);
+  if (error) {
+    // eslint-disable-next-line no-console
+    console.error(`${chalk.red(error)}`);
+    process.exit(1);
+  }
+
   files.forEach(compileFile);
 });
+
+module.exports.compileFile = compileFile;
diff --git a/build/build-modules-js/compilecejs.js b/build/build-modules-js/compilecejs.js
@@ -1,60 +1,59 @@
-const babelify = require("babelify");
-const browserify = require("browserify");
-const Chalk = require('chalk');
+const babelify = require('babelify');
+const browserify = require('browserify');
+const chalk = require('chalk');
 const fs = require('fs');
 const fsExtra = require('fs-extra');
 const Path = require('path');
 const Promise = require('bluebird');
 const UglifyJS = require('uglify-es');
+const rootPath = require('./rootpath.js')._();
+
+const compile = (options) => {
+  // Make sure that the dist paths exist
+  if (!fs.existsSync(`${rootPath}/media/system/webcomponents`)) {
+    fsExtra.mkdirSync(`${rootPath}/media/system/webcomponents`);
+  }
+  if (!fs.existsSync(`${rootPath}/media/system/webcomponents/js`)) {
+    fsExtra.mkdirSync(`${rootPath}/media/system/webcomponents/js`);
+  }
+
+  if (!fs.existsSync(Path.join(rootPath, '/media/system/webcomponents/css'))) {
+    fs.mkdirSync(Path.join(rootPath, '/media/system/webcomponents/css'));
+  }
+
+  options.settings.elements.forEach((element) => {
+    const b = browserify();
+    const c = browserify();
+
+    // Copy the ES6 file
+    const es6File = fs.readFileSync(`${rootPath}/build/webcomponents/js/${element}/${element}.js`, 'utf8');
+    fs.writeFileSync(`${rootPath}/media/system/webcomponents/js/joomla-${element}.js`, es6File, { encoding: 'utf8' });
+
+    // And the minified version
+    fs.writeFileSync(`${rootPath}/media/system/webcomponents/js/joomla-${element}.min.js`, UglifyJS.minify(es6File).code, { encoding: 'utf8' });
+
+    // Transpile a copy for ES5
+    fs.writeFileSync(`${rootPath}/media/system/webcomponents/js/joomla-${element}-es5.js`, '');
+    const bundleFs = fs.createWriteStream(`${rootPath}/media/system/webcomponents/js/joomla-${element}-es5.js`);
+    const bundleFsMin = fs.createWriteStream(`${rootPath}/media/system/webcomponents/js/joomla-${element}-es5.min.js`);
+
+    b.add(`${rootPath}/build/webcomponents/js/${element}/${element}.js`);
+    c.add(`${rootPath}/build/webcomponents/js/${element}/${element}.js`);
+    b.transform(babelify, { presets: ['babel-preset-es2015'] }).bundle().pipe(bundleFs);
+    c.transform(babelify, { presets: ['babel-preset-es2015', 'babel-preset-minify'] }).bundle().pipe(bundleFsMin);
+  });
+};
+
+const compileCEjs = (options, path) => {
+  Promise.resolve()
+    .then(() => compile(options, path))
 
-// Various variables
-const rootPath = __dirname.replace('/build/build-modules-js', '').replace('\\build\\build-modules-js', '');
-
-compileCejs = (options) => {
-	// Make sure that the dist paths exist
-	if (!fs.existsSync(rootPath + '/media/system/webcomponents')) {
-		fsExtra.mkdirSync(rootPath + '/media/system/webcomponents');
-	}
-	if (!fs.existsSync(rootPath + '/media/system/webcomponents/js')) {
-		fsExtra.mkdirSync(rootPath + '/media/system/webcomponents/js');
-	}
-
-	if (!fs.existsSync(Path.join(rootPath, '/media/system/webcomponents/css'))) {
-		fs.mkdirSync(Path.join(rootPath, '/media/system/webcomponents/css'));
-	}
-
-	options.settings.elements.forEach((element) => {
-		const b = browserify();
-		const c = browserify();
-
-		// Copy the ES6 file
-		const es6File = fs.readFileSync(rootPath + '/build/webcomponents/js/' + element + '/' + element + '.js', "utf8");
-		fs.writeFileSync(rootPath + '/media/system/webcomponents/js/joomla-' + element + '.js', es6File, { encoding: "utf8" });
-
-		// And the minified version
-		fs.writeFileSync(rootPath + '/media/system/webcomponents/js/joomla-' + element + '.min.js', UglifyJS.minify(es6File).code, { encoding: "utf8" });
-
-		// Transpile a copy for ES5
-		fs.writeFileSync(rootPath + '/media/system/webcomponents/js/joomla-' + element + '-es5.js', '');
-		const bundleFs = fs.createWriteStream(rootPath + '/media/system/webcomponents/js/joomla-' + element + '-es5.js');
-		const bundleFsMin = fs.createWriteStream(rootPath + '/media/system/webcomponents/js/joomla-' + element + '-es5.min.js');
-
-		b.add(rootPath + '/build/webcomponents/js/' + element + '/' + element + '.js');
-		c.add(rootPath + '/build/webcomponents/js/' + element + '/' + element + '.js');
-		b.transform(babelify, { presets: ["babel-preset-es2015"] }).bundle().pipe(bundleFs);
-		c.transform(babelify, { presets: ["babel-preset-es2015", "babel-preset-minify"] }).bundle().pipe(bundleFsMin);
-	});
-}
-
-compileCEjs = (options, path) => {
-	Promise.resolve()
-		.then(() => compileCejs(options, path))
-
-		// Handle errors
-		.catch((err) => {
-			console.error(Chalk.red(err));
-			process.exit(-1);
-		});
+    // Handle errors
+    .catch((err) => {
+      // eslint-disable-next-line no-console
+      console.error(`${chalk.red(err)}`);
+      process.exit(-1);
+    });
 };
 
-module.exports.compileCEjs = compileCEjs;
+module.exports.compile = compileCEjs;