@pplancq/create-react-app 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## @pplancq/create-react-app [1.2.0](https://github.com/pplancq/dev-tools/compare/@pplancq/create-react-app@1.1.0...@pplancq/create-react-app@1.2.0) (2024-03-18)
+
+
+### Features
+
+* **create-react-app:** update documentation for create new project ([3af363f](https://github.com/pplancq/dev-tools/commit/3af363f5c3e436fdbf346af3f19a33d4f17cecac))
+
+
+### Reverts
+
+* **dev-tool:** add package-lock when execute npm postversion ([1e83fe7](https://github.com/pplancq/dev-tools/commit/1e83fe7ee8d2529ce3b85e1abb56968171ee01ff))
+
+## @pplancq/create-react-app [1.1.0](https://github.com/pplancq/dev-tools/compare/@pplancq/create-react-app@1.0.0...@pplancq/create-react-app@1.1.0) (2024-03-12)
+
+
+### Features
+
+* **create-react-app:** add check to prevent command injection ([65de337](https://github.com/pplancq/dev-tools/commit/65de33787a4a6eed7588234be6bae1ace5503fb4))
+* **create-react-app:** add option to use vite on new project ([337a6f1](https://github.com/pplancq/dev-tools/commit/337a6f191db3c6aa474e6f9904d22b53ccb58577))
+* **create-react-app:** add remove CHANGELOG.md during create new project ([27d8e7b](https://github.com/pplancq/dev-tools/commit/27d8e7bd246664ec372dd34cedebff274031341b))
+* **create-react-app:** add support for yarn and pnpm ([eafc39d](https://github.com/pplancq/dev-tools/commit/eafc39d972b178ca21ed307166a9ba394161803f))
+* **react-template:** update readme ([3aa2543](https://github.com/pplancq/dev-tools/commit/3aa2543948a697f6604f4984884184d3f285d297))
+
 ## @pplancq/create-react-app 1.0.0 (2024-02-05)
 
 

package/README.md

@@ -10,8 +10,52 @@ To create a new React project with this package, use the following command:
 npm create @pplancq/react-app@latest <project_name>
 ```
 
+or
+
+```shell
+npx @pplancq/create-react-app@latest <project_name>
+```
+
+or
+
+```shell
+yarn create @pplancq/react-app@latest <project_name>
+```
+
+or
+
+```shell
+pnpm create @pplancq/react-app@latest <project_name>
+```
+
 Replace <project_name> with the name of your new project.
 
+### Using Vite
+
+This package also supports creating a new React project with Vite. If you prefer to use Vite instead of webpack, you can use the `--use-vite` option
+
+```shell
+npm create @pplancq/react-app@latest <project_name> -- --use-vite
+```
+
+or
+
+```shell
+npx @pplancq/create-react-app@latest <project_name> --use-vite
+```
+
+or
+
+```shell
+yarn create @pplancq/react-app@latest <project_name> --use-vite
+```
+
+or
+
+```shell
+pnpm create @pplancq/react-app@latest <project_name> --use-vite
+```
+
 ## Template
 
 This package uses the `@pplancq/react-template` to generate a new React project.

package/index.js

@@ -4,6 +4,10 @@ const { Command } = require('commander');
 const { cpSync, existsSync, readFileSync, renameSync, rmSync, writeFileSync, mkdirSync } = require('fs');
 const { resolve } = require('path');
 
+const NPM = 'npm';
+const YARN = 'yarn';
+const PNPM = 'pnpm';
+
 const runCommand = (command, options = { stdio: 'inherit' }) => {
   try {
     execSync(command, options);
@@ -13,22 +17,49 @@ const runCommand = (command, options = { stdio: 'inherit' }) => {
   }
 };
 
+const getPackageManager = () => {
+  switch (true) {
+    case process.env.npm_config_user_agent.includes(YARN):
+      return YARN;
+    case process.env.npm_config_user_agent.includes(PNPM):
+      return PNPM;
+    default:
+      return NPM;
+  }
+};
+
 const main = async () => {
   const chalk = await import('chalk').then(m => m.default);
 
   let projectName = '';
+  let useVite = false;
   const packageJson = JSON.parse(readFileSync(resolve(__dirname, './package.json'), { encoding: 'utf-8' }));
 
   const cli = new Command(packageJson.name);
   cli
     .version(packageJson.version)
     .argument('<project-name>')
+    .option('--use-vite', 'use vite on your application')
     .usage(chalk.green('<project-name>'))
-    .action(name => {
+    .action((name, options) => {
       projectName = name;
+      useVite = options.useVite ?? false;
     })
     .parse(process.argv);
 
+  const packageManager = getPackageManager();
+
+  if (!/^(@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(projectName)) {
+    console.error(`The project name '${projectName}' is not valid.`);
+    console.error(
+      'A valid npm project name must start with a lowercase letter, a number, a hyphen, or a tilde, and can include dots, hyphens, tildes, or underscores.',
+    );
+    console.error(
+      "If the project name starts with '@', it must be followed by a valid scope name and a '/'. Please check and try again.",
+    );
+    process.exit(-1);
+  }
+
   const reactTemplate = '@pplancq/react-template';
 
   const repoDir = resolve(process.cwd(), `./${projectName}`);
@@ -44,8 +75,12 @@ const main = async () => {
 
   console.info(`\nInstall react template from ${chalk.green(reactTemplate)}`);
   mkdirSync(repoDir);
-  runCommand(`cd ${repoDir} && npm install ${reactTemplate}`);
-  cpSync(templateDir, repoDir, { recursive: true });
+  runCommand(`cd ${repoDir} && npm init -y`, { stdio: 'ignore' });
+  if (packageManager === YARN) {
+    runCommand(`cd ${repoDir} && yarn config set nodeLinker node-modules`, { stdio: 'ignore' });
+  }
+  runCommand(`cd ${repoDir} && ${packageManager} ${packageManager === YARN ? 'add' : 'install'} ${reactTemplate}`);
+  cpSync(templateDir, repoDir, { recursive: true, dereference: true });
   renameSync(`${repoDir}/_gitignore`, `${repoDir}/.gitignore`);
   const repoPackageJson = JSON.parse(readFileSync(resolve(repoDir, 'package.json'), { encoding: 'utf-8' }));
   repoPackageJson.name = projectName;
@@ -60,14 +95,40 @@ const main = async () => {
 
   writeFileSync(resolve(repoDir, 'package.json'), JSON.stringify(repoPackageJson, null, 2), { encoding: 'utf-8' });
   rmSync(`${repoDir}/node_modules`, { recursive: true });
-  rmSync(`${repoDir}/package-lock.json`);
   rmSync(`${repoDir}/LICENSE`);
+  rmSync(`${repoDir}/CHANGELOG.md`);
+  rmSync(`${repoDir}/README.md`);
+  renameSync(`${repoDir}/_README.md`, `${repoDir}/README.md`);
+
+  let readme = readFileSync(resolve(repoDir, 'README.md'), { encoding: 'utf-8' });
+  switch (packageManager) {
+    case YARN:
+      rmSync(`${repoDir}/yarn.lock`);
+      readme = readme.replaceAll('npm install', 'yarn');
+      readme = readme.replaceAll('npm', 'yarn');
+      break;
+    case PNPM:
+      rmSync(`${repoDir}/pnpm-lock.yaml`);
+      readme = readme.replaceAll('npm', 'pnpm');
+      break;
+    default:
+      rmSync(`${repoDir}/package-lock.json`);
+  }
+  writeFileSync(resolve(repoDir, 'README.md'), readme, { encoding: 'utf-8' });
 
   console.info('\nInitialized a git repository.');
   runCommand(`cd ${repoDir} && git init --initial-branch=main`, { stdio: 'ignore' });
 
   console.info('\nInstalling packages. This might take a couple of minutes.');
-  runCommand(`cd ${repoDir} && npm install`);
+  runCommand(`cd ${repoDir} && ${packageManager} install`);
+
+  if (packageManager === PNPM) {
+    runCommand(`cd ${repoDir} && ${packageManager} install -D vite`);
+  }
+
+  if (useVite) {
+    runCommand(`cd ${repoDir} && ${packageManager} run migrate:vite`);
+  }
 
   console.info('\nCreated git commit.');
   runCommand(`cd ${repoDir} && git add . && git commit --no-verify --message "Initial commit"`, {
@@ -76,15 +137,24 @@ const main = async () => {
 
   console.info(`\n${chalk.yellow('Success \\o/')}  Created ${chalk.green(projectName)} at ${chalk.green(repoDir)}`);
   console.info('Inside that directory, you can run several commands:');
-  console.info(`\n  ${chalk.cyan('npm start')}`);
+  const logCommand = command => {
+    console.info(`\n  ${chalk.cyan(command)}`);
+  };
+  logCommand(`${packageManager} start`);
   console.info('    Starts the development server.');
-  console.info(`\n  ${chalk.cyan('npm run build')}`);
+  logCommand(`${packageManager} run build`);
   console.info('    Bundles the app into static files for production.');
-  console.info(`\n  ${chalk.cyan('npm test')}`);
+  logCommand(`${packageManager} test`);
   console.info('    Starts the test runner.');
+  logCommand(`${packageManager} run remove:demo`);
+  console.info('    Remove the demo application.');
+  if (!useVite) {
+    logCommand(`${packageManager} run migrate:vite`);
+    console.info('    Migrate from webpack to vite.');
+  }
   console.info('\nWe suggest that you begin by typing:');
   console.info(`\n  ${chalk.cyan('cd')} ${projectName}`);
-  console.info(`  ${chalk.cyan('npm start')}`);
+  logCommand(`${packageManager} start`);
   console.info('\nHappy hacking!');
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pplancq/create-react-app",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "license": "MIT",
   "description": "pplancq create-react-app",
   "author": "pplancq <paul.plancq@outlook.fr>",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "chalk": "^5.3.0",
-    "commander": "^11.1.0"
+    "commander": "^12.0.0"
   },
   "volta": {
     "node": "20.10.0",