NXDOM

Nxdom Framework

Nusantara eXtreme Development Object Model — dokumentasi resmi

1. Entry: index.html — HTML & script

Base href, memuat nxdom.js (biasanya lewat import di App.js), API global NX dan nx, kontainer route, dan navigasi SPA.

<base href="/">

Menetapkan root URL dokumen. Link seperti /beranda, /contact/data di-resolve ke origin yang sama (bukan relatif ke subfolder). Jika aplikasi di-deploy di subpath (misalnya https://domain.com/app/), sesuaikan href ke subpath tersebut.

Memuat nxdom.js

Pada pola yang dipakai proyek ini, nxdom.js tidak perlu tag <script> terpisah di HTML: modul dimuat lewat import di baris pertama App.js. Eksekusi modul ES menjalankan dependency import sebelum sisa isi berkas, sehingga NX (dan global terkait) sudah ada saat new NX.Tatiye({ … }).run() (setara new NX.Page({ … })) dipanggil.

import "./assets/modules/nxdom.js"; // … konfigurasi, lalu misalnya: const req = new NX.Tatiye({ /* konfigurasi sama seperti Page */ }).run();

Path ./assets/modules/nxdom.js relatif terhadap lokasi App.js (biasanya root proyek). Sesuaikan jika Anda memindahkan berkas. Pastikan server development menyajikan /modules/nxdom.js dan /App.js dengan tipe MIME modul yang benar.

Alternatif — dua tag di HTML: Anda bisa memuat nxdom.js dari index.html lalu App.js (tanpa baris import nxdom di App.js jika sudah dimuat global lewat script pertama):

<script type="module" src="/modules/nxdom.js"></script> <script type="module" src="/App.js"></script>

Dalam pola ini, urutan harus nxdom.js dulu, baru App.js.

NX dan nx — API global (nxdom.js)

NX

  • NX adalah objek API utama Nexa: method utilitas, Page / Tatiye, selektor (element, $), manajemen data global (setGlobal, getGlobal, …), dan lainnya (lihat NXBase di file yang sama).
  • Setelah diisi, NX dibungkus Proxy: set — nilai yang bukan function, bukan nama yang diawali _, dan bukan constructor / prototype, juga ditulis ke window[namaProperti] (sinkron data ke global untuk kompatibilitas kode lama). get — baca dulu dari NX; jika tidak ada, fallback ke window (asal nilainya bukan undefined).
  • Inisiasi aplikasi memakai nama ini secara eksplisit, misalnya new NX.Tatiye({ … }).run() (setara new NX.Page({ … })) di App.js.

nx (huruf kecil)

  • nx adalah shorthand terpisah, bukan referensi yang sama dengan NX: Inisialisasi — objek salinan satu kali properti yang terlihat dari NX saat itu, ditambah _global dan _ui.
  • Proxy kedua — saat Anda menetapkan nx.namaFungsi = function () { … }, handler set juga menyalin fungsi ke window[namaFungsi]. Ini mendukung callback berbasis nama string (modal, form, atribut HTML).
  • Resolusi di komponen — misalnya NexaForm (onclick.send) mencari nama fungsi dengan urutan: window → NX → nx → nx._global.

Cuplikan handler (route /form) — pola ini selaras dengan modal/route lain:

nx.nexaFormDemoSubmit = async function (formId, formData, setDataBy) { console.log("[nexaFormDemoSubmit]", { formId, formData, setDataBy }); const out = document.getElementById("nexaFormDemoOutput"); if (out) { out.textContent = JSON.stringify({ formData, setDataBy }, null, 2); } };

Detail form, validasi, dan onclick.send: lihat docs/form.md di repositori modul.

Kontainer route

Dengan nxdom.js di-import dari App.js, HTML cukup memuat satu modul entri; pastikan App.js tetap memulai dengan import "./assets/modules/nxdom.js"; (lihat Memuat nxdom.js).

<div id="main"></div> <script type="module" src="/App.js"></script>

ID main harus cocok dengan containerId di App.js (mis. "main").

Anchor dengan href ke path SPA (mis. /beranda, /blog) dipakai NexaRoute untuk navigasi tanpa reload penuh — selaras dengan daftar route di App.js.