@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.
112 lines • 4.13 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());
});
};
/**
* Checks if content contains any Promises
*/
function hasPromise(content) {
if (content instanceof Promise)
return true;
if (Array.isArray(content)) {
return content.some((item) => item instanceof Promise);
}
return false;
}
/**
* Resolves all Promises in content
*/
function resolveContent(content) {
return __awaiter(this, void 0, void 0, function* () {
if (content instanceof Promise) {
return yield content;
}
if (Array.isArray(content)) {
return yield Promise.all(content.map((item) => (item instanceof Promise ? item : item)));
}
return content;
});
}
/**
* Renders content into a target element in the DOM
* @param target - Element or selector to render content into
* @param content - Content to render (can be Node, string, HTMLElement, Promise<HTMLElement>, or array)
* @param options - Optional rendering configuration
*
* @example
* ```ts
* render('#app', 'Hello'); // Replaces content
* render(element, 'World', { insert: 'append' }); // Appends content
* render('#app', [el1, el2], { insert: 'prepend' }); // Prepends multiple elements
* render('#app', [el1, null, undefined, el2]); // Handles null/undefined values in arrays
* render('#old-element', newElement, { replace: true }); // Replaces the target element itself
* await render('#app', asyncElement); // Handles Promise<HTMLElement>
* ```
*/
export function render(target, content, options = {}) {
if (hasPromise(content)) {
return renderAsync(target, content, options);
}
return renderSync(target, content, options);
}
/**
* Async version of render for Promise content
*/
function renderAsync(target_1, content_1) {
return __awaiter(this, arguments, void 0, function* (target, content, options = {}) {
if (!target || content === null || content === undefined)
return;
const element = typeof target === "string" ? document.querySelector(target) : target;
if (!element)
return;
const resolvedContent = yield resolveContent(content);
renderSync(target, resolvedContent, options);
});
}
/**
* Sync version of render for non-Promise content
*/
function renderSync(target, content, options = {}) {
if (!target || content === null || content === undefined)
return;
const element = typeof target === "string" ? document.querySelector(target) : target;
if (!element)
return;
if (options.replace) {
if (Array.isArray(content)) {
const validContent = content.filter((item) => item !== null && item !== undefined);
const fragment = document.createDocumentFragment();
fragment.append(...validContent);
element.replaceWith(fragment);
}
else {
element.replaceWith(content);
}
return;
}
if (!options.insert) {
element.innerHTML = "";
}
if (Array.isArray(content)) {
const validContent = content.filter((item) => item !== null && item !== undefined);
if (options.insert === "prepend") {
element.prepend(...validContent);
}
else {
element.append(...validContent);
}
return;
}
if (options.insert === "prepend") {
element.prepend(content);
}
else {
element.append(content);
}
}
//# sourceMappingURL=render.js.map