create-aziz-app 3.0.9 → 3.0.11

package/README.md

@@ -22,7 +22,7 @@ Aziz.js gives you the Next.js developer experience without the weight:
 | API routes | ✅ | ✅ |
 | `NextResponse` | ✅ | ✅ |
 | React hooks | ✅ | ✅ |
-| ES module imports | ✅ | ✅ |
+| No imports needed in pages | ✅ | ❌ |
 | `@/` alias | ✅ | ✅ |
 | Live reload | ✅ | ✅ |
 | SSR / SSG | ❌ | ✅ |
@@ -50,7 +50,7 @@ The CLI will ask you:
 
 ```
 my-app/
-├── index.html              ← entry point
+├── index.html
 ├── app/
 │   ├── layout.js           ← root layout
 │   ├── page.js             ← route: /
@@ -76,11 +76,10 @@ my-app/
 
 ## Pages
 
+No imports needed — JSX and all hooks just work.
+
 ```js
 // app/about/page.js  →  /about
-/** @jsx h */
-import { h } from '/_framework/runtime.js';
-
 export default function Page() {
     const [count, setCount] = useState(0);
 
@@ -100,8 +99,6 @@ export default function Page() {
 
 ```js
 // app/layout.js  →  wraps every page
-/** @jsx h */
-import { h } from '/_framework/runtime.js';
 import Navbar from '/components/Navbar.js';
 
 export default function Layout({ children }) {
@@ -120,18 +117,14 @@ export default function Layout({ children }) {
 
 ```js
 // api/users.js  →  /api/users
-const { NextResponse } = require('../modules/next-response');
+const { NextResponse } = require('../_framework/next-response');
 
 async function GET(request) {
-    const { searchParams } = new URL(request.url);
-    const id = searchParams.get('id');
-    // fetch from DB...
     return NextResponse.json({ users: [] });
 }
 
 async function POST(request) {
     const { name, email } = await request.json();
-    // save to DB...
     return NextResponse.json({ created: true }, { status: 201 });
 }
 
@@ -140,39 +133,15 @@ module.exports = { GET, POST };
 
 ---
 
-## Imports
-
-```js
-// Framework
-import { h }        from '/_framework/runtime.js';
-import { navigate } from '/_framework/router.js';
-
-// Absolute paths
-import Navbar from '/components/Navbar.js';
-
-// @/ alias
-import connectDB from '@/lib/db';
-import User      from '@/models/User';
-
-// npm packages (install first, then import)
-import mongoose from 'mongoose';
-import bcrypt   from 'bcryptjs';
-import jwt      from 'jsonwebtoken';
-```
-
----
+## Hooks
 
-## React Hooks
-
-All hooks work exactly like React — no imports needed in pages:
+All React hooks are available globally — no imports needed:
 
 ```js
-const [count, setCount]   = useState(0);
-const [user, setUser]     = useState(null);
+const [count, setCount] = useState(0);
+const [user, setUser]   = useState(null);
 
-useEffect(() => {
-    fetchUser().then(setUser);
-}, []);
+useEffect(() => { fetchUser().then(setUser); }, []);
 
 const doubled = useMemo(() => count * 2, [count]);
 const ref     = useRef(null);
@@ -191,30 +160,41 @@ const { data, loading, error } = useFetch('/api/users');
 ## Navigation
 
 ```js
-import { navigate, Link, useRouter, useParams, useSearchParams } from '/_framework/router.js';
-
 // Programmatic
 navigate('/about');
 
-// Component
+// Link component
 <Link href="/about">About</Link>
 
-// Hook
+// Hooks
 const { pathname, push, back } = useRouter();
-
-// Dynamic route params  (/blog/[slug])
 const { slug } = useParams();
+const q = useSearchParams().get('q');
+```
+
+---
+
+## Imports
 
-// Query string  (/search?q=hello)
-const searchParams = useSearchParams();
-const q = searchParams.get('q');
+```js
+// Absolute paths
+import Navbar    from '/components/Navbar.js';
+import connectDB from '/lib/db.js';
+
+// @/ alias
+import User from '@/models/User';
+
+// npm packages (install first, then import normally)
+import mongoose from 'mongoose';
+import bcrypt   from 'bcryptjs';
+import jwt      from 'jsonwebtoken';
 ```
 
 ---
 
 ## Full docs
 
-See [README.md](template/README.md) inside your generated project for the complete guide.
+See the [full README](template/README.md) for complete guides on hooks, API routes, database, authentication, and more.
 
 ---
 
@@ -224,4 +204,4 @@ See [README.md](template/README.md) inside your generated project for the comple
 
 ## License
 
-AZIZ
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-aziz-app",
-  "version": "3.0.9",
+  "version": "3.0.11",
   "description": "Create Aziz.js apps — lightweight Next.js clone with file-based routing, React hooks, and API routes",
   "keywords": [
     "aziz.js",

package/template/README.md

@@ -58,13 +58,10 @@ my-app/
 
 ## Pages
 
-Every `page.js` inside `app/` becomes a route. Export a default function called `Page`.
+Every `page.js` inside `app/` becomes a route. Export a default function — no imports needed.
 
 ```js
 // app/about/page.js  →  route: /about
-/** @jsx h */
-import { h } from '/_framework/runtime.js';
-
 export default function Page() {
     return (
         <div>
@@ -87,19 +84,15 @@ export default function Page() {
 
 ### Creating a new page
 
-Just create the file — no registration, no imports to add:
+Just create the file — no registration needed:
 
 ```bash
-# Creates route /dashboard
 mkdir app/dashboard
 touch app/dashboard/page.js
 ```
 
 ```js
-// app/dashboard/page.js
-/** @jsx h */
-import { h } from '/_framework/runtime.js';
-
+// app/dashboard/page.js  →  route: /dashboard
 export default function Page() {
     return <h1>Dashboard</h1>;
 }
@@ -109,12 +102,10 @@ export default function Page() {
 
 ## Layouts
 
-`layout.js` wraps all pages at the same level and below. The root `app/layout.js` wraps every page in your app.
+`layout.js` wraps all pages at the same level and below. The root `app/layout.js` wraps every page.
 
 ```js
 // app/layout.js
-/** @jsx h */
-import { h } from '/_framework/runtime.js';
 import Navbar from '/components/Navbar.js';
 import Footer from '/components/Footer.js';
 
@@ -133,8 +124,6 @@ export default function Layout({ children }) {
 
 ```js
 // app/dashboard/layout.js  — wraps all /dashboard/* pages
-/** @jsx h */
-import { h } from '/_framework/runtime.js';
 import Sidebar from '/components/Sidebar.js';
 
 export default function Layout({ children }) {
@@ -154,8 +143,6 @@ export default function Layout({ children }) {
 ### navigate()
 
 ```js
-import { navigate } from '/_framework/router.js';
-
 navigate('/about');
 navigate('/blog/my-post');
 navigate('/');
@@ -164,8 +151,6 @@ navigate('/');
 ### Link component
 
 ```js
-import { Link } from '/_framework/router.js';
-
 <Link href="/about">About</Link>
 <Link href="/blog/hello" className="nav-link">Blog Post</Link>
 ```
@@ -173,8 +158,6 @@ import { Link } from '/_framework/router.js';
 ### useRouter hook
 
 ```js
-import { useRouter } from '/_framework/router.js';
-
 export default function Page() {
     const router = useRouter();
 
@@ -192,8 +175,6 @@ export default function Page() {
 
 ```js
 // app/blog/[slug]/page.js
-import { useParams } from '/_framework/router.js';
-
 export default function Page() {
     const { slug } = useParams();
     return <h1>Post: {slug}</h1>;
@@ -204,8 +185,6 @@ export default function Page() {
 
 ```js
 // URL: /search?q=hello&page=2
-import { useSearchParams } from '/_framework/router.js';
-
 export default function Page() {
     const searchParams = useSearchParams();
     const query = searchParams.get('q');    // "hello"
@@ -219,7 +198,7 @@ export default function Page() {
 
 ## React Hooks
 
-All hooks work exactly like React — no imports needed in pages.
+All hooks work exactly like React — **no imports needed**.
 
 ### useState
 
@@ -228,24 +207,20 @@ const [count, setCount] = useState(0);
 const [user, setUser]   = useState(null);
 const [items, setItems] = useState([]);
 
-// Functional update
 setCount(prev => prev + 1);
 ```
 
 ### useEffect
 
 ```js
-// Run on mount
 useEffect(() => {
     console.log('mounted');
 }, []);
 
-// Run when value changes
 useEffect(() => {
     document.title = `Count: ${count}`;
 }, [count]);
 
-// Cleanup
 useEffect(() => {
     const timer = setInterval(() => tick(), 1000);
     return () => clearInterval(timer);
@@ -255,7 +230,7 @@ useEffect(() => {
 ### useMemo
 
 ```js
-const expensiveResult = useMemo(() => {
+const total = useMemo(() => {
     return items.filter(i => i.active).length;
 }, [items]);
 ```
@@ -273,10 +248,8 @@ const handleClick = useCallback(() => {
 ```js
 const inputRef = useRef(null);
 
-// In JSX
 <input ref={inputRef} type="text" />
 
-// Access DOM element
 inputRef.current.focus();
 ```
 
@@ -295,13 +268,11 @@ const reducer = (state, action) => {
 const [state, dispatch] = useReducer(reducer, { count: 0 });
 
 dispatch({ type: 'increment' });
-dispatch({ type: 'reset' });
 ```
 
 ### useContext
 
 ```js
-// Create context
 const ThemeContext = createContext('light');
 
 // Provide value (in layout or parent)
@@ -309,14 +280,13 @@ const ThemeContext = createContext('light');
     {children}
 </ThemeContext.Provider>
 
-// Consume in any child
+// Consume anywhere
 const theme = useContext(ThemeContext);
 ```
 
 ### useLocalStorage
 
 ```js
-// Persists across page refreshes
 const [name, setName] = useLocalStorage('userName', '');
 ```
 
@@ -341,12 +311,11 @@ API routes run on the **server** (Node.js). Every `.js` file in `api/` becomes a
 
 ```js
 // api/hello.js  →  GET /api/hello
-const { NextResponse } = require('../modules/next-response');
+const { NextResponse } = require('../_framework/next-response');
 
 async function GET(request) {
     const { searchParams } = new URL(request.url);
     const name = searchParams.get('name') || 'World';
-
     return NextResponse.json({ message: `Hello, ${name}!` });
 }
 
@@ -357,139 +326,70 @@ module.exports = { GET };
 
 ```js
 // api/users.js  →  /api/users
-const { NextResponse } = require('../modules/next-response');
+const { NextResponse } = require('../_framework/next-response');
 
 async function GET(request) {
-    const { searchParams } = new URL(request.url);
-    const id = searchParams.get('id');
-
-    if (id) {
-        const user = await User.findById(id);
-        if (!user) return NextResponse.json({ error: 'Not found' }, { status: 404 });
-        return NextResponse.json(user);
-    }
-
     const users = await User.find();
     return NextResponse.json(users);
 }
 
 async function POST(request) {
-    const body = await request.json();
-    const { name, email } = body;
-
+    const { name, email } = await request.json();
     if (!name || !email) {
         return NextResponse.json({ error: 'Name and email required' }, { status: 400 });
     }
-
     const user = await User.create({ name, email });
     return NextResponse.json(user, { status: 201 });
 }
 
 async function DELETE(request) {
     const { searchParams } = new URL(request.url);
-    const id = searchParams.get('id');
-
-    await User.findByIdAndDelete(id);
+    await User.findByIdAndDelete(searchParams.get('id'));
     return NextResponse.json({ message: 'Deleted' });
 }
 
 module.exports = { GET, POST, DELETE };
 ```
 
-### Request object
-
-```js
-async function POST(request) {
-    // Parse body
-    const body = await request.json();
-
-    // Query params
-    const { searchParams } = new URL(request.url);
-    const page = searchParams.get('page');
-
-    // Headers
-    const token = request.headers.authorization;
-
-    // Method
-    console.log(request.method); // "POST"
-}
-```
-
 ### NextResponse
 
 ```js
-// JSON response
 return NextResponse.json({ data: 'value' });
-
-// With status code
 return NextResponse.json({ error: 'Not found' }, { status: 404 });
-
-// With custom headers
-return NextResponse.json(data, {
-    status: 200,
-    headers: { 'X-Custom': 'value' }
-});
-
-// Redirect
 return NextResponse.redirect('/login');
-
-// Plain text
 return NextResponse.text('Hello');
 ```
 
-### HTTP status codes
-
-| Code | Meaning |
-|------|---------|
-| `200` | OK |
-| `201` | Created |
-| `400` | Bad Request |
-| `401` | Unauthorized |
-| `403` | Forbidden |
-| `404` | Not Found |
-| `409` | Conflict |
-| `500` | Server Error |
-
 ---
 
 ## Imports
 
-Use ES module `import` statements anywhere. The dev server resolves everything automatically.
-
-### Framework imports
+### Components and pages — no imports needed for JSX or hooks
 
 ```js
-import { h }                          from '/_framework/runtime.js';
-import { navigate, Link, useRouter }  from '/_framework/router.js';
+// app/dashboard/page.js
+export default function Page() {
+    const [count, setCount] = useState(0); // hooks are global
+    return <h1>Count: {count}</h1>;        // JSX works automatically
+}
 ```
 
-### Absolute path imports
+### Importing other files
 
 ```js
-import Navbar   from '/components/Navbar.js';
+// Absolute path
+import Navbar    from '/components/Navbar.js';
 import connectDB from '/lib/db.js';
-import User     from '/models/User.js';
-```
-
-### @/ alias (same as absolute)
+import User      from '/models/User.js';
 
-```js
+// @/ alias (same as absolute)
 import connectDB from '@/lib/db';
 import User      from '@/models/User';
-import Button    from '@/components/Button';
-```
 
-### npm packages (bare imports)
-
-```js
-// Install first: npm install mongoose
+// npm packages (install first: npm install mongoose)
 import mongoose from 'mongoose';
-
-// Install first: npm install bcryptjs
-import bcrypt from 'bcryptjs';
-
-// Install first: npm install jsonwebtoken
-import jwt from 'jsonwebtoken';
+import bcrypt   from 'bcryptjs';
+import jwt      from 'jsonwebtoken';
 ```
 
 The dev server resolves bare imports from `node_modules` automatically — no bundler config needed.
@@ -498,19 +398,13 @@ The dev server resolves bare imports from `node_modules` automatically — no bu
 
 ## Components
 
-Components are just functions that return JSX. Always add `/** @jsx h */` at the top.
+Components are just functions that return JSX — no pragma or imports needed.
 
 ```js
 // components/Button.js
-/** @jsx h */
-import { h } from '/_framework/runtime.js';
-
 export default function Button({ onClick, children, variant = 'primary' }) {
     return (
-        <button
-            class={`btn btn-${variant}`}
-            onClick={onClick}
-        >
+        <button class={`btn btn-${variant}`} onClick={onClick}>
             {children}
         </button>
     );
@@ -521,35 +415,7 @@ export default function Button({ onClick, children, variant = 'primary' }) {
 // Using the component
 import Button from '/components/Button.js';
 
-<Button onClick={() => alert('hi')} variant="danger">
-    Delete
-</Button>
-```
-
-### Props
-
-```js
-// Strings
-<Component title="Hello" />
-
-// Numbers
-<Component count={42} />
-
-// Booleans
-<Component disabled={true} />
-<Component disabled />
-
-// Objects / arrays
-<Component style={{ color: 'red' }} />
-<Component items={[1, 2, 3]} />
-
-// Functions
-<Component onClick={() => doSomething()} />
-
-// Children
-<Component>
-    <p>Child content</p>
-</Component>
+<Button onClick={() => alert('hi')} variant="danger">Delete</Button>
 ```
 
 ### JSX rules
@@ -563,7 +429,6 @@ import Button from '/components/Button.js';
 
 // Self-closing tags need /
 <input type="text" />
-<br />
 
 // Expressions in {}
 <p>{count > 0 ? 'positive' : 'zero'}</p>
@@ -573,7 +438,6 @@ import Button from '/components/Button.js';
 
 // Conditional rendering
 {isLoggedIn && <Dashboard />}
-{error ? <Error msg={error} /> : <Content />}
 ```
 
 ---
@@ -596,7 +460,6 @@ export default async function connectDB() {
     if (isConnected) return;
     await mongoose.connect(process.env.MONGODB_URI);
     isConnected = true;
-    console.log('✅ MongoDB connected');
 }
 ```
 
@@ -605,97 +468,41 @@ export default async function connectDB() {
 import mongoose from 'mongoose';
 
 const userSchema = new mongoose.Schema({
-    name:  { type: String, required: true },
-    email: { type: String, required: true, unique: true },
+    name:     { type: String, required: true },
+    email:    { type: String, required: true, unique: true },
     password: { type: String, required: true },
-    role:  { type: String, enum: ['user', 'admin'], default: 'user' }
 }, { timestamps: true });
 
 export default mongoose.models.User || mongoose.model('User', userSchema);
 ```
 
-```js
-// api/users.js
-const { NextResponse } = require('../modules/next-response');
-const connectDB = require('../lib/db');
-const User = require('../models/User');
-
-async function GET(request) {
-    await connectDB();
-
-    const { searchParams } = new URL(request.url);
-    const email = searchParams.get('email');
-
-    if (email) {
-        const user = await User.findOne({ email }).select('-password');
-        if (!user) return NextResponse.json({ error: 'User not found' }, { status: 404 });
-        return NextResponse.json(user);
-    }
-
-    const users = await User.find().select('-password');
-    return NextResponse.json(users);
-}
-
-module.exports = { GET };
-```
-
 ### Environment variables
 
-Create a `.env` file in your project root:
+Create `.env` in your project root:
 
 ```bash
 MONGODB_URI=mongodb://localhost:27017/myapp
 JWT_SECRET=your_secret_key
-API_KEY=your_api_key
-```
-
-Access in API routes:
-
-```js
-const uri    = process.env.MONGODB_URI;
-const secret = process.env.JWT_SECRET;
 ```
 
-> **Note:** `.env` files are not loaded automatically. Install `dotenv` and add `require('dotenv').config()` at the top of `scripts/dev-server.js`, or set variables in your terminal before running `npm run dev`.
+> Install `dotenv` and add `require('dotenv').config()` at the top of `scripts/dev-server.js` to load `.env` automatically.
 
 ---
 
 ## Calling APIs from Pages
 
 ```js
-// Simple fetch
-const response = await fetch('/api/users');
-const users = await response.json();
+// GET
+const res = await fetch('/api/users');
+const users = await res.json();
 
-// POST request
-const response = await fetch('/api/users', {
+// POST
+const res = await fetch('/api/users', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ name: 'Aziz', email: 'aziz@example.com' })
 });
-const result = await response.json();
-
-// With error handling
-async function createUser(data) {
-    try {
-        const res = await fetch('/api/createUser', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(data)
-        });
-
-        const result = await res.json();
-
-        if (!res.ok) {
-            throw new Error(result.error || 'Request failed');
-        }
-
-        return result;
-    } catch (err) {
-        console.error(err);
-        throw err;
-    }
-}
+const result = await res.json();
 ```
 
 ### Full login example
@@ -742,16 +549,16 @@ export default function Page() {
             <form onSubmit={handleLogin}>
                 <input
                     type="email"
+                    placeholder="Email"
                     value={email}
                     onInput={(e) => setEmail(e.target.value)}
-                    placeholder="Email"
                     required
                 />
                 <input
                     type="password"
+                    placeholder="Password"
                     value={password}
                     onInput={(e) => setPassword(e.target.value)}
-                    placeholder="Password"
                     required
                 />
                 {error && <p style={{ color: 'red' }}>{error}</p>}
@@ -770,21 +577,14 @@ export default function Page() {
 
 ### globals.css
 
-Edit `styles/globals.css` for your global styles. Built-in utility classes:
+Edit `styles/globals.css` for global styles. Built-in utility classes:
 
 ```css
-/* Cards */
-.card { background: white; border-radius: 10px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 20px; }
-
-/* Buttons */
+.card        { background: white; border-radius: 10px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 20px; }
 .btn         { display: inline-block; padding: 10px 22px; border: none; border-radius: 8px; cursor: pointer; }
 .btn-primary { background: #61dafb; color: #282c34; font-weight: bold; }
 .btn-danger  { background: #ff6b6b; color: white; }
 .btn-grey    { background: #ccc; color: #333; }
-
-/* Counter */
-.count-display   { font-size: 64px; font-weight: bold; text-align: center; }
-.counter-actions { display: flex; gap: 12px; justify-content: center; }
 ```
 
 ### Inline styles
@@ -797,27 +597,12 @@ Edit `styles/globals.css` for your global styles. Built-in utility classes:
 
 ### Tailwind CSS
 
-When creating your app, choose Tailwind CSS in the setup wizard:
-
-```bash
-npx create-aziz-app my-app
-# Choose: Tailwind CSS
-```
-
-Or add it manually to `index.html`:
+Choose Tailwind during project creation, or add it manually to `index.html`:
 
 ```html
 <script src="https://cdn.tailwindcss.com"></script>
 ```
 
-Then use Tailwind classes directly:
-
-```js
-<div class="flex items-center gap-4 p-6 bg-white rounded-lg shadow">
-    <h1 class="text-2xl font-bold text-gray-800">Hello</h1>
-</div>
-```
-
 ---
 
 ## Dev Server
@@ -826,37 +611,16 @@ Then use Tailwind classes directly:
 npm run dev
 ```
 
-The dev server:
 - Serves your app at `http://localhost:3000`
-- Watches `app/`, `api/`, `components/`, `lib/`, `models/`, `styles/` for changes
-- Reloads the browser automatically on save (WebSocket live reload)
+- Watches all source folders and live-reloads on save
 - Resolves bare imports from `node_modules`
-- Loads API routes from `api/`
 - Hot-reloads API routes when changed
 
-### Custom port
-
 ```bash
+# Custom port
 PORT=4000 npm run dev
 ```
 
-Or set it during project creation:
-
-```bash
-npx create-aziz-app my-app
-# Enter port: 4000
-```
-
-### Live reload indicator
-
-A small indicator appears in the bottom-right corner:
-
-- 🟢 **Live Reload** — connected, watching for changes
-- 🔵 **Reloading...** — change detected, refreshing
-- 🟠 **Disconnected** — reconnecting...
-
-Click it to manually reload.
-
 ---
 
 ## Comparison with Next.js
@@ -870,13 +634,12 @@ Click it to manually reload.
 | Catch-all `[...slug]` | ✅ | ✅ |
 | API routes | ✅ | ✅ |
 | `NextResponse` | ✅ | ✅ |
-| Named HTTP exports | ✅ | ✅ |
 | React hooks | ✅ | ✅ |
+| No imports needed in pages | ✅ | ❌ |
 | ES module imports | ✅ | ✅ |
 | `@/` path alias | ✅ | ✅ |
 | Live reload | ✅ | ✅ |
 | SSR / SSG | ❌ | ✅ |
-| Image optimization | ❌ | ✅ |
 | TypeScript | ❌ | ✅ |
 | Bundle size | **~50KB** | ~400KB+ |
 | Dependencies | **0** | 20+ |
@@ -884,53 +647,6 @@ Click it to manually reload.
 
 ---
 
-## FAQ
-
-**Do I need to register pages manually?**
-No. Just create `app/your-route/page.js` and it becomes a route automatically.
-
-**Can I use npm packages?**
-Yes. Run `npm install package-name` and import it normally:
-```js
-import mongoose from 'mongoose';
-```
-
-**Where do I put shared utilities?**
-In `lib/`:
-```js
-// lib/utils.js
-export function formatDate(date) {
-    return new Date(date).toLocaleDateString();
-}
-```
-
-**How do I share state between pages?**
-Use `useLocalStorage` for persistence, or create a context:
-```js
-const AuthContext = createContext(null);
-```
-
-**Can I use this in production?**
-Aziz.js is designed for development and learning. For production apps with SEO requirements, consider Next.js. For simple SPAs and internal tools, Aziz.js works great.
-
-**How do I add authentication?**
-```js
-// api/login.js
-const { NextResponse } = require('../modules/next-response');
-const jwt = require('jsonwebtoken'); // npm install jsonwebtoken
-
-async function POST(request) {
-    const { email, password } = await request.json();
-    // verify credentials...
-    const token = jwt.sign({ userId: user._id }, process.env.JWT_SECRET);
-    return NextResponse.json({ token });
-}
-
-module.exports = { POST };
-```
-
----
-
 ## License
 
 MIT

package/template/_framework/router.js

@@ -271,7 +271,15 @@ export const router = {
             };
         }
 
-        // Render
+        // Render — preserve focus so inputs don't lose cursor on state update
+        const activeEl = document.activeElement;
+        const activeId = activeEl?.id || null;
+        const activeName = activeEl?.getAttribute?.('name') || null;
+        const activePlaceholder = activeEl?.getAttribute?.('placeholder') || null;
+        const activeTag = activeEl?.tagName || null;
+        const activeCursorStart = activeEl?.selectionStart ?? null;
+        const activeCursorEnd = activeEl?.selectionEnd ?? null;
+
         root.innerHTML = '';
         const tree = content();
         if (Array.isArray(tree)) {
@@ -281,6 +289,24 @@ export const router = {
         } else if (tree instanceof Node) {
             root.appendChild(tree);
         }
+
+        // Restore focus to the previously active input
+        let restored = null;
+        if (activeId) {
+            restored = root.querySelector(`#${CSS.escape(activeId)}`);
+        }
+        if (!restored && activeName) {
+            restored = root.querySelector(`[name="${activeName}"]`);
+        }
+        if (!restored && activePlaceholder && activeTag) {
+            restored = root.querySelector(`${activeTag.toLowerCase()}[placeholder="${activePlaceholder}"]`);
+        }
+        if (restored && typeof restored.focus === 'function') {
+            restored.focus();
+            if (activeCursorStart !== null && restored.setSelectionRange) {
+                try { restored.setSelectionRange(activeCursorStart, activeCursorEnd); } catch {}
+            }
+        }
     }
 };
 

package/template/app/about/page.js

@@ -1,6 +1,3 @@
-/** @jsx h */
-import { h } from '/_framework/runtime.js';
-
 // About page — route: /about
 export default function Page() {
     return (

package/template/app/layout.js

@@ -1,7 +1,6 @@
-/** @jsx h */
-import { h } from '/_framework/runtime.js';
 import Navbar from '/components/Navbar.js';
 import Footer from '/components/Footer.js';
+
 // Root layout — wraps every page (like Next.js app/layout.js)
 export default function Layout({ children }) {
     return (
@@ -15,7 +14,6 @@ export default function Layout({ children }) {
     );
 }
 
-// Optional: export metadata
 export const metadata = {
     title: 'My App',
     description: 'Built with Aziz.js'

package/template/app/page.js

@@ -1,6 +1,3 @@
-/** @jsx h */
-import { h } from '/_framework/runtime.js';
-
 // Home page — route: /
 export default function Page() {
     const [count, setCount] = useState(0);
@@ -40,7 +37,7 @@ export default function Page() {
                 <h2>Import Anything</h2>
                 <p>
                     Use <code>import</code> statements just like Next.js.
-                    The dev server resolves bare imports from <code>node_modules</code>.
+                    The dev server resolves bare imports from <code>node_modules</code> automatically.
                 </p>
                 <pre style={{ background: '#282c34', color: '#61dafb', padding: '16px', borderRadius: '8px', overflow: 'auto', fontSize: '13px' }}>
 {`import mongoose from 'mongoose';

package/template/app/test/page.js

@@ -1,11 +1,8 @@
-/** @jsx h */
-import { h } from '/_framework/runtime.js';
-
 // Test page — route: /test
 export default function Page() {
-    const [count, setCount]   = useState(0);
-    const [name, setName]     = useState('');
-    const [email, setEmail]   = useState('');
+    const [count, setCount] = useState(0);
+    const [name, setName]   = useState('');
+    const [email, setEmail] = useState('');
 
     const handleSubmit = (e) => {
         e.preventDefault();
@@ -30,15 +27,15 @@ export default function Page() {
                 <form onSubmit={handleSubmit}>
                     <input
                         type="text"
+                        placeholder="Your name"
                         value={name}
                         onInput={(e) => setName(e.target.value)}
-                        placeholder="Your name"
                     />
                     <input
                         type="email"
+                        placeholder="Your email"
                         value={email}
                         onInput={(e) => setEmail(e.target.value)}
-                        placeholder="Your email"
                     />
                     <button type="submit" class="btn btn-primary">Submit</button>
                 </form>

package/template/components/Footer.js

@@ -1,6 +1,3 @@
-/** @jsx h */
-import { h } from '/_framework/runtime.js';
-
 export default function Footer() {
     return (
         <footer>

package/template/components/Navbar.js

@@ -1,15 +1,12 @@
-/** @jsx h */
-import { h } from '/_framework/runtime.js';
-
-// navigate and useRouter are globals set by boot.js
+// navigate and useRouter are globals — no imports needed
 export default function Navbar() {
     const { pathname } = useRouter();
 
     const links = [
-        { href: '/',         label: 'Home'     },
-        { href: '/about',    label: 'About'    },
-        { href: '/test',     label: 'Test'     },
-        { href: '/contact',  label: 'Contact'  },
+        { href: '/',        label: 'Home'    },
+        { href: '/about',   label: 'About'   },
+        { href: '/test',    label: 'Test'    },
+        { href: '/contact', label: 'Contact' },
     ];
 
     return (