From 17e45119c77c75fe8e299c7f07647864559e83d3 Mon Sep 17 00:00:00 2001 From: "devid.farinelli@gmail.com" Date: Fri, 19 Apr 2019 15:16:24 +0200 Subject: [PATCH] misc(generators): refactor utils --- packages/generators/utils/entry.ts | 77 ++++++++---- packages/generators/utils/plugins.ts | 11 -- packages/generators/utils/style.ts | 172 +++++++++++++++++++++++++++ packages/utils/run-prettier.ts | 2 +- packages/utils/scaffold.ts | 42 +++---- 5 files changed, 246 insertions(+), 58 deletions(-) delete mode 100644 packages/generators/utils/plugins.ts create mode 100644 packages/generators/utils/style.ts diff --git a/packages/generators/utils/entry.ts b/packages/generators/utils/entry.ts index 47762928337..5f136e0b940 100644 --- a/packages/generators/utils/entry.ts +++ b/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 { +export default function entry(self: CustomGenerator, multiEntries: boolean): Promise<{}> { let entryIdentifiers: string[]; - let result: Promise; - 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 => { @@ -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; } ); } diff --git a/packages/generators/utils/plugins.ts b/packages/generators/utils/plugins.ts deleted file mode 100644 index 6dedb1fab9e..00000000000 --- a/packages/generators/utils/plugins.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * - * Callable function with the initial plugins - * - * @returns {Function} An function that returns an array - * that consists of terser-webpack-plugin - */ - -export default function(): string[] { - return ["new TerserPlugin()"]; -} diff --git a/packages/generators/utils/style.ts b/packages/generators/utils/style.ts new file mode 100644 index 00000000000..9d4d428ace8 --- /dev/null +++ b/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 }; +} diff --git a/packages/utils/run-prettier.ts b/packages/utils/run-prettier.ts index 794f86923b8..254f94029d7 100644 --- a/packages/utils/run-prettier.ts +++ b/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, diff --git a/packages/utils/scaffold.ts b/packages/utils/scaffold.ts index 2d2ece8a390..3fc8bf20c0f 100644 --- a/packages/utils/scaffold.ts +++ b/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}`); }