fix(add): add handling of merge option

packages/generators/add-generator.ts

@@ -1,57 +1,24 @@
 import * as Generator from "yeoman-generator";
-
-import * as glob from "glob-all";
-import * as autoComplete from "inquirer-autocomplete-prompt";
-import * as path from "path";
-
 import npmExists from "@webpack-cli/utils/npm-exists";
 import { getPackageManager } from "@webpack-cli/utils/package-manager";
-import PROP_TYPES from "@webpack-cli/utils/prop-types";
-import { AutoComplete, Confirm, Input, List } from "@webpack-cli/webpack-scaffold";
+import { Input, List } from "@webpack-cli/webpack-scaffold";
+import webpackDevServerSchema from "webpack-dev-server/lib/options.json";
+import * as AutoComplete from "inquirer-autocomplete-prompt";
+import path, { resolve } from "path";
+import glob from "glob-all";
 
+import {
+	actionTypeQuestion,
+	entryTypeQuestion,
+	manualOrListInput,
+	mergeFileQuestion,
+	topScopeQuestion
+} from "./utils/add/questions";
+import { traverseAndGetProperties } from "./utils/add";
 import { SchemaProperties, WebpackOptions } from "./types";
-import { entryQuestions, generatePluginName } from "./utils";
-import * as webpackDevServerSchema from "webpack-dev-server/lib/options.json";
-import * as webpackSchema from "./utils/optionsSchema.json";
-
-const PROPS: string[] = Array.from(PROP_TYPES.keys());
-
-/**
- *
- * Checks if the given array has a given property
- *
- * @param	{Array} arr - array to check
- * @param	{String} prop - property to check existence of
- *
- * @returns	{Boolean} hasProp - Boolean indicating if the property
- * is present
- */
-const traverseAndGetProperties = (arr: object[], prop: string): boolean => {
-	let hasProp = false;
-	arr.forEach(
-		(p: object): void => {
-			if (p[prop]) {
-				hasProp = true;
-			}
-		}
-	);
-	return hasProp;
-};
-
-/**
- *
- * Search config properties
- *
- * @param {Object} answers	Prompt answers object
- * @param {String} input	Input search string
- *
- * @returns {Promise} Returns promise which resolves to filtered props
- *
- */
-const searchProps = (answers: object, input: string): Promise<string[]> => {
-	input = input || "";
-	return Promise.resolve(PROPS.filter((prop: string): boolean => prop.toLowerCase().includes(input.toLowerCase())));
-};
+import entryQuestions from "./utils/entry";
+import { generatePluginName } from "./utils/plugins";
+import webpackSchema from "../optionsSchema.json";
 
 /**
  *
@@ -69,6 +36,7 @@ export default class AddGenerator extends Generator {
 			configName?: string;
 			topScope?: string[];
 			item?: string;
+			merge?: string | string[];
 			webpackOptions?: WebpackOptions;
 		};
 	};
@@ -83,16 +51,13 @@ export default class AddGenerator extends Generator {
 			}
 		};
 		const { registerPrompt } = this.env.adapter.promptModule;
-		registerPrompt("autocomplete", autoComplete);
+		registerPrompt("autocomplete", AutoComplete);
 	}
 
 	public prompting(): Promise<void | {}> {
 		const done: () => {} = this.async();
 		let action: string;
 		const self: this = this;
-		const manualOrListInput: (promptAction: string) => Generator.Question = (
-			promptAction: string
-		): Generator.Question => Input("actionAnswer", `What do you want to add to ${promptAction}?`);
 		let inputPrompt: Generator.Question;
 
 		// first index indicates if it has a deep prop, 2nd indicates what kind of
@@ -101,13 +66,7 @@ export default class AddGenerator extends Generator {
 		// eslint-disable-next-line
 		const isDeepProp: any[] = [false, false];
 
-		return this.prompt([
-			AutoComplete("actionType", "What property do you want to add to?", {
-				pageSize: 7,
-				source: searchProps,
-				suggestOnly: false
-			})
-		])
+		return this.prompt(actionTypeQuestion)
 			.then(
 				(actionTypeAnswer: { actionType: string }): void => {
 					// Set initial prop, like devtool
@@ -119,9 +78,7 @@ export default class AddGenerator extends Generator {
 			.then(
 				(): Promise<void | {}> => {
 					if (action === "entry") {
-						return this.prompt([
-							Confirm("entryType", "Will your application have multiple bundles?", false)
-						])
+						return this.prompt(entryTypeQuestion)
 							.then(
 								(entryTypeAnswer: { entryType: boolean }): Promise<void | {}> => {
 									// Ask different questions for entry points
@@ -136,13 +93,22 @@ export default class AddGenerator extends Generator {
 							);
 					} else {
 						if (action === "topScope") {
-							return this.prompt([Input("topScope", "What do you want to add to topScope?")]).then(
+							return this.prompt(topScopeQuestion).then(
 								(topScopeAnswer: { topScope: string }): void => {
 									this.configuration.config.topScope.push(topScopeAnswer.topScope);
 									done();
 								}
 							);
 						}
+						if (action === "merge") {
+							return this.prompt(mergeFileQuestion).then(
+								(mergeFileAnswer: { mergeFile: string; mergeConfigName: string }): void => {
+									const resolvedPath = resolve(process.cwd(), mergeFileAnswer.mergeFile);
+									this.configuration.config[action] = [mergeFileAnswer.mergeConfigName, resolvedPath];
+									done();
+								}
+							);
+						}
 					}
 					const temp = action;
 					if (action === "resolveLoader") {
@@ -308,7 +274,11 @@ export default class AddGenerator extends Generator {
 										.pop()
 										.replace(".js", "")
 							)
-							.find((p: string): boolean => p.toLowerCase().indexOf(answeredPluginName) >= 0 || p.indexOf(answeredPluginName) >= 0);
+							.find(
+								(p: string): boolean =>
+									p.toLowerCase().indexOf(answeredPluginName) >= 0 ||
+									p.indexOf(answeredPluginName) >= 0
+							);
 
 						if (pluginExist) {
 							this.configuration.config.item = pluginExist;
@@ -416,7 +386,9 @@ export default class AddGenerator extends Generator {
 								(action === "devtool" || action === "watch" || action === "mode")
 							) {
 								this.configuration.config.item = action;
-								this.configuration.config.webpackOptions[action] = answerToAction.actionAnswer;
+								(this.configuration.config.webpackOptions[
+									action
+								] as string) = answerToAction.actionAnswer;
 								done();
 								return;
 							}

packages/generators/utils/add/index.ts

@@ -0,0 +1,56 @@
+import PROP_TYPES from "@webpack-cli/utils/prop-types";
+
+export const PROPS: string[] = Array.from(PROP_TYPES.keys());
+
+/**
+ *
+ * Replaces the string with a substring at the given index
+ * https://gist.github.com/efenacigiray/9367920
+ *
+ * @param	{String} str - string to be modified
+ * @param	{Number} index - index to replace from
+ * @param	{String} replace - string to replace starting from index
+ *
+ * @returns	{String} string - The newly mutated string
+ *
+ */
+export function replaceAt(str: string, index: number, replace: string): string {
+	return str.substring(0, index) + replace + str.substring(index + 1);
+}
+
+/**
+ *
+ * Checks if the given array has a given property
+ *
+ * @param	{Array} arr - array to check
+ * @param	{String} prop - property to check existence of
+ *
+ * @returns	{Boolean} hasProp - Boolean indicating if the property
+ * is present
+ */
+export const traverseAndGetProperties = (arr: object[], prop: string): boolean => {
+	let hasProp = false;
+	arr.forEach(
+		(p: object): void => {
+			if (p[prop]) {
+				hasProp = true;
+			}
+		}
+	);
+	return hasProp;
+};
+
+/**
+ *
+ * Search config properties
+ *
+ * @param {Object} answers	Prompt answers object
+ * @param {String} input	Input search string
+ *
+ * @returns {Promise} Returns promise which resolves to filtered props
+ *
+ */
+export const searchProps = (answers: object, input: string): Promise<string[]> => {
+	input = input || "";
+	return Promise.resolve(PROPS.filter((prop: string): boolean => prop.toLowerCase().includes(input.toLowerCase())));
+};

packages/generators/utils/add/questions.ts

@@ -0,0 +1,46 @@
+import { AutoComplete, Confirm, Input, InputValidate } from "@webpack-cli/webpack-scaffold";
+import { existsSync } from "fs";
+import { resolve } from "path";
+import { searchProps } from "./index";
+import { Question } from "inquirer";
+
+/**
+ * Returns Inquirer question for given action
+ * @param {string} action action for which question has to be prompted
+ * @returns {Question} Question for given action
+ */
+export const manualOrListInput = (action: string): Question => {
+	const actionQuestion = `What do you want to add to ${action}?`;
+	return Input("actionAnswer", actionQuestion);
+};
+
+export const actionTypeQuestion = AutoComplete("actionType", "What property do you want to add to?", {
+	pageSize: 7,
+	source: searchProps,
+	suggestOnly: false
+});
+
+export const entryTypeQuestion: Question = Confirm("entryType", "Will your application have multiple bundles?", false);
+
+export const topScopeQuestion: Question = Input("topScope", "What do you want to add to topScope?");
+
+const mergeFileQuestionsFunction = (): Question[] => {
+	const mergePathQuestion =
+		"What is the location of webpack configuration with which you want to merge current configuration?";
+	const mergePathValidator = (path: string): boolean | string => {
+		const resolvedPath = resolve(process.cwd(), path);
+		if (existsSync(resolvedPath)) {
+			if (/\.js$/.test(path)) {
+				return true;
+			}
+			return "Path doesn't correspond to a javascript file";
+		}
+		return "Invalid path provided";
+	};
+	const mergeConfigNameQuestion = "What is the name by which you want to denote above configuration?";
+	return [
+		InputValidate("mergeFile", mergePathQuestion, mergePathValidator),
+		Input("mergeConfigName", mergeConfigNameQuestion)
+	];
+};
+export const mergeFileQuestion: Question[] = mergeFileQuestionsFunction();

packages/generators/utils/index.ts

@@ -1,10 +1,10 @@
-import entryQuestions from './entry'
+import entryQuestions from "./entry";
 import langQuestionHandler, { LangType, getBabelLoader, getTypescriptLoader } from "./languageSupport";
-import plugins , { replaceAt, generatePluginName } from './plugins'
-import styleQuestionHandler, { StylingType, LoaderName, StyleRegex, Loader } from './styleSupport'
+import plugins, { replaceAt, generatePluginName } from "./plugins";
+import styleQuestionHandler, { StylingType, LoaderName, StyleRegex, Loader } from "./styleSupport";
 import tooltip from "./tooltip";
-import validate from './validate'
-import { getDefaultOptimization } from './webpackConfig';
+import validate from "./validate";
+import { getDefaultOptimization } from "./webpackConfig";
 
 export {
 	entryQuestions,

packages/serve/index.ts

@@ -24,11 +24,11 @@ import { List } from "@webpack-cli/webpack-scaffold";
  */
 
 interface ConfigType {
-	installCmd: string,
-	dependency: string,
-	devDependency: string,
-	optionalDependency: string
-};
+	installCmd: string;
+	dependency: string;
+	devDependency: string;
+	optionalDependency: string;
+}
 
 const npmConfig: ConfigType = {
 	installCmd: "install",
@@ -47,7 +47,7 @@ const yarnConfig: ConfigType = {
 const spawnWithArg = (pm: string, cmd: string): SpawnSyncReturns<Buffer> => {
 	const pmConfig: ConfigType = pm === "npm" ? npmConfig : yarnConfig;
 	const options: string[] = [pmConfig.installCmd, "webpack-dev-server", pmConfig[cmd]];
-	return spawn.sync(pm, options, {stdio: "inherit"});
+	return spawn.sync(pm, options, { stdio: "inherit" });
 };
 
 /**

packages/utils/ast-utils.ts

@@ -1,6 +1,24 @@
 import { JSCodeshift, Node, valueType } from "./types/NodePath";
 import * as validateIdentifier from "./validate-identifier";
 
+function isImportPresent(j: JSCodeshift, ast: Node, path: string): boolean {
+	if (typeof path !== "string") {
+		throw new Error(`path parameter should be string, recieved ${typeof path}`);
+	}
+	let importExists = false;
+	ast.find(j.CallExpression).forEach(
+		(callExp: Node): void => {
+			if (
+				(callExp.value as Node).callee.name === "require" &&
+				(callExp.value as Node).arguments[0].value === path
+			) {
+				importExists = true;
+			}
+		}
+	);
+	return importExists;
+}
+
 /**
  *
  * Traverse safely over a path object for array for paths
@@ -605,8 +623,8 @@ function parseTopScope(j: JSCodeshift, ast: Node, value: string[], action: strin
  */
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function parseMerge(j: JSCodeshift, ast: Node, value: string, action: string): boolean | Node {
-	function createMergeProperty(p: Node): boolean {
+function parseMerge(j: JSCodeshift, ast: Node, value: string[], action: string): boolean | Node {
+	function createMergeProperty(p: Node, configIdentifier: string): boolean {
 		// FIXME Use j.callExp()
 		const exportsDecl: Node[] = (p.value as Node).body.map(
 			(n: Node): Node => {
@@ -626,14 +644,37 @@ function parseMerge(j: JSCodeshift, ast: Node, value: string, action: string): b
 				type: "MemberExpression"
 			},
 			operator: "=",
-			right: j.callExpression(j.identifier("merge"), [j.identifier(value), exportsDecl.pop()]),
+			right: j.callExpression(j.identifier("merge"), [j.identifier(configIdentifier), exportsDecl.pop()]),
 			type: "AssignmentExpression"
 		};
+
 		(p.value as Node).body[bodyLength - 1] = newVal;
 		return false; // TODO: debug later
 	}
+
+	function addMergeImports(configIdentifier: string, configPath: string): void {
+		if (typeof configIdentifier !== "string" || typeof configPath !== "string") {
+			throw new Error(
+				`Both parameters should be strings. recieved ${typeof configIdentifier}, ${typeof configPath}`
+			);
+		}
+		ast.find(j.Program).forEach(
+			(p: Node): void => {
+				if (!isImportPresent(j, ast, "webpack-merge")) {
+					(p.value as Node).body.splice(-1, 0, `const merge = require('webpack-merge')`);
+				}
+
+				if (!isImportPresent(j, ast, configPath)) {
+					(p.value as Node).body.splice(-1, 0, `const ${configIdentifier} = require('${configPath}')`);
+				}
+			}
+		);
+	}
+
 	if (value) {
-		return ast.find(j.Program).filter((p: Node): boolean => createMergeProperty(p));
+		const [configIdentifier, configPath] = value;
+		addMergeImports(configIdentifier, configPath);
+		return ast.find(j.Program).filter((p: Node): boolean => createMergeProperty(p, configIdentifier));
 	} else {
 		return ast;
 	}