domelemjs 1.2.3 → 2.0.1

package/dist/index.d.cts

@@ -0,0 +1,168 @@
+/**
+ * List of standard HTML tag names.
+ *
+ * Provided as a `const` tuple so TypeScript can infer literal types
+ * (e.g. `"div"` instead of `string`).
+ *
+ * @example
+ * import { HTML_TAGS } from "domelemjs";
+ * if (HTML_TAGS.includes(tag as HtmlTagConst)) { ... }
+ */
+declare const HTML_TAGS: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "svg", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "video", "wbr"];
+/** Union type of all valid HTML tag name literals. */
+type HtmlTagConst = (typeof HTML_TAGS)[number];
+
+/** HTML tag name — a string union of valid tags, or any string for flexibility. */
+type HtmlTag = HtmlTagConst | string;
+/** A single CSS style value — either a string or a numeric pixel value. */
+type StyleValue = string | number;
+/**
+ * Style input accepted by `createDOMElem`.
+ *
+ * Can be:
+ * - a CSS string (`"color: red; background: blue"`)
+ * - an object (`{ color: "red", background: "blue" }`)
+ * - an array mixing both formats
+ */
+type StyleInput = string | Record<string, StyleValue> | Array<string | Record<string, StyleValue>>;
+/** Dataset (`data-*`) input — a single object or an array of objects. */
+type DatasetInput = Record<string, string> | Array<Record<string, string>>;
+/**
+ * Attributes input accepted by `createDOMElem`.
+ *
+ * Can be a single object or an array of objects.
+ * Special keys:
+ * - `"checked"` — sets the checked property on inputs
+ * - `"dataset"` — merges data-* attributes via `elem.dataset`
+ */
+type AttrsInput = Record<string, string | number | boolean | DatasetInput> | Array<Record<string, string | number | boolean | DatasetInput>>;
+/**
+ * Event handler descriptor.
+ *
+ * @property event - The DOM event name (e.g. `"click"`, `"change"`).
+ * @property cb - The callback function invoked when the event fires.
+ */
+type EventHandler = {
+    event: string;
+    cb: (e: Event) => void;
+};
+/**
+ * Parent element input.
+ *
+ * Can be an `HTMLElement` reference or a CSS selector string
+ * (e.g. `"#app"`, `".container"`, `"app"`).
+ */
+type ParentInput = HTMLElement | string;
+/**
+ * Options for creating a DOM element.
+ *
+ * @property tag - The HTML tag name to create.
+ * @property content - Raw HTML string to set as innerHTML.
+ * @property text - Plain text to set as textContent.
+ * @property attrs - HTML attributes to set on the element.
+ * @property style - CSS styles to apply (string, object, or array).
+ * @property children - Child elements (options objects or HTMLElements).
+ * @property parent - Parent element to append to (default: `document.body`).
+ * @property handleEvent - Event listener(s) to attach.
+ * @property append - Whether to append the element to its parent (default: `true`).
+ */
+interface CreateDOMElemOptions {
+    tag: HtmlTag;
+    content?: string;
+    text?: string;
+    attrs?: AttrsInput;
+    style?: StyleInput;
+    children?: Array<CreateDOMElemOptions | HTMLElement>;
+    parent?: ParentInput;
+    handleEvent?: EventHandler | EventHandler[];
+    append?: boolean;
+    /** Whether to strip diacritics from `class` and `id` attributes. Defaults to `true`. */
+    stripDiacritics?: boolean;
+}
+/** Options type for the `DOMElem` class — identical to `CreateDOMElemOptions`. */
+type DOMElemOptions = CreateDOMElemOptions;
+
+/**
+ * Wrapper class around {@link createDOMElem}.
+ *
+ * Provides an object-oriented API for creating DOM elements.
+ * The created element is available via the `.elem` property.
+ * Event listeners can be added and removed via `addEventListener` /
+ * `removeEventListener`.
+ *
+ * @example
+ * ```ts
+ * const div = new DOMElem({
+ *   tag: "div",
+ *   attrs: { class: "container" },
+ *   text: "Hello World",
+ * });
+ *
+ * div.addEventListener("click", () => console.log("clicked"));
+ * div.removeEventListener("click", handler);
+ * ```
+ */
+declare class DOMElem {
+    /** The created HTMLElement. */
+    readonly elem: HTMLElement;
+    /** The options used to create the element. */
+    readonly options: DOMElemOptions;
+    private _listeners;
+    /**
+     * Creates a new DOMElem instance.
+     *
+     * @param options - Element creation options.
+     */
+    constructor(options: DOMElemOptions);
+    /**
+     * Adds an event listener to the element and tracks it for later removal.
+     *
+     * @param event - The DOM event name.
+     * @param cb - The callback function.
+     * @returns This instance for chaining.
+     */
+    addEventListener(event: string, cb: (e: Event) => void): this;
+    /**
+     * Removes a previously added event listener.
+     *
+     * @param event - The DOM event name.
+     * @param cb - The callback function to remove.
+     * @returns This instance for chaining.
+     */
+    removeEventListener(event: string, cb: (e: Event) => void): this;
+    /**
+     * Removes all tracked event listeners from the element.
+     */
+    removeAllListeners(): void;
+    private _trackListener;
+    private _untrackListener;
+}
+
+/**
+ * Creates a DOM element with the given configuration.
+ *
+ * This is the core function of DOMelemJS. It creates an HTML element,
+ * applies attributes, styles, children, and event listeners, then
+ * appends it to a parent element.
+ *
+ * @example
+ * ```ts
+ * const el = createDOMElem({
+ *   tag: "div",
+ *   text: "Hello",
+ *   attrs: { class: "greeting" },
+ *   style: { color: "blue" },
+ *   parent: "#app",
+ *   handleEvent: {
+ *     event: "click",
+ *     cb: () => console.log("clicked"),
+ *   },
+ * });
+ * ```
+ *
+ * @param options - Element creation options.
+ * @returns The created HTMLElement.
+ */
+declare function createDOMElem(options: CreateDOMElemOptions): HTMLElement;
+
+export { type AttrsInput, type CreateDOMElemOptions, DOMElem, type DOMElemOptions, type EventHandler, HTML_TAGS, type HtmlTag, type HtmlTagConst, type ParentInput, type StyleInput, createDOMElem };

package/dist/index.d.ts

@@ -0,0 +1,168 @@
+/**
+ * List of standard HTML tag names.
+ *
+ * Provided as a `const` tuple so TypeScript can infer literal types
+ * (e.g. `"div"` instead of `string`).
+ *
+ * @example
+ * import { HTML_TAGS } from "domelemjs";
+ * if (HTML_TAGS.includes(tag as HtmlTagConst)) { ... }
+ */
+declare const HTML_TAGS: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "svg", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "video", "wbr"];
+/** Union type of all valid HTML tag name literals. */
+type HtmlTagConst = (typeof HTML_TAGS)[number];
+
+/** HTML tag name — a string union of valid tags, or any string for flexibility. */
+type HtmlTag = HtmlTagConst | string;
+/** A single CSS style value — either a string or a numeric pixel value. */
+type StyleValue = string | number;
+/**
+ * Style input accepted by `createDOMElem`.
+ *
+ * Can be:
+ * - a CSS string (`"color: red; background: blue"`)
+ * - an object (`{ color: "red", background: "blue" }`)
+ * - an array mixing both formats
+ */
+type StyleInput = string | Record<string, StyleValue> | Array<string | Record<string, StyleValue>>;
+/** Dataset (`data-*`) input — a single object or an array of objects. */
+type DatasetInput = Record<string, string> | Array<Record<string, string>>;
+/**
+ * Attributes input accepted by `createDOMElem`.
+ *
+ * Can be a single object or an array of objects.
+ * Special keys:
+ * - `"checked"` — sets the checked property on inputs
+ * - `"dataset"` — merges data-* attributes via `elem.dataset`
+ */
+type AttrsInput = Record<string, string | number | boolean | DatasetInput> | Array<Record<string, string | number | boolean | DatasetInput>>;
+/**
+ * Event handler descriptor.
+ *
+ * @property event - The DOM event name (e.g. `"click"`, `"change"`).
+ * @property cb - The callback function invoked when the event fires.
+ */
+type EventHandler = {
+    event: string;
+    cb: (e: Event) => void;
+};
+/**
+ * Parent element input.
+ *
+ * Can be an `HTMLElement` reference or a CSS selector string
+ * (e.g. `"#app"`, `".container"`, `"app"`).
+ */
+type ParentInput = HTMLElement | string;
+/**
+ * Options for creating a DOM element.
+ *
+ * @property tag - The HTML tag name to create.
+ * @property content - Raw HTML string to set as innerHTML.
+ * @property text - Plain text to set as textContent.
+ * @property attrs - HTML attributes to set on the element.
+ * @property style - CSS styles to apply (string, object, or array).
+ * @property children - Child elements (options objects or HTMLElements).
+ * @property parent - Parent element to append to (default: `document.body`).
+ * @property handleEvent - Event listener(s) to attach.
+ * @property append - Whether to append the element to its parent (default: `true`).
+ */
+interface CreateDOMElemOptions {
+    tag: HtmlTag;
+    content?: string;
+    text?: string;
+    attrs?: AttrsInput;
+    style?: StyleInput;
+    children?: Array<CreateDOMElemOptions | HTMLElement>;
+    parent?: ParentInput;
+    handleEvent?: EventHandler | EventHandler[];
+    append?: boolean;
+    /** Whether to strip diacritics from `class` and `id` attributes. Defaults to `true`. */
+    stripDiacritics?: boolean;
+}
+/** Options type for the `DOMElem` class — identical to `CreateDOMElemOptions`. */
+type DOMElemOptions = CreateDOMElemOptions;
+
+/**
+ * Wrapper class around {@link createDOMElem}.
+ *
+ * Provides an object-oriented API for creating DOM elements.
+ * The created element is available via the `.elem` property.
+ * Event listeners can be added and removed via `addEventListener` /
+ * `removeEventListener`.
+ *
+ * @example
+ * ```ts
+ * const div = new DOMElem({
+ *   tag: "div",
+ *   attrs: { class: "container" },
+ *   text: "Hello World",
+ * });
+ *
+ * div.addEventListener("click", () => console.log("clicked"));
+ * div.removeEventListener("click", handler);
+ * ```
+ */
+declare class DOMElem {
+    /** The created HTMLElement. */
+    readonly elem: HTMLElement;
+    /** The options used to create the element. */
+    readonly options: DOMElemOptions;
+    private _listeners;
+    /**
+     * Creates a new DOMElem instance.
+     *
+     * @param options - Element creation options.
+     */
+    constructor(options: DOMElemOptions);
+    /**
+     * Adds an event listener to the element and tracks it for later removal.
+     *
+     * @param event - The DOM event name.
+     * @param cb - The callback function.
+     * @returns This instance for chaining.
+     */
+    addEventListener(event: string, cb: (e: Event) => void): this;
+    /**
+     * Removes a previously added event listener.
+     *
+     * @param event - The DOM event name.
+     * @param cb - The callback function to remove.
+     * @returns This instance for chaining.
+     */
+    removeEventListener(event: string, cb: (e: Event) => void): this;
+    /**
+     * Removes all tracked event listeners from the element.
+     */
+    removeAllListeners(): void;
+    private _trackListener;
+    private _untrackListener;
+}
+
+/**
+ * Creates a DOM element with the given configuration.
+ *
+ * This is the core function of DOMelemJS. It creates an HTML element,
+ * applies attributes, styles, children, and event listeners, then
+ * appends it to a parent element.
+ *
+ * @example
+ * ```ts
+ * const el = createDOMElem({
+ *   tag: "div",
+ *   text: "Hello",
+ *   attrs: { class: "greeting" },
+ *   style: { color: "blue" },
+ *   parent: "#app",
+ *   handleEvent: {
+ *     event: "click",
+ *     cb: () => console.log("clicked"),
+ *   },
+ * });
+ * ```
+ *
+ * @param options - Element creation options.
+ * @returns The created HTMLElement.
+ */
+declare function createDOMElem(options: CreateDOMElemOptions): HTMLElement;
+
+export { type AttrsInput, type CreateDOMElemOptions, DOMElem, type DOMElemOptions, type EventHandler, HTML_TAGS, type HtmlTag, type HtmlTagConst, type ParentInput, type StyleInput, createDOMElem };

package/dist/index.js

@@ -1 +1,2 @@
-!function webpackUniversalModuleDefinition(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("domElemJS",[],t):"object"==typeof exports?exports.domElemJS=t():e.domElemJS=t()}(this,(()=>(()=>{"use strict";var e={d:(t,a)=>{for(var o in a)e.o(a,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:a[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function makeThatArray(e){return e?Array.isArray(e)?e:[e]:[]}e.r(t),e.d(t,{a:()=>a,abbr:()=>o,acronym:()=>r,address:()=>i,applet:()=>n,area:()=>l,article:()=>s,aside:()=>d,audio:()=>c,b:()=>u,base:()=>p,basefont:()=>m,bdi:()=>f,bdo:()=>b,big:()=>h,blockquote:()=>y,body:()=>O,br:()=>A,button:()=>E,canvas:()=>g,caption:()=>k,center:()=>U,cite:()=>v,code:()=>j,col:()=>T,colgroup:()=>S,data:()=>L,datalist:()=>I,dd:()=>D,default:()=>createDOMElem,del:()=>C,details:()=>z,dfn:()=>R,dialog:()=>N,dir:()=>Y,div:()=>w,dl:()=>M,dt:()=>Z,em:()=>x,embed:()=>G,fieldset:()=>H,figcaption:()=>P,figure:()=>q,font:()=>K,footer:()=>J,form:()=>V,frame:()=>B,frameset:()=>W,h1:()=>F,h2:()=>Q,h3:()=>X,h4:()=>$,h5:()=>_,h6:()=>ee,head:()=>te,header:()=>ae,hr:()=>oe,html:()=>re,i:()=>ie,iframe:()=>ne,img:()=>le,input:()=>se,ins:()=>de,kbd:()=>ce,label:()=>ue,legend:()=>pe,li:()=>me,link:()=>fe,main:()=>be,map:()=>he,mark:()=>ye,meta:()=>Oe,meter:()=>Ae,nav:()=>Ee,noframes:()=>ge,noscript:()=>ke,object:()=>Ue,ol:()=>ve,optgroup:()=>je,option:()=>Te,output:()=>Se,p:()=>Le,param:()=>Ie,picture:()=>De,pre:()=>Ce,progress:()=>ze,q:()=>Re,rp:()=>Ne,rt:()=>Ye,ruby:()=>we,s:()=>Me,samp:()=>Ze,script:()=>xe,section:()=>Ge,select:()=>He,small:()=>Pe,source:()=>qe,span:()=>Ke,strike:()=>Je,strong:()=>Ve,style:()=>Be,sub:()=>We,summary:()=>Fe,sup:()=>Qe,svg:()=>Xe,table:()=>$e,tbody:()=>_e,td:()=>et,template:()=>tt,textarea:()=>at,tfoot:()=>ot,th:()=>rt,thead:()=>it,time:()=>nt,title:()=>lt,tr:()=>st,track:()=>dt,tt:()=>ct,u:()=>ut,ul:()=>pt,video:()=>mt,wbr:()=>ft});const[a,o,r,i,n,l,s,d,c,u,p,m,f,b,h,y,O,A,E,g,k,U,v,j,T,S,L,I,D,C,z,R,N,Y,w,M,Z,x,G,H,P,q,K,J,V,B,W,F,Q,X,$,_,ee,te,ae,oe,re,ie,ne,le,se,de,ce,ue,pe,me,fe,be,he,ye,Oe,Ae,Ee,ge,ke,Ue,ve,je,Te,Se,Le,Ie,De,Ce,ze,Re,Ne,Ye,we,Me,Ze,xe,Ge,He,Pe,qe,Ke,Je,Ve,Be,We,Fe,Qe,Xe,$e,_e,et,tt,at,ot,rt,it,nt,lt,st,dt,ct,ut,pt,mt,ft]=["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bdi","bdo","big","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","dir","div","dl","dt","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hr","html","i","iframe","img","input","ins","kbd","label","legend","li","link","main","map","mark","meta","meter","nav","noframes","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strike","strong","style","sub","summary","sup","svg","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","tt","u","ul","video","wbr"];function createDOMElem({tag:e,content:t,text:a,attrs:o,style:r,children:i,parent:n,handleEvent:l,append:s=!0}){let d=document.createElement(e);t&&(d.innerHTML=t),a&&(d.textContent=a);const c=["class","id"];if(o&&makeThatArray(o).forEach((e=>Object.keys(e).forEach((t=>{e[t]&&("checked"===t?d.checked=e[t]:"dataset"===t?makeThatArray(e[t]).map((e=>Object.keys(e).forEach((t=>d.dataset[t]=e[t])))):d.setAttribute(t,makeThatArray(e[t]).map((e=>c.includes(t)?function noSpecChars(e,t=!1){let a={Ă:"A",Ắ:"A",Ặ:"A",Ằ:"A",Ẳ:"A",Ẵ:"A",Ǎ:"A",Â:"A",Ấ:"A",Ậ:"A",Ầ:"A",Ẩ:"A",Ẫ:"A",Ä:"A",Ǟ:"A",Ȧ:"A",Ǡ:"A",Ạ:"A",Ȁ:"A",À:"A",Ả:"A",Ȃ:"A",Ā:"A",Ą:"A",Å:"A",Ǻ:"A",Ḁ:"A",Ⱥ:"A",Ã:"A",Ꜳ:"AA",Æ:"AE",Ǽ:"AE",Ǣ:"AE",Ꜵ:"AO",Ꜷ:"AU",Ꜹ:"AV",Ꜻ:"AV",Ꜽ:"AY",Ḃ:"B",Ḅ:"B",Ɓ:"B",Ḇ:"B",Ƀ:"B",Ƃ:"B",Ć:"C",Č:"C",Ç:"C",Ḉ:"C",Ĉ:"C",Ċ:"C",Ƈ:"C",Ȼ:"C",Ď:"D",Ḑ:"D",Ḓ:"D",Ḋ:"D",Ḍ:"D",Ɗ:"D",Ḏ:"D",Dz:"D",Dž:"D",Đ:"D",Ƌ:"D",DZ:"DZ",DŽ:"DZ",É:"E",Ĕ:"E",Ě:"E",Ȩ:"E",Ḝ:"E",Ê:"E",Ế:"E",Ệ:"E",Ề:"E",Ể:"E",Ễ:"E",Ḙ:"E",Ë:"E",Ė:"E",Ẹ:"E",Ȅ:"E",È:"E",Ẻ:"E",Ȇ:"E",Ē:"E",Ḗ:"E",Ḕ:"E",Ę:"E",Ɇ:"E",Ẽ:"E",Ḛ:"E",Ꝫ:"ET",Ḟ:"F",Ƒ:"F",Ǵ:"G",Ğ:"G",Ǧ:"G",Ģ:"G",Ĝ:"G",Ġ:"G",Ɠ:"G",Ḡ:"G",Ǥ:"G",Ḫ:"H",Ȟ:"H",Ḩ:"H",Ĥ:"H",Ⱨ:"H",Ḧ:"H",Ḣ:"H",Ḥ:"H",Ħ:"H",Í:"I",Ĭ:"I",Ǐ:"I",Î:"I",Ï:"I",Ḯ:"I",İ:"I",Ị:"I",Ȉ:"I",Ì:"I",Ỉ:"I",Ȋ:"I",Ī:"I",Į:"I",Ɨ:"I",Ĩ:"I",Ḭ:"I",Ꝺ:"D",Ꝼ:"F",Ᵹ:"G",Ꞃ:"R",Ꞅ:"S",Ꞇ:"T",Ꝭ:"IS",Ĵ:"J",Ɉ:"J",Ḱ:"K",Ǩ:"K",Ķ:"K",Ⱪ:"K",Ꝃ:"K",Ḳ:"K",Ƙ:"K",Ḵ:"K",Ꝁ:"K",Ꝅ:"K",Ĺ:"L",Ƚ:"L",Ľ:"L",Ļ:"L",Ḽ:"L",Ḷ:"L",Ḹ:"L",Ⱡ:"L",Ꝉ:"L",Ḻ:"L",Ŀ:"L",Ɫ:"L",Lj:"L",Ł:"L",LJ:"LJ",Ḿ:"M",Ṁ:"M",Ṃ:"M",Ɱ:"M",Ń:"N",Ň:"N",Ņ:"N",Ṋ:"N",Ṅ:"N",Ṇ:"N",Ǹ:"N",Ɲ:"N",Ṉ:"N",Ƞ:"N",Nj:"N",Ñ:"N",NJ:"NJ",Ó:"O",Ŏ:"O",Ǒ:"O",Ô:"O",Ố:"O",Ộ:"O",Ồ:"O",Ổ:"O",Ỗ:"O",Ö:"O",Ȫ:"O",Ȯ:"O",Ȱ:"O",Ọ:"O",Ő:"O",Ȍ:"O",Ò:"O",Ỏ:"O",Ơ:"O",Ớ:"O",Ợ:"O",Ờ:"O",Ở:"O",Ỡ:"O",Ȏ:"O",Ꝋ:"O",Ꝍ:"O",Ō:"O",Ṓ:"O",Ṑ:"O",Ɵ:"O",Ǫ:"O",Ǭ:"O",Ø:"O",Ǿ:"O",Õ:"O",Ṍ:"O",Ṏ:"O",Ȭ:"O",Ƣ:"OI",Ꝏ:"OO",Ɛ:"E",Ɔ:"O",Ȣ:"OU",Ṕ:"P",Ṗ:"P",Ꝓ:"P",Ƥ:"P",Ꝕ:"P",Ᵽ:"P",Ꝑ:"P",Ꝙ:"Q",Ꝗ:"Q",Ŕ:"R",Ř:"R",Ŗ:"R",Ṙ:"R",Ṛ:"R",Ṝ:"R",Ȑ:"R",Ȓ:"R",Ṟ:"R",Ɍ:"R",Ɽ:"R",Ꜿ:"C",Ǝ:"E",Ś:"S",Ṥ:"S",Š:"S",Ṧ:"S",Ş:"S",Ŝ:"S",Ș:"S",Ṡ:"S",Ṣ:"S",Ṩ:"S",Ť:"T",Ţ:"T",Ṱ:"T",Ț:"T",Ⱦ:"T",Ṫ:"T",Ṭ:"T",Ƭ:"T",Ṯ:"T",Ʈ:"T",Ŧ:"T",Ɐ:"A",Ꞁ:"L",Ɯ:"M",Ʌ:"V",Ꜩ:"TZ",Ú:"U",Ŭ:"U",Ǔ:"U",Û:"U",Ṷ:"U",Ü:"U",Ǘ:"U",Ǚ:"U",Ǜ:"U",Ǖ:"U",Ṳ:"U",Ụ:"U",Ű:"U",Ȕ:"U",Ù:"U",Ủ:"U",Ư:"U",Ứ:"U",Ự:"U",Ừ:"U",Ử:"U",Ữ:"U",Ȗ:"U",Ū:"U",Ṻ:"U",Ų:"U",Ů:"U",Ũ:"U",Ṹ:"U",Ṵ:"U",Ꝟ:"V",Ṿ:"V",Ʋ:"V",Ṽ:"V",Ꝡ:"VY",Ẃ:"W",Ŵ:"W",Ẅ:"W",Ẇ:"W",Ẉ:"W",Ẁ:"W",Ⱳ:"W",Ẍ:"X",Ẋ:"X",Ý:"Y",Ŷ:"Y",Ÿ:"Y",Ẏ:"Y",Ỵ:"Y",Ỳ:"Y",Ƴ:"Y",Ỷ:"Y",Ỿ:"Y",Ȳ:"Y",Ɏ:"Y",Ỹ:"Y",Ź:"Z",Ž:"Z",Ẑ:"Z",Ⱬ:"Z",Ż:"Z",Ẓ:"Z",Ȥ:"Z",Ẕ:"Z",Ƶ:"Z",IJ:"IJ",Œ:"OE",ᴀ:"A",ᴁ:"AE",ʙ:"B",ᴃ:"B",ᴄ:"C",ᴅ:"D",ᴇ:"E",ꜰ:"F",ɢ:"G",ʛ:"G",ʜ:"H",ɪ:"I",ʁ:"R",ᴊ:"J",ᴋ:"K",ʟ:"L",ᴌ:"L",ᴍ:"M",ɴ:"N",ᴏ:"O",ɶ:"OE",ᴐ:"O",ᴕ:"OU",ᴘ:"P",ʀ:"R",ᴎ:"N",ᴙ:"R",ꜱ:"S",ᴛ:"T",ⱻ:"E",ᴚ:"R",ᴜ:"U",ᴠ:"V",ᴡ:"W",ʏ:"Y",ᴢ:"Z",á:"a",ă:"a",ắ:"a",ặ:"a",ằ:"a",ẳ:"a",ẵ:"a",ǎ:"a",â:"a",ấ:"a",ậ:"a",ầ:"a",ẩ:"a",ẫ:"a",ä:"a",ǟ:"a",ȧ:"a",ǡ:"a",ạ:"a",ȁ:"a",à:"a",ả:"a",ȃ:"a",ā:"a",ą:"a",ᶏ:"a",ẚ:"a",å:"a",ǻ:"a",ḁ:"a",ⱥ:"a",ã:"a",ꜳ:"aa",æ:"ae",ǽ:"ae",ǣ:"ae",ꜵ:"ao",ꜷ:"au",ꜹ:"av",ꜻ:"av",ꜽ:"ay",ḃ:"b",ḅ:"b",ɓ:"b",ḇ:"b",ᵬ:"b",ᶀ:"b",ƀ:"b",ƃ:"b",ɵ:"o",ć:"c",č:"c",ç:"c",ḉ:"c",ĉ:"c",ɕ:"c",ċ:"c",ƈ:"c",ȼ:"c",ď:"d",ḑ:"d",ḓ:"d",ȡ:"d",ḋ:"d",ḍ:"d",ɗ:"d",ᶑ:"d",ḏ:"d",ᵭ:"d",ᶁ:"d",đ:"d",ɖ:"d",ƌ:"d",ı:"i",ȷ:"j",ɟ:"j",ʄ:"j",dz:"dz",dž:"dz",é:"e",ĕ:"e",ě:"e",ȩ:"e",ḝ:"e",ê:"e",ế:"e",ệ:"e",ề:"e",ể:"e",ễ:"e",ḙ:"e",ë:"e",ė:"e",ẹ:"e",ȅ:"e",è:"e",ẻ:"e",ȇ:"e",ē:"e",ḗ:"e",ḕ:"e",ⱸ:"e",ę:"e",ᶒ:"e",ɇ:"e",ẽ:"e",ḛ:"e",ꝫ:"et",ḟ:"f",ƒ:"f",ᵮ:"f",ᶂ:"f",ǵ:"g",ğ:"g",ǧ:"g",ģ:"g",ĝ:"g",ġ:"g",ɠ:"g",ḡ:"g",ᶃ:"g",ǥ:"g",ḫ:"h",ȟ:"h",ḩ:"h",ĥ:"h",ⱨ:"h",ḧ:"h",ḣ:"h",ḥ:"h",ɦ:"h",ẖ:"h",ħ:"h",ƕ:"hv",í:"i",ĭ:"i",ǐ:"i",î:"i",ï:"i",ḯ:"i",ị:"i",ȉ:"i",ì:"i",ỉ:"i",ȋ:"i",ī:"i",į:"i",ᶖ:"i",ɨ:"i",ĩ:"i",ḭ:"i",ꝺ:"d",ꝼ:"f",ᵹ:"g",ꞃ:"r",ꞅ:"s",ꞇ:"t",ꝭ:"is",ǰ:"j",ĵ:"j",ʝ:"j",ɉ:"j",ḱ:"k",ǩ:"k",ķ:"k",ⱪ:"k",ꝃ:"k",ḳ:"k",ƙ:"k",ḵ:"k",ᶄ:"k",ꝁ:"k",ꝅ:"k",ĺ:"l",ƚ:"l",ɬ:"l",ľ:"l",ļ:"l",ḽ:"l",ȴ:"l",ḷ:"l",ḹ:"l",ⱡ:"l",ꝉ:"l",ḻ:"l",ŀ:"l",ɫ:"l",ᶅ:"l",ɭ:"l",ł:"l",lj:"lj",ſ:"s",ẜ:"s",ẛ:"s",ẝ:"s",ḿ:"m",ṁ:"m",ṃ:"m",ɱ:"m",ᵯ:"m",ᶆ:"m",ń:"n",ň:"n",ņ:"n",ṋ:"n",ȵ:"n",ṅ:"n",ṇ:"n",ǹ:"n",ɲ:"n",ṉ:"n",ƞ:"n",ᵰ:"n",ᶇ:"n",ɳ:"n",ñ:"n",nj:"nj",ó:"o",ŏ:"o",ǒ:"o",ô:"o",ố:"o",ộ:"o",ồ:"o",ổ:"o",ỗ:"o",ö:"o",ȫ:"o",ȯ:"o",ȱ:"o",ọ:"o",ő:"o",ȍ:"o",ò:"o",ỏ:"o",ơ:"o",ớ:"o",ợ:"o",ờ:"o",ở:"o",ỡ:"o",ȏ:"o",ꝋ:"o",ꝍ:"o",ⱺ:"o",ō:"o",ṓ:"o",ṑ:"o",ǫ:"o",ǭ:"o",ø:"o",ǿ:"o",õ:"o",ṍ:"o",ṏ:"o",ȭ:"o",ƣ:"oi",ꝏ:"oo",ɛ:"e",ᶓ:"e",ɔ:"o",ᶗ:"o",ȣ:"ou",ṕ:"p",ṗ:"p",ꝓ:"p",ƥ:"p",ᵱ:"p",ᶈ:"p",ꝕ:"p",ᵽ:"p",ꝑ:"p",ꝙ:"q",ʠ:"q",ɋ:"q",ꝗ:"q",ŕ:"r",ř:"r",ŗ:"r",ṙ:"r",ṛ:"r",ṝ:"r",ȑ:"r",ɾ:"r",ᵳ:"r",ȓ:"r",ṟ:"r",ɼ:"r",ᵲ:"r",ᶉ:"r",ɍ:"r",ɽ:"r",ↄ:"c",ꜿ:"c",ɘ:"e",ɿ:"r",ś:"s",ṥ:"s",š:"s",ṧ:"s",ş:"s",ŝ:"s",ș:"s",ṡ:"s",ṣ:"s",ṩ:"s",ʂ:"s",ᵴ:"s",ᶊ:"s",ȿ:"s",ɡ:"g",ᴑ:"o",ᴓ:"o",ᴝ:"u",ť:"t",ţ:"t",ṱ:"t",ț:"t",ȶ:"t",ẗ:"t",ⱦ:"t",ṫ:"t",ṭ:"t",ƭ:"t",ṯ:"t",ᵵ:"t",ƫ:"t",ʈ:"t",ŧ:"t",ᵺ:"th",ɐ:"a",ᴂ:"ae",ǝ:"e",ᵷ:"g",ɥ:"h",ʮ:"h",ʯ:"h",ᴉ:"i",ʞ:"k",ꞁ:"l",ɯ:"m",ɰ:"m",ᴔ:"oe",ɹ:"r",ɻ:"r",ɺ:"r",ⱹ:"r",ʇ:"t",ʌ:"v",ʍ:"w",ʎ:"y",ꜩ:"tz",ú:"u",ŭ:"u",ǔ:"u",û:"u",ṷ:"u",ü:"u",ǘ:"u",ǚ:"u",ǜ:"u",ǖ:"u",ṳ:"u",ụ:"u",ű:"u",ȕ:"u",ù:"u",ủ:"u",ư:"u",ứ:"u",ự:"u",ừ:"u",ử:"u",ữ:"u",ȗ:"u",ū:"u",ṻ:"u",ų:"u",ᶙ:"u",ů:"u",ũ:"u",ṹ:"u",ṵ:"u",ᵫ:"ue",ꝸ:"um",ⱴ:"v",ꝟ:"v",ṿ:"v",ʋ:"v",ᶌ:"v",ⱱ:"v",ṽ:"v",ꝡ:"vy",ẃ:"w",ŵ:"w",ẅ:"w",ẇ:"w",ẉ:"w",ẁ:"w",ⱳ:"w",ẘ:"w",ẍ:"x",ẋ:"x",ᶍ:"x",ý:"y",ŷ:"y",ÿ:"y",ẏ:"y",ỵ:"y",ỳ:"y",ƴ:"y",ỷ:"y",ỿ:"y",ȳ:"y",ẙ:"y",ɏ:"y",ỹ:"y",ź:"z",ž:"z",ẑ:"z",ʑ:"z",ⱬ:"z",ż:"z",ẓ:"z",ȥ:"z",ẕ:"z",ᵶ:"z",ᶎ:"z",ʐ:"z",ƶ:"z",ɀ:"z",ff:"ff",ffi:"ffi",ffl:"ffl",fi:"fi",fl:"fl",ij:"ij",œ:"oe",st:"st",ₐ:"a",ₑ:"e",ᵢ:"i",ⱼ:"j",ₒ:"o",ᵣ:"r",ᵤ:"u",ᵥ:"v",ₓ:"x"};return Object.keys(a).forEach((t=>e=function replaceAll(e,t,a){return e.split(t).join(a)}(e,t,a[t]))),t?e.toLowerCase():e}(e):e)).join(" ")))})))),r&&makeThatArray(r).map((e=>"object"==typeof e?Object.keys(e).map((t=>`${t}: ${e[t]}`)).join("; "):makeThatArray(e).join("; "))).join("; ").split(";").forEach((e=>{let[t,a]=e.split(":").map((e=>e.trim()));d.style[function makeCamelCase(e){return e.split("-").map(((e,t)=>t>0?e.charAt(0).toUpperCase()+e.slice(1):e)).join("")}(t)]=a})),i&&makeThatArray(i).forEach((e=>d.appendChild(e instanceof HTMLElement?e:createDOMElem(e)))),l&&makeThatArray(l).forEach((e=>e&&e.event&&e.cb&&d.addEventListener(e.event,e.cb))),n){const e=["#","."];"string"==typeof n&&(n=n.charAt(0)in e?document.querySelector(n):e.map((e=>document.querySelector(e+n))).filter((e=>null!==e))[0])}else n=document.querySelector("body");return s&&n.appendChild(d),d}return t})()));
+function u(n){return n.split("-").map((e,t)=>t>0?e.charAt(0).toUpperCase()+e.slice(1):e).join("")}function d(n){return n==null?[]:Array.isArray(n)?n:[n]}function f(n,e=!1){let t={\u00E1:"a",\u00E9:"e",\u00ED:"i",\u00F3:"o",\u00F6:"o",\u0151:"o",\u00FA:"u",\u00FC:"u",\u0171:"u",\u00C1:"A",\u00C9:"E",\u00CD:"I",\u00D3:"O",\u00D6:"O",\u0150:"O",\u00DA:"U",\u00DC:"U",\u0170:"U",\u00E0:"a",\u00E8:"e",\u00EC:"i",\u00F2:"o",\u00F9:"u",\u00E2:"a",\u00EA:"e",\u00EE:"i",\u00F4:"o",\u00FB:"u",\u0103:"a",\u0115:"e",\u012D:"i",\u014F:"o",\u016D:"u",\u0101:"a",\u0113:"e",\u012B:"i",\u014D:"o",\u016B:"u",\u01CE:"a",\u011B:"e",\u01D0:"i",\u01D2:"o",\u01D4:"u",\u00E4:"a",\u00EB:"e",\u00EF:"i",\u00E5:"a",\u00F8:"o",\u00E3:"a",\u00F5:"o",\u00E6:"ae",\u00E7:"c",\u011F:"g",\u0142:"l",\u00F1:"n",\u0111:"d",\u00DF:"ss",\u010F:"d",\u0165:"t",\u0148:"n",\u0159:"r",\u0161:"s",\u017E:"z",\u0158:"R",\u0160:"S",\u017D:"Z",\u00C7:"C",\u015E:"S",\u011E:"G",\u0141:"L",\u00D1:"N",\u0110:"D",\u013E:"l",\u0155:"r",\u013A:"l"},r=n;for(let[i,o]of Object.entries(t))r=r.split(i).join(o);return e?r.toLowerCase():r}var v=["class","id"];function y(n){if(n instanceof HTMLElement)return n;let e=null;return n.charAt(0)==="#"||n.charAt(0)==="."?e=document.querySelector(n):e=document.querySelector(`#${n}`)||document.querySelector(`.${n}`)||document.querySelector(n),e||(console.warn(`[DOMElemJS] Parent element not found for selector: "${n}". Falling back to document.body.`),document.body)}function g(n,e,t){for(let r of d(e))for(let[i,o]of Object.entries(r))if(o!=null)if(i==="checked")n.checked=!!o;else if(i==="dataset"&&typeof o=="object"&&!Array.isArray(o))Object.assign(n.dataset,o);else{let a=(Array.isArray(o)?o:[o]).map(c=>t&&v.includes(i)?f(String(c)):String(c));n.setAttribute(i,a.join(" "))}}function b(n,e){d(e).map(r=>typeof r=="object"&&r!==null?Object.entries(r).map(([i,o])=>`${i}: ${o}`).join("; "):d(r).join("; ")).join("; ").split(";").filter(Boolean).forEach(r=>{let i=r.indexOf(":");if(i===-1)return;let o=r.slice(0,i).trim(),l=r.slice(i+1).trim();if(o){let a=u(o);n.style[a]=l}})}function M(n,e){for(let t of e)t instanceof HTMLElement?n.appendChild(t):n.appendChild(m(t))}function O(n,e){for(let t of d(e))t?.event&&t?.cb&&n.addEventListener(t.event,t.cb)}function m(n){let{tag:e,content:t,text:r,attrs:i,style:o,children:l,parent:a,handleEvent:c,append:h=!0,stripDiacritics:E=!0}=n;t&&r&&console.warn(`[DOMElemJS] Both "content" and "text" provided for <${e}>. "text" takes precedence \u2014 "content" will be ignored.`);let s=document.createElement(e);return r?s.textContent=r:t&&(s.innerHTML=t),i&&g(s,i,E),o&&b(s,o),l&&M(s,l),c&&O(s,c),h&&(a?y(a):document.body).appendChild(s),s}var p=class{constructor(e){this._listeners=new Map;if(this.options=e,this.elem=m(e),e.handleEvent){let t=Array.isArray(e.handleEvent)?e.handleEvent:[e.handleEvent];for(let r of t)this._trackListener(r.event,r.cb)}}addEventListener(e,t){return this.elem.addEventListener(e,t),this._trackListener(e,t),this}removeEventListener(e,t){return this.elem.removeEventListener(e,t),this._untrackListener(e,t),this}removeAllListeners(){for(let[e,t]of this._listeners)for(let r of t)this.elem.removeEventListener(e,r);this._listeners.clear()}_trackListener(e,t){this._listeners.has(e)||this._listeners.set(e,new Set),this._listeners.get(e).add(t)}_untrackListener(e,t){this._listeners.get(e)?.delete(t)}};var L=["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hr","html","i","iframe","img","input","ins","kbd","label","legend","li","link","main","map","mark","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","svg","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","u","ul","video","wbr"];export{p as DOMElem,L as HTML_TAGS,m as createDOMElem};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.ts","../src/createDOMElem.ts","../src/DOMElem.ts","../src/htmlTags.ts"],"sourcesContent":["/**\n * Converts a kebab-case string to camelCase.\n *\n * @example\n * makeCamelCase(\"background-color\") // \"backgroundColor\"\n * makeCamelCase(\"font-size\") // \"fontSize\"\n *\n * @param s - The kebab-case string to convert.\n * @returns The camelCase version of the input.\n */\nexport function makeCamelCase(s: string): string {\n  return s\n    .split(\"-\")\n    .map((part, i) => (i > 0 ? part.charAt(0).toUpperCase() + part.slice(1) : part))\n    .join(\"\");\n}\n\n/**\n * Ensures the given value is wrapped in an array.\n * Returns an empty array for `null` / `undefined`.\n *\n * @example\n * toArray(\"hello\")    // [\"hello\"]\n * toArray([\"a\", \"b\"]) // [\"a\", \"b\"]\n * toArray(null)       // []\n *\n * @param value - The value to normalize.\n * @returns An array containing the value, or an empty array if falsy.\n */\nexport function toArray<T>(value: T | T[] | undefined | null): T[] {\n  if (value == null) return [];\n  return Array.isArray(value) ? value : [value];\n}\n\n/**\n * Replaces accented / special characters with their ASCII equivalents.\n *\n * Supports Hungarian, Czech, Polish, Turkish, and other Latin-script diacritics.\n *\n * @example\n * noSpecChars(\"árvíztűrő\") // \"arviztuoro\"\n * noSpecChars(\"Árvíz\", true) // \"arviz\"\n *\n * @param text - The input string containing special characters.\n * @param lowercase - If `true`, the result is lowercased after replacement.\n * @returns The string with special characters replaced.\n */\nexport function noSpecChars(text: string, lowercase = false): string {\n  const map: Record<string, string> = {\n    á: \"a\", é: \"e\", í: \"i\", ó: \"o\", ö: \"o\", ő: \"o\",\n    ú: \"u\", ü: \"u\", ű: \"u\",\n    Á: \"A\", É: \"E\", Í: \"I\", Ó: \"O\", Ö: \"O\", Ő: \"O\",\n    Ú: \"U\", Ü: \"U\", Ű: \"U\",\n    à: \"a\", è: \"e\", ì: \"i\", ò: \"o\", ù: \"u\",\n    â: \"a\", ê: \"e\", î: \"i\", ô: \"o\", û: \"u\",\n    ă: \"a\", ĕ: \"e\", ĭ: \"i\", ŏ: \"o\", ŭ: \"u\",\n    ā: \"a\", ē: \"e\", ī: \"i\", ō: \"o\", ū: \"u\",\n    ǎ: \"a\", ě: \"e\", ǐ: \"i\", ǒ: \"o\", ǔ: \"u\",\n    ä: \"a\", ë: \"e\", ï: \"i\",\n    å: \"a\", ø: \"o\",\n    ã: \"a\", õ: \"o\",\n    æ: \"ae\",\n    ç: \"c\", ğ: \"g\",\n    ł: \"l\",\n    ñ: \"n\",\n    đ: \"d\",\n    ß: \"ss\",\n    ď: \"d\", ť: \"t\", ň: \"n\",\n    ř: \"r\", š: \"s\", ž: \"z\",\n    Ř: \"R\", Š: \"S\", Ž: \"Z\",\n    Ç: \"C\", Ş: \"S\", Ğ: \"G\",\n    Ł: \"L\", Ñ: \"N\", Đ: \"D\",\n    ľ: \"l\", ŕ: \"r\", ĺ: \"l\",\n  };\n\n  let result = text;\n  for (const [char, replacement] of Object.entries(map)) {\n    result = result.split(char).join(replacement);\n  }\n\n  return lowercase ? result.toLowerCase() : result;\n}\n","import { makeCamelCase, toArray, noSpecChars } from \"./utils\";\nimport type { CreateDOMElemOptions, AttrsInput, StyleInput } from \"./types\";\n\n/** Attributes that have special characters stripped automatically. */\nconst NO_SPEC_CHARS_ATTRS = [\"class\", \"id\"];\n\n/**\n * Resolves a parent element from a string selector or HTMLElement reference.\n *\n * If the string starts with `#` or `.`, it is used directly as a querySelector\n * argument. Otherwise, it is tried first as `#<selector>` then as `.<selector>`.\n *\n * @param parent - An HTMLElement or a CSS selector string.\n * @returns The resolved HTMLElement.\n * @throws Will console.warn if the selector does not match any element.\n */\nfunction resolveParent(parent: HTMLElement | string): HTMLElement {\n  if (parent instanceof HTMLElement) return parent;\n\n  let el: Element | null = null;\n\n  if (parent.charAt(0) === \"#\" || parent.charAt(0) === \".\") {\n    el = document.querySelector(parent);\n  } else {\n    el =\n      document.querySelector(`#${parent}`) ||\n      document.querySelector(`.${parent}`) ||\n      document.querySelector(parent);\n  }\n\n  if (!el) {\n    console.warn(\n      `[DOMElemJS] Parent element not found for selector: \"${parent}\". ` +\n        `Falling back to document.body.`\n    );\n    return document.body;\n  }\n\n  return el as HTMLElement;\n}\n\n/**\n * Applies HTML attributes to an element from an {@link AttrsInput}.\n *\n * Handles special cases:\n * - `\"checked\"` — sets the checked property on the element.\n * - `\"dataset\"` — merges data-* attributes via `elem.dataset`.\n * - Other attributes — joined with spaces, with special characters stripped\n *   for `\"class\"` and `\"id\"` when `stripDiacritics` is enabled.\n *\n * @param elem - The target element.\n * @param attrs - Attributes to apply.\n * @param stripDiacritics - Whether to strip diacritics from class/id.\n */\nfunction applyAttrs(\n  elem: HTMLElement,\n  attrs: AttrsInput,\n  stripDiacritics: boolean\n): void {\n  for (const attrObj of toArray(attrs)) {\n    for (const [key, value] of Object.entries(attrObj)) {\n      if (value == null) continue;\n\n      if (key === \"checked\") {\n        (elem as HTMLInputElement).checked = !!value;\n      } else if (\n        key === \"dataset\" &&\n        typeof value === \"object\" &&\n        !Array.isArray(value)\n      ) {\n        Object.assign(elem.dataset, value);\n      } else {\n        const rawValues = Array.isArray(value) ? value : [value];\n        const values = rawValues.map((v) =>\n          stripDiacritics && NO_SPEC_CHARS_ATTRS.includes(key)\n            ? noSpecChars(String(v))\n            : String(v)\n        );\n        elem.setAttribute(key, values.join(\" \"));\n      }\n    }\n  }\n}\n\n/**\n * Applies inline CSS styles to an element from a {@link StyleInput}.\n *\n * Accepts:\n * - A CSS string: `\"color: red; font-size: 14px\"`\n * - An object: `{ color: \"red\", fontSize: \"14px\" }`\n * - An array mixing both formats\n *\n * @param elem - The target element.\n * @param style - Style input to apply.\n */\nfunction applyStyle(elem: HTMLElement, style: StyleInput): void {\n  const styleParts = toArray(style)\n    .map((s) => {\n      if (typeof s === \"object\" && s !== null) {\n        return Object.entries(s)\n          .map(([k, v]) => `${k}: ${v}`)\n          .join(\"; \");\n      }\n      return toArray(s).join(\"; \");\n    })\n    .join(\"; \");\n\n  styleParts\n    .split(\";\")\n    .filter(Boolean)\n    .forEach((styleText) => {\n      const colonIndex = styleText.indexOf(\":\");\n      if (colonIndex === -1) return;\n      const prop = styleText.slice(0, colonIndex).trim();\n      const val = styleText.slice(colonIndex + 1).trim();\n      if (prop) {\n        const camelProp = makeCamelCase(prop);\n        (elem.style as unknown as Record<string, string>)[camelProp] = val;\n      }\n    });\n}\n\n/**\n * Appends child elements to a parent element.\n *\n * Each child can be either an {@link HTMLElement} or a\n * {@link CreateDOMElemOptions} object that will be recursively created.\n *\n * @param elem - The parent element to append children to.\n * @param children - Array of child elements or options.\n */\nfunction applyChildren(\n  elem: HTMLElement,\n  children: Array<CreateDOMElemOptions | HTMLElement>\n): void {\n  for (const child of children) {\n    if (child instanceof HTMLElement) {\n      elem.appendChild(child);\n    } else {\n      elem.appendChild(createDOMElem(child));\n    }\n  }\n}\n\n/**\n * Attaches event listeners to an element.\n *\n * @param elem - The target element.\n * @param handleEvent - One or more {@link EventHandler} descriptors.\n */\nfunction applyEvents(\n  elem: HTMLElement,\n  handleEvent: CreateDOMElemOptions[\"handleEvent\"]\n): void {\n  for (const evt of toArray(handleEvent)) {\n    if (evt?.event && evt?.cb) {\n      elem.addEventListener(evt.event, evt.cb);\n    }\n  }\n}\n\n/**\n * Creates a DOM element with the given configuration.\n *\n * This is the core function of DOMelemJS. It creates an HTML element,\n * applies attributes, styles, children, and event listeners, then\n * appends it to a parent element.\n *\n * @example\n * ```ts\n * const el = createDOMElem({\n *   tag: \"div\",\n *   text: \"Hello\",\n *   attrs: { class: \"greeting\" },\n *   style: { color: \"blue\" },\n *   parent: \"#app\",\n *   handleEvent: {\n *     event: \"click\",\n *     cb: () => console.log(\"clicked\"),\n *   },\n * });\n * ```\n *\n * @param options - Element creation options.\n * @returns The created HTMLElement.\n */\nexport default function createDOMElem(options: CreateDOMElemOptions): HTMLElement {\n  const {\n    tag,\n    content,\n    text,\n    attrs,\n    style,\n    children,\n    parent,\n    handleEvent,\n    append = true,\n    stripDiacritics = true,\n  } = options;\n\n  if (content && text) {\n    console.warn(\n      `[DOMElemJS] Both \"content\" and \"text\" provided for <${tag}>. ` +\n        `\"text\" takes precedence — \"content\" will be ignored.`\n    );\n  }\n\n  const elem = document.createElement(tag);\n\n  if (text) {\n    elem.textContent = text;\n  } else if (content) {\n    elem.innerHTML = content;\n  }\n\n  if (attrs) applyAttrs(elem, attrs, stripDiacritics);\n  if (style) applyStyle(elem, style);\n  if (children) applyChildren(elem, children);\n  if (handleEvent) applyEvents(elem, handleEvent);\n\n  if (append) {\n    const target = parent ? resolveParent(parent) : document.body;\n    target.appendChild(elem);\n  }\n\n  return elem;\n}\n","import createDOMElem from \"./createDOMElem\";\nimport type { DOMElemOptions, EventHandler } from \"./types\";\n\n/**\n * Wrapper class around {@link createDOMElem}.\n *\n * Provides an object-oriented API for creating DOM elements.\n * The created element is available via the `.elem` property.\n * Event listeners can be added and removed via `addEventListener` /\n * `removeEventListener`.\n *\n * @example\n * ```ts\n * const div = new DOMElem({\n *   tag: \"div\",\n *   attrs: { class: \"container\" },\n *   text: \"Hello World\",\n * });\n *\n * div.addEventListener(\"click\", () => console.log(\"clicked\"));\n * div.removeEventListener(\"click\", handler);\n * ```\n */\nexport default class DOMElem {\n  /** The created HTMLElement. */\n  readonly elem: HTMLElement;\n\n  /** The options used to create the element. */\n  readonly options: DOMElemOptions;\n\n  private _listeners: Map<string, Set<(e: Event) => void>> = new Map();\n\n  /**\n   * Creates a new DOMElem instance.\n   *\n   * @param options - Element creation options.\n   */\n  constructor(options: DOMElemOptions) {\n    this.options = options;\n    this.elem = createDOMElem(options);\n\n    if (options.handleEvent) {\n      const events = Array.isArray(options.handleEvent)\n        ? options.handleEvent\n        : [options.handleEvent];\n      for (const evt of events) {\n        this._trackListener(evt.event, evt.cb);\n      }\n    }\n  }\n\n  /**\n   * Adds an event listener to the element and tracks it for later removal.\n   *\n   * @param event - The DOM event name.\n   * @param cb - The callback function.\n   * @returns This instance for chaining.\n   */\n  addEventListener(event: string, cb: (e: Event) => void): this {\n    this.elem.addEventListener(event, cb);\n    this._trackListener(event, cb);\n    return this;\n  }\n\n  /**\n   * Removes a previously added event listener.\n   *\n   * @param event - The DOM event name.\n   * @param cb - The callback function to remove.\n   * @returns This instance for chaining.\n   */\n  removeEventListener(event: string, cb: (e: Event) => void): this {\n    this.elem.removeEventListener(event, cb);\n    this._untrackListener(event, cb);\n    return this;\n  }\n\n  /**\n   * Removes all tracked event listeners from the element.\n   */\n  removeAllListeners(): void {\n    for (const [event, cbs] of this._listeners) {\n      for (const cb of cbs) {\n        this.elem.removeEventListener(event, cb);\n      }\n    }\n    this._listeners.clear();\n  }\n\n  private _trackListener(event: string, cb: (e: Event) => void): void {\n    if (!this._listeners.has(event)) {\n      this._listeners.set(event, new Set());\n    }\n    this._listeners.get(event)!.add(cb);\n  }\n\n  private _untrackListener(event: string, cb: (e: Event) => void): void {\n    this._listeners.get(event)?.delete(cb);\n  }\n}\n","/**\n * List of standard HTML tag names.\n *\n * Provided as a `const` tuple so TypeScript can infer literal types\n * (e.g. `\"div\"` instead of `string`).\n *\n * @example\n * import { HTML_TAGS } from \"domelemjs\";\n * if (HTML_TAGS.includes(tag as HtmlTagConst)) { ... }\n */\nexport const HTML_TAGS = [\n  \"a\", \"abbr\", \"address\", \"area\", \"article\", \"aside\", \"audio\",\n  \"b\", \"base\", \"bdi\", \"bdo\", \"blockquote\", \"body\", \"br\", \"button\",\n  \"canvas\", \"caption\", \"cite\", \"code\", \"col\", \"colgroup\",\n  \"data\", \"datalist\", \"dd\", \"del\", \"details\", \"dfn\", \"dialog\", \"div\", \"dl\", \"dt\",\n  \"em\", \"embed\",\n  \"fieldset\", \"figcaption\", \"figure\", \"footer\", \"form\",\n  \"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\", \"head\", \"header\", \"hr\", \"html\",\n  \"i\", \"iframe\", \"img\", \"input\", \"ins\",\n  \"kbd\",\n  \"label\", \"legend\", \"li\", \"link\",\n  \"main\", \"map\", \"mark\", \"meta\", \"meter\",\n  \"nav\", \"noscript\",\n  \"object\", \"ol\", \"optgroup\", \"option\", \"output\",\n  \"p\", \"param\", \"picture\", \"pre\", \"progress\",\n  \"q\",\n  \"rp\", \"rt\", \"ruby\",\n  \"s\", \"samp\", \"script\", \"section\", \"select\", \"small\", \"source\", \"span\",\n  \"strong\", \"style\", \"sub\", \"summary\", \"sup\", \"svg\",\n  \"table\", \"tbody\", \"td\", \"template\", \"textarea\", \"tfoot\", \"th\", \"thead\",\n  \"time\", \"title\", \"tr\", \"track\",\n  \"u\", \"ul\",\n  \"video\",\n  \"wbr\",\n] as const;\n\n/** Union type of all valid HTML tag name literals. */\nexport type HtmlTagConst = (typeof HTML_TAGS)[number];\n"],"mappings":"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","names":["makeCamelCase","s","part","i","toArray","value","noSpecChars","text","lowercase","map","result","char","replacement","NO_SPEC_CHARS_ATTRS","resolveParent","parent","el","applyAttrs","elem","attrs","stripDiacritics","attrObj","toArray","key","value","values","v","noSpecChars","applyStyle","style","s","k","styleText","colonIndex","prop","val","camelProp","makeCamelCase","applyChildren","children","child","createDOMElem","applyEvents","handleEvent","evt","options","tag","content","text","append","DOMElem","options","createDOMElem","events","evt","event","cb","cbs","HTML_TAGS"]}

package/package.json

@@ -1,52 +1,63 @@
-{
-  "name": "domelemjs",
-  "version": "1.2.3",
-  "type": "module",
-  "description": "With the help of this package the rendering of HTML elements form JavaScript become a easy job.",
-  "main": "./dist/index.js",
-  "prepublishOnly": "webpack --mode=production",
-  "scripts": {
-    "build": "webpack",
-    "dev": "webpack serve"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/exphoenee/DOMelemJS.git"
-  },
-  "keywords": [
-    "rendering",
-    "DOM",
-    "dynamic",
-    "webapp"
-  ],
-  "author": "VIKTOR, Bozzay",
-  "files": [
-    "dist"
-  ],
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/exphoenee/DOMelemJS/issues"
-  },
-  "homepage": "https://github.com/exphoenee/DOMelemJS#readme",
-  "directories": {
-    "test": "test"
-  },
-  "dependencies": {
-    "makeCamelCase": "file:./src/Utils/makeCamelCase.mjs",
-    "makeThatArray": "file:./src/Utils/makeThatArray.mjs",
-    "noSpecChars": "file:./src/Utils/noSpecChars.mjs",
-    "domElemTypes": "file:./src/model/domElemTypes.mjs"
-  },
-  "devDependencies": {
-    "url-loader": "^4.1.1",
-    "clean-webpack-plugin": "^4.0.0",
-    "css-loader": "^6.7.1",
-    "html-webpack-plugin": "^5.5.0",
-    "sass": "^1.53.0",
-    "sass-loader": "^13.0.2",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.3",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.3"
-  }
-}
+{
+  "name": "domelemjs",
+  "version": "2.0.1",
+  "type": "module",
+  "description": "A lightweight, zero-dependency TypeScript library for dynamically creating HTML elements from JavaScript.",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "README-hu.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "format": "prettier --write src/",
+    "format:check": "prettier --check src/",
+    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/exphoenee/DOMelemJS.git"
+  },
+  "keywords": [
+    "rendering",
+    "DOM",
+    "dynamic",
+    "webapp",
+    "typescript"
+  ],
+  "author": "VIKTOR, Bozzay",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/exphoenee/DOMelemJS/issues"
+  },
+  "homepage": "https://github.com/exphoenee/DOMelemJS#readme",
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "eslint": "^9.0.0",
+    "globals": "^15.0.0",
+    "jsdom": "^24.0.0",
+    "prettier": "^3.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "typescript-eslint": "^8.0.0",
+    "vitest": "^1.2.0"
+  }
+}