Feat: init create webpack app #4167

maverox · 2024-05-16T15:45:48Z

What kind of change does this PR introduce?

inits the create-webpack-app

Did you add tests for your changes?
yes
If relevant, did you update the documentation?

Summary

Does this PR introduce a breaking change?

Other information

- init create-webpack-app package - installed deps - plop - minimist

added template files which containe handlebar templates and other common files

init .tsconfig

change the internal structure of template files

add build script add watch script

type: module is set in package.json

linux-foundation-easycla · 2024-05-16T15:45:55Z

The committers listed above are authorized under a signed CLA.

✅ login: maverox / name: Uzair Khan (04b5f90, 88acfd2, 667d50d, bb5e201, 4c59396, c175c9d, f9cb74a, 488f3df, 9bf21bf, f910fe3, 55e13ec, bb6ca9f, d9a0856, 1bdf924, 5e6a70b, a17fa63, 85b06bc, 12fbc20, b6baa6a, d5e9fc3, df39698, acf5fa5, a295914, d8ec7e1, e6add83, 897e00b, 8f89b98, d2ca7f6, 92c2f19, 93c2142, 4ac8bf0, cb309df, 0a42c64, f3315f4, 19f59ea, 860e5c2, 3f66230, e3ef415, de92604, 22873e8, ff53355, 2928772, 3fb7b98, ea92e56, 769e095, f0196bd, d1fb3e7, fdd61df, 02f04cb, b82f4be, 8e9dfb6, b150fa8, 944bb33, b80f340, b4cca8f, 284ab14)

evenstensberg · 2024-05-17T19:29:48Z

packages/create-webpack-app/src/types.ts

+} from "node-plop";
+
+export type InitOptions = { template: string; force?: boolean };
+export type LoaderOptions = { template: string };


RE: slack conv, you should make this generic. You see the pattern

Okay I will work on this soon,
I will definitely use the already established types and interfaces in @generators package as inspiration and tweak them.

evenstensberg · 2024-05-17T19:31:38Z

packages/create-webpack-app/templates/init/default/README.md

+This project has been created using **webpack-cli**, you can now run
+
+```bash
+npm run build


https://nodejs.org/docs/latest/api/cli.html#--run

I am not sure what I am supposed to do here I would love if you can be a bit more specific,
all I can infer is you want me to change the run -> --run

Suggested change

npm run build

npm --run build

like this?
also I have read the section in the link provided

--run is not supported in v20 ,seems to be introduced in v22 only

add ejs for rendering logic using ejs templates in future

for compatibility with plopfile, as it throws error if it's a commonjs file

- change templates to ejs templates - implement ejs rendering logic in plopfile.ts

- remove helper function - remove unnecessary comment

maverox · 2024-05-18T23:33:58Z

@evenstensberg @snitin315 ,
I have resolved the problem with rendering
pushed the changes in the latest commits please have a look.

snitin315 · 2024-05-19T16:15:21Z

packages/create-webpack-app/README.md

+```js
+const createWebpackApp = require("create-webpack-app");
+
+// TODO: DEMONSTRATE API


Do we need to promote the API usage? IMO, CWA interaction should be limited to CLI.

I was thinking the same thing, will surely work on a better readme.

snitin315 · 2024-05-19T16:16:43Z

packages/create-webpack-app/bin/cli.js

+import { fileURLToPath } from "node:url";
+import minimist from "minimist";
+import { Plop, run } from "plop";
+/* cSpell:disable */


Does this disable cspell for the whole file or just the next line?

section of code but I have found a better alternative

Suggested change

/* cSpell:disable */

/* cSpell:words plopfile */

snitin315 · 2024-05-19T16:18:00Z

packages/create-webpack-app/package.json

+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webpack/create-webpack-app.git"


This is under the webpacki-cli repo

snitin315 · 2024-05-19T16:19:23Z

packages/create-webpack-app/package.json

+    "watch": "tsc --watch"
+  },
+  "engines": {
+    "node": ">=14.15.0"


Let's support the minimum version as v18, we also have plans to drop support for v14 in other packages too.

Suggested change

"node": ">=14.15.0"

"node": ">=18.12.0"

snitin315 · 2024-05-19T16:20:12Z

packages/create-webpack-app/package.json

+  "peerDependencies": {},
+  "peerDependenciesMeta": {}


Suggested change

"peerDependencies": {},

"peerDependenciesMeta": {}

changed this in latest commit

snitin315 · 2024-05-19T16:21:09Z

packages/create-webpack-app/src/plopfile.ts

+import { NodePlopAPI } from "./types";
+import { resolve } from "path";
+import ejs from "ejs";
+/* eslint-disable no-unused-vars */


Let's not disable the rule for the whole file, prefer to use //eslint-disable-next-line

changed this in latest commits

snitin315 · 2024-05-19T16:22:21Z

packages/create-webpack-app/src/plopfile.ts

+        message: "Enter your project name:",
+        default: "webpack-project",
+        validate(input, _) {
+          if (!input) {


A more strict check, in case the user just passes space.

Suggested change

if (!input) {

if (!input.trim()) {

snitin315 · 2024-05-19T16:23:29Z

packages/create-webpack-app/src/plopfile.ts

+      },
+      {
+        type: "input",
+        name: "configPath",


Suggested change

name: "configPath",

name: "projectPath",

snitin315 · 2024-05-19T16:25:49Z

packages/create-webpack-app/src/plopfile.ts

+        type: "input",
+        name: "entryPoint",
+        message: "Enter the entry point of your application:",
+        default: "src/index.js",
+        validate(input, _) {
+          if (!input) {
+            return "Entry point cannot be empty";
+          }
+          return true;
+        },


Since we are the ones generating templates we should have control over the entry point. We should not ask this question for scaffolding, users can refactor templates if they wish to post scaffolding.

That makes sense.

- better input validation - remove entrypoint prompt - fix path issues

- add both index.js and index.ts - fix bud in package.json template file

- fix the url - bumped the required node from 14 -> 18 - removed empty peerDeps and peerMetaDeps fields - fix cli entry point typo

maverox · 2024-05-19T20:59:41Z

@snitin315 I have made all the changes you asked!
PTAL

codecov · 2024-05-25T10:45:47Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 68.52%. Comparing base (31f634a) to head (3fb7b98).
Report is 64 commits behind head on master.

❗ There is a different number of reports uploaded between BASE (31f634a) and HEAD (3fb7b98). Click for more details.

HEAD has 36 uploads less than BASE

Flag BASE (31f634a) HEAD (3fb7b98)

40 4

Additional details and impacted files

@@             Coverage Diff             @@
##           master    #4167       +/-   ##
===========================================
- Coverage   90.18%   68.52%   -21.67%     
===========================================
  Files          22        9       -13     
  Lines        1702     1366      -336     
  Branches      491      427       -64     
===========================================
- Hits         1535      936      -599     
- Misses        167      430      +263

see 18 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cd1099a...3fb7b98. Read the comment docs.

…operty

- write whole command building and actions logic of commander in src/index.ts for future scalability and type safety - bin/cli.js now only contains importing this src/index.ts compiled lib/index.js file.

- using dynamic action function to generate files based on choices - change template structure

- using cross-spawn instead of normal spawn method

change stdio settings to incorporate each animations and spinners of the underlying child process

made necessary changes based on the differences from the original cli and its tests keeping original tests as base

earlier testing util spawn function was throwing error because of this.

evenstensberg · 2024-07-02T21:41:42Z

.cspell.json

@@ -92,6 +92,7 @@
    "testname",
    "Tobio",
    "tsbuildinfo",
+    "uzair",


Ohh I added this before I knew about Cspell:ignore

I will remove this in the next commit
"uzair" is my name actually

- remove projectName and the cumbersome projectPath/projectName resolution - adjust tests accordingly - change template/**/package.json.tpl accordingly - update readme accordingly

snitin315 · 2024-07-06T11:09:21Z

.eslintignore

@@ -11,3 +11,4 @@ test/build/config/error-commonjs/syntax-error.js
 test/build/config/error-mjs/syntax-error.mjs
 test/build/config/error-array/webpack.config.js
 test/configtest/with-config-path/syntax-error.config.js
+test/create-webpack-app/**


you can remove this now.

snitin315 · 2024-07-06T11:13:18Z

packages/create-webpack-app/templates/init/default/README.md

+This project has been created using **webpack-cli**, you can now run
+
+```bash
+npm run build


--run is not supported in v20 ,seems to be introduced in v22 only

snitin315 · 2024-07-06T11:14:50Z

test/create-webpack-app/test.utils.js

+const ENABLE_LOG_COMPILATION = process.env.ENABLE_PIPE || false;
+const isWindows = process.platform === "win32";
+
+const hyphenToUpperCase = (name) => {


I think we already have this util in test-utils, you can just use that.

snitin315 · 2024-07-06T11:16:29Z

test/create-webpack-app/test.utils.js

@@ -0,0 +1,426 @@
+/* eslint-disable node/no-unpublished-require */


This file is not needed, it's already present in the test-utils directory.

changed and reduced redundancy (ea92e56) significantly without affecting other suites.
checked locally by testing all but 1 test fails.

snitin315 · 2024-07-06T11:19:29Z

packages/create-webpack-app/src/index.ts

+  .aliases(["i", "n", "c", "create", "new"])
+  .description("Initialize a new Webpack project")
+  .argument("[projectPath]", "Path to create the project")
+  .option("-f, --force", "Skip the prompt and use the default values", false)


we need to add --template option too. The default value would be 'default'.

If it's okay I would like to do this change along with the react template and generator in a seperate PR.

- change dependencies for each prompt according to init command reference - change default for --force flag to appropriate values in index.ts as well as plopfile.ts - change conditional file generation for javascript langType

…/test-utils.js - earlier this file was an exact copy with a line changed - now it imports all the utility function and only extends run**() functions with path value pointing to create-webpack-cli

- change snapshots according to new dependencies and defaults - change the import in create-webpack-app.test.js

This reverts commit 0986f40.

maverox added 9 commits May 13, 2024 22:29

feat: init new package and installed deps

f910fe3

- init create-webpack-app package - installed deps - plop - minimist

feat: add template directory from prototype

c175c9d

added template files which containe handlebar templates and other common files

build: typescript init

12fbc20

init .tsconfig

build: set type: module in package.json

92c2f19

feat: change template to align more with generators package

488f3df

change the internal structure of template files

feat: add core logic to run generators and also add types

a17fa63

chore: add scripts in package.json

bb6ca9f

add build script add watch script

build: change module type to esm in package.json

d5e9fc3

type: module is set in package.json

feat: add entrypoint executable which wraps the generator cli

667d50d

maverox requested a review from a team as a code owner May 16, 2024 15:45

webpack-bot added the PR: unreviewed label May 16, 2024

evenstensberg reviewed May 17, 2024

View reviewed changes

maverox added 5 commits May 19, 2024 04:50

chore: add ejs and @types/ejs as dependencies

8f89b98

add ejs for rendering logic using ejs templates in future

build: change emit module of tsc to esnext

d2ca7f6

for compatibility with plopfile, as it throws error if it's a commonjs file

feat: add ejs template rendering support

acf5fa5

- change templates to ejs templates - implement ejs rendering logic in plopfile.ts

feat: add entryPoint prompt

df39698

chore: remove unused code

93c2142

- remove helper function - remove unnecessary comment

snitin315 reviewed May 19, 2024

View reviewed changes

maverox added 6 commits May 20, 2024 02:16

chore: change eslint and cspell silencer

85b06bc

build: change plopfile.ts on reviews

88acfd2

- better input validation - remove entrypoint prompt - fix path issues

feat: change the templates

55e13ec

- add both index.js and index.ts - fix bud in package.json template file

fix: fix missing comma in tsconfig

897e00b

chore: change package.json on reviews

f9cb74a

- fix the url - bumped the required node from 14 -> 18 - removed empty peerDeps and peerMetaDeps fields - fix cli entry point typo

docs: change readme based on review

b6baa6a

fix: customACtionConfig support in plopfile.ts setGenerator config pr…

d9a0856

…operty

maverox added 15 commits June 25, 2024 21:05

refactor: migrate cli logic to ts from js

cb309df

- write whole command building and actions logic of commander in src/index.ts for future scalability and type safety - bin/cli.js now only contains importing this src/index.ts compiled lib/index.js file.

feat: add conditional file generation based on dynamic action function

860e5c2

- using dynamic action function to generate files based on choices - change template structure

docs: change doc to align with its features

de92604

feat: change dependency installation to be cross-compatible

b150fa8

- using cross-spawn instead of normal spawn method

refactor: remove unused var

f3315f4

feat: add types

19f59ea

chore: enable eslint for package/create-webpack-app

02f04cb

chore: change module type and fix control flow for errors

284ab14

feat: add logger utility module

b80f340

refactor: refactor and implement logger

944bb33

feat: change stdio settings for pkgInstall action

b82f4be

change stdio settings to incorporate each animations and spinners of the underlying child process

fix: change conditional prompt to align with original logic

b4cca8f

test: implement test according to package

e3ef415

made necessary changes based on the differences from the original cli and its tests keeping original tests as base

fix: changed template package.json to improve compatibility with syntax

0a42c64

earlier testing util spawn function was throwing error because of this.

chore: add peerDep webpack-cli and dep colorette

f0196bd

webpack-bot added the PR: conflict label Jul 1, 2024

maverox force-pushed the feat/init-create-webpack-app branch from 6e9083c to f0196bd Compare July 1, 2024 16:34

webpack-bot removed the PR: conflict label Jul 1, 2024

evenstensberg reviewed Jul 2, 2024

View reviewed changes

maverox added 2 commits July 5, 2024 00:50

feat: remove projectName and use path only

8e9dfb6

- remove projectName and the cumbersome projectPath/projectName resolution - adjust tests accordingly - change template/**/package.json.tpl accordingly - update readme accordingly

chore: remove "uzair" as word from cspell.json

ff53355

snitin315 reviewed Jul 6, 2024

View reviewed changes

maverox added 4 commits July 7, 2024 13:56

chore: remove test/create-webpack-app from .eslintignore

22873e8

refactor: remove redundant code from test.utils and extend from utils…

ea92e56

…/test-utils.js - earlier this file was an exact copy with a line changed - now it imports all the utility function and only extends run**() functions with path value pointing to create-webpack-cli

test: update snapshots and test according to previous two commits

3fb7b98

- change snapshots according to new dependencies and defaults - change the import in create-webpack-app.test.js

snitin315 changed the base branch from master to feat/create-webpack-app-package July 10, 2024 05:03

snitin315 merged commit 0986f40 into webpack:feat/create-webpack-app-package Jul 10, 2024
9 of 47 checks passed

snitin315 added a commit that referenced this pull request Jul 10, 2024

Revert "feat: init create-webpack-app (#4167)"

195d2ba

This reverts commit 0986f40.

maverox deleted the feat/init-create-webpack-app branch July 12, 2024 08:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: init create webpack app #4167

Feat: init create webpack app #4167

maverox commented May 16, 2024 •

edited

Loading

linux-foundation-easycla bot commented May 16, 2024 •

edited

Loading

evenstensberg May 17, 2024

maverox May 18, 2024 •

edited

Loading

evenstensberg May 17, 2024

maverox May 18, 2024

snitin315 Jul 6, 2024

maverox commented May 18, 2024

snitin315 May 19, 2024

maverox May 19, 2024

snitin315 May 19, 2024

maverox May 19, 2024

snitin315 May 19, 2024

snitin315 May 19, 2024

snitin315 May 19, 2024

maverox May 19, 2024

snitin315 May 19, 2024

maverox May 19, 2024

snitin315 May 19, 2024

snitin315 May 19, 2024

snitin315 May 19, 2024

maverox May 19, 2024

maverox commented May 19, 2024

codecov bot commented May 25, 2024 •

edited

Loading

evenstensberg Jul 2, 2024

maverox Jul 4, 2024

snitin315 Jul 6, 2024

maverox Jul 7, 2024

snitin315 Jul 6, 2024

snitin315 Jul 6, 2024

snitin315 Jul 6, 2024

maverox Jul 7, 2024

snitin315 Jul 6, 2024

maverox Jul 7, 2024

		@@ -0,0 +1,426 @@
		/* eslint-disable node/no-unpublished-require */

Feat: init create webpack app #4167

Feat: init create webpack app #4167

Conversation

maverox commented May 16, 2024 • edited Loading

linux-foundation-easycla bot commented May 16, 2024 • edited Loading

Choose a reason for hiding this comment

maverox May 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maverox commented May 18, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maverox commented May 19, 2024

codecov bot commented May 25, 2024 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maverox commented May 16, 2024 •

edited

Loading

linux-foundation-easycla bot commented May 16, 2024 •

edited

Loading

maverox May 18, 2024 •

edited

Loading

codecov bot commented May 25, 2024 •

edited

Loading