create-aziz-app 3.1.1 → 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 to Aziz.js</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}`;
     });