lumpiajs 1.0.7 → 1.0.8

package/README.md

@@ -1,151 +1,73 @@
 # 🥟 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)
+## 🦄 Fitur Unik: Laravel Syntax di JavaScript! (`->`)
 
-### Opsi A: Menggunakan Command `lumpia` (Disarankan)
-
-**1. Install Secara Global**
-
-```bash
-npm install -g lumpiajs
-```
-
-**2. Buat Project Baru**
-
-```bash
-lumpia create-project warung-ku
-```
-
-**3. Masuk & Install Dependencies (Wajib)**
-
-```bash
-cd warung-ku && npm install
-```
-
-**4. Jalankan Server**
-
-```bash
-lumpia kukus
+```javascript
+// Valid di LumpiaJS (.lmp)
+const users = await DB.table('users')->where('active', 1)->get();
+Jalan->get('/', 'HomeController@index');
 ```
 
-_(Alias: `lumpia serve`)_
-
 ---
 
-## ⚙️ Konfigurasi Environment (.env)
+## 🏗️ Cara Deploy ke Production (Server Asli)
 
-Setiap project LumpiaJS dilengkapi file `.env` di root folder.
+Ini yang sering ditanyain: **"Mas, file mana yang harus saya upload ke hosting?"**
 
-```env
-BASE_URL="http://localhost:3000"
-APP_ENV="local"
-APP_DEBUG="true"
-```
+Tenang, LumpiaJS punya fitur **Goreng** (Build) biar kamu nggak bingung.
 
----
+### 1. Goreng Project (Build)
 
-## 🏗️ Struktur Project (Standar MVC)
+Jalankan perintah ini di komputermu:
 
+```bash
+lumpia goreng
 ```
-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");
+_(Atau: `lumpia build`)_
 
-// API (POST/PUT/DELETE)
-Jalan.post("/api/products", "ProductController@store");
-Jalan.put("/api/products/{id}", "ProductController@update");
-Jalan.delete("/api/products/{id}", "ProductController@destroy");
+Sistem akan memasak projectmu:
 
-// Dynamic Route dengan Parameter
-Jalan.get("/produk/{id}", "ProductController@show");
-Jalan.get("/kategori/{slug}", "CategoryController@index");
-```
+- Mentranspile sintaks `->` menjadi JS standard.
+- Mengkompilasi CSS (minify Tailwind/Bootstrap).
+- Menyiapkan folder `dist` yang siap saji.
 
-### 2. Controllers (`app/controllers`)
+### 2. Upload ke Server
 
-Otak dari aplikasimu. Parameter dari route (misal `{id}`) otomatis masuk jadi argumen fungsi.
+Setelah digoreng, akan muncul folder **`dist`**.
 
-```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 });
-  }
-}
-```
+👉 **HANYA ISI FOLDER `dist`** inilah yang perlu kamu upload ke server.
+(Isinya: `server.js`, `package.json`, `.env`, folder `app`, `routes`, `views`, `public`)
 
-### 3. Views (`views`)
+### 3. Install & Start di Server
 
-File berekstensi `.lmp`.
+Di panel hosting (Terminal/SSH) atau VPS:
 
-```html
-<lump>
-  <klambi> h1 { color: red; } </klambi>
-  <kulit> <h1>{{ pesan }}</h1> </kulit>
-  <isi> gawe sapa() { alert("Halo!"); } </isi>
-</lump>
-```
+```bash
+# Masuk ke folder yang barusan diupload
+cd /path/to/your/app
 
-### 4. Models (`app/models`)
+# Install dependencies (LumpiaJS core, mysql driver, dll)
+npm install --production
 
-```javascript
-import { Model } from "lumpiajs";
-// Model.use(data).dimana('harga', '<', 5000).kabeh();
+# Jalankan Aplikasi
+npm start
 ```
 
 ---
 
-## 🧐 Kamus Bahasa (Transpiler)
+## 🗄️ Database
 
-Gunakan istilah Semarangan ini di dalam tag `<isi>` file `.lmp`:
+Database (MySQL) itu **SERVICE**, bukan file. Jadi:
 
-| Bahasa Semarangan | JavaScript Asli |
-| :---------------- | :-------------- |
-| `ono`             | `let`           |
-| `paten`           | `const`         |
-| `gawe`            | `function`      |
-| `yen`             | `if`            |
-| `liyane`          | `else`          |
-| `mandek`          | `return`        |
-| `ora`             | `!`             |
+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.
 
 ---
 
-## ⚠️ 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/commands/build.js

@@ -0,0 +1,246 @@
+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) {
+    let code = content;
+    // 1. Import: .lmp -> .js
+    code = code.replace(/from\s+['"](.+?)\.lmp['"]/g, "from '$1.js'");
+    // 2. Syntax: "->" -> "."
+    code = code.split('\n').map(line => {
+        if (line.trim().startsWith('//')) return line;
+        return line.replace(/->/g, '.');
+    }).join('\n');
+    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')) {
+                // Transpile .lmp to .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);
+                }
+            } else {
+                fs.copyFileSync(srcPath, destPath);
+            }
+        }
+    });
+}
+
+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;
+                }
+            }
+        }
+
+        // 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;
+            }
+        }
+
+        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>');
+            }
+        } 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);
+    });
+}
+
+start();
+`;
+
+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 });
+    }
+    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 
+        });
+    }
+
+    // 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 });
+
+    // 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));
+
+    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('----------------------------------------------------');
+}

package/lib/commands/create.js

@@ -1,156 +1,203 @@
 import fs from 'fs';
 import path from 'path';
+import prompts from 'prompts';
 
-// --- TEMPLATES ---
 const routesTemplate = `import { Jalan } from 'lumpiajs';
 
-// Define Routes
-Jalan.gawe('/', 'HomeController@index');
-Jalan.gawe('/profile', 'HomeController@profile');
-Jalan.gawe('/api/products', 'ProductController@index');
+// 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');
 `;
 
-const controllerTemplate = `import { Controller } from 'lumpiajs';
+const controllerTemplate = `import { Controller, DB } from 'lumpiajs';
 
 export default class HomeController extends Controller {
     index() {
-        // Tampilkan halaman home
-        // this.env bisa diakses di sini
-        return this.tampil('home', { 
+        // "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
         });
     }
 
+    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' });
+        return this->tampil('profile', { name: 'Loyal User' });
     }
 }
 `;
 
-const modelTemplate = `// Example dummy data
+const modelTemplate = `// Example dummy data (Static)
 const productData = [
     { id: 1, name: 'Lumpia Basah', price: 5000 },
-    { id: 2, name: 'Lumpia Goreng', price: 6000 },
-    { id: 3, name: 'Tahu Gimbal', price: 12000 }
+    { id: 2, name: 'Lumpia Goreng', price: 6000 }
 ];
-
 export default productData;
 `;
 
 const productControllerTemplate = `import { Controller, Model } from 'lumpiajs';
-import ProductData from '../../app/models/Product.js';
+import ProductData from '../../app/models/Product.lmp'; 
 
 export default class ProductController extends Controller {
     index() {
-        const result = Model.use(ProductData)
-                        .dimana('price', '>', 5500)
-                        .jupuk();
-
-        return this.json({
-            status: 'success',
-            data: result,
-            debug_mode: this.env.APP_DEBUG
-        });
+        // Model Static juga bisa pakai ->
+        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; }
-    .badge { background: #eee; padding: 5px; border-radius: 4px; font-size: 12px; }
-  </klambi>
-
-  <kulit>
-    <h1>{{ message }}</h1>
-    <div class="box">
-        <span class="badge">Environment: {{ env }}</span>
-        <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>
+    <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>
   </kulit>
 </lump>`;
 
-const packageJsonTemplate = (name) => `{
-  "name": "${name}",
-  "version": "1.0.0",
-  "main": "routes/web.js",
-  "type": "module",
-  "scripts": {
-    "start": "lumpia kukus",
-    "serve": "lumpia kukus"
-  },
-  "dependencies": {
-    "lumpiajs": "latest"
-  }
-}
-`;
-
 const envTemplate = `
 BASE_URL="http://localhost:3000"
 APP_ENV="local"        
-# Pilihan: 'local', 'development', 'production'
 APP_DEBUG="true"
-# Pilihan: 'true', 'false'
+
+# Database Config
+DB_HOST="localhost"
+DB_USER="root"
+DB_PASSWORD=""
+DB_NAME="lumpia_db"
 `;
 
-export function createProject(parameter) {
-    const projectName = parameter;
+// 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 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);
+};
+
+export async function createProject(parameter) {
+    let projectName = parameter;
     if (!projectName) {
-        console.log('❌ Please specify project name.');
-        console.log('Example: lumpia create-project my-app');
-        return;
+        const res = await prompts({ type: 'text', name: 'val', message: 'Jeneng project?', initial: 'my-app' });
+        projectName = res.val;
     }
-
+    if (!projectName) return;
+    
     const root = path.join(process.cwd(), projectName);
-    if (fs.existsSync(root)) return console.log(`❌ Folder ${projectName} already exists.`);
+    if (fs.existsSync(root)) { console.log('❌ Folder Exists'); return; }
 
-    console.log(`🔨 Building MVC foundation in ${projectName}...`);
-    
+    const styleRes = await prompts({
+        type: 'select', name: 'val', message: 'Styling?',
+        choices: [{title:'Vanilla',value:'none'},{title:'Tailwind',value:'tailwindcss'},{title:'Bootstrap',value:'bootstrap'}],
+        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')); 
-
-    // Write files
-    fs.writeFileSync(path.join(root, 'package.json'), packageJsonTemplate(projectName));
-    fs.writeFileSync(path.join(root, '.env'), envTemplate); // Create .env
-    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.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, '.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, '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);
+    
+    // Style Assets
+    if (style === 'tailwindcss') {
+        fs.writeFileSync(path.join(root, 'tailwind.config.js'), tailwindConfigTemplate);
+        fs.writeFileSync(path.join(root, 'aset', 'css', 'style.css'), mainCssTemplate);
+    } else {
+        fs.writeFileSync(path.join(root, 'aset', 'css', 'style.css'), style === 'bootstrap' ? '/* Bootstrap Imported in HTML */' : '/* CSS */');
+    }
 
-    console.log('✅ Project ready! Standard MVC Structure with .env Support.');
-    console.log('----------------------------------------------------');
-    console.log(`cd ${projectName}`);
-    console.log('npm install');
-    console.log('lumpia kukus');
-    console.log('----------------------------------------------------');
+    console.log(`✅ Project "${projectName}" Ready!`);
+    console.log(`cd ${projectName} && npm install && lumpia kukus`);
 }

package/lib/commands/serve.js

@@ -1,95 +1,146 @@
 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'; 
 
-// Baca versi LumpiaJS global (CLI ini)
 const cliPackageJson = JSON.parse(fs.readFileSync(new URL('../../package.json', import.meta.url)));
 
-// Helper untuk mencocokkan Route dengan Parameter {id} dll
+// Helper to Match Routes
 function matchRoute(definedRoute, method, pathname) {
     if (definedRoute.method !== method) return null;
-
-    // 1. Exact Match
     if (definedRoute.path === pathname) return { params: {} };
 
-    // 2. Dynamic Match (Regex)
-    // Convert /produk/{id}/{slug} -> ^\/produk\/([^\/]+)\/([^\/]+)$
     const paramNames = [];
     const regexPath = definedRoute.path.replace(/\{([a-zA-Z0-9_]+)\}/g, (match, name) => {
         paramNames.push(name);
         return '([^/]+)';
     });
 
-    // Skip if no params found in definition (optimization)
     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]; // capture groups start at 1
+            params[name] = match[index + 1]; 
         });
         return { params };
     }
-
     return null;
 }
 
-export async function serveProject() {
-    const root = process.cwd();
+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 });
+    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');
+    if (!fs.existsSync(cacheDir)) fs.mkdirSync(cacheDir, { recursive: true });
     
-    // --- 1. Version Check ---
-    const userPackageJsonPath = path.join(root, 'package.json');
-    if (fs.existsSync(userPackageJsonPath)) {
-        const userPkg = JSON.parse(fs.readFileSync(userPackageJsonPath, 'utf-8'));
-        const userLumpiaVer = (userPkg.dependencies && userPkg.dependencies.lumpiajs) || 'unknown';
+    const relativePath = path.relative(process.cwd(), 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;
         
-        console.log(`ℹ️  LumpiaJS CLI Version: ${cliPackageJson.version}`);
-        console.log(`ℹ️  Project Dependency Version: ${userLumpiaVer}`);
-
-        const cleanUserVer = userLumpiaVer.replace(/[^0-9.]/g, '');
-        if (cleanUserVer !== cliPackageJson.version && userLumpiaVer !== 'latest') {
-             console.log('\n⚠️  PERINGATAN BEDA VERSI!');
-             console.log(`   Versi CLI kamu (${cliPackageJson.version}) beda dengan versi di project (${userLumpiaVer}).`);
-             console.log('   Saran: Update project dependencies agar sinkron.');
-             console.log('   Cara update: npm install lumpiajs@latest\n');
-        }
-    }
+        // 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, '.');
+    }).join('\n');
+
+    fs.writeFileSync(destPath, transcoded);
+    
+    // 4. Import file .js
+    const module = await import('file://' + destPath + '?t=' + Date.now());
+    return module;
+}
+
 
-    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)");
+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)");
 
-    // --- 2. Load ENV ---
     const env = loadEnv(root);
-    console.log(`🌍 Environment: ${env.APP_ENV}`);
-    console.log(`🐛 Debug Mode: ${env.APP_DEBUG}`);
+    const config = loadConfig(root);
 
-    try {
-        // Load User Routes
-        const userRouteUrl =  path.join(root, 'routes', 'web.js');
-        await import('file://' + userRouteUrl);
+    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!`);
 
-        // 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;
 
-            if (env.APP_DEBUG === 'true') {
-                 console.log(`📥 ${method} ${pathname}`);
+            if (env.APP_DEBUG === 'true') console.log(`📥 ${method} ${pathname}`);
+
+            const publicMap = {
+                '/css/': path.join(root, 'public', 'css'),
+                '/vendor/': path.join(root, 'public', 'vendor')
+            };
+            for (const [prefix, localPath] of Object.entries(publicMap)) {
+                if (pathname.startsWith(prefix)) {
+                    const 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;
+                    }
+                }
             }
 
-            // FIND MATCHING ROUTE
             let match = null;
             let params = {};
-
             for (const route of routes) {
                 const result = matchRoute(route, method, pathname);
                 if (result) {
@@ -102,29 +153,20 @@ export async function serveProject() {
             if (match) {
                 try {
                     const [controllerName, methodName] = match.action.split('@');
-                    const controllerPath = path.join(root, 'app', 'controllers', controllerName + '.js');
+                    const controllerPath = path.join(root, 'app', 'controllers', controllerName + '.lmp');
                     
-                    if (!fs.existsSync(controllerPath)) throw new Error(`Controller ${controllerName} not found in app/controllers!`);
+                    if (!fs.existsSync(controllerPath)) throw new Error(`Controller ${controllerName} not found!`);
                     
-                    // In Development/Local, always invalidate cache
-                    let importUrl = 'file://' + controllerPath;
-                    if (env.APP_ENV === 'local' || env.APP_ENV === 'development') {
-                        importUrl += '?update=' + Date.now();
-                    }
-
-                    const module = await import(importUrl); 
+                    const module = await loadLumpiaModule(controllerPath);
                     const ControllerClass = module.default;
                     const instance = new ControllerClass();
                     
-                    // Inject ENV & Params to Controller
                     instance.env = env;
-                    instance.params = params; // Available as this.params
+                    instance.params = params;
+                    instance.config = config;
 
-                    if (typeof instance[methodName] !== 'function') {
-                        throw new Error(`Method ${methodName} does not exist in ${controllerName}`);
-                    }
+                    if (typeof instance[methodName] !== 'function') throw new Error(`Method ${methodName} missing`);
 
-                    // Pass params as spread arguments to the method: index(id, slug)
                     const args = Object.values(params);
                     const result = await instance[methodName](...args); 
 
@@ -140,26 +182,28 @@ export async function serveProject() {
                     }
                 } catch (e) {
                     console.error(e);
-                    const errorMsg = env.APP_DEBUG === 'true' 
-                        ? `<h1>500: Server Error</h1><pre>${e.message}\n${e.stack}</pre>`
-                        : `<h1>500: Server Error</h1><p>Something went wrong.</p>`;
-                        
+                    const errorMsg = env.APP_DEBUG === 'true' ? `<pre>${e.stack}</pre>` : `<h1>Server Error</h1>`;
                     res.writeHead(500, {'Content-Type': 'text/html'});
                     res.end(errorMsg);
                 }
             } else {
                 res.writeHead(404, {'Content-Type': 'text/html'});
-                res.end('<h1>404: Not Found</h1>');
+                res.end('<h1>404 Not Found</h1>');
             }
         });
 
         const port = 3000;
         server.listen(port, () => {
             console.log(`🚀 Server running at ${env.BASE_URL || 'http://localhost:3000'}`);
-            console.log(`(Press Ctrl+C to stop)`);
+        });
+
+        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 loading routes:', err);
+        console.error('Fatal Error:', err);
     }
 }

package/lib/core/Config.js

@@ -0,0 +1,20 @@
+import fs from 'fs';
+import path from 'path';
+
+export function loadConfig(root) {
+    const configPath = path.join(root, 'config.lmp');
+    const config = {
+        klambi: 'none' // default
+    };
+    
+    if (fs.existsSync(configPath)) {
+        try {
+            const content = fs.readFileSync(configPath, 'utf-8');
+            const parsed = JSON.parse(content);
+            if (parsed.klambi) config.klambi = parsed.klambi;
+        } catch (e) {
+            console.error('⚠️ Gagal moco config.lmp', e.message);
+        }
+    }
+    return config;
+}

package/lib/core/DB.js

@@ -0,0 +1,139 @@
+import mysql from 'mysql2/promise';
+import { loadEnv } from './Env.js';
+
+let pool = null;
+
+export class DB {
+    static async connect() {
+        if (pool) return pool;
+
+        const env = loadEnv(process.cwd());
+        
+        if (!env.DB_HOST || !env.DB_USER || !env.DB_NAME) {
+            return null;
+        }
+
+        try {
+            pool = mysql.createPool({
+                host: env.DB_HOST,
+                user: env.DB_USER,
+                password: env.DB_PASSWORD || '',
+                database: env.DB_NAME,
+                waitForConnections: true,
+                connectionLimit: 10,
+                queueLimit: 0
+            });
+            return pool;
+        } catch (e) {
+            console.error("❌ Gagal connect database:", e.message);
+            return null;
+        }
+    }
+
+    static async query(sql, params = []) {
+        const p = await this.connect();
+        if (!p) throw new Error("Database durung disetting nang .env!");
+        try {
+            const [rows, fields] = await p.execute(sql, params);
+            return rows;
+        } catch (e) {
+            console.error("❌ SQL Error:", e.message);
+            throw e;
+        }
+    }
+
+    static table(tableName) {
+        return new QueryBuilder(tableName);
+    }
+}
+
+class QueryBuilder {
+    constructor(table) {
+        this.tableName = table;
+        this.conditions = [];
+        this.bindings = [];
+        this.selects = '*';
+        this.limitVal = null;
+        this.orderByRaw = null;
+        this.executed = false; // Flag to prevent double execution if method chaining is weird
+    }
+
+    // SELECT logic
+    select(fields) {
+        this.selects = fields;
+        return this;
+    }
+
+    // WHERE logic
+    where(col, op, val) {
+        if (val === undefined) { val = op; op = '='; }
+        this.conditions.push(`${col} ${op} ?`);
+        this.bindings.push(val);
+        return this;
+    }
+
+    orderBy(col, direction = 'ASC') {
+        this.orderByRaw = `${col} ${direction}`;
+        return this;
+    }
+
+    take(n) { // Alias for limit, Laravel style
+        this.limitVal = n;
+        return this;
+    }
+
+    // EKSEKUTOR (Disini logic query dijalankan)
+    // Ubah nama method 'get' jadi 'get()' yang mengembalikan Promise<Array>
+    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);
+    }
+
+    // Alias first() -> Ambil 1 data
+    async first() {
+        this.take(1);
+        const rows = await this.get();
+        return rows.length > 0 ? rows[0] : null;
+    }
+
+    // Insert
+    async insert(data) {
+        const keys = Object.keys(data);
+        const values = Object.values(data);
+        const placeholders = keys.map(() => '?').join(', ');
+        const sql = `INSERT INTO ${this.tableName} (${keys.join(', ')}) VALUES (${placeholders})`;
+        return await DB.query(sql, values);
+    }
+
+    // Update
+    async update(data) {
+        const keys = Object.keys(data);
+        const values = Object.values(data);
+        const setClause = keys.map(k => `${k} = ?`).join(', ');
+        
+        let sql = `UPDATE ${this.tableName} SET ${setClause}`;
+        if (this.conditions.length > 0) {
+            sql += ' WHERE ' + this.conditions.join(' AND ');
+        }
+        return await DB.query(sql, [...values, ...this.bindings]);
+    }
+
+    // Delete
+    async delete() {
+        let sql = `DELETE FROM ${this.tableName}`;
+        if (this.conditions.length > 0) {
+            sql += ' WHERE ' + this.conditions.join(' AND ');
+        }
+        return await DB.query(sql, this.bindings);
+    }
+}

package/lib/core/View.js

@@ -1,20 +1,21 @@
 import fs from 'fs';
+import path from 'path';
+import { loadConfig } from './Config.js';
 
 // --- 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 matchIsi = content.match(/<isi>([\s\S]*?)<\/isi>/); 
     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)
+    // 2. Transpile Client-side JS
     const dictionary = [
         { asal: /ono\s/g, jadi: 'let ' },
         { asal: /paten\s/g, jadi: 'const ' },
@@ -27,26 +28,38 @@ export function renderLumpia(viewPath, data = {}) {
     ];
     dictionary.forEach(kata => clientScript = clientScript.replace(kata.asal, kata.jadi));
 
-    // 3. Templating Engine (Mirip Blade {{ variable }})
-    // Mengganti {{ variable }} dengan value dari `data`
+    // 3. Templating Engine
     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. AUTO INJECT ASSETS BASED ON CONFIG ---
+    // Kita baca config dari PROJECT_ROOT (asumsi process.cwd())
+    let headInjection = '';
+    const config = loadConfig(process.cwd());
+
+    // Inject main.css (Tailwind build result or Custom CSS)
+    headInjection += `<link rel="stylesheet" href="/css/style.css">`;
+
+    // Inject Vendor Specific
+    if (config.klambi === 'bootstrap') {
+        headInjection += `<link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">`;
+        // Optional JS injection could be added here
+    }
+
     // 4. Rakit Akhir
     return `<!DOCTYPE html>
 <html>
 <head>
     <title>Lumpia App</title>
-    <style>body{font-family:sans-serif;padding:20px;} ${cssStyle}</style>
+    ${headInjection}
+    <style> ${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; 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lumpiajs",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Bahasa Pemrograman Semarangan",
   "type": "module",
   "main": "index.js",
@@ -8,6 +8,8 @@
     "lumpia": "./bin/lumpia.js"
   },
   "dependencies": {
-    "fs-extra": "^11.1.1"
+    "fs-extra": "^11.1.1",
+    "mysql2": "^3.16.0",
+    "prompts": "^2.4.2"
   }
 }

package/templates/gitignore.txt

@@ -0,0 +1,3 @@
+.lumpia
+node_modules
+.env