makepack 1.4.0 → 1.5.1

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

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

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

@@ -1,60 +1,55 @@
-export default (args) => {
-   let dependencies = {}
-   let devDependencies = {
-      "makepack": "latest"
-   }
-
-   if (args.template.includes("react")) {
-      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")) {
-      devDependencies["typescript"] = "^4.4.2"
-      devDependencies["@types/react"] = "^19.0.2"
-      devDependencies["@types/react-dom"] = "^19.0.2"
-   }
-
-   let main = args.entry.split('.')
-   main.pop()
-
-   const json = {
-      name: args.dirname,
-      version: "1.0.0",
-      description: "",
-      main: `./${main.join(".")}.js`,
-      scripts: {
-         "start": "makepack serve",
-         "pack": "makepack pack",
-         "publish:pack": "makepack pack -p",
-      },
-      dependencies,
-      devDependencies,
-      keywords: [],
-      exports: {
-         ".": {
-            "types": "./types/index.d.ts",
-            "import": "./esm/index.js",
-            "require": "./cjs/index.js"
-         },
-         "./*": {
-            "types": "./types/*.d.ts",
-            "import": "./esm/*.js",
-            "require": "./cjs/*.js"
-         },
-         "./types/*": "./types/*.d.ts",
-         "./esm/*": "./esm/*.js",
-         "./esm/*.js": "./esm/*.js",
-         "./cjs/*": "./cjs/*.js",
-         "./cjs/*.js": "./cjs/*.js"
-      }
-   }
-
-   return {
-      content: JSON.stringify(json, null, 3),
-      filename: "package.json"
-   }
+
+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("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 = info.sourceEntry.split('.')
+   main.pop()
+
+   const json = {
+      name: info.projectDirName,
+      version: "1.0.0",
+      main: `./index.js`,
+      module: `./esm/index.js`,
+      types: `./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"
+         }
+      },
+      scripts: {
+         "start": "makepack serve",
+         "build": "makepack build",
+         "build:publish": "makepack publish"
+      },
+      dependencies,
+      devDependencies
+   }
+
+   return {
+      content: JSON.stringify(json, null, 3),
+      filename: "package.json"
+   }
 }

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

@@ -1,13 +1,13 @@
-export default (args) => {
-  const content = `
-function add(a, b) {
-  return a + b;
-}
-
-export default add
-  `
-  return {
-    content,
-    filename: `${args.rootdir}/${args.entry}`
-  }
+export default async (args) => {
+  const content = `
+function add(a, b) {
+  return a + b;
+}
+
+export default add
+  `
+  return {
+    content,
+    filename: `${args.sourceDir}/${args.sourceEntry}`
+  }
 }

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

@@ -1,51 +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}`
-  }
+export default async (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.sourceDir}/${args.sourceEntry}`
+  }
 }

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

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

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

@@ -1,51 +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}`
-  }
+export default async (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.sourceDir}/${args.sourceEntry}`
+  }
 }

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

@@ -1,14 +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`
-   }
+import fs from 'fs-extra'
+import path from 'path'
+import { fileURLToPath } from 'url'
+export const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export default async () => {
+   // 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/files/tsconfig.js

@@ -1,33 +1,33 @@
-export default args => {
-   const content = {
-      "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": [args.rootdir],
-      "exclude": [
-         "node_modules"
-      ]
-   }
-
-   return {
-      content: JSON.stringify(content, null, 2),
-      filename: "tsconfig.json"
-   }
+export default async (args) => {
+   const content = {
+      "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": [args.rootdir],
+      "exclude": [
+         "node_modules"
+      ]
+   }
+
+   return {
+      content: JSON.stringify(content, null, 2),
+      filename: "tsconfig.json"
+   }
 }

package/src/actions/create/index.js

@@ -1,30 +1,109 @@
-import { execSync, logLoader, logger } from "../../helpers.js"
-import makeProjectInformation from "./makeProjectInformation.js"
-import makeFiles from "./makeFiles.js"
-import figlet from 'figlet'
-
-const create = async () => {
-   let info = await makeProjectInformation()
-   logger.info("", "Creating project...", false)
-   await makeFiles(info)
-
-   logger.info("", "Installing Dependencies", false)
-   execSync("npm install", {
-      cwd: info.cwd,
-   })
-
-   logger.info("Project setup complete!", "", false)
-   if (info.isCurrentDir) {
-      console.log(`Run the development server: \n${logger.info("", "npm start", false)}\nEnjoy your new project! 😊`);
-   } else {
-      console.log(`To start working with your project:\nNavigate to your project directory:\n${logger.info("", "cd " + info.dirname, false)} and Run the development server:\n${logger.info("", "npm start", false)}\nEnjoy your new project! 😊`);
-   }
-
-   figlet("Make Pack CLI", function (err, data) {
-      if (!err) {
-         console.log(data);
-      }
-   });
-}
-
+import { execSync, logger } from "../../helpers.js"
+import makeFiles from "./makeFiles.js"
+import path from 'path'
+import inquirer from 'inquirer'
+import figlet from 'figlet'
+import fs from "fs-extra"
+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",
+   }
+
+   let { projectDirName } = await inquirer.prompt([
+      {
+         type: 'input',
+         name: 'projectDirName',
+         message: 'Enter the project name',
+         default: information.projectDir
+      }
+   ])
+
+   if (projectDirName !== cwdFolder) {
+      if (fs.existsSync(path.join(cwd, projectDirName))) {
+         const { proceed } = await inquirer.prompt([
+            {
+               type: "confirm",
+               name: 'proceed',
+               message: "The directory already exists, do you want to overwrite it?",
+               default: "No"
+            }
+         ])
+         if (!proceed) {
+            console.log('Project creation canceled.');
+            return
+         }
+      }
+   }
+
+   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
+
+   logger.info("", "Creating project...", false)
+   const projectDir = path.join(cwd, information.projectDirName)
+
+   if (information.projectDirName !== cwdFolder) {
+      if (fs.existsSync(projectDir)) {
+         fs.removeSync(projectDir)
+      }
+      fs.mkdirSync(projectDir)
+   }
+
+   if (!fs.existsSync(path.join(projectDir, information.sourceDir))) {
+      fs.mkdirSync(path.join(projectDir, information.sourceDir))
+   }
+
+   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;
+   }
+
+   await makeFiles(information)
+
+   logger.info("", "Installing Dependencies", false)
+   execSync("npm install", {
+      cwd: information.cwd,
+   })
+
+   logger.info("Project setup complete!", "", false)
+   if (isCurrentDir) {
+      console.log(`Run the development server: \n${logger.info("", "npm start", false)}\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! 😊`);
+   }
+
+   figlet("Makepack CLI", function (err, data) {
+      if (!err) {
+         console.log(data);
+      }
+   });
+}
+
 export default create