Ringkasan alur — bootstrap SPA

Urutan memuat index.html → nxdom.js → App.js dan inisialisasi NX.Tatiye (.run(), setara NX.Page). Bab pertama dari Panduan SPA; lanjut ke Entry dan Inisiasi.

1. index.html memuat pustaka /modules/nxdom.js (modul), lalu /App.js (modul).
2. App.js membuat satu instance new NX.Tatiye({ … }).run() — menginisialisasi routing SPA, base URL backend/API (termasuk endpoint multi-API bila diisi), kontainer konten, spinner, Web Worker, dan Service Worker (jika diaktifkan).

Setelah nxdom.js termuat, tersedia NX (API utama, setara NXUI di proyek contoh) dan nx (shorthand terpisah untuk callback berbasis string) — dijelaskan di Entry: NX dan nx.

Urutan script di HTML harus nxdom.js dulu, baru App.js, agar simbol global seperti NX tersedia saat App.js dieksekusi.

Struktur proyek NXDOM

Gambaran folder tipikal front-end SPA NXDOM: titik masuk HTML, satu berkas konfigurasi route, modul per halaman di bawah templates/, dan pustaka nxdom.js beserta aset bersama di assets/. Nama berkas contoh (beranda.js, about.js) mengikuti entri route di App.js dan konvensi appRoot Anda.

Di repositori Nexa Dom, template aktif (mis. templates/theme/) dapat memuat assets/js/app.js untuk dokumen; path pastinya menyesuaikan tema dan aturan server — lihat Entry: memuat nxdom.js.

Alur kerja NXDOM (diagram)

Diagram urutan di bawah merangkum bootstrap SPA: muat pustaka → NX.Tatiye → pendaftaran route → impor modul di appRoot → handler mengisi kontainer. Blok pre.mermaid

        sequenceDiagram
        autonumber
        participant HTML as index.html
        participant NU as nxdom.js
        participant NR as NexaRoute
        participant App as App.js
        participant Mod as Modul appRoot

        HTML->>NU: muat modul (script)
        NU->>NU: NX, NEXA, inisialisasi terkait
        HTML->>App: muat App.js
        App->>NU: new NX.Tatiye(config).run()
        NU->>NU: updateNEXAUrl(url, urlApi) + syncNexaEndpoints(endpoint) opsional
        App->>NR: ensureContainerId + registerAllRoutes
        loop tiap entri route
        NR->>Mod: dynamic import modul route
        Mod->>NR: export memanggil route.register(...)
        end
        Note over NR, Mod: Klik / navigasi URL → handler mengisi #main, onRoute + setPageMeta
        

Alur ringkas (tanpa diagram): browser memuat index.html → App.js mengimpor nxdom.js → new NX.Tatiye({ … }).run() (NexaPage) → registerAllRoutes() mengimpor modul di appRoot (mode manual dari array route, atau autoload saat navigasi) → NexaRoute menangani URL → konten di containerId, onRoute + meta; Web Worker / Service Worker / pwa opsional sesuai konfigurasi (lihat SPA & PWA).

        flowchart LR
        subgraph muat["1. Muat halaman"]
        A[index.html] --> B[nxdom.js]
        B --> C[App.js]
        end
        subgraph init["2. Inisialisasi"]
        C --> D[NX.Tatiye]
        D --> E[NexaRoute + route array]
        E --> F[Dynamic import modul appRoot]
        end
        subgraph jalan["3. Saat SPA jalan"]
        F --> G[Navigate / klik]
        G --> H[Handler route]
        H --> I[#main + meta head]
        end