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 (12fbc20, 85b06bc, d2ca7f6, 4c59396, 92c2f19, 04b5f90, a295914, b6baa6a, f9cb74a, 88acfd2, 667d50d, 488f3df, 897e00b, d5e9fc3, 9bf21bf, df39698, 55e13ec, 8f89b98, a17fa63, 93c2142, d9a0856, bb6ca9f, c175c9d, bb5e201, 5e6a70b, 1bdf924, acf5fa5, e6add83, 769e095, d8ec7e1, 3f66230, 4ac8bf0, d1fb3e7, f910fe3, 2928772)

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

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 90.19%. Comparing base (31f634a) to head (769e095).
Report is 52 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4167      +/-   ##
==========================================
+ Coverage   90.18%   90.19%   +0.01%     
==========================================
  Files          22       22              
  Lines        1702     1714      +12     
  Branches      491      493       +2     
==========================================
+ Hits         1535     1546      +11     
- Misses        167      168       +1

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...769e095. Read the comment docs.

…operty

- installs all the packages from deps array to the project directory

- single prompt to ask whether to skip - if yes then returns default answers object - if no then returns the interactive prompts interface

created commander cli implement init command with -s -f flags to skip and -f to override

- create test cases for all the functionalities - Default project - Project with a specified generation path - TypeScript project - ES6 project - Project with Sass - Project with Sass and PostCSS - Project with Mini-CSS-Extract-Plugin - Project with Sass, CSS, and PostCSSProject with Less - Project with Stylus - Project with Webpack Dev Server (WDS) - Project with HtmlWebpackPluginProject with WorkboxWebpackPlugin - Project with a writable current path - Project with Yarn package manager

snitin315 · 2024-06-15T02:28:14Z

.eslintignore

@@ -11,3 +11,6 @@ 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
+
+packages/create-webpack-app


We should run ESlint on all packages.

packages/create-webpack-app/README.md

snitin315 · 2024-06-15T02:30:34Z

packages/create-webpack-app/README.md

+## How to install
+
+```bash
+npm install --save-dev @webpack-cli/create-webpack-app


Installing it locally should not be required, npx create-react-app my-app should work directly.

snitin315 · 2024-06-15T02:34:17Z

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

@@ -0,0 +1,55 @@
+import { Command } from "commander";


Can we use the webpack-cli package? It also offers utilities like logger. Checkout the CLI tests for more info.

snitin315 · 2024-06-15T02:35:03Z

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

+    if (answers.isPostCSS) {
+      dependencies.push("postcss-loader", "autoprefixer");
+    }
+    console.log(`Installing packages: ${dependencies.join("\n")}`);


We should use logger utility from webpack-cli

snitin315 · 2024-06-15T02:43:45Z

@maverox I scaffolded the project with the following answers, but when I started the project there were some errors.

? Enter the project destination: /Users/nitin.kumar/Projects/open-source/webpack-cli/packages/create-webpack-app/test-project
? Enter your project name: test
? Which of the following JS solutions do you want to use? none
? Would you like to use Webpack Dev server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? No
? Which of the following CSS solution do you want to use? CSS only
? Do you want to use PostCSS in your project? Yes
? Do you want to extract CSS into separate files? Only for Production
? Which package manager do you want to use? yarn

snitin315 · 2024-06-15T02:45:35Z

packages/create-webpack-app/templates/init/default/webpack.config.js.tpl

+<% } %>
+
+const config = {
+    entry: '<%= entryPoint %>',


this should resolve to src/index.js in case of #4167 (comment)

Working on this

snitin315 · 2024-06-15T02:47:12Z

packages/create-webpack-app/templates/init/default/src/index.ts

@@ -0,0 +1,2 @@
+// delete this file if Language is Javascript


We should handle this ourselves. If the language is not javascript, it shouldn't be scaffolded at all.

I am working on this currently, after looking at the tests I have realised the default files and will try to add all other files conditionally.
So in a local change where I have implemented this conditional entry point generation, and soon add others like this.

anshumanv · 2024-06-15T05:45:44Z

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

+const plop = await nodePlop("./lib/plopfile.js");
+const defaultValues = {
+  init: {
+    projectPath: resolve(join(process.cwd(), ".")),


Writing this could be cumbersome, how about default to scaffold in the current dir? I think it's a standard to scaffold in the current dir.

Thoughts? @snitin315 @evenstensberg

Yeah, we don't have to ask the project path we can just scaffold files in cwd/project-name.

in a recent local commit I have changed the default projectPath to process.cwd() so the generator defaults to
cwd/project-name,
but do you want me to remove the prompt where it asks generation path?(because that is important for bypassing with argument for genPath)

fix grammar Co-authored-by: Nitin Kumar <snitin315@gmail.com>

Co-authored-by: Nitin Kumar <snitin315@gmail.com>

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 12 commits June 1, 2024 19:39

feat: add npmInstall custom package

d8ec7e1

- installs all the packages from deps array to the project directory

chore: remove redundant code

4c59396

fix: typo in prompt

04b5f90

feat: add skip prompt functionality

1bdf924

- single prompt to ask whether to skip - if yes then returns default answers object - if no then returns the interactive prompts interface

chore: install commander and remove obsolete deps

5e6a70b

refactor: remove dynamic prompt and revert to previous state

bb5e201

feat: create commander cli and implement skip feat

9bf21bf

created commander cli implement init command with -s -f flags to skip and -f to override

refactor: change prompt order to have genPath as first

a295914

refactor: change console output format for deps installation

e6add83

feat: change -s flag to -f|--force and make it default

4ac8bf0

chore: add 'uzair' as a word for cspell

d1fb3e7

maverox requested a review from snitin315 June 10, 2024 21:26

snitin315 self-assigned this Jun 15, 2024

snitin315 reviewed Jun 15, 2024

View reviewed changes

anshumanv reviewed Jun 15, 2024

View reviewed changes

maverox and others added 2 commits June 15, 2024 18:02

Update packages/create-webpack-app/README.md

3f66230

fix grammar Co-authored-by: Nitin Kumar <snitin315@gmail.com>

Update packages/create-webpack-app/README.md

769e095

Co-authored-by: Nitin Kumar <snitin315@gmail.com>

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

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

edited

evenstensberg May 17, 2024

maverox May 18, 2024 •

edited

evenstensberg May 17, 2024

maverox May 18, 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

snitin315 Jun 15, 2024

snitin315 Jun 15, 2024

snitin315 Jun 15, 2024

snitin315 Jun 15, 2024

snitin315 commented Jun 15, 2024

snitin315 Jun 15, 2024

maverox Jun 15, 2024

snitin315 Jun 15, 2024

maverox Jun 15, 2024

anshumanv Jun 15, 2024

snitin315 Jun 15, 2024

maverox Jun 15, 2024

		@@ -0,0 +1,2 @@
		// delete this file if Language is Javascript

Feat: init create webpack app #4167

Are you sure you want to change the base?

Feat: init create webpack app #4167

Conversation

maverox commented May 16, 2024 • edited

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

Choose a reason for hiding this comment

maverox May 18, 2024 • edited

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

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

snitin315 commented Jun 15, 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

maverox commented May 16, 2024 •

edited

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

edited

maverox May 18, 2024 •

edited

codecov bot commented May 25, 2024 •

edited