makepack 1.0.9 → 1.2.1

package/asd/package.json

@@ -0,0 +1,21 @@
+{
+   "name": "asd",
+   "version": "1.0.0",
+   "description": "",
+   "main": "./index.js",
+   "scripts": {
+      "start": "makepack serve",
+      "pack": "makepack pack",
+      "publish:pack": "makepack pack -p"
+   },
+   "dependencies": {},
+   "devDependencies": {
+      "makepack": "latest",
+      "react": "^19.0.0",
+      "react-dom": "^19.0.0",
+      "typescript": "^4.4.2",
+      "@types/react": "^19.0.2",
+      "@types/react-dom": "^19.0.2"
+   },
+   "keywords": []
+}

package/asd/readme.md

@@ -0,0 +1,132 @@
+# MakePack CLI Documentation
+
+## Overview
+
+**MakePack** is a command-line interface (CLI) tool that helps you to quickly set up, build, and manage JavaScript, TypeScript, React, and React-TypeScript libraries for use in npm projects. With just a few simple commands, you can generate your own libraries, start a development server, or build and publish your project to the npm repository.
+
+## Installation
+
+To install **MakePack** globally, run the following command:
+
+```bash
+npm install -g makepack
+```
+
+This will allow you to use the `makepack` command anywhere in your terminal.
+
+## Commands
+
+### `create`
+
+The `create` command is used to create a new library project. It initializes the project structure, configures essential files, and sets up the environment for you to start working on your library.
+
+#### Usage
+
+```bash
+makepack create
+```
+
+#### Description
+
+- Creates a new library project by setting up the necessary configurations and boilerplate files.
+  
+This command will guide you through the initial setup for your library.
+
+---
+
+### `serve`
+
+The `serve` command starts a development server for your library, providing you with a live-reload environment where you can test and iterate on your library in real-time.
+
+#### Usage
+
+```bash
+makepack serve [options]
+```
+
+#### Options
+
+- `-p, --port <number>`  
+  _Port number_ (optional) (default is `5000`).
+  
+- `-e, --root <file>`  
+  _Root file_ (optional) (default is `serve.jsx` or `serve.tsx`). The entry point for your application. Specify the main JavaScript/TypeScript file to start the server.
+
+#### Description
+
+- Starts a local development server for testing and debugging your library.
+  
+Example:
+
+```bash
+makepack serve --port 4000 --root src/index.ts
+```
+
+---
+
+### `pack`
+
+The `pack` command is used to build your library and optionally publish it to the npm repository. This command compiles your code into a distributable format and prepares it for sharing with others.
+
+#### Usage
+
+```bash
+makepack pack [options]
+```
+
+#### Options
+
+- `-e, --entry <file>`  
+  _Entry file or directory_ (default is `src/**/*.{tsx,ts,js,jsx}`).  
+  Specify the entry file or use a glob pattern to select the files to include in your library.
+
+- `-p, --publish`  
+  _Publish the project to the npm repository_ (default is `false`).  
+  Add this flag if you want to publish the library to npm after building it.
+
+#### Description
+
+- Builds the project by compiling and bundling your library.
+- Optionally publishes the library to the npm repository.
+
+Example:
+
+```bash
+makepack pack --entry src/index.ts --publish
+```
+
+This will compile the project from `src/index.ts` and then publish the library to npm.
+
+---
+
+## Example Workflow
+
+1. Create a new project:
+
+```bash
+makepack create
+```
+
+2. Start the server for development:
+
+```bash
+makepack serve --port 4000 --root index.tsx
+```
+
+3. Once you're ready to build and publish your library:
+
+```bash
+makepack pack --entry src/**/*.{tsx,ts,js,jsx} --publish
+```
+
+This will build your library and publish it to npm.
+
+## GitHub Repository
+
+For more details, open issues, or contribute to the project, visit the [MakePack GitHub Repository](https://github.com/devnax/makepack).
+
+---
+
+## License
+
+This project is licensed under the MIT License. See the LICENSE file for more information.

package/asd/serve.jsx

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

package/asd/src/index.ts

@@ -0,0 +1,5 @@
+
+function add(a: number, b: number): number {
+  return a + b;
+}
+export default add

package/asd/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "makepack",
-  "version": "1.0.9",
+  "version": "1.2.1",
   "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

@@ -5,10 +5,11 @@ export default (args) => {
    }
 
    if (args.template.includes("react")) {
-      dependencies = {
-         "react": "^19.0.0",
-         "react-dom": "^19.0.0"
-      }
+      dependencies["react"] = "^19.0.0"
+      dependencies["react-dom"] = "^19.0.0"
+   } else {
+      devDependencies["react"] = "^19.0.0"
+      devDependencies["react-dom"] = "^19.0.0"
    }
 
    if (args.template.includes("typescript")) {

package/src/actions/create/files/readme.md.js

@@ -0,0 +1,14 @@
+import fs from 'fs-extra'
+import path from 'path'
+import { fileURLToPath } from 'url'
+export const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export default (args) => {
+   // load readme.md content from rootdir
+   const readme = fs.readFileSync(path.resolve(__dirname, '../../../../readme.md'), 'utf-8')
+   const content = readme
+   return {
+      content,
+      filename: `readme.md`
+   }
+}

package/src/actions/create/index.js

@@ -1,6 +1,7 @@
 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 info = await makeProjectInformation()
@@ -20,7 +21,11 @@ const create = async () => {
       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/makeFiles.js

@@ -10,12 +10,14 @@ import projectTsx from "./files/project-tsx.js";
 
 import fs from "fs-extra"
 import path from "path"
+import readmeMd from "./files/readme.md.js";
 
 export default async (args) => {
    const files = [
       packageJson(args),
       gitignore(args),
       serve(args),
+      readmeMd(args)
    ];
 
    switch (args.template) {

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();