deka-dom-el/index.js

[ HTMLElement, DocumentFragment ].forEach(c=> {
	const { append }= c.prototype;
	c.prototype.append= function(...els){ append.apply(this, els); return this; };
});

export function createElement(tag, attributes){
	if(tag==="<>") return document.createDocumentFragment();
	if(tag==="") return document.createTextNode(attributes.textContent ?? attributes.innerText ?? attributes.innerHTML);
	return assign(document.createElement(tag), attributes);
}
export { createElement as el };
export function createElementNS(tag, attributes, attributes_todo){
	let namespace= "svg";
	if(typeof attributes_todo !== "undefined"){
		namespace= tag; tag= attributes; attributes= attributes_todo; }
	if(tag==="<>") return document.createDocumentFragment();
	if(tag==="") return document.createTextNode(attributes.textContent ?? attributes.innerText ?? attributes.innerHTML);
	return assign(document.createElementNS(namespace==="svg" ? "http://www.w3.org/2000/svg" : namespace, tag), attributes);
}
export { createElementNS as elNS };

export function assign(element, ...attributes){
	// prefers https://developer.mozilla.org/en-US/docs/Glossary/IDL
	if(!attributes.length) return element;
	const is_svg= element instanceof SVGElement;
	const setRemoveAttr= (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute");
	
	Object.entries(Object.assign({}, ...attributes)).forEach(function([ key, attr ]){
		if(key[0]==="=") return setRemoveAttr(key.slice(1), attr);
		if(key[0]===".") return setDelete(element, key.slice(1), attr);
		if(typeof attr === "object"){
			switch(key){
				case "style":		return forEachEntries(attr, setRemove.bind(null, element.style, "Property"))
				case "dataset":		return forEachEntries(attr, setDelete.bind(null, element.dataset));
				case "ariaset":		return forEachEntries(attr, (key, val)=> setRemoveAttr("aria-"+key, val));
				case "classList":	return classListDeclartive(element, attr);
				default:			return Reflect.set(element, key, attr);
			}
		}
		if(/(aria|data)([A-Z])/.test(key)){
			key= key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
			return setRemoveAttr(key, attr);
		}
		switch(key){
			case "href" || "src" || "style":
				return setRemoveAttr(key, attr);
			case "xlink:href":
				return setRemoveAttr(key, attr, "http://www.w3.org/1999/xlink");
			case "textContent" || "innerText":
				if(!is_svg) break;
				return element.appendChild(document.createTextNode(attr));
		}
		if(key in element && !is_svg)
			return setDelete(element, key, attr);
		return setRemoveAttr(key, attr);
	});
	return element;
}
export function classListDeclartive(element, toggle){
	if(typeof toggle !== "object") return element;
	
	forEachEntries(toggle,
		(class_name, val)=>
			element.classList.toggle(class_name, val===-1 ? undefined : Boolean(val)))
	return element;
}

export function empty(el){ Array.from(el.children).forEach(el=> el.remove()); return el; }

function forEachEntries(obj, cb){ return Object.entries(obj).forEach(([ key, val ])=> cb(key, val)); }
function isUndef(value){ return typeof value==="undefined"; }

function setRemove(obj, prop, key, val){ return obj[ (isUndef(val) ? "remove" : "set") + prop ](key, val); }
function setRemoveNS(obj, prop, key, val, ns= null){ return obj[ (isUndef(val) ? "remove" : "set") + prop + "NS" ](ns, key, val); }
function setDelete(obj, prop, val){ return Reflect[ isUndef(val) ? "deleteProperty" : "set" ](obj, prop, val); }