Kobar

Tentang Kobar

Kode yang bisa dibaca,
bukan ditebak.

Kobar bukan sekadar library — ini cara baru nulis JavaScript DOM. Setiap method dirancang agar bisa dibaca seperti instruksi biasa.

🧠

Proxy-Powered DSL

Method name otomatis diparse jadi aksi DOM. Tidak perlu hafal API — cukup tulis apa yang kamu mau.

👁️

Observer System

Elemen belum ada di DOM? Tidak masalah. Aksi masuk antrian, dijalankan otomatis begitu elemen muncul.

🧩

Component Loader

Load HTML component secara async dan inject data ke template dengan satu perintah.

🗺️

Built-in Router

SPA routing dengan konfigurasi JSON. Tidak perlu setup apapun — tinggal isi route.json.

⛓️

Full Chainable

Hampir semua method bisa di-chain. Tulis logic panjang dalam satu ekspresi yang tetap rapi.

🪶

Zero Dependency

Tidak ada npm install yang panjang. Tidak ada node_modules 300MB. Satu file, langsung jalan.

Demo Kode

Lihat bedanya.

Kode yang sama, cara baca yang jauh berbeda.

logicberanda.js
// ✅ Dengan Kobar
Kobar.getElement("#btn")
  .onTheClassActive()
  .onTheStyleColorItsWhite()
  .onTheStyleBackgroundColorItsBlue()
  .onTheClick(handleClick);

// ❌ Vanilla JS yang sama
const btn = document.querySelector("#btn");
btn.classList.add("active");
btn.style.color = "white";
btn.style.backgroundColor = "blue";
btn.addEventListener("click", handleClick);

logicberanda.js
// Ambil nilai, cek kosong, serialize
const nama = Kobar.getElement("#nama").getValue();

if (Kobar.getElement("#nama").checkIfEmpty()) {
  Kobar.getElement("#nama")
    .focusIt()
    .onTheClassIsError();
}

// Serialize semua input dalam form
const data = Kobar.getElement("#form").serializeIt();
// → { nama: "...", email: "...", role: "..." }

logicberanda.js
// Navigasi DOM — langsung chain
Kobar.getElement("#item")
  .goToParent()
  .onTheClassHighlight();

// Anak ke-0 — langsung chain proxy
Kobar.getElement("#list")
  .goToChildren(0)
  .onTheStyleColorItsGold();

// Semua anak — otomatis ke setiap elemen
Kobar.getElement("#list")
  .goToChildren()
  .onTheClassVisible();

logicberanda.js
// Load & render component dengan data
const { kartuProfil } = await Kobar.useComponentFromKartu();

const html = await kartuProfil.data({
  nama: "Azqilana",
  pesan: "Halo dunia!",
  url: "https://azqilana.my.id"
});

Kobar.getElement("#kontainer")
  .onTheHtml(html);

DSL Cheatsheet

Semua yang bisa kamu tulis.

Setiap prefix punya makna. Baca kodenya — kamu langsung tahu apa yang terjadi.

onThe — Set / Tambah

.onTheClassActive()
.onTheStyleColorItsRed()
.onTheAttrDisabled()
.onTheTextHello()
.onTheClick(fn)

offThe — Hapus

.offTheClassActive()
.offTheStyleColor()
.offTheAttrDisabled()
.offTheText()
.offTheClick(fn)

toggleThe — Bolak-balik

.toggleTheClassOpen()
.toggleTheClassOpenWithClose()
.toggleTheStyleColorItsBlueWithRed()
.toggleTheTextOnWithOff()

checkThe — Cek boolean

.checkTheClassActive()
.checkTheStyleColorItsRed()
.checkTheAttrDisabled()
.checkTheTextHello()

Traversal

.goToParent()
.goToNext() / .goToPrev()
.goToChildren(index?)
.goToSiblings(index?)
.goToClosest(".modal")

Insertion

.putInside(html)
.putInsideFirst(html)
.putBefore(html)
.putAfter(html)
.takeOut()

Form & Input

.getValue() / .setValue()
.clearValue() / .focusIt()
.checkIfEmpty()
.serializeIt()

Animasi & Scroll

.fadeIn() / .fadeOut()
.showIt() / .hideIt()
.scrollTo()
              / .scrollDown()
.checkIfVisible()

Mulai Sekarang

Tiga langkah,
langsung jalan.

Buat project baru

npx create-kobar nama-project

Scaffold otomatis — struktur folder, config routing, semua siap.

Daftarkan halaman

Kobar.register("beranda", () => { ... })

Logic per halaman diisolasi rapi. Tidak ada global yang berantakan.

Manipulasi DOM seperti biasa

Kobar.getElement("#btn").onTheClassActive()

Tidak perlu belajar API baru. Baca kodenya — kamu langsung tahu apa yang terjadi.

GitHub ↗ Dokumentasi

Kode yang bisa dibaca,bukan ditebak.