PHPackages                             gadingrengga/livedomjs - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. gadingrengga/livedomjs

ActiveLibrary[Utility & Helpers](/categories/utility)

gadingrengga/livedomjs
======================

Integrasi LiveDomJS untuk Laravel: SPA, Live DOM binding, AJAX, dan reaktivitas.

17JavaScriptCI passing

Since Oct 17Pushed 7mo ago1 watchersCompare

[ Source](https://github.com/GadingRengga/LiveDomJs)[ Packagist](https://packagist.org/packages/gadingrengga/livedomjs)[ RSS](/packages/gadingrengga-livedomjs/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

⚡ LiveDomJs
===========

[](#-livedomjs)

> Framework JavaScript ringan yang menghadirkan reaktivitas alami di dalam Laravel Blade tanpa harus menggunakan framework frontend besar seperti Vue, React, atau Alpine.
> *Integrasi cepat. Interaksi reaktif. Tanpa ribet.*

---

🧠 Filosofi
----------

[](#-filosofi)

LiveDomJs diciptakan untuk *developer Laravel* yang ingin membangun antarmuka reaktif tanpa memisahkan dunia backend dan frontend.
Alih-alih menulis API REST, state management, dan routing JavaScript, LiveDomJs memanfaatkan Blade dan Controller langsung dengan pendekatan **HTML-reaktif**.

Tujuan akhirnya sederhana:

- Tidak ada *build step*, *webpack*, atau *npm run dev*.
- Tidak ada konfigurasi kompleks.
- Cukup tulis kode Laravel biasa dan tambahkan atribut `live-*`.

---

✨ Fitur Utama
-------------

[](#-fitur-utama)

- 🔁 **SPA Routing** dengan dukungan `pushState`
- ⚡ **Reaktivitas alami** menggunakan atribut:
    - `live-compute`
    - `live-show`, `live-class`, `live-style`, `live-attr`
    - `live-event(click|change|input|...)`
- 🔄 **Komunikasi AJAX dinamis** dengan caching dan debounce
- 🧩 **Auto-binding data response ke DOM**
- 🛠️ **Integrasi langsung ke Laravel** via `composer` & `artisan`
- 📦 **Publikasi asset otomatis** ke `public/vendor/livedomjs`
- 💡 **Tanpa dependensi berat** — hanya butuh jQuery

---

📦 Instalasi
-----------

[](#-instalasi)

### 1. Install package via Composer

[](#1-install-package-via-composer)

```
composer require gadingrengga/livedomjs
```

### 2. Jalankan perintah instalasi

[](#2-jalankan-perintah-instalasi)

```
php artisan livedomjs:install
```

### 3. Tambahkan script ke layout Blade

[](#3-tambahkan-script-ke-layout-blade)

```

```

---

🗂️ Struktur Package
-------------------

[](#️-struktur-package)

```
LiveDomJs/
├── composer.json
├── resources/
│   └── js/
│       └── livedom.js
├── src/
│   ├── Console/
│   ├── Http/
│   └── Providers/
├── docs/
│   └── index.html
└── README.md

```

---

🚀 Contoh Penggunaan
-------------------

[](#-contoh-penggunaan)

```

    Simpan

```

Contoh controller di Laravel:

```
class UserController extends Controller {
    public function saveUser(Request $request)
    {
        return response()->json([
            'success' => true,
            'data' => 'User ' . $request->username . ' berhasil disimpan!'
        ]);
    }
}
```

---

🧩 Direktif Reaktif
------------------

[](#-direktif-reaktif)

AtributFungsiContoh`live-compute`Menghitung nilai otomatis dari input lain```live-show`Menampilkan elemen jika ekspresi benar`Stok tersedia``live-class`Menambah kelas dinamis```live-event(click)`Menjalankan fungsi AJAX pada event`Tambah`---

🧮 Live Compute
--------------

[](#-live-compute)

Gunakan `live-compute` untuk menghitung nilai otomatis berdasarkan input lain:

```

```

Hasilnya akan otomatis berubah saat harga atau qty diperbarui.

---

🌍 SEO & Dokumentasi Online
------------------------------

[](#-seo--dokumentasi-online)

Untuk dokumentasi lengkap, panduan lanjutan, dan demo:

👉 ****

🧭 Roadmap
---------

[](#-roadmap)

- SPA pushState navigation
- AJAX dynamic binding per-scope
- Error modal system
- DevTools inspector

---

🤝 Kontribusi
------------

[](#-kontribusi)

Pull request, saran, dan bug report selalu diterima.

1. Fork repository ini
2. Buat branch baru
3. Commit perubahan
4. Kirim pull request ke branch `main`

---

👤 Author
--------

[](#-author)

**Gading Rengga**
📧
🐙 [github.com/GadingRengga](https://github.com/GadingRengga)

---

📜 Lisensi
---------

[](#-lisensi)

Dilisensikan di bawah [MIT License](LICENSE).
Gunakan bebas untuk proyek pribadi dan komersial.

---

🧩 Kata Kunci
------------

[](#-kata-kunci)

`laravel reactive`, `laravel live dom`, `laravel spa`, `reactive dom`, `ajax dynamic`,
`live compute`, `laravel frontend bridge`, `no-build laravel js`, `livewire alternative`,
`jquery reactive framework`, `laravel dom reactivity`, `html reactive`

###  Health Score

18

—

LowBetter than 8% of packages

Maintenance45

Moderate activity, may be stable

Popularity6

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity13

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/ee65ab503391ea73381ae8d68add7e86b70f62a462a90b8c5bc37cbcfe2880db?d=identicon)[GadingRengga](/maintainers/GadingRengga)

---

Top Contributors

[![GadingRengga](https://avatars.githubusercontent.com/u/116241696?v=4)](https://github.com/GadingRengga "GadingRengga (37 commits)")

### Embed Badge

![Health badge](/badges/gadingrengga-livedomjs/health.svg)

```
[![Health](https://phpackages.com/badges/gadingrengga-livedomjs/health.svg)](https://phpackages.com/packages/gadingrengga-livedomjs)
```

###  Alternatives

[symfony/asset-mapper

Maps directories of assets & makes them available in a public directory with versioned filenames.

1656.9M131](/packages/symfony-asset-mapper)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)