npm - makepack - Versions diffs - 1.0.0 - Mend

makepack 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/README.md ADDED Viewed

File without changes

package/index.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8" />
+   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+   <title>Playground</title>
+</head>
+<body>
+   <div id="root"></div>
+   <script type="module" src="./index.tsx"></script>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,45 @@
+{
+  "name": "makepack",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A simple CLI tool to create a new npm package",
+  "categories": [
+    "Other"
+  ],
+  "author": {
+    "name": "Devnax",
+    "email": "devnaxrul@gmail.com"
+  },
+  "bin": "./src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/devnax/makepack"
+  },
+  "scripts": {},
+  "devDependencies": {
+    "@eslint/js": "^9.15.0",
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.10.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "commander": "^12.1.0",
+    "esbuild": "^0.24.2",
+    "eslint": "^9.15.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "express": "^4.21.1",
+    "fs-extra": "^11.2.0",
+    "globals": "^15.12.0",
+    "inquirer": "^12.1.0",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.15.0",
+    "vite": "^6.0.2"
+  },
+  "dependencies": {
+    "glob": "^11.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}

package/src/actions/build.js ADDED Viewed

@@ -0,0 +1,60 @@
+import inquirer from 'inquirer'
+import esbuild from 'esbuild';
+import fs from 'fs-extra';
+import path from 'path';
+import { glob } from 'glob'
+import ts from 'typescript'
+const pack = async (args) => {
+   try {
+      fs.removeSync(path.join(process.cwd(), args.outdir));
+   } catch (err) { }
+   const files = await glob('test/**/*.{tsx,ts,js,jsx}') || []
+   const entries = files.map(entry => path.join(process.cwd(), entry))
+   esbuild.build({
+      entryPoints: entries,
+      outdir: path.join(process.cwd(), args.outdir),
+      minify: true,
+      sourcemap: true,
+      format: "esm",
+      platform: 'node',
+      loader: { '.ts': 'ts' },
+      tsconfig: path.join(process.cwd(), 'tsconfig.json'),
+   }).then(() => {
+      console.log('Build completed successfully!');
+   }).catch((err) => {
+      console.error('Build failed:', err);
+   });
+   const options = {
+      declaration: true,
+      emitDeclarationOnly: true,
+      outDir: path.join(process.cwd(), args.outdir),
+      strict: true,
+      allowJs: true,
+      jsx: ts.JsxEmit.React,
+      esModuleInterop: true,
+   };
+   const program = ts.createProgram(files, options);
+   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);
+            console.error(`Error at ${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`);
+         } else {
+            console.error(`Error: ${message}`);
+         }
+      });
+   } else {
+      console.log('Type declarations generated successfully!');
+   }
+}
+export default pack

package/src/actions/create.js ADDED Viewed

@@ -0,0 +1,195 @@
+import path from "path"
+import fs from "fs-extra"
+import inquirer from "inquirer"
+import { execSync, logLoader } from "../helpers.js"
+const cwd = process.cwd()
+const cwdFolder = cwd.split(path.sep).pop()
+const create = async (args) => {
+   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
+         }
+      }
+   }
+   let { template } = await inquirer.prompt([
+      {
+         type: 'list',
+         name: 'template',
+         message: 'Select a template',
+         choices: ['typescript', 'javascript', 'react with typescript', 'react with javascript'],
+         default: 'typeScript'
+      }
+   ])
+   if (projectDirName !== cwdFolder) {
+      fs.removeSync(projectDir)
+      fs.mkdirSync(projectDir)
+   }
+   let dependencies = {}
+   let devDependencies = {
+      // "make-pack": "@latest"
+   }
+   if (template.includes("react")) {
+      dependencies = {
+         "react": "^17.0.2",
+         "react-dom": "^17.0.2"
+      }
+   }
+   if (template.includes("typescript")) {
+      devDependencies["typescript"] = "^4.4.2"
+      devDependencies["@types/react"] = "^18.3.12"
+      devDependencies["@types/react-dom"] = "^18.3.1"
+   }
+   let loader = logLoader("Creating project...")
+   fs.mkdirSync(path.join(projectDir, "src"))
+   fs.writeFileSync(path.join(projectDir, "package.json"), JSON.stringify({
+      name: projectDirName,
+      version: "1.0.0",
+      description: "",
+      main: "index.js",
+      scripts: {
+         "start": "makepack serve",
+         "build": "makepack build",
+      },
+      dependencies,
+      devDependencies,
+      keywords: [],
+   }, null, 2), "utf-8")
+   switch (template) {
+      case "typescript":
+         fs.writeFileSync(path.join(projectDir, "src/index.ts"), `console.log("Hello, World!")`, "utf-8")
+         break;
+      case "react with typescript":
+         fs.writeFileSync(path.join(projectDir, "src/index.tsx"), `import React from 'react';
+const App: React.FC = () => {
+  return (
+    <div style={{ textAlign: 'center', marginTop: '50px' }}>
+      <h1>Welcome to React Typescript with make-pack 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>
+  );
+};
+export default App;
+         `)
+         break;
+      case "javascript":
+         fs.writeFileSync(path.join(projectDir, "src/index.js"), `console.log("Hello, World!")`, "utf-8")
+         break;
+      case "react with javascript":
+         fs.writeFileSync(path.join(projectDir, "src/index.jsx"), `import React from 'react';
+const App: React.FC = () => {
+  return (
+    <div style={{ textAlign: 'center', marginTop: '50px' }}>
+      <h1>Welcome to React JS with make-pack CLI!</h1>
+      <p>Edit <code>index.jsx</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>
+  );
+};
+export default App;
+         `)
+         break;
+   }
+   // generate tsconfig.json
+   if (template.includes("typescript")) {
+      let config = {
+         "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,
+         },
+         "include": ["src"]
+      }
+      // config for react
+      if (template.includes("react")) {
+         config.compilerOptions["jsx"] = "react-jsx"
+         config.compilerOptions["jsxImportSource"] = "react"
+      }
+      fs.writeFileSync(path.join(projectDir, "tsconfig.json"), JSON.stringify(config, null, 2), "utf-8")
+   }
+   // generate .gitignore
+   fs.writeFileSync(path.join(projectDir, ".gitignore"), "node_modules\n", "utf-8")
+   loader.stop("")
+   loader = logLoader("Installing dependencies...")
+   execSync("npm install", {
+      cwd: projectDir,
+   })
+   loader.stop("Project setup complete!")
+   console.log(`
+  To start working with your project:
+  1. Navigate to your project directory:
+     cd ${projectDirName}
+  2. Run the development server:
+     makepack serve
+  Enjoy your new project! 😊`);
+}
+export default create

package/src/actions/serve.js ADDED Viewed

@@ -0,0 +1,64 @@
+import inquirer from 'inquirer'
+import { createServer as createViteServer } from 'vite';
+import express from 'express';
+const app = express();
+const serve = async (args) => {
+   if (args.entry === undefined) {
+      const { entry } = await inquirer.prompt([{
+         type: 'input',
+         name: 'entry',
+         message: 'Enter the root file',
+         default: 'src/index.js'
+      }]);
+      args.entry = entry;
+   }
+   let template = `
+      <!doctype html>
+      <html lang="en">
+        <head>
+          <meta charset="UTF-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          <title>Xanos</title>
+        </head>
+        <body>
+          <div id="root"></div>
+          <script type="module" src="${args.entry}"></script>
+        </body>
+      </html>
+  `;
+   const vite = await createViteServer({
+      root: process.cwd(),
+      // plugins: [react()],
+      server: {
+         middlewareMode: true
+      },
+      appType: 'custom'
+   });
+   app.use(vite.middlewares);
+   app.get('/', async (req, res, next) => {
+      const url = req.originalUrl;
+      try {
+         template = await vite.transformIndexHtml(url, template);
+         res.status(200).set({
+            'Content-Type': 'text/html'
+         }).end(template);
+      } catch (e) {
+         vite.ssrFixStacktrace(e);
+         next(e);
+      }
+   });
+   app.use('*', async (_req, res) => {
+      res.status(404).end("404 page not found");
+   });
+   app.listen(args.port, () => console.log(`http://localhost:${args.port}`));
+}
+export default serve

package/src/helpers.js ADDED Viewed

@@ -0,0 +1,60 @@
+import child_process from 'child_process'
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url'
+export const packageDir = process.cwd() + "/node_modules/xanos"
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+export const logLoader = (message = "") => {
+   const spinner = ['|', '/', '-', '\\'];
+   let i = 0;
+   const interval = setInterval(() => {
+      process.stdout.write(`\r${message} ${spinner[i]}`);
+      i = (i + 1) % spinner.length;
+   }, 100);
+   return {
+      stop: (msg) => {
+         clearInterval(interval);
+         !!msg && console.log(`\r${msg}`);
+         process.stdout.write(`\r`);
+      }
+   }
+}
+export const exec = (command) => {
+   child_process.exec(command, (error, stdout, stderr) => {
+      if (error) {
+         console.error("Error:", error);
+         return;
+      }
+      console.log(stdout.toString());
+      console.error("stderr:", stderr);
+   });
+};
+export const execSync = (command, option = {}) => {
+   try {
+      const result = child_process.execSync(command, {
+         encoding: "utf-8",
+         stdio: 'inherit',
+         ...option
+      });
+      result && console.log(result);
+   } catch (error) {
+      console.error(`Command failed: ${error.message}`);
+   }
+};
+export const packageJson = () => {
+   try {
+      const data = fs.readFileSync('./package.json', 'utf8');
+      return JSON.parse(data);
+   } catch (error) {
+      console.error('Error reading package.json', error);
+   }
+}

package/src/index.js ADDED Viewed

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+import serve from "./actions/serve.js";
+import build from "./actions/build.js";
+import create from "./actions/create.js";
+const program = new Command();
+program.name("Make Pack").description("Usages");
+program
+   .command("create")
+   .description("create a new project")
+   .action(create);
+program
+   .command("serve")
+   .option("-p, --port <type>", "Port number", "3000")
+   .option("-e, --entry <type>", "entry file")
+   .description("Start the server")
+   .action(serve);
+program
+   .command("build")
+   .option("-e, --entry <type>", "entry file o directory (you can use glob pattern)", "src/**/*.{tsx,ts,js,jsx}")
+   .option("-out, --outdir <type>", "output directory", "build")
+   .description("build the project")
+   .action(build);
+program.parse();

package/test/browser.js ADDED Viewed

@@ -0,0 +1,5 @@
+alert()
+export default () => {
+   return "Hello World"
+}

package/test/client.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import ReactDOM from 'react-dom/client'
+import React from 'react'
+import calc from '.'
+const OSMain = () => {
+   return (
+      <div>{calc(2, 2)}</div>
+   )
+}
+ReactDOM.createRoot(document.getElementById('root') as any).render(<OSMain />)

package/test/index.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export type Calc = (a: number, b: number) => number;
+const calc = (a: number, b: number) => {
+   return a + b;
+}
+export default calc;

package/test/math.ts ADDED Viewed

File without changes

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "jsx": "react",
+    "module": "esnext",
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    "target": "ESNext",
+    "importHelpers": true,
+    "sourceMap": true,
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+  },
+  "include": [
+    "test/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}