makepack 1.5.23 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "makepack",
-  "version": "1.5.23",
+  "version": "1.6.0",
   "type": "module",
   "description": "A CLI tool to create, build, and manage JavaScript, TypeScript, React, and React-TypeScript libraries for npm projects.",
   "files": [
@@ -25,7 +25,7 @@
   },
   "homepage": "https://github.com/devnax/makepack#readme",
   "scripts": {
-    "start": "node ./src/index.js start",
+    "start": "node ./src/index.js start --port 3000",
     "create": "node ./src/index.js create",
     "build": "node ./src/index.js build"
   },

package/src/actions/build/index.js

@@ -5,106 +5,160 @@ import chalk from 'chalk'
 import ora from 'ora'
 import { glob } from 'glob'
 import ts from 'typescript'
-import makepackConfig from '../../makepack-config.js'
 
-const build = async () => {
+const eBuild = async (ebconfig) => {
+
+   await esbuild.build({
+      jsx: 'automatic',
+      ...ebconfig,
+      outExtension: { '.js': ebconfig.format === "esm" ? '.mjs' : ".cjs" },
+      loader: {
+         '.ts': 'ts',
+         '.tsx': 'tsx'
+      },
+      outdir: path.join(process.cwd(), '.mpack'),
+   })
+}
+
+const build = async (args) => {
+   /* args 
+   --format=default 
+   --bundle=true, 
+   --minify=false, 
+   --sourcemap=true, 
+   --platform=node, 
+   --target=es2020, 
+   */
+
+
+   let printBool = (f) => typeof args[f] === 'string' ? (args[f] === 'true') : args[f];
+
+   args = {
+      format: args.format || "default",
+      bundle: printBool('bundle'),
+      minify: printBool('minify'),
+      sourcemap: printBool('sourcemap'),
+      platform: args.platform || "",
+      target: args.target || "es2020",
+      declaration: printBool('declaration'),
+   }
+
+   const outdir = path.join(process.cwd(), '.mpack');
+   if (fs.existsSync(outdir)) {
+      fs.rmSync(outdir, { recursive: true, force: true });
+   }
+   fs.mkdirSync(outdir)
 
    const spinner = ora("Generating a production build for the package...").start();
+   const files = await glob("src/**/*.{tsx,ts,js,jsx}") || [];
+   const entryPoints = files.map(entry => path.join(process.cwd(), entry));
+   let batchSize = args.format === 'default' ? 300 : 500;
 
-   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) { }
-
-      const batchSize = 500;
-      for (let ebconfig of configs) {
-         const files = await glob(ebconfig.entryPoints) || [];
-         const entryPoints = files.map(entry => path.join(process.cwd(), entry));
-         for (let i = 0; i < entryPoints.length; i += batchSize) {
-            const batch = entryPoints.slice(i, i + batchSize);
-            await esbuild.build({
-               ...ebconfig,
-               entryPoints: batch,
-               outdir: path.join(outdir, ebconfig.outdir || ''),
-            });
-         }
+   let ebconfig = {
+      bundle: args.bundle,
+      minify: args.minify,
+      sourcemap: args.sourcemap,
+      platform: args.platform,
+      target: args.target,
+   }
+
+   for (let i = 0; i < entryPoints.length; i += batchSize) {
+      const batch = entryPoints.slice(i, i + batchSize);
+      let config = {
+         ...ebconfig,
+         entryPoints: batch,
+      }
+      if (args.format === 'default') {
+         await eBuild({ ...config, format: "esm" });
+         spinner.succeed('ESM build generated successfully!');
+         await eBuild({ ...config, format: "cjs" });
+         spinner.succeed('CJS build generated successfully!');
+      } else {
+         await eBuild({ ...config, format: args.format });
+         spinner.succeed(`${args.format} build generated successfully!`);
       }
+   }
 
-      if (build.types) {
-         const tsconfigPath = path.resolve(process.cwd(), "tsconfig.json");
-         let tsconfig = {};
-         if (fs.existsSync(tsconfigPath)) {
-            const parsedConfig = ts.getParsedCommandLineOfConfigFile(
-               tsconfigPath,
-               {},
-               ts.sys
-            );
-
-            if (!parsedConfig) {
-               console.error("❌ Error parsing tsconfig.json");
-               process.exit(1);
-            } else {
-               tsconfig = parsedConfig.options;
-            }
-         }
 
-         tsconfig = {
-            allowJs: true,
-            target: ts.ScriptTarget.ESNext, // Ensure it's an enum
-            skipLibCheck: true,
-            moduleResolution: ts.ModuleResolutionKind.Node10,
-            ...tsconfig, // Preserve root tsconfig settings
-            outDir: path.join(outdir, "types"),
-            declaration: true,
-            emitDeclarationOnly: true,
-            noEmit: false,
-         };
-
-         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}`);
-               }
-            });
+   if (args.declaration) {
+      const tsconfigPath = path.resolve(process.cwd(), "tsconfig.json");
+      let tsconfig = {};
+      if (fs.existsSync(tsconfigPath)) {
+         const parsedConfig = ts.getParsedCommandLineOfConfigFile(
+            tsconfigPath,
+            {},
+            ts.sys
+         );
+
+         if (!parsedConfig) {
+            console.error("❌ Error parsing tsconfig.json");
+            process.exit(1);
          } else {
-            spinner.succeed("TypeScript declaration files generated successfully!")
+            tsconfig = parsedConfig.options;
          }
       }
 
-      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)
+      tsconfig = {
+         allowJs: true,
+         target: ts.ScriptTarget.ESNext, // Ensure it's an enum
+         skipLibCheck: true,
+         moduleResolution: ts.ModuleResolutionKind.Node10,
+         ...tsconfig, // Preserve root tsconfig settings
+         outDir: outdir,
+         declaration: true,
+         emitDeclarationOnly: true,
+         noEmit: false,
+      };
 
-      fs.writeFileSync(path.join(process.cwd(), build.outdir, '/package.json'), JSON.stringify(packageJson, null, 2));
-      fs.copyFileSync(path.join(process.cwd(), '/readme.md'), path.join(process.cwd(), build.outdir, `/readme.md`))
-      spinner.succeed('Production build generated successfully! The package is ready for deployment.')
+      spinner.text = "Generating TypeScript declarations..."
+      const program = ts.createProgram(files, tsconfig);
+      const emitResult = program.emit();
+      const diagnostics = ts.getPreEmitDiagnostics(program).concat(emitResult.diagnostics);
 
-      console.log(`\nTo publish your package:`);
-      console.log(`run: ${chalk.green(`makepack publish`)} to publish the package directly from the current project.`);
-      console.log(chalk.yellow(`OR`));
-      console.log(`${chalk.yellow(`Navigate to the ${build.outdir} directory:`)} ${chalk.green(`cd ./${build.outdir}`)} and run ${chalk.green(`npm publish`)}`);
+      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..."
+
+   // update package.json to include the .mpack directory
+   const pkgPath = path.join(process.cwd(), 'package.json');
+   if (fs.existsSync(pkgPath)) {
+      const pkgjson = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+      if (args.format === 'default') {
+         pkgjson.main = "./index.cjs";
+         pkgjson.module = "./index.mjs";
+         pkgjson.types = './index.d.ts'
+      } else {
+         let t = args.format === 'mjs' ? 'module' : 'main';
+         pkgjson[t] = `./index.${args.format}`;
+      }
 
-   } catch (error) {
-      spinner.fail("An error occurred while generating the production build.")
-      console.error(error);
+      if (args.declaration) {
+         pkgjson.types = `index.${args.format}.d.ts`;
+      }
+
+      fs.writeFileSync(path.join(outdir, 'package.json'), JSON.stringify(pkgjson, null, 2));
+   } else {
+      spinner.fail("package.json not found!");
+      return;
    }
+
+   fs.copyFileSync(path.join(process.cwd(), '/readme.md'), path.join(outdir, `/readme.md`))
+   spinner.succeed("package.json and readme.md files copied successfully!")
+   console.log(chalk.green(`\nBuild completed successfully!`));
+   console.log(`\nTo publish your package to npm:`);
+   console.log(`${chalk.green(`npm run publish`)} or navigate to the ${chalk.green(`.mpack`)} directory and run ${chalk.green(`npm publish`)}`);
 }
 
 export default build

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

@@ -1,9 +1,10 @@
-import makepackConfig from "../../../makepack-config.js"
 
 export default async () => {
-   const config = await makepackConfig()
    return {
-      content: `node_modules\n${config.build.outdir}`,
+      content: `
+      node_modules
+      .mpack
+      `,
       filename: ".gitignore"
    }
 }

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

@@ -3,11 +3,14 @@ export default async (info) => {
    let dependencies = {}
    let devDependencies = {
       "makepack": "latest",
-      "react": "^19.0.0",
-      "react-dom": "^19.0.0",
       "express": "latest"
    }
 
+   if (info.template.includes("react")) {
+      dependencies["react"] = "^19.0.0"
+      dependencies["react-dom"] = "^19.0.0"
+   }
+
    if (info.template.includes("typescript")) {
       devDependencies["typescript"] = "^4.4.2"
       devDependencies["@types/react"] = "^19.0.2"
@@ -15,34 +18,32 @@ export default async (info) => {
       devDependencies["@types/express"] = "latest"
    }
 
-   let main = info.sourceEntry.split('.')
-   main.pop()
-
    const json = {
-      name: info.projectDirName,
+      name: info.pdir,
       version: "1.0.0",
-      main: `./cjs/index.js`,
-      module: `./index.js`,
-      types: `./types/index.d.ts`,
+      main: `./index.cjs`,
+      module: `./index.mjs`,
+      types: `./index.d.ts`,
       description: "",
       keywords: [],
-      "exports": {
-         ".": {
-            "types": "./types/index.d.ts",
-            "require": "./cjs/index.js",
-            "import": "./index.js",
-         },
-         "./types/*": "./types/*.d.ts",
-         "./cjs/*": "./cjs/*.js",
-         "./*": {
-            "import": "./*.js",
-            "require": "./cjs/*.js"
-         }
-      },
+      sideEffects: false,
+      // "exports": {
+      //    ".": {
+      //       "types": "./types/index.d.ts",
+      //       "require": "./cjs/index.js",
+      //       "import": "./index.js",
+      //    },
+      //    "./types/*": "./types/*.d.ts",
+      //    "./cjs/*": "./cjs/*.js",
+      //    "./*": {
+      //       "import": "./*.js",
+      //       "require": "./cjs/*.js"
+      //    }
+      // },
       scripts: {
          "start": "makepack start",
          "build": "makepack build",
-         "build:publish": "makepack publish"
+         "publish": "makepack publish"
       },
       dependencies,
       devDependencies

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

@@ -1,4 +1,4 @@
-export default async (args) => {
+export default async () => {
   const content = `
 function add(a, b) {
   return a + b;
@@ -8,6 +8,6 @@ export default add
   `
   return {
     content,
-    filename: `${args.sourceDir}/${args.sourceEntry}`
+    filename: `src/index.js`
   }
 }

package/src/actions/create/files/project-jsx.js

@@ -1,7 +1,8 @@
-export default async (args) => {
+export default async () => {
   const content = `import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
 
-const Count = () => {
+const App = () => {
   const [count, setCount] = useState(0);
   const increment = () => setCount(prevCount => prevCount + 1);
   const decrement = () => setCount(prevCount => prevCount - 1);
@@ -42,10 +43,14 @@ const styles = {
   },
 };
 
-export default Count;
+const rootEle = document.getElementById('root')
+if (rootEle) {
+  const root = createRoot(rootEle);
+  root.render(<App />);
+}
   `
   return {
     content,
-    filename: `${args.sourceDir}/${args.sourceEntry}`
+    filename: `src/index.jsx`
   }
 }

package/src/actions/create/files/project-ts.js

@@ -1,4 +1,4 @@
-export default async (args) => {
+export default async () => {
   const content = `
 function add(a: number, b: number): number {
   return a + b;
@@ -6,6 +6,6 @@ function add(a: number, b: number): number {
 export default add`
   return {
     content,
-    filename: `${args.sourceDir}/${args.sourceEntry}`
+    filename: `src/index.ts`
   }
 }

package/src/actions/create/files/project-tsx.js

@@ -1,7 +1,8 @@
-export default async (args) => {
+export default async () => {
   const content = `import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
 
-const Count: React.FC = () => {
+const App: React.FC = () => {
   const [count, setCount] = useState<number>(0);
   const increment = (): void => setCount(prevCount => prevCount + 1);
   const decrement = (): void => setCount(prevCount => prevCount - 1);
@@ -42,10 +43,14 @@ const styles: { [key: string]: React.CSSProperties } = {
   },
 };
 
-export default Count;
+const rootEle = document.getElementById('root')
+if (rootEle) {
+  const root = createRoot(rootEle);
+  root.render(<App />);
+}
   `
   return {
     content,
-    filename: `${args.sourceDir}/${args.sourceEntry}`
+    filename: `src/index.tsx`
   }
 }

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

@@ -23,7 +23,7 @@ export default async () => {
       "include": ["src"],
       "exclude": [
          "node_modules",
-         "build"
+         ".mpack",
       ]
    }
 

package/src/actions/create/index.js

@@ -4,29 +4,55 @@ import path from 'path'
 import inquirer from 'inquirer'
 import figlet from 'figlet'
 import fs from "fs-extra"
+import chalk from 'chalk';
 const cwd = process.cwd()
 const cwdFolder = cwd.split(path.sep).pop()
 
-const create = async () => {
-   const information = {
-      projectDirName: cwdFolder,
-      cwd: path.join(cwd, cwdFolder),
-      template: "typescript",
-      sourceDir: "src",
-      sourceEntry: "index.ts",
+const valiateProjectName = (name) => {
+   if (!name) {
+      console.error("Project name cannot be empty.");
+      return false;
+   }
+   if (!/^[a-z0-9-]+$/.test(name)) {
+      console.error("Project name can only contain lowercase letters, numbers, and hyphens.");
+      return false;
+   }
+   if (name.length < 3) {
+      console.error("Project name must be at least 3 characters long.");
+      return false;
+   }
+   if (name.length > 50) {
+      console.error("Project name must be less than 50 characters long.");
+      return false;
    }
+   return true;
+}
+
+const create = async () => {
 
-   let { projectDirName } = await inquirer.prompt([
+   let info = await inquirer.prompt([
       {
          type: 'input',
-         name: 'projectDirName',
+         name: 'pdir',
          message: 'Enter the project name',
-         default: information.projectDir
+         default: cwdFolder
+      },
+      {
+         type: 'list',
+         name: 'template',
+         message: 'Select a template',
+         choices: ['typescript', 'javascript', 'react with typescript', 'react with javascript'],
+         default: "typescript"
       }
    ])
 
-   if (projectDirName !== cwdFolder) {
-      if (fs.existsSync(path.join(cwd, projectDirName))) {
+   // check if the pdir is exists
+   let pdir = info.pdir.trim().replace(/\s+/g, '-').toLowerCase();
+   const isValidProjectName = valiateProjectName(pdir)
+   if (!isValidProjectName) return
+
+   if (pdir !== cwdFolder) {
+      if (fs.existsSync(path.join(cwd, pdir))) {
          const { proceed } = await inquirer.prompt([
             {
                type: "confirm",
@@ -42,58 +68,30 @@ const create = async () => {
       }
    }
 
-   information.projectDirName = projectDirName
-   information.cwd = path.join(cwd, information.projectDirName)
-   let isCurrentDir = projectDirName !== cwdFolder
-
-   // template
-   const { template } = await inquirer.prompt([
-      {
-         type: 'list',
-         name: 'template',
-         message: 'Select a template',
-         choices: ['typescript', 'javascript', 'react with typescript', 'react with javascript'],
-         default: information.template
-      }
-   ])
-
-   information.template = template
-
+   const rootdir = path.join(cwd, pdir)
+   let isCurrentDir = pdir !== cwdFolder
    logger.info("", "Creating project...", false)
-   const projectDir = path.join(cwd, information.projectDirName)
-
-   if (!fs.existsSync(projectDir)) {
-      fs.mkdirSync(projectDir)
-   }
 
-   if (!fs.existsSync(path.join(projectDir, information.sourceDir))) {
-      fs.mkdirSync(path.join(projectDir, information.sourceDir))
+   if (!fs.existsSync(rootdir)) {
+      fs.mkdirSync(rootdir)
    }
 
-   switch (information.template) {
-      case "react with typescript":
-         information.sourceEntry = "index.tsx"
-         break;
-      case "react with javascript":
-         information.sourceEntry = "index.jsx"
-         break;
-      case "javascript":
-         information.sourceEntry = "index.js"
-         break;
+   if (!fs.existsSync(path.join(rootdir, 'src'))) {
+      fs.mkdirSync(path.join(rootdir, 'src'))
    }
 
-   await makeFiles(information)
+   await makeFiles(info)
 
    logger.info("", "Installing Dependencies", false)
    execSync("npm install", {
-      cwd: information.cwd,
+      cwd: rootdir,
    })
 
-   logger.info("Project setup complete!", "", false)
+   logger.success("Project setup complete!", "")
    if (isCurrentDir) {
-      console.log(`Run the development server: \n${logger.info("", "npm start", false)}\nEnjoy your new project! 😊`);
+      console.log(`Run the development server: ${chalk.blue("npm start")}\nEnjoy your new project! 😊`);
    } else {
-      console.log(`To start working with your project:\nNavigate to your project directory:\n${logger.info("", "cd " + information.projectDirName, false)} and Run the development server:\n${logger.info("", "npm start", false)}\nEnjoy your new project! 😊`);
+      console.log(`Navigate to your project directory:\n${chalk.blue("cd " + info.pdir, false)} and Run the development server: ${chalk.blue("npm start")}\nEnjoy your new project! 😊`);
    }
 
    figlet("Makepack CLI", function (err, data) {

package/src/actions/create/makeFiles.js

@@ -1,7 +1,6 @@
 // import makepack from "./files/makepack.js";
 import packageJson from "./files/package-json.js";
 import gitignore from "./files/gitignore.js";
-import App from "./files/App.js";
 import tsconfig from "./files/tsconfig.js";
 import projectJs from "./files/project-js.js";
 import projectJsx from "./files/project-jsx.js";
@@ -17,7 +16,6 @@ export default async (info) => {
    const files = [
       await packageJson(info),
       await gitignore(info),
-      await App(info),
       await readmeMd(info)
    ];
 
@@ -41,9 +39,11 @@ export default async (info) => {
       files.push(await tsconfig(info))
    }
 
+   const rootdir = path.join(process.cwd(), info.pdir)
+
    for (let file of files) {
       // check if the file exists
-      if (fs.existsSync(path.join(info.cwd, file.filename))) {
+      if (fs.existsSync(path.join(rootdir, file.filename))) {
          const { overwrite } = await inquirer.prompt([
             {
                type: "confirm",
@@ -55,10 +55,10 @@ export default async (info) => {
          if (!overwrite) {
             continue
          } else {
-            fs.removeSync(path.join(info.cwd, file.filename))
+            fs.removeSync(path.join(rootdir, file.filename))
          }
       }
 
-      fs.writeFileSync(path.join(info.cwd, file.filename), file.content)
+      fs.writeFileSync(path.join(rootdir, file.filename), file.content)
    }
 }

package/src/actions/publish/index.js

@@ -1,14 +1,13 @@
 import path from 'path'
 import { execSync, logger } from '../../helpers.js'
-import makepackConfig from '../../makepack-config.js'
 import fs from 'fs-extra'
 
 const publish = async () => {
-   const { build } = await makepackConfig()
-   const buildDir = path.join(process.cwd(), build.outdir)
+   const buildDir = path.join(process.cwd(), '.mpack')
+   const packageJsonPath = path.join(buildDir, 'package.json')
    const exists = fs.existsSync(buildDir)
-   if (!exists) {
-      logger.error(`Build directory ${buildDir} does not exist. Please build the project first`)
+   if (!exists || !fs.existsSync(packageJsonPath)) {
+      logger.error(`Project is not built yet. Please build the project first.`)
       process.exit(1)
    }
 

package/src/actions/start/express.js

@@ -1,25 +1,42 @@
 import express from 'express';
 import { logger } from '../../helpers.js'
 import chalk from 'chalk';
-import makepackConfig from '../../makepack-config.js';
+import path from 'path'
+import fs from 'fs'
 import viteSetup from './vite.js';
-import userExpress from './user-express.js';
-
+const port = process.env.PORT || 3000;
 const app = express();
 const server = async () => {
-   const config = await makepackConfig()
-   userExpress(app)
+
+   // get type from package.json
+   const pkg = path.join(process.cwd(), 'package.json');
+   let type = 'module';
+   if (fs.existsSync(pkg)) {
+      const pkgjson = JSON.parse(fs.readFileSync(pkg, 'utf-8'));
+      type = pkgjson.type || 'module';
+   }
+
+   const mpack = path.join(process.cwd(), '.mpack');
+   const uxp = path.join(mpack, 'uxp.js')
+   if (fs.existsSync(uxp)) {
+      // load user-express.js based on type
+      if (type === 'module') {
+         const { default: userExpress } = await import(uxp);
+         userExpress(app);
+      } else {
+         const userExpress = require(uxp).default;
+         userExpress(app);
+      }
+   }
+
+
    await viteSetup(app)
    app.use((_req, res) => {
       res.status(500).send('Internal Server Error');
    });
 
-   app.listen(config.start.port, () => {
-      logger.success(`Server is running on ${chalk.blue(chalk.underline(`http://localhost:${config.start.port}`))}`);
-   });
-
-   process.on('SIGINT', async () => {
-      process.exit(0);
+   app.listen(port, () => {
+      logger.success(`Server is running on ${chalk.blue(chalk.underline(`http://localhost:${port}`))}`);
    });
 }
 

package/src/actions/start/index.js

@@ -1,11 +1,10 @@
-import fs from 'fs-extra'
 import path from 'path'
-import { logger } from '../../helpers.js'
-import makepackConfig from '../../makepack-config.js';
+import fs from 'fs'
+import { spawn } from 'child_process'
 import esbuild from 'esbuild';
-import chokidar from 'chokidar';
 import { fileURLToPath } from 'url';
-import { spawn } from 'child_process';
+import chokidar from 'chokidar';
+
 let __filename, __dirname;
 
 if (typeof import.meta.url !== 'undefined') {
@@ -16,62 +15,104 @@ if (typeof import.meta.url !== 'undefined') {
    __dirname = __dirname;
 }
 
-let server = null;
-function startServer() {
-   if (server) {
-      server.kill('SIGINT');
-      server = null;
-   }
-   server = spawn('node', [path.resolve(__dirname, 'express.js')], {});
-   server.stdout.on('data', (data) => {
-      console.log(data.toString().trim());
+
+const startServer = () => {
+   const mpack = path.join(process.cwd(), '.mpack')
+   const server = spawn('node', [path.resolve(mpack, 'index.js')], {
+      stdio: 'inherit',
    });
-   server.stderr.on('data', (data) => {
-      console.error(data.toString().trim());
+
+   server.on('error', (err) => {
+      console.error(`Error starting server: ${err.message}`);
    });
+   return server;
 }
 
-const start = async () => {
-   const config = await makepackConfig()
-   const exists = fs.existsSync(path.join(process.cwd(), config.start.entry))
-   if (!exists) {
-      logger.error(`Entry file ${entry} does not exist. please check your config file`)
-      process.exit(1)
+const start = async (args) => {
+   let { port } = args
+
+   if (!port) {
+      port = 4000;
+   }
+   // create a folder call .mpack
+   const mpack = path.join(process.cwd(), '.mpack')
+   if (fs.existsSync(mpack)) {
+      fs.rmSync(mpack, { recursive: true, force: true });
+   }
+   fs.mkdirSync(mpack)
+
+
+   // build ./express.js to .mpack/index.js with esbuild
+   let format = 'esm'
+   // get format from package.json
+   const pkg = path.join(process.cwd(), 'package.json')
+   if (fs.existsSync(pkg)) {
+      const pkgjson = JSON.parse(fs.readFileSync(pkg, 'utf-8'))
+      if (pkgjson.type === 'commonjs') {
+         format = 'cjs'
+      }
    }
 
-   const expressjs = path.join(process.cwd(), 'express.js')
-   const expressts = path.join(process.cwd(), 'express.ts')
+   const uxpjs = path.join(process.cwd(), 'express.js')
+   const uxpts = path.join(process.cwd(), 'express.ts')
 
-   if (fs.existsSync(expressjs) || fs.existsSync(expressts)) {
-      let filename = fs.existsSync(expressjs) ? "express.js" : "express.ts";
-      let outfile = path.resolve(__dirname, 'user-express.js')
+   if (fs.existsSync(uxpjs) || fs.existsSync(uxpts)) {
+      let filename = fs.existsSync(uxpjs) ? "express.js" : "express.ts";
+      let outfile = path.join(mpack, 'uxp.js');
 
       const ctx = await esbuild.context({
          entryPoints: [filename],
-         outfile: path.resolve(__dirname, 'user-express.js'),
+         outfile,
          bundle: true,
          format: 'esm',
          platform: 'node',
          packages: 'external',
       })
-
       ctx.watch()
+   }
+
+   await esbuild.build({
+      entryPoints: [path.resolve(__dirname, 'express.js')],
+      outfile: path.join(mpack, 'index.js'),
+      bundle: true,
+      format,
+      platform: 'node',
+      packages: 'external',
+      define: {
+         'process.env.PORT': JSON.stringify(port),
+      },
+   })
+
+   let server = startServer();
+
+   const uxp = path.join(mpack, 'uxp.js')
 
-      const watcher = chokidar.watch(outfile, {
+   if (fs.existsSync(uxp)) {
+      const watcher = chokidar.watch(uxp, {
          persistent: true,
          ignoreInitial: true,
       });
 
       watcher.on('change', async () => {
-         startServer(config)
-      });
-
-      process.on('SIGINT', async () => {
-         watcher.close();
-         process.exit(0);
+         // restart the server and remove log Server exited with code
+         server.kill();
+         server = startServer();
       });
    }
-   startServer(config)
+
+   process.on('SIGINT', () => {
+      console.log('Received SIGINT, killing server...');
+      server.kill('SIGINT');
+      process.exit(0);
+   });
+
+   process.on('SIGTERM', () => {
+      console.log('Received SIGTERM, killing server...');
+      server.kill('SIGTERM');
+      process.exit(0);
+   });
+
 }
 
+
 export default start

package/src/actions/start/vite.js

@@ -1,10 +1,10 @@
 // import react from '@vitejs/plugin-react'
 import { createServer as createViteServer } from 'vite';
 import { logger } from '../../helpers.js'
-import makepackConfig from '../../makepack-config.js';
+import path from 'path';
+import fs from 'fs';
 
 const viteSetup = async (app) => {
-   const config = await makepackConfig()
    const viteConfig = {
       root: process.cwd(),
       base: "/",
@@ -25,6 +25,11 @@ const viteSetup = async (app) => {
    const vite = await createViteServer(viteConfig);
    app.use(vite.middlewares);
 
+   // exists tsconfig.json in the root directory
+   const isTs = fs.existsSync(path.resolve(process.cwd(), 'tsconfig.json'))
+
+   let entry = isTs ? '/src/index.ts' : '/src/index.js';
+
    app.get('*', async (req, res, next) => {
       const url = req.originalUrl;
 
@@ -38,7 +43,7 @@ const viteSetup = async (app) => {
               </head>
               <body>
                 <div id="root"></div>
-                <script type="module" src="${config.start.entry}"></script>
+                <script type="module" src="${entry}"></script>
               </body>
             </html>
         `);

package/src/index.js

@@ -12,17 +12,25 @@ program.name("Makepack").description("Usages");
 
 program
    .command("create")
-   .description("create a new project")
+   .description("Create a new project")
    .action(create);
 
 program
    .command("start")
+   .option("-p, --port <port>", "Port to run the server", 3000)
    .description("Start the server")
    .action(start);
 
 program
    .command("build")
    .description("Build the project")
+   .option("-f, --format <format>", "Output format (cjs, esm, umd, default)", "default")
+   .option("-b, --bundle <bundle>", "Bundle the project", false)
+   .option("-m, --minify <minify>", "Minify the output", true)
+   .option("-s, --sourcemap <sourcemap>", "Generate sourcemaps", true)
+   .option("-t, --target <target>", "Target ECMAScript version", "es2020")
+   .option("-p, --platform <platform>", "Platform to target (node, browser)", "")
+   .option("-d, --declaration <declaration>", "Generate TypeScript declaration files", true)
    .action(build);
 
 program

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

@@ -1,52 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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"
-   }
-}

package/src/actions/start/user-express.js

@@ -1,7 +0,0 @@
-// express.ts
-var expressApp = (app) => {
-};
-var express_default = expressApp;
-export {
-  express_default as default
-};

package/src/makepack-config.js

@@ -1,59 +0,0 @@
-import { cosmiconfig } from "cosmiconfig";
-
-const makepackConfig = async () => {
-   const explorer = cosmiconfig("makepack");
-   const configResult = await explorer.search();
-
-   const defaultConfig = {
-      build: {
-         outdir: "build",
-         types: true,
-         formatPackageJson: (p) => p,
-         configs: [
-            {
-               entryPoints: "src/**/*.{tsx,ts,js,jsx}",
-               outdir: "",
-               format: "esm",
-               sourcemap: true,
-               minify: true,
-               jsx: 'automatic',
-               loader: {
-                  '.ts': 'ts',
-                  '.tsx': 'tsx'
-               },
-            },
-            {
-               entryPoints: "src/**/*.{tsx,ts,js,jsx}",
-               outdir: "cjs",
-               format: "cjs",
-               sourcemap: true,
-               minify: true,
-               jsx: 'automatic',
-               loader: {
-                  '.ts': 'ts',
-                  '.tsx': 'tsx'
-               },
-            }
-         ]
-      },
-      start: {
-         port: 5000,
-         entry: "App.tsx",
-      }
-   }
-
-   if (configResult && configResult.config) {
-      let fn = configResult.config;
-      if (typeof fn === 'function') {
-         const userConfig = fn(defaultConfig)
-         if (!userConfig) {
-            console.log("Config function must return a config object")
-            process.exit(1)
-         }
-         return userConfig
-      }
-   }
-   return defaultConfig
-}
-
-export default makepackConfig