From b01bfb4728f452ffa57f4f9d7c14a91843f1da1c Mon Sep 17 00:00:00 2001 From: Kartavya Patel <82671701+patelka2211@users.noreply.github.com> Date: Wed, 5 Jul 2023 19:27:01 +0530 Subject: [PATCH] v1.2.3 --- Dominar.js | 4 +- README.md | 12 +- package-lock.json | 4 +- package.json | 4 +- .../setAttributes.ts} | 7 +- src/attributes/types.ts | 3 + src/children/insertChildren.ts | 42 +++++ src/eventListeners.ts | 37 ---- src/eventListeners/addEventListeners.ts | 18 ++ src/eventListeners/removeEventListeners.ts | 18 ++ src/eventListeners/types.ts | 3 + src/index.ts | 16 +- src/{render.ts => render/index.ts} | 15 +- src/render/types.ts | 6 + src/svg-parser/index.ts | 13 ++ src/svg-parser/isInstanceOfparsedSVG.ts | 10 + src/{svgParser.ts => svg-parser/parsedSVG.ts} | 14 +- src/tag/DominarTag.ts | 49 +++++ src/tag/index.ts | 23 +++ src/tag/isInstanceOfDominarTag.ts | 10 + src/tag/types.ts | 21 +++ src/tagList/DominarTagList.ts | 36 ++++ src/tagList/index.ts | 11 ++ src/tagList/isInstanceOfDominarTagList.ts | 10 + src/tagList/types.ts | 10 + src/tags.ts | 172 ------------------ tsconfig.json | 1 - 27 files changed, 316 insertions(+), 253 deletions(-) rename src/{attributes.ts => attributes/setAttributes.ts} (86%) create mode 100644 src/attributes/types.ts create mode 100644 src/children/insertChildren.ts delete mode 100644 src/eventListeners.ts create mode 100644 src/eventListeners/addEventListeners.ts create mode 100644 src/eventListeners/removeEventListeners.ts create mode 100644 src/eventListeners/types.ts rename src/{render.ts => render/index.ts} (82%) create mode 100644 src/render/types.ts create mode 100644 src/svg-parser/index.ts create mode 100644 src/svg-parser/isInstanceOfparsedSVG.ts rename src/{svgParser.ts => svg-parser/parsedSVG.ts} (70%) create mode 100644 src/tag/DominarTag.ts create mode 100644 src/tag/index.ts create mode 100644 src/tag/isInstanceOfDominarTag.ts create mode 100644 src/tag/types.ts create mode 100644 src/tagList/DominarTagList.ts create mode 100644 src/tagList/index.ts create mode 100644 src/tagList/isInstanceOfDominarTagList.ts create mode 100644 src/tagList/types.ts delete mode 100644 src/tags.ts diff --git a/Dominar.js b/Dominar.js index fcbdbe7..615f877 100644 --- a/Dominar.js +++ b/Dominar.js @@ -1,7 +1,7 @@ /** * **Dominar** from KPVERSE * - * Updated on June 23, 2023. + * Updated on July 5, 2023. * * Copyright © 2023-present, Kartavya Patel. All rights reserved. * @@ -9,4 +9,4 @@ * * @license {@link https://github.com/patelka2211/dominar/blob/main/LICENSE MIT} */ -!function(){"use strict";function e(e,n){for(var t in n)if(Object.prototype.hasOwnProperty.call(n,t)){var r=n[t];"string"==typeof r||"number"==typeof r?e.setAttribute(t,""===r?" ":String(r)):e.setAttribute(t,"")}return e}function n(e,n){return Object.entries(n).forEach((function(n){var t=n[0],r=n[1];e.addEventListener(t,r)})),e}var t=function(e){var n,t=(new DOMParser).parseFromString(e,"image/svg+xml");this.svg=t.querySelector("svg"),null!==(null===(n=this.svg)||void 0===n?void 0:n.querySelector("parsererror"))&&(this.svg=null)};function r(e,n,r){if(void 0===r&&(r="append"),"string"==typeof n||"number"==typeof n)e[r](String(n));else if(n instanceof i)e[r](n.renderedTag);else if(n instanceof o)for(var a=n.renderedTagList,s=a.length,u=0;u0&&i[i.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!i||s[1]>i[0]&&s[1]0&&i[i.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!i||s[1]>i[0]&&s[1]` tag: +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 ` ``` @@ -91,12 +91,12 @@ addEventListeners(document.body, { ### When included as a ` ``` diff --git a/package-lock.json b/package-lock.json index b03112d..9e2704a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@patelka2211/dominar", - "version": "1.2.2", + "version": "1.2.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@patelka2211/dominar", - "version": "1.2.2", + "version": "1.2.3", "license": "MIT", "devDependencies": { "rollup": "^3.25.1", diff --git a/package.json b/package.json index 4512c8f..cce8524 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@patelka2211/dominar", - "version": "1.2.2", + "version": "1.2.3", "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", @@ -9,7 +9,7 @@ "tsc-build": "tsc -p ./tsconfig.json", "rollup-esm": "rollup -c --environment format:esm", "rollup-iife": "rollup -c --environment format:iife", - "terser-esm": "terser ./index.js -c -m -o ./index.js", + "terser-esm": "terser ./index.js -c -m --toplevel -o ./index.js", "terser-iife": "terser ./Dominar.js -c -m -o ./Dominar.js", "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/src/attributes.ts b/src/attributes/setAttributes.ts similarity index 86% rename from src/attributes.ts rename to src/attributes/setAttributes.ts index 1868489..db3e185 100644 --- a/src/attributes.ts +++ b/src/attributes/setAttributes.ts @@ -1,4 +1,5 @@ -type DominarTagAttributes = { [attributeName: string]: string | number | true }; +import { DominarTagAttributes } from "./types"; + /** * Sets the attributes of an HTML element based on the provided object. * @@ -6,7 +7,7 @@ type DominarTagAttributes = { [attributeName: string]: string | number | true }; * @param {Object} attributes An object containing the attribute names and values to set. * @returns {HTMLElement} The same HTML element with the updated attributes. */ -function setAttributes( +export function setAttributes( element: HTMLElement, attributes: DominarTagAttributes ): HTMLElement { @@ -26,5 +27,3 @@ function setAttributes( } return element; } - -export { DominarTagAttributes, setAttributes }; diff --git a/src/attributes/types.ts b/src/attributes/types.ts new file mode 100644 index 0000000..d68e533 --- /dev/null +++ b/src/attributes/types.ts @@ -0,0 +1,3 @@ +export type DominarTagAttributes = { + [attributeName: string]: string | number | true; +}; diff --git a/src/children/insertChildren.ts b/src/children/insertChildren.ts new file mode 100644 index 0000000..6eda894 --- /dev/null +++ b/src/children/insertChildren.ts @@ -0,0 +1,42 @@ +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 { DominarTagList } from "../tagList/DominarTagList"; + +/** + * 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". + * @returns {HTMLElement} The modified root HTML element. + */ +export function insertChildren( + root: HTMLElement, + children: DominarTagChildren, + 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++) { + root[insertType]( + renderedTagList[ + insertType === "append" ? index : tagListLength - 1 - index + ] + ); + } + } else if ( + isInstanceOfParsedSVG(children) && + (children as parsedSVG).svg !== null + ) + root[insertType]((children as parsedSVG).svg as SVGSVGElement); + else if (children instanceof HTMLElement) root[insertType](children); + return root; +} diff --git a/src/eventListeners.ts b/src/eventListeners.ts deleted file mode 100644 index 9a1cd39..0000000 --- a/src/eventListeners.ts +++ /dev/null @@ -1,37 +0,0 @@ -type DominarTagEventListeners = { - [K in keyof HTMLElementEventMap]?: (ev: HTMLElementEventMap[K]) => void; -}; -/** - * Adds the specified event listeners to an HTML element. - * - * @param {HTMLElement} element The HTML element to add event listeners to. - * @param {Object.} eventListeners An object containing event listener functions keyed by event type. - * @returns {HTMLElement} The same HTML element with the added event listeners. - */ -function addEventListeners( - element: HTMLElement, - eventListeners: DominarTagEventListeners -): HTMLElement { - Object.entries(eventListeners).forEach(([type, listener]) => { - element.addEventListener(type, listener as (ev: Event) => void); - }); - return element; -} -/** - * Removes the specified event listeners from an HTML element. - * - * @param {HTMLElement} element The HTML element to remove event listeners from. - * @param {Object.} eventListeners An object containing event listener functions keyed by event type. - * @returns {HTMLElement} The same HTML element with the added event listeners. - */ -function removeEventListeners( - element: HTMLElement, - eventListeners: DominarTagEventListeners -): HTMLElement { - Object.entries(eventListeners).forEach(([type, listener]) => { - element.removeEventListener(type, listener as (ev: Event) => void); - }); - return element; -} - -export { DominarTagEventListeners, addEventListeners, removeEventListeners }; diff --git a/src/eventListeners/addEventListeners.ts b/src/eventListeners/addEventListeners.ts new file mode 100644 index 0000000..a8887f3 --- /dev/null +++ b/src/eventListeners/addEventListeners.ts @@ -0,0 +1,18 @@ +import { DominarTagEventListeners } from "./types"; + +/** + * Adds the specified event listeners to an HTML element. + * + * @param {HTMLElement} element The HTML element to add event listeners to. + * @param {Object.} eventListeners An object containing event listener functions keyed by event type. + * @returns {HTMLElement} The same HTML element with the added event listeners. + */ +export function addEventListeners( + element: HTMLElement, + eventListeners: DominarTagEventListeners +): HTMLElement { + Object.entries(eventListeners).forEach(([type, listener]) => { + element.addEventListener(type, listener as (ev: Event) => void); + }); + return element; +} diff --git a/src/eventListeners/removeEventListeners.ts b/src/eventListeners/removeEventListeners.ts new file mode 100644 index 0000000..2976d96 --- /dev/null +++ b/src/eventListeners/removeEventListeners.ts @@ -0,0 +1,18 @@ +import { DominarTagEventListeners } from "./types"; + +/** + * Removes the specified event listeners from an HTML element. + * + * @param {HTMLElement} element The HTML element to remove event listeners from. + * @param {Object.} eventListeners An object containing event listener functions keyed by event type. + * @returns {HTMLElement} The same HTML element with the added event listeners. + */ +export function removeEventListeners( + element: HTMLElement, + eventListeners: DominarTagEventListeners +): HTMLElement { + Object.entries(eventListeners).forEach(([type, listener]) => { + element.removeEventListener(type, listener as (ev: Event) => void); + }); + return element; +} diff --git a/src/eventListeners/types.ts b/src/eventListeners/types.ts new file mode 100644 index 0000000..b285cb8 --- /dev/null +++ b/src/eventListeners/types.ts @@ -0,0 +1,3 @@ +export type DominarTagEventListeners = { + [K in keyof HTMLElementEventMap]?: (ev: HTMLElementEventMap[K]) => void; +}; diff --git a/src/index.ts b/src/index.ts index 5b9649c..906544b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,11 @@ -export { insertChildren, tag, tagList } from "./tags"; -export { render } from "./render"; -export { setAttributes } from "./attributes"; -export { addEventListeners, removeEventListeners } from "./eventListeners"; -export { SVGParser } from "./svgParser"; +export { setAttributes } from "./attributes/setAttributes"; +export { insertChildren } from "./children/insertChildren"; +export { addEventListeners } from "./eventListeners/addEventListeners"; +export { removeEventListeners } from "./eventListeners/removeEventListeners"; +export { isInstanceOfDominarTag } from "./tag/isInstanceOfDominarTag"; +export { isInstanceOfDominarTagList } from "./tagList/isInstanceOfDominarTagList"; +export { isInstanceOfParsedSVG } from "./svg-parser/isInstanceOfparsedSVG"; +export { render } from "./render/index"; +export { SVGParser } from "./svg-parser/index"; +export { tag } from "./tag/index"; +export { tagList } from "./tagList/index"; diff --git a/src/render.ts b/src/render/index.ts similarity index 82% rename from src/render.ts rename to src/render/index.ts index 1d78c58..b372a42 100644 --- a/src/render.ts +++ b/src/render/index.ts @@ -1,8 +1,7 @@ -import { DominarTagChildren, insertChildren, childrenInsertType } from "./tags"; -type RenderOptions = { - clearBeforeRender?: boolean; - insertType?: childrenInsertType; -}; +import { insertChildren } from "../children/insertChildren"; +import { DominarTagChildren } from "../tag/types"; +import { RenderOptions } from "./types"; + /** * Renders a DOM element or a list of elements to a specified HTML element. * @@ -14,7 +13,7 @@ type RenderOptions = { * @returns {Promise} A Promise that resolves when the rendering is complete. * @throws {Error} If the root parameter is null or undefined. */ -async function render( +export async function render( root: HTMLElement, children: DominarTagChildren, options: RenderOptions = { @@ -30,7 +29,7 @@ async function render( insertType = "append"; } - if (insertType === undefined) insertType = "append"; + if (!insertType) insertType = "append"; if (insertType !== "append" && insertType !== "prepend") throw Error( @@ -38,5 +37,3 @@ async function render( ); insertChildren(root, children, insertType); } - -export { render }; diff --git a/src/render/types.ts b/src/render/types.ts new file mode 100644 index 0000000..839e0cc --- /dev/null +++ b/src/render/types.ts @@ -0,0 +1,6 @@ +import { childrenInsertType } from "../tag/types"; + +export type RenderOptions = { + clearBeforeRender?: boolean; + insertType?: childrenInsertType; +}; diff --git a/src/svg-parser/index.ts b/src/svg-parser/index.ts new file mode 100644 index 0000000..ee3dc02 --- /dev/null +++ b/src/svg-parser/index.ts @@ -0,0 +1,13 @@ +import { parsedSVG } from "./parsedSVG"; + +/** + * Parses an SVG string and returns a parsedSVG instance. + * @function + * @param {string} svgString The SVG string to be parsed. + * @returns {parsedSVG} The parsed SVG. + */ +export function SVGParser(svgString: string): parsedSVG { + return new parsedSVG(svgString); +} + +// export { parsedSVG, SVGParser }; diff --git a/src/svg-parser/isInstanceOfparsedSVG.ts b/src/svg-parser/isInstanceOfparsedSVG.ts new file mode 100644 index 0000000..5ffd4ec --- /dev/null +++ b/src/svg-parser/isInstanceOfparsedSVG.ts @@ -0,0 +1,10 @@ +import { parsedSVG } from "./parsedSVG"; + +/** + * Checks if the given object is an instance of `parsedSVG` object. + * @param object An object which is going to be checked. + * @returns `true` if the object is an instance of `parsedSVG`, `false` otherwise. + */ +export function isInstanceOfParsedSVG(object: unknown) { + return object instanceof parsedSVG; +} diff --git a/src/svgParser.ts b/src/svg-parser/parsedSVG.ts similarity index 70% rename from src/svgParser.ts rename to src/svg-parser/parsedSVG.ts index 87866af..78484c8 100644 --- a/src/svgParser.ts +++ b/src/svg-parser/parsedSVG.ts @@ -1,7 +1,7 @@ /** * Represents a parsed SVG. */ -class parsedSVG { +export class parsedSVG { /** * The root SVG element of the parsed SVG. * @type {SVGSVGElement | null} @@ -27,15 +27,3 @@ class parsedSVG { if (this.svg?.querySelector("parsererror") !== null) this.svg = null; } } - -/** - * Parses an SVG string and returns a parsedSVG instance. - * @function - * @param {string} svgString The SVG string to be parsed. - * @returns {parsedSVG} The parsed SVG. - */ -function SVGParser(svgString: string): parsedSVG { - return new parsedSVG(svgString); -} - -export { parsedSVG, SVGParser }; diff --git a/src/tag/DominarTag.ts b/src/tag/DominarTag.ts new file mode 100644 index 0000000..98bca31 --- /dev/null +++ b/src/tag/DominarTag.ts @@ -0,0 +1,49 @@ +import { setAttributes } from "../attributes/setAttributes"; +import { insertChildren } from "../children/insertChildren"; +import { addEventListeners } from "../eventListeners/addEventListeners"; +import { DominarTagData } from "./types"; + +/** + * Represents a DOM element wrapped in a DominarTag. + */ +export class DominarTag { + /** + * The rendered DOM element of the tag. + * @type {HTMLElement} + */ + public renderedTag: HTMLElement; + + /** + * Creates an instance of the DominarTag class. + * @param {string} tagName The name of the tag to create. + * @param {DominarTagData} [tagData] Optional data for initializing the tag. + */ + constructor(tagName: string, tagData?: DominarTagData) { + this.renderedTag = document.createElement(tagName); + + if (tagData) { + let { attributes, children, eventListeners } = tagData; + + // Set attributes + if (attributes) setAttributes(this.renderedTag, attributes); + + // Append children + if (children) insertChildren(this.renderedTag, children); + + // Add event listeners + if (eventListeners) + addEventListeners(this.renderedTag, eventListeners); + } + } + + /** + * Executes an additional action on the rendered HTML element. + * + * @param {function} performAction A callback function that performs the action on the HTML element. The function takes an `HTMLElement` as its argument and does not return any value. + * @returns {DominarTag} The current instance of the DominarTag, allowing for method chaining. + */ + additionally(performAction: (tag: HTMLElement) => void): DominarTag { + performAction(this.renderedTag); + return this; + } +} diff --git a/src/tag/index.ts b/src/tag/index.ts new file mode 100644 index 0000000..4f7d2e5 --- /dev/null +++ b/src/tag/index.ts @@ -0,0 +1,23 @@ +import { DominarTag } from "./DominarTag"; +import { DominarTagData } from "./types"; + +/** Creates a new DominarTag instance with the specified tag name and optional tag data. + * + * @param {string} tagName The name of the tag. + * @param {DominarTagData} [tagData] Optional tag data. + * @returns {DominarTag} A new DominarTag instance. + */ +export function tag( + tagName: K, + tagData?: DominarTagData +): DominarTag; +export function tag(tagName: string, tagData?: DominarTagData): DominarTag; +/** Creates a new DominarTag instance with the specified tag name and optional tag data. + * + * @param {string} tagName The name of the tag. + * @param {DominarTagData} [tagData] Optional tag data. + * @returns {DominarTag} A new DominarTag instance. + */ +export function tag(tagName: string, tagData?: DominarTagData): DominarTag { + return new DominarTag(tagName, tagData); +} diff --git a/src/tag/isInstanceOfDominarTag.ts b/src/tag/isInstanceOfDominarTag.ts new file mode 100644 index 0000000..573ec7d --- /dev/null +++ b/src/tag/isInstanceOfDominarTag.ts @@ -0,0 +1,10 @@ +import { DominarTag } from "./DominarTag"; + +/** + * Checks if the given object is an instance of `DominarTag` object. + * @param object An object which is going to be checked. + * @returns `true` if the object is an instance of `DominarTag`, `false` otherwise. + */ +export function isInstanceOfDominarTag(object: unknown) { + return object instanceof DominarTag; +} diff --git a/src/tag/types.ts b/src/tag/types.ts new file mode 100644 index 0000000..c4f9608 --- /dev/null +++ b/src/tag/types.ts @@ -0,0 +1,21 @@ +import { DominarTagAttributes } from "../attributes/types"; +import { DominarTagEventListeners } from "../eventListeners/types"; +import { parsedSVG } from "../svg-parser/parsedSVG"; +import { DominarTagList } from "../tagList/DominarTagList"; +import { DominarTag } from "./DominarTag"; + +export type childrenInsertType = "prepend" | "append"; + +export type DominarTagChildren = + | string + | number + | DominarTag + | DominarTagList + | parsedSVG + | HTMLElement; + +export type DominarTagData = { + attributes?: DominarTagAttributes; + children?: DominarTagChildren; + eventListeners?: DominarTagEventListeners; +}; diff --git a/src/tagList/DominarTagList.ts b/src/tagList/DominarTagList.ts new file mode 100644 index 0000000..a883d28 --- /dev/null +++ b/src/tagList/DominarTagList.ts @@ -0,0 +1,36 @@ +import { isInstanceOfDominarTag } from "../tag/isInstanceOfDominarTag"; +import { isInstanceOfParsedSVG } from "../svg-parser/isInstanceOfparsedSVG"; +import { parsedSVG } from "../svg-parser/parsedSVG"; +import { DominarTag } from "../tag/DominarTag"; +import { DominarTagListData } from "./types"; + +/** + * Represents a list of rendered HTML tags. + */ +export class DominarTagList { + /** + * The array of rendered tags, which can be either strings or HTML elements. + */ + public renderedTagList: (string | HTMLElement | SVGSVGElement)[] = []; + + /** + * Constructs a new instance of the DominarTagList class. + * @param {DominarTagListData} tags The initial list of tags. + */ + constructor(tags: DominarTagListData) { + tags.forEach((tag) => { + if (typeof tag === "string" || typeof tag === "number") + this.renderedTagList.push(String(tag)); + else if (isInstanceOfDominarTag(tag)) + this.renderedTagList.push((tag as DominarTag).renderedTag); + else if ( + isInstanceOfParsedSVG(tag) && + (tag as parsedSVG).svg !== null + ) + this.renderedTagList.push( + (tag as parsedSVG).svg as SVGSVGElement + ); + else if (tag instanceof HTMLElement) this.renderedTagList.push(tag); + }); + } +} diff --git a/src/tagList/index.ts b/src/tagList/index.ts new file mode 100644 index 0000000..5d48196 --- /dev/null +++ b/src/tagList/index.ts @@ -0,0 +1,11 @@ +import { DominarTagList } from "./DominarTagList"; +import { DominarTagListData } from "./types"; + +/** + * Returns a new instance of DominarTagList that contains the given tags. + * @param tags An array of tags to include in the DominarTagList. + * @returns A new instance of DominarTagList. + */ +export function tagList(...tags: DominarTagListData): DominarTagList { + return new DominarTagList(tags); +} diff --git a/src/tagList/isInstanceOfDominarTagList.ts b/src/tagList/isInstanceOfDominarTagList.ts new file mode 100644 index 0000000..d9bd146 --- /dev/null +++ b/src/tagList/isInstanceOfDominarTagList.ts @@ -0,0 +1,10 @@ +import { DominarTagList } from "./DominarTagList"; + +/** + * Checks if the given object is an instance of `DominarTagList` object. + * @param object An object which is going to be checked. + * @returns `true` if the object is an instance of `DominarTagList`, `false` otherwise. + */ +export function isInstanceOfDominarTagList(object: unknown) { + return object instanceof DominarTagList; +} diff --git a/src/tagList/types.ts b/src/tagList/types.ts new file mode 100644 index 0000000..fe26649 --- /dev/null +++ b/src/tagList/types.ts @@ -0,0 +1,10 @@ +import { parsedSVG } from "../svg-parser/parsedSVG"; +import { DominarTag } from "../tag/DominarTag"; + +export type DominarTagListData = ( + | string + | number + | DominarTag + | parsedSVG + | HTMLElement +)[]; diff --git a/src/tags.ts b/src/tags.ts deleted file mode 100644 index a73537f..0000000 --- a/src/tags.ts +++ /dev/null @@ -1,172 +0,0 @@ -import { DominarTagAttributes, setAttributes } from "./attributes"; -import { DominarTagEventListeners, addEventListeners } from "./eventListeners"; -import { parsedSVG } from "./svgParser"; - -type childrenInsertType = "prepend" | "append"; - -type DominarTagChildren = - | string - | number - | DominarTag - | DominarTagList - | parsedSVG - | HTMLElement; - -/** - * 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". - * @returns {HTMLElement} The modified root HTML element. - */ -function insertChildren( - root: HTMLElement, - children: DominarTagChildren, - insertType: childrenInsertType = "append" -): HTMLElement { - if (typeof children === "string" || typeof children === "number") - root[insertType](String(children)); - else if (children instanceof DominarTag) - root[insertType](children.renderedTag); - else if (children instanceof DominarTagList) { - let renderedTagList = children.renderedTagList, - tagListLength = renderedTagList.length; - for (let index = 0; index < tagListLength; index++) { - root[insertType]( - renderedTagList[ - insertType === "append" ? index : tagListLength - 1 - index - ] - ); - } - } else if (children instanceof parsedSVG && children.svg !== null) - root[insertType](children.svg); - else if (children instanceof HTMLElement) root[insertType](children); - return root; -} - -type DominarTagData = { - attributes?: DominarTagAttributes; - children?: DominarTagChildren; - eventListeners?: DominarTagEventListeners; -}; - -/** - * Represents a DOM element wrapped in a DominarTag. - */ -class DominarTag { - /** - * The rendered DOM element of the tag. - * @type {HTMLElement} - */ - public renderedTag: HTMLElement; - - /** - * Creates an instance of the DominarTag class. - * @param {string} tagName The name of the tag to create. - * @param {DominarTagData} [tagData] Optional data for initializing the tag. - */ - constructor(tagName: string, tagData?: DominarTagData) { - this.renderedTag = document.createElement(tagName); - - if (tagData !== undefined) { - let { attributes, children, eventListeners } = tagData; - - // Set attributes - if (attributes !== undefined) - setAttributes(this.renderedTag, attributes); - - // Append children - if (children !== undefined) - insertChildren(this.renderedTag, children); - - // Add event listeners - if (eventListeners !== undefined) - addEventListeners(this.renderedTag, eventListeners); - } - } - - /** - * Executes an additional action on the rendered HTML element. - * - * @param {function} performAction A callback function that performs the action on the HTML element. The function takes an `HTMLElement` as its argument and does not return any value. - * @returns {DominarTag} The current instance of the DominarTag, allowing for method chaining. - */ - additionally(performAction: (tag: HTMLElement) => void): DominarTag { - performAction(this.renderedTag); - return this; - } -} - -/** Creates a new DominarTag instance with the specified tag name and optional tag data. - * - * @param {string} tagName The name of the tag. - * @param {DominarTagData} [tagData] Optional tag data. - * @returns {DominarTag} A new DominarTag instance. - */ -function tag( - tagName: K, - tagData?: DominarTagData -): DominarTag; -function tag(tagName: string, tagData?: DominarTagData): DominarTag; -/** Creates a new DominarTag instance with the specified tag name and optional tag data. - * - * @param {string} tagName The name of the tag. - * @param {DominarTagData} [tagData] Optional tag data. - * @returns {DominarTag} A new DominarTag instance. - */ -function tag(tagName: string, tagData?: DominarTagData): DominarTag { - return new DominarTag(tagName, tagData); -} - -type DominarTagListData = ( - | string - | number - | DominarTag - | parsedSVG - | HTMLElement -)[]; - -/** - * Represents a list of rendered HTML tags. - */ -class DominarTagList { - /** - * The array of rendered tags, which can be either strings or HTML elements. - */ - public renderedTagList: (string | HTMLElement | SVGSVGElement)[] = []; - - /** - * Constructs a new instance of the DominarTagList class. - * @param {DominarTagListData} tags The initial list of tags. - */ - constructor(tags: DominarTagListData) { - tags.forEach((tag) => { - if (typeof tag === "string" || typeof tag === "number") - this.renderedTagList.push(String(tag)); - else if (tag instanceof DominarTag) - this.renderedTagList.push(tag.renderedTag); - else if (tag instanceof parsedSVG && tag.svg !== null) - this.renderedTagList.push(tag.svg); - else if (tag instanceof HTMLElement) this.renderedTagList.push(tag); - }); - } -} - -/** - * Returns a new instance of DominarTagList that contains the given tags. - * @param tags An array of tags to include in the DominarTagList. - * @returns A new instance of DominarTagList. - */ -function tagList(...tags: DominarTagListData): DominarTagList { - return new DominarTagList(tags); -} - -export { - tag, - tagList, - DominarTag, - DominarTagList, - DominarTagChildren, - insertChildren, - childrenInsertType, -}; diff --git a/tsconfig.json b/tsconfig.json index 32b3700..e55603c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,7 +4,6 @@ "lib": ["ES2017", "DOM"], "module": "ES6", "rootDir": "./src", - "declaration": true, "outDir": "./lib", "strict": true },