create-aziz-app 1.0.0 → 1.0.2

package/bin/create-aziz-app.js

@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+
+// The folder name comes from the command line argument
+// e.g. npm create aziz-app my-app  →  projectName = "my-app"
+const projectName = process.argv[2] || "my-aziz-app";
+const targetDir = path.join(process.cwd(), projectName);
+const templateDir = path.join(__dirname, "../template");
+
+// Create the project folder
+if (fs.existsSync(targetDir)) {
+    console.log(`❌ Folder "${projectName}" already exists.`);
+    process.exit(1);
+}
+
+fs.mkdirSync(targetDir, { recursive: true });
+
+// Copy all template files into the new project folder
+copyDir(templateDir, targetDir);
+
+console.log(`
+✅ Project "${projectName}" created!
+
+👉 Next steps:
+   cd ${projectName}
+   Open app.html with Live Server and start coding!
+`);
+
+// Helper: copy a folder recursively
+function copyDir(src, dest) {
+    fs.mkdirSync(dest, { recursive: true });
+
+    for (let file of fs.readdirSync(src)) {
+        const srcPath = path.join(src, file);
+        const destPath = path.join(dest, file);
+
+        if (fs.statSync(srcPath).isDirectory()) {
+            copyDir(srcPath, destPath);
+        } else {
+            fs.copyFileSync(srcPath, destPath);
+        }
+    }
+}

package/package.json

@@ -1,16 +1,23 @@
 {
   "name": "create-aziz-app",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "so close to react ~~ just joking",
   "keywords": [
-    "js",
-    "hrml",
+    "html",
     "css",
-    "reactlike"
+    "js",
+    "react like"
   ],
   "license": "Aziz",
   "author": "Syed Muhammad Aziz Ahmed",
   "type": "commonjs",
+  "files": [
+    "bin",
+    "template"
+  ],
+  "bin": {
+    "create-aziz-app": "bin/create-aziz-app.js"
+  },
   "main": "app.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/template/app.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Aziz Js App</title>
+
+    <!-- Babel compiles JSX in the browser -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f0f0f0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+        .header {
+            width: 100%;
+            background-color: #282c34;
+            color: white;
+            padding: 20px;
+            text-align: center;
+        }
+        .main { margin-top: 60px; text-align: center; }
+        .counter-box {
+            background-color: white;
+            padding: 40px 60px;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        }
+        .counter-box h2 { margin-bottom: 20px; color: #333; }
+        .count-display { font-size: 64px; font-weight: bold; color: #282c34; margin: 20px 0; }
+        .btn { padding: 12px 28px; margin: 0 8px; font-size: 24px; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.2s; }
+        .btn-plus  { background-color: #61dafb; color: #282c34; }
+        .btn-minus { background-color: #ff6b6b; color: white; }
+        .btn-reset { background-color: #ccc; color: #333; font-size: 16px; padding: 12px 24px; margin-top: 20px; display: block; width: 100%; border-radius: 8px; border: none; cursor: pointer; }
+        .btn:hover { opacity: 0.85; }
+        .footer { margin-top: auto; padding: 20px; color: #888; font-size: 14px; }
+    </style>
+</head>
+<body>
+
+    <div id="root"></div>
+
+    <script type="text/babel" src="components/Header.jsx"></script>
+    <script type="text/babel" src="components/Counter.jsx"></script>
+    <script type="text/babel" src="components/Footer.jsx"></script>
+    <script type="text/babel" src="app.js"></script>
+
+</body>
+</html>

package/template/app.js

@@ -0,0 +1,83 @@
+/** @jsx h */
+
+// ==============================
+//  h() — our own createElement
+//  Babel compiles JSX like <div class="x"> into h("div", { class: "x" }, ...children)
+//  This function turns that into a real DOM element
+// ==============================
+function h(tag, props, ...children) {
+    if (typeof tag === "function") {
+        return tag(props, ...children);
+    }
+
+    const el = document.createElement(tag);
+
+    if (props) {
+        for (let key in props) {
+            if (key.startsWith("on")) {
+                const eventName = key.slice(2).toLowerCase();
+                el.addEventListener(eventName, props[key]);
+            } else if (key === "className") {
+                el.className = props[key];
+            } else {
+                el.setAttribute(key, props[key]);
+            }
+        }
+    }
+
+    for (let child of children) {
+        if (child === null || child === undefined) continue;
+        if (typeof child === "string" || typeof child === "number") {
+            el.appendChild(document.createTextNode(child));
+        } else {
+            el.appendChild(child);
+        }
+    }
+
+    return el;
+}
+
+
+// ==============================
+//  STATE
+// ==============================
+let state = {
+    count: 0
+};
+
+
+// ==============================
+//  RENDER
+// ==============================
+function render() {
+    const root = document.getElementById("root");
+    root.innerHTML = "";
+    root.appendChild(Header());
+    root.appendChild(Counter());
+    root.appendChild(Footer());
+}
+
+
+// ==============================
+//  STATE UPDATER FUNCTIONS
+// ==============================
+function increment() {
+    state.count = state.count + 1;
+    render();
+}
+
+function decrement() {
+    state.count = state.count - 1;
+    render();
+}
+
+function reset() {
+    state.count = 0;
+    render();
+}
+
+
+// ==============================
+//  FIRST RENDER
+// ==============================
+render();

package/{components → template/components}/Header.jsx

@@ -3,7 +3,7 @@
 function Header() {
     return (
         <div class="header">
-            <h1>My Vanilla JS App ⚡</h1>
+            <h1>My Aziz Js App ⚡</h1>
             <p>A simple React-like app using plain JavaScript</p>
         </div>
     );

package/.vscode/settings.json

@@ -1,2 +0,0 @@
-{
-}

package/app.html

@@ -1,110 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Vanilla JS App</title>
-
-    <!-- Babel compiles our JSX in the browser -->
-    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f0f0f0;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            min-height: 100vh;
-        }
-
-        .header {
-            width: 100%;
-            background-color: #282c34;
-            color: white;
-            padding: 20px;
-            text-align: center;
-        }
-
-        .main {
-            margin-top: 60px;
-            text-align: center;
-        }
-
-        .counter-box {
-            background-color: white;
-            padding: 40px 60px;
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-        }
-
-        .counter-box h2 {
-            margin-bottom: 20px;
-            color: #333;
-        }
-
-        .count-display {
-            font-size: 64px;
-            font-weight: bold;
-            color: #282c34;
-            margin: 20px 0;
-        }
-
-        .btn {
-            padding: 12px 28px;
-            margin: 0 8px;
-            font-size: 24px;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: background-color 0.2s;
-        }
-
-        .btn-plus  { background-color: #61dafb; color: #282c34; }
-        .btn-minus { background-color: #ff6b6b; color: white; }
-
-        .btn-reset {
-            background-color: #ccc;
-            color: #333;
-            font-size: 16px;
-            padding: 12px 24px;
-            margin-top: 20px;
-            display: block;
-            width: 100%;
-            border-radius: 8px;
-            border: none;
-            cursor: pointer;
-        }
-
-        .btn:hover { opacity: 0.85; }
-
-        .footer {
-            margin-top: auto;
-            padding: 20px;
-            color: #888;
-            font-size: 14px;
-        }
-    </style>
-</head>
-<body>
-
-    <div id="root">       
-    </div>
-
-    <!-- Load components first (Babel compiles each one) -->
-     
-    <script type="text/babel" src="components/Header.jsx"></script>
-    <script type="text/babel" src="components/Counter.jsx"></script>
-    <script type="text/babel" src="components/Footer.jsx"></script>
-
-    <!-- Then load the main app -->
-    <script type="text/babel" src="app.js"></script>
-
-</body>
-</html>