lumpiajs 1.0.8 → 1.0.10

package/README.md

@@ -1,72 +1,64 @@
 # 🥟 LumpiaJS
 
-**Bahasa Pemrograman Web dengan Kearifan Lokal Semarangan.**
+**"Bahasa Pemrograman Web dengan Kearifan Lokal Semarangan."**
 
----
-
-## 🦄 Fitur Unik: Laravel Syntax di JavaScript! (`->`)
-
-```javascript
-// Valid di LumpiaJS (.lmp)
-const users = await DB.table('users')->where('active', 1)->get();
-Jalan->get('/', 'HomeController@index');
-```
+Framework Static SPA 100% Client-Side. Coding pakai bahasa sehari-hari.
 
 ---
 
-## 🏗️ Cara Deploy ke Production (Server Asli)
-
-Ini yang sering ditanyain: **"Mas, file mana yang harus saya upload ke hosting?"**
+## 🗣️ Kamus Bahasa
 
-Tenang, LumpiaJS punya fitur **Goreng** (Build) biar kamu nggak bingung.
+| Semarangan    | JS Asli       | Arti                  |
+| :------------ | :------------ | :-------------------- |
+| **`aku`**     | `this`        | Diri Sendiri (Object) |
+| **`fungsi`**  | `function`    | Fungsi                |
+| **`paten`**   | `const`       | Konstan               |
+| **`ono`**     | `let`         | Ada / Variabel        |
+| **`mengko`**  | `async`       | Nanti (Async)         |
+| **`nteni`**   | `await`       | Tunggu (Await)        |
+| **`balek`**   | `return`      | Kembali               |
+| **`kandani`** | `console.log` | Bilangi               |
 
-### 1. Goreng Project (Build)
+_Plus fitur **Laravel Syntax**: `aku->tampil()`._
 
-Jalankan perintah ini di komputermu:
+**Contoh Coding (`HomeController.lmp`):**
 
-```bash
-lumpia goreng
+```javascript
+export default class HomeController extends Controller {
+    mengko index() {
+        paten pesan = 'Halo Lur!';
+
+        // Panggil fungsi view
+        balek aku->tampil('home', { msg: pesan });
+    }
+}
 ```
 
-_(Atau: `lumpia build`)_
-
-Sistem akan memasak projectmu:
-
-- Mentranspile sintaks `->` menjadi JS standard.
-- Mengkompilasi CSS (minify Tailwind/Bootstrap).
-- Menyiapkan folder `dist` yang siap saji.
-
-### 2. Upload ke Server
-
-Setelah digoreng, akan muncul folder **`dist`**.
-
-👉 **HANYA ISI FOLDER `dist`** inilah yang perlu kamu upload ke server.
-(Isinya: `server.js`, `package.json`, `.env`, folder `app`, `routes`, `views`, `public`)
+---
 
-### 3. Install & Start di Server
+## 🚀 Cara Pakai
 
-Di panel hosting (Terminal/SSH) atau VPS:
+**1. Install**
 
 ```bash
-# Masuk ke folder yang barusan diupload
-cd /path/to/your/app
+npm install -g lumpiajs
+```
 
-# Install dependencies (LumpiaJS core, mysql driver, dll)
-npm install --production
+**2. Buat Project & Develop**
 
-# Jalankan Aplikasi
-npm start
+```bash
+lumpia create-project warung-ku
+cd warung-ku && npm install
+lumpia kukus
 ```
 
----
-
-## 🗄️ Database
+**3. Build Static (Goreng)**
 
-Database (MySQL) itu **SERVICE**, bukan file. Jadi:
+```bash
+lumpia goreng
+```
 
-1.  Export database dari localhost (phpMyAdmin -> Export .sql).
-2.  Import file .sql itu ke database di server production kamu.
-3.  Edit file `.env` yang sudah diupload, sesuaikan `DB_HOST`, `DB_USER`, `DB_PASSWORD` dengan credential server.
+Upload folder `dist` kemana saja (Hosting Biasa/GitHub Pages).
 
 ---
 

package/lib/bridge/api.php

@@ -0,0 +1,59 @@
+<?php
+header("Access-Control-Allow-Origin: *");
+header("Access-Control-Allow-Headers: Content-Type");
+header("Content-Type: application/json");
+
+// CONFIG
+$host = "localhost";
+$user = "root";
+$pass = "";
+$db   = "lumpia_db";
+
+// Koneksi
+$conn = new mysqli($host, $user, $pass, $db);
+if ($conn->connect_error) {
+    die(json_encode(["status" => "error", "message" => "Connection failed: " . $conn->connect_error]));
+}
+
+// Ambil Query dari Request
+$input = json_decode(file_get_contents('php://input'), true);
+$sql = $input['sql'] ?? '';
+$params = $input['params'] ?? [];
+
+if (empty($sql)) {
+    echo json_encode(["status" => "error", "message" => "No SQL provided"]);
+    exit;
+}
+
+// SECURITY: Basic SQL Injection prevention?
+// NO, karena ini adalah 'bridge' untuk client-side DB.table().
+// User framework bertanggung jawab atas query-nya via binding params.
+// TAPI INI SANGAT BERBAHAYA JIKA DIEKPOS KE PUBLIK TANPA AUTH.
+// Untuk 'Have Fun' framework, kita biarkan dulu, tapi kasih warning.
+
+try {
+    $stmt = $conn->prepare($sql);
+    if($params) {
+        $types = str_repeat("s", count($params)); // Asumsikan string semua biar aman
+        $stmt->bind_param($types, ...$params);
+    }
+    $stmt->execute();
+    $result = $stmt->get_result();
+    
+    $data = [];
+    if($result) {
+        while ($row = $result->fetch_assoc()) {
+            $data[] = $row;
+        }
+    } else {
+        // Non-select query
+        $data = ["affected_rows" => $stmt->affected_rows];
+    }
+    
+    echo json_encode(["status" => "success", "data" => $data]);
+} catch (Exception $e) {
+    echo json_encode(["status" => "error", "message" => $e->getMessage()]);
+}
+
+$conn->close();
+?>

package/lib/commands/build.js

@@ -1,49 +1,68 @@
-import fs from 'fs';
-import path from 'path';
-import { spawnSync } from 'child_process';
-import { loadConfig } from '../core/Config.js';
 
-// Transpiler Logic (Sama kayak serve.js tapi ini permanen ke disk)
-function transpileContent(content) {
+// KAMUS SEMARANGAN (Regex Replacement Rules)
+// Urutan penting! Keyword panjang dulu baru pendek.
+const KAMUS = [
+    { from: /paten\s/g, to: 'const ' },
+    { from: /ono\s/g, to: 'let ' },
+    { from: /fungsi\s/g, to: 'function ' }, // Changed from 'gawe'
+    { from: /nteni\s/g, to: 'await ' },
+    { from: /mengko\s/g, to: 'async ' }, 
+    { from: /balek\s/g, to: 'return ' },
+    { from: /yen\s*\(/g, to: 'if(' },     
+    { from: /liyane\s/g, to: 'else ' },
+    { from: /jajal\s*\{/g, to: 'try {' },
+    { from: /gagal\s*\(/g, to: 'catch(' },
+    { from: /kandani\(/g, to: 'console.log(' },
+    { from: /aku->/g, to: 'this.' }, // NEW: this -> aku
+    { from: /aku\./g, to: 'this.' }, // Support dot notation too
+    { from: /->/g, to: '.' } 
+];
+
+function transpileSemarangan(content) {
     let code = content;
-    // 1. Import: .lmp -> .js
+    
+    // Import .lmp -> .js
     code = code.replace(/from\s+['"](.+?)\.lmp['"]/g, "from '$1.js'");
-    // 2. Syntax: "->" -> "."
+    code = code.replace(/from\s+['"]lumpiajs['"]/g, "from '/core/lumpia.js'"); 
+
+    // Safe Replace Logic
+    // We must handle this carefully to not break valid JS code if mixed.
+    // 'aku' is common word, but as keyword usually followed by -> or .
+    
     code = code.split('\n').map(line => {
-        if (line.trim().startsWith('//')) return line;
-        return line.replace(/->/g, '.');
+        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;
 }
 
+// ... Rest of build.js code (processDirectory, browserCore, indexHtml, buildProject) ...
+// ... I will copy the previous logic but update browserCore as well.
+
+import fs from 'fs';
+import path from 'path';
+import { spawnSync } from 'child_process';
+import { loadConfig } from '../core/Config.js';
+
 function processDirectory(source, dest) {
     if (!fs.existsSync(dest)) fs.mkdirSync(dest, { recursive: true });
-    
-    const items = fs.readdirSync(source);
-    items.forEach(item => {
+    fs.readdirSync(source).forEach(item => {
         const srcPath = path.join(source, item);
         const destPath = path.join(dest, item);
-        const stat = fs.statSync(srcPath);
-
-        if (stat.isDirectory()) {
+        if (fs.statSync(srcPath).isDirectory()) {
             processDirectory(srcPath, destPath);
         } else {
-            if (item.endsWith('.lmp')) {
-                // Transpile .lmp to .js
+            if (item.endsWith('.lmp') || item.endsWith('.js')) {
                 const content = fs.readFileSync(srcPath, 'utf8');
-                const jsContent = transpileContent(content);
-                const jsDest = destPath.replace('.lmp', '.js');
-                fs.writeFileSync(jsDest, jsContent);
-            } else if (item.endsWith('.js') || item.endsWith('.json') || item.endsWith('.css') || item.endsWith('.html')) {
-                // Copy as is (but maybe transpile .js too for "->" support if mixed?)
-                // For safety, let's also transpile .js files just in case user used "->" there
-                if (item.endsWith('.js')) {
-                     const content = fs.readFileSync(srcPath, 'utf8');
-                     const jsContent = transpileContent(content);
-                     fs.writeFileSync(destPath, jsContent);
-                } else {
-                     fs.copyFileSync(srcPath, destPath);
-                }
+                const jsContent = transpileSemarangan(content); 
+                const finalDest = destPath.replace('.lmp', '.js');
+                fs.writeFileSync(finalDest, jsContent);
             } else {
                 fs.copyFileSync(srcPath, destPath);
             }
@@ -51,196 +70,104 @@ function processDirectory(source, dest) {
     });
 }
 
-const serverScript = `
-import http from 'http';
-import fs from 'fs';
-import path from 'path';
-import { routes, Jalan } from 'lumpiajs/lib/core/Router.js';
-import { loadEnv } from 'lumpiajs/lib/core/Env.js';
-import { loadConfig } from 'lumpiajs/lib/core/Config.js';
-
-const root = process.cwd();
-const env = loadEnv(root);
-const config = loadConfig(root);
-
-// ROUTE MATCHER (Copied from Core)
-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;
-}
-
-async function start() {
-    // 1. Load Routes (Compiled JS)
-    const routesUrl = path.join(root, 'routes', 'web.js');
-    if (fs.existsSync(routesUrl)) {
-        await import('file://' + routesUrl);
-    } else {
-         console.error("❌ Error: routes/web.js not found in build!");
-    }
-
-    // 2. Start Server
-    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;
-
-        // Static Files
-        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 relativePath = pathname.slice(prefix.length);
-                const filePath = path.join(localPath, relativePath);
-                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;
-                }
+const browserCore = `
+export class Controller {
+    constructor() { this.params={}; }
+    async tampil(viewName, data={}) {
+        try {
+            const res = await fetch('/views/'+viewName+'.lmp');
+            if(!res.ok) throw new Error('View 404');
+            let html = await res.text();
+            
+            const matchKulit = html.match(/<kulit>([\\s\\S]*?)<\\/kulit>/);
+            const matchIsi = html.match(/<isi>([\\s\\S]*?)<\\/isi>/); 
+            const matchKlambi = html.match(/<klambi>([\\s\\S]*?)<\\/klambi>/);
+            
+            let body = matchKulit?matchKulit[1]:'', script=matchIsi?matchIsi[1]:'', css=matchKlambi?matchKlambi[1]:'';
+
+            for(const [k,v] of Object.entries(data)) {
+                let s = typeof v === 'object' ? JSON.stringify(v) : v;
+                body = body.replace(new RegExp('{{\\\\s*'+k+'\\\\s*}}','g'), s);
             }
-        }
-
-        // Routing
-        let match = null;
-        let params = {};
-        for (const route of routes) {
-            const result = matchRoute(route, method, pathname);
-            if (result) {
-                match = route;
-                params = result.params;
-                break;
+            
+            document.getElementById('app').innerHTML = body;
+            if(css && !document.getElementById('css-'+viewName)) {
+                const s = document.createElement('style'); s.id='css-'+viewName; s.textContent=css;
+                document.head.appendChild(s);
             }
-        }
-
-        if (match) {
-            try {
-                const [controllerName, methodName] = match.action.split('@');
-                const controllerPath = path.join(root, 'app', 'controllers', controllerName + '.js');
-                if (!fs.existsSync(controllerPath)) throw new Error('Controller ' + controllerName + ' not found');
-                
-                const module = await import('file://' + controllerPath);
-                const ControllerClass = module.default;
-                const instance = new ControllerClass();
-                instance.env = env;
-                instance.params = params;
-                instance.config = config;
-                
-                const result = await instance[methodName](...Object.values(params));
-                 if (result.type === 'html') {
-                    res.writeHead(200, {'Content-Type': 'text/html'});
-                    res.end(result.content);
-                } else if (result.type === 'json') {
-                    res.writeHead(200, {'Content-Type': 'application/json'});
-                    res.end(result.content);
-                } else {
-                    res.writeHead(200, {'Content-Type': 'text/plain'});
-                    res.end(String(result));
-                }
-            } catch (e) {
-                console.error(e);
-                res.writeHead(500, {'Content-Type': 'text/html'});
-                res.end('<h1>500 Server Error</h1>');
+            
+            if(script) {
+                // Client-side transpile
+                const kamus = [
+                    {f:/paten\\s/g,t:'const '}, {f:/ono\\s/g,t:'let '}, {f:/fungsi\\s/g,t:'function '},
+                    {f:/nteni\\s/g,t:'await '}, {f:/mengko\\s/g,t:'async '}, {f:/balek\\s/g,t:'return '},
+                    {f:/yen\\s*\\(/g,t:'if('}, {f:/liyane\\s/g,t:'else '}, {f:/kandani\\(/g,t:'console.log('},
+                    {f:/aku->/g,t:'this.'}, {f:/aku\\./g,t:'this.'}
+                ];
+                kamus.forEach(r => script = script.replace(r.f, r.t));
+                new Function(script)();
             }
-        } else {
-            res.writeHead(404);
-            res.end('404 Not Found');
-        }
-    });
-
-    const port = env.PORT || 3000;
-    server.listen(port, () => {
-        console.log('🚀 Production Server running on port ' + port);
-    });
+        } catch(e) { document.getElementById('app').innerHTML = e.message; }
+    }
 }
-
-start();
+export const Jalan = { routes:[], get:(p,a)=>Jalan.routes.push({p,a}) };
 `;
 
+const indexHtml = `<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>LumpiaJS</title><link rel="stylesheet" href="/public/css/style.css"></head>
+<body><div id="app">Loading...</div>
+<script type="module">
+import { Jalan } from '/routes/web.js';
+async function navigate() {
+    const p = window.location.pathname;
+    let m = null, args = {};
+    for(let r of Jalan.routes) {
+        let reg = new RegExp('^'+r.p.replace(/{([a-zA-Z0-9_]+)}/g, '([^/]+)')+'$');
+        let res = p.match(reg);
+        if(res){ m=r; args=res.slice(1); break; }
+    }
+    if(m) {
+        const [cName, fName] = m.a.split('@');
+        try {
+            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='Error'; }
+    } else { document.getElementById('app').innerHTML='404'; }
+}
+window.addEventListener('popstate', navigate);
+document.body.addEventListener('click', e => {
+    if(e.target.tagName==='A' && e.target.href.startsWith(window.location.origin)) {
+        e.preventDefault(); history.pushState(null,'',e.target.href); navigate();
+    }
+});
+navigate();
+</script></body></html>`;
+
 export function buildProject() {
     const root = process.cwd();
     const dist = path.join(root, 'dist');
     const config = loadConfig(root);
-
-    console.log('🍳 Mulai Menggoreng (Building Project)...');
-
-    // 1. Cleanup Old Dist
-    if (fs.existsSync(dist)) {
-        fs.rmSync(dist, { recursive: true, force: true });
-    }
+    
+    console.log('🍳 Goreng Project (Mode Bahasa Semarangan)...');
+    if (fs.existsSync(dist)) fs.rmSync(dist, { recursive: true, force: true });
     fs.mkdirSync(dist);
 
-    // 2. Build Assets (Tailwind)
     if (config.klambi === 'tailwindcss') {
-        console.log('🎨 Compiling Tailwind CSS (Minified)...');
         const cmd = process.platform === 'win32' ? 'npx.cmd' : 'npx';
-        spawnSync(cmd, ['tailwindcss', '-i', './aset/css/style.css', '-o', './public/css/style.css', '--minify'], { 
-            cwd: root, stdio: 'inherit', shell: true 
-        });
+        spawnSync(cmd, ['tailwindcss', '-i', './aset/css/style.css', '-o', './public/css/style.css', '--minify'], { cwd: root, stdio: 'ignore', shell: true });
     }
 
-    // 3. Copy & Transpile Code
-    console.log('📂 Copying & Transpiling (.lmp -> .js)...');
     processDirectory(path.join(root, 'app'), path.join(dist, 'app'));
     processDirectory(path.join(root, 'routes'), path.join(dist, 'routes'));
-    processDirectory(path.join(root, 'views'), path.join(dist, 'views')); // Views .lmp usually not imported, but kept as is? OR Transpiled?
-    // Wait, View.js reads raw .lmp file content. So views should strictly be copied AS IS, or renamed to .lmp but content untouched generally?
-    // Actually View.js `renderLumpia` expects file path.
-    // Let's COPY views folder AS IS (recursive copy), no renaming extensions usually needed for View Engine unless we change View.js to look for .html?
-    // Lumpia View Engine expects `<lump>` tags. 
-    // Let's just copy views folder using simple copy to ensure .lmp extension stays for view engine to find it.
-    
-    // RE-DO views copy: FORCE copy only
-    // Overwrite the 'processDirectory' for views to be simple copy
     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 });
 
-    // 4. Copy Static Assets
-    if (fs.existsSync(path.join(root, 'public'))) {
-        fs.cpSync(path.join(root, 'public'), path.join(dist, 'public'), { recursive: true });
-    }
-    
-    // 5. Configs & Env
-    fs.copyFileSync(path.join(root, 'package.json'), path.join(dist, 'package.json'));
-    fs.copyFileSync(path.join(root, 'config.lmp'), path.join(dist, 'config.lmp'));
-    if (fs.existsSync(path.join(root, '.env'))) {
-        fs.copyFileSync(path.join(root, '.env'), path.join(dist, '.env'));
-    }
-
-    // 6. Generate Standalone Server Entry
-    fs.writeFileSync(path.join(dist, 'server.js'), serverScript);
-
-    // 7. Update package.json in dist
-    const pkg = JSON.parse(fs.readFileSync(path.join(dist, 'package.json'), 'utf8'));
-    pkg.scripts = {
-        "start": "node server.js"
-    };
-    // Ensure lumpiajs dependency is preserved
-    fs.writeFileSync(path.join(dist, 'package.json'), JSON.stringify(pkg, null, 2));
+    fs.mkdirSync(path.join(dist, 'core'), { recursive: true });
+    fs.writeFileSync(path.join(dist, 'core', 'lumpia.js'), browserCore);
+    fs.writeFileSync(path.join(dist, 'index.html'), indexHtml);
+    fs.writeFileSync(path.join(dist, '.htaccess'), `<IfModule mod_rewrite.c>\nRewriteEngine On\nRewriteBase /\nRewriteRule ^index\\.html$ - [L]\nRewriteCond %{REQUEST_FILENAME} !-f\nRewriteCond %{REQUEST_FILENAME} !-d\nRewriteRule . /index.html [L]\n</IfModule>`);
 
-    console.log('✅ Mateng! (Build Finished)');
-    console.log('----------------------------------------------------');
-    console.log('🎁 Yang harus dikirim ke Server (Production):');
-    console.log('   📂 Folder: dist/');
-    console.log('');
-    console.log('👉 Cara Deploy:');
-    console.log('   1. Upload isi folder "dist" ke server.');
-    console.log('   2. Jalankan "npm install --production" di server.');
-    console.log('   3. Jalankan "npm start".');
-    console.log('----------------------------------------------------');
+    console.log('✅ Mateng! (Support Bahasa Semarangan)');
 }

package/lib/commands/create.js

@@ -4,155 +4,84 @@ import prompts from 'prompts';
 
 const routesTemplate = `import { Jalan } from 'lumpiajs';
 
-// Pakai gaya Laravel (->) enak to?
 Jalan->get('/', 'HomeController@index');
-Jalan->get('/db-test', 'HomeController@testDb');
-Jalan->get('/profile', 'HomeController@profile');
-Jalan->get('/api/products', 'ProductController@index');
+Jalan->get('/toko', 'ProductController@tampilBarang');
 `;
 
-const controllerTemplate = `import { Controller, DB } from 'lumpiajs';
+const controllerTemplate = `import { Controller } from 'lumpiajs';
 
 export default class HomeController extends Controller {
-    index() {
-        // "this.tampil" juga bisa ditulis "this->tampil"
-        // Transpiler LumpiaJS sing ngatur, Bos!
-        return this->tampil('home', { 
-            message: 'Welcome to LumpiaJS MVC!',
-            author: 'Pakdhe Koding',
-            env: this.env.APP_ENV
+    mengko index() {
+        // Pake Bahasa Semarangan, Lur!
+        paten pesen = 'Sugeng Rawuh di Website Statis!';
+        
+        // 'aku' menggantikan 'this'
+        balek aku->tampil('home', { 
+            message: pesen,
+            info: 'Dibuat dengan LumpiaJS'
         });
     }
-
-    async testDb() {
-        try {
-            // CONTOH QUERY ALA LARAVEL
-            // Pake tanda panah -> biar mantap
-            const result = await DB.table('users')
-                                   ->limit(1)
-                                   ->get();
-            
-            // Raw Query
-            const raw = await DB->query('SELECT 1 + 1 AS solution');
-            
-            return this->json({
-                status: 'Connected!',
-                sample_user: result,
-                math_check: raw[0].solution
-            });
-        } catch (e) {
-            return this->json({ error: e.message });
-        }
-    }
-
-    profile() {
-        return this->tampil('profile', { name: 'Loyal User' });
-    }
 }
 `;
 
-const modelTemplate = `// Example dummy data (Static)
-const productData = [
-    { id: 1, name: 'Lumpia Basah', price: 5000 },
-    { id: 2, name: 'Lumpia Goreng', price: 6000 }
-];
-export default productData;
-`;
-
-const productControllerTemplate = `import { Controller, Model } from 'lumpiajs';
-import ProductData from '../../app/models/Product.lmp'; 
+const productControllerTemplate = `import { Controller } from 'lumpiajs';
 
 export default class ProductController extends Controller {
-    index() {
-        // Model Static juga bisa pakai ->
-        const result = Model->use(ProductData)
-                        ->dimana('price', '>', 5500)
-                        ->jupuk();
+    mengko tampilBarang() {
+        // Contoh API
+        ono data = [];
+        
+        jajal {
+            paten respon = nteni fetch('https://fakestoreapi.com/products?limit=3');
+            data = nteni respon.json();
+            kandani('Data sukses!');
+        } gagal (e) {
+            kandani(e);
+        }
 
-        return this->json({ status: 'success', data: result });
+        balek aku->tampil('product', { 
+            daftar: data.map(i => '<li>' + i.title + '</li>').join('')
+        });
     }
 }
 `;
 
-const viewProfileTemplate = `<lump>
+const homeViewTemplate = `<lump>
+  <klambi>
+      h1 { color: #d35400; text-align: center; }
+  </klambi>
   <kulit>
-    <div class="container mt-5">
-        <h1>User Profile</h1>
-        <p>Hello, <strong>{{ name }}</strong>!</p>
-        <a href="/" class="btn btn-secondary">Back Home</a>
+    <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>`;
 
-const envTemplate = `
-BASE_URL="http://localhost:3000"
-APP_ENV="local"        
-APP_DEBUG="true"
-
-# Database Config
-DB_HOST="localhost"
-DB_USER="root"
-DB_PASSWORD=""
-DB_NAME="lumpia_db"
-`;
-
-// Helper for CSS/View generation (Collapsed for brevity but functional as before)
-const tailwindConfigTemplate = `/** @type {import('tailwindcss').Config} */
-module.exports = { content: ["./views/**/*.{html,js,lmp}"], theme: { extend: {}, }, plugins: [], }`;
-const mainCssTemplate = `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n`;
-
-const generateHomeView = (style) => {
-    let css = '', html = '';
-    if (style === 'bootstrap') {
-        html = `
-    <div class="container mt-5">
-        <div class="card shadow">
-            <div class="card-body text-center">
-                <h1 class="text-primary">{{ message }}</h1>
-                <span class="badge bg-secondary mb-3">Env: {{ env }}</span>
-                <p>Created by: <strong>{{ author }}</strong></p>
-                <div class="mt-4">
-                    <a href="/db-test" class="btn btn-warning">Test DB (Laravel Style)</a>
-                    <a href="/profile" class="btn btn-link">Go to Profile</a>
-                </div>
-            </div>
-        </div>
-    </div>`;
-    } else if (style === 'tailwindcss') {
-        html = `
-    <div class="container mx-auto mt-10 p-5">
-        <div class="bg-white shadow-lg rounded-lg p-8 text-center border border-gray-200">
-            <h1 class="text-4xl font-bold text-orange-600 mb-4">{{ message }}</h1>
-            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mb-4">Env: {{ env }}</span>
-            <div class="mt-6 space-x-4">
-                <a href="/db-test" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">Test DB</a>
-                <a href="/profile" class="text-blue-500 hover:text-blue-800">Go to Profile</a>
-            </div>
-        </div>
-    </div>`;
-    } else {
-        css = `h1{text-align:center} .box{text-align:center;margin-top:20px}`;
-        html = `<div class="box"><h1>{{ message }}</h1><p>Env: {{ env }}</p><a href="/db-test">Test DB</a> | <a href="/profile">Profile</a><br>(Check Controller for Laravel Syntax Demo)</div>`;
-    }
-    return `<lump><klambi>${css}</klambi><kulit>${html}</kulit><isi></isi></lump>`;
-};
+const productViewTemplate = `<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>`;
 
 const generatePackageJson = (name, style) => {
-    const scripts = { "start": "lumpia kukus", "serve": "lumpia kukus" };
-    const dependencies = { "lumpiajs": "latest" };
-    const devDependencies = {};
-    if (style === 'tailwindcss') {
-        devDependencies["tailwindcss"] = "^3.4.0";
-        devDependencies["postcss"] = "^8.4.0";
-        devDependencies["autoprefixer"] = "^10.4.0";
-    } else if (style === 'bootstrap') dependencies["bootstrap"] = "^5.3.0";
-    return JSON.stringify({ name, version: "1.0.0", main: "routes/web.lmp", type: "module", scripts, dependencies, devDependencies }, null, 2);
+    return JSON.stringify({ 
+        name, version: "1.0.0", type: "module", 
+        scripts: { "start": "lumpia kukus", "build": "lumpia goreng" },
+        dependencies: { "lumpiajs": "latest" },
+        devDependencies: style==='tailwindcss'?{"tailwindcss":"^3.4.0"}:{}
+    }, null, 2);
 };
 
 export async function createProject(parameter) {
     let projectName = parameter;
     if (!projectName) {
-        const res = await prompts({ type: 'text', name: 'val', message: 'Jeneng project?', initial: 'my-app' });
+        const res = await prompts({ type: 'text', name: 'val', message: 'Jeneng project?', initial: 'my-lumpia-app' });
         projectName = res.val;
     }
     if (!projectName) return;
@@ -162,42 +91,33 @@ export async function createProject(parameter) {
 
     const styleRes = await prompts({
         type: 'select', name: 'val', message: 'Styling?',
-        choices: [{title:'Vanilla',value:'none'},{title:'Tailwind',value:'tailwindcss'},{title:'Bootstrap',value:'bootstrap'}],
+        choices: [{title:'Vanilla',value:'none'},{title:'Tailwind',value:'tailwindcss'}],
         initial: 0
     });
-    const style = styleRes.val;
-    if (!style) return;
 
-    // Structure
     fs.mkdirSync(root);
     fs.mkdirSync(path.join(root, 'app', 'controllers'), { recursive: true });
-    fs.mkdirSync(path.join(root, 'app', 'models'), { recursive: true });
     fs.mkdirSync(path.join(root, 'routes'));
     fs.mkdirSync(path.join(root, 'views'));
     fs.mkdirSync(path.join(root, 'aset', 'css'), { recursive: true });
     fs.mkdirSync(path.join(root, 'public', 'css'), { recursive: true });
 
-    // Files
-    fs.writeFileSync(path.join(root, 'package.json'), generatePackageJson(projectName, style));
+    fs.writeFileSync(path.join(root, 'package.json'), generatePackageJson(projectName, styleRes.val));
     fs.writeFileSync(path.join(root, '.gitignore'), `.lumpia\nnode_modules\n.env\n`);
-    fs.writeFileSync(path.join(root, '.env'), envTemplate);
-    fs.writeFileSync(path.join(root, 'config.lmp'), JSON.stringify({ klambi: style }, null, 2));
+    fs.writeFileSync(path.join(root, 'config.lmp'), JSON.stringify({ klambi: styleRes.val }, null, 2));
 
     fs.writeFileSync(path.join(root, 'routes', 'web.lmp'), routesTemplate);
     fs.writeFileSync(path.join(root, 'app', 'controllers', 'HomeController.lmp'), controllerTemplate);
     fs.writeFileSync(path.join(root, 'app', 'controllers', 'ProductController.lmp'), productControllerTemplate);
-    fs.writeFileSync(path.join(root, 'app', 'models', 'Product.lmp'), modelTemplate);
-    fs.writeFileSync(path.join(root, 'views', 'home.lmp'), generateHomeView(style));
-    fs.writeFileSync(path.join(root, 'views', 'profile.lmp'), viewProfileTemplate);
+    fs.writeFileSync(path.join(root, 'views', 'home.lmp'), homeViewTemplate);
+    fs.writeFileSync(path.join(root, 'views', 'product.lmp'), productViewTemplate);
     
-    // Style Assets
-    if (style === 'tailwindcss') {
-        fs.writeFileSync(path.join(root, 'tailwind.config.js'), tailwindConfigTemplate);
-        fs.writeFileSync(path.join(root, 'aset', 'css', 'style.css'), mainCssTemplate);
+    if (styleRes.val === 'tailwindcss') {
+        fs.writeFileSync(path.join(root, 'tailwind.config.js'), `module.exports={content:["./views/**/*.lmp"],theme:{extend:{}},plugins:[]}`);
+        fs.writeFileSync(path.join(root, 'aset', 'css', 'style.css'), '@tailwind base; @tailwind components; @tailwind utilities;');
     } else {
-        fs.writeFileSync(path.join(root, 'aset', 'css', 'style.css'), style === 'bootstrap' ? '/* Bootstrap Imported in HTML */' : '/* CSS */');
+        fs.writeFileSync(path.join(root, 'aset', 'css', 'style.css'), '/* CSS */');
     }
 
     console.log(`✅ Project "${projectName}" Ready!`);
-    console.log(`cd ${projectName} && npm install && lumpia kukus`);
 }

package/lib/commands/serve.js

@@ -1,59 +1,57 @@
+
+// KAMUS SEMARANGAN (Regex Replacement Rules)
+const KAMUS = [
+    { from: /paten\s/g, to: 'const ' },
+    { from: /ono\s/g, to: 'let ' },
+    { from: /fungsi\s/g, to: 'function ' }, 
+    { from: /nteni\s/g, to: 'await ' },
+    { from: /mengko\s/g, to: 'async ' }, 
+    { from: /balek\s/g, to: 'return ' },
+    { from: /yen\s*\(/g, to: 'if(' },     
+    { from: /liyane\s/g, to: 'else ' },
+    { from: /jajal\s*\{/g, to: 'try {' },
+    { from: /gagal\s*\(/g, to: 'catch(' },
+    { from: /kandani\(/g, to: 'console.log(' },
+    { from: /aku->/g, to: 'this.' },
+    { from: /aku\./g, to: 'this.' },
+    { from: /->/g, to: '.' } 
+];
+
 import fs from 'fs';
 import path from 'path';
 import http from 'http';
 import { spawn } from 'child_process';
-import { routes } from '../core/Router.js';
-import { renderLumpia } from '../core/View.js';
 import { loadEnv } from '../core/Env.js';
 import { loadConfig } from '../core/Config.js'; 
 
-const cliPackageJson = JSON.parse(fs.readFileSync(new URL('../../package.json', import.meta.url)));
+// ... Same helper functions (matchRoute, backgroundProcess, startTailwindWatcher) ...
 
-// Helper to Match Routes
 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]; 
-        });
+        paramNames.forEach((name, index) => { params[name] = match[index + 1]; });
         return { params };
     }
     return null;
 }
 
 const backgroundProcess = [];
-
 function startTailwindWatcher(root) {
-    console.log('🎨 TailwindCSS detected! Starting watcher...');
     const cmd = process.platform === 'win32' ? 'npx.cmd' : 'npx';
-    const tailwind = spawn(cmd, [
-        'tailwindcss', '-i', './aset/css/style.css', '-o', './public/css/style.css', '--watch'
-    ], { cwd: root, stdio: 'inherit', shell: true });
+    const tailwind = spawn(cmd, ['tailwindcss', '-i', './aset/css/style.css', '-o', './public/css/style.css', '--watch'], { cwd: root, stdio: 'ignore', shell: true });
     backgroundProcess.push(tailwind);
 }
 
-function handleBootstrap(root) {
-    const bootDestDist = path.join(root, 'public', 'vendor', 'bootstrap');
-    const bootSrc = path.join(root, 'node_modules', 'bootstrap', 'dist');
-    if (fs.existsSync(bootSrc) && !fs.existsSync(bootDestDist)) {
-        console.log('📦 Menyalin library Bootstrap ke public...');
-        try { fs.cpSync(bootSrc, bootDestDist, { recursive: true }); } catch(e) {}
-    }
-}
-
-// LOADER UTAMA UNTUK .lmp (Controller/Model/Routes)
 async function loadLumpiaModule(filePath) {
     const originalContent = fs.readFileSync(filePath, 'utf-8');
     const cacheDir = path.join(process.cwd(), '.lumpia', 'cache');
@@ -63,72 +61,45 @@ async function loadLumpiaModule(filePath) {
     const flatName = relativePath.replace(/[\/\\]/g, '_').replace('.lmp', '.js');
     const destPath = path.join(cacheDir, flatName);
 
-    // --- TRANSPILE LOGIC ---
     let transcoded = originalContent;
-
-    // 1. Replace Imports: .lmp -> .js
     transcoded = transcoded.replace(/from\s+['"](.+?)\.lmp['"]/g, "from '$1.js'");
 
-    // 2. SYNTAX LARAVEL -> JS (Fitur Request User: "->")
-    // Mengubah tanda panah "->" menjadi titik "." 
-    // Hati-hati: Kita coba sebisa mungkin tidak mengubah "->" yang ada di dalam string.
-    // Regex ini mencari "->" yang TIDAK diapit kutip (Simpel, mungkin tidak 100% sempurna tapi cukup untuk have fun)
-    // Atau kita brute force saja asalkan user tahu resikonya.
-    // Kita gunakan pendekatan brute replace tapi hindari arrow function "=>" (aman karena beda karakter)
-    
-    // Replace "->" dengan "."
     transcoded = transcoded.split('\n').map(line => {
-        // Cek komentar //
-        if (line.trim().startsWith('//')) return line;
-        
-        // Simple replace "->" to "."
-        // Note: Ini akan mengubah string "go -> to" menjadi "go . to". 
-        // Untuk framework "Have Fun", ini fitur, bukan bug. XD
-        return line.replace(/->/g, '.');
+        let l = line;
+        if (l.trim().startsWith('//')) return l;
+        KAMUS.forEach(rule => l = l.replace(rule.from, rule.to));
+        return l;
     }).join('\n');
 
     fs.writeFileSync(destPath, transcoded);
-    
-    // 4. Import file .js
     const module = await import('file://' + destPath + '?t=' + Date.now());
     return module;
 }
 
-
 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)");
+    if (!fs.existsSync(routesFile)) return console.log("❌ Missing routes/web.lmp");
 
     const env = loadEnv(root);
     const config = loadConfig(root);
-
     if (config.klambi === 'tailwindcss') startTailwindWatcher(root);
-    else if (config.klambi === 'bootstrap') handleBootstrap(root);
 
     try {
         await loadLumpiaModule(routesFile);
-        console.log(`🛣️  Routes registered: ${routes.length}`);
-        
-        // Info Syntax
-        console.log(`✨ Syntax Mode: PHP/Laravel Style (->) is enabled in .lmp files!`);
+        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;
 
-            if (env.APP_DEBUG === 'true') console.log(`📥 ${method} ${pathname}`);
-
-            const publicMap = {
-                '/css/': path.join(root, 'public', 'css'),
-                '/vendor/': path.join(root, 'public', 'vendor')
-            };
+            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 relativePath = pathname.slice(prefix.length);
-                    const filePath = path.join(localPath, relativePath);
+                    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');
@@ -139,71 +110,39 @@ export async function serveProject() {
                 }
             }
 
-            let match = null;
-            let params = {};
-            for (const route of routes) {
+            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;
-                }
+                if (result) { match = route; params = result.params; break; }
             }
             
             if (match) {
                 try {
-                    const [controllerName, methodName] = match.action.split('@');
-                    const controllerPath = path.join(root, 'app', 'controllers', controllerName + '.lmp');
-                    
-                    if (!fs.existsSync(controllerPath)) throw new Error(`Controller ${controllerName} not found!`);
+                    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(controllerPath);
-                    const ControllerClass = module.default;
-                    const instance = new ControllerClass();
+                    const module = await loadLumpiaModule(cPath);
+                    const Ctrl = module.default;
+                    const instance = new Ctrl();
+                    instance.env = env; instance.params = params; instance.config = config;
                     
-                    instance.env = env;
-                    instance.params = params;
-                    instance.config = config;
-
-                    if (typeof instance[methodName] !== 'function') throw new Error(`Method ${methodName} missing`);
-
-                    const args = Object.values(params);
-                    const result = await instance[methodName](...args); 
-
-                    if (result.type === 'html') {
-                        res.writeHead(200, {'Content-Type': 'text/html'});
-                        res.end(result.content);
-                    } else if (result.type === 'json') {
-                        res.writeHead(200, {'Content-Type': 'application/json'});
+                    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 {
-                        res.writeHead(200, {'Content-Type': 'text/plain'});
                         res.end(String(result));
                     }
                 } catch (e) {
-                    console.error(e);
-                    const errorMsg = env.APP_DEBUG === 'true' ? `<pre>${e.stack}</pre>` : `<h1>Server Error</h1>`;
-                    res.writeHead(500, {'Content-Type': 'text/html'});
-                    res.end(errorMsg);
+                    res.writeHead(500); res.end(`<pre>${e.stack}</pre>`);
                 }
             } else {
-                res.writeHead(404, {'Content-Type': 'text/html'});
-                res.end('<h1>404 Not Found</h1>');
+                res.writeHead(404); res.end('404 Not Found');
             }
         });
-
-        const port = 3000;
-        server.listen(port, () => {
-            console.log(`🚀 Server running at ${env.BASE_URL || 'http://localhost:3000'}`);
-        });
-
-        process.on('SIGINT', () => {
-            backgroundProcess.forEach(p => p.kill());
-            try { fs.rmSync(path.join(root, '.lumpia'), { recursive: true, force: true }); } catch(e){}
-            process.exit();
-        });
-
-    } catch (err) {
-        console.error('Fatal Error:', err);
-    }
+        server.listen(3000, () => console.log('🚀 Server: http://localhost:3000'));
+    } catch (e) { console.error(e); }
 }

package/lib/core/DBClient.js

@@ -0,0 +1,54 @@
+export class DB {
+    static async query(sql, params = []) {
+        // Cek mode: Node.js (Server) atau Browser (Client - Build HTML)
+        if (typeof window === 'undefined') {
+            // --- SERVER SIDE (NODE) ---
+            // Import native mysql driver dynamically to avoid bundle errors in browser
+            const { createPool } = await import('mysql2/promise');
+             // ... logic koneksi nodejs lama ...
+             return []; // placeholder
+        } else {
+            // --- CLIENT SIDE (BROWSER) ---
+            // Tembak ke file PHP Bridge
+            const response = await fetch('/api.php', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ sql, params })
+            });
+            const json = await response.json();
+            if(json.status === 'error') throw new Error(json.message);
+            return json.data;
+        }
+    }
+    
+    static table(name) {
+        return new QueryBuilder(name);
+    }
+}
+
+class QueryBuilder {
+    constructor(table) {
+        this.tableName = table;
+        this.conditions = [];
+        this.bindings = [];
+        this.selects = '*';
+        this.limitVal = null;
+        this.orderByRaw = null;
+    }
+    
+    select(fields) { this.selects = fields; return this; }
+    where(col, op, val) { if (val === undefined) { val = op; op = '='; } this.conditions.push(`${col} ${op} ?`); this.bindings.push(val); return this; }
+    orderBy(col, dir='ASC') { this.orderByRaw = `${col} ${dir}`; return this; }
+    take(n) { this.limitVal = n; return this; }
+
+    async get() {
+        let sql = `SELECT ${this.selects} FROM ${this.tableName}`;
+        if (this.conditions.length > 0) sql += ' WHERE ' + this.conditions.join(' AND ');
+        if (this.orderByRaw) sql += ' ORDER BY ' + this.orderByRaw;
+        if (this.limitVal) sql += ' LIMIT ' + this.limitVal;
+        
+        return await DB.query(sql, this.bindings);
+    }
+    
+    // ... insert/update/delete logic similar ...
+}

package/package.json

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