enh(webpack-scaffold): improve prompt and doc (#794)

* misc(webpack-scaffold): add Confirm prompt default option

* docs(init): improve/update descriptions

* tests(webpack-scaffold): fix typos, update test for confirm

ISSUES CLOSED: 788

* misc(init): improve prompt default outdir

* misc(init): fix defaults in prompt

* misc(init): fix typos

* docs(webpack-scaffold): fix InputValidate example, update api, format

INIT.md

@@ -3,74 +3,89 @@
 `webpack-cli init` is used to initialize `webpack` projects quickly by scaffolding configuration and installing modules required for the project as per user preferences.
 
 ## Initial Setup
-A. **Local setup**
 
-Follow given steps to locally setup `webpack-cli init` by installing dependencies:
+### a. Local setup
+
+These are the steps necessary to setup `webpack-cli init` locally:
+
 1. Create `package.json` through npm
 
 	```shell
-	$ npm init
+	npm init
 	```
 
 2. Install `webpack` and `webpack-cli` as devDependencies
 
 	```shell
-    $ npm install --save-dev webpack webpack-cli
+    npm install --save-dev webpack webpack-cli
     ```
 
-3. Install `@webpack-cli/init` package to add init scaffold
+3. Install `@webpack-cli/init` package to add the init scaffold
 
 	```shell
-    $ npm install --save-dev @webpack-cli/init
+    npm install --save-dev @webpack-cli/init
     ```
 
-B. **Global Setup**
+### b. Global Setup
+
+These are the steps necessary to setup `webpack-cli init` globally:
 
-Follow following steps to setup `webpack-cli init` globally:
 1. Install `webpack` and `webpack-cli` globally
+
 	```shell
-	$ npm install -g webpack webpack-cli
+	npm install -g webpack webpack-cli
 	```
 
-2. Install `@webpack-cli/init` package to add init scaffold
+2. Install `@webpack-cli/init` package to add the init scaffold
+
 	```shell
-	$ npm install -g @webpack-cli/init
+	npm install -g @webpack-cli/init
 	```
 
 ## Usage
-A. **For local setup**:
+
+### a. Running locally
+
 ```shell
-$ npx webpack-cli init
+npx webpack-cli init
 ```
 
-B. **For global setup**
+### b. Running globally
+
 ```shell
-$ webpack-cli init
+webpack-cli init
 ```
 
 ### Description of questions asked by generator
 
-1. `Will your application have multiple bundles? (Y/n)`
+1. `Will your application have multiple bundles? (y/N)`
+
+> *Property/key resolved: [entry](https://webpack.js.org/configuration/entry-context/#entry)*
+
+This is used to determine if your app will have multiple [entry points](https://webpack.js.org/configuration/entry-context/#entry).
+If you want to have multiple entry points, answer yes. If you want to have only one, answer no.
+
+2. `Which will be your application entry point? (src/index)`
 
-> *Property/key to resolve: [entry](https://webpack.js.org/configuration/entry-context/#entry)*
+> *Property/key resolved: [entry](https://webpack.js.org/configuration/entry-context/#entry)*
 
-What we are meaning here, is if you want to provide your bundle a single or multiple [entry points](https://webpack.js.org/configuration/entry-context/#entry). If you have more than one entry point to your app, answer yes. If you only have one, answer no.
+This tells webpack from which file to start bundling your application. The default answer `src/index` will tell webpack to look for a file called `index` inside a folder named `src`. 
 
-2. `Which folder will your generated bundles be in? [default: dist]`
+3. `In which folder do you want to store your generated bundles? (dist)`
 
-> *Property/key to resolve: [output.path](https://webpack.js.org/configuration/output/#output-path)*
+> *Property/key resolved: [output.path](https://webpack.js.org/configuration/output/#output-path)*
 
-This answers to the [output directory](https://webpack.js.org/configuration/output/#output-path) of your application. The output directory is where servers or your `index.html` will read the generated bundle from.
+The output directory is where your bundled application will be. Your `index.html` will read the generated files from this folder, that is usually named `dist`.
 
 4. `Will you be using ES2015? (Y/n)`
 
-> *Property/key to resolve: [module.rules](https://webpack.js.org/configuration/module/#module-rules) (for .js files)*
+> *Property/key resolved: [module.rules](https://webpack.js.org/configuration/module/#module-rules) (for .js files)*
 
-If you answer `Yes` to this question, we will add [`ES2015`](https://babeljs.io/learn-es2015/) to your webpack configuration, which will allow you to use modern JavaScript in your project.
+This enables webpack to parse [`ES2015`](https://babeljs.io/learn-es2015/) code. Answer `Yes` if you want to use modern JavaScript in your project. 
 
 5. `Will you use one of the below CSS solutions?`
 
-> *Property/key to resolve: [module.rules](https://webpack.js.org/configuration/module/#module-rules) (for .scss,.less,.css,.postCSS files)*
+> *Property/key resolved: [module.rules](https://webpack.js.org/configuration/module/#module-rules) (for .scss,.less,.css,.postCSS files)*
 
 If you use any sort of style in your project, such as [`.less`](http://lesscss.org/), [`.scss`](http://sass-lang.com/),  [`.css`](https://developer.mozilla.org/en-US/docs/Web/CSS) or [`postCSS`](http://postcss.org/) you will need to declare this here. If you don't use CSS, answer no.
 

packages/generators/add-generator.ts

@@ -147,7 +147,7 @@ export default class AddGenerator extends Generator {
 			.then((_: void) => {
 				if (action === "entry") {
 					return this.prompt([
-						Confirm("entryType", "Will your application have multiple bundles?"),
+						Confirm("entryType", "Will your application have multiple bundles?", false),
 					])
 						.then((entryTypeAnswer: {
 							entryType: boolean,

packages/generators/init-generator.ts

@@ -87,7 +87,7 @@ export default class InitGenerator extends Generator {
 		);
 
 		return this.prompt([
-			Confirm("entryType", "Will your application have multiple bundles?"),
+			Confirm("entryType", "Will your application have multiple bundles?", false),
 		])
 			.then((entryTypeAnswer: {
 				entryType: boolean;
@@ -100,7 +100,7 @@ export default class InitGenerator extends Generator {
 					return this.prompt([
 						Input(
 							"outputType",
-							"Which folder will your generated bundles be in? [default: dist]:",
+							"In which folder do you want to store your generated bundles? (dist):",
 						),
 					]);
 				}
@@ -110,7 +110,7 @@ export default class InitGenerator extends Generator {
 				return this.prompt([
 					Input(
 						"outputType",
-						"Which folder will your generated bundles be in? [default: dist]:",
+						"In which folder do you want to store your generated bundles? (dist):",
 					),
 				]);
 			})
@@ -165,11 +165,11 @@ export default class InitGenerator extends Generator {
 			.then((_: void) => {
 				return this.prompt([
 					List("stylingType", "Will you use one of the below CSS solutions?", [
+						"No",
+						"CSS",
 						"SASS",
 						"LESS",
-						"CSS",
 						"PostCSS",
-						"No",
 					]),
 				]);
 			})

packages/generators/types/yeoman-generator.d.ts

@@ -69,7 +69,8 @@ declare module "yeoman-generator" {
 		name: string;
 		message: string | ((answers: Object) => string);
 		choices?: string[] | ((answers: Object) => string);
-		default?: string | number | string[] | number[] | ((answers: Object) => (string | number | string[] | number[]));
+		default?: string | number | boolean | string[] | number[]
+			| ((answers: Object) => (string | number | boolean | string[] | number[]));
 		validate?: ((input: string) => boolean | string);
 		when?: ((answers: Object) => boolean) | boolean;
 		store?: boolean;

packages/generators/utils/entry.ts

@@ -89,7 +89,7 @@ export default function entry(self: IEntry, answer: {
 			.prompt([
 				InputValidate(
 					"singularEntry",
-					"Which module will be the first to enter the application? [default: ./src/index]",
+					"Which will be your application entry point? (src/index)",
 				),
 			])
 			.then((singularEntryAnswer: {

packages/webpack-scaffold/README.md

@@ -1,10 +1,13 @@
 # webpack-scaffold
 
-This is the utility suite for creating a webpack `scaffold`. It contains utility functions to assist with inquirer prompting and scaffolding.
+This is the utility suite for creating a webpack `scaffold`, it contains utility functions to help you work with [Inquirer](https://github.com/SBoudrias/Inquirer.js/) prompting and scaffolding.
+
 # Installation
+
 ```bash
 npm i -D webpack-cli @webpack-cli/webpack-scaffold
 ```
+
 # API
 
 1. [parseValue()](#parsevalue)
@@ -15,6 +18,7 @@ npm i -D webpack-cli @webpack-cli/webpack-scaffold
 6. [createExternalFunction()](#createexternalfunction)
 7. [createRequire()](#createrequire)
 8. Inquirer: [List](#list), [RawList](#rawlist), [CheckList](#checklist), [Input](#input), [InputValidate](#inputvalidate), [Confirm](#confirm)
+
 ## parseValue
 
 Param: `String`
@@ -27,11 +31,12 @@ const parseValue = require('@webpack-cli/webpack-scaffold').parseValue;
 this.configuration.myScaffold.webpackOptions.output.sourcePrefix = parseValue('\t')
 // sourcePrefix: '\t'
 ```
+
 ## createArrowFunction
 
 Param: `String`
 
-Generally used when dealing with an entry point as an arrow function.
+Generally used when dealing with an entry point as an arrow function
 
 ```js
 const createArrowFunction = require('@webpack-cli/webpack-scaffold').createArrowFunction;
@@ -44,18 +49,20 @@ this.configuration.myScaffold.webpackOptions.entry = createArrowFunction('app.js
 
 Param: `String`
 
-Used when creating a function that returns a single value.
+Used when creating a function that returns a single value
+
 ```js
 const createRegularFunction = require('@webpack-cli/webpack-scaffold').createRegularFunction;
 
 this.configuration.myScaffold.webpackOptions.entry = createRegularFunction('app.js')
 // entry: function() { return 'app.js' }
 ```
+
 ## createDynamicPromise
 
 Param: `Array` | `String`
 
-Used to create an dynamic entry point.
+Used to create a dynamic entry point
 
 ```js
 const createDynamicPromise = require('@webpack-cli/webpack-scaffold').createDynamicPromise;
@@ -98,7 +105,6 @@ externals: [
     }
     callback();
   }
-
 */
 ```
 
@@ -122,8 +128,10 @@ this.configuration.myScaffold.topScope = [createRequire('webpack')]
 Param: `name<String>, message<String>, choices<Array>`
 
 Creates a List from Inquirer
+
 ```js
 const List = require('@webpack-cli/webpack-scaffold').List;
+
 List('entry', 'what kind of entry do you want?', ['Array', 'Function'])
 ```
 
@@ -132,8 +140,10 @@ List('entry', 'what kind of entry do you want?', ['Array', 'Function'])
 Param: `name<String>, message<String>, choices<Array>`
 
 Creates a RawList from Inquirer
+
 ```js
 const RawList = require('@webpack-cli/webpack-scaffold').RawList;
+
 RawList('entry', 'what kind of entry do you want?', ['Array', 'Function'])
 ```
 
@@ -142,8 +152,10 @@ RawList('entry', 'what kind of entry do you want?', ['Array', 'Function'])
 Param: `name<String>, message<String>, choices<Array>`
 
 Creates a CheckList(`checkbox`) from Inquirer
+
 ```js
 const CheckList = require('@webpack-cli/webpack-scaffold').CheckList;
+
 CheckList('entry', 'what kind of entry do you want?', ['Array', 'Function'])
 ```
 
@@ -152,8 +164,10 @@ CheckList('entry', 'what kind of entry do you want?', ['Array', 'Function'])
 Param: `name<String>, message<String>`
 
 Creates an Input from Inquirer
+
 ```js
 const Input = require('@webpack-cli/webpack-scaffold').Input;
+
 Input('entry', 'what is your entry point?')
 ```
 
@@ -162,24 +176,28 @@ Input('entry', 'what is your entry point?')
 Param: `name<String>, message<String>, validate<Function>`
 
 Creates an Input from Inquirer
+
 ```js
-const Input = require('@webpack-cli/webpack-scaffold').Input;
+const InputValidate = require('@webpack-cli/webpack-scaffold').InputValidate;
+
 const validation = (value) => {
     if(value.length > 4) {
         return true;
     } else {
         return 'Wow, that was short!'
     }
 }
-Input('entry', 'what is your entry point?', validation)
+InputValidate('entry', 'what is your entry point?', validation)
 ```
 
 ### Confirm
 
-Param: `name<String>, message<String>`
+Param: `name<String>, message<String>, default<?Boolean>`
 
 Creates an Input from Inquirer
+
 ```js
 const Confirm = require('@webpack-cli/webpack-scaffold').Confirm;
+
 Confirm('contextConfirm', 'Is this your context?')
 ```

packages/webpack-scaffold/__tests__/__snapshots__/index.test.ts.snap

@@ -31,13 +31,13 @@ callback();
 }"
 `;
 
-exports[`utils createRegularFunction should stringify an regular function 1`] = `
+exports[`utils createRegularFunction should stringify a regular function 1`] = `
 "function () {
  return 'app.js'
 }"
 `;
 
-exports[`utils createRequire should stringify an require statement 1`] = `"const webpack = require('webpack');"`;
+exports[`utils createRequire should stringify a require statement 1`] = `"const webpack = require('webpack');"`;
 
 exports[`utils parseValue should parse value 1`] = `
 Collection {