deleight/dist/cjs/dom/element/element.d.ts

A library with 9 modules for writing more expressive web applications with traditional HTML, CSS and JavaScript.

/**
 *
 * Functions for creating views (elements) with javascript objects (instead of text).
 * Can be used on the server or client. Straightforward object
 * structure and interpretation, almost like using templates.
 *
 * Benefits:
 * 1. easily reuse `templates` (simple functions that return appropriate objects).
 * 2. more natural within js code.
 * 3. IElement objects can be created more dynamically.
 */
import { IComponent } from "../dom";
export interface IAttrs {
    [key: string]: string;
}
export type IElementContent = {
    0?: IAttrs;
    1?: IElement | IElement[];
    2?: IComponent | object | (IComponent | object)[];
};
export type IElement = {
    [key in keyof HTMLElementTagNameMap]?: IElementContent | IElement[] | string | number;
} | string | number;
/**
 * Render the IElement to text. Use on the server.
 *
 * @example
 * import { render } from 'deleight/dom'
 * // create a template 1:
 * const items = it => it.map(num => ({ li: num }));
 *
 * // create a template 2:
 * const footer = year => `<footer>&copy; ${year}</footer>`;
 *
 * // use templates:
 * const ul = render({
 *     main: [
 *         // object form:
 *         { ul: { 0: { class: 'list1' }, 1: items([1,2,3,4,5,6,7,8,9]) } },
 *
 *         // text form:
 *         footer(1991)
 *     ]
 *
 * });
 *
 * // reuse a template:
 * const ol = render({
 *     ol: { 0: { class: 'list2' }, 1: items([1,2,3,4,5,6,7,8,9,10]) }
 * });
 *
 * @param iElement
 * @returns
 */
export declare function render(iElement: IElement): string;
/**
 * Build an element from the IElement. Use in the browser.
 *
 * @example
 * import { build } from 'deleight/dom'
 * // create a template 1:
 * const items = it => it.map(num => ({li: num}));   // you can abbreviate simple elements
 *
 * // create a template 2:
 * const footer = year => `<footer>&copy; ${year}</footer>`;
 *
 * // use templates:
 * const ul = build({
 *     main: [
 *         // object form:
 *         { ul: { 0: { class: 'list1' }, 1: items([1,2,3,4,5,6,7,8,9]) } },
 *
 *         // text form:
 *         footer(1991)
 *     ]
 *
 * });
 *
 * // reuse a template:
 * const ol = build({
 *     ol: {
 *         0: { class: 'list2' },                              // attributes
 *         1: items([1,2,3,4,5,6,7,8,9,10]),                   // children
 *         2: [ol => ol.onclick = console.log.bind(console)]   // components
 *     }
 * });
 *
 *
 * @param iElement
 * @returns
 */
export declare function build(iElement: IElement): HTMLElement;