lumpiajs 1.0.7 → 1.0.9

package/README.md

@@ -1,151 +1,47 @@
 # 🥟 LumpiaJS
 
-**Bahasa Pemrograman Web dengan Kearifan Lokal Semarangan.**  
-Framework ini hadir sebagai solusi "Have Fun" bagi developer. Meskipun gayanya santai, LumpiaJS mengadopsi arsitektur **MVC (Model-View-Controller)** yang mirip banget sama framework sebelah (uhuk, Laravel). Jadi kamu bisa pakai struktur yang profesional!
+**Bahasa Pemrograman Web dengan Kearifan Lokal Semarangan.**
 
 ---
 
-## 🚀 Panduan Instalasi & Penggunaan (Lengkap)
+## 🦄 Deployment Ajaib (Universal)
 
-### Opsi A: Menggunakan Command `lumpia` (Disarankan)
+Ini fitur andalan LumpiaJS. Satu folder build (`dist`) bisa jalan di mana saja tanpa ubah kodingan.
 
-**1. Install Secara Global**
+User (Browser) akan menembak alamat `/api`.
 
-```bash
-npm install -g lumpiajs
-```
+- Jika di **Hosting PHP**, server otomatis mengarahkan ke `api.php`.
+- Jika di **Vercel/Node**, server otomatis mengarahkan ke `api.js`.
 
-**2. Buat Project Baru**
+### 1. Build Project
 
 ```bash
-lumpia create-project warung-ku
+lumpia goreng
 ```
 
-**3. Masuk & Install Dependencies (Wajib)**
+### 2. Panduan Deploy
 
-```bash
-cd warung-ku && npm install
-```
+**A. Hosting PHP / XAMPP (Apache)**
 
-**4. Jalankan Server**
+1.  Copy `dist` ke server.
+2.  Edit **`api.php`** (Isi config database).
+3.  Selesai.
+    _Server otomatis pakai `.htaccess` untuk routing._
 
-```bash
-lumpia kukus
-```
+**B. Vercel (Gratis)**
 
-_(Alias: `lumpia serve`)_
+1.  Drag `dist` ke Vercel (atau push git).
+2.  Set Environment Variables di Vercel (`DB_HOST`, `DB_USER`, dll).
+3.  Selesai.
+    _Vercel otomatis baca `vercel.json` dan pakai `api.js` sebagai serverless function._
 
----
-
-## ⚙️ Konfigurasi Environment (.env)
+**C. VPS (Node.js)**
 
-Setiap project LumpiaJS dilengkapi file `.env` di root folder.
-
-```env
-BASE_URL="http://localhost:3000"
-APP_ENV="local"
-APP_DEBUG="true"
-```
+1.  Upload `dist`.
+2.  `npm install`
+3.  `npm start`
+    _Node akan menjalankan `server.js`._
 
 ---
 
-## 🏗️ Struktur Project (Standar MVC)
-
-```
-warung-ku/
-├── app/
-│   ├── controllers/ # Otak Logika (Controller)
-│   └── models/      # Pengolah Data (Model)
-├── routes/
-│   └── web.js       # Rute URL (Jalur Akses)
-├── views/           # Tampilan (.lmp)
-├── .env             # File Konfigurasi (Environment)
-├── package.json
-└── ...
-```
-
-### 1. Routes (`routes/web.js`)
-
-Mengatur jalur URL. Sekarang sudah support parameter dinamis seperti Laravel!
-
-```javascript
-import { Jalan } from "lumpiajs";
-
-// Basic GET
-Jalan.get("/", "HomeController@index");
-
-// API (POST/PUT/DELETE)
-Jalan.post("/api/products", "ProductController@store");
-Jalan.put("/api/products/{id}", "ProductController@update");
-Jalan.delete("/api/products/{id}", "ProductController@destroy");
-
-// Dynamic Route dengan Parameter
-Jalan.get("/produk/{id}", "ProductController@show");
-Jalan.get("/kategori/{slug}", "CategoryController@index");
-```
-
-### 2. Controllers (`app/controllers`)
-
-Otak dari aplikasimu. Parameter dari route (misal `{id}`) otomatis masuk jadi argumen fungsi.
-
-```javascript
-import { Controller } from "lumpiajs";
-
-export default class ProductController extends Controller {
-  // Menangkap parameter {id} dari route
-  show(id) {
-    return this.json({
-      pesan: "Menampilkan produk dengan ID: " + id,
-      id: id,
-    });
-  }
-
-  index() {
-    return this.tampil("home", { env: this.env.APP_ENV });
-  }
-}
-```
-
-### 3. Views (`views`)
-
-File berekstensi `.lmp`.
-
-```html
-<lump>
-  <klambi> h1 { color: red; } </klambi>
-  <kulit> <h1>{{ pesan }}</h1> </kulit>
-  <isi> gawe sapa() { alert("Halo!"); } </isi>
-</lump>
-```
-
-### 4. Models (`app/models`)
-
-```javascript
-import { Model } from "lumpiajs";
-// Model.use(data).dimana('harga', '<', 5000).kabeh();
-```
-
----
-
-## 🧐 Kamus Bahasa (Transpiler)
-
-Gunakan istilah Semarangan ini di dalam tag `<isi>` file `.lmp`:
-
-| Bahasa Semarangan | JavaScript Asli |
-| :---------------- | :-------------- |
-| `ono`             | `let`           |
-| `paten`           | `const`         |
-| `gawe`            | `function`      |
-| `yen`             | `if`            |
-| `liyane`          | `else`          |
-| `mandek`          | `return`        |
-| `ora`             | `!`             |
-
----
-
-## ⚠️ DISCLAIMER
-
-**LumpiaJS ini adalah project "Have Fun" & Eksperimen Semata.**
-Gunakan dengan resiko ditanggung sendiri (_Use at your own risk_).
-
 _Dibuat dengan ❤️ dan 🥟 dari Semarang._

package/bin/lumpia.js

@@ -1,17 +1,13 @@
 #!/usr/bin/env node
 import { createProject } from '../lib/commands/create.js';
 import { serveProject } from '../lib/commands/serve.js';
+import { buildProject } from '../lib/commands/build.js'; // Import build
 
 async function main() {
     const args = process.argv.slice(2);
     const perintah = args[0];
     const parameter = args[1];
 
-    // ALIAS LIST
-    // create-project : buka-cabang
-    // serve : dodolan, kukus
-    // build : goreng
-
     if (perintah === 'create-project' || perintah === 'buka-cabang') {
         createProject(parameter);
     } 
@@ -19,8 +15,7 @@ async function main() {
         serveProject();
     }
     else if (perintah === 'goreng' || perintah === 'build') {
-        console.log("🚧 Fitur 'goreng' (build) saiki wis otomatis digabung karo 'kukus' (serve) via JIT Compiler MVC.");
-        console.log("   Silakan gunake: lumpia kukus (atau lumpia serve)");
+        buildProject(); // Activate functionality
     }
     else {
         console.log('Perintah ora dikenal / Command not recognized.');

package/index.js

@@ -1,5 +1,7 @@
 
 export { Jalan, routes } from './lib/core/Router.js';
-export { LumpiaModel as Model } from './lib/core/Model.js';
+export { LumpiaModel as Model } from './lib/core/Model.js'; // Model (Array / Static)
+export { DB } from './lib/core/DB.js'; // DB (MySQL)
 export { Controller } from './lib/core/Controller.js'; 
 export { loadEnv } from './lib/core/Env.js';
+export { loadConfig } from './lib/core/Config.js';

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

@@ -0,0 +1,380 @@
+
+import fs from 'fs';
+import path from 'path';
+import { spawnSync } from 'child_process';
+import { loadConfig } from '../core/Config.js';
+
+// --- HELPERS ---
+function transpileContent(content) {
+    let code = content;
+    code = code.replace(/from\s+['"](.+?)\.lmp['"]/g, "from '$1.js'");
+    code = code.split('\n').map(line => {
+        if (line.trim().startsWith('//')) return line;
+        return line.replace(/->/g, '.');
+    }).join('\n');
+    
+    // Rewrite imports for Browser
+    code = code.replace(/from\s+['"]lumpiajs['"]/g, "from '/core/index.js'"); 
+    code = code.replace(/from\s+['"]lumpiajs\/lib\/(.+?)['"]/g, "from '/core/$1'");
+    return code;
+}
+
+function processDirectory(source, dest) {
+    if (!fs.existsSync(dest)) fs.mkdirSync(dest, { recursive: true });
+    
+    const items = fs.readdirSync(source);
+    items.forEach(item => {
+        const srcPath = path.join(source, item);
+        const destPath = path.join(dest, item);
+        const stat = fs.statSync(srcPath);
+
+        if (stat.isDirectory()) {
+            processDirectory(srcPath, destPath);
+        } else {
+            if (item.endsWith('.lmp')) {
+                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')) {
+                 const content = fs.readFileSync(srcPath, 'utf8');
+                 const jsContent = transpileContent(content); 
+                 fs.writeFileSync(destPath, jsContent);
+            } else {
+                fs.copyFileSync(srcPath, destPath);
+            }
+        }
+    });
+}
+
+// --- 1. PHP BACKEND ADAPTER ---
+const phpBridgeContent = `<?php
+header("Access-Control-Allow-Origin: *");
+header("Access-Control-Allow-Headers: Content-Type");
+header("Content-Type: application/json");
+
+// ⚠️ EDIT CONFIG INI
+$host = "localhost";
+$user = "root";
+$pass = "";
+$db   = "lumpia_db";
+
+$conn = new mysqli($host, $user, $pass, $db);
+if ($conn->connect_error) die(json_encode(["error" => $conn->connect_error]));
+
+$input = json_decode(file_get_contents('php://input'), true);
+if (!$input) exit;
+
+try {
+    $stmt = $conn->prepare($input['sql']);
+    if($input['params']) {
+        $types = str_repeat("s", count($input['params'])); 
+        $stmt->bind_param($types, ...$input['params']);
+    }
+    $stmt->execute();
+    $res = $stmt->get_result();
+    $data = $res ? $res->fetch_all(MYSQLI_ASSOC) : ["affected" => $stmt->affected_rows];
+    echo json_encode($data);
+} catch (Exception $e) {
+    http_response_code(500);
+    echo json_encode(["error" => $e->getMessage()]);
+}
+$conn->close();
+?>`;
+
+// --- 2. NODE.JS / VERCEL BACKEND ADAPTER ---
+// Ini file 'api.js' yang akan dijalankan oleh Vercel atau Server.js local
+const nodeBridgeContent = `
+import { createPool } from 'mysql2/promise';
+
+// ⚠️ CONFIG DARI ENV (Vercel/Node style)
+const pool = createPool({
+    host: process.env.DB_HOST || 'localhost',
+    user: process.env.DB_USER || 'root',
+    password: process.env.DB_PASSWORD || '',
+    database: process.env.DB_NAME || 'lumpia_db',
+    waitForConnections: true,
+    connectionLimit: 10
+});
+
+export default async function handler(req, res) {
+    // Vercel / Express handler signature
+    if (req.method !== 'POST') {
+        res.statusCode = 405;
+        return res.end('Method Not Allowed');
+    }
+
+    try {
+        // Parsing body helper
+        let body = req.body;
+        if (typeof body === 'string') body = JSON.parse(body); // if raw string
+
+        const { sql, params } = body;
+        const [rows] = await pool.execute(sql, params);
+        
+        res.statusCode = 200;
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify(rows));
+    } catch (error) {
+        console.error(error);
+        res.statusCode = 500;
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify({ error: error.message }));
+    }
+}
+`;
+
+// --- 3. SERVER.JS (Standalone Node Server) ---
+// Server statis + API Handler
+const serverJsContent = `
+import http from 'http';
+import fs from 'fs';
+import path from 'path';
+import apiHandler from './api.js';
+
+const root = process.cwd();
+
+const server = http.createServer(async (req, res) => {
+    const url = new URL(req.url, 'http://' + req.headers.host);
+    
+    // API ROUTE
+    if (url.pathname === '/api') {
+        let body = '';
+        req.on('data', chunk => body += chunk);
+        req.on('end', () => {
+            req.body = body ? JSON.parse(body) : {};
+            apiHandler(req, res);
+        });
+        return;
+    }
+
+    // STATIC FILES
+    let filePath = path.join(root, url.pathname === '/' ? 'index.html' : url.pathname);
+    
+    // SPA Fallback: If not file, serve index.html
+    if (!fs.existsSync(filePath) || !fs.statSync(filePath).isFile()) {
+        filePath = path.join(root, 'index.html');
+    }
+
+    const ext = path.extname(filePath);
+    const mime = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css' };
+    res.writeHead(200, { 'Content-Type': mime[ext] || 'application/octet-stream' });
+    fs.createReadStream(filePath).pipe(res);
+});
+
+const port = process.env.PORT || 3000;
+server.listen(port, () => console.log('🚀 Server running on port ' + port));
+`;
+
+// --- 4. BROWSER CORE (Polymorphic Client) ---
+const browserCoreIndex = `
+export class Controller {
+    constructor() { this.env = {}; this.params = {}; }
+    
+    async tampil(viewName, data = {}) {
+        const response = await fetch('/views/' + viewName + '.lmp');
+        let html = await response.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] : '';
+        let script = matchIsi ? matchIsi[1] : '';
+        let css = matchKlambi ? matchKlambi[1] : '';
+        
+        for (const [key, value] of Object.entries(data)) {
+            const regex = new RegExp('{{\\\\s*' + key + '\\\\s*}}', 'g');
+            body = body.replace(regex, value);
+        }
+        
+        document.getElementById('app').innerHTML = body;
+        
+        if(css) {
+            const style = document.createElement('style');
+            style.textContent = css;
+            document.head.appendChild(style);
+        }
+        
+        const dict = [
+            { asal: /ono\\s/g, jadi: 'let ' }, { asal: /paten\\s/g, jadi: 'const ' },
+            { asal: /gawe\\s/g, jadi: 'function ' }, { asal: /yen\\s/g, jadi: 'if ' },
+            { asal: /liyane/g, jadi: 'else' }, { asal: /mandek;/g, jadi: 'return;' },
+            { asal: /ora\\s/g, jadi: '!' },
+        ];
+        dict.forEach(k => script = script.replace(k.asal, k.jadi));
+        
+        try { new Function(script)(); } catch(e) { console.error("Error script <isi>:", e); }
+    }
+    
+    json(data) { document.getElementById('app').innerText = JSON.stringify(data, null, 2); }
+}
+
+// POLYMORPHIC DB CLIENT
+export class DB {
+    static table(name) { return new QueryBuilder(name); }
+    static async query(sql, params) {
+        // Tembak ke endpoint /api
+        // Server (Apache/Vercel/Node) yang akan nentuin diteruske ke api.php atau api.js
+        const res = await fetch('/api', {
+            method: 'POST', 
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({sql, params})
+        });
+        return await res.json();
+    }
+}
+
+class QueryBuilder {
+    constructor(table) { this.table = table; this.conds = []; this.binds = []; }
+    where(c, o, v) { if(v===undefined){v=o;o='=';} this.conds.push(c+' '+o+' ?'); this.binds.push(v); return this; }
+    orderBy(c, d='ASC') { this.order = c+' '+d; return this; }
+    async get() {
+        let sql = 'SELECT * FROM ' + this.table;
+        if(this.conds.length) sql += ' WHERE ' + this.conds.join(' AND ');
+        if(this.order) sql += ' ORDER BY ' + this.order;
+        return await DB.query(sql, this.binds);
+    }
+}
+
+export const Jalan = {
+    routes: [],
+    get: (p, a) => Jalan.routes.push({p, a, m:'GET'}),
+    post: (p, a) => Jalan.routes.push({p, a, m:'POST'})
+};
+`;
+
+const indexHtmlContent = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LumpiaJS App</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 path = window.location.pathname;
+            let match = null, params = {};
+            for(let r of Jalan.routes) {
+                const regexStr = '^' + r.p.replace(/{([a-zA-Z0-9_]+)}/g, '([^/]+)') + '$';
+                const regex = new RegExp(regexStr);
+                const m = path.match(regex);
+                if(m) { match = r; params = m.slice(1); break; }
+            }
+
+            if(match) {
+                const [cName, mName] = match.a.split('@');
+                try {
+                    const module = await import('/app/controllers/' + cName + '.js?' + Date.now());
+                    const Controller = module.default;
+                    const ctrl = new Controller();
+                    await ctrl[mName](...params);
+                } catch(e) {
+                    document.getElementById('app').innerHTML = '<h1>Error</h1><p>' + e.message + '</p>';
+                }
+            } else {
+                 document.getElementById('app').innerHTML = '<h1>404</h1>';
+            }
+        }
+
+        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 (Universal Hybrid Build)...');
+
+    if (fs.existsSync(dist)) fs.rmSync(dist, { recursive: true, force: true });
+    fs.mkdirSync(dist);
+
+    if (config.klambi === 'tailwindcss') {
+        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: 'ignore', shell: true });
+    }
+
+    console.log('📂 Converting Code...');
+    processDirectory(path.join(root, 'app'), path.join(dist, 'app'));
+    processDirectory(path.join(root, 'routes'), path.join(dist, 'routes'));
+    
+    fs.mkdirSync(path.join(dist, 'core'), { recursive: true });
+    fs.writeFileSync(path.join(dist, 'core', 'index.js'), browserCoreIndex);
+
+    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 });
+    }
+
+    fs.writeFileSync(path.join(dist, 'index.html'), indexHtmlContent);
+    
+    // --- GENERATE ALL ADAPTERS ---
+    
+    // 1. PHP Adapter
+    fs.writeFileSync(path.join(dist, 'api.php'), phpBridgeContent);
+    
+    // 2. Node/Vercel Adapter
+    fs.writeFileSync(path.join(dist, 'api.js'), nodeBridgeContent);
+    fs.writeFileSync(path.join(dist, 'server.js'), serverJsContent);
+    fs.writeFileSync(path.join(dist, 'package.json'), JSON.stringify({
+        "type": "module",
+        "scripts": { "start": "node server.js" },
+        "dependencies": { "mysql2": "^3.0.0" }
+    }, null, 2));
+
+    // 3. Routing Rules
+    
+    // .htaccess (Apache) -> Redirect /api ke api.php
+    fs.writeFileSync(path.join(dist, '.htaccess'), `
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  
+  # API Routing: /api -> api.php
+  RewriteRule ^api$ api.php [L]
+  
+  # SPA Routing: Everything else -> index.html
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>
+`);
+
+    // vercel.json (Vercel) -> Redirect /api ke api.js
+    fs.writeFileSync(path.join(dist, 'vercel.json'), JSON.stringify({
+        "rewrites": [
+            { "source": "/api", "destination": "/api.js" },
+            { "source": "/(.*)", "destination": "/index.html" }
+        ],
+        "functions": {
+            "api.js": { "includeFiles": "package.json" }
+        }
+    }, null, 2));
+
+    console.log('✅ Mateng! (Universal Build)');
+    console.log('----------------------------------------------------');
+    console.log('📂 Folder "dist" ini UNIVERSAL:');
+    console.log('   - Hosting PHP (XAMPP/cPanel): Otomatis pake api.php (via .htaccess)');
+    console.log('   - Vercel: Otomatis pake api.js (via vercel.json)');
+    console.log('   - Node VPS: Otomatis pake api.js (via server.js)');
+    console.log('----------------------------------------------------');
+}