create-aziz-app 3.1.2 → 3.1.3

package/template/README.md

@@ -1,402 +1,402 @@
-# ⚡ Aziz.js
-
-A lightweight Next.js clone with file-based routing, React hooks, and ES module imports — **zero dependencies, instant startup**.
-
-```
-Next.js:  ~400KB  +  20 dependencies  +  10s startup
-Aziz.js:  ~50KB   +  0 dependencies   +  <1s startup
-```
-
----
-
-## Quick Start
-
-```bash
-npm install
-npm run dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) — that's it.
-
----
-
-## Project Structure
-
-```
-my-app/
-├── index.html          ← entry point (don't touch)
-│
-├── app/                ← your pages and layouts
-│   ├── layout.js       ← root layout (wraps every page)
-│   └── page.js         ← route: /
-│
-├── styles/
-│   └── globals.css     ← global styles
-│
-├── _framework/         ← runtime, hooks, router (don't touch)
-├── scripts/            ← dev server + live reload (don't touch)
-└── docs/               ← full documentation
-```
-
----
-
-## Pages
-
-Every `page.js` inside `app/` becomes a route. Export a default function — no imports needed.
-
-```js
-// app/about/page.js  →  route: /about
-export default function Page() {
-    return (
-        <div>
-            <h1>About</h1>
-            <p>Hello from the about page!</p>
-        </div>
-    );
-}
-```
-
-### Route mapping
-
-| File | Route |
-|------|-------|
-| `app/page.js` | `/` |
-| `app/about/page.js` | `/about` |
-| `app/blog/page.js` | `/blog` |
-| `app/blog/[slug]/page.js` | `/blog/:slug` |
-| `app/blog/[...slug]/page.js` | `/blog/*` (catch-all) |
-
-### Creating a new page
-
-Just create the file — no registration needed:
-
-```bash
-mkdir app/dashboard
-```
-
-```js
-// app/dashboard/page.js  →  route: /dashboard
-export default function Page() {
-    return <h1>Dashboard</h1>;
-}
-```
-
----
-
-## Layouts
-
-`layout.js` wraps all pages at the same level and below. The root `app/layout.js` wraps every page.
-
-```js
-// app/layout.js
-export default function Layout({ children }) {
-    return (
-        <div>
-            <main>{children}</main>
-        </div>
-    );
-}
-```
-
-### Nested layouts
-
-```js
-// app/dashboard/layout.js  — wraps all /dashboard/* pages
-export default function Layout({ children }) {
-    return (
-        <div style={{ display: 'flex' }}>
-            <div style={{ flex: 1 }}>{children}</div>
-        </div>
-    );
-}
-```
-
----
-
-## Navigation
-
-### navigate()
-
-```js
-navigate('/about');
-navigate('/blog/my-post');
-navigate('/');
-```
-
-### Link component
-
-```js
-<Link href="/about">About</Link>
-<Link href="/blog/hello" className="nav-link">Blog Post</Link>
-```
-
-### useRouter hook
-
-```js
-export default function Page() {
-    const router = useRouter();
-
-    return (
-        <div>
-            <p>Current path: {router.pathname}</p>
-            <button onClick={() => router.push('/about')}>Go to About</button>
-            <button onClick={() => router.back()}>Back</button>
-        </div>
-    );
-}
-```
-
-### useParams — dynamic routes
-
-```js
-// app/blog/[slug]/page.js
-export default function Page() {
-    const { slug } = useParams();
-    return <h1>Post: {slug}</h1>;
-}
-```
-
-### useSearchParams — query strings
-
-```js
-// URL: /search?q=hello&page=2
-export default function Page() {
-    const searchParams = useSearchParams();
-    const query = searchParams.get('q');    // "hello"
-    const page  = searchParams.get('page'); // "2"
-
-    return <p>Searching for: {query}</p>;
-}
-```
-
----
-
-## React Hooks
-
-All hooks work exactly like React — **no imports needed**.
-
-### useState
-
-```js
-const [count, setCount] = useState(0);
-
-setCount(prev => prev + 1);
-```
-
-### useEffect
-
-```js
-useEffect(() => {
-    document.title = `Count: ${count}`;
-}, [count]);
-
-useEffect(() => {
-    const timer = setInterval(() => tick(), 1000);
-    return () => clearInterval(timer);
-}, []);
-```
-
-### useMemo
-
-```js
-const total = useMemo(() => {
-    return items.filter(i => i.active).length;
-}, [items]);
-```
-
-### useCallback
-
-```js
-const handleClick = useCallback(() => {
-    doSomething(id);
-}, [id]);
-```
-
-### useRef
-
-```js
-const inputRef = useRef(null);
-
-<input ref={inputRef} type="text" />
-
-inputRef.current.focus();
-```
-
-### useReducer
-
-```js
-const reducer = (state, action) => {
-    switch (action.type) {
-        case 'increment': return { count: state.count + 1 };
-        case 'decrement': return { count: state.count - 1 };
-        default:          return state;
-    }
-};
-
-const [state, dispatch] = useReducer(reducer, { count: 0 });
-```
-
-### useContext
-
-```js
-const ThemeContext = createContext('light');
-
-<ThemeContext.Provider value="dark">
-    {children}
-</ThemeContext.Provider>
-
-const theme = useContext(ThemeContext);
-```
-
-### useLocalStorage
-
-```js
-const [name, setName] = useLocalStorage('userName', '');
-```
-
----
-
-## Imports
-
-### Importing other files
-
-```js
-// Absolute path
-import Button from '/components/Button.js';
-
-// @/ alias (same as absolute)
-import Button from '@/components/Button';
-
-// npm packages (install first: npm install lodash)
-import _ from 'lodash';
-```
-
-The dev server resolves bare imports from `node_modules` automatically — no bundler config needed.
-
----
-
-## Components
-
-Components are just functions that return JSX — no pragma or imports needed.
-
-```js
-// components/Button.js
-export default function Button({ onClick, children, variant = 'primary' }) {
-    return (
-        <button class={`btn btn-${variant}`} onClick={onClick}>
-            {children}
-        </button>
-    );
-}
-```
-
-```js
-// Using the component
-import Button from '/components/Button.js';
-
-<Button onClick={() => alert('hi')} variant="danger">Delete</Button>
-```
-
-### JSX rules
-
-```js
-// Use class instead of className
-<div class="container">
-
-// Use onInput for text inputs (not onChange)
-<input onInput={(e) => setValue(e.target.value)} />
-
-// Self-closing tags need /
-<input type="text" />
-
-// Expressions in {}
-<p>{count > 0 ? 'positive' : 'zero'}</p>
-
-// Lists
-{items.map(item => <li key={item.id}>{item.name}</li>)}
-
-// Conditional rendering
-{isLoggedIn && <Dashboard />}
-```
-
----
-
-## Styling
-
-### globals.css
-
-Edit `styles/globals.css` for global styles. Built-in utility classes:
-
-```css
-.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; }
-```
-
-### Inline styles
-
-```js
-<div style={{ padding: '20px', color: 'red', fontSize: '16px' }}>
-    Hello
-</div>
-```
-
-### Tailwind CSS
-
-If you scaffolded with Tailwind, it is loaded via CDN with `primary` and `dark` colors pre-configured:
-
-```js
-// Use Tailwind classes directly in any file
-<div class="flex items-center gap-4 p-6 bg-white rounded-lg shadow">
-    <h1 class="text-2xl font-bold text-dark">Hello</h1>
-</div>
-```
-
-To extend the config, edit the `tailwind.config` block in `index.html`.
-
----
-
-## Dev Server
-
-```bash
-npm run dev
-```
-
-- Serves your app at `http://localhost:3000`
-- Watches all source folders and live-reloads on save
-- Resolves bare imports from `node_modules`
-
-```bash
-# Custom port
-PORT=4000 npm run dev
-```
-
----
-
-## Comparison with Next.js
-
-| Feature | Aziz.js | Next.js |
-|---------|---------|---------|
-| File-based routing | ✅ | ✅ |
-| `page.js` convention | ✅ | ✅ |
-| `layout.js` convention | ✅ | ✅ |
-| Dynamic routes `[slug]` | ✅ | ✅ |
-| Catch-all `[...slug]` | ✅ | ✅ |
-| React hooks | ✅ | ✅ |
-| No imports needed in pages | ✅ | ❌ |
-| ES module imports | ✅ | ✅ |
-| `@/` path alias | ✅ | ✅ |
-| Live reload | ✅ | ✅ |
-| SSR / SSG | ❌ | ✅ |
-| TypeScript | ❌ | ✅ |
-| Bundle size | **~50KB** | ~400KB+ |
-| Dependencies | **0** | 20+ |
-| Startup time | **< 1s** | 10–30s |
-
----
-
-## License
-
-MIT
+# ⚡ Aziz.js
+
+A lightweight Next.js clone with file-based routing, React hooks, and ES module imports — **zero dependencies, instant startup**.
+
+```
+Next.js:  ~400KB  +  20 dependencies  +  10s startup
+Aziz.js:  ~50KB   +  0 dependencies   +  <1s startup
+```
+
+---
+
+## Quick Start
+
+```bash
+npm install
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) — that's it.
+
+---
+
+## Project Structure
+
+```
+my-app/
+├── index.html          ← entry point (don't touch)
+│
+├── app/                ← your pages and layouts
+│   ├── layout.js       ← root layout (wraps every page)
+│   └── page.js         ← route: /
+│
+├── styles/
+│   └── globals.css     ← global styles
+│
+├── _framework/         ← runtime, hooks, router (don't touch)
+├── scripts/            ← dev server + live reload (don't touch)
+└── docs/               ← full documentation
+```
+
+---
+
+## Pages
+
+Every `page.js` inside `app/` becomes a route. Export a default function — no imports needed.
+
+```js
+// app/about/page.js  →  route: /about
+export default function Page() {
+    return (
+        <div>
+            <h1>About</h1>
+            <p>Hello from the about page!</p>
+        </div>
+    );
+}
+```
+
+### Route mapping
+
+| File | Route |
+|------|-------|
+| `app/page.js` | `/` |
+| `app/about/page.js` | `/about` |
+| `app/blog/page.js` | `/blog` |
+| `app/blog/[slug]/page.js` | `/blog/:slug` |
+| `app/blog/[...slug]/page.js` | `/blog/*` (catch-all) |
+
+### Creating a new page
+
+Just create the file — no registration needed:
+
+```bash
+mkdir app/dashboard
+```
+
+```js
+// app/dashboard/page.js  →  route: /dashboard
+export default function Page() {
+    return <h1>Dashboard</h1>;
+}
+```
+
+---
+
+## Layouts
+
+`layout.js` wraps all pages at the same level and below. The root `app/layout.js` wraps every page.
+
+```js
+// app/layout.js
+export default function Layout({ children }) {
+    return (
+        <div>
+            <main>{children}</main>
+        </div>
+    );
+}
+```
+
+### Nested layouts
+
+```js
+// app/dashboard/layout.js  — wraps all /dashboard/* pages
+export default function Layout({ children }) {
+    return (
+        <div style={{ display: 'flex' }}>
+            <div style={{ flex: 1 }}>{children}</div>
+        </div>
+    );
+}
+```
+
+---
+
+## Navigation
+
+### navigate()
+
+```js
+navigate('/about');
+navigate('/blog/my-post');
+navigate('/');
+```
+
+### Link component
+
+```js
+<Link href="/about">About</Link>
+<Link href="/blog/hello" className="nav-link">Blog Post</Link>
+```
+
+### useRouter hook
+
+```js
+export default function Page() {
+    const router = useRouter();
+
+    return (
+        <div>
+            <p>Current path: {router.pathname}</p>
+            <button onClick={() => router.push('/about')}>Go to About</button>
+            <button onClick={() => router.back()}>Back</button>
+        </div>
+    );
+}
+```
+
+### useParams — dynamic routes
+
+```js
+// app/blog/[slug]/page.js
+export default function Page() {
+    const { slug } = useParams();
+    return <h1>Post: {slug}</h1>;
+}
+```
+
+### useSearchParams — query strings
+
+```js
+// URL: /search?q=hello&page=2
+export default function Page() {
+    const searchParams = useSearchParams();
+    const query = searchParams.get('q');    // "hello"
+    const page  = searchParams.get('page'); // "2"
+
+    return <p>Searching for: {query}</p>;
+}
+```
+
+---
+
+## React Hooks
+
+All hooks work exactly like React — **no imports needed**.
+
+### useState
+
+```js
+const [count, setCount] = useState(0);
+
+setCount(prev => prev + 1);
+```
+
+### useEffect
+
+```js
+useEffect(() => {
+    document.title = `Count: ${count}`;
+}, [count]);
+
+useEffect(() => {
+    const timer = setInterval(() => tick(), 1000);
+    return () => clearInterval(timer);
+}, []);
+```
+
+### useMemo
+
+```js
+const total = useMemo(() => {
+    return items.filter(i => i.active).length;
+}, [items]);
+```
+
+### useCallback
+
+```js
+const handleClick = useCallback(() => {
+    doSomething(id);
+}, [id]);
+```
+
+### useRef
+
+```js
+const inputRef = useRef(null);
+
+<input ref={inputRef} type="text" />
+
+inputRef.current.focus();
+```
+
+### useReducer
+
+```js
+const reducer = (state, action) => {
+    switch (action.type) {
+        case 'increment': return { count: state.count + 1 };
+        case 'decrement': return { count: state.count - 1 };
+        default:          return state;
+    }
+};
+
+const [state, dispatch] = useReducer(reducer, { count: 0 });
+```
+
+### useContext
+
+```js
+const ThemeContext = createContext('light');
+
+<ThemeContext.Provider value="dark">
+    {children}
+</ThemeContext.Provider>
+
+const theme = useContext(ThemeContext);
+```
+
+### useLocalStorage
+
+```js
+const [name, setName] = useLocalStorage('userName', '');
+```
+
+---
+
+## Imports
+
+### Importing other files
+
+```js
+// Absolute path
+import Button from '/components/Button.js';
+
+// @/ alias (same as absolute)
+import Button from '@/components/Button';
+
+// npm packages (install first: npm install lodash)
+import _ from 'lodash';
+```
+
+The dev server resolves bare imports from `node_modules` automatically — no bundler config needed.
+
+---
+
+## Components
+
+Components are just functions that return JSX — no pragma or imports needed.
+
+```js
+// components/Button.js
+export default function Button({ onClick, children, variant = 'primary' }) {
+    return (
+        <button class={`btn btn-${variant}`} onClick={onClick}>
+            {children}
+        </button>
+    );
+}
+```
+
+```js
+// Using the component
+import Button from '/components/Button.js';
+
+<Button onClick={() => alert('hi')} variant="danger">Delete</Button>
+```
+
+### JSX rules
+
+```js
+// Use class instead of className
+<div class="container">
+
+// Use onInput for text inputs (not onChange)
+<input onInput={(e) => setValue(e.target.value)} />
+
+// Self-closing tags need /
+<input type="text" />
+
+// Expressions in {}
+<p>{count > 0 ? 'positive' : 'zero'}</p>
+
+// Lists
+{items.map(item => <li key={item.id}>{item.name}</li>)}
+
+// Conditional rendering
+{isLoggedIn && <Dashboard />}
+```
+
+---
+
+## Styling
+
+### globals.css
+
+Edit `styles/globals.css` for global styles. Built-in utility classes:
+
+```css
+.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; }
+```
+
+### Inline styles
+
+```js
+<div style={{ padding: '20px', color: 'red', fontSize: '16px' }}>
+    Hello
+</div>
+```
+
+### Tailwind CSS
+
+If you scaffolded with Tailwind, it is loaded via CDN with `primary` and `dark` colors pre-configured:
+
+```js
+// Use Tailwind classes directly in any file
+<div class="flex items-center gap-4 p-6 bg-white rounded-lg shadow">
+    <h1 class="text-2xl font-bold text-dark">Hello</h1>
+</div>
+```
+
+To extend the config, edit the `tailwind.config` block in `index.html`.
+
+---
+
+## Dev Server
+
+```bash
+npm run dev
+```
+
+- Serves your app at `http://localhost:3000`
+- Watches all source folders and live-reloads on save
+- Resolves bare imports from `node_modules`
+
+```bash
+# Custom port
+PORT=4000 npm run dev
+```
+
+---
+
+## Comparison with Next.js
+
+| Feature | Aziz.js | Next.js |
+|---------|---------|---------|
+| File-based routing | ✅ | ✅ |
+| `page.js` convention | ✅ | ✅ |
+| `layout.js` convention | ✅ | ✅ |
+| Dynamic routes `[slug]` | ✅ | ✅ |
+| Catch-all `[...slug]` | ✅ | ✅ |
+| React hooks | ✅ | ✅ |
+| No imports needed in pages | ✅ | ❌ |
+| ES module imports | ✅ | ✅ |
+| `@/` path alias | ✅ | ✅ |
+| Live reload | ✅ | ✅ |
+| SSR / SSG | ❌ | ✅ |
+| TypeScript | ❌ | ✅ |
+| Bundle size | **~50KB** | ~400KB+ |
+| Dependencies | **0** | 20+ |
+| Startup time | **< 1s** | 10–30s |
+
+---
+
+## License
+
+MIT