55 lines
2.3 KiB
JavaScript
55 lines
2.3 KiB
JavaScript
// Hash-based SPA router.
|
|
// Reads pages.json (generated by build.sh from components.yml).
|
|
// Each page is an HTML fragment (index.html) + optional CSS + optional JS module.
|
|
//
|
|
// Load order enforced by index.html:
|
|
// await import('./core/registry.js') ← defines all components
|
|
// await import('./core/router.js') ← this file
|
|
|
|
const response = await fetch('./pages.json')
|
|
if (!response.ok) throw new Error('router: failed to load pages.json — run build.sh')
|
|
const PAGES = await response.json()
|
|
|
|
// Cache of imported JS modules — modules are only fetched once per session.
|
|
const MODULE_CACHE = new Map()
|
|
|
|
// Currently active page CSS <link> — removed on navigation.
|
|
let activeCSS = null
|
|
|
|
function currentRoute() {
|
|
const hash = window.location.hash.replace(/^#\//, '') || PAGES[0]?.route || ''
|
|
return hash.split('?')[0]
|
|
}
|
|
|
|
async function render(routeName) {
|
|
const page = PAGES.find(p => p.route === routeName) ?? PAGES[0]
|
|
const main = document.querySelector('main')
|
|
if (!main || !page) return
|
|
|
|
// ── HTML ────────────────────────────────────────────────────────────────────
|
|
const htmlRes = await fetch(page.html)
|
|
if (!htmlRes.ok) throw new Error(`router: failed to load ${page.html}`)
|
|
main.innerHTML = await htmlRes.text()
|
|
|
|
// ── CSS ─────────────────────────────────────────────────────────────────────
|
|
activeCSS?.remove()
|
|
activeCSS = null
|
|
if (page.css) {
|
|
const link = document.createElement('link')
|
|
link.rel = 'stylesheet'
|
|
link.href = page.css
|
|
document.head.appendChild(link)
|
|
activeCSS = link
|
|
}
|
|
|
|
// ── JS ──────────────────────────────────────────────────────────────────────
|
|
if (page.js) {
|
|
if (!MODULE_CACHE.has(page.js)) {
|
|
MODULE_CACHE.set(page.js, await import(`../${page.js}`))
|
|
}
|
|
MODULE_CACHE.get(page.js)?.init?.(main)
|
|
}
|
|
}
|
|
|
|
await render(currentRoute())
|
|
window.addEventListener('hashchange', () => render(currentRoute()))
|