lazy-js-utils/dist/createElement-D3MQi5A0.js

A collection of lazy-loaded JavaScript utilities for efficient development

import { isArray$1 as isArray, isBool$1 as isBool, isNull$1 as isNull, isStr$1 as isStr } from "./isBool-Bi9uSocl.js";

//#region src/event/findElement.ts
function findElement(selector, all = false, currentNode = document) {
	if (isNull(all)) return;
	if (!isBool(all)) {
		currentNode = all;
		all = false;
	}
	if (isArray(selector)) return selector.reduce((result, c) => {
		const item = all ? currentNode.querySelectorAll(c) : currentNode.querySelector(c);
		if (!item) return result;
		return result = all ? [...result, ...item] : [...result, item];
	}, []);
	return all ? currentNode.querySelectorAll(selector) : currentNode.querySelector(selector);
}

//#endregion
//#region src/utils/mount.ts
function mount(...args) {
	const len = args.length;
	const params = [...args];
	const elements = params.slice(0, len - 1);
	const callback = params.slice(-1)[0];
	let isMounted = false;
	let hasMounted = false;
	update();
	document.addEventListener("DOMContentLoaded", update);
	setTimeout(() => document.removeEventListener("DOMContentLoaded", update));
	function update() {
		if (hasMounted) return;
		elements.forEach((element, index) => isStr(element) && (elements[index] = findElement(element) || element));
		if (!isMounted && elements.some(isStr)) return isMounted = true;
		if (elements.some(isStr)) throw new Error(`${elements.filter(isStr).join(", ")} is not a HTMLElement`);
		callback === null || callback === void 0 || callback(...elements);
		hasMounted = true;
	}
}

//#endregion
//#region src/utils/unmount.ts
/**
* 浏览器卸载时
* @description 浏览器卸载时
* @param { (ev: Event) => void } callback 回调
* @returns { (ev: Event) => void }
*/
function unmount(callback) {
	const fn = window.onunload || function() {};
	window.onunload = function(ev) {
		callback === null || callback === void 0 || callback(ev);
		fn.call(this, ev);
	};
	return callback;
}

//#endregion
//#region src/event/useMutationObserver.ts
/**
* 检测元素变化
* @param { Element | string | ParentNode | null } element 元素
* @param { MutationCallback } callback 默认 { childList: true }
* @param { boolean } [callback.childList] 是否监听孩子元素
* @param { boolean } [callback.attributes] 是否监听属性
* @param { boolean } [callback.characterData] 是否监听内容
* @param { boolean } [callback.subtree] 是否监听树节点
* @param { boolean } [callback.attributeOldValue] 是否监听旧属性
* @param { string[] } [callback.attributeFilter] 属性过滤
* @param options
* @returns
*/
function useMutationObserver(element, callback, options = { childList: true }) {
	if (!element) return;
	let stopped = false;
	let stop;
	mount(element, (element$1) => {
		const mutationObserver = new MutationObserver(callback);
		mutationObserver.observe(element$1, options);
		stop = () => mutationObserver.disconnect();
		if (stopped) stop();
	});
	unmount(() => stop === null || stop === void 0 ? void 0 : stop());
	return () => {
		if (!stop) return stopped = true;
		stop === null || stop === void 0 || stop();
	};
}

//#endregion
//#region src/event/createElement.ts
/**
* 创建dom元素
* @param { string } tag 创建的标签元素
* @param { Record<string, string> } [attributes] 属性 {}
* @param { string } [innerHTML] 插入的内容innerHTML
* @param { ElementCreationOptions } [options] 通过 customElements.define() 定义的自定义元素的标签名称
* @returns
*/
function createElement(tag, attributes, innerHTML, options) {
	const el = document.createElement(tag, options);
	if (!attributes) return el;
	for (const key in attributes) el.setAttribute(key, attributes[key]);
	if (innerHTML) el.innerHTML = innerHTML;
	return el;
}

//#endregion
export { createElement as createElement$1, findElement as findElement$1, mount as mount$1, unmount as unmount$1, useMutationObserver as useMutationObserver$1 };