feat: add loader

README.md

@@ -3,9 +3,9 @@
 # ALRIGHT REACT APP
 
 Professional React app generator. Shipped with an exposed, unopinionated, highly-performant config.
-Jest-SWC, Storybook, SWC, Typescript, Webpack 5.
+Jest-SWC, Storybook, SWC, Typescript 5, Webpack 5.
 
-<img width="431" alt="alright-react-app-in-terminal" src="https://user-images.githubusercontent.com/43271780/163389884-36c6288e-522a-40bd-aafb-0bfc20f3c955.png">
+<img width="461" alt="Screenshot 2023-04-19 at 15 52 27" src="https://user-images.githubusercontent.com/43271780/233097410-90ca4a37-f368-451d-9dd0-4b60a954c53e.png">
 
 # GETTING STARTED
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "alright-react-app",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "Professional React app generator. Shipped with an exposed, unopinionated, highly-performant config. Jest-SWC, Storybook, SWC, Typescript, Webpack 5.",
   "main": "index.js",
   "author": "DoneDeal0",
@@ -28,6 +28,7 @@
   "dependencies": {
     "chalk": "^5.2.0",
     "inquirer": "^9.1.5",
+    "ora": "^6.3.0",
     "which": "^3.0.0"
   },
   "engines": {

tasks/create-project.js

@@ -4,29 +4,16 @@ import chalk from "chalk";
 import fs from "fs";
 import inquirer from "inquirer";
 import path from "path";
-import { spawnSync } from "child_process";
 import which from "which";
 import { createDirectoryContent } from "./create-directory-content.js";
+import { installDependencies } from "./installation.js";
 import { postInstall } from "./post-install.js";
 import { preInstall } from "./pre-install.js";
-
-const QUESTION = [
-  {
-    name: "project-name",
-    type: "input",
-    message: "Project name:",
-    validate: function (input) {
-      if (/^([A-Za-z\-\_\d])+$/.test(input)) {
-        return true;
-      }
-      return "Sorry, your project name must only include letters, numbers, dashes or underscores.";
-    },
-  },
-];
+import { question } from "./question.js";
 
 export async function createProject(directory, __dirname) {
   try {
-    const answer = await inquirer.prompt(QUESTION);
+    const answer = await inquirer.prompt(question);
     const projectName = answer["project-name"];
     const templatePath = `${__dirname}/template`;
     const projectPath = path.join(directory, projectName);
@@ -41,22 +28,10 @@ export async function createProject(directory, __dirname) {
     const hasYarn = await which("yarn", { nothrow: true });
     const command = hasYarn ? "yarn" : "npm";
     preInstall(projectName, command);
-    const { error } = spawnSync(command, ["install"], {
-      cwd: projectPath,
-      stdio: "inherit",
-    });
-    if (error) {
-      console.error(
-        chalk.red.bold(
-          `An error occurred while running '${command} install':`,
-          error
-        )
-      );
-    } else {
-      const _command = hasYarn ? "yarn" : "npm run";
-      postInstall(projectName, _command);
-    }
+    await installDependencies(command, projectPath);
+    const _command = hasYarn ? "yarn" : "npm run";
+    postInstall(projectName, _command);
   } catch (err) {
-    console.error(chalk.red.bold("An error occurred! Here is why:", err));
+    console.error(chalk.red.bold("The following error occurred:", err));
   }
 }

tasks/installation.js

@@ -0,0 +1,22 @@
+import ora from "ora";
+import { spawn } from "child_process";
+
+export async function installDependencies(command, projectPath) {
+  return new Promise((resolve, reject) => {
+    const installationProcess = spawn(command, ["install"], {
+      cwd: projectPath,
+      stdio: "pipe",
+    });
+    const spinner = ora("Installing dependencies...").start();
+    spinner.color = "yellow";
+    installationProcess.on("error", (error) => {
+      spinner.fail("Failed to install dependencies");
+      reject(error);
+    });
+
+    installationProcess.on("exit", () => {
+      spinner.succeed("Dependencies installed successfully");
+      resolve();
+    });
+  });
+}

tasks/pre-install.js

@@ -6,8 +6,6 @@ export function preInstall(projectName, command) {
     `${chalk.yellow.bold(projectName)}'s files and folders have been created`,
     "\n",
     `${chalk.green.bold(command)} detected`,
-    "\n",
-    "Let's installing the dependencies!",
     "\n"
   );
 }

tasks/question.js

@@ -0,0 +1,13 @@
+export const question = [
+  {
+    name: "project-name",
+    type: "input",
+    message: "Project name:",
+    validate: function (input) {
+      if (/^([A-Za-z\-\_\d])+$/.test(input)) {
+        return true;
+      }
+      return "Sorry, your project name must only include letters, numbers, dashes or underscores.";
+    },
+  },
+];

template/package.json

@@ -20,11 +20,10 @@
     "react-router": "^6.10.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.0.6",
-    "@storybook/builder-webpack5": "^7.0.6",
-    "@storybook/cli": "^7.0.6",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^7.0.6",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/react": "^6.5.10",
     "@svgr/webpack": "^7.0.0",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.51",