lumpiajs 1.0.2 → 1.0.5

package/README.md

@@ -0,0 +1,196 @@
+# 🥟 LumpiaJS
+
+**Bahasa Pemrograman Web dengan Kearifan Lokal Semarangan.**  
+_Framework ini dibuat untuk seru-seruan (have fun) dan biar bikin web jadi lebih cepat dan menyenangkan!_ (Rencananya sih gitu... wkwkwk)
+
+## 🚀 Cara Pakai (Quick Start)
+
+Kamu bisa pilih cara yang paling enak buat mulai bikin (masak) web:
+
+### 1. Langsung Gas (Tanpa Install)
+
+Kalau malas install-install, pastikan komputer kamu sudah ada Node.js, lalu langsung aja pakai `npx`:
+
+**Langkah 1: Buat Project**
+
+```bash
+npx lumpiajs create-project warung-ku
+```
+
+_(Atau pakai istilah lokal: `npx lumpiajs buka-cabang warung-ku`)_
+
+**Langkah 2: Masuk & Install Bumbu (Dependencies)**
+Penting! Kamu harus install dependencies biar `import` framework-nya jalan.
+
+```bash
+cd warung-ku
+npm install
+```
+
+**Langkah 3: Nyalakan Kompor (Server)**
+
+```bash
+npm start
+```
+
+_(Atau manual: `npx lumpia dodolan`)_
+Websitemu bakal jalan di `http://localhost:3000`.
+
+---
+
+### 2. Install Global (Biar Bisa Dipakai Terus)
+
+Kalau kamu pengen perintah `lumpia` bisa dipanggil dari mana saja di terminal:
+
+```bash
+# 1. Install dulu secara global
+npm install -g lumpiajs
+
+# 2. Bikin project baru
+lumpia create-project toko-lumpia
+
+# 3. Masuk folder & install npm
+cd toko-lumpia
+npm install
+
+# 4. Jalanin server
+lumpia dodolan
+```
+
+**Cara Update ke Versi Terbaru:**
+
+```bash
+npm install -g lumpiajs@latest
+```
+
+---
+
+## 🏗️ Struktur Project (Standar MVC)
+
+LumpiaJS sekarang menggunakan arsitektur **MVC (Model-View-Controller)** yang mengikuti standar internasional, jadi developer Laravel atau Express pasti langsung paham.
+
+```
+warung-ku/
+├── app/
+│   ├── controllers/ # Otak Logika (Controller)
+│   └── models/      # Pengolah Data (Model)
+├── routes/
+│   └── web.js       # Rute URL
+├── views/           # Tampilan (.lmp)
+├── package.json
+└── ...
+```
+
+### 1. Routes (`routes/web.js`)
+
+Tempat mengatur alamat URL web kamu.
+
+```javascript
+import { Jalan } from "lumpiajs";
+
+// Jalan.gawe(url, 'NamaController@method')
+Jalan.gawe("/", "HomeController@index");
+Jalan.gawe("/api/products", "ProductController@index");
+```
+
+### 2. Controllers (`app/controllers`)
+
+Otak dari aplikasimu. Class harus meng-extend `Controller`.
+
+```javascript
+import { Controller } from "lumpiajs";
+
+export default class HomeController extends Controller {
+  index() {
+    // Tampilkan file di folder views/home.lmp
+    // Kirim data 'pesan' ke view
+    return this.tampil("home", {
+      pesan: "Halo Dunia!",
+      tanggal: new Date().toLocaleDateString(),
+    });
+  }
+}
+```
+
+### 3. Views (`views`)
+
+File `.lmp` adalah tempat kamu menulis HTML, CSS, dan JS Semarangan dalam satu file.
+Gunakan `{{ nama_variabel }}` untuk menampilkan data dari Controller.
+
+```html
+<lump>
+  <klambi> /* CSS di sini */ h1 { color: #d35400; } </klambi>
+
+  <kulit>
+    <!-- HTML di sini -->
+    <h1>{{ pesan }}</h1>
+    <p>Tanggal server: {{ tanggal }}</p>
+  </kulit>
+
+  <isi>
+    // JavaScript Client-side (Bahasa Semarangan) gawe sapa() { alert("Halo,
+    Lur!"); }
+  </isi>
+</lump>
+```
+
+### 4. Models (`app/models`)
+
+Tempat mengolah data (Database/API). Mendukung gaya penulisan ala Eloquent.
+
+```javascript
+import { Model } from "lumpiajs";
+
+// Contoh penggunaan di Controller:
+// Model.use(dataProduk).dimana('harga', '<', 5000).kabeh();
+```
+
+---
+
+## 🧐 Kamus Bahasa (Transpiler)
+
+Khusus di dalam tag **`<isi>`** (pada file `.lmp`), kamu bisa menggunakan sintaks unik ini:
+
+- `ono` ➔ `let`
+- `paten` ➔ `const`
+- `gawe` ➔ `function`
+- `yen` ➔ `if`
+- `liyane` ➔ `else`
+- `mandek` ➔ `return`
+- `ora` ➔ `!`
+- `panjang()` ➔ `.length`
+
+---
+
+## 🤝 Cara Lapor Masalah atau Kasih Saran
+
+Baru nemu bug? Atau punya ide jenius biar LumpiaJS makin jos? Sampaikan saja!
+
+Caranya gampang:
+
+1. Buka link ini: [https://github.com/fastroware/lumpiajs/issues](https://github.com/fastroware/lumpiajs/issues)
+2. Klik tombol warna hijau bertuliskan **"New Issue"**.
+3. Isi Judul dengan jelas.
+4. Jelaskan masalah atau saranmu di kolom deskripsi.
+5. Klik **"Submit new issue"**.
+
+Selesai! Masukanmu akan saya baca pas lagi senggang.
+
+---
+
+## ⚠️ DISCLAIMER (PENTING BANGET, WAJIB DIBACA!) ⚠️
+
+**LumpiaJS ini 100% project _Have Fun_ & Eksperimen.**
+
+Kami **TIDAK BERTANGGUNG JAWAB** atas segala bentuk kerugian yang mungkin terjadi akibat penggunaan software ini, termasuk tapi tidak terbatas pada:
+
+- Kebocoran data.
+- Hilangnya file penting.
+- Komputer meledak (lebay, tapi tetap saja hati-hati).
+- Kerugian materiil maupun immateriil lainnya.
+
+Gunakan framework ini dengan resiko ditanggung sendiri (_Use at your own risk_). Kalau ada error di production karena nekat pakai ini, jangan nyalahin kami ya! 🙏
+
+---
+
+_Dibuat dengan ❤️ dan 🥟 dari Semarang._

package/bin/lumpia.js

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+import { createProject } from '../lib/commands/create.js';
+import { serveProject } from '../lib/commands/serve.js';
+
+async function main() {
+    const args = process.argv.slice(2);
+    const perintah = args[0];
+    const parameter = args[1];
+
+    if (perintah === 'create-project' || perintah === 'buka-cabang') {
+        createProject(parameter);
+    } 
+    else if (perintah === 'dodolan' || perintah === 'serve') {
+        serveProject();
+    }
+    else if (perintah === 'goreng') {
+        console.log("🚧 Fitur 'goreng' saiki wis otomatis digabung karo 'dodolan' via JIT Compiler MVC.");
+        console.log("   Silakan gunake: lumpia dodolan");
+    }
+    else {
+        console.log('Perintah ora dikenal.');
+        console.log('------------------------------------------------');
+        console.log('1. lumpia create-project <nama> (Bikin project)');
+        console.log('2. lumpia dodolan               (Jalanin server)');
+        console.log('------------------------------------------------');
+    }
+}
+
+main();

package/index.js

@@ -1,142 +1,4 @@
-#!/usr/bin/env node
-import fs from 'fs';
-import path from 'path';
 
-// --- KAMUS BAHASA SEMARANG ---
-const dictionary = [
-    { asal: /<lump>/g, jadi: '' },
-    { asal: /<\/lump>/g, jadi: '' },
-    { 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: '!' },
-    { asal: /panjang\(/g, jadi: 'len(' },
-];
-
-const runtimeScript = `
-<script>
-    function ambil(sel) { return document.querySelector(sel).value; }
-    function tampil(txt) { 
-        let el = document.getElementById('output-lumpia');
-        if(el) el.innerText = txt;
-        else alert(txt);
-    }
-    function len(x) { return x.length; }
-</script>
-`;
-
-// --- TEMPLATE PROJECT BARU ---
-const boilerplateCode = `<lump>
-  <klambi>
-    h1 { color: #d35400; font-family: sans-serif; }
-    button { padding: 10px 20px; background: #2ecc71; border: none; color: white; cursor: pointer; }
-    button:hover { background: #27ae60; }
-  </klambi>
-
-  <kulit>
-    <h1>Sugeng Rawuh di LumpiaJS</h1>
-    <p>Project anyar siap dimasak!</p>
-    <button onclick="sapa()">Pencet Aku</button>
-  </kulit>
-
-  <isi>
-    gawe sapa() {
-       tampil("Halo! Iki project pertamamu, Bro!");
-    }
-  </isi>
-</lump>`;
-
-async function main() {
-    const args = process.argv.slice(2);
-    const perintah = args[0];       // misal: 'create-project' atau 'goreng'
-    const parameter = args[1];      // misal: 'tokoku'
-
-    // --- FITUR 1: Bikin Project Baru ---
-    if (perintah === 'create-project' || perintah === 'buka-cabang') {
-        const namaProject = parameter;
-
-        if (!namaProject) {
-            console.log('❌ Eh, jeneng project-e opo?');
-            console.log('Contoh: lumpia create-project warung-baru');
-            return;
-        }
-
-        const projectPath = path.join(process.cwd(), namaProject);
-        const srcPath = path.join(projectPath, 'src');
-
-        if (fs.existsSync(projectPath)) {
-            console.log(`⚠️ Waduh, folder "${namaProject}" wis ono, Bro. Ganti jeneng liyo.`);
-            return;
-        }
-
-        console.log(`🔨 Lagi nyiapke lahan kanggo "${namaProject}"...`);
-        
-        // 1. Bikin Folder Utama
-        fs.mkdirSync(projectPath);
-        
-        // 2. Bikin Folder src
-        fs.mkdirSync(srcPath);
-
-        // 3. Tulis file contoh (Boilerplate)
-        fs.writeFileSync(path.join(srcPath, 'app.lmp'), boilerplateCode);
-
-        console.log('✅ Siap, Juragan! Project wis dadi.');
-        console.log('-------------------------------------------');
-        console.log(`cd ${namaProject}`);
-        console.log('lumpia goreng');
-        console.log('-------------------------------------------');
-    } 
-    
-    // --- FITUR 2: Compile (Goreng) ---
-    else if (perintah === 'goreng') {
-        console.log('🍳 Sik, lagi nggoreng kodingan...');
-        const srcDir = './src';
-        const distDir = './dist';
-
-        if (!fs.existsSync(srcDir)) return console.log('❌ Folder src ora ono! (Coba: lumpia create-project namaproject)');
-        if (!fs.existsSync(distDir)) fs.mkdirSync(distDir);
-
-        const files = fs.readdirSync(srcDir).filter(file => file.endsWith('.lmp'));
-
-        files.forEach(file => {
-            let content = fs.readFileSync(path.join(srcDir, file), 'utf-8');
-
-            const matchKulit = content.match(/<kulit>([\s\S]*?)<\/kulit>/);
-            const matchIsi = content.match(/<isi>([\s\S]*?)<\/isi>/);
-            const matchKlambi = content.match(/<klambi>([\s\S]*?)<\/klambi>/);
-
-            let htmlnya = matchKulit ? matchKulit[1] : '';
-            let logicnya = matchIsi ? matchIsi[1] : '';
-            let cssnya = matchKlambi ? matchKlambi[1] : '';
-
-            dictionary.forEach(kata => logicnya = logicnya.replace(kata.asal, kata.jadi));
-
-            const hasil = `<!DOCTYPE html>
-<html>
-<head>
-    <title>Lumpia App</title>
-    <style>body{font-family:sans-serif;padding:20px;} ${cssnya}</style>
-</head>
-<body>
-    ${htmlnya}
-    <div id="output-lumpia" style="margin-top:20px; font-weight:bold;"></div>
-    ${runtimeScript}
-    <script>${logicnya}</script>
-</body>
-</html>`;
-
-            const namaFileBaru = file.replace('.lmp', '.html');
-            fs.writeFileSync(path.join(distDir, namaFileBaru), hasil);
-            console.log(`✅ Mateng: dist/${namaFileBaru}`);
-        });
-    } else {
-        console.log('Perintah ora dikenal.');
-        console.log('1. lumpia create-project <nama>');
-        console.log('2. lumpia goreng');
-    }
-}
-
-main();
+export { Jalan, routes } from './lib/core/Router.js';
+export { LumpiaModel as Model } from './lib/core/Model.js';
+export { Controller } from './lib/core/Controller.js'; 

package/lib/commands/create.js

@@ -0,0 +1,149 @@
+import fs from 'fs';
+import path from 'path';
+
+// --- TEMPLATES ---
+const routesTemplate = `import { Jalan } from 'lumpiajs';
+
+// Define Routes
+Jalan.gawe('/', 'HomeController@index');
+Jalan.gawe('/profile', 'HomeController@profile');
+Jalan.gawe('/api/products', 'ProductController@index');
+`;
+
+const controllerTemplate = `import { Controller } from 'lumpiajs';
+
+export default class HomeController extends Controller {
+    index() {
+        // Render view in 'views' folder
+        return this.tampil('home', { 
+            message: 'Welcome to LumpiaJS MVC!',
+            author: 'Pakdhe Koding'
+        });
+    }
+
+    profile() {
+        return this.tampil('profile', { name: 'Loyal User' });
+    }
+}
+`;
+
+const modelTemplate = `// Example dummy data
+const productData = [
+    { id: 1, name: 'Lumpia Basah', price: 5000 },
+    { id: 2, name: 'Lumpia Goreng', price: 6000 },
+    { id: 3, name: 'Tahu Gimbal', price: 12000 }
+];
+
+export default productData;
+`;
+
+const productControllerTemplate = `import { Controller, Model } from 'lumpiajs';
+import ProductData from '../../app/models/Product.js';
+
+export default class ProductController extends Controller {
+    index() {
+        // Eloquent-style: Model.use(data).dimana(...).jupuk()
+        const result = Model.use(ProductData)
+                        .dimana('price', '>', 5500)
+                        .jupuk();
+
+        return this.json({
+            status: 'success',
+            data: result
+        });
+    }
+}
+`;
+
+const viewHomeTemplate = `<lump>
+  <klambi>
+    h1 { color: #d35400; text-align: center; }
+    .box { border: 1px solid #ddd; padding: 20px; text-align: center; margin-top: 20px; }
+  </klambi>
+
+  <kulit>
+    <h1>{{ message }}</h1>
+    <div class="box">
+        <p>Created with love by: <strong>{{ author }}</strong></p>
+        <button onclick="checkPrice()">Check Price API</button>
+        <br><br>
+        <a href="/profile">Go to Profile</a>
+    </div>
+  </kulit>
+
+  <isi>
+    gawe checkPrice() {
+       fetch('/api/products')
+         .then(res => res.json())
+         .then(data => {
+            alert('Data from API: ' + JSON.stringify(data));
+         });
+    }
+  </isi>
+</lump>`;
+
+const viewProfileTemplate = `<lump>
+  <kulit>
+    <h1>User Profile</h1>
+    <p>Hello, <strong>{{ name }}</strong>!</p>
+    <a href="/">Back Home</a>
+  </kulit>
+</lump>`;
+
+const packageJsonTemplate = (name) => `{
+  "name": "${name}",
+  "version": "1.0.0",
+  "main": "routes/web.js",
+  "type": "module",
+  "scripts": {
+    "start": "lumpia dodolan",
+    "serve": "lumpia dodolan"
+  },
+  "dependencies": {
+    "lumpiajs": "latest"
+  }
+}
+`;
+
+export function createProject(parameter) {
+    const projectName = parameter;
+    if (!projectName) {
+        console.log('❌ Please specify project name.');
+        console.log('Example: lumpia create-project my-app');
+        return;
+    }
+
+    const root = path.join(process.cwd(), projectName);
+    if (fs.existsSync(root)) return console.log(`❌ Folder ${projectName} already exists.`);
+
+    console.log(`🔨 Building MVC foundation in ${projectName}...`);
+    
+    fs.mkdirSync(root);
+    
+    // STANDARD MVC STRUCTURE:
+    // app/controllers
+    // app/models
+    // views
+    // routes
+    
+    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')); 
+
+    // Write files
+    fs.writeFileSync(path.join(root, 'package.json'), packageJsonTemplate(projectName));
+    fs.writeFileSync(path.join(root, 'routes', 'web.js'), routesTemplate);
+    fs.writeFileSync(path.join(root, 'app', 'controllers', 'HomeController.js'), controllerTemplate);
+    fs.writeFileSync(path.join(root, 'app', 'controllers', 'ProductController.js'), productControllerTemplate);
+    fs.writeFileSync(path.join(root, 'app', 'models', 'Product.js'), modelTemplate);
+    fs.writeFileSync(path.join(root, 'views', 'home.lmp'), viewHomeTemplate);
+    fs.writeFileSync(path.join(root, 'views', 'profile.lmp'), viewProfileTemplate);
+
+    console.log('✅ Project ready! Standard MVC Structure.');
+    console.log('----------------------------------------------------');
+    console.log(`cd ${projectName}`);
+    console.log('npm install');
+    console.log('npm start');
+    console.log('----------------------------------------------------');
+}

package/lib/commands/serve.js

@@ -0,0 +1,82 @@
+import fs from 'fs';
+import path from 'path';
+import http from 'http';
+import { routes } from '../core/Router.js';
+import { renderLumpia } from '../core/View.js';
+
+export async function serveProject() {
+    const root = process.cwd();
+    const routesFile = path.join(root, 'routes', 'web.js');
+
+    if (!fs.existsSync(routesFile)) return console.log("❌ This is not a LumpiaJS MVC project! (Cannot find routes/web.js)");
+
+    console.log('🔄 Loading core framework...');
+    
+    try {
+        // Load User Routes
+        const userRouteUrl =  path.join(root, 'routes', 'web.js');
+        await import('file://' + userRouteUrl);
+
+        console.log(`🛣️  Routes found: ${routes.length}`);
+
+        // 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;
+
+            console.log(`📥 ${method} ${pathname}`);
+
+            const match = routes.find(r => r.path === pathname && r.method === method);
+            
+            if (match) {
+                try {
+                    // Action format: 'ControllerName@method'
+                    const [controllerName, methodName] = match.action.split('@');
+                    
+                    // Path to 'app/controllers'
+                    const controllerPath = path.join(root, 'app', 'controllers', controllerName + '.js');
+                    
+                    if (!fs.existsSync(controllerPath)) throw new Error(`Controller ${controllerName} not found in app/controllers!`);
+                    
+                    const module = await import('file://' + controllerPath + '?update=' + Date.now()); 
+                    const ControllerClass = module.default;
+                    const instance = new ControllerClass();
+                    
+                    if (typeof instance[methodName] !== 'function') {
+                        throw new Error(`Method ${methodName} does not exist in ${controllerName}`);
+                    }
+
+                    const result = await instance[methodName](); 
+
+                    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><pre>${e.message}\n${e.stack}</pre>`);
+                }
+            } else {
+                res.writeHead(404, {'Content-Type': 'text/html'});
+                res.end('<h1>404: Not Found</h1>');
+            }
+        });
+
+        const port = 3000;
+        server.listen(port, () => {
+            console.log(`🚀 Server running at http://localhost:${port}`);
+            console.log(`(Press Ctrl+C to stop)`);
+        });
+
+    } catch (err) {
+        console.error('Fatal Error loading routes:', err);
+    }
+}

package/lib/core/Controller.js

@@ -0,0 +1,20 @@
+import fs from 'fs';
+import path from 'path';
+import { renderLumpia } from './View.js';
+
+// 3. CONTROLLER BASE
+export class Controller {
+    tampil(viewName, data = {}) {
+        // Cek lokasi view relative dari CWD user (folder 'views')
+        const viewPath = path.join(process.cwd(), 'views', `${viewName}.lmp`);
+        if (fs.existsSync(viewPath)) {
+            return { type: 'html', content: renderLumpia(viewPath, data) };
+        } else {
+            return { type: 'html', content: `<h1>404: View '${viewName}' not found in 'views' folder.</h1>` };
+        }
+    }
+
+    json(data) {
+        return { type: 'json', content: JSON.stringify(data) };
+    }
+}

package/lib/core/Model.js

@@ -0,0 +1,41 @@
+// 1. MODEL (Eloquent-like)
+export class LumpiaModel {
+    constructor(data = []) {
+        this.data = data;
+    }
+
+    static use(jsonData) {
+        return new LumpiaModel(jsonData);
+    }
+
+    // Ambil kabeh data
+    kabeh() {
+        return this.data;
+    }
+
+    // Filter cari (where)
+    dimana(key, operator, value) {
+        if (value === undefined) { value = operator; operator = '=='; }
+        
+        const filtered = this.data.filter(item => {
+            if (operator === '==') return item[key] == value;
+            if (operator === '>') return item[key] > value;
+            if (operator === '<') return item[key] < value;
+            if (operator === '>=') return item[key] >= value;
+            if (operator === '<=') return item[key] <= value;
+            if (operator === '!=') return item[key] != value;
+            return false;
+        });
+        return new LumpiaModel(filtered);
+    }
+
+    // Ambil satu (first)
+    siji() {
+        return this.data[0] || null;
+    }
+
+    // Return raw array
+    jupuk() {
+        return this.data;
+    }
+}

package/lib/core/Router.js

@@ -0,0 +1,14 @@
+
+// 2. ROUTER : Simpan Jalur
+export const routes = [];
+
+export const Jalan = {
+    gawe: (path, action) => routes.push({ path, action, method: 'GET' }), // GET
+    jupuk: (path, action) => routes.push({ path, action, method: 'GET' }), // Alias GET
+    kirim: (path, action) => routes.push({ path, action, method: 'POST' }),
+    anyar: (path, action) => routes.push({ path, action, method: 'PUT' }),
+    bucak: (path, action) => routes.push({ path, action, method: 'DELETE' }),
+};
+
+// Global Router Container (for easy access in runtime)
+global.LumpiaRouter = routes;

package/lib/core/View.js

@@ -0,0 +1,58 @@
+import fs from 'fs';
+
+// --- KAMUS BAHASA SEMARANG (Blade-like Template Engine) ---
+// Mengubah sintaks .lmp ke HTML siap render dengan interpolasi data
+export function renderLumpia(viewPath, data = {}) {
+    let content = fs.readFileSync(viewPath, 'utf-8');
+
+    // 1. Ekstrak bagian <klambi>, <kulit>, <isi>
+    const matchKulit = content.match(/<kulit>([\s\S]*?)<\/kulit>/);
+    const matchIsi = content.match(/<isi>([\s\S]*?)<\/isi>/); // Client-side JS
+    const matchKlambi = content.match(/<klambi>([\s\S]*?)<\/klambi>/);
+
+    let htmlBody = matchKulit ? matchKulit[1] : '';
+    let clientScript = matchIsi ? matchIsi[1] : '';
+    let cssStyle = matchKlambi ? matchKlambi[1] : '';
+
+    // 2. Transpile Client-side JS (Semarangan -> JS Standard)
+    const dictionary = [
+        { 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: '!' },
+        { asal: /panjang\(/g, jadi: 'len(' },
+    ];
+    dictionary.forEach(kata => clientScript = clientScript.replace(kata.asal, kata.jadi));
+
+    // 3. Templating Engine (Mirip Blade {{ variable }})
+    // Mengganti {{ variable }} dengan value dari `data`
+    for (const [key, value] of Object.entries(data)) {
+        const regex = new RegExp(`{{\\s*${key}\\s*}}`, 'g');
+        // Simple XSS protection could be added here
+        htmlBody = htmlBody.replace(regex, value);
+    }
+    
+    // 4. Rakit Akhir
+    return `<!DOCTYPE html>
+<html>
+<head>
+    <title>Lumpia App</title>
+    <style>body{font-family:sans-serif;padding:20px;} ${cssStyle}</style>
+</head>
+<body>
+    ${htmlBody}
+    <div id="output-lumpia"></div>
+    <script>
+        // Runtime Helper
+        function tampil(txt) { 
+            let el = document.getElementById('output-lumpia');
+            if(el) el.innerText = txt; 
+        }
+        ${clientScript}
+    </script>
+</body>
+</html>`;
+}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "lumpiajs",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "Bahasa Pemrograman Semarangan",
   "type": "module",
+  "main": "index.js",
   "bin": {
-    "lumpia": "./index.js"
+    "lumpia": "./bin/lumpia.js"
   },
   "dependencies": {
     "fs-extra": "^11.1.1"