NXDOM

Nxdom Framework

Nusantara eXtreme Development Object Model — dokumentasi resmi

Inisiasi: App.js — NX.Tatiye

Satu pemanggilan new NX.Tatiye({ … }).run() (setara new NX.Page({ … })): URL, endpoint multi-API, daftar route, spinner, debug, Web Worker, dan Service Worker.

const req = new NX.Tatiye({ /* konfigurasi sama seperti Page */ }).run();

NX.Tatiye vs NexaPage

KelasPeran
NexaTatiyeWrapper: .run() → new NexaPage(config)
NexaPagewindow.nexaPage, sync URL, registerAllRoutes()
NexaRoutewindow.nexaRoute — URL, history, handler

config.js & NEXA.endpoint · Objek global

Wajib disesuaikan dengan lingkungan Anda

Opsi Fungsi
url Base URL backend (halaman/server yang melayani SPA/template). Diteruskan ke NEXA.url. Bisa di-set di root atau di dalam endpoint.url (lihat Endpoint multi-API).
urlApi Base URL API data (endpoint terpisah jika ada). Menjadi sumber NEXA.apiBase (bersama fallback url + /api). Bisa di root atau di endpoint.urlApi.
containerId ID elemen DOM tempat konten route di-render (sesuai #main di HTML).
mountPath Jika SPA tidak di root URL, isi prefix path (mis. "app" untuk /app/...). Kosong '' jika SPA di root.
appRoot Folder template relatif ke konvensi proyek (mis. 'templates').

Sesuaikan url / urlApi (atau endpoint) dengan port/host server yang benar-benar Anda jalankan; nilai di repositori hanya contoh lokal.

Endpoint multi-API (endpoint)

Anda bisa mengelompokkan base URL dan API tambahan dalam satu objek endpoint. Nilai ini mengisi NEXA.url, NEXA.apiBase, NEXA.drive (lewat updateNEXAUrl), dan NEXA.endpoint (snapshot lengkap), serta menyalin string URL tambahan ke properti NEXA dengan nama yang sama (mis. typicode → NEXA.typicode) lewat NX.syncNexaEndpoints.

Properti yang tidak di-mirror ke root NEXA: url, urlApi, apiBase, drive, userId, controllers, worker, serviceWorker, endpoint.

Prioritas: jika endpoint.url ada, ia mengalahkan url di root config. endpoint.urlApi mengalahkan urlApi di root jika tidak kosong.

endpoint: { url: "http://localhost:8001", urlApi: "http://localhost:3000", typicode: "https://jsonplaceholder.typicode.com/posts", },

Setelah init: NEXA.endpoint.typicode dan NEXA.typicode berisi URL yang sama (normalisasi slash/https sesuai nxdom.js). Konfigurasi lama url + urlApi di root (tanpa endpoint) tetap didukung.

Route di App.js (route, meta, onRoute)

  • route: array string path yang didaftarkan ke NexaRoute dan bisa dinavigasi tanpa reload penuh — selaras dengan tautan di index.html dan modul di bawah appRoot.
  • defaultRouteMeta: metadata default (judul, deskripsi) untuk halaman.
  • onRoute: callback tiap pergantian route; di proyek ini memakai NX.setPageMeta. Detail routeMetaByRoute: lihat Route, modul, meta.
route: ["beranda", "autoload"],
  • Mode manual: setiap string (mis. "about") → templates/about.js + export async function about. Lihat Mode manual.
  • Autoload: token "autoload" memuat modul saat navigasi tanpa menulis nama di array — cukup file + tautan. Autoload rute.
  • contact/data (manual): path bersarang → templates/contact/data.js, export contact_data.
  • Urutan array: fallback kunjungan pertama ke route pertama jika belum ada riwayat di IndexedDB.
  • Sub URL: satu entri base + nav.subRoute, atau autoload + file template terpanjang yang cocok.

Spinner

Objek spinner mengatur loading UI (overlay/inline, ukuran, warna, pesan). Nonaktifkan dengan enabled: false jika tidak diperlukan.

Debug route

  • debugRouteErrors: true menampilkan stack error di halaman saat route gagal; untuk produksi set false.
  • Alternatif: query ?nexaDebug=1 tanpa mengubah file (sesuai komentar di kode).

Web Worker

webWorker: { enabled: true, storage: true, indexedDB: true, storageCacheTtlMs: 86400000, debug: false, },
Opsi Fungsi
enabled Mengaktifkan dedicated Web Worker untuk fetch/parse terpisah dari thread UI.
storage Jika false, Storage tidak memakai worker (fallback ke fetch di thread utama).
indexedDB Cache respons Storage di IndexedDB (stale-while-revalidate); event nexa-storage-cache-update saat data segar.
storageCacheTtlMs Umur cache (ms). Default 24 jam. 0 mematikan pengecekan waktu (TTL waktu).
debug true menambah log [NexaWorker] di konsol.

Implementasi cache di assets/modules/Buckets/NexaStorage.js.

Service Worker

serviceWorker: { enabled: true, scriptUrl: "/sw.js", scope: "/", backgroundSync: true, debug: true, }
  • scriptUrl: harus dari root situs agar scope / diizinkan browser.
  • enabled: true diperlukan agar registrasi SW benar-benar jalan; objek kosong saja tidak mengaktifkan perilaku.
  • enabled: false: tidak mendaftarkan SW baru dan meng-unregister registrasi yang cocok scriptUrl (default /sw.js).
  • backgroundSync: menyiapkan event sync; halaman bisa memanggil NX.registerNexaBackgroundSync('nexa-background-sync') jika didukung browser.

Detail perilaku cache/offline ada di komentar header sw.js.

PWA (installable)

Terpisah dari webWorker dan serviceWorker. Objek pwa mengaktifkan manifest + banner pembaruan versi lewat NX.initNexaPwa (assets/modules/Pwa/NexaPwa.js). Proyek tetap SPA; PWA menambah “pasang aplikasi” dan tampilan standalone bila manifest + HTTPS memenuhi syarat browser.

pwa: { enabled: true, manifestUrl: "/manifest.webmanifest", themeColor: "#CB2F2F", promptUpdate: true, },

Di index.html tambahkan <link rel="manifest">, theme-color, dan ikon. Lihat SPA & PWA. Untuk template Electron, set pwa.enabled: false (dan biasanya serviceWorker.enabled: false) — PWA & desktop.