lumpiajs 1.0.12 → 1.0.14

package/be-tester/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "be-tester",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "lumpia kukus",
+    "build": "lumpia goreng"
+  },
+  "dependencies": {
+    "lumpiajs": "latest"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.0"
+  }
+}

package/be-tester/public/css/style.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}

package/be-tester/routes/web.lmp

@@ -0,0 +1,4 @@
+import { Jalan } from 'lumpiajs';
+
+Jalan->get('/', 'HomeController@index');
+Jalan->get('/toko', 'ProductController@tampilBarang');

package/be-tester/tailwind.config.js

@@ -0,0 +1 @@
+module.exports={content:["./views/**/*.lmp"],theme:{extend:{}},plugins:[]}

package/be-tester/views/home.lmp

@@ -0,0 +1,12 @@
+<lump>
+  <klambi>
+      h1 { color: #d35400; text-align: center; }
+  </klambi>
+  <kulit>
+    <div style="text-align: center; font-family: sans-serif; margin-top: 50px;">
+      <h1>{{ message }}</h1>
+      <p>{{ info }}</p>
+      <a href="/toko">Cek Toko Sebelah</a>
+    </div>
+  </kulit>
+</lump>

package/be-tester/views/product.lmp

@@ -0,0 +1,9 @@
+<lump>
+  <kulit>
+    <div style="padding: 20px; font-family: sans-serif;">
+      <h1>Daftar Barang</h1>
+      <ul>{{ daftar }}</ul>
+      <a href="/">Balik Omah</a>
+    </div>
+  </kulit>
+</lump>

package/lib/commands/build.js

@@ -1,5 +1,5 @@
 
-// ... (KAMUS & Imports same as before) ...
+// ... (KAMUS same) ...
 const KAMUS = [
     { from: /paten\s/g, to: 'const ' },
     { from: /ono\s/g, to: 'let ' },
@@ -25,8 +25,6 @@ import { loadConfig } from '../core/Config.js';
 function transpileSemarangan(content) {
     let code = content;
     code = code.replace(/from\s+['"](.+?)\.lmp['"]/g, "from '$1.js'");
-    code = code.replace(/from\s+['"]lumpiajs['"]/g, "from './core/lumpia.js'"); 
-
     code = code.split('\n').map(line => {
         let l = line;
         if (l.trim().startsWith('//')) return l;
@@ -46,18 +44,6 @@ function processDirectory(source, dest, rootDepth = 0) {
         } else {
             if (item.endsWith('.lmp') || item.endsWith('.js')) {
                 let content = fs.readFileSync(srcPath, 'utf8');
-                let backSteps = rootDepth > 0 ? '../'.repeat(rootDepth) : './';
-                if(rootDepth === 0) backSteps = './'; // core is in dist/core/.
-
-                // Fix path calculation to Core
-                // dist/routes/web.js (depth 1) -> ../core/lumpia.js
-                // dist/app/controllers/Home.js (depth 2) -> ../../core/lumpia.js
-                
-                // Let's rely on simple replace logic based on file type location usually known
-                // But dynamic is better.
-                
-                content = content.replace(/from\s+['"]lumpiajs['"]/g, `from '${backSteps}../core/lumpia.js'`);
-
                 content = transpileSemarangan(content); 
                 const finalDest = destPath.replace('.lmp', '.js');
                 fs.writeFileSync(finalDest, content);
@@ -68,12 +54,16 @@ function processDirectory(source, dest, rootDepth = 0) {
     });
 }
 
-const browserCore = `
+// BROWSER CORE (Exported so serve.js can use it too if needed)
+export const browserCore = `
 export class Controller {
     constructor() { this.params={}; }
     async tampil(viewName, data={}) {
         try {
-            const res = await fetch('views/'+viewName+'.lmp'); 
+            const basePath = window.LUMPIA_BASE || '';
+            const url = basePath + '/views/' + viewName + '.lmp';
+            // Simple double-slash cleanup
+            const res = await fetch(url.replace(/([^:])\\/\\//g, '$1/')); 
             if(!res.ok) throw new Error('View 404: ' + viewName);
             let html = await res.text();
             
@@ -116,42 +106,36 @@ const indexHtml = `<!DOCTYPE html>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>LumpiaJS</title>
+    <script type="importmap">
+    {
+        "imports": {
+            "lumpiajs": "./core/lumpia.js"
+        }
+    }
+    </script>
     <link rel="stylesheet" href="public/css/style.css">
+    <script>
+        window.LUMPIA_BASE = window.location.pathname
+            .replace(new RegExp('/index\\\\.html$'), '')
+            .replace(new RegExp('/$'), '');
+    </script>
 </head>
 <body>
     <div id="app">Loading...</div>
-    
     <script type="module">
-        import { Jalan } from './routes/web.js';
+        // FIX: Import Jalan from CORE, not module. Module has side effects only.
+        import { Jalan } from 'lumpiajs';
+        import './routes/web.js'; 
         
         async function navigate() {
-            // FIX: Gunakan new RegExp string biar aman dari escaping hell
-            const cleanPath = (p) => p.replace(new RegExp('/index\\\\.html$'), '').replace(new RegExp('/$'), '');
-            
-            const basePath = cleanPath(window.location.pathname);
-            // Tapi tunggu, basePath itu harusnya folder ROOT project.
-            // Misal: /2025/lumpiajs/
-            // URL saat ini: /2025/lumpiajs/index.html -> Base: /2025/lumpiajs
-            // Kalau kita navigate ke sub-route (via history pushState): /2025/lumpiajs/produk
-            // Maka window.location.pathname adalah /2025/lumpiajs/produk.
-            // Kita HARUS tau base path awalnya apa. Kita bisa tebak dari script tag src location?
-            // Atau kita asumsikan saat pertama load (yang biasanya index.html), itu lah base path.
-            
-            // Trik: Simpan base path di window variable saat pertama load (index.html)
-            if (!window.LUMPIA_BASE) {
-                window.LUMPIA_BASE = window.location.pathname.replace(new RegExp('/index\\\\.html$'), '').replace(new RegExp('/$'), '');
-            }
-
             let currentPath = window.location.pathname;
-            // Remove Base Path from Current Path to get "Route Path"
-            if (currentPath.startsWith(window.LUMPIA_BASE)) {
+            if (window.LUMPIA_BASE && currentPath.startsWith(window.LUMPIA_BASE)) {
                 currentPath = currentPath.substring(window.LUMPIA_BASE.length);
             }
             if (!currentPath || currentPath === '/index.html') currentPath = '/';
 
             let m = null, args = {};
             for(let r of Jalan.routes) {
-                // Regex: Replace {slug} -> ([^/]+)
                 let regexStr = '^' + r.p.replace(/{([a-zA-Z0-9_]+)}/g, '([^/]+)') + '$';
                 let reg = new RegExp(regexStr);
                 let res = currentPath.match(reg);
@@ -166,7 +150,7 @@ const indexHtml = `<!DOCTYPE html>
                     await i[fName](...args);
                 } catch(e) { 
                     console.error(e); 
-                    document.getElementById('app').innerHTML='<h1>Error Loading Controller</h1><pre>'+e.message+'</pre>'; 
+                    document.getElementById('app').innerHTML='<h1>Error</h1><pre>'+e.message+'</pre>'; 
                 }
             } else { 
                 document.getElementById('app').innerHTML='<h1>404 Not Found</h1><p>Route: '+currentPath+'</p>'; 
@@ -175,15 +159,14 @@ const indexHtml = `<!DOCTYPE html>
 
         window.addEventListener('popstate', navigate);
         document.body.addEventListener('click', e => {
-            if(e.target.tagName==='A' && e.target.href.startsWith(window.location.origin)) {
+            const link = e.target.closest('a');
+            if (link && link.href.startsWith(window.location.origin)) {
+                if (link.target === '_blank' || e.ctrlKey) return;
                 e.preventDefault(); 
-                history.pushState(null,'',e.target.href); 
+                history.pushState(null, '', link.href); 
                 navigate();
             }
         });
-        
-        // Init Base Path immediately
-        window.LUMPIA_BASE = window.location.pathname.replace(new RegExp('/index\\\\.html$'), '').replace(new RegExp('/$'), '');
         navigate();
     </script>
 </body>
@@ -194,7 +177,7 @@ export function buildProject() {
     const dist = path.join(root, 'dist');
     const config = loadConfig(root);
     
-    console.log('🍳 Goreng Project (Mode Aman)...');
+    console.log('🍳 Goreng Project (Fix Import Jalan)...');
     if (fs.existsSync(dist)) fs.rmSync(dist, { recursive: true, force: true });
     fs.mkdirSync(dist);
 
@@ -215,5 +198,5 @@ export function buildProject() {
     
     fs.writeFileSync(path.join(dist, '.htaccess'), `<IfModule mod_rewrite.c>\nRewriteEngine On\nRewriteRule ^index\\.html$ - [L]\nRewriteCond %{REQUEST_FILENAME} !-f\nRewriteCond %{REQUEST_FILENAME} !-d\nRewriteRule . index.html [L]\n</IfModule>`);
 
-    console.log('✅ Mateng! Siap upload ke Laragon/Hosting.');
+    console.log('✅ Mateng!');
 }

package/lib/commands/serve.js

@@ -1,4 +1,12 @@
-// ... (Same KAMUS & Imports) ...
+
+import fs from 'fs';
+import path from 'path';
+import http from 'http';
+import { spawn } from 'child_process';
+import { loadEnv } from '../core/Env.js';
+import { loadConfig } from '../core/Config.js'; 
+import { browserCore } from './build.js'; // Use the same Browser Core logic
+
 const KAMUS = [
     { from: /paten\s/g, to: 'const ' },
     { from: /ono\s/g, to: 'let ' },
@@ -16,30 +24,16 @@ const KAMUS = [
     { from: /->/g, to: '.' } 
 ];
 
-import fs from 'fs';
-import path from 'path';
-import http from 'http';
-import { spawn } from 'child_process';
-import { loadEnv } from '../core/Env.js';
-import { loadConfig } from '../core/Config.js'; 
-
-function matchRoute(definedRoute, method, pathname) {
-    if (definedRoute.method !== method) return null;
-    if (definedRoute.path === pathname) return { params: {} };
-    const paramNames = [];
-    const regexPath = definedRoute.path.replace(/\{([a-zA-Z0-9_]+)\}/g, (match, name) => {
-        paramNames.push(name);
-        return '([^/]+)';
-    });
-    if (regexPath === definedRoute.path) return null;
-    const regex = new RegExp(`^${regexPath}$`);
-    const match = pathname.match(regex);
-    if (match) {
-        const params = {};
-        paramNames.forEach((name, index) => { params[name] = match[index + 1]; });
-        return { params };
-    }
-    return null;
+function transpileOnTheFly(content) {
+    let code = content;
+    code = code.replace(/from\s+['"](.+?)\.lmp['"]/g, "from '$1.js'");
+    code = code.split('\n').map(line => {
+        let l = line;
+        if (l.trim().startsWith('//')) return l;
+        KAMUS.forEach(rule => { l = l.replace(rule.from, rule.to); });
+        return l;
+    }).join('\n');
+    return code;
 }
 
 const backgroundProcess = [];
@@ -49,119 +43,138 @@ function startTailwindWatcher(root) {
     backgroundProcess.push(tailwind);
 }
 
-async function loadLumpiaModule(filePath) {
-    const originalContent = fs.readFileSync(filePath, 'utf-8');
-    const cacheDir = path.join(process.cwd(), '.lumpia', 'cache');
-    if (!fs.existsSync(cacheDir)) fs.mkdirSync(cacheDir, { recursive: true });
-    
-    const relativePath = path.relative(process.cwd(), filePath);
-    const flatName = relativePath.replace(/[\/\\]/g, '_').replace('.lmp', '.js');
-    const destPath = path.join(cacheDir, flatName);
+// Dev Template (Similar to Build index.html)
+const devIndexHtml = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>LumpiaJS (Dev)</title>
+    <script type="importmap">
+    {
+        "imports": {
+            "lumpiajs": "/core/lumpia.js"
+        }
+    }
+    </script>
+    <link rel="stylesheet" href="/public/css/style.css">
+    <script>window.LUMPIA_BASE = '';</script>
+</head>
+<body>
+    <div id="app">Loading...</div>
+    <script type="module">
+        import { Jalan } from 'lumpiajs';
+        import '/routes/web.js'; 
+        
+        async function navigate() {
+            let currentPath = window.location.pathname;
+            if (!currentPath || currentPath === '/index.html') currentPath = '/';
 
-    let transcoded = originalContent;
-    transcoded = transcoded.replace(/from\s+['"](.+?)\.lmp['"]/g, "from '$1.js'");
-    transcoded = transcoded.split('\n').map(line => {
-        let l = line;
-        if (l.trim().startsWith('//')) return l;
-        KAMUS.forEach(rule => l = l.replace(rule.from, rule.to));
-        return l;
-    }).join('\n');
+            let m = null, args = {};
+            for(let r of Jalan.routes) {
+                let regexStr = '^' + r.p.replace(/{([a-zA-Z0-9_]+)}/g, '([^/]+)') + '$';
+                let reg = new RegExp(regexStr);
+                let res = currentPath.match(reg);
+                if(res){ m=r; args=res.slice(1); break; }
+            }
 
-    fs.writeFileSync(destPath, transcoded);
-    
-    // Safety check for user forgetting npm install
-    try {
-        const module = await import('file://' + destPath + '?t=' + Date.now());
-        return module;
-    } catch (e) {
-        if (e.code === 'ERR_MODULE_NOT_FOUND' && e.message.includes('lumpiajs')) {
-            console.error('\n❌ ERROR: Gagal load "lumpiajs".');
-            console.error('💡 Sampeyan wis njalanke "npm install" durung?');
-            console.error('   Ketik: npm install\n');
-            process.exit(1);
+            if(m) {
+                const [cName, fName] = m.a.split('@');
+                try {
+                    // In Dev, we serve /app/... URLs directly map to filesystem
+                    const mod = await import('/app/controllers/'+cName+'.js?'+Date.now());
+                    const C = mod.default; const i = new C(); i.params=args;
+                    await i[fName](...args);
+                } catch(e) { 
+                    console.error(e); 
+                    document.getElementById('app').innerHTML='<h1>Dev Error</h1><pre>'+e.message+'</pre>'; 
+                }
+            } else { 
+                document.getElementById('app').innerHTML='<h1>404 Not Found</h1><p>Route: '+currentPath+'</p>'; 
+            }
         }
-        throw e;
-    }
-}
+
+        window.addEventListener('popstate', navigate);
+        document.body.addEventListener('click', e => {
+            const link = e.target.closest('a');
+            if (link && link.href.startsWith(window.location.origin)) {
+                if (link.target === '_blank' || e.ctrlKey) return;
+                e.preventDefault(); 
+                history.pushState(null, '', link.href); 
+                navigate();
+            }
+        });
+        navigate();
+    </script>
+</body>
+</html>`;
 
 export async function serveProject() {
     const root = process.cwd();
     const routesFile = path.join(root, 'routes', 'web.lmp');
-    if (!fs.existsSync(routesFile)) return console.log("❌ Not a LumpiaJS Project (Missing routes/web.lmp)");
-
-    // Pre-check node_modules
-    if (!fs.existsSync(path.join(root, 'node_modules'))) {
-        console.log("⚠️  Waduh, folder 'node_modules' ra ono!");
-        console.log("   Tolong jalanne 'npm install' sek ya, Lur.");
-        return;
-    }
+    if (!fs.existsSync(routesFile)) return console.log("❌ Not a LumpiaJS Project");
+    if (!fs.existsSync(path.join(root, 'node_modules'))) return console.log("⚠️  Please run 'npm install'");
 
-    const env = loadEnv(root);
     const config = loadConfig(root);
     if (config.klambi === 'tailwindcss') startTailwindWatcher(root);
 
-    try {
-        await loadLumpiaModule(routesFile);
-        const activeRoutes = global.LumpiaRouter || []; 
-        console.log(`🛣️  Routes registered: ${activeRoutes.length}`);
-        console.log(`✨ Mode: Semarangan (paten, ono, fungsi, aku)`);
-
-        const server = http.createServer(async (req, res) => {
-            const method = req.method;
-            const url = new URL(req.url, `http://${req.headers.host}`);
-            const pathname = url.pathname;
-
-            const publicMap = { '/css/': path.join(root, 'public', 'css'), '/vendor/': path.join(root, 'public', 'vendor') };
-            for (const [prefix, localPath] of Object.entries(publicMap)) {
-                if (pathname.startsWith(prefix)) {
-                    const filePath = path.join(localPath, pathname.slice(prefix.length));
-                    if (fs.existsSync(filePath) && fs.lstatSync(filePath).isFile()) {
-                        const ext = path.extname(filePath);
-                        const mime = ext === '.css' ? 'text/css' : (ext === '.js' ? 'text/javascript' : 'application/octet-stream');
-                        res.writeHead(200, {'Content-Type': mime});
-                        res.end(fs.readFileSync(filePath));
-                        return;
-                    }
-                }
-            }
+    console.log('🍳 Kukus Project (SPA Mode)...');
+    
+    http.createServer((req, res) => {
+        const url = new URL(req.url, `http://${req.headers.host}`);
+        let pathname = url.pathname;
+        
+        // 1. Core Library
+        if (pathname === '/core/lumpia.js') {
+            res.writeHead(200, {'Content-Type': 'text/javascript'});
+            return res.end(browserCore);
+        }
 
-            let match = null, params = {};
-            const currentRoutes = global.LumpiaRouter || [];
-            for (const route of currentRoutes) {
-                const result = matchRoute(route, method, pathname);
-                if (result) { match = route; params = result.params; break; }
+        // 2. Static Assets (Public)
+        if (pathname.startsWith('/public/')) {
+            const f = path.join(root, pathname);
+            if(fs.existsSync(f)) {
+                res.writeHead(200, {'Content-Type': pathname.endsWith('.css')?'text/css':'application/javascript'});
+                return res.end(fs.readFileSync(f));
             }
+        }
+
+        // 3. Views (Static .lmp serve)
+        // In browserCore, we fetch 'views/home.lmp'
+        // If pathname starts with /views/, serve it.
+        if (pathname.startsWith('/views/') && pathname.endsWith('.lmp')) {
+             const f = path.join(root, pathname);
+             if(fs.existsSync(f)) return res.end(fs.readFileSync(f));
+             else { res.writeHead(404); return res.end('View 404'); }
+        }
+
+        // 4. JS/LMP Modules (Transpile on fly)
+        if (pathname.endsWith('.js')) {
+            // Map .js request to .lmp file in User Project
+            // /routes/web.js -> /routes/web.lmp
+            // /app/controllers/Home.js -> /app/controllers/Home.lmp
             
-            if (match) {
-                try {
-                    const [cName, mName] = match.action.split('@');
-                    const cPath = path.join(root, 'app', 'controllers', cName + '.lmp');
-                    if (!fs.existsSync(cPath)) throw new Error('Controller Not Found');
-                    
-                    const module = await loadLumpiaModule(cPath);
-                    const Ctrl = module.default;
-                    const instance = new Ctrl();
-                    instance.env = env; instance.params = params; instance.config = config;
-                    
-                    const result = await instance[mName](...Object.values(params)); 
-                   
-                    if (result && result.type) {
-                        res.writeHead(200, {'Content-Type': result.type==='json'?'application/json':'text/html'});
-                        res.end(result.content);
-                    } else {
-                        if(result === undefined) res.end(''); 
-                        else res.end(String(result));
-                    }
-                } catch (e) {
-                    res.writeHead(500); res.end(`<pre>${e.stack}</pre>`);
-                }
-            } else {
-                res.writeHead(404); res.end('404 Not Found');
+            // Check if .lmp exists
+            const lmpPath = path.join(root, pathname.replace('.js', '.lmp'));
+            if (fs.existsSync(lmpPath)) {
+                const content = fs.readFileSync(lmpPath, 'utf8');
+                const js = transpileOnTheFly(content);
+                res.writeHead(200, {'Content-Type': 'text/javascript'});
+                return res.end(js);
             }
-        });
-        const port = 3000;
-        server.listen(port, () => console.log(`🚀 Server: http://localhost:3000`));
-    } catch (e) { 
-        if(e.code !== 'ERR_MODULE_NOT_FOUND') console.error(e); 
-    }
+            // Check if .js exists natively? (Maybe helpers)
+            const jsPath = path.join(root, pathname);
+            if (fs.existsSync(jsPath)) {
+                 res.writeHead(200, {'Content-Type': 'text/javascript'});
+                 return res.end(fs.readFileSync(jsPath));
+            }
+        }
+
+        // 5. Default Fallback -> SPA Shell (index.html)
+        // For any other route (/, /produk, etc), serve HTML
+        // Browser will then run JS, which does routing.
+        res.writeHead(200, {'Content-Type': 'text/html'});
+        res.end(devIndexHtml);
+
+    }).listen(3000, () => console.log('🚀 Server: http://localhost:3000'));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lumpiajs",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "Bahasa Pemrograman Semarangan",
   "type": "module",
   "main": "index.js",