misc(generators): refactor utils

packages/generators/utils/entry.ts

@@ -1,5 +1,5 @@
 import * as Generator from "yeoman-generator";
-import { InputValidate } from "@webpack-cli/webpack-scaffold";
+import { Input, InputValidate } from "@webpack-cli/webpack-scaffold";
 
 import validate from "./validate";
 
@@ -16,22 +16,18 @@ interface CustomGenerator extends Generator {
  * @returns	{Object} An Object that holds the answers given by the user, later used to scaffold
  */
 
-export default function entry(
-	self: CustomGenerator,
-	answer: {
-		entryType: boolean;
-	}
-): Promise<void | {}> {
+export default function entry(self: CustomGenerator, multiEntries: boolean): Promise<{}> {
 	let entryIdentifiers: string[];
-	let result: Promise<void | {}>;
-	if (answer.entryType) {
+	let result: Promise<{}>;
+	if (multiEntries) {
 		result = self
 			.prompt([
 				InputValidate(
 					"multipleEntries",
-					"Type the names you want for your modules (entry files), separated by comma [example: app,vendor]",
-					validate
-				)
+					"Type the names you want for your modules (entry files) separated by comma",
+					validate,
+					"pageOne, pageTwo",
+				),
 			])
 			.then(
 				(multipleEntriesAnswer: { multipleEntries: string }): Promise<void | {}> => {
@@ -91,27 +87,56 @@ export default function entry(
 										!entryPropAnswer[val].includes("path") &&
 										!entryPropAnswer[val].includes("process")
 									) {
-										entryPropAnswer[val] = `\'${entryPropAnswer[val].replace(/"|'/g, "")}\'`;
+										n[val] = `\'./${n[val].replace(/"|'/g, "").concat(".js")}\'`;
 									}
-									webpackEntryPoint[val] = entryPropAnswer[val];
-								}
-							);
-							return webpackEntryPoint;
+									webpackEntryPoint[val] = n[val];
+								});
+							} else {
+								n = {};
+							}
+							return fn(trimmedProp);
+						});
+					}, Promise.resolve());
+				}
+				return forEachPromise(entryIdentifiers, (entryProp: string): Promise<{} | void> =>
+					self.prompt([
+						InputValidate(
+							`${entryProp}`,
+							`What is the location of "${entryProp}"?`,
+							validate,
+							`./src/${entryProp}`,
+						),
+					]),
+				).then((entryPropAnswer: object): object => {
+					Object.keys(entryPropAnswer).forEach((val: string): void => {
+						if (
+							entryPropAnswer[val].charAt(0) !== "(" &&
+							entryPropAnswer[val].charAt(0) !== "[" &&
+							!entryPropAnswer[val].includes("function") &&
+							!entryPropAnswer[val].includes("path") &&
+							!entryPropAnswer[val].includes("process")
+						) {
+							entryPropAnswer[val] = `\'./${entryPropAnswer[val].replace(/"|'/g, "").concat(".js")}\'`;
 						}
 					);
 				}
 			);
 	} else {
 		result = self
-			.prompt([InputValidate("singularEntry", "Which will be your application entry point? (src/index)")])
-			.then(
-				(singularEntryAnswer: { singularEntry: string }): string => {
-					let { singularEntry } = singularEntryAnswer;
-					singularEntry = `\'${singularEntry.replace(/"|'/g, "")}\'`;
-					if (singularEntry.length <= 0) {
-						self.usingDefaults = true;
-					}
-					return singularEntry;
+			.prompt([
+				Input(
+					"singularEntry",
+					"Which will be your application entry point?",
+					"src/index",
+				),
+			])
+			.then((singularEntryAnswer: {
+				singularEntry: string,
+			}): string => {
+				let { singularEntry } = singularEntryAnswer;
+				singularEntry = `\'./${singularEntry.replace(/"|'/g, "").concat(".js")}\'`;
+				if (singularEntry.length <= 0) {
+					self.usingDefaults = true;
 				}
 			);
 	}

packages/generators/utils/style.ts

@@ -0,0 +1,172 @@
+import tooltip from "./tooltip";
+
+export default function style(self, stylingType) {
+	const ExtractUseProps = [];
+	let regExpForStyles = null;
+	switch (stylingType) {
+		case "SASS":
+			self.dependencies.push(
+				"sass-loader",
+				"node-sass",
+				"style-loader",
+				"css-loader",
+			);
+			regExpForStyles = `${new RegExp(/\.(scss|css)$/)}`;
+			if (self.isProd) {
+				ExtractUseProps.push(
+					{
+						loader: "'css-loader'",
+						options: {
+							sourceMap: true,
+						},
+					},
+					{
+						loader: "'sass-loader'",
+						options: {
+							sourceMap: true,
+						},
+					},
+				);
+			} else {
+				ExtractUseProps.push(
+					{
+						loader: "'style-loader'",
+					},
+					{
+						loader: "'css-loader'",
+					},
+					{
+						loader: "'sass-loader'",
+					},
+				);
+			}
+			break;
+		case "LESS":
+			regExpForStyles = `${new RegExp(/\.(less|css)$/)}`;
+			self.dependencies.push(
+				"less-loader",
+				"less",
+				"style-loader",
+				"css-loader",
+			);
+			if (self.isProd) {
+				ExtractUseProps.push(
+					{
+						loader: "'css-loader'",
+						options: {
+							sourceMap: true,
+						},
+					},
+					{
+						loader: "'less-loader'",
+						options: {
+							sourceMap: true,
+						},
+					},
+				);
+			} else {
+				ExtractUseProps.push(
+					{
+						loader: "'css-loader'",
+						options: {
+							sourceMap: true,
+						},
+					},
+					{
+						loader: "'less-loader'",
+						options: {
+							sourceMap: true,
+						},
+					},
+				);
+			}
+			break;
+		case "PostCSS":
+			self.configuration.config.topScope.push(
+				tooltip.postcss(),
+				"const autoprefixer = require('autoprefixer');",
+				"const precss = require('precss');",
+				"\n",
+			);
+			self.dependencies.push(
+				"style-loader",
+				"css-loader",
+				"postcss-loader",
+				"precss",
+				"autoprefixer",
+			);
+			regExpForStyles = `${new RegExp(/\.css$/)}`;
+			if (self.isProd) {
+				ExtractUseProps.push(
+					{
+						loader: "'css-loader'",
+						options: {
+							importLoaders: 1,
+							sourceMap: true,
+						},
+					},
+					{
+						loader: "'postcss-loader'",
+						options: {
+							plugins: `function () {
+                                return [
+                                    precss,
+                                    autoprefixer
+                                ];
+                            }`,
+						},
+					},
+				);
+			} else {
+				ExtractUseProps.push(
+					{
+						loader: "'style-loader'",
+					},
+					{
+						loader: "'css-loader'",
+						options: {
+							importLoaders: 1,
+							sourceMap: true,
+						},
+					},
+					{
+						loader: "'postcss-loader'",
+						options: {
+							plugins: `function () {
+                                return [
+                                    precss,
+                                    autoprefixer
+                                ];
+                            }`,
+						},
+					},
+				);
+			}
+			break;
+		case "CSS":
+			self.dependencies.push("style-loader", "css-loader");
+			regExpForStyles = `${new RegExp(/\.css$/)}`;
+			if (self.isProd) {
+				ExtractUseProps.push({
+					loader: "'css-loader'",
+					options: {
+						sourceMap: true,
+					},
+				});
+			} else {
+				ExtractUseProps.push(
+					{
+						loader: "'style-loader'",
+						options: {
+							sourceMap: true,
+						},
+					},
+					{
+						loader: "'css-loader'",
+					},
+				);
+			}
+			break;
+	}
+	return { ExtractUseProps, regExpForStyles };
+}

packages/utils/run-prettier.ts

@@ -19,7 +19,7 @@ export default function runPrettier(outputPath: string, source: string, cb?: Fun
 		try {
 			prettySource = prettier.format(source, {
 				filepath: outputPath,
-				parser: "babylon",
+				parser: "babel",
 				singleQuote: true,
 				tabWidth: 1,
 				useTabs: true,

packages/utils/scaffold.ts

@@ -81,26 +81,28 @@ export default function runTransform(transformConfig: TransformConfig, action: s
 							configurationName = "webpack." + config.configName + ".js";
 						}
 
-						const projectRoot = findProjectRoot();
-						const outputPath: string = initActionNotDefined
-							? transformConfig.configPath
-							: path.join(projectRoot || process.cwd(), configurationName);
-						const source: string = ast.toSource({
-							quote: "single"
-						});
-						runPrettier(outputPath, source);
-					}
-				)
-				.catch(
-					(err: Error): void => {
-						console.error(err.message ? err.message : err);
-					}
-				);
-		}
-	);
-	let successMessage: string = `Congratulations! Your new webpack configuration file has been created!\n`;
+				const projectRoot = findProjectRoot();
+				const outputPath: string = initActionNotDefined
+				? transformConfig.configPath
+				: path.join(projectRoot || process.cwd(), configurationName);
+				const source: string = ast.toSource({
+					quote: "single",
+				});
+				runPrettier(outputPath, source);
+
+			})
+			.catch((err: IError) => {
+				console.error(err.message ? err.message : err);
+			});
+	});
+	let successMessage: string =
+		chalk.green(`Congratulations! Your new webpack configuration file has been created!\n\n`) +
+		`You can now run ${chalk.green("npm run start")} to run your project!\n\n`;
+
 	if (initActionNotDefined && transformConfig.config.item) {
-		successMessage = `Congratulations! ${transformConfig.config.item} has been ${action}ed!\n`;
+		successMessage = chalk.green(`Congratulations! ${
+			transformConfig.config.item
+		} has been ${action}ed!\n`);
 	}
-	process.stdout.write("\n" + chalk.green(successMessage));
+	process.stdout.write(`\n${successMessage}`);
 }