web-signature 0.1.1 → 0.1.2

package/bundle/index.js

@@ -1 +1 @@
-class e{element;instance;constructor(e,t){this.instance=e,this.element=t}}let t=0;class r{components={};refs={};constructor(){}contact(e){const t=document.querySelector(e);if(!t)throw new Error(`Element not found for selector: ${e}`);const r=document.createElement("div");r.innerHTML=t.innerHTML,this.render(r),t.replaceChildren(...Array.from(r.childNodes))}add(e){this.components[e.name]&&console.warn(new Error(`Component with name ${e.name} already exists.`)),this.components[e.name]=e}ref(e){return this.refs[e]?.element}contactWith(e,...t){const r=this.refs[e];if(!r)throw new Error(`Ref with name ${e} does not exist.`);const n=r.instance;return n.onContact?.(...t)}updateRef(e){const t=this.refs[e];if(!t)throw new Error(`Ref with name ${e} does not exist.`);const r=t.instance,n=r.render().trim(),o=document.createElement("template");if(o.innerHTML=n,1!==o.content.children.length)throw new Error(`Component '${r.name}' must render a single root element.`);const s=o.content.firstElementChild;this.render(o),r.onRender?.(),t.element.replaceWith(s),t.element=s,r.onMount?.(s)}render(r){for(const n of Object.keys(this.components)){const o=this.components[n];for(const s of Array.from(r.querySelectorAll(n))){const r=new o;if(r.onInit?.(),s instanceof HTMLElement){r.content=s.innerHTML.trim();for(const e of Object.keys(r.props)){const t=s.getAttribute(e);if(null===t){if(r.props[e].required)throw new Error(`Property '${e}' in component '${n}' is required but not provided.`);r.data[e]=null}else if(""===t){if(r.props[e].required)throw new Error(`Property '${e}' in component '${n}' is required but not provided.`);r.props[e].isValid(t)&&(r.data[e]=null)}else{let o;switch(r.props[e].type){case"boolean":o=Boolean(t);break;case"number":o=Number(t);break;case"string":o=String(t);break;default:if(r.props[e].required)throw new Error(`Unsupported type for property '${e}' in component '${n}': ${r.props[e].type}`)}if(void 0!==o){if(!r.props[e].isValid(o))throw new Error(`Invalid value for property '${e}' in component '${n}': ${t}`);if(r.props[e].validate&&!r.props[e].validate(o))throw new Error(`Invalid value for property '${e}' in component '${n}': ${o}`);r.data[e]=o,r.onPropParsed?.(r.props[e],o)}}}r.onPropsParsed?.()}const i=document.createElement("template");if(i.innerHTML=r.render().trim(),i.content.children.length>1)throw new Error(`Component '${n}' must render a single root element.`);this.render(i),r.onRender?.();const a=i.content.firstElementChild;if(s.hasAttribute("ref")){let n=s.getAttribute("ref");if(t++,""===n&&(n=`r${t}${Math.random().toString(36).substring(2,15)}${t}`),this.refs[n])throw new Error(`Ref with name ${n} already exists.`);this.refs[n]=new e(r,a),a.setAttribute("ref",n)}s.replaceWith(i.content),r.onMount?.(a)}}}}class n{content;props={};data={}}class o{type;required=!0;validate;constructor(e,t=!0,r){this.type=e,this.required=t,this.validate=r||(()=>!0)}isValid(e){switch(this.type){case"boolean":return"boolean"==typeof e;case"number":return"number"==typeof e&&!isNaN(e);case"string":return"string"==typeof e;case"null":return null===e;default:return!1}}}function s(){return new r}export{n as Component,o as Prop,r as Signature,s as default};
+class e{element;instance;constructor(e,t){this.instance=e,this.element=t}}const t={"element-not-found":"Element not found for selector: #selector","prop-is-required":"Property '#prop' in component '#component' is required but not provided.","unsupported-type-for-property":"Unsupported type for property '#prop' in component '#component': #type","invalid-value-for-property":"Invalid value for property '#prop' in component '#component': #value (value: #attr)","multiple-root-elements":"Component '#component' must render a single root element. \n\t#elements","ref-collision":"Ref collision detected for ref '#ref' in component '#component'.",unknown:"An unknown error occurred.","unknown-from":"An unknown error occurred in component '#from'."};let n=0;class r{components={};refs={};constructor(){}add(e){this.components[e.name]&&console.warn(new Error(`Component with name ${e.name} already exists.`)),this.components[e.name]=e}ref(e){return this.refs[e]?.element}contactWith(e,...t){const n=this.refs[e];if(!n)throw new Error(`Ref with name ${e} does not exist.`);const r=n.instance;return r.onContact?.(...t)}updateRef(e){const t=this.refs[e];if(!t)throw new Error(`Ref with name ${e} does not exist.`);const n=t.instance,r=n.render().trim(),o=document.createElement("template");if(o.innerHTML=r,1!==o.content.children.length)throw new Error(`Component '${n.name}' must render a single root element.`);const i=o.content.firstElementChild;this.render(o),n.onRender?.(),t.element.replaceWith(i),t.element=i,n.onMount?.(i)}contact(e){new Promise((t,n)=>{try{const t=document.querySelector(e);if(!t)return void n({id:"element-not-found",selector:e});const r=document.createElement("div");r.innerHTML=t.innerHTML,this.render(r),t.replaceChildren(...Array.from(r.childNodes))}catch(e){e instanceof Error?n({id:"unknown",err:e}):n(e)}}).then(()=>{}).catch(e=>{let n=t[e.id];throw Object.keys(e).filter(e=>!(e in["id","err"])).forEach(t=>{n=n.replace(`#${t}`,String(e[t]))}),e.id in["unknown","unknown-from"]?console.error(`[${e.id}] ${n}`,e.err):console.error(`[${e.id}] ${n}`),"Page rendering was interrupted by Signature due to the above error."})}render(t){for(const r of Object.keys(this.components)){const o=this.components[r];for(const i of Array.from(t.querySelectorAll(r))){const t=new o;if(t.onInit?.(),i instanceof HTMLElement){t.content=i.innerHTML.trim();for(const e of Object.keys(t.props)){const n=i.getAttribute(e);if(null===n){if(t.props[e].required)throw{id:"prop-is-required",component:r,prop:e};t.data[e]=null}else if(""===n){if(t.props[e].required)throw{id:"prop-is-required",component:r,prop:e};t.props[e].isValid(n)&&(t.data[e]=null)}else{let o;switch(t.props[e].type){case"boolean":o=Boolean(n);break;case"number":o=Number(n);break;case"string":o=String(n);break;default:if(t.props[e].required)throw{id:"unsupported-type-for-property",component:r,prop:e,type:t.props[e].type}}if(void 0!==o){if(!t.props[e].isValid(o))throw{id:"invalid-value-for-property",component:r,prop:e,value:o,attr:n};if(t.props[e].validate&&!t.props[e].validate(o))throw{id:"invalid-value-for-property",component:r,prop:e,value:o,attr:n};t.data[e]=o,t.onPropParsed?.(t.props[e],o)}}}t.onPropsParsed?.()}const s=document.createElement("template");try{s.innerHTML=t.render().trim()}catch(e){if(e instanceof Error)throw{id:"unknown-from",from:t.name,err:e}}if(s.content.children.length>1)throw{id:"multiple-root-elements",component:r,elements:s.innerHTML};this.render(s),t.onRender?.();const p=s.content.firstElementChild;if(i.hasAttribute("ref")){let o=i.getAttribute("ref");if(n++,""===o&&(o=`r${n}${Math.random().toString(36).substring(2,15)}${n}`),this.refs[o])throw{id:"ref-collision",ref:o,component:r};this.refs[o]=new e(t,p),p.setAttribute("ref",o)}i.replaceWith(s.content),t.onMount?.(p)}}}}class o{content;props={};data={}}class i{type;required=!0;validate;constructor(e,t=!0,n){this.type=e,this.required=t,this.validate=n||(()=>!0)}isValid(e){switch(this.type){case"boolean":return"boolean"==typeof e;case"number":return"number"==typeof e&&!isNaN(e);case"string":return"string"==typeof e;case"null":return null===e;default:return!1}}}function s(){return new r}export{o as Component,i as Prop,r as Signature,s as default};

package/dist/Errors.js

@@ -0,0 +1,11 @@
+const errorMessages = {
+    "element-not-found": "Element not found for selector: #selector",
+    "prop-is-required": "Property '#prop' in component '#component' is required but not provided.",
+    "unsupported-type-for-property": "Unsupported type for property '#prop' in component '#component': #type",
+    "invalid-value-for-property": "Invalid value for property '#prop' in component '#component': #value (value: #attr)",
+    "multiple-root-elements": "Component '#component' must render a single root element. \n\t#elements",
+    "ref-collision": "Ref collision detected for ref '#ref' in component '#component'.",
+    "unknown": "An unknown error occurred.",
+    "unknown-from": "An unknown error occurred in component '#from'."
+};
+export default errorMessages;

package/dist/Signature.js

@@ -1,24 +1,11 @@
 import Ref from "./Ref.js";
+import Errors from "./Errors.js";
 let _counter = 0;
 export default class Signature {
     components = {};
     refs = {};
     constructor() {
     }
-    /**
-     * Starts rendering in the specified area.
-     * @param {string} selector The selector of the element where the signature should be rendered.
-     */
-    contact(selector) {
-        const mainFrame = document.querySelector(selector);
-        if (!mainFrame) {
-            throw new Error(`Element not found for selector: ${selector}`);
-        }
-        const secondaryFrame = document.createElement("div");
-        secondaryFrame.innerHTML = mainFrame.innerHTML;
-        this.render(secondaryFrame);
-        mainFrame.replaceChildren(...Array.from(secondaryFrame.childNodes));
-    }
     /**
      * Adds a component to the signature.
      * @param {ComponentConstructor} component The component to add.
@@ -77,25 +64,68 @@ export default class Signature {
         ref.element = newElement;
         component.onMount?.(newElement); // lifecycle hook
     }
+    /**
+     * Starts rendering in the specified area.
+     * @param {string} selector The selector of the element where the signature should be rendered.
+     */
+    contact(selector) {
+        const hunter = new Promise((_r, reject) => {
+            try {
+                const mainFrame = document.querySelector(selector);
+                if (!mainFrame) {
+                    reject({ id: "element-not-found", selector: selector });
+                    return;
+                }
+                const secondaryFrame = document.createElement("div");
+                secondaryFrame.innerHTML = mainFrame.innerHTML;
+                this.render(secondaryFrame);
+                mainFrame.replaceChildren(...Array.from(secondaryFrame.childNodes));
+            }
+            catch (err) {
+                if (err instanceof Error) {
+                    reject({ id: "unknown", err: err });
+                }
+                else
+                    reject(err);
+            }
+        });
+        // Handle errors
+        hunter.then(() => {
+        }).catch((err) => {
+            let message = Errors[err.id];
+            Object.keys(err).filter(key => !(key in ["id", "err"])).forEach((key) => {
+                message = message.replace(`#${key}`, String(err[key]));
+            });
+            if (err.id in ["unknown", "unknown-from"]) {
+                console.error(`[${err.id}] ${message}`, err.err);
+            }
+            else
+                console.error(`[${err.id}] ${message}`);
+            throw "Page rendering was interrupted by Signature due to the above error.";
+        });
+    }
     render(frame) {
         for (const com of Object.keys(this.components)) {
             const component = this.components[com];
+            // Find all elements with the component name in the frame
             for (const el of Array.from(frame.querySelectorAll(com))) {
                 const renderer = new component();
                 renderer.onInit?.(); // lifecycle hook
                 if (el instanceof HTMLElement) {
+                    // Fill the renderer's content
                     renderer.content = el.innerHTML.trim();
+                    // Parse properties
                     for (const prop of Object.keys(renderer.props)) {
                         const attr = el.getAttribute(prop);
                         if (attr === null) {
                             if (renderer.props[prop].required) {
-                                throw new Error(`Property '${prop}' in component '${com}' is required but not provided.`);
+                                throw { id: "prop-is-required", component: com, prop: prop };
                             }
                             renderer.data[prop] = null;
                         }
                         else if (attr === "") {
                             if (renderer.props[prop].required) {
-                                throw new Error(`Property '${prop}' in component '${com}' is required but not provided.`);
+                                throw { id: "prop-is-required", component: com, prop: prop };
                             }
                             if (renderer.props[prop].isValid(attr)) {
                                 renderer.data[prop] = null;
@@ -103,6 +133,7 @@ export default class Signature {
                         }
                         else {
                             let val;
+                            // Determine the type of the property and convert the attribute value accordingly
                             switch (renderer.props[prop].type) {
                                 case "boolean":
                                     val = Boolean(attr);
@@ -115,7 +146,12 @@ export default class Signature {
                                     break;
                                 default:
                                     if (renderer.props[prop].required) {
-                                        throw new Error(`Unsupported type for property '${prop}' in component '${com}': ${renderer.props[prop].type}`);
+                                        throw {
+                                            id: "unsupported-type-for-property",
+                                            component: com,
+                                            prop: prop,
+                                            type: renderer.props[prop].type
+                                        };
                                     }
                                     break;
                             }
@@ -123,36 +159,58 @@ export default class Signature {
                                 if (renderer.props[prop].isValid(val)) {
                                     if (renderer.props[prop].validate) {
                                         if (!renderer.props[prop].validate(val)) {
-                                            throw new Error(`Invalid value for property '${prop}' in component '${com}': ${val}`);
+                                            throw {
+                                                id: "invalid-value-for-property",
+                                                component: com,
+                                                prop: prop,
+                                                value: val,
+                                                attr: attr
+                                            };
                                         }
                                     }
                                     renderer.data[prop] = val;
                                     renderer.onPropParsed?.(renderer.props[prop], val); // lifecycle hook
                                 }
                                 else {
-                                    throw new Error(`Invalid value for property '${prop}' in component '${com}': ${attr}`);
+                                    throw {
+                                        id: "invalid-value-for-property",
+                                        component: com,
+                                        prop: prop,
+                                        value: val,
+                                        attr: attr
+                                    };
                                 }
                             }
                         }
                     }
                     renderer.onPropsParsed?.(); // lifecycle hook
                 }
+                // Create a template for rendering
                 const body = document.createElement("template");
-                body.innerHTML = renderer.render().trim();
+                try {
+                    body.innerHTML = renderer.render().trim();
+                }
+                catch (err) {
+                    if (err instanceof Error) {
+                        throw { id: "unknown-from", from: renderer.name, err: err };
+                    }
+                }
                 if (body.content.children.length > 1) {
-                    throw new Error(`Component '${com}' must render a single root element.`);
+                    throw { id: "multiple-root-elements", component: com, elements: body.innerHTML };
                 }
                 this.render(body);
                 renderer.onRender?.(); // lifecycle hook
                 const mountEl = body.content.firstElementChild;
+                // Processing ref
                 if (el.hasAttribute("ref")) {
                     let refName = el.getAttribute("ref");
                     _counter++;
+                    // If the ref name is empty, generate a unique name
                     if (refName === "") {
                         refName = `r${_counter}${Math.random().toString(36).substring(2, 15)}${_counter}`;
                     }
                     if (this.refs[refName]) {
-                        throw new Error(`Ref with name ${refName} already exists.`);
+                        throw { id: "ref-collision", ref: refName, component: com };
                     }
                     this.refs[refName] = new Ref(renderer, mountEl);
                     mountEl.setAttribute("ref", refName);

package/dist/d/Errors.d.ts

@@ -0,0 +1,3 @@
+import { Errors } from "./types/Errors.js";
+declare const errorMessages: Record<Errors, string>;
+export default errorMessages;

package/dist/d/Signature.d.ts

@@ -3,11 +3,6 @@ export default class Signature {
     private components;
     private refs;
     constructor();
-    /**
-     * Starts rendering in the specified area.
-     * @param {string} selector The selector of the element where the signature should be rendered.
-     */
-    contact(selector: string): void;
     /**
      * Adds a component to the signature.
      * @param {ComponentConstructor} component The component to add.
@@ -30,5 +25,10 @@ export default class Signature {
      * @param {string} name The name of the reference to update.
      */
     updateRef(name: string): void;
+    /**
+     * Starts rendering in the specified area.
+     * @param {string} selector The selector of the element where the signature should be rendered.
+     */
+    contact(selector: string): void;
     private render;
 }

package/dist/d/types/Component.d.ts

@@ -5,7 +5,13 @@ interface Component {
      * Optional content that is specified in the component tag.
      */
     content?: string;
+    /**
+     * Defining component properties.
+     */
     props: Record<string, Prop>;
+    /**
+     * The properties of the component.
+     */
     data: Record<string, string | number | boolean | null>;
     /**
      * Returns the component as a string.

package/dist/d/types/Errors.d.ts

@@ -0,0 +1,48 @@
+type Errors = "unknown" | "unknown-from" | "element-not-found" | "prop-is-required" | "unsupported-type-for-property" | "invalid-value-for-property" | "multiple-root-elements" | "ref-collision";
+export { Errors };
+export interface error {
+    id: Errors;
+}
+export interface UnknownError extends error {
+    id: "unknown";
+    err?: Error;
+}
+export interface UnknownFromError extends error {
+    id: "unknown-from";
+    from: string;
+    err?: Error;
+}
+export interface ElementNotFoundError extends error {
+    id: "element-not-found";
+    selector: string;
+}
+export interface PropIsRequiredError extends error {
+    id: "prop-is-required";
+    component: string;
+    prop: string;
+}
+export interface UnsupportedTypeForPropertyError extends error {
+    id: "unsupported-type-for-property";
+    component: string;
+    prop: string;
+    type: "string" | "number" | "boolean" | "null";
+}
+export interface InvalidValueForPropertyError extends error {
+    id: "invalid-value-for-property";
+    component: string;
+    prop: string;
+    value: string | number | boolean | null;
+    attr: string;
+}
+export interface MultipleRootElementsError extends error {
+    id: "multiple-root-elements";
+    component: string;
+    elements: string;
+}
+export interface RefCollisionError extends error {
+    id: "ref-collision";
+    ref: string;
+    component: string;
+}
+type ErrorUnion = UnknownError | UnknownFromError | ElementNotFoundError | PropIsRequiredError | UnsupportedTypeForPropertyError | InvalidValueForPropertyError | MultipleRootElementsError | RefCollisionError;
+export default ErrorUnion;

package/dist/types/Errors.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-signature",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Primitive and fast framework for rendering web interfaces",
   "license": "ISC",
   "author": "PinBib",

package/src/Errors.ts

@@ -0,0 +1,14 @@
+import {Errors} from "./types/Errors.js";
+
+const errorMessages: Record<Errors, string> = {
+	"element-not-found": "Element not found for selector: #selector",
+	"prop-is-required": "Property '#prop' in component '#component' is required but not provided.",
+	"unsupported-type-for-property": "Unsupported type for property '#prop' in component '#component': #type",
+	"invalid-value-for-property": "Invalid value for property '#prop' in component '#component': #value (value: #attr)",
+	"multiple-root-elements": "Component '#component' must render a single root element. \n\t#elements",
+	"ref-collision": "Ref collision detected for ref '#ref' in component '#component'.",
+	"unknown": "An unknown error occurred.",
+	"unknown-from": "An unknown error occurred in component '#from'."
+}
+
+export default errorMessages;

package/src/Signature.ts

@@ -1,5 +1,7 @@
 import Component, {ComponentConstructor} from "./Component.js";
 import Ref from "./Ref.js";
+import ErrorUnion from "./types/Errors.js";
+import Errors from "./Errors.js";
 
 let _counter = 0;
 
@@ -10,25 +12,6 @@ export default class Signature {
 	constructor() {
 	}
 
-	/**
-	 * Starts rendering in the specified area.
-	 * @param {string} selector The selector of the element where the signature should be rendered.
-	 */
-	public contact(selector: string): void {
-		const mainFrame = document.querySelector(selector);
-
-		if (!mainFrame) {
-			throw new Error(`Element not found for selector: ${selector}`);
-		}
-
-		const secondaryFrame = document.createElement("div");
-		secondaryFrame.innerHTML = mainFrame.innerHTML;
-
-		this.render(secondaryFrame);
-
-		mainFrame.replaceChildren(...Array.from(secondaryFrame.childNodes));
-	}
-
 	/**
 	 * Adds a component to the signature.
 	 * @param {ComponentConstructor} component The component to add.
@@ -104,28 +87,77 @@ export default class Signature {
 		component.onMount?.(newElement); // lifecycle hook
 	}
 
+	/**
+	 * Starts rendering in the specified area.
+	 * @param {string} selector The selector of the element where the signature should be rendered.
+	 */
+	public contact(selector: string): void {
+		const hunter: Promise<void> = new Promise((_r, reject: (reason?: ErrorUnion) => void) => {
+			try {
+				const mainFrame = document.querySelector(selector);
+
+				if (!mainFrame) {
+					reject({id: "element-not-found", selector: selector} as ErrorUnion);
+					return;
+				}
+
+				const secondaryFrame = document.createElement("div");
+				secondaryFrame.innerHTML = mainFrame.innerHTML;
+
+				this.render(secondaryFrame);
+
+				mainFrame.replaceChildren(...Array.from(secondaryFrame.childNodes));
+			} catch (err) {
+				if (err instanceof Error) {
+					reject({id: "unknown", err: err} as ErrorUnion);
+				} else reject(err as ErrorUnion);
+			}
+		});
+
+		// Handle errors
+		hunter.then(() => {
+		}).catch((err: ErrorUnion) => {
+			let message: string = Errors[err.id];
+
+			Object.keys(err).filter(key => !(key in ["id", "err"])).forEach((key) => {
+				message = message.replace(`#${key}`, String(err[key as keyof typeof err]));
+			});
+
+			if (err.id in ["unknown", "unknown-from"]) {
+				console.error(`[${err.id}] ${message}`, (err as {
+					err: Error
+				}).err);
+			} else console.error(`[${err.id}] ${message}`);
+
+			throw "Page rendering was interrupted by Signature due to the above error.";
+		});
+	}
+
 	private render(frame: Element): void {
 		for (const com of Object.keys(this.components)) {
 			const component: ComponentConstructor = this.components[com];
 
+			// Find all elements with the component name in the frame
 			for (const el of Array.from(frame.querySelectorAll(com))) {
 				const renderer: Component = new component();
 				renderer.onInit?.(); // lifecycle hook
 
 				if (el instanceof HTMLElement) {
+					// Fill the renderer's content
 					renderer.content = el.innerHTML.trim();
 
+					// Parse properties
 					for (const prop of Object.keys(renderer.props)) {
 						const attr = el.getAttribute(prop);
 
 						if (attr === null) {
 							if (renderer.props[prop].required) {
-								throw new Error(`Property '${prop}' in component '${com}' is required but not provided.`);
+								throw {id: "prop-is-required", component: com, prop: prop} as ErrorUnion;
 							}
 							renderer.data[prop] = null;
 						} else if (attr === "") {
 							if (renderer.props[prop].required) {
-								throw new Error(`Property '${prop}' in component '${com}' is required but not provided.`);
+								throw {id: "prop-is-required", component: com, prop: prop} as ErrorUnion;
 							}
 
 							if (renderer.props[prop].isValid(attr)) {
@@ -134,6 +166,7 @@ export default class Signature {
 						} else {
 							let val;
 
+							// Determine the type of the property and convert the attribute value accordingly
 							switch (renderer.props[prop].type) {
 								case "boolean":
 									val = Boolean(attr);
@@ -146,16 +179,28 @@ export default class Signature {
 									break;
 								default:
 									if (renderer.props[prop].required) {
-										throw new Error(`Unsupported type for property '${prop}' in component '${com}': ${renderer.props[prop].type}`);
+										throw {
+											id: "unsupported-type-for-property",
+											component: com,
+											prop: prop,
+											type: renderer.props[prop].type
+										} as ErrorUnion;
 									}
 									break;
 							}
+
 							if (val !== undefined) {
 								if (renderer.props[prop].isValid(val)) {
 
 									if (renderer.props[prop].validate) {
 										if (!renderer.props[prop].validate(val)) {
-											throw new Error(`Invalid value for property '${prop}' in component '${com}': ${val}`);
+											throw {
+												id: "invalid-value-for-property",
+												component: com,
+												prop: prop,
+												value: val,
+												attr: attr
+											} as ErrorUnion;
 										}
 									}
 
@@ -163,7 +208,13 @@ export default class Signature {
 
 									renderer.onPropParsed?.(renderer.props[prop], val); // lifecycle hook
 								} else {
-									throw new Error(`Invalid value for property '${prop}' in component '${com}': ${attr}`);
+									throw {
+										id: "invalid-value-for-property",
+										component: com,
+										prop: prop,
+										value: val,
+										attr: attr
+									} as ErrorUnion;
 								}
 							}
 						}
@@ -172,11 +223,19 @@ export default class Signature {
 					renderer.onPropsParsed?.(); // lifecycle hook
 				}
 
+				// Create a template for rendering
 				const body = document.createElement("template");
-				body.innerHTML = renderer.render().trim();
+
+				try {
+					body.innerHTML = renderer.render().trim();
+				} catch (err) {
+					if (err instanceof Error) {
+						throw {id: "unknown-from", from: renderer.name, err: err} as ErrorUnion;
+					}
+				}
 
 				if (body.content.children.length > 1) {
-					throw new Error(`Component '${com}' must render a single root element.`);
+					throw {id: "multiple-root-elements", component: com, elements: body.innerHTML} as ErrorUnion;
 				}
 
 				this.render(body);
@@ -184,17 +243,19 @@ export default class Signature {
 
 				const mountEl: Element = body.content.firstElementChild as Element;
 
+				// Processing ref
 				if (el.hasAttribute("ref")) {
 					let refName = el.getAttribute("ref") as string;
 
 					_counter++;
 
+					// If the ref name is empty, generate a unique name
 					if (refName === "") {
 						refName = `r${_counter}${Math.random().toString(36).substring(2, 15)}${_counter}`;
 					}
 
 					if (this.refs[refName]) {
-						throw new Error(`Ref with name ${refName} already exists.`);
+						throw {id: "ref-collision", ref: refName, component: com} as ErrorUnion;
 					}
 
 					this.refs[refName] = new Ref(renderer, mountEl);

package/src/types/Component.ts

@@ -8,8 +8,14 @@ interface Component {
 	 */
 	content?: string;
 
-
+	/**
+	 * Defining component properties.
+	 */
 	props: Record<string, Prop>;
+
+	/**
+	 * The properties of the component.
+	 */
 	data: Record<string, string | number | boolean | null>;
 
 

package/src/types/Errors.ts

@@ -0,0 +1,76 @@
+type Errors =
+	"unknown"
+	| "unknown-from"
+	| "element-not-found"
+	| "prop-is-required"
+	| "unsupported-type-for-property"
+	| "invalid-value-for-property"
+	| "multiple-root-elements"
+	| "ref-collision";
+
+export {Errors};
+
+export interface error {
+	id: Errors;
+}
+
+export interface UnknownError extends error {
+	id: "unknown";
+	err?: Error;
+}
+
+export interface UnknownFromError extends error {
+	id: "unknown-from";
+	from: string;
+	err?: Error;
+}
+
+export interface ElementNotFoundError extends error {
+	id: "element-not-found";
+	selector: string;
+}
+
+export interface PropIsRequiredError extends error {
+	id: "prop-is-required";
+	component: string;
+	prop: string;
+}
+
+export interface UnsupportedTypeForPropertyError extends error {
+	id: "unsupported-type-for-property";
+	component: string;
+	prop: string;
+	type: "string" | "number" | "boolean" | "null";
+}
+
+export interface InvalidValueForPropertyError extends error {
+	id: "invalid-value-for-property";
+	component: string;
+	prop: string;
+	value: string | number | boolean | null;
+	attr: string;
+}
+
+export interface MultipleRootElementsError extends error {
+	id: "multiple-root-elements";
+	component: string;
+	elements: string;
+}
+
+export interface RefCollisionError extends error {
+	id: "ref-collision";
+	ref: string;
+	component: string;
+}
+
+type ErrorUnion =
+	UnknownError
+	| UnknownFromError
+	| ElementNotFoundError
+	| PropIsRequiredError
+	| UnsupportedTypeForPropertyError
+	| InvalidValueForPropertyError
+	| MultipleRootElementsError
+	| RefCollisionError;
+
+export default ErrorUnion;