`NexaForge` — hydrate & storage

Name: NxCode IDE
Availability: InStock
Author: NxDOM

Modul NexaForge.js: render daftar dari template di DOM — pagination, search, filter, hydrate, hydrateStorage (NexaModels). Global: NX.NexaForgeView. Sumber: docs/NexaForge.md. Lihat juga NX.NexaDom, NexaModels.

Ringkasan arsitektur

Node dengan id unik; isi = satu baris template per item.
Extractor dari NexaForge / data-nexa-forge (legacy NexaHtml), atau sama dengan elementById.
Data dinormalisasi ke { [extractor]: Array }; item punya no, encoded_id, slug opsional.
Render lewat NexaDomextractor + NexaFilter — placeholder {extractor.field}.

Atribut HTML & extractor

Nilai dibaca dengan NexaForge.getNexaForgeAttr(el).

HTML

<div id="daftar-user" data-nexa-html="user">
  <div class="baris">
    <span>{user.nama}</span>
    <span>{user.email}</span>
  </div>
</div>

JavaScript

new NexaForge({
  elementById: "daftar-user",
  user: [
    { id: 1, nama: "A", email: "a@x.com" },
    { id: 2, nama: "B", email: "b@x.com" },
  ],
});

Metode statis

NexaForge.SENSITIVE_FIELDS — daftar field sensitif.
addSensitiveFields / removeSensitiveFields — string atau array string.
getNexaForgeAttr(el) → nilai extractor.
hydrate(root, lists) → NexaForge[] — elemen perlu id + atribut extractor.

JavaScript

const instances = NexaForge.hydrate(container, {
  user: [{ id: 1, nama: "Rina", email: "rina@example.com" }],
});

Detail fetchStorageRows, hydrateStorage, buildStorageQueryConfig ada di bagian berikut.

Sumber data: `storage` (NexaModels / SQL)

Metode	Keterangan
`buildStorageQueryConfig(storage)`	Memetakan `{ model, select?, query? }` ke `queryConfig` loader.
`fetchStorageRows(options)`	Batch async + `mapRow` opsional.
`hydrateStorage(root, options)`	Fetch lalu `new NexaForge` per elemen bertanda NexaForge di `root`.

Default batch SQL 10000 (storageFetchLimit / fetchLimit). order = item per halaman di UI (slice klien), bukan LIMIT SQL. Pagination server-side penuh → pakai NexaDom + storage.

JavaScript

const { instances, totalCount, rows } = await NexaForge.hydrateStorage(container, {
  storage: {
    model: "demo",
    query: (q) => q.whereNotNull("id"),
  },
  order: 10,
  sortBy: "title",
  sortOrder: "ASC",
  searchableFields: ["title", "slug"],
  search: "exam-user-search",
  pagination: "exam-user-pagination",
  mapRow: (row) => ({
    id: row.id,
    nama: row.title ?? "",
    email: row.slug ?? "",
  }),
});

Opsi	Peran
`order`	Baris per halaman di UI (bukan LIMIT SQL).
`limit`	LIMIT SQL eksplisit (override).
`storageFetchLimit` / `fetchLimit`	Batch dari DB, default 10000.

Referensi opsi: `fetchStorageRows` & `hydrateStorage`

`fetchStorageRows(options)`

Opsi	Keterangan
`storage`	Wajib: `model`, `query?`, `select?`.
`limit`, `storageFetchLimit`, `offset`	SQL limit/offset.
`searchKeyword`, `searchableFields`	LIKE di kolom.
`sortBy`, `sortOrder`	Urutan SQL.
`mapRow`	`(row) => object` untuk template.

Return: { totalCount, response, rows }.

`hydrateStorage(root, options)`

Tambahan: extractor / listsKey, spinner, opsi UI diteruskan ke constructor (kecuali yang hanya untuk fetch: storage, mapRow, dll.).

Return: { instances, totalCount, rows }.

Spinner pada `hydrateStorage`

NexaSpinner — spinner: false, true, atau objek enabled, centerScreen, type, size, color, message, dll. Ditampilkan sebelum fetch, disembunyikan di finally.

Legacy & alias (`NexaHtml.js`)

NexaHtml.js mengekspor NexaForge sebagai NexaHtml. NX.NexaForgeView = kelas NexaForge. Disarankan impor dari NexaForge.js.

Constructor: `new NexaForge(options)`

Wajib: elementById — elemen ada di document.

Data awal: key = extractor, atau { data: [...] }, atau array langsung.

Opsi	Keterangan
`order`	Item per halaman.
`search`, `searchableFields`	Input + field yang dicari.
`pagination`	`id` kontainer pagination; `false` nonaktif.
`alwaysShowPagination`	Tampilkan bar meski satu halaman.
`filter` / `filterBy`	Filter select / multi.
`hideSensitiveFields`	Default true.
`endpoint`	Mode API HTTP.
`virtualScroll`	Jalur IntersectionObserver opsional.

Properti instance

data — getter/setter terstruktur per extractor.
filter — NexaFilter.
renderData, curPage, updatePaginationUI.
_rowID, _currentPage, _pageLimit, _activeFilters, _filterState, _performance.

Template & rendering (`NexaDomextractor`)

Template internal: <script type="text/template">; output ke #${elementById}_content_${instanceId}.
Placeholder {user.field}, path bersarang, filter pipa |.
Konteks global dari NEXA (base_url, page_home, projectAssets, …).

Data: getter/setter

Normalisasi menambah no, encoded_id; bentuk API { data: [...] } diubah ke array extractor.

Pagination, search, filter

Pagination memakai getFilteredData(). Satu halaman: bar disembunyikan kecuali alwaysShowPagination: true. Search debounce di memori. Filter multi lewat data-filter-type pada select.

Hindari duplikat id global (#currentPage, #totalPages, …) untuk beberapa instance.

Metode manipulasi data

Metode	Ringkas
`Element(callback)`	Akses baris halaman saat ini.
`addData`, `setData`, `Reload`	Mutasi + event reload.
`getCurrentData()`	`all`, `current`, `pagination`.
`sort`, `getID`, `updateById`, `updateData`, `deleteById`	CRUD ringkas + event.
`filterKey`, `recover`	Filter satu field / pulihkan data.
`setupRefreshButton`	Tombol refresh terkonfigurasi.

Field sensitif

Statik + instance API; string sensitif ditampilkan sebagai •••••••• (substring case-insensitive).

Mode API (`endpoint`)

JavaScript

endpoint: {
  url: "https://api.example.com/users",
  method: "GET",
  headers: {},
  timeout: 30000,
  retryAttempts: 3,
  retryDelay: 1000,
},

setApi, refreshApi, retry, updateEndpoint, getApiState, dll. Response: data, array, rows, atau items.

Event kustom

dataReloaded / dataReloadError — setelah addData.
dataUpdated, bulkDataUpdated, dataDeleted.
Mode API: nexadom:dataLoaded, nexadom:dataError (nama event di kode).

Utilitas & lifecycle

compileTemplate, destroy() — bersihkan listener, cache, observer. Lazy load img[data-src].

Kelas `NexaDomextractor`

setPaginationInfo, render, parse, sanitize.

Contoh lengkap

Markup + new NexaForge({ elementById, user, order, search, pagination, … }); mode API dengan setApi(). Lihat NexaForge.md untuk cuplikan HTML penuh.

Integrasi `NX.html` + hydrate

Alur: fragmen statis → innerHTML → hydrate(container, lists) atau NX.NexaForgeView.hydrateStorage(container, { storage, … }).

Panduan route & contoh handler: NX.NexaDom — Route & NX.html dan Referensi NexaForge.

JavaScript

const { instances, totalCount, rows } = await NX.NexaForgeView.hydrateStorage(container, {
  storage: { model: "demo", query: (q) => q.whereNotNull("id") },
  order: 10,
  storageFetchLimit: 10000,
  sortBy: "title",
  sortOrder: "ASC",
  searchableFields: ["nama", "email"],
  search: "exam-user-search",
  pagination: "exam-user-pagination",
  alwaysShowPagination: true,
  spinner: { enabled: true, centerScreen: true, color: "#CB2F2F", message: "" },
  mapRow: (row) => ({
    id: row.id,
    nama: String(row.title ?? ""),
    email: String(row.slug ?? ""),
  }),
});

Troubleshooting (umum)

Gejala	Tindakan
Sedikit item vs banyak di DB	Cek `storageFetchLimit` / jangan pakai `order` sebagai LIMIT SQL.
Pagination tak terlihat	`alwaysShowPagination: true` atau kurangi `order`.
Id info bentrok	Satu set id unik per komponen.
Spinner hilang	Set `spinner` eksplisit.
List kosong setelah hydrateStorage	Pastikan `id` + extractor + `mapRow` selaras template.

Referensi cepat — berkas sumber

Topik	Lokasi (perkiraan)
`hydrate`, storage, spinner	~1–340
Constructor, pagination, filter	~340–2500
API `endpoint`, `setApi`	~2500–3000
`NexaDomextractor`	~3000–akhir

Perilaku terkini mengacu ke assets/modules/Dom/NexaForge.js dan assets/modules/nxdom.js (NX.html).

Nxdom Framework

NexaForge — hydrate & storage

Ringkasan arsitektur

Atribut HTML & extractor

Metode statis

Sumber data: storage (NexaModels / SQL)

Referensi opsi: fetchStorageRows & hydrateStorage

fetchStorageRows(options)

hydrateStorage(root, options)

Spinner pada hydrateStorage

Legacy & alias (NexaHtml.js)

Constructor: new NexaForge(options)

Properti instance

Template & rendering (NexaDomextractor)

Data: getter/setter

Pagination, search, filter

Metode manipulasi data

Field sensitif

Mode API (endpoint)

Event kustom

Utilitas & lifecycle

Kelas NexaDomextractor

Contoh lengkap

Integrasi NX.html + hydrate

Troubleshooting (umum)

Referensi cepat — berkas sumber

`NexaForge` — hydrate & storage

Sumber data: `storage` (NexaModels / SQL)

Referensi opsi: `fetchStorageRows` & `hydrateStorage`

`fetchStorageRows(options)`

`hydrateStorage(root, options)`

Spinner pada `hydrateStorage`

Legacy & alias (`NexaHtml.js`)

Constructor: `new NexaForge(options)`

Template & rendering (`NexaDomextractor`)

Mode API (`endpoint`)

Kelas `NexaDomextractor`

Integrasi `NX.html` + hydrate