lumpiajs 1.0.11 → 1.0.13

package/lib/commands/build.js

@@ -1,7 +1,5 @@
 
-// ... (KAMUS dan Helper functions sama seperti sebelumnya) ...
-// Saya akan fokus update browserCore dan indexHtml
-
+// ... (KAMUS same as before) ...
 const KAMUS = [
     { from: /paten\s/g, to: 'const ' },
     { from: /ono\s/g, to: 'let ' },
@@ -26,12 +24,12 @@ import { loadConfig } from '../core/Config.js';
 
 function transpileSemarangan(content) {
     let code = content;
+    // 1. Keep .lmp import relative for now, or assume .js
     code = code.replace(/from\s+['"](.+?)\.lmp['"]/g, "from '$1.js'");
-    code = code.replace(/from\s+['"]lumpiajs['"]/g, "from './core/lumpia.js'"); // FIX: Relative import to core
-
-    // Handle imports agar path-nya relatif browser freindly
-    // Jika import './...' -> aman.
-    // Jika import '/...' -> bahaya kalau di subfolder.
+    
+    // 2. DO NOT TOUCH 'lumpiajs' IMPORT.
+    // We will use Import Map in index.html to resolve 'lumpiajs' to './core/lumpia.js'
+    // This solves the relative path hell once and for all.
 
     code = code.split('\n').map(line => {
         let l = line;
@@ -52,21 +50,6 @@ function processDirectory(source, dest, rootDepth = 0) {
         } else {
             if (item.endsWith('.lmp') || item.endsWith('.js')) {
                 let content = fs.readFileSync(srcPath, 'utf8');
-                
-                // ADJUST IMPORT PATHS FOR BROWSER (CRITICAL!)
-                // Controller/Route ada di kedalaman tertentu. Core ada di /dist/core.
-                // Kita harus rewrite "from 'lumpiajs'" menjadi path relative yang benar ke core.
-                // Misal dari /app/controllers (depth 2) -> '../../core/lumpia.js'
-                
-                // Hitung relative backstep
-                let backSteps = '../'.repeat(rootDepth); 
-                // Karena structure dist:
-                // dist/routes/web.js (depth 1) -> butuh '../core/lumpia.js'
-                // dist/app/controllers/Home.js (depth 2) -> butuh '../../core/lumpia.js'
-                // Jadi logicnya benar.
-
-                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);
@@ -82,15 +65,24 @@ export class Controller {
     constructor() { this.params={}; }
     async tampil(viewName, data={}) {
         try {
-            // Fetch view relative to root (we assume <base> tag is set or we detect root)
-            // Biar aman, kita cari 'views' relatif terhadap posisi script ini? Gak bisa.
-            // Kita asumsi deployment di root atau subfolder dengan <base> tag HTML yang benar.
+            // Fetch view must be relative to root of dist.
+            // Since we use Import Map, we are modernized. 
+            // Better to assume deployment at known base or use explicit relative if possible.
+            // But fetch('views/...') is relative to current page URL.
+            // If current page is /2025/lumpiajs/produk, fetch('views/home.lmp') -> /2025/lumpiajs/views/home.lmp (Works!)
+            // Wait, if /produk is virtual path, browser thinks we are in folder /lumpiajs/.
+            // If /produk/detail/1 -> browser thinks folder is /lumpiajs/produk/detail/.
+            // Fetch 'views/...' will fail (404).
             
-            const res = await fetch('views/'+viewName+'.lmp'); 
+            // SOLUSI: Selalu fetch dari ROOT relative (pakai Window Base yang kita set di index.html)
+            const basePath = window.LUMPIA_BASE || '';
+            // Ensure slash
+            const url = basePath + '/views/' + viewName + '.lmp';
+            
+            const res = await fetch(url.replace('//', '/')); // simple cleanup
             if(!res.ok) throw new Error('View 404: ' + viewName);
             let html = await res.text();
             
-            // ... (Parsing logic same as before) ...
             const matchKulit = html.match(/<kulit>([\\s\\S]*?)<\\/kulit>/);
             const matchIsi = html.match(/<isi>([\\s\\S]*?)<\\/isi>/); 
             const matchKlambi = html.match(/<klambi>([\\s\\S]*?)<\\/klambi>/);
@@ -130,40 +122,44 @@ const indexHtml = `<!DOCTYPE html>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>LumpiaJS</title>
-    <!-- BASE HREF AUTOMATIC DETECTION MAGIC -->
-    <script>
-        // Set base href to current folder so imports work in subfolders
-        // But for SPA routing, this might fight with History API.
-        // Let's rely on relative imports './' everywhere.
-        // document.write("<base href='" + document.location.pathname.replace(/index\\.html$/,'') + "' />");
+    <!-- IMPORT MAP: KUNCI SUKSES LOAD MODULE DI SUBFOLDER -->
+    <script type="importmap">
+    {
+        "imports": {
+            "lumpiajs": "./core/lumpia.js"
+        }
+    }
     </script>
     <link rel="stylesheet" href="public/css/style.css">
+    <script>
+        // DETEKSI BASE PATH DENGAN LEBIH AMAN (Via current script location fallback)
+        // Kita ambil lokasi index.html ini sebagai 'Source of Truth' root aplikasi.
+        window.LUMPIA_BASE = window.location.pathname
+            .replace(new RegExp('/index\\\\.html$'), '')
+            .replace(new RegExp('/$'), '');
+        // console.log('Base:', window.LUMPIA_BASE);
+    </script>
 </head>
 <body>
     <div id="app">Loading...</div>
     
     <script type="module">
-        // Import paths WITHOUT leading slash to be relative to index.html
+        // Import Map makes this work:
         import { Jalan } from './routes/web.js';
         
         async function navigate() {
-            // Normalize path: Remove base folder logic needed?
-            // Simple approach: Match pathname against routes.
-            // If app is in /my-app/, and route is '/', browser pathname is '/my-app/'.
-            // WE NEED TO STRIP THE BASE PATH.
+            let currentPath = window.location.pathname;
             
-            // Hacky detection of Base Path (where index.html sits)
-            const basePath = window.location.pathname.replace(/\/index\.html$/, '').replace(/\/$/, '');
-            let currentPath = window.location.pathname.replace(/\/index\.html$/, '');
-            if (basePath && currentPath.startsWith(basePath)) {
-                currentPath = currentPath.substring(basePath.length);
+            // Normalize: Strip Base Path
+            if (window.LUMPIA_BASE && currentPath.startsWith(window.LUMPIA_BASE)) {
+                currentPath = currentPath.substring(window.LUMPIA_BASE.length);
             }
-            if (!currentPath) currentPath = '/'; // Root
+            if (!currentPath || currentPath === '/index.html') currentPath = '/';
 
             let m = null, args = {};
             for(let r of Jalan.routes) {
-                // Route defined as '/home'
-                let reg = new RegExp('^'+r.p.replace(/{([a-zA-Z0-9_]+)}/g, '([^/]+)')+'$');
+                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; }
             }
@@ -171,28 +167,35 @@ const indexHtml = `<!DOCTYPE html>
             if(m) {
                 const [cName, fName] = m.a.split('@');
                 try {
-                    // Import Relative to index.html
+                    // Import Relative to index.html (selalu root dist)
                     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>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>Path: '+currentPath+'</p>'; 
+                document.getElementById('app').innerHTML='<h1>404 Not Found</h1><p>Route: '+currentPath+'</p>'; 
             }
         }
 
         window.addEventListener('popstate', navigate);
+        
+        // SPA LINK INTERCEPTOR (SAT SET MODE)
         document.body.addEventListener('click', e => {
-            if(e.target.tagName==='A' && e.target.href.startsWith(window.location.origin)) {
+            // Cari elemen <a> (bisa jadi klik di span dalam a)
+            const link = e.target.closest('a');
+            if (link && link.href.startsWith(window.location.origin)) {
+                // Ignore if target blank or control click
+                if (link.target === '_blank' || e.ctrlKey) return;
+
                 e.preventDefault(); 
-                // Push relative path?
-                history.pushState(null,'',e.target.href); 
+                history.pushState(null, '', link.href); 
                 navigate();
             }
         });
+        
         navigate();
     </script>
 </body>
@@ -203,7 +206,7 @@ export function buildProject() {
     const dist = path.join(root, 'dist');
     const config = loadConfig(root);
     
-    console.log('🍳 Goreng Project (Mode Bahasa Semarangan + Relative Paths)...');
+    console.log('🍳 Goreng Project (Mode Import Map + Sat Set SPA)...');
     if (fs.existsSync(dist)) fs.rmSync(dist, { recursive: true, force: true });
     fs.mkdirSync(dist);
 
@@ -212,10 +215,8 @@ export function buildProject() {
         spawnSync(cmd, ['tailwindcss', '-i', './aset/css/style.css', '-o', './public/css/style.css', '--minify'], { cwd: root, stdio: 'ignore', shell: true });
     }
 
-    // Process using Relative Path Logic
-    // We pass 'rootDepth' to calculate imports to 'core'
-    processDirectory(path.join(root, 'app'), path.join(dist, 'app'), 2); // app/controllers/X -> depth 2 from dist
-    processDirectory(path.join(root, 'routes'), path.join(dist, 'routes'), 1); // routes/X -> depth 1 from dist
+    processDirectory(path.join(root, 'app'), path.join(dist, 'app'), 2); 
+    processDirectory(path.join(root, 'routes'), path.join(dist, 'routes'), 1); 
     
     fs.cpSync(path.join(root, 'views'), path.join(dist, 'views'), { recursive: true });
     if (fs.existsSync(path.join(root, 'public'))) fs.cpSync(path.join(root, 'public'), path.join(dist, 'public'), { recursive: true });
@@ -224,12 +225,7 @@ export function buildProject() {
     fs.writeFileSync(path.join(dist, 'core', 'lumpia.js'), browserCore);
     fs.writeFileSync(path.join(dist, 'index.html'), indexHtml);
     
-    // .htaccess for "Subfolder Friendly" SPA?
-    // RewriteRule ^index\.html$ - [L]
-    // RewriteCond %{REQUEST_FILENAME} !-f
-    // RewriteRule . index.html [L]
-    // Note: Removed leading slash in redirect destination to be relative
     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! (Support Subfolder Hosting)');
+    console.log('✅ Mateng! Siap dihidangkan di folder manapun.');
 }

package/lib/commands/create.js

@@ -119,5 +119,10 @@ export async function createProject(parameter) {
         fs.writeFileSync(path.join(root, 'aset', 'css', 'style.css'), '/* CSS */');
     }
 
-    console.log(`✅ Project "${projectName}" Ready!`);
+    console.log(`✅ Project "${projectName}" Siap!`);
+    console.log('-------------------------------------------');
+    console.log(`👉 cd ${projectName}`);
+    console.log(`👉 npm install  <-- OJO LALI IKI! (Wajib)`);
+    console.log(`👉 lumpia kukus`);
+    console.log('-------------------------------------------');
 }

package/lib/commands/serve.js

@@ -1,10 +1,4 @@
-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'; 
-
+// ... (Same KAMUS & Imports) ...
 const KAMUS = [
     { from: /paten\s/g, to: 'const ' },
     { from: /ono\s/g, to: 'let ' },
@@ -22,6 +16,13 @@ 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: {} };
@@ -57,18 +58,8 @@ async function loadLumpiaModule(filePath) {
     const flatName = relativePath.replace(/[\/\\]/g, '_').replace('.lmp', '.js');
     const destPath = path.join(cacheDir, flatName);
 
-    // INI DEV SERVER: Path ke Core Library bisa tetap absolute (package) atau relative
-    // Karena ini dijalankan di Node.js, 'lumpiajs' masih resolve ke node_modules dengan benar.
-    // TAPI content user (seperti `from 'lumpiajs'`) harus dijaga tetap valid buat Node.
-    // Jika user nulis `from 'lumpiajs'`, biarkan.
-    // Hanya transpile Semarangan -> JS.
-
     let transcoded = originalContent;
-    
-    // DEV MODE: Keep .lmp imports as .js imports
     transcoded = transcoded.replace(/from\s+['"](.+?)\.lmp['"]/g, "from '$1.js'");
-    // DEV MODE: Do NOT rewrite 'lumpiajs' import because Node handles it via package.json resolution
-    
     transcoded = transcoded.split('\n').map(line => {
         let l = line;
         if (l.trim().startsWith('//')) return l;
@@ -77,14 +68,33 @@ async function loadLumpiaModule(filePath) {
     }).join('\n');
 
     fs.writeFileSync(destPath, transcoded);
-    const module = await import('file://' + destPath + '?t=' + Date.now());
-    return module;
+    
+    // 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);
+        }
+        throw e;
+    }
 }
 
 export async function serveProject() {
     const root = process.cwd();
     const routesFile = path.join(root, 'routes', 'web.lmp');
-    if (!fs.existsSync(routesFile)) return console.log("❌ Missing 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;
+    }
 
     const env = loadEnv(root);
     const config = loadConfig(root);
@@ -94,18 +104,8 @@ export async function serveProject() {
         await loadLumpiaModule(routesFile);
         const activeRoutes = global.LumpiaRouter || []; 
         console.log(`🛣️  Routes registered: ${activeRoutes.length}`);
-        
-        // Cek URL, jika '/' tapi masih loading, itu karena logic view belum sempurna?
-        // Di Dev Server (Node), kita merender HTML string langsung (SSR).
-        // Jadi tidak ada masalah "loading..." dari sisi client-side fetch.
-        // Jika dev server loading terus, itu karena res.end() tidak terpanggil.
-        
-        // Periksa controller user: apakah memanggil `balek` (return)?
-        // Jika user lupa return, function return undefined.
-        // Logic di bawah menangani undefined result -> `res.end(String(result))` -> `undefined`.
-        // Browser akan menampilkan "undefined". Bukan loading terus.
-        // Loading terus biasanya hang.
-        
+        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}`);
@@ -149,7 +149,6 @@ export async function serveProject() {
                         res.writeHead(200, {'Content-Type': result.type==='json'?'application/json':'text/html'});
                         res.end(result.content);
                     } else {
-                        // FIX: Jika result null/undefined (lupa return balek), kirim response kosong atau error
                         if(result === undefined) res.end(''); 
                         else res.end(String(result));
                     }
@@ -161,6 +160,8 @@ export async function serveProject() {
             }
         });
         const port = 3000;
-        server.listen(port, () => console.log(`🚀 Server running at http://localhost:${port}`));
-    } catch (e) { console.error(e); }
+        server.listen(port, () => console.log(`🚀 Server: http://localhost:3000`));
+    } catch (e) { 
+        if(e.code !== 'ERR_MODULE_NOT_FOUND') console.error(e); 
+    }
 }

package/package.json

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