makepack 1.0.8 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "makepack",
-  "version": "1.0.8",
+  "version": "1.2.0",
   "type": "module",
   "description": "A CLI tool to create, build, and manage JavaScript, TypeScript, React, and React-TypeScript libraries for npm projects.",
   "categories": [
@@ -20,16 +20,18 @@
   },
   "homepage": "https://github.com/devnax/makepack#readme",
   "scripts": {},
-  "devDependencies": {},
   "dependencies": {
+    "chalk": "^5.4.1",
     "commander": "^12.1.0",
-    "inquirer": "^12.1.0",
     "esbuild": "^0.24.2",
     "express": "^4.21.1",
+    "figlet": "^1.8.0",
+    "figures": "^6.1.0",
     "fs-extra": "^11.2.0",
+    "glob": "^11.0.0",
+    "inquirer": "^12.1.0",
     "typescript": "^5.7.2",
-    "vite": "^6.0.2",
-    "glob": "^11.0.0"
+    "vite": "^6.0.2"
   },
   "keywords": [
     "CLI",
@@ -39,5 +41,9 @@
     "TypeScript",
     "React",
     "npm-package"
-  ]
+  ],
+  "devDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
 }

package/serve.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+const App = () => {
+  return (
+    <div style={{ fontFamily: 'monospace,math, sans-serif', textAlign: 'center', marginTop: '50px' }}>
+      <h1>Welcome to makepack CLI!</h1>
+      <p>Edit <code></code> and save to reload.</p>
+      as
+      <a
+        href="https://reactjs.org"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ color: '#61dafb', textDecoration: 'none' }}
+      >
+        Learn
+      </a>
+    </div>
+  );
+}
+const rootEle = document.getElementById('root')
+if (rootEle) {
+  const root = createRoot(rootEle);
+  root.render(<App />);
+}

package/src/actions/create/files/package-json.js

@@ -21,7 +21,7 @@ export default (args) => {
    main.pop()
 
    const json = {
-      name: args.diraname,
+      name: args.dirname,
       version: "1.0.0",
       description: "",
       main: `./${main.join(".")}.js`,

package/src/actions/create/index.js

@@ -1,26 +1,31 @@
 import { execSync, logLoader, __dirname } from "../../helpers.js"
 import makeProjectInformation from "./makeProjectInformation.js"
 import makeFiles from "./makeFiles.js"
+import figlet from 'figlet'
 
 const create = async () => {
-   let projectInformation = await makeProjectInformation()
+   let info = await makeProjectInformation()
    let loader = logLoader("Creating project...")
-   await makeFiles(projectInformation)
+   await makeFiles(info)
    loader.stop("")
 
    loader = logLoader("Installing dependencies...")
    execSync("npm install", {
-      cwd: projectInformation.cwd,
+      cwd: info.cwd,
    })
 
    loader.stop("Project setup complete!")
-   if (projectInformation.isCurrentDir) {
+   if (info.isCurrentDir) {
       console.log(`Run the development server: \nnpm start\nEnjoy your new project! 😊`);
    } else {
-      console.log(`To start working with your project:\n1. Navigate to your project directory:\ncd ${projectInformation.dirname}\n2. Run the development server:\nnpm start\nEnjoy your new project! 😊`);
+      console.log(`To start working with your project:\n1. Navigate to your project directory:\ncd ${info.dirname}\n2. Run the development server:\nnpm start\nEnjoy your new project! 😊`);
    }
 
-
+   figlet("Make Pack CLI", function (err, data) {
+      if (!err) {
+         console.log(data);
+      }
+   });
 }
 
 export default create

package/src/actions/create/makeProjectDirectory.js

@@ -36,7 +36,7 @@ export default async () => {
 
    return {
       cwd: projectDir,
-      diraname: path.basename(projectDir),
+      dirname: projectDirName,
       isCurrentDir: projectDirName === cwdFolder
    }
 }

package/src/actions/create/makeProjectInformation.js

@@ -17,7 +17,7 @@ const makeProjectInformation = async () => {
       }
    ])
 
-   if (projectDir.diraname !== cwdFolder) {
+   if (projectDir.dirname !== cwdFolder) {
       fs.removeSync(projectDir.cwd)
       fs.mkdirSync(projectDir.cwd)
    }
@@ -46,7 +46,7 @@ const makeProjectInformation = async () => {
      port: 3000,
      outdir: "pack",
      cwd: 'C:\xampp\htdocs\makepack\asd',
-     diraname: 'asd',
+     dirname: 'asd',
      isCurrentDir: false,
      template: 'typescript',
      rootdir: 'src',

package/src/actions/{serve.js → serve/index.js}

@@ -4,6 +4,9 @@ import path from 'path'
 import { createServer as createViteServer } from 'vite';
 import express from 'express';
 import { glob } from 'glob'
+import logger from './loger.js'
+import chalk from 'chalk';
+import figlet from 'figlet';
 
 const app = express();
 
@@ -43,11 +46,20 @@ const serve = async (args) => {
       </html>
   `;
 
+   console.log(args.root);
+
    const vite = await createViteServer({
       root: process.cwd(),
       // plugins: [react()],
       server: {
-         middlewareMode: true
+         middlewareMode: true,
+      },
+      customLogger: {
+         info: (msg) => {
+            logger.info(msg)
+         },
+         warn: (msg) => logger.warning(msg),
+         error: (msg) => logger.error(msg),
       },
       appType: 'custom'
    });
@@ -66,11 +78,25 @@ const serve = async (args) => {
       }
    });
 
-   app.use('*', async (_req, res) => {
-      res.status(404).end("404 page not found");
+   let server = app.listen(args.port, () => {
+      figlet("Make Pack", function (err, data) {
+         if (err) {
+            console.log("Something went wrong...");
+            console.dir(err);
+            server.close(() => {
+               console.log('Server has been stopped.');
+            });
+            process.exit()
+         }
+         console.log(data);
+         logger.success(`Server is running on ${chalk.blue(chalk.underline(`http://localhost:${args.port}`))}`);
+      });
    });
 
-   app.listen(args.port, () => console.log(`http://localhost:${args.port}`));
+   app.use((err, req, res, next) => {
+      logger.error(`Unhandled Error: ${err.message}`);
+      res.status(500).send('Internal Server Error');
+   });
 }
 
 export default serve

package/src/actions/serve/loger.js

@@ -0,0 +1,22 @@
+import chalk from 'chalk';
+import figures from 'figures';
+
+const logger = {
+   info: (message, prefix = 'INFO', icon = true) => {
+      console.log(`${icon ? chalk.blue(figures.info) + " " : ""}${chalk.cyan.bold(prefix)} ${message}`);
+   },
+   success: (message, prefix = 'SUCCESS:', icon = true) => {
+      console.log(`${icon ? chalk.green(figures.tick) + " " : ""}${chalk.green.bold(prefix)} ${message}`);
+   },
+   warning: (message, prefix = 'WARNING:', icon = true) => {
+      console.log(`${icon ? chalk.yellow(figures.warning) + " " : ""}${chalk.yellow.bold(prefix)} ${message}`);
+   },
+   error: (message, prefix = 'ERROR:', icon = true) => {
+      console.log(`${icon ? chalk.red(figures.cross) + " " : ""}${chalk.red.bold(prefix)} ${message}`);
+   },
+   custom: (icon, color, label, message) => {
+      console.log(`${chalk[color](icon)} ${chalk[color].bold(`${label}:`)} ${message}`);
+   },
+};
+
+export default logger;

package/src/index.js

@@ -1,10 +1,9 @@
 #!/usr/bin/env node
 
 import { Command } from "commander";
-import serve from "./actions/serve.js";
+import serve from "./actions/serve/index.js";
 import pack from "./actions/pack.js";
 import create from "./actions/create/index.js";
-import path from 'path'
 
 const program = new Command();