makepack 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "makepack",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "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/project-js.js

@@ -4,7 +4,7 @@ function add(a, b) {
   return a + b;
 }
 
-console.log(add(5, 3));
+export default add
   `
   return {
     content,

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

@@ -0,0 +1,51 @@
+export default (args) => {
+  const content = `import React, { useState } from 'react';
+
+const Count = () => {
+  const [count, setCount] = useState(0);
+  const increment = () => setCount(prevCount => prevCount + 1);
+  const decrement = () => setCount(prevCount => prevCount - 1);
+  const reset = () => setCount(0);
+
+  return (
+    <div style={styles.container}>
+      <h1>Count App</h1>
+      <div style={styles.counter}>{count}</div>
+      <div style={styles.buttonContainer}>
+        <button style={styles.button} onClick={increment}>Increment</button>
+        <button style={styles.button} onClick={decrement}>Decrement</button>
+        <button style={styles.button} onClick={reset}>Reset</button>
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    textAlign: 'center',
+    padding: '20px',
+    fontFamily: 'Arial, sans-serif'
+  },
+  counter: {
+    fontSize: '2rem',
+    margin: '20px 0',
+  },
+  buttonContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    gap: '10px',
+  },
+  button: {
+    padding: '10px 20px',
+    fontSize: '1rem',
+    cursor: 'pointer',
+  },
+};
+
+export default Count;
+  `
+  return {
+    content,
+    filename: `${args.rootdir}/${args.entry}`
+  }
+}

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));`
+export default add`
   return {
     content,
     filename: `${args.rootdir}/${args.entry}`

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

@@ -0,0 +1,51 @@
+export default (args) => {
+  const content = `import React, { useState } from 'react';
+
+const Count: React.FC = () => {
+  const [count, setCount] = useState<number>(0);
+  const increment = (): void => setCount(prevCount => prevCount + 1);
+  const decrement = (): void => setCount(prevCount => prevCount - 1);
+  const reset = (): void => setCount(0);
+
+  return (
+    <div style={styles.container}>
+      <h1>Count App</h1>
+      <div style={styles.counter}>{count}</div>
+      <div style={styles.buttonContainer}>
+        <button style={styles.button} onClick={increment}>Increment</button>
+        <button style={styles.button} onClick={decrement}>Decrement</button>
+        <button style={styles.button} onClick={reset}>Reset</button>
+      </div>
+    </div>
+  );
+};
+
+const styles: { [key: string]: React.CSSProperties } = {
+  container: {
+    textAlign: 'center',
+    padding: '20px',
+    fontFamily: 'Arial, sans-serif',
+  },
+  counter: {
+    fontSize: '2rem',
+    margin: '20px 0',
+  },
+  buttonContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    gap: '10px',
+  },
+  button: {
+    padding: '10px 20px',
+    fontSize: '1rem',
+    cursor: 'pointer',
+  },
+};
+
+export default Count;
+  `
+  return {
+    content,
+    filename: `${args.rootdir}/${args.entry}`
+  }
+}

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

@@ -1,16 +1,28 @@
 export default args => {
-  let ext = ".jsx"
+  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":
-      ext = ".tsx"
+    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: 'vardana', textAlign: 'center', marginTop: '50px' }}>
+    <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
@@ -21,6 +33,9 @@ const App  = () => {
       >
         Learn React
       </a>
+      <div style={{marginTop: "50px"}}>
+        ${_code}
+      </div>
     </div>
   );
 }

package/src/actions/create/index.js

@@ -15,9 +15,9 @@ const create = async () => {
 
    loader.stop("Project setup complete!")
    if (projectInformation.isCurrentDir) {
-      console.log(`Run the development server: \n makepack serve\nEnjoy your new project! 😊`);
+      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:\nmakepack serve\nEnjoy your new project! 😊`);
+      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! 😊`);
    }
 
 

package/src/actions/create/makeFiles.js

@@ -4,7 +4,9 @@ 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 projectJsx from "./files/project-jsx.js";
 import projectTs from "./files/project-ts.js";
+import projectTsx from "./files/project-tsx.js";
 
 import fs from "fs-extra"
 import path from "path"
@@ -18,12 +20,16 @@ export default async (args) => {
 
    switch (args.template) {
       case "typescript":
-      case "react with typescript":
          files.push(projectTs(args))
+         break
+      case "react with typescript":
+         files.push(projectTsx(args))
          break;
       case "javascript":
-      case "react with javascript":
          files.push(projectJs(args))
+         break
+      case "react with javascript":
+         files.push(projectJsx(args))
          break;
    }
 

package/src/index.js

@@ -18,7 +18,7 @@ program
 program
    .command("serve")
    .option("-p, --port <number>", "Port number", "5000")
-   .option("-r, --root <file>", "root file", path.join(process.cwd(), "/serve"))
+   .option("-r, --root <file>", "root file")
    .description("Start the server")
    .action(serve);