refactor: create-webpack-app (#4352)

alexander-akait · web-flow · commit 0a7241025ad5 · 2024-12-19T19:08:18.000+03:00
diff --git a/packages/create-webpack-app/package.json b/packages/create-webpack-app/package.json
@@ -39,9 +39,6 @@
     "lib",
     "!**/*__tests__"
   ],
-  "peerDependencies": {
-    "webpack-cli": "^5.x.x"
-  },
   "dependencies": {
     "@inquirer/prompts": "^7.2.0",
     "colorette": "^2.0.20",
diff --git a/packages/create-webpack-app/src/generators/init/default.ts b/packages/create-webpack-app/src/generators/init/default.ts
@@ -1,11 +1,11 @@
-import { Answers, ActionType, FileRecord } from "../../types";
+import { type Answers, type ActionType, type FileRecord } from "../../types";
+import { type NodePlopAPI, type DynamicActionsFunction } from "node-plop";
 import { dirname, join, resolve } from "path";
-import { NodePlopAPI, DynamicActionsFunction } from "node-plop";
 import { fileURLToPath } from "url";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default async function (plop: NodePlopAPI) {
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+
   // dependencies to be installed
   const devDependencies: Array<string> = ["webpack", "webpack-cli"];
 
diff --git a/packages/create-webpack-app/src/generators/init/react.ts b/packages/create-webpack-app/src/generators/init/react.ts
@@ -1,11 +1,11 @@
-import { Answers, ActionType, FileRecord } from "../../types";
+import { type Answers, type ActionType, type FileRecord } from "../../types";
+import { type NodePlopAPI, type DynamicActionsFunction } from "node-plop";
 import { dirname, resolve, join } from "path";
-import { NodePlopAPI, DynamicActionsFunction } from "node-plop";
 import { fileURLToPath } from "url";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default async function (plop: NodePlopAPI) {
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+
   // dependencies to be installed
   const devDependencies: Array<string> = [
     "webpack",
diff --git a/packages/create-webpack-app/src/generators/init/svelte.ts b/packages/create-webpack-app/src/generators/init/svelte.ts
@@ -1,11 +1,11 @@
-import { Answers, ActionType, FileRecord } from "../../types";
+import { type Answers, type ActionType, type FileRecord } from "../../types";
+import { type NodePlopAPI, type DynamicActionsFunction } from "node-plop";
 import { dirname, join, resolve } from "path";
-import { NodePlopAPI, DynamicActionsFunction } from "node-plop";
 import { fileURLToPath } from "url";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default async function (plop: NodePlopAPI) {
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+
   // dependencies to be installed
   const devDependencies: Array<string> = [
     "webpack",
diff --git a/packages/create-webpack-app/src/generators/init/vue.ts b/packages/create-webpack-app/src/generators/init/vue.ts
@@ -1,10 +1,11 @@
-import { Answers, ActionType, FileRecord } from "../../types";
+import { type Answers, type ActionType, type FileRecord } from "../../types";
+import { type NodePlopAPI, type DynamicActionsFunction } from "node-plop";
 import { dirname, join, resolve } from "path";
-import { NodePlopAPI, DynamicActionsFunction } from "node-plop";
 import { fileURLToPath } from "url";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
 export default async function (plop: NodePlopAPI) {
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+
   // dependencies to be installed
   const devDependencies: Array<string> = [
     "webpack",
diff --git a/packages/create-webpack-app/src/generators/loader/default.ts b/packages/create-webpack-app/src/generators/loader/default.ts
@@ -1,12 +1,12 @@
-import { Answers, ActionType, FileRecord } from "../../types";
+import { type Answers, type ActionType, type FileRecord } from "../../types";
+import { type NodePlopAPI, type DynamicActionsFunction } from "node-plop";
 import { dirname, join, resolve } from "path";
-import { NodePlopAPI, DynamicActionsFunction } from "node-plop";
 import { fileURLToPath } from "url";
 import { logger } from "../../utils/logger.js";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default async function (plop: NodePlopAPI) {
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+
   // dependencies to be installed
   const devDependencies: Array<string> = ["webpack-defaults"];
 
diff --git a/packages/create-webpack-app/src/generators/plugin/default.ts b/packages/create-webpack-app/src/generators/plugin/default.ts
@@ -1,12 +1,12 @@
-import { Answers, ActionType, FileRecord } from "../../types";
+import { type Answers, type ActionType, type FileRecord } from "../../types";
+import { type NodePlopAPI, type DynamicActionsFunction } from "node-plop";
 import { dirname, join, resolve } from "path";
-import { NodePlopAPI, DynamicActionsFunction } from "node-plop";
 import { fileURLToPath } from "url";
 import { logger } from "../../utils/logger.js";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default async function (plop: NodePlopAPI) {
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+
   // dependencies to be installed
   const devDependencies: Array<string> = ["webpack-defaults"];
 
diff --git a/packages/create-webpack-app/src/index.ts b/packages/create-webpack-app/src/index.ts
@@ -1,11 +1,11 @@
 import { Command } from "commander";
 import { resolve, dirname } from "path";
 import { select } from "@inquirer/prompts";
-import nodePlop, { PlopGenerator } from "node-plop";
+import nodePlop, { type PlopGenerator } from "node-plop";
 import { fileURLToPath } from "url";
 
 import { onSuccessHandler, onFailureHandler, logger } from "./utils/logger.js";
-import { Answers, InitOptions, LoaderOptions, PluginOptions } from "./types";
+import { type Answers, type InitOptions, type LoaderOptions, type PluginOptions } from "./types";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -63,7 +63,6 @@ const pluginGenerators: Record<string, PlopGenerator> = {
 };
 
 program
-  .version("1.0.0", "-v, --version")
   .usage("[command] [options]")
   .helpOption("-h, --help", "Display help for command")
   .description("A CLI tool to generate a Webpack project");
@@ -127,6 +126,7 @@ program
       process.exit(2);
     }
   });
+
 program
   .command("loader")
   .aliases(["l", "ld"])
@@ -167,6 +167,7 @@ program
       process.exit(2);
     }
   });
+
 program
   .command("plugin")
   .aliases(["p", "pl"])
diff --git a/packages/create-webpack-app/src/plopfile.ts b/packages/create-webpack-app/src/plopfile.ts
@@ -1,4 +1,4 @@
-import { NodePlopAPI } from "node-plop";
+import { type NodePlopAPI } from "node-plop";
 
 export default async function (plop: NodePlopAPI) {
   //init generators
diff --git a/packages/create-webpack-app/src/types.ts b/packages/create-webpack-app/src/types.ts
@@ -24,3 +24,15 @@ export type FileRecord = {
   filePath: string;
   fileType: string;
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type LogHandler = (value: any) => void;
+
+export interface Logger {
+  error: LogHandler;
+  warn: LogHandler;
+  info: LogHandler;
+  success: LogHandler;
+  log: LogHandler;
+  raw: LogHandler;
+}
diff --git a/packages/create-webpack-app/src/utils/fileGenerator.ts b/packages/create-webpack-app/src/utils/fileGenerator.ts
@@ -5,8 +5,8 @@ import { spawn, sync } from "cross-spawn";
 import * as path from "path";
 import { fileURLToPath } from "url";
 import { logger } from "./logger.js";
-import { NodePlopAPI } from "node-plop";
-import { Answers } from "../types";
+import { type NodePlopAPI } from "node-plop";
+import { type Answers } from "../types";
 
 export interface AddConfig {
   type: string; // Type of action
@@ -32,7 +32,6 @@ export interface GlobalConfig {
   overwriteAll: boolean;
 }
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const globalConfig: GlobalConfig = { overwriteAll: false };
 
 async function doesFileExists(filePath: string): Promise<boolean> {
@@ -236,6 +235,8 @@ async function checkAndPrepareContent(config: AddConfig, isTemplate: boolean): P
   }
 }
 export default async function (plop: NodePlopAPI) {
+  const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
   plop.setPlopfilePath(path.resolve(__dirname, "../plopfile.js"));
   plop.setDefaultInclude({ actions: true });
 
diff --git a/packages/create-webpack-app/src/utils/logger.ts b/packages/create-webpack-app/src/utils/logger.ts
@@ -1,10 +1,9 @@
-import { WebpackCLILogger } from "webpack-cli";
 import { green, yellow, Color, red, cyan, blue, blueBright, greenBright } from "colorette";
-import { PlopActionHooksChanges, PlopActionHooksFailures } from "../types";
+import { type Logger, type PlopActionHooksChanges, type PlopActionHooksFailures } from "../types";
 import { relative, normalize } from "path";
 
 const prefix: string = blueBright("create-webpack");
-const getLogger = (): WebpackCLILogger => {
+const getLogger = (): Logger => {
   return {
     error: (val) => console.error(`[${prefix}] ⛔${red(val)}`),
     warn: (val) => console.warn(`[${prefix}] ⚠️${yellow(val)}`),
@@ -15,6 +14,7 @@ const getLogger = (): WebpackCLILogger => {
   };
 };
 const logger = getLogger();
+
 const typeDisplay: Record<string, Color | string> = {
   function: yellow("-> "),
   add: green("create "),
@@ -26,6 +26,7 @@ const typeDisplay: Record<string, Color | string> = {
   identical: greenBright("identical "),
   create: green("create "),
 };
+
 function onSuccessHandler(change: PlopActionHooksChanges): void {
   change.path.split("\n").forEach((line) => {
     const [operationType = "", renderPath = ""] = line.split("|") as [string, string];
@@ -34,6 +35,7 @@ function onSuccessHandler(change: PlopActionHooksChanges): void {
     );
   });
 }
+
 function onFailureHandler(failure: PlopActionHooksFailures): void {
   throw new Error(failure.error);
 }
diff --git a/packages/create-webpack-app/src/utils/pkgInstallAction.ts b/packages/create-webpack-app/src/utils/pkgInstallAction.ts
@@ -1,12 +1,17 @@
-import { NodePlopAPI } from "node-plop";
+import { type NodePlopAPI } from "node-plop";
 import { dirname, resolve } from "path";
 import { spawn } from "cross-spawn";
-import { ChildProcess, SpawnOptionsWithStdioTuple, StdioNull, StdioPipe } from "child_process";
+import {
+  type ChildProcess,
+  type SpawnOptionsWithStdioTuple,
+  type StdioNull,
+  type StdioPipe,
+} from "child_process";
 import { fileURLToPath } from "url";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default async function (plop: NodePlopAPI) {
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+
   plop.setPlopfilePath(resolve(__dirname, "../plopfile.js"));
   plop.setDefaultInclude({ actions: true });
   plop.setActionType("pkgInstall", (answers, config) => {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { NodePlopAPI } from "node-plop";`
	`1`	`+import { type NodePlopAPI } from "node-plop";`
`2`	`2`
`3`	`3`	`export default async function (plop: NodePlopAPI) {`
`4`	`4`	`//init generators`