create-aziz-app 1.0.3 → 2.0.1

package/template/docs/API-GUIDE.md

@@ -0,0 +1,196 @@
+# API Routes Guide
+
+## Overview
+
+Your app now has a Next.js-like API route system! Create API endpoints in the `api/` folder and call them from your components.
+
+## Creating API Routes
+
+### Basic Example
+
+Create a file in `api/` folder:
+
+```javascript
+// api/myroute.js
+registerApiRoute('myroute', async (req, res) => {
+    return res.status(200).json({ 
+        message: 'Hello from API!' 
+    });
+});
+```
+
+### Request Object (req)
+
+The request object contains:
+- `req.method` - HTTP method (GET, POST, PUT, DELETE)
+- `req.body` - Request body (parsed JSON)
+- `req.query` - Query parameters from URL
+- `req.params` - Route parameters
+
+### Response Object (res)
+
+The response object has methods:
+- `res.status(code)` - Set HTTP status code
+- `res.json(data)` - Send JSON response
+- `res.send(data)` - Send plain response
+
+### Full CRUD Example
+
+```javascript
+// api/todos.js
+const todos = [];
+
+registerApiRoute('todos', async (req, res) => {
+    switch (req.method) {
+        case 'GET':
+            // Get all todos
+            return res.status(200).json(todos);
+
+        case 'POST':
+            // Create new todo
+            const newTodo = {
+                id: Date.now(),
+                title: req.body.title,
+                completed: false
+            };
+            todos.push(newTodo);
+            return res.status(201).json(newTodo);
+
+        case 'PUT':
+            // Update todo
+            const id = req.body.id;
+            const index = todos.findIndex(t => t.id === id);
+            if (index !== -1) {
+                todos[index] = { ...todos[index], ...req.body };
+                return res.status(200).json(todos[index]);
+            }
+            return res.status(404).json({ error: 'Not found' });
+
+        case 'DELETE':
+            // Delete todo
+            const deleteId = req.query.id;
+            const deleteIndex = todos.findIndex(t => t.id === parseInt(deleteId));
+            if (deleteIndex !== -1) {
+                todos.splice(deleteIndex, 1);
+                return res.status(200).json({ message: 'Deleted' });
+            }
+            return res.status(404).json({ error: 'Not found' });
+
+        default:
+            return res.status(405).json({ error: 'Method not allowed' });
+    }
+});
+```
+
+## Using API Routes in Components
+
+### Basic GET Request
+
+```javascript
+const MyComponent = () => {
+    const [data, setData] = useState(null);
+
+    const loadData = async () => {
+        const response = await fetchApi('/api/myroute');
+        const result = await response.json();
+        setData(result);
+    };
+
+    return (
+        <div>
+            <button onClick={loadData}>Load Data</button>
+            {data && <p>{data.message}</p>}
+        </div>
+    );
+};
+```
+
+### POST Request
+
+```javascript
+const addItem = async () => {
+    const response = await fetchApi('/api/todos', {
+        method: 'POST',
+        body: JSON.stringify({
+            title: 'New Todo'
+        })
+    });
+    const result = await response.json();
+    console.log('Created:', result);
+};
+```
+
+### Query Parameters
+
+```javascript
+// Fetch with query params
+const response = await fetchApi('/api/users?id=123&name=John');
+```
+
+### DELETE Request
+
+```javascript
+const deleteItem = async (id) => {
+    const response = await fetchApi(`/api/todos?id=${id}`, {
+        method: 'DELETE'
+    });
+    const result = await response.json();
+    console.log(result.message);
+};
+```
+
+## Available API Routes
+
+### /api/hello
+Simple hello world endpoint
+- **GET** `/api/hello?name=YourName`
+- Returns: `{ message: "Hello, YourName!", timestamp: "...", method: "GET" }`
+
+### /api/users
+User management endpoint
+- **GET** `/api/users` - Get all users
+- **GET** `/api/users?id=1` - Get specific user
+- **POST** `/api/users` - Create user (body: `{ name, email }`)
+- **PUT** `/api/users?id=1` - Update user (body: `{ name, email }`)
+- **DELETE** `/api/users?id=1` - Delete user
+
+## Tips
+
+1. **Mock Data**: Currently, API routes use in-memory data. Replace with real backend calls when ready.
+
+2. **Error Handling**: Always wrap API calls in try-catch:
+```javascript
+try {
+    const response = await fetchApi('/api/myroute');
+    const data = await response.json();
+} catch (error) {
+    console.error('API Error:', error);
+}
+```
+
+3. **Loading States**: Use loading state for better UX:
+```javascript
+const [loading, setLoading] = useState(false);
+
+const loadData = async () => {
+    setLoading(true);
+    try {
+        const response = await fetchApi('/api/data');
+        const data = await response.json();
+        setData(data);
+    } finally {
+        setLoading(false);
+    }
+};
+```
+
+4. **Real Backend**: To connect to a real backend, modify `fetchApi` in `api.js` to use `fetch()` instead of the mock system.
+
+## Demo
+
+Visit `#/api-demo` in your app to see a live demo of the API system with:
+- GET requests
+- POST requests (create users)
+- DELETE requests
+- Loading states
+- Error handling

package/template/docs/AUTO-IMPORT.md

@@ -0,0 +1,99 @@
+# 🚀 Auto-Import System
+
+## How It Works
+
+Instead of manually adding `<script>` tags, just run one command and all your files are automatically imported!
+
+## Usage
+
+### 1. Create Your Files
+
+Just create files in the appropriate folders:
+
+```
+pages/MyNewPage.jsx       ← Automatically becomes a route
+components/Button.jsx     ← Automatically available
+api/todos.js             ← Automatically registered
+```
+
+### 2. Run the Build Command
+
+```bash
+cd template
+node generate-imports.js
+```
+
+Or from the root:
+```bash
+npm run build
+```
+
+### 3. Refresh Your Browser
+
+That's it! Your new files are now loaded.
+
+## What Gets Auto-Imported
+
+- **`api/*.js`** - All API route files
+- **`components/*.jsx`** and **`components/*.js`** - All component files  
+- **`pages/*.jsx`** and **`pages/*.js`** - All page files
+
+## Example Workflow
+
+```bash
+# 1. Create a new page
+echo '/** @jsx h */
+registerPage("profile", ProfilePage);
+function ProfilePage() {
+    return <div><h1>Profile</h1></div>;
+}' > pages/Profile.jsx
+
+# 2. Run the generator
+node generate-imports.js
+
+# 3. Refresh browser and navigate to #/profile
+```
+
+## How It Works
+
+The `generate-imports.js` script:
+1. Scans the `api/`, `components/`, and `pages/` folders
+2. Finds all `.js` and `.jsx` files
+3. Automatically updates `app.html` with the correct `<script>` tags
+4. Maintains the correct loading order
+
+## Benefits
+
+✅ **No manual script tags** - Just create files and run the command  
+✅ **Automatic discovery** - Scans folders for you  
+✅ **Correct order** - Loads modules → API → components → pages  
+✅ **Simple** - One command does everything  
+
+## Tips
+
+- Run `node generate-imports.js` after creating/deleting files
+- The script is safe to run multiple times
+- It preserves your HTML structure
+- Works with both `.js` and `.jsx` files
+
+## Troubleshooting
+
+**Script not found?**
+```bash
+cd template
+node generate-imports.js
+```
+
+**New page not showing?**
+1. Make sure you ran `node generate-imports.js`
+2. Check that your file is in the `pages/` folder
+3. Refresh your browser (hard refresh: Ctrl+Shift+R)
+
+**Want to watch for changes automatically?**
+Install nodemon:
+```bash
+npm install -g nodemon
+nodemon --watch pages --watch components --watch api --exec "node generate-imports.js"
+```
+
+Now every time you create/modify a file, it auto-regenerates!

package/template/docs/GETTING-STARTED.md

@@ -0,0 +1,205 @@
+# Getting Started
+
+## 🎉 Your App is Now Super Clean!
+
+The app now uses an **auto-import system** - you only need to edit one file to add new pages, components, or API routes!
+
+## 📁 Project Structure
+
+```
+template/
+├── app.html              # Main HTML (super clean - only 5 script tags!)
+├── app.config.js         # ⭐ Configure what files to load here
+├── modules/              # Core system modules
+│   ├── router.js         # Routing & rendering
+│   ├── state.js          # State management
+│   ├── api.js            # API system
+│   └── auto-import.js    # Auto-import magic
+├── api/                  # API route handlers
+│   ├── hello.js
+│   └── users.js
+├── components/           # Reusable components
+│   ├── Navbar.jsx
+│   ├── Footer.jsx
+│   └── Counter.jsx
+└── pages/                # Page components
+    ├── Home.jsx
+    ├── About.jsx
+    ├── Contact.jsx
+    ├── test.jsx
+    └── ApiDemo.jsx
+```
+
+## 🚀 Adding New Files
+
+### Add a New Page
+
+1. **Create the page file:**
+```javascript
+// pages/MyNewPage.jsx
+/** @jsx h */
+
+registerPage("mynewpage", MyNewPage);
+
+function MyNewPage() {
+    const [count, setCount] = useState(0);
+    
+    return (
+        <div>
+            <h1>My New Page</h1>
+            <p>Count: {count}</p>
+            <button onClick={() => setCount(count + 1)}>
+                Increment
+            </button>
+        </div>
+    );
+}
+```
+
+2. **Add to config:**
+```javascript
+// app.config.js
+window.APP_CONFIG = {
+    pages: [
+        'pages/Home.jsx',
+        'pages/About.jsx',
+        'pages/MyNewPage.jsx'  // ← Add this line
+    ]
+};
+```
+
+3. **That's it!** Refresh the page and navigate to `#/mynewpage`
+
+### Add a New Component
+
+1. **Create the component:**
+```javascript
+// components/Button.jsx
+/** @jsx h */
+
+function Button({ label, onClick }) {
+    return (
+        <button class="btn btn-primary" onClick={onClick}>
+            {label}
+        </button>
+    );
+}
+```
+
+2. **Add to config:**
+```javascript
+// app.config.js
+window.APP_CONFIG = {
+    components: [
+        'components/Navbar.jsx',
+        'components/Button.jsx'  // ← Add this line
+    ]
+};
+```
+
+3. **Use it in pages:**
+```javascript
+<Button label="Click me" onClick={() => alert('Clicked!')} />
+```
+
+### Add a New API Route
+
+1. **Create the API route:**
+```javascript
+// api/todos.js
+/** @jsx h */
+
+const todos = [];
+
+registerApiRoute('todos', async (req, res) => {
+    if (req.method === 'GET') {
+        return res.status(200).json(todos);
+    }
+    if (req.method === 'POST') {
+        const newTodo = { id: Date.now(), ...req.body };
+        todos.push(newTodo);
+        return res.status(201).json(newTodo);
+    }
+});
+```
+
+2. **Add to config:**
+```javascript
+// app.config.js
+window.APP_CONFIG = {
+    apiRoutes: [
+        'api/hello.js',
+        'api/todos.js'  // ← Add this line
+    ]
+};
+```
+
+3. **Use it:**
+```javascript
+const response = await fetchApi('/api/todos');
+const data = await response.json();
+```
+
+## 🎨 Key Features
+
+### State Management (React-like)
+```javascript
+const [count, setCount] = useState(0);
+const [name, setName] = useState('');
+```
+
+### Routing
+```javascript
+// Register a page
+registerPage("about", AboutPage);
+
+// Navigate
+navigate("about");
+
+// Get current path
+const path = getCurrentPath();
+```
+
+### API Routes
+```javascript
+// Register
+registerApiRoute('users', async (req, res) => {
+    return res.status(200).json({ users: [] });
+});
+
+// Call
+const response = await fetchApi('/api/users');
+```
+
+## 📝 Important Notes
+
+1. **Always use `/** @jsx h */`** at the top of JSX files
+2. **Load order matters** - config → modules → auto-import
+3. **Check console** - auto-import logs what it's loading
+4. **One config file** - `app.config.js` is the only place to add files
+
+## 🔧 Troubleshooting
+
+**Page not loading?**
+- Check if it's added to `app.config.js`
+- Check browser console for errors
+- Make sure file path is correct
+
+**State not working?**
+- Make sure you're using `useState()` not `window.useState()`
+- Check that `modules/state.js` is loaded
+
+**API route not found?**
+- Check if it's added to `app.config.js`
+- Make sure you used `registerApiRoute()`
+- Check the route path matches your `fetchApi()` call
+
+## 🎯 Next Steps
+
+1. Open `app.html` in your browser
+2. Check the console to see auto-import in action
+3. Navigate to different pages
+4. Try the API Demo page at `#/api-demo`
+5. Create your own pages and components!
+
+Enjoy your clean, auto-importing app! 🚀

package/template/docs/QUICK-START.md

@@ -0,0 +1,111 @@
+# Quick Start Guide
+
+## Adding a New Page
+
+1. Create `pages/NewPage.jsx`:
+```javascript
+/** @jsx h */
+
+// Register this page
+registerPage("newpage", NewPage);
+
+function NewPage() {
+    // Use state management
+    const [counter, setCounter] = window.StateManager.useState(0);
+    
+    return (
+        <div>
+            <h1>New Page</h1>
+            <p>Counter: {counter}</p>
+            <button onClick={() => setCounter(counter + 1)}>
+                Increment
+            </button>
+        </div>
+    );
+}
+```
+
+2. That's it! The page will be automatically loaded and available at `#/newpage`
+
+## Adding a New Component
+
+1. Create `components/Button.jsx`:
+```javascript
+/** @jsx h */
+
+// Register this component
+if (window.AutoImport) {
+    window.AutoImport.registerComponent('Button', Button);
+}
+
+function Button({ label, onClick, variant = 'primary' }) {
+    return (
+        <button 
+            class={`btn btn-${variant}`}
+            onClick={onClick}
+        >
+            {label}
+        </button>
+    );
+}
+```
+
+2. Use it in any page:
+```javascript
+// In your page component
+const Button = window.AutoImport.getComponent('Button');
+return <Button label="Click me" onClick={() => alert('Clicked!')} />;
+```
+
+## State Management Examples
+
+### Basic Counter
+```javascript
+const [count, setCount] = window.StateManager.useState(0);
+return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
+```
+
+### Form with Multiple Fields
+```javascript
+const [form, setForm] = window.StateManager.useState({
+    name: '',
+    email: '',
+    message: ''
+});
+
+const handleChange = (field, value) => {
+    setForm({ ...form, [field]: value });
+};
+
+return (
+    <form>
+        <input 
+            value={form.name}
+            onChange={(e) => handleChange('name', e.target.value)}
+        />
+        {/* ... other fields */}
+    </form>
+);
+```
+
+### Global State
+```javascript
+// Set global state
+window.StateManager.setState({ theme: 'dark', user: 'John' });
+
+// Get global state
+const { theme, user } = window.StateManager.getState();
+```
+
+## Tips
+
+1. **State is reactive**: When state changes, components automatically re-render
+2. **No imports needed**: Everything is available via `window.StateManager` and `window.AutoImport`
+3. **Isolation**: Each component's `useState` is isolated to that component
+4. **Global vs Local**: Use `window.StateManager.setState()` for global state, `useState()` for local component state
+
+## Testing
+
+Open `app.html` and navigate to:
+- `#/` (Home) - Shows global state, local state, and reusable components
+- `#/test` - Comprehensive form and state examples