domelemjs 1.2.3 → 2.0.0

package/README.md

@@ -1,182 +1,249 @@
-# DOMelemJS
-
-This lightweight, zero dependecy tool is allow you to render HTML elements dynamically form JavaScript!
-
-Installation:
-
-```
-npm i domelemjs
-```
-
-Usage:
-
-```
-const DOMELemjs = require('domelemjs')
-
-domelemjs.createDOMElem({tag: "div", attrs: {class: "app"}}) // retunrs and create a <div class="app">...</div
-domelemjs.DOMElem.create({tag: "div", attrs: {class: "app"}}) // retunrs and create a <div class="app">...</div
-```
-
-There is two approach and two to use it:
-
-1. is the Object approach:
-   This is a tiny object with name DOMElem!
-
-Whit this approach you can create HTML element as follows:
-
-```
-Elem.Create({
-      tag: "div",
-      attrs: { class: "app" },
-    });
-```
-
-that gives you a div with a class: app:
-
-```
-<div class="app"></div>
-```
-
-2 the second way is through a function that named: createDOMElem()
-
-With this approach you should use as follows:
-
-```
-const app = createDOMElem({
-  tag: "div",
-  attrs: { id: "app" },
-});
-```
-
-that gives you a div with a id: app:
-
-```
-<div id="app"></div>
-```
-
-With this renderer you will be able to add eventListeners and styles in the moment as the DOM is created!
-e.g.:
-
-```
-createDOMElem({
-  tag: "h2",
-  text: "It's amazing",
-  parent: app,
-  style: { color: "red", "background-color": "green" },
-  attrs: { id: "title" },
-  handleEvent: {
-    event: "click",
-    cb: (e) => console.log(e.target.id),
-  },
-});
-```
-
-Handle event is an object or an array of object, that should be conain:
-
-- event, what will fire the event?
-- and a cb, that is the callback function
-- you can ad as many events as you want easily in an array!
-
-You can add the children of the element same time as the element is created:
-
-```
-const select = createDOMElem({
-  tag: "select",
-  parent: app,
-  attrs: { id: "selector" },
-  children: [
-    {
-      tag: "option",
-      text: "foo",
-      attr: { value: "foo" },
-    },
-    {
-      tag: "option",
-      text: "bar",
-      attr: { value: "bar" },
-    },
-  ],
-  handleEvent: {
-    event: "change",
-    cb: (e) => console.log(e.target.value),
-  },
-});
-```
-
-Adding stye is also possible as:
-
-- a string, with a bunch of style properties, it can be:
-  - CCS style (e.g. background-color) or
-  - JS/camelCase (e.g. backgroundColor) style formatted version also.
-- or an object formatted (e.g. style: { backgroundColor: red })
-- or an array with multiple style strings with CSS or JS vesrion, or mixed
-
-And a complex structure semms like this here:
-
-```
-dateFilterContainer = document.body.appendChild(
-  Elem.Create({
-    tag: "div",
-    attrs: { class: "dateFilter-Container", id: "dateFilter-Container" },
-    children: [
-      Elem.Create({
-        tag: "div",
-        attrs: {
-          class: "beginDate-container",
-          id: "beginDate-container",
-        },
-        children: [
-          Elem.Create({
-            tag: "label",
-            attrs: {
-              class: "beginDate-lable",
-            },
-            content: "Kezdő dátum: ",
-          }),
-          Elem.Create({
-            tag: "input",
-            attrs: {
-              type: "date",
-              class: "beginDate",
-              id: "beginDate",
-            },
-            eventStarter: "change",
-            eventFunction: function (e) {
-              e.preventDefault();
-              console.log(this.value);
-            },
-          }),
-        ],
-      }),
-      Elem.Create({
-        tag: "div",
-        attrs: { class: "endDate-container", id: "endDate-container" },
-        children: [
-          Elem.Create({
-            tag: "label",
-            attrs: {
-              class: "endDate-lable",
-            },
-            content: "Befejező dátum: ",
-          }),
-          Elem.Create({
-            tag: "input",
-            attrs: {
-              type: "date",
-              class: "endDate",
-              id: "endDate",
-            },
-            eventStarter: "change",
-            eventFunction: function (e) {
-              e.preventDefault();
-              console.log(this.value);
-            },
-          }),
-        ],
-      }),
-    ],
-  })
-);
-```
-
-Under MIT license.
+# DOMelemJS
+
+A lightweight, zero-dependency TypeScript library for dynamically creating HTML elements from JavaScript.
+
+[![npm version](https://img.shields.io/npm/v/domelemjs)](https://www.npmjs.com/package/domelemjs)
+[![license](https://img.shields.io/npm/l/domelemjs)](https://github.com/exphoenee/DOMelemJS/blob/main/LICENSE)
+
+## Installation
+
+### npm
+
+```bash
+npm install domelemjs
+```
+
+### CDN (unpkg)
+
+No build tools needed — include directly in your HTML:
+
+```html
+<script src="https://unpkg.com/domelemjs/dist/index.browser.js"></script>
+<script>
+  const { createDOMElem, DOMElem } = DOMElemJS;
+
+  const app = createDOMElem({
+    tag: "div",
+    attrs: { id: "app" },
+    text: "Hello from CDN!",
+  });
+</script>
+```
+
+Pin a specific version:
+
+```html
+<script src="https://unpkg.com/domelemjs@2.0.1/dist/index.browser.js"></script>
+```
+
+## Quick Start
+
+```ts
+import { createDOMElem } from "domelemjs";
+
+const app = createDOMElem({
+  tag: "div",
+  attrs: { id: "app" },
+});
+```
+
+## API
+
+### `createDOMElem(options)`
+
+The core function. Creates a DOM element and returns the `HTMLElement`.
+
+```ts
+const el = createDOMElem({
+  tag: "h1",
+  text: "Hello World",
+  attrs: { class: "title" },
+  style: { color: "blue" },
+  parent: "#app",
+});
+```
+
+### `new DOMElem(options)`
+
+Class-based wrapper. The created element is available on `.elem`.
+
+```ts
+import { DOMElem } from "domelemjs";
+
+const div = new DOMElem({
+  tag: "div",
+  text: "Hello",
+  attrs: { class: "container" },
+});
+
+document.body.appendChild(div.elem);
+```
+
+## Options
+
+| Option | Type | Description |
+|---|---|---|
+| `tag` | `string` | **Required.** HTML tag name (e.g. `"div"`, `"span"`, `"input"`). |
+| `text` | `string` | Plain text content (`textContent`). |
+| `content` | `string` | Raw HTML content (`innerHTML`). |
+| `attrs` | `object \| object[]` | HTML attributes to set. Supports `class`, `id`, `data-*`, `checked`, etc. |
+| `style` | `string \| object \| array` | Inline CSS styles (see [Styling](#styling)). |
+| `children` | `array` | Child elements — either options objects or `HTMLElement`s. |
+| `parent` | `HTMLElement \| string` | Parent to append to. Accepts an element or a CSS selector (`"#app"`, `".container"`, `"app"`). Defaults to `document.body`. |
+| `handleEvent` | `object \| object[]` | Event listeners to attach (see [Events](#events)). |
+| `append` | `boolean` | Whether to append the element to its parent. Defaults to `true`. |
+
+## Styling
+
+Styles can be provided in multiple formats:
+
+```ts
+// CSS string
+createDOMElem({
+  tag: "div",
+  style: "color: red; background-color: blue",
+});
+
+// Object
+createDOMElem({
+  tag: "div",
+  style: { color: "red", backgroundColor: "blue" },
+});
+
+// Array (mixed)
+createDOMElem({
+  tag: "div",
+  style: ["color: red", { backgroundColor: "blue" }],
+});
+```
+
+## Events
+
+Attach event listeners via `handleEvent`:
+
+```ts
+createDOMElem({
+  tag: "button",
+  text: "Click me",
+  handleEvent: {
+    event: "click",
+    cb: (e) => console.log("clicked!"),
+  },
+});
+```
+
+Multiple events can be passed as an array:
+
+```ts
+createDOMElem({
+  tag: "input",
+  handleEvent: [
+    { event: "focus", cb: () => console.log("focused") },
+    { event: "blur", cb: () => console.log("blurred") },
+  ],
+});
+```
+
+## Attributes
+
+Attributes can be a single object or an array:
+
+```ts
+createDOMElem({
+  tag: "input",
+  attrs: [
+    { id: "myInput", type: "text" },
+    { class: "form-control" },
+  ],
+});
+```
+
+Special attribute handling:
+- **`checked`** — sets the checked property on inputs
+- **`dataset`** — merges `data-*` attributes (e.g. `{ dataset: { id: "foo" } }` becomes `data-id="foo"`)
+- **`class` / `id`** — special characters are automatically stripped
+
+## Children
+
+Children can be nested options objects or existing `HTMLElement`s:
+
+```ts
+createDOMElem({
+  tag: "select",
+  attrs: { id: "selector" },
+  children: [
+    { tag: "option", text: "Foo", attrs: { value: "foo" } },
+    { tag: "option", text: "Bar", attrs: { value: "bar" } },
+  ],
+});
+```
+
+## Complex Example
+
+```ts
+import { createDOMElem } from "domelemjs";
+
+const container = createDOMElem({
+  tag: "div",
+  attrs: { class: "date-filter" },
+  children: [
+    {
+      tag: "div",
+      attrs: { class: "date-group" },
+      children: [
+        {
+          tag: "label",
+          text: "Start date:",
+          attrs: { for: "startDate" },
+        },
+        {
+          tag: "input",
+          attrs: { type: "date", id: "startDate" },
+          handleEvent: {
+            event: "change",
+            cb: (e) => console.log("Start:", (e.target as HTMLInputElement).value),
+          },
+        },
+      ],
+    },
+    {
+      tag: "div",
+      attrs: { class: "date-group" },
+      children: [
+        {
+          tag: "label",
+          text: "End date:",
+          attrs: { for: "endDate" },
+        },
+        {
+          tag: "input",
+          attrs: { type: "date", id: "endDate" },
+          handleEvent: {
+            event: "change",
+            cb: (e) => console.log("End:", (e.target as HTMLInputElement).value),
+          },
+        },
+      ],
+    },
+  ],
+});
+```
+
+## TypeScript
+
+DOMelemJS is written in TypeScript and ships with full type definitions.
+
+```ts
+import { createDOMElem, type CreateDOMElemOptions } from "domelemjs";
+
+const options: CreateDOMElemOptions = {
+  tag: "div",
+  text: "Typed!",
+};
+
+const el = createDOMElem(options);
+```
+
+## License
+
+MIT

package/dist/index.browser.js

@@ -0,0 +1,2 @@
+"use strict";var DOMElemJS=(()=>{var m=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var A=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},T=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of M(t))!C.call(e,n)&&n!==o&&m(e,n,{get:()=>t[n],enumerable:!(r=O(t,n))||r.enumerable});return e};var h=e=>T(m({},"__esModule",{value:!0}),e);var v={};A(v,{DOMElem:()=>p,createDOMElem:()=>c});function d(e){return e.split("-").map((t,o)=>o>0?t.charAt(0).toUpperCase()+t.slice(1):t).join("")}function u(e){return e==null?[]:Array.isArray(e)?e:[e]}function y(e,t=!1){let o={\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=e;for(let[n,i]of Object.entries(o))r=r.split(n).join(i);return t?r.toLowerCase():r}var H=["class","id"];function L(e){return e instanceof HTMLElement?e:e.charAt(0)==="#"||e.charAt(0)==="."?document.querySelector(e):document.querySelector(`#${e}`)||document.querySelector(`.${e}`)||document.querySelector(e)}function g(e,t){for(let o of u(t))for(let[r,n]of Object.entries(o))if(n!=null)if(r==="checked")e.checked=!!n;else if(r==="dataset"&&typeof n=="object"&&!Array.isArray(n))Object.assign(e.dataset,n);else{let a=(Array.isArray(n)?n:[n]).map(l=>H.includes(r)?y(String(l)):String(l));e.setAttribute(r,a.join(" "))}}function S(e,t){u(t).map(r=>typeof r=="object"&&r!==null?Object.entries(r).map(([n,i])=>`${n}: ${i}`).join("; "):u(r).join("; ")).join("; ").split(";").filter(Boolean).forEach(r=>{let n=r.indexOf(":");if(n===-1)return;let i=r.slice(0,n).trim(),a=r.slice(n+1).trim();if(i){let l=d(i);e.style[l]=a}})}function j(e,t){for(let o of t)o instanceof HTMLElement?e.appendChild(o):e.appendChild(c(o))}function D(e,t){for(let o of u(t))o?.event&&o?.cb&&e.addEventListener(o.event,o.cb)}function c(e){let{tag:t,content:o,text:r,attrs:n,style:i,children:a,parent:l,handleEvent:f,append:E=!0}=e,s=document.createElement(t);return o&&(s.innerHTML=o),r&&(s.textContent=r),n&&g(s,n),i&&S(s,i),a&&j(s,a),f&&D(s,f),E&&(l?L(l):document.body).appendChild(s),s}var p=class{constructor(t){this.options=t,this.elem=c(t)}};return h(v);})();
+//# sourceMappingURL=index.browser.js.map

package/dist/index.browser.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/utils.ts","../src/createDOMElem.ts","../src/DOMElem.ts"],"sourcesContent":["/**\n * DOMelemJS — a lightweight, zero-dependency library for creating\n * DOM elements from JavaScript/TypeScript.\n *\n * @example\n * ```ts\n * import { createDOMElem, DOMElem } from \"domelemjs\";\n *\n * // Functional API\n * const el = createDOMElem({\n *   tag: \"div\",\n *   text: \"Hello\",\n *   attrs: { id: \"app\" },\n * });\n *\n * // Class API\n * const div = new DOMElem({ tag: \"div\", text: \"World\" });\n * ```\n *\n * @packageDocumentation\n */\n\nexport { default as DOMElem } from \"./DOMElem\";\nexport { default as createDOMElem } from \"./createDOMElem\";\nexport type {\n  CreateDOMElemOptions,\n  DOMElemOptions,\n  EventHandler,\n  StyleInput,\n  AttrsInput,\n  ParentInput,\n  HtmlTag,\n} from \"./types\";\n","/**\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 */\nfunction resolveParent(parent: HTMLElement | string): HTMLElement {\n  if (parent instanceof HTMLElement) return parent;\n  if (parent.charAt(0) === \"#\" || parent.charAt(0) === \".\") {\n    return document.querySelector(parent) as HTMLElement;\n  }\n  return (\n    document.querySelector(`#${parent}`) ||\n    document.querySelector(`.${parent}`) ||\n    document.querySelector(parent)\n  ) 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\"`.\n *\n * @param elem - The target element.\n * @param attrs - Attributes to apply.\n */\nfunction applyAttrs(elem: HTMLElement, attrs: AttrsInput): 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 (key === \"dataset\" && typeof value === \"object\" && !Array.isArray(value)) {\n        Object.assign(elem.dataset, value);\n      } else {\n        const rawValues = Array.isArray(value) ? value : [value];\n        const values = rawValues.map((v) =>\n          NO_SPEC_CHARS_ATTRS.includes(key) ? noSpecChars(String(v)) : 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  } = options;\n\n  const elem = document.createElement(tag);\n\n  if (content) elem.innerHTML = content;\n  if (text) elem.textContent = text;\n  if (attrs) applyAttrs(elem, attrs);\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 } 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 *\n * @example\n * ```ts\n * const div = new DOMElem({\n *   tag: \"div\",\n *   attrs: { class: \"container\" },\n *   text: \"Hello World\",\n * });\n *\n * document.body.appendChild(div.elem);\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  /**\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}\n"],"mappings":"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","names":["index_exports","__export","DOMElem","createDOMElem","makeCamelCase","s","part","i","toArray","value","noSpecChars","text","lowercase","map","result","char","replacement","NO_SPEC_CHARS_ATTRS","resolveParent","parent","applyAttrs","elem","attrs","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"]}

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";var m=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var A=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},T=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of M(t))!C.call(e,n)&&n!==o&&m(e,n,{get:()=>t[n],enumerable:!(r=O(t,n))||r.enumerable});return e};var h=e=>T(m({},"__esModule",{value:!0}),e);var v={};A(v,{DOMElem:()=>p,createDOMElem:()=>c});module.exports=h(v);function d(e){return e.split("-").map((t,o)=>o>0?t.charAt(0).toUpperCase()+t.slice(1):t).join("")}function u(e){return e==null?[]:Array.isArray(e)?e:[e]}function y(e,t=!1){let o={\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=e;for(let[n,i]of Object.entries(o))r=r.split(n).join(i);return t?r.toLowerCase():r}var H=["class","id"];function L(e){return e instanceof HTMLElement?e:e.charAt(0)==="#"||e.charAt(0)==="."?document.querySelector(e):document.querySelector(`#${e}`)||document.querySelector(`.${e}`)||document.querySelector(e)}function g(e,t){for(let o of u(t))for(let[r,n]of Object.entries(o))if(n!=null)if(r==="checked")e.checked=!!n;else if(r==="dataset"&&typeof n=="object"&&!Array.isArray(n))Object.assign(e.dataset,n);else{let a=(Array.isArray(n)?n:[n]).map(l=>H.includes(r)?y(String(l)):String(l));e.setAttribute(r,a.join(" "))}}function S(e,t){u(t).map(r=>typeof r=="object"&&r!==null?Object.entries(r).map(([n,i])=>`${n}: ${i}`).join("; "):u(r).join("; ")).join("; ").split(";").filter(Boolean).forEach(r=>{let n=r.indexOf(":");if(n===-1)return;let i=r.slice(0,n).trim(),a=r.slice(n+1).trim();if(i){let l=d(i);e.style[l]=a}})}function j(e,t){for(let o of t)o instanceof HTMLElement?e.appendChild(o):e.appendChild(c(o))}function D(e,t){for(let o of u(t))o?.event&&o?.cb&&e.addEventListener(o.event,o.cb)}function c(e){let{tag:t,content:o,text:r,attrs:n,style:i,children:a,parent:l,handleEvent:f,append:E=!0}=e,s=document.createElement(t);return o&&(s.innerHTML=o),r&&(s.textContent=r),n&&g(s,n),i&&S(s,i),a&&j(s,a),f&&D(s,f),E&&(l?L(l):document.body).appendChild(s),s}var p=class{constructor(t){this.options=t,this.elem=c(t)}};0&&(module.exports={DOMElem,createDOMElem});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/utils.ts","../src/createDOMElem.ts","../src/DOMElem.ts"],"sourcesContent":["/**\n * DOMelemJS — a lightweight, zero-dependency library for creating\n * DOM elements from JavaScript/TypeScript.\n *\n * @example\n * ```ts\n * import { createDOMElem, DOMElem } from \"domelemjs\";\n *\n * // Functional API\n * const el = createDOMElem({\n *   tag: \"div\",\n *   text: \"Hello\",\n *   attrs: { id: \"app\" },\n * });\n *\n * // Class API\n * const div = new DOMElem({ tag: \"div\", text: \"World\" });\n * ```\n *\n * @packageDocumentation\n */\n\nexport { default as DOMElem } from \"./DOMElem\";\nexport { default as createDOMElem } from \"./createDOMElem\";\nexport type {\n  CreateDOMElemOptions,\n  DOMElemOptions,\n  EventHandler,\n  StyleInput,\n  AttrsInput,\n  ParentInput,\n  HtmlTag,\n} from \"./types\";\n","/**\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 */\nfunction resolveParent(parent: HTMLElement | string): HTMLElement {\n  if (parent instanceof HTMLElement) return parent;\n  if (parent.charAt(0) === \"#\" || parent.charAt(0) === \".\") {\n    return document.querySelector(parent) as HTMLElement;\n  }\n  return (\n    document.querySelector(`#${parent}`) ||\n    document.querySelector(`.${parent}`) ||\n    document.querySelector(parent)\n  ) 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\"`.\n *\n * @param elem - The target element.\n * @param attrs - Attributes to apply.\n */\nfunction applyAttrs(elem: HTMLElement, attrs: AttrsInput): 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 (key === \"dataset\" && typeof value === \"object\" && !Array.isArray(value)) {\n        Object.assign(elem.dataset, value);\n      } else {\n        const rawValues = Array.isArray(value) ? value : [value];\n        const values = rawValues.map((v) =>\n          NO_SPEC_CHARS_ATTRS.includes(key) ? noSpecChars(String(v)) : 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  } = options;\n\n  const elem = document.createElement(tag);\n\n  if (content) elem.innerHTML = content;\n  if (text) elem.textContent = text;\n  if (attrs) applyAttrs(elem, attrs);\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 } 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 *\n * @example\n * ```ts\n * const div = new DOMElem({\n *   tag: \"div\",\n *   attrs: { class: \"container\" },\n *   text: \"Hello World\",\n * });\n *\n * document.body.appendChild(div.elem);\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  /**\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}\n"],"mappings":"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","names":["index_exports","__export","DOMElem","createDOMElem","__toCommonJS","makeCamelCase","s","part","i","toArray","value","noSpecChars","text","lowercase","map","result","char","replacement","NO_SPEC_CHARS_ATTRS","resolveParent","parent","applyAttrs","elem","attrs","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"]}

package/dist/index.d.cts

@@ -0,0 +1,126 @@
+/** HTML tag name as a string. */
+type HtmlTag = 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;
+}
+/** 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.
+ *
+ * @example
+ * ```ts
+ * const div = new DOMElem({
+ *   tag: "div",
+ *   attrs: { class: "container" },
+ *   text: "Hello World",
+ * });
+ *
+ * document.body.appendChild(div.elem);
+ * ```
+ */
+declare class DOMElem {
+    /** The created HTMLElement. */
+    readonly elem: HTMLElement;
+    /** The options used to create the element. */
+    readonly options: DOMElemOptions;
+    /**
+     * Creates a new DOMElem instance.
+     *
+     * @param options - Element creation options.
+     */
+    constructor(options: DOMElemOptions);
+}
+
+/**
+ * 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, type HtmlTag, type ParentInput, type StyleInput, createDOMElem };

package/dist/index.d.ts

@@ -0,0 +1,126 @@
+/** HTML tag name as a string. */
+type HtmlTag = 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;
+}
+/** 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.
+ *
+ * @example
+ * ```ts
+ * const div = new DOMElem({
+ *   tag: "div",
+ *   attrs: { class: "container" },
+ *   text: "Hello World",
+ * });
+ *
+ * document.body.appendChild(div.elem);
+ * ```
+ */
+declare class DOMElem {
+    /** The created HTMLElement. */
+    readonly elem: HTMLElement;
+    /** The options used to create the element. */
+    readonly options: DOMElemOptions;
+    /**
+     * Creates a new DOMElem instance.
+     *
+     * @param options - Element creation options.
+     */
+    constructor(options: DOMElemOptions);
+}
+
+/**
+ * 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, type HtmlTag, 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 f(e){return e.split("-").map((r,o)=>o>0?r.charAt(0).toUpperCase()+r.slice(1):r).join("")}function c(e){return e==null?[]:Array.isArray(e)?e:[e]}function d(e,r=!1){let o={\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"},t=e;for(let[n,i]of Object.entries(o))t=t.split(n).join(i);return r?t.toLowerCase():t}var E=["class","id"];function O(e){return e instanceof HTMLElement?e:e.charAt(0)==="#"||e.charAt(0)==="."?document.querySelector(e):document.querySelector(`#${e}`)||document.querySelector(`.${e}`)||document.querySelector(e)}function M(e,r){for(let o of c(r))for(let[t,n]of Object.entries(o))if(n!=null)if(t==="checked")e.checked=!!n;else if(t==="dataset"&&typeof n=="object"&&!Array.isArray(n))Object.assign(e.dataset,n);else{let a=(Array.isArray(n)?n:[n]).map(l=>E.includes(t)?d(String(l)):String(l));e.setAttribute(t,a.join(" "))}}function C(e,r){c(r).map(t=>typeof t=="object"&&t!==null?Object.entries(t).map(([n,i])=>`${n}: ${i}`).join("; "):c(t).join("; ")).join("; ").split(";").filter(Boolean).forEach(t=>{let n=t.indexOf(":");if(n===-1)return;let i=t.slice(0,n).trim(),a=t.slice(n+1).trim();if(i){let l=f(i);e.style[l]=a}})}function A(e,r){for(let o of r)o instanceof HTMLElement?e.appendChild(o):e.appendChild(u(o))}function T(e,r){for(let o of c(r))o?.event&&o?.cb&&e.addEventListener(o.event,o.cb)}function u(e){let{tag:r,content:o,text:t,attrs:n,style:i,children:a,parent:l,handleEvent:m,append:y=!0}=e,s=document.createElement(r);return o&&(s.innerHTML=o),t&&(s.textContent=t),n&&M(s,n),i&&C(s,i),a&&A(s,a),m&&T(s,m),y&&(l?O(l):document.body).appendChild(s),s}var p=class{constructor(r){this.options=r,this.elem=u(r)}};export{p as DOMElem,u 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"],"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 */\nfunction resolveParent(parent: HTMLElement | string): HTMLElement {\n  if (parent instanceof HTMLElement) return parent;\n  if (parent.charAt(0) === \"#\" || parent.charAt(0) === \".\") {\n    return document.querySelector(parent) as HTMLElement;\n  }\n  return (\n    document.querySelector(`#${parent}`) ||\n    document.querySelector(`.${parent}`) ||\n    document.querySelector(parent)\n  ) 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\"`.\n *\n * @param elem - The target element.\n * @param attrs - Attributes to apply.\n */\nfunction applyAttrs(elem: HTMLElement, attrs: AttrsInput): 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 (key === \"dataset\" && typeof value === \"object\" && !Array.isArray(value)) {\n        Object.assign(elem.dataset, value);\n      } else {\n        const rawValues = Array.isArray(value) ? value : [value];\n        const values = rawValues.map((v) =>\n          NO_SPEC_CHARS_ATTRS.includes(key) ? noSpecChars(String(v)) : 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  } = options;\n\n  const elem = document.createElement(tag);\n\n  if (content) elem.innerHTML = content;\n  if (text) elem.textContent = text;\n  if (attrs) applyAttrs(elem, attrs);\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 } 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 *\n * @example\n * ```ts\n * const div = new DOMElem({\n *   tag: \"div\",\n *   attrs: { class: \"container\" },\n *   text: \"Hello World\",\n * });\n *\n * document.body.appendChild(div.elem);\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  /**\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}\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","applyAttrs","elem","attrs","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"]}

package/package.json

@@ -1,52 +1,48 @@
-{
-  "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.0",
+  "type": "module",
+  "description": "A lightweight, zero-dependency TypeScript library for dynamically creating HTML elements from JavaScript.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "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": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  }
+}

package/dist/DOMElem.html

@@ -1,142 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-  </head>
-  <body>
-    <script src="./index.js"></script>
-    <script>
-      /* használata */
-
-      let myDOM = {};
-
-      /* 1. Úgy is haszálhatom, hogy változóba hozom létre, és azt appendolom külön */
-
-      myDOM.selectControlContainer = DOMElem.Create({
-        tag: "div",
-        attrs: { class: "első próbálkozás" },
-      });
-
-      document.body.appendChild(myDOM.selectControlContainer);
-
-      /* 2. Úgy is használhatom, hogy a szülőelemet már az Elem létrehozásakor megadom neki, és akkor befűzi oda. */
-
-      function generateOption(options) {
-        return options.map((option) =>
-          DOMElem.Create({
-            tag: "option",
-            text: option,
-          })
-        );
-      }
-
-      let animals = ["Maci", "Nyuszi", "Cica", "Kutya"];
-      let animalOption = generateOption(animals);
-
-      myDOM.selectControl = DOMElem.Create({
-        tag: "label",
-        text: "állatkák:",
-        attrs: { for: "selectControl" },
-        parent: myDOM.selectControlContainer,
-      });
-
-      myDOM.selectControl = DOMElem.Create({
-        tag: "select",
-        attrs: { id: "selectControl" },
-        style: { color: "red" },
-        parent: myDOM.selectControlContainer,
-        children: animalOption,
-      });
-
-      /* 3. Úgy is haszálhatom, hogy egyből appendolom és azt változónak adom */
-
-      let plants = ["Fenyő", "Juhar", "Cédrus", "Mahagóni"];
-
-      myDOM.selectControl = myDOM.selectControl.appendChild(
-        DOMElem.Create({
-          tag: "label",
-          text: "fák:",
-          attrs: { for: "selectControl" },
-          parent: myDOM.selectControlContainer,
-        })
-      );
-      myDOM.selectControl = myDOM.selectControl.appendChild(
-        DOMElem.Create({
-          tag: "select",
-          attrs: { id: "selectControl" },
-          parent: myDOM.selectControlContainer,
-          children: generateOption(plants),
-        })
-      );
-
-      /* Példa egy komplexebb struktúra előállítására */
-
-      myDOM.dateFilterContainer = document.body.appendChild(
-        DOMElem.Create({
-          tag: "div",
-          attrs: { class: "dateFilter-Container", id: "dateFilter-Container" },
-          children: [
-            DOMElem.Create({
-              tag: "div",
-              attrs: {
-                class: "beginDate-container",
-                id: "beginDate-container",
-              },
-              children: [
-                DOMElem.Create({
-                  tag: "label",
-                  attrs: {
-                    class: "beginDate-lable",
-                  },
-                  text: "Kezdő dátum: ",
-                }),
-                DOMElem.Create({
-                  tag: "input",
-                  attrs: {
-                    type: "date",
-                    class: "beginDate",
-                    id: "beginDate",
-                  },
-                  eventStarter: "change",
-                  eventFunction: function (e) {
-                    e.preventDefault();
-                    console.log(this.value);
-                  },
-                }),
-              ],
-            }),
-            DOMElem.Create({
-              tag: "div",
-              attrs: { class: "endDate-container", id: "endDate-container" },
-              children: [
-                DOMElem.Create({
-                  tag: "label",
-                  attrs: {
-                    class: "endDate-lable",
-                  },
-                  text: "Befejező dátum: ",
-                }),
-                DOMElem.Create({
-                  tag: "input",
-                  attrs: {
-                    type: "date",
-                    class: "endDate",
-                    id: "endDate",
-                  },
-                  eventStarter: "change",
-                  eventFunction: function (e) {
-                    e.preventDefault();
-                    console.log(this.value);
-                  },
-                }),
-              ],
-            }),
-          ],
-        })
-      );
-    </script>
-  </body>
-</html>

package/dist/createDOMElem.html

@@ -1,95 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-  </head>
-  <body>
-    <script src="./index.js"></script>
-    <script>
-      const app = createDOMElem({
-        tag: "div",
-        attrs: { id: "app" },
-      });
-
-      /* styling is easy */
-      createDOMElem({
-        tag: h1,
-        text: "Hello World!",
-        parent: app,
-        style: "color: red; background-color: green",
-        attrs: {
-          id: "title1",
-          class: "áéőúóüűöí/*-",
-          dataset: { text: "redText" },
-        },
-      });
-      createDOMElem({
-        tag: h2,
-        text: "It's amazing",
-        parent: app,
-        style: { color: "red", backgroundColor: "pink" },
-        attrs: [
-          {
-            id: "title2",
-          },
-          {
-            dataset: [{ text: "redText" }, { bg: "greenBG" }],
-          },
-        ],
-      });
-      createDOMElem({
-        tag: h3,
-        text: "I can write style as I want to",
-        parent: app,
-        style: ["color: red", "background-color: blue"],
-        attrs: { id: "title3" },
-      });
-      createDOMElem({
-        tag: h4,
-        text: "Awesome",
-        parent: app,
-        style: [{ color: "red" }, { backgroundColor: "green" }],
-        attrs: { id: "title4" },
-      });
-
-      /* creating a select with 2 options and eventHandler */
-      const selector = createDOMElem({
-        tag: select,
-        parent: app,
-        attrs: { id: "selector" },
-        children: [
-          {
-            tag: option,
-            text: "foo",
-            attrs: { value: "foo" },
-          },
-          {
-            tag: option,
-            text: "bar",
-            attrs: { value: "bar" },
-          },
-        ],
-        handleEvent: {
-          event: "change",
-          cb: (e) => console.log(e.target.value),
-        },
-      });
-
-      DOMElem.Create({
-        tag: div,
-        parent: app,
-        children: [
-          DOMElem.Create({
-            tag: label,
-            content: "Write Something",
-            attrs: { for: "inputText" },
-          }),
-          DOMElem.Create({ tag: "input", attrs: { id: "inputText" } }),
-        ],
-      });
-    </script>
-  </body>
-</html>