v1.2.4

patelka2211 · Jul 12, 2023 · 651b2a3 · 651b2a3
1 parent b01bfb4
commit 651b2a3
Show file tree

Hide file tree

Showing 34 changed files with 279 additions and 194 deletions.
diff --git a/Dominar.js b/Dominar.js
diff --git a/README.md b/README.md
@@ -13,23 +13,20 @@ Visit [https://patelka2211.github.io/dominar/](https://patelka2211.github.io/dom
 ## Installation
 
 [![npm (scoped)](https://img.shields.io/npm/v/@patelka2211/dominar)](https://www.npmjs.com/package/@patelka2211/dominar)
-[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@patelka2211/dominar)](https://bundlephobia.com/package/@patelka2211/dominar@1.2.3)
+[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@patelka2211/dominar)](https://bundlephobia.com/package/@patelka2211/dominar@1.2.4)
 [![npm](https://img.shields.io/npm/dy/@patelka2211/dominar)](https://www.npmjs.com/package/@patelka2211/dominar)
-[![jsDelivr hits (npm scoped)](https://img.shields.io/jsdelivr/gh/hy/patelka2211/dominar)](https://cdn.jsdelivr.net/gh/patelka2211/dominar@1.2.3/)
+[![jsDelivr hits (npm scoped)](https://img.shields.io/jsdelivr/gh/hy/patelka2211/dominar)](https://cdn.jsdelivr.net/gh/patelka2211/dominar@1.2.4/)
 
 To install Dominar using npm, run the following command:
 
 ```sh
 npm i @patelka2211/dominar
 ```
 
-Alternatively, you can include [Dominar's IIFE file](https://cdn.jsdelivr.net/gh/patelka2211/dominar@1.2.3/Dominar.js) in your website using a `<script>` tag:
+Alternatively, you can include [Dominar's IIFE file](https://cdn.jsdelivr.net/gh/patelka2211/dominar@1.2.4/Dominar.js) in your website using a `<script>` tag:
 
 ```html
-<script
-    async
-    src="https://cdn.jsdelivr.net/gh/patelka2211/dominar@1.2.3/Dominar.js"
-></script>
+<script src="https://cdn.jsdelivr.net/gh/patelka2211/dominar@1.2.4/Dominar.js"></script>
 ```
 
 ## Examples
@@ -91,13 +88,10 @@ addEventListeners(document.body, {
 
 ### When included as a `<script>` tag in a website.
 
-If the script tag is not already included in the `<head>` tag, please add the following script tag to include [Dominar's IIFE JavaScript](https://cdn.jsdelivr.net/gh/patelka2211/dominar@1.2.3/Dominar.js) file.
+If the script tag is not already included in the `<head>` tag, please add the following script tag to include [Dominar's IIFE JavaScript](https://cdn.jsdelivr.net/gh/patelka2211/dominar@1.2.4/Dominar.js) file.
 
 ```html
-<script
-    async
-    src="https://cdn.jsdelivr.net/gh/patelka2211/dominar@1.2.3/Dominar.js"
-></script>
+<script src="https://cdn.jsdelivr.net/gh/patelka2211/dominar@1.2.4/Dominar.js"></script>
 ```
 
 ```html

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patelka2211/dominar",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Dominar is a powerful library designed to make it easy for developers to manipulate the Document Object Model (DOM) and create dynamic HTML content. Dominar empowers you to take control of your web development projects like a pro. Unleash the power to dominate the DOM with Dominar.",
   "main": "index.js",
   "module": "index.js",
@@ -11,6 +11,7 @@
     "rollup-iife": "rollup -c --environment format:iife",
     "terser-esm": "terser ./index.js -c -m --toplevel -o ./index.js",
     "terser-iife": "terser ./Dominar.js -c -m -o ./Dominar.js",
+    "prerelease-build": "npm run tsc-build && npm run rollup-esm && npm run rollup-iife && rm -rf ./lib/",
     "build": "npm run tsc-build && npm run rollup-esm && npm run rollup-iife && npm run terser-esm && npm run terser-iife && rm -rf ./lib/",
     "test-build": "npm run tsc-build && npm run rollup-esm && tsc ./test/index.ts -t es6 && rollup ./test/index.js -o ./test/out.js && rm -rf ./lib/"
   },

diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -21,7 +21,7 @@ export default [
         output: {
             file: "index.js",
             format: "es",
-            banner: `${banner}'use strict';`,
+            banner: `"use strict";`,
         },
     },
     process.env.format === "esm" && {

diff --git a/src/attributes/setAttributes.ts b/src/attributes/setAttributes.ts
@@ -1,15 +1,14 @@
-import { DominarTagAttributes } from "./types";
+import { DominarTagAttributesType } from "./types";
 
 /**
- * Sets the attributes of an HTML element based on the provided object.
- *
- * @param {HTMLElement} element The HTML element to set the attributes on.
- * @param {Object} attributes An object containing the attribute names and values to set.
- * @returns {HTMLElement} The same HTML element with the updated attributes.
+ * Sets the attributes of an HTML element.
+ * @param {HTMLElement} element - The HTML element.
+ * @param {DominarTagAttributesType} attributes - The attributes to be set.
+ * @returns {HTMLElement} The modified HTML element.
  */
 export function setAttributes(
     element: HTMLElement,
-    attributes: DominarTagAttributes
+    attributes: DominarTagAttributesType
 ): HTMLElement {
     for (const attributeName in attributes) {
         if (Object.prototype.hasOwnProperty.call(attributes, attributeName)) {

diff --git a/src/attributes/types.ts b/src/attributes/types.ts
@@ -1,3 +1,6 @@
-export type DominarTagAttributes = {
+/**
+ * Represents the attributes of a Dominar tag.
+ */
+export type DominarTagAttributesType = {
     [attributeName: string]: string | number | true;
 };
diff --git a/src/children/insertChildren.ts b/src/children/insertChildren.ts
@@ -1,38 +1,41 @@
-import { isInstanceOfDominarTag } from "../tag/isInstanceOfDominarTag";
-import { isInstanceOfDominarTagList } from "../tagList/isInstanceOfDominarTagList";
 import { isInstanceOfParsedSVG } from "../svg-parser/isInstanceOfparsedSVG";
 import { parsedSVG } from "../svg-parser/parsedSVG";
 import { DominarTag } from "../tag/DominarTag";
-import { DominarTagChildren, childrenInsertType } from "../tag/types";
+import { isInstanceOfDominarTag } from "../tag/isInstanceOfDominarTag";
+import { DominarTagChildrenType, childrenInsertType } from "../tag/types";
 import { DominarTagList } from "../tagList/DominarTagList";
+import { isInstanceOfDominarTagList } from "../tagList/isInstanceOfDominarTagList";
 
 /**
  * Inserts children into an HTML element.
- * @param {HTMLElement} root The root HTML element where the children will be inserted.
- * @param {DominarTagChildren} children The children to be inserted.
- * @param {childrenInsertType} [insertType="append"] The type of insertion. Default is "append".
+ * @param {HTMLElement} root - The root HTML element.
+ * @param {DominarTagChildrenType} children - The children to be inserted.
+ * @param {childrenInsertType} [insertType] - The type of insertion ("prepend" or "append").
  * @returns {HTMLElement} The modified root HTML element.
  */
 export function insertChildren(
     root: HTMLElement,
-    children: DominarTagChildren,
+    children: DominarTagChildrenType,
     insertType: childrenInsertType = "append"
 ): HTMLElement {
     if (typeof children === "string" || typeof children === "number")
         root[insertType](String(children));
     else if (isInstanceOfDominarTag(children))
         root[insertType]((children as DominarTag).renderedTag);
-    else if (isInstanceOfDominarTagList(children)) {
-        let renderedTagList = (children as DominarTagList).renderedTagList,
-            tagListLength = renderedTagList.length;
-        for (let index = 0; index < tagListLength; index++) {
+    else if (isInstanceOfDominarTagList(children))
+        for (
+            let renderedTagList = (children as DominarTagList).renderedTagList,
+                tagListLength = renderedTagList.length,
+                index = 0;
+            index < tagListLength;
+            index++
+        )
             root[insertType](
                 renderedTagList[
                     insertType === "append" ? index : tagListLength - 1 - index
                 ]
             );
-        }
-    } else if (
+    else if (
         isInstanceOfParsedSVG(children) &&
         (children as parsedSVG).svg !== null
     )

diff --git a/src/eventListeners/addEventListeners.ts b/src/eventListeners/addEventListeners.ts
@@ -1,15 +1,14 @@
-import { DominarTagEventListeners } from "./types";
+import { DominarTagEventListenersType } from "./types";
 
 /**
- * Adds the specified event listeners to an HTML element.
- *
- * @param {HTMLElement} element The HTML element to add event listeners to.
- * @param {Object.<string, function>} eventListeners An object containing event listener functions keyed by event type.
- * @returns {HTMLElement} The same HTML element with the added event listeners.
+ * Adds event listeners to an HTML element.
+ * @param {HTMLElement} element - The HTML element.
+ * @param {DominarTagEventListenersType} eventListeners - The event listeners to be added.
+ * @returns {HTMLElement} The modified HTML element.
  */
 export function addEventListeners(
     element: HTMLElement,
-    eventListeners: DominarTagEventListeners
+    eventListeners: DominarTagEventListenersType
 ): HTMLElement {
     Object.entries(eventListeners).forEach(([type, listener]) => {
         element.addEventListener(type, listener as (ev: Event) => void);

diff --git a/src/eventListeners/attachEventListeners.ts b/src/eventListeners/attachEventListeners.ts
@@ -0,0 +1,17 @@
+import { attachListenerHelper } from "../helper/attachListener";
+import { DominarTagEventListenersType } from "./types";
+
+/**
+ * Attaches event listeners to an HTML element.
+ * @param {HTMLElement} element - The HTML element.
+ * @param {DominarTagEventListenersType} eventListeners - The event listeners to be attached.
+ * @returns {void}
+ */
+export function attachEventListeners(
+    element: HTMLElement,
+    eventListeners: DominarTagEventListenersType
+): void {
+    Object.entries(eventListeners).forEach(([type, listener]) => {
+        attachListenerHelper(element, type, listener);
+    });
+}
diff --git a/src/eventListeners/detachEventListeners.ts b/src/eventListeners/detachEventListeners.ts
@@ -0,0 +1,22 @@
+import { detachListenerHelper } from "../helper/detachListener";
+import { DominarEventListenersTypes } from "./types";
+
+/**
+ * Detaches event listeners from an HTML element.
+ * @param {HTMLElement} element - The HTML element.
+ * @param {DominarEventListenersTypes | DominarEventListenersTypes[]} eventListenerTypes - The type(s) of event listeners to be detached.
+ * @returns {void}
+ */
+export function detachEventListeners(
+    element: HTMLElement,
+    eventListenerTypes:
+        | DominarEventListenersTypes
+        | DominarEventListenersTypes[]
+): void {
+    if (typeof eventListenerTypes === "string")
+        detachListenerHelper(document.body, eventListenerTypes);
+    else if (typeof eventListenerTypes === "object")
+        eventListenerTypes.forEach((type) => {
+            detachListenerHelper(element, type);
+        });
+}
diff --git a/src/eventListeners/removeEventListeners.ts b/src/eventListeners/removeEventListeners.ts
@@ -1,15 +1,14 @@
-import { DominarTagEventListeners } from "./types";
+import { DominarTagEventListenersType } from "./types";
 
 /**
- * Removes the specified event listeners from an HTML element.
- *
- * @param {HTMLElement} element The HTML element to remove event listeners from.
- * @param {Object.<string, function>} eventListeners An object containing event listener functions keyed by event type.
- * @returns {HTMLElement} The same HTML element with the added event listeners.
+ * Removes event listeners from an HTML element.
+ * @param {HTMLElement} element - The HTML element.
+ * @param {DominarTagEventListenersType} eventListeners - The event listeners to be removed.
+ * @returns {HTMLElement} The modified HTML element.
  */
 export function removeEventListeners(
     element: HTMLElement,
-    eventListeners: DominarTagEventListeners
+    eventListeners: DominarTagEventListenersType
 ): HTMLElement {
     Object.entries(eventListeners).forEach(([type, listener]) => {
         element.removeEventListener(type, listener as (ev: Event) => void);

diff --git a/src/eventListeners/types.ts b/src/eventListeners/types.ts
@@ -1,3 +1,11 @@
-export type DominarTagEventListeners = {
+/**
+ * Represents the event listeners of a Dominar tag.
+ */
+export type DominarTagEventListenersType = {
     [K in keyof HTMLElementEventMap]?: (ev: HTMLElementEventMap[K]) => void;
 };
+
+/**
+ * Represents the types of event listeners supported by HTMLElementEventMap.
+ */
+export type DominarEventListenersTypes = keyof HTMLElementEventMap;
diff --git a/src/helper/attachListener.js b/src/helper/attachListener.js
@@ -0,0 +1,3 @@
+export function attachListenerHelper(element, type, listener) {
+    element[`on${type}`] = listener;
+}