makepack 1.0.5 → 1.0.6

package/README.md

@@ -46,11 +46,11 @@ makepack serve [options]
 
 #### Options
 
-- `-p, --port <type>`  
-  _Port number_ (default is `3000`).
+- `-p, --port <number>`  
+  _Port number_ (optional) (default is `5000`).
   
-- `-e, --entry <type>`  
-  _Entry file_ (optional). The entry point for your application. Specify the main JavaScript/TypeScript file to start the server.
+- `-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
 
@@ -59,7 +59,7 @@ makepack serve [options]
 Example:
 
 ```bash
-makepack serve --port 4000 --entry src/index.ts
+makepack serve --port 4000 --root src/index.ts
 ```
 
 ---
@@ -76,7 +76,7 @@ makepack pack [options]
 
 #### Options
 
-- `-e, --entry <type>`  
+- `-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.
 
@@ -110,7 +110,7 @@ makepack create
 2. Start the server for development:
 
 ```bash
-makepack serve --port 4000 --entry src/index.ts
+makepack serve --port 4000 --root index.tsx
 ```
 
 3. Once you're ready to build and publish your library:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "makepack",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "description": "A CLI tool to create, build, and manage JavaScript, TypeScript, React, and React-TypeScript libraries for npm projects.",
   "categories": [

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

@@ -28,7 +28,7 @@ export default (args) => {
       scripts: {
          "start": "makepack serve",
          "pack": "makepack pack",
-         "publish": "makepack pack -p",
+         "publish:pack": "makepack pack -p",
       },
       dependencies,
       devDependencies,

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

@@ -3,7 +3,7 @@ export default args => {
 function add(a: number, b: number): number {
   return a + b;
 }
-console.log(add(5, 3)); `
+console.log(add(5, 3));`
   return {
     content,
     filename: `${args.rootdir}/${args.entry}`

package/src/actions/create/files/{project-react-ts.js → serve.js}

@@ -1,11 +1,17 @@
 export default args => {
+  let ext = ".jsx"
+  switch (args.template) {
+    case "react with typescript":
+      ext = ".tsx"
+  }
+
   const content = `import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-const App: React.FC  = () => {
+const App  = () => {
   return (
-    <div style={{ textAlign: 'center', marginTop: '50px' }}>
-      <h1>Welcome to React Typescript with makepack CLI!</h1>
+    <div style={{fontFamily: 'vardana', 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"
@@ -26,6 +32,6 @@ if (rootEle) {
   `
   return {
     content,
-    filename: `${args.rootdir}/${args.entry}`
+    filename: `serve${ext}`
   }
 }

package/src/actions/create/makeFiles.js

@@ -1,11 +1,10 @@
 // import makepack from "./files/makepack.js";
 import packageJson from "./files/package-json.js";
 import gitignore from "./files/gitignore.js";
+import serve from "./files/serve.js";
 import tsconfig from "./files/tsconfig.js";
 import projectJs from "./files/project-js.js";
 import projectTs from "./files/project-ts.js";
-import projectReactJs from "./files/project-react-js.js";
-import projectReactTs from "./files/project-react-ts.js";
 
 import fs from "fs-extra"
 import path from "path"
@@ -14,20 +13,17 @@ export default async (args) => {
    const files = [
       packageJson(args),
       gitignore(args),
+      serve(args),
    ];
 
    switch (args.template) {
       case "typescript":
+      case "react with typescript":
          files.push(projectTs(args))
          break;
       case "javascript":
-         files.push(projectJs(args))
-         break;
-      case "react with typescript":
-         files.push(projectReactTs(args))
-         break;
       case "react with javascript":
-         files.push(projectReactJs(args))
+         files.push(projectJs(args))
          break;
    }
 

package/src/actions/create/makeProjectInformation.js

@@ -14,7 +14,7 @@ const makeProjectInformation = async () => {
          message: 'Select a template',
          choices: ['typescript', 'javascript', 'react with typescript', 'react with javascript'],
          default: 'typeScript'
-      },
+      }
    ])
 
    if (projectDir.diraname !== cwdFolder) {
@@ -55,9 +55,8 @@ const makeProjectInformation = async () => {
    */
 
    return {
-      port: 3000,
+      // port: 3000,
       outdir: "pack",
-      rootdir: "src",
       ...projectDir,
       ...information
    }

package/src/actions/pack.js

@@ -20,7 +20,7 @@ const pack = async (args) => {
       outdir: path.join(process.cwd(), args.outdir),
       minify: true,
       sourcemap: true,
-      format: "cjs",
+      format: "esm",
       platform: 'node',
       loader: { '.ts': 'ts' },
       //       tsconfig: path.join(process.cwd(), 'tsconfig.json'),

package/src/actions/serve.js

@@ -9,24 +9,23 @@ const app = express();
 
 const serve = async (args) => {
 
-   if (args.entry === undefined) {
-      const indexes = await glob('src/index.{ts,js,tsx,jsx}', {
+   if (args.root === undefined) {
+      const serveFile = await glob('serve.{ts,js,tsx,jsx}', {
          cwd: process.cwd()
       })
-      if (!indexes.length) {
-         let { entry } = await inquirer.prompt([{
+      if (!serveFile.length) {
+         let { root } = await inquirer.prompt([{
             type: 'input',
-            name: 'entry',
+            name: 'root',
             message: 'Enter the root file',
          }]);
-         entry = "src/" + entry
 
-         if (!fs.existsSync(path.join(process.cwd(), entry))) {
-            throw new Error(`invalid entry: ${entry}`);
+         if (!fs.existsSync(path.join(process.cwd(), root))) {
+            throw new Error(`invalid root: ${root}`);
          }
-         args.entry = entry;
+         args.root = root;
       } else {
-         args.entry = indexes[0];
+         args.root = serveFile[0];
       }
    }
 
@@ -39,7 +38,7 @@ const serve = async (args) => {
         </head>
         <body>
           <div id="root"></div>
-          <script type="module" src="${args.entry}"></script>
+          <script type="module" src="${args.root}"></script>
         </body>
       </html>
   `;

package/src/index.js

@@ -4,6 +4,7 @@ import { Command } from "commander";
 import serve from "./actions/serve.js";
 import pack from "./actions/pack.js";
 import create from "./actions/create/index.js";
+import path from 'path'
 
 const program = new Command();
 
@@ -16,14 +17,14 @@ program
 
 program
    .command("serve")
-   .option("-p, --port <type>", "Port number", "5000")
-   .option("-e, --entry <type>", "entry file")
+   .option("-p, --port <number>", "Port number", "5000")
+   .option("-r, --root <file>", "root file", path.join(process.cwd(), "/serve"))
    .description("Start the server")
    .action(serve);
 
 program
    .command("pack")
-   .option("-e, --entry <type>", "Entry file or directory (you can use a glob pattern)", "src/**/*.{tsx,ts,js,jsx}")
+   .option("-e, --entry <file>", "Entry file or directory (you can use a glob pattern)", "src/**/*.{tsx,ts,js,jsx}")
    .option("-p, --publish", "Publish the project to the npm repository", false)
    .description("Build the project and optionally publish it to the npm repository")
    .action(pack);

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

@@ -1,31 +0,0 @@
-export default (args) => {
-  const content = `import React from 'react';
-import { createRoot } from 'react-dom/client';
-
-const App = () => {
-  return (
-    <div style={{ textAlign: 'center', marginTop: '50px' }}>
-      <h1>Welcome to React JS with 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>
-  );
-};
-const rootEle = document.getElementById('root')
-if (rootEle) {
-  const root = createRoot(rootEle);
-  root.render(<App />);
-}
-  `
-  return {
-    content,
-    filename: `${args.rootdir}/${args.entry}`
-  }
-}