declarative-element/index.d.ts

Lightweight, simple and reliable boilerplate wrapper for DOM-elements creation

type WithAttributesTrait<T = unknown> = T & {
	attributes: Record<string, string>;
};
type WithChildrenTrait<T = unknown> = T & {
	children: Node.Any[];
};
type WithInnerTextTrait<T = unknown> = T & {
	innerText: string;
};
type WithTagNameTrait<T = unknown> = T & {
	tagName: string;
};
export declare namespace Node {
	/**
	 * @example
	 * ### Usage:
	 * ```javascript
	 * {
	 *   tagName: 'div',
	 *   attributes: {
	 *     class: 'container'
	 *   }
	 * }
	 * ```
	 *
	 * ### Result HTML:
	 * ```html
	 * <div class="container"></div>
	 * ```
	 */
	interface WithTag extends WithTagNameTrait, Partial<WithAttributesTrait> {
	}
	/**
	 * @example
	 * ### Usage:
	 * ```javascript
	 * {
	 *   tagName: 'section',
	 *   children: [
	 *     { tagName: 'div' },
	 *     { tagName: 'div' },
	 *     { tagName: 'div' }
	 *   ]
	 * }
	 * ```
	 *
	 * ### Result HTML:
	 * ```html
	 * <section>
	 *   <div></div>
	 *   <div></div>
	 *   <div></div>
	 * </section>
	 * ```
	 */
	interface WithChildren extends WithTag, WithChildrenTrait {
	}
	/**
	 * @example
	 * ### Usage:
	 * ```javascript
	 * {
	 *   innerText: 'Who is John Galt?'
	 * }
	 * ```
	 *
	 * ### Result HTML:
	 * ```html
	 * Who is John Galt?
	 * ```
	 */
	type Text = WithInnerTextTrait;
	/**
	 * @example
	 * ### Usage:
	 * ```javascript
	 * {
	 *   tagName: 'a',
	 *   attributes: {
	 *     href: 'https://en.wikipedia.org/wiki/John_Galt'
	 *   },
	 *   innerText: 'Who is John Galt?'
	 * }
	 * ```
	 *
	 * ### Result HTML:
	 * ```html
	 * <a href="https://en.wikipedia.org/wiki/John_Galt">Who is John Galt?</a>
	 * ```
	 */
	interface TextWithTag extends WithTag, Text {
	}
	/**
	 * @description
	 * Describes Node with unknown internal structure
	 *
	 * **Better use:**
	 * - Node.WithTag
	 * - Node.WithChildren
	 * - Node.Text
	 * - Node.TextWithTag
	 */
	type Any = WithTag | WithChildren | Text | TextWithTag;
}
/**
 * @param node - Node.TextWithTag
 *
 * ---
 * @access public
 *
 * ---
 * @example
 * ### Usage:
 * ```javascript
 * const textNodeWithTag = getElement({
 *   innerText: 'Lorem ipsum dolor sit amet',
 *   tagName: 'p'
 * });
 *
 * div.appendChild(textNodeWithTag);
 * ```
 *
 * ### Result HTML:
 * ```html
 * <div>
 *   <p>Lorem ipsum dolor sit amet</p>
 * </div>
 * ```
 *
 * ---
 * @returns Returns HTMLElement
 */
export declare function getElement(node: Node.TextWithTag): HTMLElement;
/**
 * @param node - Node.Text
 *
 * ---
 * @access public
 *
 * ---
 * @example
 * ### Usage:
 * ```javascript
 * const textNode = getElement({
 *   innerText: 'Lorem ipsum dolor sit amet'
 * });
 *
 * div.appendChild(textNode);
 * ```
 *
 * ### Result HTML:
 * ```html
 * <div>Lorem ipsum dolor sit amet</div>
 * ```
 *
 * ---
 * @returns Returns Text
 */
export declare function getElement(node: Node.Text): Text;
/**
 * @param node - Node.WithChildren
 *
 * ---
 * @access public
 *
 * ---
 * @example
 * ### Usage:
 * ```javascript
 * const nodeWithChildren = getElement({
 *   tagName: 'p',
 *   children: [
 *     { tagName: 'span', innerText: 'Lorem ipsum ' },
 *     {
 *       tagName: 'strong',
 *       children: [
 *         { innerText: 'dolor ' },
 *         { innerText: 'sit ' },
 *         { innerText: 'amet' },
 *       ]
 *     }
 *   ]
 * });
 *
 * div.appendChild(nodeWithChildren);
 * ```
 *
 * ### Result HTML:
 * ```html
 * <div>
 *   <span>
 *     Lorem ipsum
 *     <strong>dolor sit amet</strong>
 *   </span>
 * </div>
 * ```
 *
 * ---
 * @returns Returns HTMLElement
 */
export declare function getElement(node: Node.WithChildren): HTMLElement;
/**
 * @param node - Node.WithTag
 *
 * ---
 * @access public
 *
 * ---
 * @example
 * ### Usage:
 * ```javascript
 * const nodeWithTag = getElement({
 *   tagName: 'img'
 * });
 *
 * div.appendChild(nodeWithTag);
 * ```
 *
 * ### Result HTML:
 * ```html
 * <div>
 *   <img>
 * </div>
 * ```
 *
 * ---
 * @returns Returns HTMLElement
 */
export declare function getElement(node: Node.WithTag): HTMLElement;
/**
 * @param node - Node.Any
 *
 * ---
 * @access public
 *
 * ---
 * @returns Returns HTMLElement or Text
 */
export declare function getElement(node: Node.Any): HTMLElement | Text;

export {};