Skip to content

Commit

Permalink
feat: add skip prompt functionality
Browse files Browse the repository at this point in the history 
- single prompt to ask whether to skip
- if yes then returns default answers object
- if no then returns the interactive prompts interface
  • Loading branch information
@maverox
maverox committed Jun 5, 2024
1 parent 04b5f90 commit 1bdf924
Show file tree
Hide file tree
Showing 2 changed files with 160 additions and 132 deletions.
290 changes: 158 additions & 132 deletions packages/create-webpack-app/src/plopfile.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { NodePlopAPI } from "./types";
import { NodePlopAPI, Answers } from "./types";
import { resolve, join } from "path";
import ejs from "ejs";
import { spawn } from "child_process";
Expand Down Expand Up @@ -53,138 +53,164 @@ export default function (plop: NodePlopAPI) {
// Define a base generator for the project structure
plop.setGenerator("init", {
description: "Create a basic Webpack project",
prompts: [
{
type: "input",
name: "projectName",
message: "Enter your project name:",
default: "webpack-project",
validate(input, _) {
if (!input.trim()) {
return "Project name cannot be empty";
}
return true;
},
},
{
type: "input",
name: "projectPath",
message: "Enter the project destination:",
default: ".",
filter: (input) => {
return resolve(join(process.cwd(), input));
},
},
{
type: "list",
name: "langType",
message: "Which of the following JS solutions do you want to use?",
choices: ["none", "ES6", "Typescript"],
default: "none",
filter: (input, _) => {
switch (input) {
case "ES6":
dependencies.push("babel-loader", "@babel/core", "@babel/preset-env");
break;
case "Typescript":
dependencies.push("typescript", "ts-loader");
break;
}
return input;
},
},
{
prompts: async function (inquirer): Promise<Answers> {
const { skip } = await inquirer.prompt({
type: "confirm",
name: "devServer",
message: "Would you like to use Webpack Dev server?",
default: true,
},
{
type: "confirm",
name: "htmlWebpackPlugin",
message: "Do you want to simplify the creation of HTML files for your bundle?",
default: true,
},
{
type: "confirm",
name: "workboxWebpackPlugin",
message: "Do you want to add PWA support?",
default: true,
},
{
type: "list",
name: "cssType",
message: "Which of the following CSS solution do you want to use?",
choices: ["none", "CSS only", "SASS", "LESS", "Stylus"],
default: "Css only",
filter: (input, answers) => {
if (input === "none") {
answers.isCSS = false;
answers.isPostCSS = false;
answers.extractPlugin = "No";
} else {
dependencies.push("style-loader", "css-loader");
switch (input) {
case "CSS only":
answers.isCSS = true;
break;
case "SASS":
dependencies.push("sass-loader", "node-sass");
break;
case "LESS":
dependencies.push("less-loader", "less");
break;
case "Stylus":
dependencies.push("stylus-loader", "stylus");
break;
}
}
return input;
},
},
{
type: "confirm",
name: "isCSS",
message: (answers) =>
`Will you be using CSS styles along with ${answers.cssType} in your project?`,
when: (answers) => answers.cssType !== "CSS only",
default: true,
},
{
type: "confirm",
name: "isPostCSS",
message: "Do you want to use PostCSS in your project?",
when: (answers) => answers.isCSS,
default: true,
},
{
type: "list",
name: "extractPlugin",
message: "Do you want to extract CSS into separate files?",
choices: ["No", "Only for Production", "Yes"],
when: (answers) => answers.isCSS,
default: "No",
filter: (input, _) => {
if (input !== "No") {
dependencies.push("mini-css-extract-plugin");
}
return input;
},
},
{
type: "list",
name: "packageManager",
message: "Which package manager do you want to use?",
choices: ["npm", "yarn"],
default: "npm",
validate(input, _) {
if (!input.trim()) {
return "Package manager cannot be empty";
}
return true;
},
},
],
name: "skip",
message: "Do you want to skip prompts and proceed with default options ?",
default: false,
});
if (skip) {
console.log("Skipping prompts and proceeding with default options");
return {
projectName: "webpack-project",
projectPath: resolve(join(process.cwd(), ".")),
langType: "none",
devServer: true,
htmlWebpackPlugin: true,
workboxWebpackPlugin: true,
cssType: "CSS only",
isCSS: true,
isPostCSS: true,
extractPlugin: "No",
packageManager: "npm",
};
} else {
console.log("Please answer the following prompts to create your project");
return await inquirer.prompt([
{
type: "input",
name: "projectName",
message: "Enter your project name:",
default: "webpack-project",
validate(input, _) {
if (!input.trim()) {
return "Project name cannot be empty";
}
return true;
},
},
{
type: "input",
name: "projectPath",
message: "Enter the project destination:",
default: ".",
filter: (input) => {
return resolve(join(process.cwd(), input));
},
},
{
type: "list",
name: "langType",
message: "Which of the following JS solutions do you want to use?",
choices: ["none", "ES6", "Typescript"],
default: "none",
filter: (input, _) => {
switch (input) {
case "ES6":
dependencies.push("babel-loader", "@babel/core", "@babel/preset-env");
break;
case "Typescript":
dependencies.push("typescript", "ts-loader");
break;
}
return input;
},
},
{
type: "confirm",
name: "devServer",
message: "Would you like to use Webpack Dev server?",
default: true,
},
{
type: "confirm",
name: "htmlWebpackPlugin",
message: "Do you want to simplify the creation of HTML files for your bundle?",
default: true,
},
{
type: "confirm",
name: "workboxWebpackPlugin",
message: "Do you want to add PWA support?",
default: true,
},
{
type: "list",
name: "cssType",
message: "Which of the following CSS solution do you want to use?",
choices: ["none", "CSS only", "SASS", "LESS", "Stylus"],
default: "Css only",
filter: (input, answers) => {
if (input === "none") {
answers.isCSS = false;
answers.isPostCSS = false;
answers.extractPlugin = "No";
} else {
dependencies.push("style-loader", "css-loader");
switch (input) {
case "CSS only":
answers.isCSS = true;
break;
case "SASS":
dependencies.push("sass-loader", "node-sass");
break;
case "LESS":
dependencies.push("less-loader", "less");
break;
case "Stylus":
dependencies.push("stylus-loader", "stylus");
break;
}
}
return input;
},
},
{
type: "confirm",
name: "isCSS",
message: (answers) =>
`Will you be using CSS styles along with ${answers.cssType} in your project?`,
when: (answers) => answers.cssType !== "CSS only",
default: true,
},
{
type: "confirm",
name: "isPostCSS",
message: "Do you want to use PostCSS in your project?",
when: (answers) => answers.isCSS,
default: true,
},
{
type: "list",
name: "extractPlugin",
message: "Do you want to extract CSS into separate files?",
choices: ["No", "Only for Production", "Yes"],
when: (answers) => answers.isCSS,
default: "No",
filter: (input, _) => {
if (input !== "No") {
dependencies.push("mini-css-extract-plugin");
}
return input;
},
},
{
type: "list",
name: "packageManager",
message: "Which package manager do you want to use?",
choices: ["npm", "yarn"],
default: "npm",
validate(input, _) {
if (!input.trim()) {
return "Package manager cannot be empty";
}
return true;
},
},
]);
}
},
actions: [
{
type: "addMany",
Expand Down
2 changes: 2 additions & 0 deletions packages/create-webpack-app/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export type {
PlopGeneratorConfig,
Actions,
} from "node-plop";
export interface Answers extends Record<string, any> {}

import { ActionType as ActionTypeBase, CustomActionConfig } from "node-plop";
// extended ACtionType to include custom action config as previously it was not recognizing
export type ActionType = ActionTypeBase | CustomActionConfig<string>;
Expand Down

0 comments on commit 1bdf924

Please sign in to comment.