makepack 1.3.7 → 1.3.8

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

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 (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/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 (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`
+   }
 }

package/src/actions/create/files/serve.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 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}`
+  }
 }

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 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,30 @@
-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, 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);
+      }
+   });
+}
+
 export default create

package/src/actions/create/makeFiles.js

@@ -1,64 +1,64 @@
-// 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 projectJsx from "./files/project-jsx.js";
-import projectTs from "./files/project-ts.js";
-import projectTsx from "./files/project-tsx.js";
-
-import inquirer from 'inquirer'
-import fs from "fs-extra"
-import path from "path"
-import readmeMd from "./files/readme.md.js";
-
-export default async (args) => {
-   const files = [
-      packageJson(args),
-      gitignore(args),
-      serve(args),
-      readmeMd(args)
-   ];
-
-   switch (args.template) {
-      case "typescript":
-         files.push(projectTs(args))
-         break
-      case "react with typescript":
-         files.push(projectTsx(args))
-         break;
-      case "javascript":
-         files.push(projectJs(args))
-         break
-      case "react with javascript":
-         files.push(projectJsx(args))
-         break;
-   }
-
-   // push ts config
-   if (args.template.includes("typescript")) {
-      files.push(tsconfig(args))
-   }
-
-   for (let file of files) {
-      // check if the file exists
-      if (fs.existsSync(path.join(args.cwd, file.filename))) {
-         const { overwrite } = await inquirer.prompt([
-            {
-               type: "confirm",
-               name: 'overwrite',
-               message: `The file ${file.filename} already exists, do you want to overwrite it?`,
-               default: true
-            }
-         ])
-         if (!overwrite) {
-            continue
-         } else {
-            fs.removeSync(path.join(args.cwd, file.filename))
-         }
-      }
-
-      fs.writeFileSync(path.join(args.cwd, file.filename), file.content)
-   }
-}
+// 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 projectJsx from "./files/project-jsx.js";
+import projectTs from "./files/project-ts.js";
+import projectTsx from "./files/project-tsx.js";
+
+import inquirer from 'inquirer'
+import fs from "fs-extra"
+import path from "path"
+import readmeMd from "./files/readme.md.js";
+
+export default async (args) => {
+   const files = [
+      packageJson(args),
+      gitignore(args),
+      serve(args),
+      readmeMd(args)
+   ];
+
+   switch (args.template) {
+      case "typescript":
+         files.push(projectTs(args))
+         break
+      case "react with typescript":
+         files.push(projectTsx(args))
+         break;
+      case "javascript":
+         files.push(projectJs(args))
+         break
+      case "react with javascript":
+         files.push(projectJsx(args))
+         break;
+   }
+
+   // push ts config
+   if (args.template.includes("typescript")) {
+      files.push(tsconfig(args))
+   }
+
+   for (let file of files) {
+      // check if the file exists
+      if (fs.existsSync(path.join(args.cwd, file.filename))) {
+         const { overwrite } = await inquirer.prompt([
+            {
+               type: "confirm",
+               name: 'overwrite',
+               message: `The file ${file.filename} already exists, do you want to overwrite it?`,
+               default: true
+            }
+         ])
+         if (!overwrite) {
+            continue
+         } else {
+            fs.removeSync(path.join(args.cwd, file.filename))
+         }
+      }
+
+      fs.writeFileSync(path.join(args.cwd, file.filename), file.content)
+   }
+}

package/src/actions/create/makeProjectDirectory.js

@@ -1,42 +1,42 @@
-import path from "path"
-import fs from "fs-extra"
-import inquirer from "inquirer"
-const cwd = process.cwd()
-const cwdFolder = cwd.split(path.sep).pop()
-
-export default async () => {
-   const { projectDirName } = await inquirer.prompt([
-      {
-         type: 'input',
-         name: 'projectDirName',
-         message: 'Enter the project name',
-         default: cwdFolder
-      }
-   ])
-
-   let projectDir = cwd
-
-   if (projectDirName !== cwdFolder) {
-      projectDir = path.join(cwd, projectDirName);
-      if (fs.existsSync(projectDir)) {
-         const { proceed } = await inquirer.prompt([
-            {
-               type: "confirm",
-               name: 'proceed',
-               message: "The directory already exists, do you want to overwrite it?",
-               default: cwdFolder
-            }
-         ])
-         if (!proceed) {
-            console.log('Project creation canceled.');
-            return
-         }
-      }
-   }
-
-   return {
-      cwd: projectDir,
-      dirname: projectDirName,
-      isCurrentDir: projectDirName === cwdFolder
-   }
+import path from "path"
+import fs from "fs-extra"
+import inquirer from "inquirer"
+const cwd = process.cwd()
+const cwdFolder = cwd.split(path.sep).pop()
+
+export default async () => {
+   const { projectDirName } = await inquirer.prompt([
+      {
+         type: 'input',
+         name: 'projectDirName',
+         message: 'Enter the project name',
+         default: cwdFolder
+      }
+   ])
+
+   let projectDir = cwd
+
+   if (projectDirName !== cwdFolder) {
+      projectDir = path.join(cwd, projectDirName);
+      if (fs.existsSync(projectDir)) {
+         const { proceed } = await inquirer.prompt([
+            {
+               type: "confirm",
+               name: 'proceed',
+               message: "The directory already exists, do you want to overwrite it?",
+               default: cwdFolder
+            }
+         ])
+         if (!proceed) {
+            console.log('Project creation canceled.');
+            return
+         }
+      }
+   }
+
+   return {
+      cwd: projectDir,
+      dirname: projectDirName,
+      isCurrentDir: projectDirName === cwdFolder
+   }
 }