kobar

DOM DSL ringan — manipulasi DOM seperti kalimat manusia.

Bagian dari ekosistem Kobar — versi mini yang bisa dipakai di project manapun tanpa setup apapun.

Instalasi

npm install kobar-dom

pnpm add kobar-dom

yarn add kobar-dom

Cara Pakai

Script Tag (Browser langsung)

<script src="https://cdn.jsdelivr.net/npm/kobar-dom"></script>
<script>
  Kobar.getElement('#btn').onTheClassActive()
</script>

CommonJS

const Kobar = require('kobar-dom')

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

ES Module

import Kobar from 'kobar-dom'

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

API

Kobar.getElement(selector)

Seleksi elemen DOM. Ada dua cara:

Via string selector:

Kobar.getElement('#btn')              // querySelector
Kobar.getElement('all:.card')         // querySelectorAll
Kobar.getElement('id:mainContent')    // getElementById
Kobar.getElement('class:card')        // getElementsByClassName
Kobar.getElement('tag:button')        // getElementsByTagName

// Multi selector — return array
Kobar.getElement('#judul', '#subjudul', '#btn')

Via method name:

Kobar.getElementByIdMainBtn()         // getElementById('main-btn')
Kobar.getElementClassCard()           // getElementsByClassName('card')
Kobar.getElementTagDiv()              // getElementsByTagName('div')
Kobar.getElementAllCard()             // querySelectorAll('.card')
Kobar.getElementNameEmail()           // getElementsByName('email')

Mengembalikan instance yang bisa di-chain dengan semua method DSL di bawah.

Kobar.build(options)

Builder elemen HTML.

// Opsi lengkap
Kobar.build({
  tag: 'div',
  class: 'kartu',
  attr: { id: 'box', 'data-id': '1' },
  children: 'Halo'
}).done()

// Shorthand via method name
Kobar.buildDiv({ children: 'Halo' }).done()
Kobar.buildSpan({ class: 'label' }).done()
Kobar.buildDivWithClassThisKartu().done()
Kobar.buildAWithAttrThisHrefItsHome().done()

// done() mengembalikan { string, node }
const { string, node } = Kobar.buildDiv({ children: 'Halo' }).done()
document.body.appendChild(node)

Builder mendukung injeksi data via .data() — gunakan this-data dan this-data-{attr} pada template HTML:

// Di dalam children, tulis template dengan this-data
const { node } = Kobar.build({
  tag: 'div',
  class: 'kartu',
  children: `
    <h2 this-data="judul"></h2>
    <img this-data-src="foto" this-data-alt="nama">
    <p this-data="deskripsi"></p>
  `
}).data({
  judul: 'Produk A',
  foto: '/img/produk.jpg',
  nama: 'Produk A',
  deskripsi: 'Deskripsi produk'
}).done()

document.body.appendChild(node)

DSL — Proxy Method

Semua method DSL diakses via Kobar.getElement(selector).namaMethod().

onThe — Set / Tambah

// Event
Kobar.getElement('#btn').onTheClick(fn)
Kobar.getElement('#input').onTheInput(fn)
Kobar.getElement('#form').onTheSubmit(fn)

// Class
Kobar.getElement('#btn').onTheClassActive()
Kobar.getElement('#btn').onTheClassIsVisible()

// Style — pakai Its untuk nilai, pct untuk %
Kobar.getElement('#box').onTheStyleColorItsRed()
Kobar.getElement('#box').onTheStyleFontSizeIts16px()
Kobar.getElement('#box').onTheStyleWidthIts50pct()

// Attr
Kobar.getElement('#btn').onTheAttrDisabled()
Kobar.getElement('#btn').onTheAttrTitleItsHello()
Kobar.getElement('#btn').onTheAttr('title', value)

// Data
Kobar.getElement('#el').onTheDataIdIts42()

// Text
Kobar.getElement('#judul').onTheTextHelloWorld()
Kobar.getElement('#judul').onTheText(value)

// Html
Kobar.getElement('#wrap').onTheHtml(value)

// Iterasi koleksi
Kobar.getElement('all:.card').onTheEach((item, i) => {
  item.onTheClassVisible()
})

offThe — Hapus

Kobar.getElement('#btn').offTheClick(fn)
Kobar.getElement('#btn').offTheClassActive()
Kobar.getElement('#box').offTheStyleColor()
Kobar.getElement('#btn').offTheAttrDisabled()
Kobar.getElement('#el').offTheDataId()
Kobar.getElement('#p').offTheText()

toggleThe — Bolak-balik

// Class — toggle biasa
Kobar.getElement('#nav').toggleTheClassIsOpen()

// Class — swap dua class
Kobar.getElement('#btn').toggleTheClassDarkWithLight()

// Style — swap dua nilai
Kobar.getElement('#box').toggleTheStyleColorItsBlueWithRed()

// Attr — swap dua nilai
Kobar.getElement('#el').toggleTheAttrAriaExpandedItsTrueWithFalse()

// Text — swap dua teks
Kobar.getElement('#btn').toggleTheTextBukaWithTutup()

changeThe — Ubah ke Nilai Baru

// Class
Kobar.getElement('#btn').changeTheClassActiveToDisabled()

// Style
Kobar.getElement('#box').changeTheStyleColorItsRedToBlue()

// Text
Kobar.getElement('#h1').changeTheTextHelloWorld()
Kobar.getElement('#h1').changeTheText(value)

checkThe — Cek (return boolean)

Kobar.getElement('#btn').checkTheClassActive()
Kobar.getElement('#btn').checkTheAttrDisabled()
Kobar.getElement('#box').checkTheStyleColorItsRed()
Kobar.getElement('#el').checkTheDataIdItsAbc()
Kobar.getElement('#p').checkTheTextHello()

dom — Akses DOM Native Langsung

Escape hatch kalau lupa nama method DSL — akses properti dan method DOM langsung.

// Method DOM
Kobar.getElement('#input').domFocus()
Kobar.getElement('#btn').domClick()
Kobar.getElement('#video').domPlay()

// Properti DOM — getter
Kobar.getElement('#input').domValue()         // → string
Kobar.getElement('#el').domOffsetHeight()     // → number

// Properti DOM — setter via argumen
Kobar.getElement('#input').domValue('Halo')

// Properti DOM — setter via Its
Kobar.getElement('#input').domValueItsHalo()

Method Lanjutan

Traversal

Semua method traversal return instance baru — bisa langsung di-chain.

Kobar.getElement('#item').goToParent().onTheClassHighlight()
Kobar.getElement('#item').goToNext().onTheClassActive()
Kobar.getElement('#item').goToPrev().offTheClassActive()
Kobar.getElement('#list').goToFirstChild().onTheClassFirst()
Kobar.getElement('#list').goToLastChild().onTheClassLast()
Kobar.getElement('#btn').goToClosest('.modal').onTheClassIsOpen()

// Tanpa index — berlaku ke semua anak
Kobar.getElement('#list').goToChildren().onTheClassVisible()

// Dengan index — ambil satu elemen
Kobar.getElement('#list').goToChildren(0).onTheStyleColorItsGold()

// Tanpa index — berlaku ke semua sibling
Kobar.getElement('#item').goToSiblings().offTheClassActive()

// Dengan index — ambil satu sibling
Kobar.getElement('#item').goToSiblings(0).onTheClassFirst()

Insertion

Kobar.getElement('#list').putInside('<li>Item baru</li>')
Kobar.getElement('#list').putInsideFirst('<li>Item pertama</li>')
Kobar.getElement('#item').putBefore('<li>Sebelumnya</li>')
Kobar.getElement('#item').putAfter('<li>Sesudahnya</li>')
Kobar.getElement('#modal').takeOut()
Kobar.getElement('#lama').swapWith('<div id="baru">Baru</div>')

Form & Input

// Getter — tidak bisa di-chain
const nilai = Kobar.getElement('#nama').getValue()
const kosong = Kobar.getElement('#nama').checkIfEmpty()
const data = Kobar.getElement('#form').serializeIt()
// → { nama: '...', email: '...', kategori: '...' }

// Setter — bisa di-chain
Kobar.getElement('#nama').setValue('John')
Kobar.getElement('#nama').clearValue()
Kobar.getElement('#nama').focusIt()
Kobar.getElement('#nama').blurIt()

Animasi & Visibility

// Getter
const tampil = Kobar.getElement('#menu').checkIfVisible()

// Setter
Kobar.getElement('#modal').showIt()
Kobar.getElement('#modal').showIt('flex')
Kobar.getElement('#modal').hideIt()
Kobar.getElement('#toast').fadeIn()
Kobar.getElement('#toast').fadeIn(500)
Kobar.getElement('#toast').fadeOut()
Kobar.getElement('#toast').fadeOut(500)

Scroll

// Getter
const posisi = Kobar.getElement('#box').getScrollTop()

// Setter
Kobar.getElement('#section').scrollTo()
Kobar.getElement('#section').scrollTo({ behavior: 'instant' })
Kobar.getElement('#chat').scrollDown()
Kobar.getElement('#chat').scrollUp()

Ukuran & Posisi

Semua getter — tidak bisa di-chain.

const { width, height } = Kobar.getElement('#box').getSize()
const { top, left } = Kobar.getElement('#box').getPosition()
const rect = Kobar.getElement('#box').getRect()

Utilitas

// Getter
const tag = Kobar.getElement('#el').getTag()       // → 'div'
const cocok = Kobar.getElement('#btn').matches('.active')
const elAsli = Kobar.getElement('#btn').getRaw()   // → HTMLElement
const ada = Kobar.getElement('#modal').checkIfExists()

// Chainable
Kobar.getElement('#kode').copyTextToClipboard()

const klon = Kobar.getElement('#kartu').cloneIt()
Kobar.getElement('#list').putInside(klon.getRaw())

Observer System

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

// #modal belum ada di DOM — aksi masuk antrian
Kobar.getElement('#modal').onTheClassVisible()

// Nanti ketika #modal ditambahkan ke DOM, class 'visible' otomatis ditambahkan
document.body.insertAdjacentHTML('beforeend', '<div id="modal"></div>')

Chaining

Hampir semua method setter bisa di-chain. Method getter (yang return nilai) tidak bisa di-chain.

// ✅ Chainable — setter
Kobar.getElement('#btn')
  .onTheClassActive()
  .onTheStyleColorItsWhite()
  .onTheStyleBackgroundColorItsBlue()
  .onTheClick(handleClick)

// ❌ Tidak chainable — getter
const nilai = Kobar.getElement('#input').getValue()
const kosong = Kobar.getElement('#input').checkIfEmpty()

Konversi Nama Method

| Penulisan | Hasil | |---|---| | onTheClassIsActive | classList.add('is-active') | | onTheStyleFontSizeIts16px | style.font-size = '16px' | | onTheStyleWidthIts50pct | style.width = '50%' | | toggleTheClassOpenWithClose | swap class open ↔ close | | toggleTheStyleColorItsBlueWithRed | swap color blue ↔ red |

Aturan:

• CamelCase dikonversi ke kebab-case untuk class dan style property
• Its memisahkan nama property dari nilainya
• With memisahkan dua nilai untuk toggle
• To memisahkan nilai lama dari nilai baru untuk changeThe
• pct dikonversi ke %

Lisensi

GPL-3.0 © azqilana