makepack 1.4.0 → 1.5.1

package/README.md

@@ -1,167 +1,122 @@
-<p align="center">
-  <a href="https://github.com/devnax/makepack" rel="noopener" target="_blank"><img  src="https://raw.githubusercontent.com/devnax/makepack/main/logo.png" alt="Makepack logo"></a>
-</p>
-
-<h1 align="center">Makepack</h1>
-
-**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.
-
-## Configuration Files
-
-Previously, the project used separate configuration files for Vite and esbuild:
-- `vite.config.js`
-- `esbuild.config.js`
-
-These files have been removed and replaced with a single configuration file: `makepack.js`.
-
-## makepack.js
-
-The `makepack.js` file exports a function that takes the previous configuration (`prevConfig`) and returns a new configuration (`newConfig`). This allows you to configure both esbuild and Vite in one place.
-
-### Example Usage
-
-```javascript
-// filepath: /Volumes/Work Space/makepack/makepack.js
-module.exports = function(prevConfig) {
-    const newConfig = {
-        // ...your new configuration here...
-    };
-    return newConfig;
-};
-```
-
-This approach simplifies the configuration process by consolidating it into a single file.
-
-## 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. It will load `vite.config.js` if it exists in the root of the project.
-
-#### 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. It will load `esbuild.config.js` if it exists in the root of the project.
-
-#### 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.
-
-
-## 🤝 Contributing
-
-Contributions are welcome! Please check out the [contribution guidelines](https://github.com/devnax/makepack).
-
----
-
-## 📄 License
-
-This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).
-
----
-
-## 📞 Support
-
-For help or suggestions, feel free to open an issue on [GitHub](https://github.com/devnax/makepack/issues) or contact us via [devnaxrul@gmail.com](mailto:devnaxrul@gmail.com).
+<p align="center">
+  <a href="https://github.com/devnax/makepack" rel="noopener" target="_blank"><img  src="https://raw.githubusercontent.com/devnax/makepack/main/logo.png" alt="Makepack logo"></a>
+</p>
+
+<h1 align="center">Makepack</h1>
+
+**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
+
+Install `makepack` globally to get started:
+
+```sh
+npm install -g makepack
+```
+
+---
+
+## 🎯 Why Choose makepack?
+- **Zero-Config Setup** – Instantly scaffold a structured project.
+- **TypeScript Support** – Seamlessly work with modern JavaScript.
+- **Integrated Dev Server** – Run your package with Vite and Express.
+- **Efficient Build System** – Generate optimized ESM and CJS outputs.
+- **One-Command Publish** – Deploy your package to npm effortlessly.
+---
+
+## 📜 CLI Commands
+
+### ✨ `makepack create` – Scaffold a New Project
+Quickly initialize a structured package with the following setup:
+
+```
+src/index.ts or tsx or js or jsx
+.gitignore
+package.json
+README.md
+```
+
+Run:
+```sh
+makepack create
+```
+Follow the interactive prompts to configure your project.
+
+### 🚀 `makepack start` – Launch the Development Server
+Run a Vite + Express server to develop and test your package in real-time.
+
+```sh
+makepack start
+```
+
+### 🏗️ `makepack build` – Compile Your Package
+Builds and optimizes your package into the `build` directory.
+
+```sh
+makepack build
+```
+
+### 📦 `makepack publish` – Deploy to NPM
+Publish your package to the npm registry in one command.
+
+```sh
+makepack publish
+```
+
+---
+
+## ⚙️ Configuration
+
+Customize your project by creating a `makepack.js` file in the root directory. This file allows full control over the build and dev environment.
+
+### 🔧 Default Configuration
+
+```js
+module.exports = (prevConfig) => ({
+  build: {
+    outdir: "build",
+    types: true,
+    formatPackageJson: (p) => p,
+    configs: [
+      {
+        entryPoints: "src/**/*.{tsx,ts,js,jsx}",
+        outdir: "esm",
+        format: "esm",
+        sourcemap: true,
+        jsx: 'automatic',
+        loader: {
+          '.ts': 'ts',
+          '.tsx': 'tsx'
+        },
+      },
+      {
+        entryPoints: "src/**/*.{tsx,ts,js,jsx}",
+        outdir: "",
+        format: "cjs",
+        sourcemap: true,
+        jsx: 'automatic',
+        loader: {
+          '.ts': 'ts',
+          '.tsx': 'tsx'
+        },
+      }
+    ]
+  },
+  start: {
+    port: 5000,
+    entry: "App.tsx",
+  }
+});
+```
+
+---
+
+## 📜 License
+
+`makepack` is released under the **MIT License**, allowing free usage in both open-source and commercial projects.
+
+---
+
+🚀 **Start building your next NPM package with `makepack` today!**
+

package/package.json

@@ -1,57 +1,59 @@
-{
-  "name": "makepack",
-  "version": "1.4.0",
-  "type": "module",
-  "description": "A CLI tool to create, build, and manage JavaScript, TypeScript, React, and React-TypeScript libraries for npm projects.",
-  "files": [
-    "src",
-    "package.json",
-    "README.md"
-  ],
-  "categories": [
-    "Other"
-  ],
-  "author": {
-    "name": "Devnax",
-    "email": "devnaxrul@gmail.com"
-  },
-  "bin": "./src/index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/devnax/makepack"
-  },
-  "bugs": {
-    "url": "https://github.com/devnax/makepack/issues"
-  },
-  "homepage": "https://github.com/devnax/makepack#readme",
-  "scripts": {
-    "start": "node ./src/index.js"
-  },
-  "dependencies": {
-    "chalk": "^5.4.1",
-    "commander": "^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",
-    "@vitejs/plugin-react": "^4.3.4"
-  },
-  "keywords": [
-    "CLI",
-    "npm",
-    "library",
-    "JavaScript",
-    "TypeScript",
-    "React",
-    "npm-package"
-  ],
-  "devDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  }
+{
+  "name": "makepack",
+  "version": "1.5.1",
+  "type": "module",
+  "description": "A CLI tool to create, build, and manage JavaScript, TypeScript, React, and React-TypeScript libraries for npm projects.",
+  "files": [
+    "src",
+    "package.json",
+    "README.md"
+  ],
+  "categories": [
+    "Other"
+  ],
+  "author": {
+    "name": "Devnax",
+    "email": "devnaxrul@gmail.com"
+  },
+  "bin": "./src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/devnax/makepack"
+  },
+  "bugs": {
+    "url": "https://github.com/devnax/makepack/issues"
+  },
+  "homepage": "https://github.com/devnax/makepack#readme",
+  "scripts": {
+    "start": "node ./src/index.js"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "chalk": "^5.4.1",
+    "commander": "^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",
+    "ora": "^8.1.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.2"
+  },
+  "keywords": [
+    "CLI",
+    "npm",
+    "library",
+    "JavaScript",
+    "TypeScript",
+    "React",
+    "npm-package"
+  ],
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
 }

package/src/actions/build/index.js

@@ -0,0 +1,91 @@
+import esbuild from 'esbuild'
+import fs from 'fs-extra'
+import path from 'path'
+import chalk from 'chalk'
+import ora from 'ora'
+import { glob } from 'glob'
+import ts from 'typescript'
+import { execSync } from '../../helpers.js'
+import makepackConfig from '../../makepack-config.js'
+
+const build = async (args) => {
+
+   const spinner = ora("Generating a production build for the package...").start();
+
+   try {
+      const { build } = await makepackConfig()
+      const configs = build.configs
+      if (!configs || !configs.length) process.exit("Invalid configuration");
+      const outdir = path.join(process.cwd(), build.outdir)
+
+      try {
+         fs.removeSync(outdir);
+         fs.mkdirSync(outdir);
+      } catch (err) { }
+
+      for (let ebconfig of configs) {
+         const files = await glob(ebconfig.entryPoints) || []
+         const entryPoints = files.map(entry => path.join(process.cwd(), entry))
+         esbuild.buildSync({
+            ...ebconfig,
+            entryPoints,
+            outdir: path.join(outdir, ebconfig.outdir || ''),
+         });
+      }
+
+      if (build.types) {
+         let tsconfig = {
+            outDir: path.join(outdir, 'types'),
+            declaration: true,
+            emitDeclarationOnly: true,
+            strict: true,
+            allowJs: true,
+            jsx: ts.JsxEmit.React,
+            esModuleInterop: true,
+         }
+         spinner.text = "Generating TypeScript declarations..."
+         const files = await glob("src/**/*.{tsx,ts,js,jsx}") || []
+         const program = ts.createProgram(files, tsconfig);
+         const emitResult = program.emit();
+         const diagnostics = ts.getPreEmitDiagnostics(program).concat(emitResult.diagnostics);
+
+         if (diagnostics.length > 0) {
+            diagnostics.forEach(diagnostic => {
+               const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n');
+               if (diagnostic.file) {
+                  const { line, character } = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
+                  spinner.fail(`Error at ${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`);
+               } else {
+                  spinner.fail(`Error: ${message}`);
+               }
+            });
+         } else {
+            spinner.succeed("TypeScript declaration files generated successfully!")
+         }
+      }
+
+      spinner.text = "Copying package.json and readme.md files..."
+      let packageJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), '/package.json'), 'utf8'));
+      const formatPackageJson = build.formatPackageJson || ((p) => p)
+      packageJson = formatPackageJson(packageJson)
+
+      fs.writeFileSync(path.join(process.cwd(), outdir, '/package.json'), JSON.stringify(packageJson, null, 2));
+      fs.copyFileSync(path.join(process.cwd(), '/readme.md'), path.join(process.cwd(), outdir, `/readme.md`))
+      spinner.succeed('Production build generated successfully! The package is ready for deployment.')
+
+      if (args.publish) {
+         console.log("Publishing the production build to the npm repository...")
+         execSync(`npm publish`, {
+            cwd: path.join(process.cwd(), outdir)
+         })
+      } else {
+         console.log(`\nTo publish your package:`);
+         console.log(`${chalk.yellow(`1. Navigate to the ${outdir} directory:`)}\n ${chalk.green(`cd ./${outdir}`)}\n${chalk.yellow(`2. Publish the buildage to npm:`)}\n${chalk.green(`npm publish`)}\nYour buildage is ready to share with the world! 🚀`);
+      }
+   } catch (error) {
+      spinner.fail("An error occurred while generating the production build.")
+      console.error(error);
+   }
+}
+
+export default build

package/src/actions/create/files/{serve.js → App.js}

@@ -1,52 +1,52 @@
-export default args => {
-  let ext = args.template === 'react with typescript' ? ".tsx" : ".jsx"
-  let _import = ''
-  let _code = ''
-
-  switch (args.template) {
-    case "typescript":
-    case "javascript":
-      _import = `import add from './${args.rootdir}'`
-      _code = `<code>{add(5,5)}</code>`
-      break
-    case "react with typescript":
-    case "react with javascript":
-      _import = `import Count from './${args.rootdir}'`
-      _code = `<Count />`
-      break;
-  }
-
-  const content = `import React from 'react';
-import { createRoot } from 'react-dom/client';
-${_import}
-
-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}
-      </div>
-    </div>
-  );
-}
-const rootEle = document.getElementById('root')
-if (rootEle) {
-  const root = createRoot(rootEle);
-  root.render(<App />);
-}
-  `
-  return {
-    content,
-    filename: `serve${ext}`
-  }
+export default async (info) => {
+  let ext = info.template.includes('typescript') ? ".tsx" : ".jsx"
+  let _import = ''
+  let _code = ''
+
+  switch (info.template) {
+    case "typescript":
+    case "javascript":
+      _import = `import add from './${info.sourceDir}'`
+      _code = `<code>{add(5,5)}</code>`
+      break
+    case "react with typescript":
+    case "react with javascript":
+      _import = `import Count from './${info.sourceDir}'`
+      _code = `<Count />`
+      break;
+  }
+
+  const content = `import React from 'react';
+import { createRoot } from 'react-dom/client';
+${_import}
+
+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}
+      </div>
+    </div>
+  );
+}
+const rootEle = document.getElementById('root')
+if (rootEle) {
+  const root = createRoot(rootEle);
+  root.render(<App />);
+}
+  `
+  return {
+    content,
+    filename: `App${ext}`
+  }
 }

package/src/actions/create/files/config.js

@@ -0,0 +1,55 @@
+import { loadConfig } from "../../../helpers.js"
+
+export default async (info) => {
+   const config = await loadConfig()
+   let dependencies = {}
+   let devDependencies = {
+      "makepack": "latest",
+      "react": "^19.0.0",
+      "react-dom": "^19.0.0",
+      "express": "latest"
+   }
+
+   if (args.template.includes("typescript")) {
+      devDependencies["typescript"] = "^4.4.2"
+      devDependencies["@types/react"] = "^19.0.2"
+      devDependencies["@types/react-dom"] = "^19.0.2"
+      devDependencies["@types/express"] = "latest"
+   }
+
+   let main = args.entry.split('.')
+   main.pop()
+
+   const json = {
+      name: args.dirname,
+      version: "1.0.0",
+      main: `./${config.build.outdir}/cjs/index.js`,
+      module: `./${config.build.outdir}/index.js`,
+      types: `./${config.build.outdir}/index.d.ts`,
+      description: "",
+      keywords: [],
+      exports: {
+         ".": {
+            "types": `./${config.build.outdir}/index.d.ts`,
+            "import": `./${config.build.outdir}/index.js`,
+            "require": `./${config.build.outdir}/cjs/index.js`
+         },
+         "./*": {
+            "import": `./${config.build.outdir}/*.js`,
+            "require": `./${config.build.outdir}/cjs/*.js`
+         }
+      },
+      scripts: {
+         "start": "makepack serve",
+         "build": "makepack build",
+         "prepare": "npm run build",
+      },
+      dependencies,
+      devDependencies
+   }
+
+   return {
+      content: JSON.stringify(json, null, 3),
+      filename: "package.json"
+   }
+}