Zarra

Zarra — o'zbekcha hujjatli, build bosqichisiz va tashqi bog'liqliksiz ishlaydigan reaktiv JavaScript mikro freymvork. Yadro — 3.4 KB gzip (chegara: 3.5 KB). Zarra so'zi o'zbekchada "eng kichik bo'lak" degani — falsafasi ham shunda: minimal yadro, maksimal natija.

Maqsad: boshlang'ich dasturchi bir kechqurunda o'rgansin, keyin React/Solid'ga oson o'tsin. Qadamchi (Composer'siz PHP mikrofreymvork) bilan bitta oila.

• Signal-asosli fine-grained reaktivlik — qiymat o'zgarsa, faqat tegishli DOM tuguni yangilanadi
• Nol bog'liqlik, nol build — bitta <script type="module"> teg bilan ishlaydi
• Avtomatik XSS himoya — qiymatlar hech qachon innerHTMLga tushmaydi
• Kalitlangan ro'yxat renderi (React'dagi key bilan bir xil idiom)
• Hash-router va store yadroning ichida
• To'liq TypeScript tiplari (Signal<T> generics bilan)
• Butun freymvork — bitta o'qiladigan fayl: src/zarra.js

Zamonaviy brauzerlar (ES2020+): Chrome, Firefox, Safari, Edge — so'nggi 2 versiya.

---

Tez boshlash

Hech narsa o'rnatmasdan, bitta HTML fayl:

<div id="app"></div>

<script type="module">
  import { zarra, html, signal } from 'https://cdn.jsdelivr.net/npm/zarrajs/dist/zarra.min.js'
  // lokal ishlatishda: './src/zarra.js'

  const son = signal(0)

  zarra('#app', () => html`
    <h1>${son}</h1>
    <button @click=${() => son(son() + 1)}>Bosing</button>
  `)
</script>

Tamom. Virtual DOM ham, build ham yo'q.

npm bilan (bundler ishlatadiganlar uchun):

npm install zarrajs

import { zarra, html, signal } from 'zarrajs'

CDN havolalari (versiya belgilash tavsiya etiladi):

• https://cdn.jsdelivr.net/npm/zarrajs@0.1/dist/zarra.min.js
• https://unpkg.com/zarrajs@0.1/dist/zarra.min.js

---

Butun API — 7 ta funksiya

Funksiya	Vazifasi
signal(qiymat)	Reaktiv qiymat: son() — o'qish, son(5) — yozish, son(n => n+1) — yangilash
computed(fn)	Hosilaviy, keshlanuvchi qiymat (glitch-free)
effect(fn)	Bog'liq signallar o'zgarganda qayta ishlaydi; dispose funksiyasini qaytaradi
html`...`	Shablon: teshiklarga signal, funksiya, shablon yoki massiv qo'yiladi
zarra(nishon, komp)	Komponentni DOM'ga o'rnatadi; dispose funksiyasini qaytaradi
router(marshrutlar)	Hash-asosli SPA marshrutlash (/post/:id parametrlari bilan)
store(obyekt)	Global holat: maydonlar signal bilan qoplangan oddiy obyekt

Direktivalar: @click (istalgan DOM hodisasi), @model (ikki tomonlama bog'lanish), @if (shartli render), key (ro'yxat kaliti). Ro'yxatlar — oddiy .map() bilan:

html`<ul>${() => mevalar().map(m => html`<li key=${m.id}>${m.nom}</li>`)}</ul>`

React'da bu: xuddi shu — items.map(...) va key. Zarra'dan React'ga o'tganingizda bu odat aynan shu holicha ishlaydi.

---

Namunalar (namunalar/)

npm run serve   # http://localhost:8090

Fayl	Nimani o'rgatadi
01-hisoblagich.html	signal, computed, @click
02-todo.html	kalitlangan ro'yxat, @model, @submit, komponent-funksiya
03-forma.html	forma validatsiyasi: computed + @model + disabled
04-mini-spa.html	router (:id param) + store (global savat)

---

Testlar va vositalar

npm test        # reaktiv yadro + router + store (Node, o'z mini runner'imiz)
npm run build   # dist/zarra.min.js (esbuild, npx orqali)
npm run hajm    # gzip hajmi ≤ 3.5 KB tekshiruvi
npm run serve   # mini statik server

Render qatlami testlari brauzerda: tests/brauzer.htmlni server orqali oching.

---

Hujjatlar (docs/)

• boshlash.md — qadam-baqadam qo'llanma (0 dan SPA gacha)
• api.md — to'liq API ma'lumotnomasi
• react-otish.md — Zarra → React/Solid o'tish xaritasi
• spetsifikatsiya.md — dizayn qarorlari va edge-case'lar

---

Falsafa: nega yana bitta freymvork?

Ko'p loyihalar uchun React yoki Vue — ortiqcha yuk: build pipeline, yuzlab bog'liqliklar. Zarra teskari yo'ldan boradi: brauzerda allaqachon bor imkoniyatlardan foydalanadi va faqat yetishmayotgan qatlamni — reaktivlikni qo'shadi. Har bir tushuncha (signal, komponent, key, store) dunyo standartlaridagi nomi va ma'nosi bilan berilgan — o'rgangan bilimingiz boshqa freymvorklarda ham ishlaydi.

Litsenziya

MIT