@jay-js/system
Version:
A powerful and flexible TypeScript library for UI, state management, lazy loading, routing and managing draggable elements in modern web applications.
106 lines • 4.45 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
// Import Lazy functionality
import { Lazy } from "../../../lazy/core/lazy.js";
import { resolvedRoutes, routerOptions } from "../configuration";
export function renderRoute(route) {
return __awaiter(this, void 0, void 0, function* () {
const target = yield getTarget(route);
if (!target || !(target instanceof HTMLElement))
return;
// Handle both element and import/module properties
if (route.element || route.import) {
const element = yield getElement(route);
if (!element)
return;
target.innerHTML = "";
target.append(element);
return target;
}
return;
});
}
export function getElement(route) {
return __awaiter(this, void 0, void 0, function* () {
try {
// Handle lazy loading via import and module properties
if (route.import) {
// Pass loader only if it's an HTMLElement (Lazy expects HTMLElement)
const loader = route.loader instanceof HTMLElement ? route.loader : undefined;
const lazyElement = Lazy({
import: route.import,
module: route.module,
params: route.params,
}, loader);
if (route.layout) {
lazyElement.dataset.layoutId = route.id;
}
return lazyElement;
}
// Handle traditional element property
if (route.element) {
if (typeof route.element === "function" && route.element instanceof Promise) {
const element = (yield route.element());
if (route.layout) {
element.dataset.layoutId = route.id;
}
return element;
}
if (typeof route.element === "function") {
const element = route.element();
if (route.layout) {
element.dataset.layoutId = route.id;
}
return element;
}
const element = route.element;
if (route.layout) {
element.dataset.layoutId = route.id;
}
return element;
}
}
catch (error) {
if (routerOptions.onError) {
console.error(error);
routerOptions.onError(new Error("Error rendering route", { cause: "render-route" }));
return;
}
throw error;
}
});
}
export function getTarget(route) {
return __awaiter(this, void 0, void 0, function* () {
if (route.parentLayoutId) {
const parentLayout = document.querySelector(`[data-layout-id="${route.parentLayoutId}"]`);
if (parentLayout) {
const outlet = parentLayout.querySelector('[data-router="outlet"]');
if (outlet) {
return outlet;
}
}
if (!parentLayout) {
const parentLayoutRoute = resolvedRoutes.get(route.parentLayoutId);
if (parentLayoutRoute) {
const parentLayoutRouteRendered = yield renderRoute(parentLayoutRoute);
if (parentLayoutRouteRendered) {
const outlet = parentLayoutRouteRendered.querySelector('[data-router="outlet"]');
if (outlet) {
return outlet;
}
}
}
}
}
return route.target;
});
}
//# sourceMappingURL=render-route.js.map