feat: webpack support

.eslintrc

@@ -61,6 +61,13 @@
         "node/no-unsupported-features/es-syntax": "off",
         "node/no-unsupported-features/node-builtins": ["warn", { "version": "10.11.0" }]
       }
+    },
+    {
+      "files": [ "cli/lib/tasks/*.js", "cli/hooks/webpack.js", "cli/lib/webpack/**/*.js" ],
+      "parserOptions": {
+        "ecmaVersion": 2017,
+        "sourceType": "module"
+      }
     }
   ]
 }

android/cli/commands/_build.js

@@ -1530,8 +1530,8 @@ AndroidBuilder.prototype.run = async function run(logger, config, cli, finished)
 		await this.checkIfNeedToRecompile();
 
 		// Notify plugins that we're prepping to compile.
-		await new Promise((resolve) => {
-			cli.emit('build.pre.compile', this, resolve);
+		await new Promise((resolve, reject) => {
+			cli.emit('build.pre.compile', this, e => (e ? reject(e) : resolve()));
 		});
 
 		// Make sure we have an "app.js" script. Will exit with a build failure if not found.
@@ -2874,7 +2874,16 @@ AndroidBuilder.prototype.copyResources = function copyResources(next) {
 				});
 			})
 			.then(() => {
-				this.tiSymbols = task.data.tiSymbols;
+				if (this.useWebpack) {
+					// Merge Ti symbols from Webpack with the ones from legacy js processing
+					Object.keys(task.data.tiSymbols).forEach(file => {
+						const existingSymbols = this.tiSymbols[file] || [];
+						const additionalSymbols = task.data.tiSymbols[file];
+						this.tiSymbols[file] = Array.from(new Set(existingSymbols.concat(additionalSymbols)));
+					});
+				} else {
+					this.tiSymbols = task.data.tiSymbols;
+				}
 
 				// Copy all unprocessed files to "app" project's APK "assets" directory.
 				appc.async.parallel(this, copyUnmodified.map(relPath => {

cli/hooks/webpack.js

@@ -0,0 +1,177 @@
+// eslint-disable-next-line security/detect-child-process
+const { execSync } = require('child_process');
+const fs = require('fs-extra');
+const path = require('path');
+const semver = require('semver');
+const util = require('util');
+require('colors');
+
+const appcd = require('../lib/webpack/appcd');
+const WebpackService = require('../lib/webpack/service');
+
+const MIN_APPCD_VERSION = '3.2.0';
+
+const createWebpackLogger = (logger) => {
+	const webpackLogger = {
+		formatWithBadge(args) {
+			return `${' WEBPACK '.bgCyan.black} ${util.format(...args)}`;
+		}
+	};
+	[ 'info', 'debug', 'warn', 'error' ].forEach(level => {
+		webpackLogger[level] = (...args) => logger[level](webpackLogger.formatWithBadge(args));
+	});
+	return webpackLogger;
+};
+
+exports.id = 'ti.webpack';
+exports.init = (logger, config, cli) => {
+	const isAppcCli = typeof process.env.APPC_ENV !== 'undefined';
+	let commandName;
+	let isWebpackEnabled = false;
+	let projectType;
+	let client;
+
+	cli.on('cli:command-loaded', (hookData) => {
+		const command = hookData.command;
+		commandName = command.name;
+	});
+
+	cli.on('cli:post-validate', () => {
+		projectType = getWebpackProjectType(cli.argv['project-dir']);
+		if (projectType === null) {
+			return;
+		}
+		isWebpackEnabled = true;
+		process.env.TI_USE_WEBPACK = true;
+
+		if (commandName !== 'build') {
+			return;
+		}
+
+		let appcdRootPath;
+		if (isAppcCli) {
+			// we were invoked by appc-cli, load bundled daemon client.
+			appcdRootPath = resolveModuleRoot('appcd');
+			if (!fs.existsSync(appcdRootPath)) {
+				throw new Error('Unable to find Appcelerator Daemon inside the appc-cli. Please make sure to use a recent appc-cli version. You can install/select it with  "appc use latest".');
+			}
+		} else {
+			// plain ti-cli, load daemon from global modules
+			const globalModulesPath = execSync('npm root -g').toString().replace(/\s+$/, '');
+			appcdRootPath = resolveModuleRoot('appcd', [ globalModulesPath ]);
+			if (!fs.existsSync(appcdRootPath)) {
+				throw new Error('Unable to find global Appcelerator Daemon install. You can install it with "npm i appcd -g".');
+			}
+		}
+		ensureAppcdVersion(appcdRootPath, MIN_APPCD_VERSION, isAppcCli);
+		const AppcdClient = resolveAppcdClient(appcdRootPath);
+		const baseClient = new AppcdClient();
+		if (isAppcCli) {
+			baseClient.appcd = path.resolve(appcdRootPath, '..', '.bin', 'appcd');
+			if (process.platform === 'win32') {
+				baseClient.appcd += '.cmd';
+			}
+		}
+		client = appcd(baseClient);
+	});
+
+	cli.on('build.pre.compile', {
+		priority: 800,
+		post(builder, callback) {
+			if (!isWebpackEnabled) {
+				return callback();
+			}
+
+			builder.useWebpack = true;
+
+			const badgedLogger = createWebpackLogger(logger);
+			const webpackService = new WebpackService({
+				client,
+				logger: badgedLogger,
+				cli,
+				builder,
+				projectType
+			});
+			Promise.resolve().then(async () => {
+				await webpackService.build();
+				return callback();
+			}).catch(e => {
+				if (e.status === 404) {
+					badgedLogger.info('Daemon was unable to find the Webpack plugin. To continue you need to:');
+					badgedLogger.info('');
+					const installCommand = 'npm i -g @appcd/webpack-plugin';
+					badgedLogger.info(`- Install it with ${installCommand.cyan}`);
+					const restartCommand = `${isAppcCli ? 'appc ' : ''}appcd restart`;
+					badgedLogger.info(`- Restart the daemon with ${restartCommand.cyan}`);
+					badgedLogger.info('');
+				}
+
+				if (cli.argv.platform === 'ios') {
+					// The iOS build shows the error message only, log the stack manually
+					// to make sure it get printed as well
+					logger.error(e.stack);
+				}
+
+				callback(e);
+			});
+		}
+	});
+};
+
+function getWebpackProjectType(projectDir) {
+	if (typeof projectDir !== 'string') {
+		return null;
+	}
+	const pkgPath = path.join(projectDir, 'package.json');
+	if (!fs.existsSync(pkgPath)) {
+		return null;
+	}
+
+	const tiPlugins = [
+		'@titanium-sdk/webpack-plugin-classic',
+		'@titanium-sdk/webpack-plugin-alloy',
+		'@titanium-sdk/webpack-plugin-vue',
+		'@titanium-sdk/webpack-plugin-angular'
+	];
+	// eslint-disable-next-line security/detect-non-literal-require
+	const pkg = require(pkgPath);
+	const allDeps = Object.keys(pkg.devDependencies || {})
+		.concat(Object.keys(pkg.dependencies || {}));
+	const pluginId = tiPlugins.find(id => allDeps.includes(id));
+	if (!pluginId) {
+		return null;
+	}
+	return pluginId.substring(pluginId.lastIndexOf('-') + 1);
+}
+
+function resolveModuleRoot(name, paths) {
+	try {
+		let resolvedPath;
+		if (paths) {
+			resolvedPath = require.resolve(name, { paths });
+		} else {
+			resolvedPath = require.resolve(name);
+		}
+		return resolvedPath.substr(0, resolvedPath.indexOf(`${path.sep}appcd${path.sep}`) + 7);
+	} catch (e) {
+		return null;
+	}
+}
+
+function ensureAppcdVersion(appcdRootPath, version, isAppcCli = false) {
+	// eslint-disable-next-line security/detect-non-literal-require
+	const pkg = require(path.join(appcdRootPath, 'package.json'));
+	if (!semver.gte(pkg.version, version)) {
+		throw new Error(`The Webpack build system requires Appcelerator Daemon v${MIN_APPCD_VERSION}+ (installed: ${pkg.version}). Please update your ${isAppcCli ? 'appc-cli with "appc use latest"' : 'global daemon install with "npm i appcd -g"'}.`);
+	}
+}
+
+function resolveAppcdClient(appcdPackagePath) {
+	const appcdClientPath = require.resolve('appcd-client', {
+		paths: [
+			path.join(appcdPackagePath, 'node_modules')
+		]
+	});
+	// eslint-disable-next-line security/detect-non-literal-require
+	return require(appcdClientPath).default;
+}

cli/lib/tasks/process-js-task.js

@@ -284,16 +284,22 @@ class ProcessJsTask extends IncrementalFileTask {
 			transpile,
 		});
 
-		const modified = jsanalyze.analyzeJs(source, analyzeOptions);
-		const newContents = modified.contents;
-
-		// we want to sort by the "to" filename so that we correctly handle file overwriting
-		this.data.tiSymbols[to] = modified.symbols;
+		let newContents;
+		if (this.builder.useWebpack && !isFileFromCommonFolder) {
+			// Webpack already did all the work, just copy the file's content
+			newContents = source;
+			this.logger.debug(__('Copying %s => %s', from.cyan, to.cyan));
+		} else {
+			// legacy JS processing
+			const modified = jsanalyze.analyzeJs(source, analyzeOptions);
+			newContents = modified.contents;
+			// we want to sort by the "to" filename so that we correctly handle file overwriting
+			this.data.tiSymbols[to] = modified.symbols;
+			this.logger.debug(__(`Copying${this.builder.minifyJS ? ' and minifying' : ''} %s => %s`, from.cyan, to.cyan));
+		}
 
 		const dir = path.dirname(to);
 		await fs.ensureDir(dir);
-
-		this.logger.debug(__('Copying and minifying %s => %s', from.cyan, to.cyan));
 		await fs.writeFile(to, newContents);
 		this.builder.jsFilesChanged = true;
 		this.builder.unmarkBuildDirFile(to);

cli/lib/webpack/appcd.js

@@ -0,0 +1,88 @@
+const EventEmitter = require('events');
+
+/**
+ * Creates a simplified promise-based client for Appcd
+ *
+ * @param {object} client A appcd-client instance
+ * @return {object} Promisified wrapper around appcd-client
+ */
+const appcd = (client) => ({
+	host: client.host,
+	port: client.port,
+	async connect(options) {
+		return new Promise((resolve, reject) => {
+			client.connect(options)
+				.once('connected', resolve)
+				.once('error', reject);
+		});
+	},
+	disconnect() {
+		client.disconnect();
+	},
+	async get(path) {
+		return this.request({ path });
+	},
+	async post(path, data = {}) {
+		return this.request({ path, data });
+	},
+	async request(options) {
+		return new Promise((resolve, reject) => {
+			client
+				.request(options)
+				.once('response', response => resolve(response))
+				.once('error', e => reject(e));
+		});
+	},
+	async subscribe(path) {
+		return new Promise((resolve, reject) => {
+			const subscription = new Subscription(path);
+			client
+				.request({
+					path,
+					type: 'subscribe'
+				})
+				.on('response', (data, response) => {
+					if (typeof data === 'string' && data === 'Subscribed') {
+						subscription.sid = response.sid;
+						return resolve(subscription);
+					}
+
+					subscription.emit('message', data);
+				})
+				.once('close', () => {
+					subscription.emit('close');
+				})
+				.once('finish', () => {
+					subscription.emit('close');
+				})
+				.once('error', e => {
+					if (!subscription.sid) {
+						reject(e);
+					} else {
+						subscription.emit('error', e);
+					}
+				});
+		});
+	}
+});
+
+class Subscription extends EventEmitter {
+	constructor(path) {
+		super();
+		this.path = path;
+		this.sid = null;
+	}
+	async unsubscribe() {
+		if (!this.sid) {
+			return;
+		}
+
+		await appcd.request({
+			path: this.path,
+			sid: this.sid
+		});
+		this.sid = null;
+	}
+}
+
+module.exports = appcd;