Route, sub-route, modul, meta — NexaRoute

Name: NxCode IDE
Availability: InStock
Author: NxDOM

Pemetaan route ke modul di appRoot, route.Layer / NexaGrid, navigasi programatik, refresh & partial, serta routeMetaByRoute dan NX.setPageMeta. Dua cara mendaftar halaman: manual (eksplisit di App.js) dan autoload (opsional).

Mode manual — default

Setiap string di array route didaftarkan saat startup lewat NexaPage.registerAllRoutes() → contentIndex() meng-import modul template.

App.js

route: ["beranda", "about", "blog"],

Rute URL	File	Export
`/beranda`	`templates/beranda.js`	`beranda`
`/about`	`templates/about.js`	`about`
`/contact/data`	`templates/contact/data.js`	`contact_data`

Nama di route = nama file tanpa .js (kecuali path bersarang).
Di template: export async function (page, route) lalu route.register(page, handler).
Tautan <a href="/about"> ditangkap NexaRoute jika rute terdaftar.

Mode autoload (opsional)

Tambahkan token "autoload" di route (boleh digabung dengan rute eksplisit). Rute lain dimuat on-demand saat navigasi — tanpa manifest, PHP, atau daftar nama tambahan.

App.js

route: ["beranda", "autoload"],

Contoh: /data → templates/data.js dengan export async function data cukup dibuat + ditautkan; tidak perlu mengubah App.js. URL bertingkat dan nav.subRoute: Autoload rute.

Cara kerja routing

contentIndex() meng-import() templates/{route}.js.
Memanggil export async function (page, route) → route.register(page, handler).
getRouteFromUrl() memakai pathname + mountPath.
Redirect / ke rute pertama atau last route (IndexedDB) bila ada riwayat.

Blog + slug: NX.createSlug, NX.findBySlug — lihat API slug dan sub-route dinamis.

Menambah halaman baru

Manual

Tambah "kontak" di App.js → route.
Buat templates/kontak.js — export async function kontak.
Link <a href="/kontak"> di index.html.

Dengan autoload

Jika route memuat "autoload": cukup file + tautan — lihat Mode autoload § menambah halaman.

Pemetaan `route` ke modul dan pola handler

Untuk entri string di route, NexaPage.registerAllRoutes() memuat modul lewat contentIndex (NexaRoute.js). Untuk objek route dengan template, gunakan registerTemplate (lihat NexaPage.registerAllRoutes() di kode).

Dari `route`	Modul (relatif ke `appRoot`)	Nama export (fungsi)
`'beranda'`	`beranda.js`	`beranda`
`'contact'`	`contact.js`	`contact`
`'contact/data'`	`contact/data.js` (disarankan) atau `contact_data.js` di akar `appRoot`	`contact_data`

Subfolder di bawah appRoot didukung: 'contact/data' → {appRoot}/contact/data.js.
Fallback: jika impor di atas gagal, dicoba {appRoot}/contact_data.js (slash pada string route diganti _ pada nama berkas).
Nama export: route.replace(/\//g, "_") → fungsi bernama contact_data.

Sub-route dinamis (satu handler, URL bertingkat) dibahas di subsection berikut — bukan pemetaan folder blog/slug.js, melainkan satu handler + nav.subRoute.

Modul route (kerangka)

export async function namaRoute(page, route) {
  route.register(page, async (routeName, container, routeMeta = {
    title: "Judul | App",
    description: "Deskripsi halaman.",
  }, style, nav = {}) => {
    route.routeMetaByRoute.set(page, routeMeta);
    container.innerHTML = `<p>Route: ${routeName}</p>`;
  });
}

Sub-route dinamis (satu handler, URL bertingkat)

Cukup satu entri route dasar di array route (mis. 'blog' atau 'guides'); tidak perlu mendaftar setiap anak sebagai string terpisah bila satu handler menanganinya.

NexaRoute mencocokkan route terpanjang yang terdaftar, lalu menyisakan sisa path sebagai sub-route. Di callback route.register, argumen kelima nav berisi:

nav.baseRoute — route dasar yang terdaftar.
nav.subRoute — sisa path setelah base (slug / segmen), atau kosong di indeks base.
routeName — path internal penuh untuk logika atau tampilan.

Tautan di dalam konten memakai path relatif ke <base href="/"> agar navigasi SPA tanpa reload penuh.

`route.Layer` — kartu & sortable (`NX.Layer`)

route.Layer(options) adalah helper di NexaRoute (assets/modules/Route/NexaRoute.js) yang mempersingkat pola halaman berisi kartu dengan drag/sort lewat NX.Layer (alias NexaLayer).

Prasyarat: NX.Layer tersedia (biasanya lewat nxdom.js). Instance route di sini adalah objek NexaRoute yang diteruskan ke fungsi modul — bukan argumen routeName (string) di dalam callback register.

Opsi utama

Opsi	Fungsi
`container`	Elemen DOM yang diisi konten route (argumen handler `register`).
`nav`	Objek `{ baseRoute, subRoute }` dari handler.
`page`	Kunci route yang sama dengan `page` di export modul.
`content`	Array konfigurasi kartu untuk `NexaLayer.Container`, atau fungsi async `(ctx) => array`.
`dimensi` / `height`	Cara menghitung tinggi scroll area kartu lewat `NX.Dimensi`.
`delay`	Ms sebelum init Layer (default 100).

`dimensi` dan `containerId`

Default selector mengikuti # + containerId pada instance NexaRoute dari NX.Page (containerId: 'main' → #main). Singkat (disarankan): dimensi: [390, "vh"] setara height("#main", 390, "vh").

Contoh

route.Layer

export async function colom(page, route) {
  route.register(page, async (routeName, container, routeMeta = {
    title: "Judul | App",
    description: "…",
  }, style, nav = {}) => {
    route.routeMetaByRoute.set(page, routeMeta);
    await route.Layer({
      container,
      nav,
      page,
      dimensi: [390, "vh"],
      content: async ({ height }) => [
        /* kartu 1, kartu 2 */
      ],
    });
  });
}

Cuplikan fungsi kartu untuk `content`

content membutuhkan array objek baris (satu objek = satu kartu). Pola disarankan: satu fungsi async per kartu yang mengembalikan konfigurasi untuk NexaLayer.Container, lalu gabungkan dengan await.

Properti baris	Keterangan singkat
`id`	Menentukan `#nx_card_` dan `#nx_body_` (target partial refresh).
`header` / `title`	Judul kartu; `header: false` tanpa header.
`col`	Kelas grid, mis. `nx-col-6`.
`scroll`	Mis. `{ type: "nx-scroll-hidden", height }`.
`footer`	`false` tanpa footer; string untuk isi footer.
`html`	Isi area scroll kartu.

Referensi lengkap di proyek: templates/colom.js. Implementasi method Layer: komentar JSDoc di NexaRoute.js.

NexaGrid (`NX.grid`) — layout dan parameter style

Selain innerHTML atau route.Layer, Anda bisa membangun layout grid 12 kolom lewat NexaGrid: NX.grid (alias NX.NexaGrid / NX.Grid). CSS grid ada di assets/modules/Grid/grid.css.

Integrasi route: route.register(page, handler, styleObject, routeMeta?) — argumen ketiga berisi mis. useContainer, container: { nx: true }, dan rows. Di callback: await route.applyGridStyle(container, style) bila style?.rows?.length.

createGridLayout

await route.createGridLayout(container, rowsArray, { useContainer: true, nx: true });

Panduan web: NexaGrid — dokumentasi · Markdown: docs/NexaGrid.md · implementasi: assets/modules/Grid/NexaGrid.js. Contoh route: templates/grid.js ('grid' di array route di App.js).

Bedakan dengan route.Layer: Layer membangun kartu di .nx-row untuk drag/sort; NexaGrid membangun baris/kolom untuk layout halaman.

`NX.load` — navigasi programatik ke route

Untuk membuka route dari kode tanpa klik tautan menu, gunakan NX.load(route, pushState?) — mendelegasikan ke window.nexaRoute.navigate.

Prasyarat: NX.Page sudah dijalankan sehingga window.nexaRoute ada. String route harus terdaftar di array route atau cocok sub-route dinamis.

Argumen	Keterangan
`route`	Path tanpa slash di depan, mis. `'blog'`, `'contact/data'`. Slash di ujung dipangkas.
`pushStateOrOptions`	Default `true`: menambah history. `false` atau `{ pushState: false }`: replace.

Contoh

await NX.load('blog');
await NX.load('beranda', false);
await NX.load('form', { pushState: false });

Setara: await window.nexaRoute.navigate('blog'). Implementasi: assets/modules/nxdom.js (properti load pada NX).

`NX.Refresh` — refresh route & partial (`nexaRoute.refresh`)

Tingkat	API	Kapan dipakai
Route penuh (SPA)	`NX.Refresh.refresh()` → `nexaRoute.refresh()`	Menjalankan lagi handler route untuk route aktif.
Sebagian DOM	`NX.Refresh.partial({ ... })`	Hanya mengganti satu node (mis. isi scroll satu kartu) tanpa menjalankan ulang seluruh handler.

`NX.Refresh.refresh(options?)`

Opsi: route (default route aktif), pushState (default false), hard: true untuk location.reload().

`NX.Refresh.partial(options)`

target (selector atau Element) wajib; scope default #main; html / render / update untuk isi baru; keepScroll: true mengurangi lompat scroll kolom NexaLayer lain. Event: NX:partialRefresh.

ID kartu: area scroll biasanya #nx_body_{safeId} — target tepat untuk partial.

partial & refresh

await NX.Refresh.partial({
  scope: "#main",
  target: "#nx_body_SettingFailed",
  keepScroll: true,
  render: async () => { /* … */ return html; },
});
await NX.Refresh.refresh({ route: "contact/data", pushState: false });

`NX.map` / `NX.render` / `NX.mapJoin` — HTML dari array (map + join)

Membangun satu string HTML dari array tanpa menulis .map(...).join(...) berulang. NX.map mengembalikan Promise<string> (async per item); sinkron (alias sama).

Di fungsi async, gunakan await NX.map(...). Nama map menekankan bahwa ini bukan parameter render di NX.Refresh.partial.

Contoh

const html = await NX.map(local.response, (item) => `<p>${item.a1}</p>`);

`routeMetaByRoute`, `onRoute`, dan `NX.setPageMeta`

NexaRoute.routeMetaByRoute adalah Map meta per kunci route. Di handler modul: route.routeMetaByRoute.set(page, { title, description, ... }).
defaultRouteMeta di NX.Page menjadi fallback jika route tidak mengisi meta.
onRoute di App.js menggabungkan meta dan memanggil NX.setPageMeta (title, OG, canonical, dll.).

onRoute (cuplikan)

onRoute: (routeInfo) => {
  const def = routeInfo.defaultRouteMeta || {};
  const pack = routeInfo.routeMeta
    ? { ...def, ...routeInfo.routeMeta }
    : { ...def };
  const base = typeof location !== "undefined" ? location.origin : "";
  NX.setPageMeta({
    appName: "App",
    ...pack,
    ogUrl: typeof location !== "undefined" ? location.href : undefined,
    canonical: typeof location !== "undefined" ? location.href : undefined,
    ogImage: pack.ogImage || (base ? `${base}/assets/images/favicon.ico` : undefined),
  });
},

NX.setPageMeta: lihat assets/modules/Route/setPageMeta.js. Sub-route dinamis: set meta di handler sesuai nav.subRoute / routeName.

Nxdom Framework

Route, sub-route, modul, meta — NexaRoute

Mode manual — default

Mode autoload (opsional)

Cara kerja routing

Menambah halaman baru

Manual

Dengan autoload

Pemetaan route ke modul dan pola handler

Sub-route dinamis (satu handler, URL bertingkat)

route.Layer — kartu & sortable (NX.Layer)

Opsi utama

dimensi dan containerId

Contoh

Cuplikan fungsi kartu untuk content

NexaGrid (NX.grid) — layout dan parameter style

NX.load — navigasi programatik ke route

NX.Refresh — refresh route & partial (nexaRoute.refresh)

NX.Refresh.refresh(options?)

NX.Refresh.partial(options)

NX.map / NX.render / NX.mapJoin — HTML dari array (map + join)

routeMetaByRoute, onRoute, dan NX.setPageMeta

Pemetaan `route` ke modul dan pola handler

`route.Layer` — kartu & sortable (`NX.Layer`)

`dimensi` dan `containerId`

Cuplikan fungsi kartu untuk `content`

NexaGrid (`NX.grid`) — layout dan parameter style

`NX.load` — navigasi programatik ke route

`NX.Refresh` — refresh route & partial (`nexaRoute.refresh`)

`NX.Refresh.refresh(options?)`

`NX.Refresh.partial(options)`

`NX.map` / `NX.render` / `NX.mapJoin` — HTML dari array (map + join)

`routeMetaByRoute`, `onRoute`, dan `NX.setPageMeta`