create-aziz-app 2.0.2 → 2.0.3

package/bin/create-aziz-app.js

@@ -1,64 +1,178 @@
 #!/usr/bin/env node
 
-const fs   = require("fs");
+const fs = require("fs");
 const path = require("path");
+const readline = require("readline");
 
-const projectName = process.argv[2] || "my-aziz-app";
-const targetDir   = path.join(process.cwd(), projectName);
-const templateDir = path.join(__dirname, "../template");
+// Create readline interface
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+});
 
-console.log(`\n⚡ Creating "${projectName}"...\n`);
+// Promisify question
+function question(query) {
+    return new Promise(resolve => rl.question(query, resolve));
+}
 
-if (fs.existsSync(targetDir)) {
-    console.error(`❌ Folder "${projectName}" already exists. Choose a different name.`);
-    process.exit(1);
+// Main function
+async function main() {
+    console.log(`\n⚡ Welcome to Aziz App Creator!\n`);
+    console.log(`🎨 A React-like framework with state management, routing, and API routes\n`);
+
+    // Get project name
+    let projectName = process.argv[2];
+    if (!projectName) {
+        projectName = await question('📁 Project name (my-aziz-app): ');
+        projectName = projectName.trim() || 'my-aziz-app';
+    }
+
+    // Validate project name
+    if (!/^[a-z0-9-_]+$/i.test(projectName)) {
+        console.error(`❌ Invalid project name. Use only letters, numbers, hyphens, and underscores.`);
+        rl.close();
+        process.exit(1);
+    }
+
+    const targetDir = path.join(process.cwd(), projectName);
+
+    // Check if directory exists
+    if (fs.existsSync(targetDir)) {
+        const overwrite = await question(`⚠️  Folder "${projectName}" already exists. Overwrite? (y/N): `);
+        if (overwrite.toLowerCase() !== 'y' && overwrite.toLowerCase() !== 'yes') {
+            console.log('❌ Cancelled.');
+            rl.close();
+            process.exit(0);
+        }
+        // Remove existing directory
+        fs.rmSync(targetDir, { recursive: true, force: true });
+    }
+
+    // Ask for port
+    let port = await question('🌐 Dev server port (3000): ');
+    port = port.trim() || '3000';
+    if (!/^\d+$/.test(port)) {
+        console.log('⚠️  Invalid port, using default 3000');
+        port = '3000';
+    }
+
+    // Ask for features
+    console.log('\n✨ Features to include:');
+    const includeExamples = await question('   Include example pages? (Y/n): ');
+    const includeApiExamples = await question('   Include example API routes? (Y/n): ');
+    const includeDocs = await question('   Include documentation? (Y/n): ');
+
+    const features = {
+        examples: includeExamples.toLowerCase() !== 'n' && includeExamples.toLowerCase() !== 'no',
+        apiExamples: includeApiExamples.toLowerCase() !== 'n' && includeApiExamples.toLowerCase() !== 'no',
+        docs: includeDocs.toLowerCase() !== 'n' && includeDocs.toLowerCase() !== 'no'
+    };
+
+    console.log(`\n⚡ Creating "${projectName}"...\n`);
+
+    const templateDir = path.join(__dirname, "../template");
+
+    // Copy the template
+    copyDir(templateDir, targetDir, features);
+
+    // Update package.json with project name
+    updatePackageJson(targetDir, projectName);
+
+    // Update dev server port
+    updateDevServerPort(targetDir, port);
+
+    console.log(`✅ Done! Your project is ready.\n`);
+    console.log(`🎉 Welcome to Aziz App - A React-like Framework\n`);
+    console.log(`📁 Created project: ${projectName}\n`);
+    console.log(`👉 Get started:\n`);
+    console.log(`   cd ${projectName}`);
+    console.log(`   npm install`);
+    console.log(`   npm run dev\n`);
+    console.log(`🌐 Dev server will run on: http://localhost:${port}/\n`);
+    console.log(`📂 Project structure:\n`);
+    console.log(`   app.html          ← Main HTML file`);
+    console.log(`   modules/          ← Core system (router, state, API)`);
+    console.log(`   pages/            ← Your pages (auto-imported)`);
+    console.log(`   components/       ← Your components (auto-imported)`);
+    console.log(`   api/              ← Your API routes (auto-imported)`);
+    console.log(`   scripts/          ← Build tools`);
+    if (features.docs) {
+        console.log(`   docs/             ← Documentation`);
+    }
+    console.log(`\n✨ Features:\n`);
+    console.log(`   • State Management    - useState() like React`);
+    console.log(`   • File-based Routing  - pages/About.jsx → #/about`);
+    console.log(`   • API Routes          - Next.js-like API system`);
+    console.log(`   • Auto-Import         - No manual script tags!`);
+    console.log(`   • Live Reload         - Instant browser refresh\n`);
+    console.log(`💡 Quick tips:\n`);
+    console.log(`   • Create pages/MyPage.jsx → Auto-imported!`);
+    console.log(`   • Create api/todos.js → Auto-imported!`);
+    console.log(`   • Just save and browser refreshes automatically`);
+    if (features.docs) {
+        console.log(`   • Read docs/ folder for detailed guides`);
+    }
+    console.log(`\n🚀 Ready to build something awesome!\n`);
+
+    rl.close();
 }
 
-// Copy the entire template folder into the new project
-copyDir(templateDir, targetDir);
-
-console.log(`✅ Done! Your project is ready.\n`);
-console.log(`🎉 Welcome to Aziz App - A React-like Framework\n`);
-console.log(`📁 Created project: ${projectName}\n`);
-console.log(`👉 Get started:\n`);
-console.log(`   cd ${projectName}`);
-console.log(`   npm run dev\n`);
-console.log(`🌐 This will:`);
-console.log(`   • Start dev server on http://localhost:3000/`);
-console.log(`   • Watch for file changes`);
-console.log(`   • Auto-import new files`);
-console.log(`   • Live reload browser\n`);
-console.log(`� Project structure:\n`);
-console.log(`   app.html          ← Main HTML file`);
-console.log(`   modules/          ← Core system (router, state, API)`);
-console.log(`   pages/            ← Your pages (auto-imported)`);
-console.log(`   components/       ← Your components (auto-imported)`);
-console.log(`   api/              ← Your API routes (auto-imported)`);
-console.log(`   scripts/          ← Build tools`);
-console.log(`   docs/             ← Documentation\n`);
-console.log(`✨ Features:\n`);
-console.log(`   • State Management    - useState() like React`);
-console.log(`   • File-based Routing  - pages/About.jsx → #/about`);
-console.log(`   • API Routes          - Next.js-like API system`);
-console.log(`   • Auto-Import         - No manual script tags!`);
-console.log(`   • Live Reload         - Instant browser refresh\n`);
-console.log(`💡 Quick tips:\n`);
-console.log(`   • Create pages/MyPage.jsx → Auto-imported!`);
-console.log(`   • Create api/todos.js → Auto-imported!`);
-console.log(`   • Just save and browser refreshes automatically`);
-console.log(`   • Read docs/ folder for detailed guides\n`);
-console.log(`🚀 Ready to build something awesome!\n`);
-
-// ---- Helper ----
-function copyDir(src, dest) {
+// Helper to copy directory with filters
+function copyDir(src, dest, features) {
     fs.mkdirSync(dest, { recursive: true });
+    
     for (let file of fs.readdirSync(src)) {
-        const srcPath  = path.join(src, file);
+        const srcPath = path.join(src, file);
         const destPath = path.join(dest, file);
+        
+        // Skip certain files based on features
+        if (!features.docs && file === 'docs') continue;
+        if (!features.examples && file === 'pages' && fs.statSync(srcPath).isDirectory()) {
+            // Copy only essential pages
+            fs.mkdirSync(destPath, { recursive: true });
+            fs.copyFileSync(path.join(srcPath, 'Home.jsx'), path.join(destPath, 'Home.jsx'));
+            continue;
+        }
+        if (!features.apiExamples && file === 'api' && fs.statSync(srcPath).isDirectory()) {
+            // Skip API examples
+            fs.mkdirSync(destPath, { recursive: true });
+            continue;
+        }
+        
         if (fs.statSync(srcPath).isDirectory()) {
-            copyDir(srcPath, destPath);
+            copyDir(srcPath, destPath, features);
         } else {
             fs.copyFileSync(srcPath, destPath);
         }
     }
 }
+
+// Update package.json with project name
+function updatePackageJson(targetDir, projectName) {
+    const packageJsonPath = path.join(targetDir, 'package.json');
+    if (fs.existsSync(packageJsonPath)) {
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+        packageJson.name = projectName;
+        fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+    }
+}
+
+// Update dev server port
+function updateDevServerPort(targetDir, port) {
+    const devServerPath = path.join(targetDir, 'scripts', 'dev-server.js');
+    if (fs.existsSync(devServerPath)) {
+        let content = fs.readFileSync(devServerPath, 'utf8');
+        content = content.replace(
+            'const PORT = process.env.PORT || 3000;',
+            `const PORT = process.env.PORT || ${port};`
+        );
+        fs.writeFileSync(devServerPath, content);
+    }
+}
+
+// Run main function
+main().catch(err => {
+    console.error('❌ Error:', err);
+    rl.close();
+    process.exit(1);
+});

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "create-aziz-app",
-  "version": "2.0.2",
-  "description": "so close to react ~~ just joking",
+  "version": "2.0.3",
+  "description": "A React-like framework with state management, routing, and API routes - Create apps with auto-import, live reload, and Next.js-like features",
   "keywords": [
-    "html",
-    "css",
-    "js",
-    "react like"
+    "react",
+    "framework",
+    "cli",
+    "create-app",
+    "routing",
+    "state-management",
+    "api-routes",
+    "live-reload"
   ],
-  "license": "Aziz",
+  "license": "MIT",
   "author": "Syed Muhammad Aziz Ahmed",
   "type": "commonjs",
   "files": [
@@ -18,7 +22,6 @@
   "bin": {
     "create-aziz-app": "bin/create-aziz-app.js"
   },
-  "main": "app.js",
   "scripts": {
     "dev": "cd template && node scripts/dev-server.js",
     "build": "cd template && node scripts/generate-imports.js",

package/template/app.html

@@ -146,8 +146,7 @@
     <script type="text/babel" src="pages/ApiDemo.jsx"></script>
     <script type="text/babel" src="pages/Contact.jsx"></script>
     <script type="text/babel" src="pages/Home.jsx"></script>
-    <script type="text/babel" src="pages/NewPage.jsx"></script>
-    <script type="text/babel" src="pages/Test.jsx"></script>
+    <script type="text/babel" src="pages/test.jsx"></script>
 
     <!-- Start the app -->
     <script type="text/babel">

package/app.js

@@ -1,88 +0,0 @@
-/** @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 tag is a function (a component like Header), call it
-    if (typeof tag === "function") {
-        return tag(props, ...children);
-    }
-
-    // Create the real DOM element
-    const el = document.createElement(tag);
-
-    // Apply props (class, onClick, etc.)
-    if (props) {
-        for (let key in props) {
-            if (key.startsWith("on")) {
-                // onClick -> click event
-                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]);
-            }
-        }
-    }
-
-    // Append children (text or elements)
-    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/template/pages/NewPage.jsx

@@ -1,39 +0,0 @@
-/** @jsx h */
-
-// Register this page at route "home" → "#/"
-registerPage("NewPage", NewPage);
-
-function NewPage() {
-    return (
-        <div>
-            <h1>Welcome Home 👋</h1>
-
-            <div class="card">
-                <h2>Global State Counter</h2>
-                <p>This uses the global state. Click the buttons to update it.</p>
-
-                <div class="count-display">{state.count}</div>
-
-                <div class="counter-actions">
-                    <button class="btn btn-danger"  onClick={() => setState({ count: state.count - 1 })}>−</button>
-                    <button class="btn btn-primary" onClick={() => setState({ count: state.count + 1 })}>+</button>
-                    <button class="btn btn-grey"    onClick={() => setState({ count: 0 })}>Reset</button>
-                </div>
-            </div>
-
-            <div class="card">
-                <h2>File-based Routing</h2>
-                <p>
-                    Each file in <strong>pages/</strong> is a route — just like Next.js.
-                    Add a new file, register it in app.js, and it's a new page.
-                </p>
-                <button class="btn btn-primary" onClick={() => navigate("test")}>
-                    Go to Test Page →
-                </button>
-                <button class="btn btn-primary" onClick={() => navigate("about")}>
-                    Go to About →
-                </button>
-            </div>
-        </div>
-    );
-}