create-aziz-app 3.1.0 → 3.1.2

package/template/app/layout.js

@@ -1,20 +1,18 @@
-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 (
-        <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
-            <Navbar />
-            <main style={{ flex: 1 }}>
-                {children}
-            </main>
-            <Footer />
-        </div>
-    );
-}
-
-export const metadata = {
-    title: 'My App',
-    description: 'Built with Aziz.js'
-};
+// Root layout — wraps every page (like Next.js app/layout.js)
+export default function Layout({ children }) {
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+            <main style={{ flex: 1 }}>
+                {children}
+            </main>
+            <footer>
+                Built with Aziz.js
+            </footer>
+        </div>
+    );
+}
+
+export const metadata = {
+    title: 'My App',
+    description: 'Built with Aziz.js'
+};

package/template/app/page.js

@@ -1,56 +1,33 @@
-// Home page — route: /
-export default function Page() {
-    const [count, setCount] = useState(0);
-
-    return (
-        <div style={{ padding: '40px 32px', maxWidth: '900px', margin: '0 auto' }}>
-            <h1>Welcome Home 👋</h1>
-
-            <div class="card">
-                <h2>Counter</h2>
-                <p>useState works exactly like React!</p>
-                <div class="count-display">{count}</div>
-                <div class="counter-actions">
-                    <button class="btn btn-danger"  onClick={() => setCount(c => c - 1)}>−</button>
-                    <button class="btn btn-primary" onClick={() => setCount(c => c + 1)}>+</button>
-                    <button class="btn btn-grey"    onClick={() => setCount(0)}>Reset</button>
-                </div>
-            </div>
-
-            <div class="card">
-                <h2>File-based Routing</h2>
-                <p>
-                    Each <code>page.js</code> inside <code>app/</code> is a route — just like Next.js.
-                    Create <code>app/about/page.js</code> and it becomes <code>/about</code>.
-                </p>
-                <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
-                    <button class="btn btn-primary" onClick={() => navigate('/about')}>
-                        Go to About →
-                    </button>
-                    <button class="btn btn-primary" onClick={() => navigate('/blog/hello-world')}>
-                        Blog Post →
-                    </button>
-                    <button class="btn btn-primary" onClick={() => navigate('/contact')}>
-                        Contact →
-                    </button>
-                    <button class="btn btn-primary" onClick={() => navigate('/test')}>
-                        Go to Test →
-                    </button>
-                </div>
-            </div>
-
-            <div class="card">
-                <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> automatically.
-                </p>
-                <pre style={{ background: '#282c34', color: '#61dafb', padding: '16px', borderRadius: '8px', overflow: 'auto', fontSize: '13px' }}>
-{`import mongoose from 'mongoose';
-import connectDB from '@/lib/db';
-import User from '@/models/User';`}
-                </pre>
-            </div>
-        </div>
-    );
-}
+// Home page — route: /
+export default function Page() {
+    const [count, setCount] = useState(0);
+
+    return (
+        <div style={{ padding: '48px 32px', maxWidth: '720px', margin: '0 auto' }}>
+            <h1>Welcome to Aziz.js</h1>
+            <p>
+                Your app is running. Edit <code>app/page.js</code> and save —
+                the browser refreshes automatically.
+            </p>
+
+            <div class="card">
+                <h2>Interactive state</h2>
+                <p>A tiny slice of state, exactly like React's <code>useState</code>.</p>
+                <div class="count-display">{count}</div>
+                <div class="counter-actions">
+                    <button class="btn btn-danger"  onClick={() => setCount(c => c - 1)}>−</button>
+                    <button class="btn btn-primary" onClick={() => setCount(c => c + 1)}>+</button>
+                    <button class="btn btn-grey"    onClick={() => setCount(0)}>Reset</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <h2>Add a page</h2>
+                <p>
+                    Each <code>page.js</code> inside <code>app/</code> is a route.
+                    Create <code>app/about/page.js</code> and it becomes <code>/about</code>.
+                </p>
+            </div>
+        </div>
+    );
+}

package/template/scripts/lib/js-transform.js

@@ -53,6 +53,55 @@ function transformJSX(code, filename) {
 //
 // Runs on the whole module (not line-by-line) so multi-line
 // import statements are handled correctly.
+//
+// Only keywords sitting in CODE position are rewritten. A `from`
+// or `import` inside a string literal / template literal / comment
+// is prose (e.g. documentation text in JSX) and must be left alone
+// — rewriting it corrupts the module and the page fails to load.
+
+// Uint8Array marking every character that is in code position
+// (outside string literals, template literals and comments).
+function codePositions(code) {
+    const n = code.length;
+    const isCode = new Uint8Array(n);
+    const stack = [];          // '{' for blocks, 'tpl' for ${ … } in templates
+    let mode = 'code';         // code | ' | " | ` | // | /*
+    let i = 0;
+
+    while (i < n) {
+        const c = code[i];
+
+        if (mode === 'code') {
+            isCode[i] = 1;
+            if (c === '\\') { i += 2; continue; }
+            if (c === "'" || c === '"' || c === '`') mode = c;
+            else if (c === '/' && code[i + 1] === '/') mode = '//';
+            else if (c === '/' && code[i + 1] === '*') mode = '/*';
+            else if (c === '{') stack.push('{');
+            else if (c === '}') { if (stack.pop() === 'tpl') mode = '`'; }
+            i++;
+        } else if (mode === "'" || mode === '"' || mode === '`') {
+            if (c === '\\') { i += 2; continue; }
+            if (c === mode) mode = 'code';
+            else if (mode === '`' && c === '$' && code[i + 1] === '{') {
+                stack.push('tpl');
+                mode = 'code';
+                isCode[i] = 1;
+                isCode[i + 1] = 1;
+                i += 2;
+                continue;
+            }
+            i++;
+        } else if (mode === '//') {
+            if (c === '\n') mode = 'code';
+            i++;
+        } else { // block comment
+            if (c === '*' && code[i + 1] === '/') { mode = 'code'; i += 2; continue; }
+            i++;
+        }
+    }
+    return isCode;
+}
 
 function isRelativeOrAbsolute(spec) {
     return spec.startsWith('/') ||
@@ -72,21 +121,26 @@ function mapSpecifier(spec) {
 }
 
 function rewriteImports(code) {
+    const isCode = codePositions(code);
+
     // from 'specifier'  (covers `import ... from`, `export ... from`)
-    code = code.replace(/(\bfrom\s*)(['"])([^'"\n]+)\2/g, (m, from, q, spec) => {
+    code = code.replace(/(\bfrom\s*)(['"])([^'"\n]+)\2/g, (m, from, q, spec, offset) => {
+        if (!isCode[offset]) return m;
         const mapped = mapSpecifier(spec);
         return mapped === spec ? m : `${from}${q}${mapped}${q}`;
     });
 
     // side-effect imports: import 'specifier';
     // (requires the quote right after `import`, so `import(` is not matched)
-    code = code.replace(/(\bimport\s+)(['"])([^'"\n]+)\2/g, (m, kw, q, spec) => {
+    code = code.replace(/(\bimport\s+)(['"])([^'"\n]+)\2/g, (m, kw, q, spec, offset) => {
+        if (!isCode[offset]) return m;
         const mapped = mapSpecifier(spec);
         return mapped === spec ? m : `${kw}${q}${mapped}${q}`;
     });
 
     // dynamic imports: import('specifier')
-    code = code.replace(/(\bimport\s*\(\s*)(['"])([^'"\n]+)\2(\s*\))/g, (m, pre, q, spec, post) => {
+    code = code.replace(/(\bimport\s*\(\s*)(['"])([^'"\n]+)\2(\s*\))/g, (m, pre, q, spec, post, offset) => {
+        if (!isCode[offset]) return m;
         const mapped = mapSpecifier(spec);
         return mapped === spec ? m : `${pre}${q}${mapped}${q}${post}`;
     });

package/template/api/contact.js

@@ -1,39 +0,0 @@
-// API Route: POST /api/contact  (classic style — api/contact.js)
-//
-// Demonstrates validation, cookies, and NextResponse helpers.
-
-const { NextResponse } = require('../_framework/next-response');
-
-// In-memory store (replace with a real database in production)
-const messages = [];
-
-async function GET(request) {
-    return NextResponse.json({ count: messages.length, messages });
-}
-
-async function POST(request) {
-    let body;
-    try {
-        body = await request.json();
-    } catch (err) {
-        return NextResponse.json({ error: 'Invalid JSON body' }, { status: err.status || 400 });
-    }
-
-    const { name, email, message } = body;
-
-    if (!name || !email || !message) {
-        return NextResponse.json(
-            { error: 'name, email and message are required' },
-            { status: 400 }
-        );
-    }
-
-    const entry = { name, email, message, at: new Date().toISOString() };
-    messages.push(entry);
-
-    const res = NextResponse.json({ message: `Thanks, ${name}! We received your message.`, entry }, { status: 201 });
-    res.cookies.set('last_contact', name, { path: '/', maxAge: 60 * 60 });
-    return res;
-}
-
-module.exports = { GET, POST };

package/template/api/createUser.js

@@ -1,69 +0,0 @@
-// API Route: /api/createUser
-// Next.js App Router style
-
-const { NextResponse } = require('../_framework/next-response');
-
-// Mock database
-let users = [
-    { _id: '1', name: 'Aziz Ahmed', email: 'aziz@example.com', role: 'admin', phone: '123-456-7890' }
-];
-
-// POST handler
-async function POST(request) {
-    try {
-        // Parse request body
-        const body = await request.json();
-        const { name, email, password, role, phone } = body;
-
-        // Validation
-        if (!name || !email || !password) {
-            return NextResponse.json(
-                { 
-                    error: 'Validation failed',
-                    message: 'Name, email, and password are required'
-                },
-                { status: 400 }
-            );
-        }
-
-        // Check if email already exists
-        if (users.find(u => u.email === email)) {
-            return NextResponse.json(
-                { error: 'User with this email already exists' },
-                { status: 409 }
-            );
-        }
-
-        // Create new user
-        const newUser = {
-            _id: String(users.length + 1),
-            name,
-            email,
-            password, // In production, hash this with bcrypt!
-            role: role || 'user',
-            phone: phone || '',
-            createdAt: new Date().toISOString()
-        };
-
-        users.push(newUser);
-
-        // Return user data (without password)
-        const { password: _, ...userData } = newUser;
-
-        return NextResponse.json(
-            {
-                message: 'User created successfully',
-                user: userData
-            },
-            { status: 201 }
-        );
-    } catch (error) {
-        console.error('Create user error:', error);
-        return NextResponse.json(
-            { error: 'Failed to create user' },
-            { status: 500 }
-        );
-    }
-}
-
-module.exports = { POST };

package/template/api/hello.js

@@ -1,17 +0,0 @@
-// API Route: /api/hello
-// Next.js App Router style
-
-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}!`,
-        timestamp: new Date().toISOString(),
-        method: request.method
-    });
-}
-
-module.exports = { GET };

package/template/api/loginUser.js

@@ -1,61 +0,0 @@
-// API Route: /api/loginUser
-// Next.js App Router style
-
-const { NextResponse } = require('../_framework/next-response');
-
-// Mock database
-const users = [
-    { _id: '1', name: 'Aziz Ahmed', email: 'aziz@example.com', password: 'admin123', role: 'admin' },
-    { _id: '2', name: 'John Doe', email: 'john@example.com', password: 'user123', role: 'user' }
-];
-
-// POST handler
-async function POST(request) {
-    try {
-        // Parse request body
-        const body = await request.json();
-        const { email, password } = body;
-
-        // Validation
-        if (!email || !password) {
-            return NextResponse.json(
-                { error: 'Email and password are required' },
-                { status: 400 }
-            );
-        }
-
-        // Find user
-        const user = users.find(u => u.email === email);
-        
-        if (!user) {
-            return NextResponse.json(
-                { error: 'Invalid credentials' },
-                { status: 401 }
-            );
-        }
-
-        // Check password (in production, use bcrypt!)
-        if (user.password !== password) {
-            return NextResponse.json(
-                { error: 'Invalid credentials' },
-                { status: 401 }
-            );
-        }
-
-        // Return user data (without password)
-        const { password: _, ...userData } = user;
-        
-        return NextResponse.json({
-            ...userData,
-            message: 'Login successful'
-        });
-    } catch (error) {
-        console.error('Login error:', error);
-        return NextResponse.json(
-            { error: 'Failed to login' },
-            { status: 500 }
-        );
-    }
-}
-
-module.exports = { POST };

package/template/api/users.js

@@ -1,59 +0,0 @@
-// API Route: /api/users
-// Next.js App Router style
-
-const { NextResponse } = require('../_framework/next-response');
-
-let users = [
-    { id: 1, name: 'Aziz Ahmed', email: 'aziz@example.com', createdAt: new Date().toISOString() },
-    { id: 2, name: 'John Doe', email: 'john@example.com', createdAt: new Date().toISOString() },
-    { id: 3, name: 'Jane Smith', email: 'jane@example.com', createdAt: new Date().toISOString() }
-];
-
-async function GET(request) {
-    const { searchParams } = new URL(request.url);
-    const id = searchParams.get('id');
-
-    if (id) {
-        const user = users.find(u => u.id === parseInt(id));
-        if (!user) return NextResponse.json({ error: 'User not found' }, { status: 404 });
-        return NextResponse.json(user);
-    }
-
-    return NextResponse.json({ users, total: users.length });
-}
-
-async function POST(request) {
-    const { name, email } = await request.json();
-
-    if (!name || !email) {
-        return NextResponse.json({ error: 'Name and email are required' }, { status: 400 });
-    }
-
-    if (users.find(u => u.email === email)) {
-        return NextResponse.json({ error: 'Email already exists' }, { status: 409 });
-    }
-
-    const newUser = {
-        id: Math.max(...users.map(u => u.id)) + 1,
-        name, email,
-        createdAt: new Date().toISOString()
-    };
-    users.push(newUser);
-
-    return NextResponse.json({ message: 'User created', user: newUser }, { status: 201 });
-}
-
-async function DELETE(request) {
-    const { searchParams } = new URL(request.url);
-    const id = searchParams.get('id');
-
-    if (!id) return NextResponse.json({ error: 'ID required' }, { status: 400 });
-
-    const idx = users.findIndex(u => u.id === parseInt(id));
-    if (idx === -1) return NextResponse.json({ error: 'User not found' }, { status: 404 });
-
-    const deleted = users.splice(idx, 1)[0];
-    return NextResponse.json({ message: 'User deleted', user: deleted });
-}
-
-module.exports = { GET, POST, DELETE };

package/template/app/about/page.js

@@ -1,41 +0,0 @@
-// About page — route: /about
-export default function Page() {
-    return (
-        <div style={{ padding: '40px 32px', maxWidth: '900px', margin: '0 auto' }}>
-            <h1>About 📖</h1>
-
-            <div class="card">
-                <h2>What is Aziz.js?</h2>
-                <p>
-                    A lightweight Next.js clone — file-based routing, React hooks,
-                    server-side API routes, and ES module imports. Zero dependencies.
-                </p>
-            </div>
-
-            <div class="card">
-                <h2>File Structure</h2>
-                <pre style={{ background: '#282c34', color: '#61dafb', padding: '16px', borderRadius: '8px', fontSize: '13px' }}>
-{`app/
-  layout.js       ← root layout
-  page.js         ← /
-  about/
-    page.js       ← /about
-  blog/
-    [slug]/
-      page.js     ← /blog/:slug
-
-api/
-  users.js        ← /api/users
-
-components/
-  Navbar.js
-  Footer.js`}
-                </pre>
-            </div>
-
-            <button class="btn btn-primary" onClick={() => navigate('/')}>
-                ← Back Home
-            </button>
-        </div>
-    );
-}

package/template/app/blog/[slug]/page.js

@@ -1,31 +0,0 @@
-// Blog post page — route: /blog/:slug  (dynamic segment)
-export default function BlogPost() {
-    const { slug } = useParams();
-    const search = useSearchParams();
-    const from = search.get('from');
-
-    return (
-        <div style={{ padding: '40px 32px', maxWidth: '900px', margin: '0 auto' }}>
-            <p style={{ color: '#888', marginBottom: '8px' }}>
-                <a href="/blog/hello-world" onClick={(e) => { e.preventDefault(); navigate('/blog/hello-world'); }}>hello-world</a>
-                {'  ·  '}
-                <a href="/blog/aziz-js" onClick={(e) => { e.preventDefault(); navigate('/blog/aziz-js'); }}>aziz-js</a>
-            </p>
-
-            <h1>Blog: {slug}</h1>
-
-            <div class="card">
-                <h2>Dynamic routing works!</h2>
-                <p>
-                    This page is <code>app/blog/[slug]/page.js</code> and it matches any
-                    <code>/blog/&lt;anything&gt;</code> URL. The matched value is available
-                    through the <code>useParams()</code> hook.
-                </p>
-                <p><strong>useParams().slug</strong> = <code>{slug}</code></p>
-                {from && <p><strong>?from=</strong> = <code>{from}</code></p>}
-            </div>
-
-            <button class="btn btn-primary" onClick={() => navigate('/')}>← Back Home</button>
-        </div>
-    );
-}

package/template/app/contact/page.js

@@ -1,68 +0,0 @@
-// Contact page — route: /contact
-// Demonstrates the global `api` client calling a server route handler.
-export default function ContactPage() {
-    const [name, setName]     = useState('');
-    const [email, setEmail]   = useState('');
-    const [message, setMessage] = useState('');
-    const [status, setStatus] = useState(null); // { type, text }
-    const [sending, setSending] = useState(false);
-
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        setSending(true);
-        setStatus(null);
-        try {
-            const res = await api.post('/api/contact', { name, email, message });
-            setStatus({ type: 'ok', text: res.message || 'Message sent!' });
-            setName(''); setEmail(''); setMessage('');
-        } catch (err) {
-            setStatus({ type: 'error', text: err.message || 'Something went wrong' });
-        } finally {
-            setSending(false);
-        }
-    };
-
-    return (
-        <div style={{ padding: '40px 32px', maxWidth: '640px', margin: '0 auto' }}>
-            <h1>Contact 📬</h1>
-
-            <div class="card">
-                <h2>Send us a message</h2>
-                <p>This form posts to <code>/api/contact</code> using the global <code>api</code> client.</p>
-
-                <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '12px', marginTop: '16px' }}>
-                    <input
-                        type="text"
-                        placeholder="Your name"
-                        value={name}
-                        onInput={(e) => setName(e.target.value)}
-                        required
-                    />
-                    <input
-                        type="email"
-                        placeholder="Your email"
-                        value={email}
-                        onInput={(e) => setEmail(e.target.value)}
-                        required
-                    />
-                    <textarea
-                        placeholder="Your message"
-                        value={message}
-                        onInput={(e) => setMessage(e.target.value)}
-                        rows={4}
-                        required
-                    />
-                    <button type="submit" class="btn btn-primary" disabled={sending}>
-                        {sending ? 'Sending…' : 'Send message'}
-                    </button>
-                </form>
-
-                {status && (
-                    <p style={{ marginTop: '12px', color: status.type === 'ok' ? '#1a7f37' : '#c0392b' }}>
-                        {status.text}
-                    </p>
-                )}
-            </div>
-        </div>
-    );
-}

package/template/app/not-found.js

@@ -1,15 +0,0 @@
-// Custom 404 page — rendered when no route matches (like Next.js app/not-found.js)
-export default function NotFound() {
-    return (
-        <div style={{ padding: '80px 24px', textAlign: 'center' }}>
-            <h1 style={{ fontSize: '96px', margin: '0 0 8px', color: '#61dafb' }}>404</h1>
-            <h2 style={{ margin: '0 0 16px' }}>Page not found</h2>
-            <p style={{ color: '#888', marginBottom: '32px' }}>
-                We couldn't find the page you were looking for.
-            </p>
-            <button class="btn btn-primary" onClick={() => navigate('/')}>
-                ← Back to Home
-            </button>
-        </div>
-    );
-}