From 0a7241025ad5597156d092009e82b34f807ee202 Mon Sep 17 00:00:00 2001 From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com> Date: Thu, 19 Dec 2024 19:08:18 +0300 Subject: [PATCH] refactor: create-webpack-app (#4352) --- packages/create-webpack-app/package.json | 3 --- .../src/generators/init/default.ts | 8 ++++---- .../create-webpack-app/src/generators/init/react.ts | 8 ++++---- .../src/generators/init/svelte.ts | 8 ++++---- .../create-webpack-app/src/generators/init/vue.ts | 7 ++++--- .../src/generators/loader/default.ts | 8 ++++---- .../src/generators/plugin/default.ts | 8 ++++---- packages/create-webpack-app/src/index.ts | 7 ++++--- packages/create-webpack-app/src/plopfile.ts | 2 +- packages/create-webpack-app/src/types.ts | 12 ++++++++++++ .../create-webpack-app/src/utils/fileGenerator.ts | 7 ++++--- packages/create-webpack-app/src/utils/logger.ts | 8 +++++--- .../src/utils/pkgInstallAction.ts | 13 +++++++++---- 13 files changed, 59 insertions(+), 40 deletions(-) diff --git a/packages/create-webpack-app/package.json b/packages/create-webpack-app/package.json index 6bc20c35f8a..1e6d8e514d0 100644 --- 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 index b617059bd86..08c8491a8bb 100644 --- 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 = ["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 index 32b3a0a540e..9984de2d9d0 100644 --- 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 = [ "webpack", diff --git a/packages/create-webpack-app/src/generators/init/svelte.ts b/packages/create-webpack-app/src/generators/init/svelte.ts index 98dc3aee228..1c836156f3d 100644 --- 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 = [ "webpack", diff --git a/packages/create-webpack-app/src/generators/init/vue.ts b/packages/create-webpack-app/src/generators/init/vue.ts index 025daa80648..fb90403e9c3 100644 --- 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 = [ "webpack", diff --git a/packages/create-webpack-app/src/generators/loader/default.ts b/packages/create-webpack-app/src/generators/loader/default.ts index be50e990938..83f2f1dc5fc 100644 --- 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 = ["webpack-defaults"]; diff --git a/packages/create-webpack-app/src/generators/plugin/default.ts b/packages/create-webpack-app/src/generators/plugin/default.ts index cd8f5330e9b..e03f7a9b2a7 100644 --- 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 = ["webpack-defaults"]; diff --git a/packages/create-webpack-app/src/index.ts b/packages/create-webpack-app/src/index.ts index 1f67cc6c65d..a9a752c9720 100644 --- 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 = { }; 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 index 22c7b6e8930..da3e5ad61d1 100644 --- 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 index 46c0ee18cf3..0446206116f 100644 --- 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 index fe375e67d61..15505d95e2f 100644 --- 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 { @@ -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 index 162bbc011e1..2518eb05ce3 100644 --- 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 = { function: yellow("-> "), add: green("create "), @@ -26,6 +26,7 @@ const typeDisplay: Record = { 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 index 633da7604c0..0c3dcce6716 100644 --- 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) => {