create-aziz-app 2.0.14 → 3.0.0

package/template/docs/NEXTJS-COMPARISON.md

@@ -1,473 +0,0 @@
-# Next.js Comparison
-
-## Overview
-
-Aziz App is a **lightweight Next.js clone** with all the core benefits but zero dependencies and minimal complexity.
-
-## Feature Comparison
-
-| Feature | Aziz App | Next.js | Notes |
-|---------|----------|---------|-------|
-| **React Hooks** | ✅ | ✅ | useState, useEffect, useMemo, useCallback, useRef, useReducer |
-| **File-based Routing** | ✅ | ✅ | pages/ folder → routes |
-| **API Routes** | ✅ | ✅ | api/ folder → endpoints |
-| **Server-side API** | ✅ | ✅ | Real Node.js backend |
-| **Hot Reload** | ✅ | ✅ | WebSocket-based |
-| **Auto Import** | ✅ | ✅ | No manual imports needed |
-| **Zero Config** | ✅ | ❌ | No config files needed |
-| **Bundle Size** | **~50KB** | ~300KB+ | 6x smaller! |
-| **Dependencies** | **0** | 20+ | No node_modules bloat |
-| **Build Time** | **Instant** | Slow | No build step |
-| **SSR** | ❌ | ✅ | Client-side only |
-| **SSG** | ❌ | ✅ | Client-side only |
-| **Image Optimization** | ❌ | ✅ | Use CDN instead |
-| **TypeScript** | ❌ | ✅ | Pure JavaScript |
-| **Middleware** | ❌ | ✅ | Keep it simple |
-
-## React Hooks - Identical API
-
-### useState
-
-```javascript
-// Next.js
-import { useState } from 'react';
-const [count, setCount] = useState(0);
-
-// Aziz App - EXACTLY THE SAME!
-const [count, setCount] = useState(0);
-```
-
-### useEffect
-
-```javascript
-// Next.js
-import { useEffect } from 'react';
-useEffect(() => {
-    console.log('Mounted!');
-    return () => console.log('Cleanup!');
-}, [dependency]);
-
-// Aziz App - EXACTLY THE SAME!
-useEffect(() => {
-    console.log('Mounted!');
-    return () => console.log('Cleanup!');
-}, [dependency]);
-```
-
-### useMemo
-
-```javascript
-// Next.js
-import { useMemo } from 'react';
-const value = useMemo(() => expensiveCalc(), [dep]);
-
-// Aziz App - EXACTLY THE SAME!
-const value = useMemo(() => expensiveCalc(), [dep]);
-```
-
-### useCallback
-
-```javascript
-// Next.js
-import { useCallback } from 'react';
-const callback = useCallback(() => doSomething(), [dep]);
-
-// Aziz App - EXACTLY THE SAME!
-const callback = useCallback(() => doSomething(), [dep]);
-```
-
-### useRef
-
-```javascript
-// Next.js
-import { useRef } from 'react';
-const ref = useRef(null);
-
-// Aziz App - EXACTLY THE SAME!
-const ref = useRef(null);
-```
-
-### useReducer
-
-```javascript
-// Next.js
-import { useReducer } from 'react';
-const [state, dispatch] = useReducer(reducer, initialState);
-
-// Aziz App - EXACTLY THE SAME!
-const [state, dispatch] = useReducer(reducer, initialState);
-```
-
-## API Routes - Identical API
-
-### Basic Route
-
-```javascript
-// Next.js (pages/api/hello.js)
-export default async function handler(req, res) {
-    res.status(200).json({ message: 'Hello' });
-}
-
-// Aziz App (api/hello.js) - EXACTLY THE SAME!
-export default async function handler(req, res) {
-    res.status(200).json({ message: 'Hello' });
-}
-```
-
-### Request Object
-
-```javascript
-// Both Next.js and Aziz App
-{
-    method: 'GET' | 'POST' | 'PUT' | 'DELETE',
-    body: {},      // Parsed JSON
-    query: {},     // URL parameters
-    headers: {},   // Request headers
-    url: string    // Full URL
-}
-```
-
-### Response Methods
-
-```javascript
-// Both Next.js and Aziz App
-res.status(200)                    // Set status
-res.json({ data: 'value' })        // Send JSON
-res.send('text')                   // Send text
-res.setHeader('X-Custom', 'value') // Set header
-```
-
-### CRUD Example
-
-```javascript
-// Works identically in both!
-export default async function handler(req, res) {
-    switch (req.method) {
-        case 'GET':
-            return res.status(200).json({ users: [] });
-        case 'POST':
-            return res.status(201).json({ created: true });
-        case 'PUT':
-            return res.status(200).json({ updated: true });
-        case 'DELETE':
-            return res.status(200).json({ deleted: true });
-        default:
-            return res.status(405).json({ error: 'Method not allowed' });
-    }
-}
-```
-
-## File-based Routing
-
-### Pages
-
-```
-// Next.js
-pages/
-├── index.js      → /
-├── about.js      → /about
-└── contact.js    → /contact
-
-// Aziz App - Same concept!
-pages/
-├── Home.jsx      → #/home
-├── About.jsx     → #/about
-└── Contact.jsx   → #/contact
-```
-
-### Auto-Registration
-
-```javascript
-// Next.js - Automatic
-// Just create the file
-
-// Aziz App - Automatic too!
-// Just name your function: AboutPage()
-function AboutPage() {
-    return <div><h1>About</h1></div>;
-}
-```
-
-## Data Fetching
-
-### Client-side Fetching
-
-```javascript
-// Next.js
-import { useState, useEffect } from 'react';
-
-function Page() {
-    const [data, setData] = useState(null);
-    
-    useEffect(() => {
-        fetch('/api/users')
-            .then(res => res.json())
-            .then(setData);
-    }, []);
-    
-    return <div>{data?.message}</div>;
-}
-
-// Aziz App - EXACTLY THE SAME!
-function Page() {
-    const [data, setData] = useState(null);
-    
-    useEffect(() => {
-        fetch('/api/users')
-            .then(res => res.json())
-            .then(setData);
-    }, []);
-    
-    return <div>{data?.message}</div>;
-}
-```
-
-### Custom Hook
-
-```javascript
-// Both Next.js and Aziz App
-function useFetch(url) {
-    const [data, setData] = useState(null);
-    const [loading, setLoading] = useState(true);
-    
-    useEffect(() => {
-        fetch(url)
-            .then(res => res.json())
-            .then(data => {
-                setData(data);
-                setLoading(false);
-            });
-    }, [url]);
-    
-    return { data, loading };
-}
-```
-
-## JSX Syntax
-
-### Components
-
-```jsx
-// Next.js
-export default function Button({ onClick, children }) {
-    return <button onClick={onClick}>{children}</button>;
-}
-
-// Aziz App - Same JSX!
-function Button({ onClick, children }) {
-    return <button onClick={onClick}>{children}</button>;
-}
-```
-
-### Props
-
-```jsx
-// Both support the same props
-<div 
-    class="container"
-    style={{ color: 'red' }}
-    onClick={() => alert('Hi')}
->
-    Content
-</div>
-```
-
-## Development Experience
-
-### Hot Reload
-
-```
-// Next.js
-1. Save file
-2. Fast Refresh
-3. State preserved
-
-// Aziz App
-1. Save file
-2. WebSocket reload
-3. Full page reload (state reset)
-```
-
-### Error Messages
-
-```
-// Next.js
-- Detailed error overlay
-- Stack traces
-- Suggestions
-
-// Aziz App
-- Browser console errors
-- Simpler debugging
-- Less magic
-```
-
-## When to Use Each
-
-### Use Aziz App When:
-
-✅ Building simple SPAs
-✅ Learning React concepts
-✅ Prototyping quickly
-✅ Want zero dependencies
-✅ Don't need SSR/SSG
-✅ Want instant startup
-✅ Prefer simplicity
-
-### Use Next.js When:
-
-✅ Need SEO (SSR/SSG)
-✅ Building large apps
-✅ Need image optimization
-✅ Want TypeScript
-✅ Need middleware
-✅ Want edge functions
-✅ Building production apps
-
-## Migration Path
-
-### From Aziz App to Next.js
-
-1. **Pages** - Rename files, adjust exports
-2. **API Routes** - Copy as-is (same API!)
-3. **Hooks** - No changes needed (same API!)
-4. **Components** - Minor adjustments
-5. **Styling** - Add CSS modules if needed
-
-### From Next.js to Aziz App
-
-1. **Remove SSR/SSG** - Convert to client-side
-2. **Pages** - Adjust file names
-3. **API Routes** - Copy as-is (same API!)
-4. **Hooks** - No changes needed (same API!)
-5. **Remove dependencies** - Delete node_modules
-
-## Performance
-
-### Bundle Size
-
-```
-Next.js Production Build:
-- Framework: ~300KB
-- Runtime: ~100KB
-- Total: ~400KB+
-
-Aziz App:
-- Framework: ~50KB
-- Runtime: 0KB (browser native)
-- Total: ~50KB
-```
-
-### Startup Time
-
-```
-Next.js:
-- npm install: 2-5 minutes
-- npm run dev: 10-30 seconds
-- First load: 2-5 seconds
-
-Aziz App:
-- npm install: 5 seconds
-- npm run dev: <1 second
-- First load: <1 second
-```
-
-### Build Time
-
-```
-Next.js:
-- Development: 10-30 seconds
-- Production: 1-5 minutes
-
-Aziz App:
-- Development: Instant
-- Production: No build needed
-```
-
-## Code Examples
-
-### Counter Component
-
-```jsx
-// Works identically in both!
-function Counter() {
-    const [count, setCount] = useState(0);
-    
-    return (
-        <div>
-            <p>Count: {count}</p>
-            <button onClick={() => setCount(count + 1)}>
-                Increment
-            </button>
-        </div>
-    );
-}
-```
-
-### Form with Validation
-
-```jsx
-// Works identically in both!
-function ContactForm() {
-    const [name, setName] = useState('');
-    const [email, setEmail] = useState('');
-    const [error, setError] = useState('');
-    
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        
-        if (!name || !email) {
-            setError('All fields required');
-            return;
-        }
-        
-        const res = await fetch('/api/contact', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ name, email })
-        });
-        
-        if (res.ok) {
-            alert('Sent!');
-        }
-    };
-    
-    return (
-        <form onSubmit={handleSubmit}>
-            <input 
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="Name"
-            />
-            <input 
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                placeholder="Email"
-            />
-            {error && <p>{error}</p>}
-            <button type="submit">Submit</button>
-        </form>
-    );
-}
-```
-
-## Summary
-
-Aziz App is a **lightweight Next.js clone** that provides:
-
-- ✅ **Same React Hooks API** - useState, useEffect, etc.
-- ✅ **Same API Routes** - Identical req/res objects
-- ✅ **Same JSX Syntax** - Write components the same way
-- ✅ **Same Development Flow** - File-based routing, hot reload
-- ✅ **Zero Dependencies** - No node_modules bloat
-- ✅ **Instant Startup** - No build step
-- ✅ **6x Smaller** - Minimal bundle size
-
-Perfect for:
-- 🎓 Learning React/Next.js concepts
-- 🚀 Rapid prototyping
-- 📱 Simple SPAs
-- 🎨 Portfolio sites
-- 🧪 Experiments
-
-**It's Next.js, but lightweight!** 🎉

package/template/docs/QUICK-START.md

@@ -1,111 +0,0 @@
-# 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