web-signature 0.2.0 → 0.2.1

package/README.MD

@@ -29,4 +29,297 @@ npm install
 npm run dev
 ```
 
-# [Documentation](https://github.com/Pinbib/Signature/tree/main/docs)
+# Introduction
+
+Signature uses four classes as its basis:
+
+- [Signature](./docs/Signature.md) - which processes the entire page and components.
+- [Component](./docs/Component.md) - which defines a standard structure for any element.
+- [Prop](./docs/Prop.md) - which defines properties for components.
+- [Library](./docs/Library.md) - which defines a set of components.
+
+In short, Signature allows you to create a website using simple and straightforward components that are easy to
+customize and extend.
+
+## Briefly about [Signature](./docs/Signature.md)
+
+The [signature](./docs/Signature.md) is the main class that is responsible for processing the entire page. It is used to
+add [components](./docs/Component.md),
+register [libraries](./docs/Library.md), and essentially render the page.
+
+```ts 
+// Creating a Signature instance
+
+import {Signature} from 'web-signature';
+
+const si = new Signature();
+```
+
+To add a component, use the
+[`Signature.add(component: ComponentConstructor, name?: string)`](./docs/Signature.md#signatureadd) method, which takes
+the
+[component](./docs/Component.md) class and its name. For example:
+
+```ts
+import {Signature, Component} from 'web-signature';
+
+class MyComponent extends Component {
+	/* ... */
+}
+
+const si = new Signature();
+
+si.add(MyComponent, 'my-component');
+// The <my-component> tag will be processed by this class.
+```
+
+**Although the [component](./docs/Component.md) name is not required,
+it is recommended to specify it to avoid problems when building the project.**
+
+To register a [library](./docs/Library.md), the [
+`Signature.register(library: Library)`](./docs/Signature.md#signatureregister)
+method is used, which takes an
+instance of the [Library](./docs/Library.md).
+For example:
+
+```ts
+import {Signature} from 'web-signature';
+import {MyLibrary} from './my-library';
+
+const si = new Signature();
+si.register(new MyLibrary());
+```
+
+For rendering the page there is a [
+`Signature.contact(selector: string, callback?)`](./docs/Signature.md#signaturecontact)
+method. For example:
+
+```ts
+import {Signature} from 'web-signature';
+
+const si = new Signature();
+
+si.contact('#app', () => {
+	console.log('Page rendered successfully!');
+});
+```
+
+## About [Component](./docs/Component.md)
+
+This is an abstract class from which all components inherit. It defines a standard structure for any element.
+It has a main method [`Component.render()`](./docs/Component.md#componentrender), and component lifecycle hooks such
+as [
+`Component.onMount()`](./docs/Component.md#componentonmount).
+
+To create a component, you need to inherit the [`Component`](./docs/Component.md) class and implement the
+[`Component.render(): string`](./docs/Component.md#componentrender) method
+and the
+`name` field.
+Let's create a simple component that simply displays text:
+
+```ts
+import {Component, html} from 'web-signature';
+
+class MyComponent extends Component {
+	name = 'my-component';
+
+	render(): string {
+		return html`<div>Hello, World!</div>`;
+	}
+}
+```
+
+```html
+
+<div id="app">
+    <my-component></my-component>
+</div>
+```
+
+Now let's make a counter component that will increment the value when clicked. To do this,
+we will need to update it somehow and track events.
+For a component to be able to update, it must have its own ref. Ref - allows you to associate a
+component instance with
+its DOM
+element, if the ref is not specified, the [Signature](./docs/Signature.md) will not remember the component instance.
+And to track events, we will use the [`Component.onMount(el: Element)`](./docs/Component.md#componentonmount) hook,
+which is
+called after the component has been
+added to
+the page.
+
+```ts
+import {Signature, Component, html} from 'web-signature';
+
+export class Counter extends Component {
+	name = "counter";
+
+	count = 0;
+
+	render(): string {
+		// Rendering the component as a button with the current count
+		return html`<button type="button">Count is ${this.count}</button>`;
+	}
+
+	onMount(el: Element): void {
+		el.addEventListener('click', () => {
+			// Since a ref is required to update a component, we check if it is defined.
+			if (this.ref === undefined) {
+				throw Error();
+			}
+
+			this.count++;
+
+			// Update the component
+			this.ref.update();
+		});
+	}
+}
+
+const si = new Signature();
+si.add(Counter, "Counter");
+si.contact("#app");
+```
+
+The HTML should look like this:
+
+```html
+
+<div id="app">
+    <counter ref></counter>
+</div>
+```
+
+It is not necessary to specify a specific ref, the signature will generate it itself,
+but if you want the ref to have a
+specific name, you can specify it in the attribute. You can also set the component options to auto-generate
+the ref if it was not specified.
+
+```ts
+// ...
+class Counter extends Component {
+	options = {
+		generateRefIfNotSpecified: true
+	}
+	// ...
+}
+
+// ...
+```
+
+Let's make it possible to set the number of steps to increment the counter,
+using [Props](./docs/Prop.md). We need to create a [Prop](./docs/Prop.md) `step` with type `number`.
+
+```ts
+import {Signature, Component, Prop, html} from 'web-signature';
+
+export class StepCounter extends Component {
+	name = "step-counter";
+
+	count = 0;
+
+	// In this field, we create a Prop step with type number
+	props = {
+		// We have specified that this Prop is required and must be a number greater than or equal to 1.
+		step: new Prop("number", true, (val) => Number(val) >= 1)
+	}
+
+	render(): string {
+		// Rendering the component as a button with the current count
+		return html`<button type="button">Count is ${this.count}</button>`;
+	}
+
+	onMount(el: Element): void {
+		el.addEventListener('click', () => {
+			// Since a ref is required to update a component, we check if it is defined.
+			if (this.ref === undefined) {
+				throw Error();
+			}
+
+			//After processing Props, the specified values are written to this.data
+			this.count += this.data.step as number;
+
+			// Update the component
+			this.ref.update();
+		});
+	}
+}
+
+const si = new Signature();
+si.add(StepCounter, "Step-counter");
+si.contact("#app");
+```
+
+The HTML should look like this:
+
+```html
+
+<div id="app">
+    <Step-counter ref step="2"></Step-counter>
+</div>
+
+```
+
+Now, when you click the button, the counter will increase by the specified number of steps (in our case, it is 2 steps).
+
+## Quick about the Library
+
+The [Library](./docs/Library.md) class allows you to create a set of [components](./docs/Component.md) that can be used
+in a
+project.
+It has no other purpose than to facilitate the registration of [components](./docs/Component.md)
+in [Signature](./docs/Signature.md),
+and avoiding [component](./docs/Component.md) name collisions by grouping them.
+
+Let's create a [library](./docs/Library.md) that will contain our `Counter` and `StepCounter` components:
+
+```ts
+import {Library} from 'web-signature';
+
+// Importing the components
+import {Counter} from './Counter';
+import {StepCounter} from './StepCounter';
+
+// Creating a library instance
+const myLibrary = new Library('ML');
+
+// Adding components to the library
+myLibrary.add(Counter, "Counter");
+myLibrary.add(StepCounter, "Step-counter");
+
+export default myLibrary;
+```
+
+To register the library in [Signature](./docs/Signature.md#signatureregister), use the
+[`Signature.register(library: Library)`](./docs/Signature.md#signatureregister)
+method:
+
+```ts
+import {Signature} from 'web-signature';
+
+// Importing the library
+import myLibrary from './myLibrary';
+
+const si = new Signature();
+
+// Registering the library
+si.register(myLibrary);
+
+si.contact('#app');
+```
+
+Now you can use the components from the [library](./docs/Library.md) in your HTML, but all components will be available
+with
+the prefix
+`ML-`, i.e. `ML-counter` and `ML-step-counter`, the pattern is the library name
+is used as a prefix for the [component](./docs/Component.md) name `[libName]-[componentName]`.
+
+```html
+
+<div id="app">
+    <ML-counter ref></ML-counter>
+    <ML-step-counter ref step="2"></ML-step-counter>
+</div>
+```
+
+## [See more here](./docs)

package/bundle/d/index.d.ts

@@ -50,6 +50,10 @@ type Ref = {
      */
     update: () => void;
 };
+type html$1 = {
+    strings: TemplateStringsArray;
+    values: any[];
+};
 interface Component$1 {
     name: string;
     options: Options;
@@ -71,10 +75,10 @@ interface Component$1 {
      */
     data: Record<string, string | number | boolean | null>;
     /**
-     * Returns the component as a string.
-     * @returns {string} The rendered component as a string.
+     * Returns the component as a string (template).
+     * @returns {html | Promise<html>} The rendered component as a string (template).
      */
-    render(): string | Promise<string>;
+    render(): html$1 | Promise<html$1>;
     /**
      * Lifecycle hook that is called when the component is initialized.
      */
@@ -112,7 +116,7 @@ declare abstract class Component implements Component$1 {
     ref?: Ref;
     readonly props: Record<string, Prop$1>;
     readonly data: Record<string, string | number | boolean | null>;
-    abstract render(): string | Promise<string>;
+    abstract render(): html$1 | Promise<html$1>;
     onInit?(): void;
     onRender?(): void;
     onMount?(el: Element): void;
@@ -226,6 +230,9 @@ declare class Signature {
      * @param {() => void} [callback] Optional callback that will be called after rendering is complete.
      */
     contact(selector: string, callback?: () => void): void;
+    private templateToString;
+    private fillTemplate;
+    private templateToElement;
     private render;
 }
 
@@ -244,6 +251,11 @@ declare class Prop<T extends keyof TypesMap> implements Prop$1 {
     isValid(value: TypesMap[keyof TypesMap]): boolean;
 }
 
+declare function html(strings: TemplateStringsArray, ...values: any[]): {
+    strings: TemplateStringsArray;
+    values: any[];
+};
+
 declare function export_default(): Signature;
 
-export { Component, Library, Prop, Signature, export_default as default };
+export { Component, Library, Prop, Signature, export_default as default, html };

package/bundle/index.js

@@ -16,7 +16,8 @@ const errorMessages = {
     "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'.",
-    "stack-overflow": "Stack Overflow detected: possible recursive component rendering."
+    "stack-overflow": "Stack Overflow detected: possible recursive component rendering.",
+    "render-async-failed": "Error during asynchronous rendering of the component #component.",
 };
 
 let _counter = 0;
@@ -97,14 +98,6 @@ class Signature {
         };
         return resolve(this.libs);
     }
-    // /**
-    //  * Returns a reference.
-    //  * @param {string} name The name of the reference.
-    //  * @return {Element | undefined} The element associated with the reference, or undefined if it does not exist.
-    //  */
-    // public ref(name: string): Element | undefined {
-    // 	return this.refs[name]?.element;
-    // }
     /**
      * Contacts the Component.onContact method through its reference.
      * @param {string} name The name of the reference.
@@ -128,7 +121,10 @@ class Signature {
             throw new Error(`Ref with name ${name} does not exist.`);
         }
         const component = ref.instance;
-        let fragment = "";
+        let fragment = {
+            strings: Object.assign([], { raw: [] }),
+            values: []
+        };
         try {
             fragment = component.render();
         }
@@ -139,18 +135,18 @@ class Signature {
         }
         const template = document.createElement("template");
         ((next) => {
-            if (typeof fragment === "string") {
-                template.innerHTML = fragment.trim();
-                next();
-            }
-            else if (fragment instanceof Promise) {
+            if (fragment instanceof Promise) {
                 fragment.then((html) => {
-                    template.innerHTML = html.trim();
+                    template.content.appendChild(this.templateToElement(html));
                     next();
                 }).catch((err) => {
                     throw { id: "unknown-from", from: component.name, err: err };
                 });
             }
+            else if (typeof fragment === "object") {
+                template.content.appendChild(this.templateToElement(fragment));
+                next();
+            }
         })(() => {
             if (template.content.children.length !== 1) {
                 throw new Error(`Component '${component.name}' must render a single root element.`);
@@ -202,7 +198,7 @@ class Signature {
             Object.keys(err).filter(key => !(key in ["id", "err"])).forEach((key) => {
                 message = message.replace(new RegExp(`#${key}`, "gm"), String(err[key]));
             });
-            if (err.id in ["unknown", "unknown-from"]) {
+            if (err.id in ["unknown", "unknown-from", "render-async-failed"]) {
                 console.error(`[${err.id}] ${message}`, err.err);
             }
             else
@@ -210,6 +206,59 @@ class Signature {
             throw "Page rendering was interrupted by Signature due to the above error.";
         });
     }
+    templateToString(template) {
+        let body = "";
+        for (let i = 0; i < template.strings.length; i++) {
+            body += template.strings[i];
+            if (i < template.values.length) {
+                body += `<!--si-mark-${i}-->`;
+            }
+        }
+        console.log(body, template);
+        return body;
+    }
+    fillTemplate(template, markup) {
+        let body = document.createElement("template");
+        body.innerHTML = markup;
+        // Processing si-mark comments
+        (() => {
+            let walker = document.createTreeWalker(body.content, NodeFilter.SHOW_COMMENT);
+            let node;
+            let marks = [];
+            while ((node = walker.nextNode())) {
+                if (/si-mark-\d+/gm.test(node.nodeValue ?? "")) {
+                    marks.push(node);
+                }
+            }
+            for (const node of marks) {
+                node.replaceWith(document.createTextNode(String(template.values[Number((node.nodeValue ?? "").match(/si-mark-(\d+)/m)[1])])));
+            }
+        })();
+        // Processing si-mark attributes
+        (() => {
+            let walker = document.createTreeWalker(body.content, NodeFilter.SHOW_ELEMENT);
+            let node;
+            while ((node = walker.nextNode())) {
+                for (const attr of Array.from(node.attributes)) {
+                    if (/<!--si-mark-\d+-->/gm.test(attr.value)) {
+                        const match = attr.value.match(/si-mark-(\d+)/m);
+                        if (match) {
+                            node.setAttribute(attr.name, String(template.values[Number(match[1])]));
+                        }
+                    }
+                }
+            }
+        })();
+        return body;
+    }
+    templateToElement(template) {
+        const markup = this.templateToString(template);
+        const body = this.fillTemplate(template, markup);
+        if (body.content.children.length !== 1) {
+            throw { id: "multiple-root-elements", elements: body.innerHTML };
+        }
+        return body.content.firstElementChild;
+    }
     render(frame) {
         for (const com of Object.keys(this.components)) {
             const component = this.components[com];
@@ -307,7 +356,10 @@ class Signature {
                 }
                 // Create a template for rendering
                 const body = document.createElement("template");
-                let fragment = "";
+                let fragment = {
+                    strings: Object.assign([], { raw: [] }),
+                    values: []
+                };
                 try {
                     fragment = renderer.render();
                 }
@@ -317,30 +369,27 @@ class Signature {
                     }
                 }
                 ((next) => {
-                    if (typeof fragment === "string") {
-                        body.innerHTML = fragment.trim();
-                        next();
-                    }
-                    else if (fragment instanceof Promise) {
+                    if (fragment instanceof Promise) {
                         try {
                             fragment.then((html) => {
-                                body.innerHTML = html.trim();
+                                body.appendChild(this.templateToElement(html));
                                 next();
                             }).catch((err) => {
                                 throw { id: "unknown-from", from: renderer.name, err: err };
                             });
                         }
                         catch (err) {
-                            console.log(1);
+                            throw { id: "render-async-failed", component: com, err: err };
                         }
                     }
-                })(() => {
-                    if (body.content.children.length > 1) {
-                        throw { id: "multiple-root-elements", component: com, elements: body.innerHTML };
+                    else if (typeof fragment === "object") {
+                        body.appendChild(this.templateToElement(fragment));
+                        next();
                     }
+                })(() => {
                     this.render(body.content);
                     renderer.onRender?.(); // lifecycle hook
-                    const mountEl = body.content.firstElementChild;
+                    const mountEl = body.firstElementChild;
                     // Processing ref
                     if (el.hasAttribute("ref") || renderer.options.generateRefIfNotSpecified) {
                         let refName = el.getAttribute("ref");
@@ -363,7 +412,8 @@ class Signature {
                             update: () => this.updateRef(refName)
                         };
                     }
-                    el.replaceWith(body.content);
+                    el.replaceWith(body.firstElementChild);
+                    console.log(el, body);
                     renderer.onMount?.(mountEl); // lifecycle hook
                 });
             }
@@ -510,8 +560,12 @@ class Library {
     }
 }
 
+function html(strings, ...values) {
+    return { strings, values };
+}
+
 function index () {
     return new Signature();
 }
 
-export { Component, Library, Prop, Signature, index as default };
+export { Component, Library, Prop, Signature, index as default, html };

package/bundle/index.min.js

@@ -1 +1 @@
-class e{element;instance;constructor(e,n){this.instance=e,this.element=n}}const n={"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'.","stack-overflow":"Stack Overflow detected: possible recursive component rendering."};let t=0;class r{components={};refs={};libs={};constructor(){}add(e,n){const t="string"==typeof n?n:e.name;this.components[t]&&console.warn(new Error(`Component with name ${t} already exists.`)),this.components[t]=e}register(e,...n){this.libs[e.name]&&console.warn(new Error(`Library with name ${e.name} already exists.`));const t=e.list().filter(e=>!(e.name in n));this.libs[e.name]={name:e.name,version:e.version,author:e.author,components:t.map(e=>e.name),dependencies:e.libs};for(const n of t)this.add(n.component,`${e.name}-${n.name}`)}lib(e){return this.libs[e]}libraries(){const e=e=>{let n=e.name;return e.version&&(n+=`@${e.version}`),e.author&&(n+=`#${e.author}`),n},n=(t,r=new Set)=>{const o={};for(const[i,s]of Object.entries(t)){const t=e(s);r.has(t)||(r.add(t),o[t]={components:s.components,dependencies:n(s.dependencies,r)})}return o};return n(this.libs)}contactWith(e,...n){const t=this.refs[e];if(!t)throw new Error(`Ref with name ${e} does not exist.`);const r=t.instance;return r.onContact?.(...n)}updateRef(e){const n=this.refs[e];if(!n)throw new Error(`Ref with name ${e} does not exist.`);const t=n.instance;let r="";try{r=t.render()}catch(e){if(e instanceof Error)throw{id:"unknown-from",from:t.name,err:e}}const o=document.createElement("template");var i;i=()=>{if(1!==o.content.children.length)throw new Error(`Component '${t.name}' must render a single root element.`);const e=o.content.firstElementChild;this.render(o.content),t.onRender?.(),n.element.replaceWith(e),n.element=e,t.onMount?.(e)},"string"==typeof r?(o.innerHTML=r.trim(),i()):r instanceof Promise&&r.then(e=>{o.innerHTML=e.trim(),i()}).catch(e=>{throw{id:"unknown-from",from:t.name,err:e}})}contact(e,t){new Promise((n,r)=>{try{const n=document.querySelector(e);if(!n)return void r({id:"element-not-found",selector:e});const o=document.createElement("div");o.innerHTML=n.innerHTML,this.render(o),n.replaceChildren(...Array.from(o.childNodes)),t&&t()}catch(e){e instanceof Error?e instanceof RangeError&&e.message.includes("stack")?r({id:"stack-overflow",err:e}):r({id:"unknown",err:e}):r(e)}}).catch(e=>{let t=n[e.id];throw Object.keys(e).filter(e=>!(e in["id","err"])).forEach(n=>{t=t.replace(new RegExp(`#${n}`,"gm"),String(e[n]))}),e.id in["unknown","unknown-from"]?console.error(`[${e.id}] ${t}`,e.err):console.error(`[${e.id}] ${t}`),"Page rendering was interrupted by Signature due to the above error."})}render(n){for(const r of Object.keys(this.components)){const o=this.components[r];for(const i of Array.from(n.querySelectorAll(r)).concat(Array.from(n.querySelectorAll(`[si-component="${r}"]`)))){const n=new o;if(n.onInit?.(),i instanceof HTMLElement){n.content=i.innerHTML.trim();for(const e of Object.keys(n.props)){const t=i.getAttribute(e);if(null===t){if(n.props[e].required)throw{id:"prop-is-required",component:r,prop:e};n.data[e]=null}else if(""===t){if(n.props[e].required)throw{id:"prop-is-required",component:r,prop:e};n.props[e].isValid(t)&&(n.data[e]=null)}else{let o;switch(n.props[e].type){case"boolean":o=Boolean(t);break;case"number":o=Number(t);break;case"string":o=String(t);break;case"array":try{o=JSON.parse(t)}catch(n){throw{id:"invalid-value-for-property",component:r,prop:e,value:t,attr:t}}break;default:if(n.props[e].required)throw{id:"unsupported-type-for-property",component:r,prop:e,type:n.props[e].type}}if(void 0!==o){if(!n.props[e].isValid(o))throw{id:"invalid-value-for-property",component:r,prop:e,value:o,attr:t};if(n.props[e].validate&&!n.props[e].validate(o))throw{id:"invalid-value-for-property",component:r,prop:e,value:o,attr:t};n.data[e]=o,n.onPropParsed?.(n.props[e],o)}}}n.onPropsParsed?.()}const s=document.createElement("template");let a="";try{a=n.render()}catch(e){if(e instanceof Error)throw{id:"unknown-from",from:n.name,err:e}}(e=>{if("string"==typeof a)s.innerHTML=a.trim(),e();else if(a instanceof Promise)try{a.then(n=>{s.innerHTML=n.trim(),e()}).catch(e=>{throw{id:"unknown-from",from:n.name,err:e}})}catch(e){console.log(1)}})(()=>{if(s.content.children.length>1)throw{id:"multiple-root-elements",component:r,elements:s.innerHTML};this.render(s.content),n.onRender?.();const o=s.content.firstElementChild;if(i.hasAttribute("ref")||n.options.generateRefIfNotSpecified){let s=i.getAttribute("ref");if(null===s&&(s=""),t++,""===s&&(s=`r${t}${Math.random().toString(36).substring(2,15)}${t}`),this.refs[s])throw{id:"ref-collision",ref:s,component:r};this.refs[s]=new e(n,o),o.setAttribute("ref",s),n.ref={id:s,contact:(...e)=>this.contactWith(s,...e),update:()=>this.updateRef(s)}}i.replaceWith(s.content),n.onMount?.(o)})}}}}class o{content;options={generateRefIfNotSpecified:!1};ref;props={};data={};onInit(){}onRender(){}onMount(e){}onContact(...e){}onPropsParsed(){}onPropParsed(e,n){}}class i{type;required=!0;validate;constructor(e,n=!0,t){this.type=e,this.required=n,this.validate=t||(()=>!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"array":return Array.isArray(e);case"null":return null===e;default:return!1}}}class s{name;version;author;libs={};components={};constructor(e,n,t){this.name=e,this.author=n,this.version=t}add(e,n){const t="string"==typeof n?n:e.name;this.components[t]&&console.warn(new Error(`Component with name ${t} already exists.`)),this.components[t]=e}register(e,...n){this.libs[e.name]&&console.warn(new Error(`Library with name ${e.name} already exists in ${this.name}.`));const t=e.list().filter(e=>!(e.name in n));this.libs[e.name]={name:e.name,version:e.version,author:e.author,components:t.map(e=>e.name),dependencies:e.libs};for(const n of t)this.add(n.component,`${e.name}-${n.name}`)}get(e){return this.components[e]}lib(e){return this.libs[e]}list(){return Object.entries(this.components).map(([e,n])=>({component:n,name:e}))}}function a(){return new r}export{o as Component,s as Library,i as Prop,r as Signature,a 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'.","stack-overflow":"Stack Overflow detected: possible recursive component rendering.","render-async-failed":"Error during asynchronous rendering of the component #component."};let n=0;class r{components={};refs={};libs={};constructor(){}add(e,t){const n="string"==typeof t?t:e.name;this.components[n]&&console.warn(new Error(`Component with name ${n} already exists.`)),this.components[n]=e}register(e,...t){this.libs[e.name]&&console.warn(new Error(`Library with name ${e.name} already exists.`));const n=e.list().filter(e=>!(e.name in t));this.libs[e.name]={name:e.name,version:e.version,author:e.author,components:n.map(e=>e.name),dependencies:e.libs};for(const t of n)this.add(t.component,`${e.name}-${t.name}`)}lib(e){return this.libs[e]}libraries(){const e=e=>{let t=e.name;return e.version&&(t+=`@${e.version}`),e.author&&(t+=`#${e.author}`),t},t=(n,r=new Set)=>{const o={};for(const[s,i]of Object.entries(n)){const n=e(i);r.has(n)||(r.add(n),o[n]={components:i.components,dependencies:t(i.dependencies,r)})}return o};return t(this.libs)}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;let r={strings:Object.assign([],{raw:[]}),values:[]};try{r=n.render()}catch(e){if(e instanceof Error)throw{id:"unknown-from",from:n.name,err:e}}const o=document.createElement("template");(e=>{r instanceof Promise?r.then(t=>{o.content.appendChild(this.templateToElement(t)),e()}).catch(e=>{throw{id:"unknown-from",from:n.name,err:e}}):"object"==typeof r&&(o.content.appendChild(this.templateToElement(r)),e())})(()=>{if(1!==o.content.children.length)throw new Error(`Component '${n.name}' must render a single root element.`);const e=o.content.firstElementChild;this.render(o.content),n.onRender?.(),t.element.replaceWith(e),t.element=e,n.onMount?.(e)})}contact(e,n){new Promise((t,r)=>{try{const t=document.querySelector(e);if(!t)return void r({id:"element-not-found",selector:e});const o=document.createElement("div");o.innerHTML=t.innerHTML,this.render(o),t.replaceChildren(...Array.from(o.childNodes)),n&&n()}catch(e){e instanceof Error?e instanceof RangeError&&e.message.includes("stack")?r({id:"stack-overflow",err:e}):r({id:"unknown",err:e}):r(e)}}).catch(e=>{let n=t[e.id];throw Object.keys(e).filter(e=>!(e in["id","err"])).forEach(t=>{n=n.replace(new RegExp(`#${t}`,"gm"),String(e[t]))}),e.id in["unknown","unknown-from","render-async-failed"]?console.error(`[${e.id}] ${n}`,e.err):console.error(`[${e.id}] ${n}`),"Page rendering was interrupted by Signature due to the above error."})}templateToString(e){let t="";for(let n=0;n<e.strings.length;n++)t+=e.strings[n],n<e.values.length&&(t+=`\x3c!--si-mark-${n}--\x3e`);return console.log(t,e),t}fillTemplate(e,t){let n=document.createElement("template");return n.innerHTML=t,(()=>{let t,r=document.createTreeWalker(n.content,NodeFilter.SHOW_COMMENT),o=[];for(;t=r.nextNode();)/si-mark-\d+/gm.test(t.nodeValue??"")&&o.push(t);for(const t of o)t.replaceWith(document.createTextNode(String(e.values[Number((t.nodeValue??"").match(/si-mark-(\d+)/m)[1])])))})(),(()=>{let t,r=document.createTreeWalker(n.content,NodeFilter.SHOW_ELEMENT);for(;t=r.nextNode();)for(const n of Array.from(t.attributes))if(/<!--si-mark-\d+-->/gm.test(n.value)){const r=n.value.match(/si-mark-(\d+)/m);r&&t.setAttribute(n.name,String(e.values[Number(r[1])]))}})(),n}templateToElement(e){const t=this.templateToString(e),n=this.fillTemplate(e,t);if(1!==n.content.children.length)throw{id:"multiple-root-elements",elements:n.innerHTML};return n.content.firstElementChild}render(t){for(const r of Object.keys(this.components)){const o=this.components[r];for(const s of Array.from(t.querySelectorAll(r)).concat(Array.from(t.querySelectorAll(`[si-component="${r}"]`)))){const t=new o;if(t.onInit?.(),s instanceof HTMLElement){t.content=s.innerHTML.trim();for(const e of Object.keys(t.props)){const n=s.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;case"array":try{o=JSON.parse(n)}catch(t){throw{id:"invalid-value-for-property",component:r,prop:e,value:n,attr: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 i=document.createElement("template");let a={strings:Object.assign([],{raw:[]}),values:[]};try{a=t.render()}catch(e){if(e instanceof Error)throw{id:"unknown-from",from:t.name,err:e}}(e=>{if(a instanceof Promise)try{a.then(t=>{i.appendChild(this.templateToElement(t)),e()}).catch(e=>{throw{id:"unknown-from",from:t.name,err:e}})}catch(e){throw{id:"render-async-failed",component:r,err:e}}else"object"==typeof a&&(i.appendChild(this.templateToElement(a)),e())})(()=>{this.render(i.content),t.onRender?.();const o=i.firstElementChild;if(s.hasAttribute("ref")||t.options.generateRefIfNotSpecified){let i=s.getAttribute("ref");if(null===i&&(i=""),n++,""===i&&(i=`r${n}${Math.random().toString(36).substring(2,15)}${n}`),this.refs[i])throw{id:"ref-collision",ref:i,component:r};this.refs[i]=new e(t,o),o.setAttribute("ref",i),t.ref={id:i,contact:(...e)=>this.contactWith(i,...e),update:()=>this.updateRef(i)}}s.replaceWith(i.firstElementChild),console.log(s,i),t.onMount?.(o)})}}}}class o{content;options={generateRefIfNotSpecified:!1};ref;props={};data={};onInit(){}onRender(){}onMount(e){}onContact(...e){}onPropsParsed(){}onPropParsed(e,t){}}class s{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"array":return Array.isArray(e);case"null":return null===e;default:return!1}}}class i{name;version;author;libs={};components={};constructor(e,t,n){this.name=e,this.author=t,this.version=n}add(e,t){const n="string"==typeof t?t:e.name;this.components[n]&&console.warn(new Error(`Component with name ${n} already exists.`)),this.components[n]=e}register(e,...t){this.libs[e.name]&&console.warn(new Error(`Library with name ${e.name} already exists in ${this.name}.`));const n=e.list().filter(e=>!(e.name in t));this.libs[e.name]={name:e.name,version:e.version,author:e.author,components:n.map(e=>e.name),dependencies:e.libs};for(const t of n)this.add(t.component,`${e.name}-${t.name}`)}get(e){return this.components[e]}lib(e){return this.libs[e]}list(){return Object.entries(this.components).map(([e,t])=>({component:t,name:e}))}}function a(e,...t){return{strings:e,values:t}}function c(){return new r}export{o as Component,i as Library,s as Prop,r as Signature,c as default,a as html};

package/dist/Errors.js

@@ -7,6 +7,7 @@ const errorMessages = {
     "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'.",
-    "stack-overflow": "Stack Overflow detected: possible recursive component rendering."
+    "stack-overflow": "Stack Overflow detected: possible recursive component rendering.",
+    "render-async-failed": "Error during asynchronous rendering of the component #component.",
 };
 export default errorMessages;

package/dist/Signature.js

@@ -78,14 +78,6 @@ export default class Signature {
         };
         return resolve(this.libs);
     }
-    // /**
-    //  * Returns a reference.
-    //  * @param {string} name The name of the reference.
-    //  * @return {Element | undefined} The element associated with the reference, or undefined if it does not exist.
-    //  */
-    // public ref(name: string): Element | undefined {
-    // 	return this.refs[name]?.element;
-    // }
     /**
      * Contacts the Component.onContact method through its reference.
      * @param {string} name The name of the reference.
@@ -109,7 +101,10 @@ export default class Signature {
             throw new Error(`Ref with name ${name} does not exist.`);
         }
         const component = ref.instance;
-        let fragment = "";
+        let fragment = {
+            strings: Object.assign([], { raw: [] }),
+            values: []
+        };
         try {
             fragment = component.render();
         }
@@ -120,18 +115,18 @@ export default class Signature {
         }
         const template = document.createElement("template");
         ((next) => {
-            if (typeof fragment === "string") {
-                template.innerHTML = fragment.trim();
-                next();
-            }
-            else if (fragment instanceof Promise) {
+            if (fragment instanceof Promise) {
                 fragment.then((html) => {
-                    template.innerHTML = html.trim();
+                    template.content.appendChild(this.templateToElement(html));
                     next();
                 }).catch((err) => {
                     throw { id: "unknown-from", from: component.name, err: err };
                 });
             }
+            else if (typeof fragment === "object") {
+                template.content.appendChild(this.templateToElement(fragment));
+                next();
+            }
         })(() => {
             if (template.content.children.length !== 1) {
                 throw new Error(`Component '${component.name}' must render a single root element.`);
@@ -183,7 +178,7 @@ export default class Signature {
             Object.keys(err).filter(key => !(key in ["id", "err"])).forEach((key) => {
                 message = message.replace(new RegExp(`#${key}`, "gm"), String(err[key]));
             });
-            if (err.id in ["unknown", "unknown-from"]) {
+            if (err.id in ["unknown", "unknown-from", "render-async-failed"]) {
                 console.error(`[${err.id}] ${message}`, err.err);
             }
             else
@@ -191,6 +186,59 @@ export default class Signature {
             throw "Page rendering was interrupted by Signature due to the above error.";
         });
     }
+    templateToString(template) {
+        let body = "";
+        for (let i = 0; i < template.strings.length; i++) {
+            body += template.strings[i];
+            if (i < template.values.length) {
+                body += `<!--si-mark-${i}-->`;
+            }
+        }
+        console.log(body, template);
+        return body;
+    }
+    fillTemplate(template, markup) {
+        let body = document.createElement("template");
+        body.innerHTML = markup;
+        // Processing si-mark comments
+        (() => {
+            let walker = document.createTreeWalker(body.content, NodeFilter.SHOW_COMMENT);
+            let node;
+            let marks = [];
+            while ((node = walker.nextNode())) {
+                if (/si-mark-\d+/gm.test(node.nodeValue ?? "")) {
+                    marks.push(node);
+                }
+            }
+            for (const node of marks) {
+                node.replaceWith(document.createTextNode(String(template.values[Number((node.nodeValue ?? "").match(/si-mark-(\d+)/m)[1])])));
+            }
+        })();
+        // Processing si-mark attributes
+        (() => {
+            let walker = document.createTreeWalker(body.content, NodeFilter.SHOW_ELEMENT);
+            let node;
+            while ((node = walker.nextNode())) {
+                for (const attr of Array.from(node.attributes)) {
+                    if (/<!--si-mark-\d+-->/gm.test(attr.value)) {
+                        const match = attr.value.match(/si-mark-(\d+)/m);
+                        if (match) {
+                            node.setAttribute(attr.name, String(template.values[Number(match[1])]));
+                        }
+                    }
+                }
+            }
+        })();
+        return body;
+    }
+    templateToElement(template) {
+        const markup = this.templateToString(template);
+        const body = this.fillTemplate(template, markup);
+        if (body.content.children.length !== 1) {
+            throw { id: "multiple-root-elements", elements: body.innerHTML };
+        }
+        return body.content.firstElementChild;
+    }
     render(frame) {
         for (const com of Object.keys(this.components)) {
             const component = this.components[com];
@@ -288,7 +336,10 @@ export default class Signature {
                 }
                 // Create a template for rendering
                 const body = document.createElement("template");
-                let fragment = "";
+                let fragment = {
+                    strings: Object.assign([], { raw: [] }),
+                    values: []
+                };
                 try {
                     fragment = renderer.render();
                 }
@@ -298,30 +349,27 @@ export default class Signature {
                     }
                 }
                 ((next) => {
-                    if (typeof fragment === "string") {
-                        body.innerHTML = fragment.trim();
-                        next();
-                    }
-                    else if (fragment instanceof Promise) {
+                    if (fragment instanceof Promise) {
                         try {
                             fragment.then((html) => {
-                                body.innerHTML = html.trim();
+                                body.appendChild(this.templateToElement(html));
                                 next();
                             }).catch((err) => {
                                 throw { id: "unknown-from", from: renderer.name, err: err };
                             });
                         }
                         catch (err) {
-                            console.log(1);
+                            throw { id: "render-async-failed", component: com, err: err };
                         }
                     }
-                })(() => {
-                    if (body.content.children.length > 1) {
-                        throw { id: "multiple-root-elements", component: com, elements: body.innerHTML };
+                    else if (typeof fragment === "object") {
+                        body.appendChild(this.templateToElement(fragment));
+                        next();
                     }
+                })(() => {
                     this.render(body.content);
                     renderer.onRender?.(); // lifecycle hook
-                    const mountEl = body.content.firstElementChild;
+                    const mountEl = body.firstElementChild;
                     // Processing ref
                     if (el.hasAttribute("ref") || renderer.options.generateRefIfNotSpecified) {
                         let refName = el.getAttribute("ref");
@@ -344,7 +392,8 @@ export default class Signature {
                             update: () => this.updateRef(refName)
                         };
                     }
-                    el.replaceWith(body.content);
+                    el.replaceWith(body.firstElementChild);
+                    console.log(el, body);
                     renderer.onMount?.(mountEl); // lifecycle hook
                 });
             }

package/dist/d/Component.d.ts

@@ -1,4 +1,4 @@
-import component from "./types/Component.js";
+import component, { html } from "./types/Component.js";
 import Prop from "./types/Prop.js";
 import type { Options } from "./types/Component.js";
 import type { Ref } from "./types/Component.js";
@@ -9,7 +9,7 @@ export default abstract class Component implements component {
     ref?: Ref;
     readonly props: Record<string, Prop>;
     readonly data: Record<string, string | number | boolean | null>;
-    abstract render(): string | Promise<string>;
+    abstract render(): html | Promise<html>;
     onInit?(): void;
     onRender?(): void;
     onMount?(el: Element): void;

package/dist/d/Signature.d.ts

@@ -50,6 +50,9 @@ export default class Signature {
      * @param {() => void} [callback] Optional callback that will be called after rendering is complete.
      */
     contact(selector: string, callback?: () => void): void;
+    private templateToString;
+    private fillTemplate;
+    private templateToElement;
     private render;
 }
 export {};

package/dist/d/html.d.ts

@@ -0,0 +1,4 @@
+export default function html(strings: TemplateStringsArray, ...values: any[]): {
+    strings: TemplateStringsArray;
+    values: any[];
+};

package/dist/d/index.d.ts

@@ -4,3 +4,4 @@ export { default as Signature } from './Signature.js';
 export { default as Component } from './Component.js';
 export { default as Prop } from './Prop.js';
 export { default as Library } from './Library.js';
+export { default as html } from './html.js';

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

@@ -21,6 +21,10 @@ export type Ref = {
      */
     update: () => void;
 };
+export type html = {
+    strings: TemplateStringsArray;
+    values: any[];
+};
 interface Component {
     name: string;
     options: Options;
@@ -42,10 +46,10 @@ interface Component {
      */
     data: Record<string, string | number | boolean | null>;
     /**
-     * Returns the component as a string.
-     * @returns {string} The rendered component as a string.
+     * Returns the component as a string (template).
+     * @returns {html | Promise<html>} The rendered component as a string (template).
      */
-    render(): string | Promise<string>;
+    render(): html | Promise<html>;
     /**
      * Lifecycle hook that is called when the component is initialized.
      */

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

@@ -1,4 +1,4 @@
-type Errors = "unknown" | "unknown-from" | "element-not-found" | "prop-is-required" | "unsupported-type-for-property" | "invalid-value-for-property" | "multiple-root-elements" | "ref-collision" | "stack-overflow";
+type Errors = "unknown" | "unknown-from" | "element-not-found" | "prop-is-required" | "unsupported-type-for-property" | "invalid-value-for-property" | "multiple-root-elements" | "ref-collision" | "stack-overflow" | "render-async-failed";
 export { Errors };
 export interface error {
     id: Errors;
@@ -48,5 +48,10 @@ export interface StackOverflowError extends error {
     id: "stack-overflow";
     err?: Error;
 }
-type ErrorUnion = UnknownError | UnknownFromError | ElementNotFoundError | PropIsRequiredError | UnsupportedTypeForPropertyError | InvalidValueForPropertyError | MultipleRootElementsError | RefCollisionError | StackOverflowError;
+export interface RenderAsyncFailedError extends error {
+    id: "render-async-failed";
+    component: string;
+    err?: Error;
+}
+type ErrorUnion = UnknownError | UnknownFromError | ElementNotFoundError | PropIsRequiredError | UnsupportedTypeForPropertyError | InvalidValueForPropertyError | MultipleRootElementsError | RefCollisionError | StackOverflowError | RenderAsyncFailedError;
 export default ErrorUnion;

package/dist/html.js

@@ -0,0 +1,3 @@
+export default function html(strings, ...values) {
+    return { strings, values };
+}

package/dist/index.js

@@ -6,3 +6,4 @@ export { default as Signature } from './Signature.js';
 export { default as Component } from './Component.js';
 export { default as Prop } from './Prop.js';
 export { default as Library } from './Library.js';
+export { default as html } from './html.js';

package/package.json

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

package/src/Component.ts

@@ -1,4 +1,4 @@
-import component from "./types/Component.js";
+import component, {html} from "./types/Component.js";
 import Prop from "./types/Prop.js";
 
 import type {Options} from "./types/Component.js";
@@ -17,7 +17,7 @@ export default abstract class Component implements component {
 	readonly props: Record<string, Prop> = {};
 	readonly data: Record<string, string | number | boolean | null> = {};
 
-	abstract render(): string | Promise<string>;
+	abstract render(): html | Promise<html>;
 
 	onInit?(): void {
 	};

package/src/Errors.ts

@@ -9,7 +9,8 @@ const errorMessages: Record<Errors, string> = {
 	"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'.",
-	"stack-overflow": "Stack Overflow detected: possible recursive component rendering."
+	"stack-overflow": "Stack Overflow detected: possible recursive component rendering.",
+	"render-async-failed": "Error during asynchronous rendering of the component #component.",
 }
 
 export default errorMessages;

package/src/Signature.ts

@@ -3,6 +3,7 @@ import Ref from "./Ref.js";
 import ErrorUnion from "./types/Errors.js";
 import Errors from "./Errors.js";
 import Library, {LibMeta} from "./Library.js";
+import {html} from "./types/Component";
 
 let _counter = 0;
 
@@ -107,15 +108,6 @@ export default class Signature {
 		return resolve(this.libs);
 	}
 
-	// /**
-	//  * Returns a reference.
-	//  * @param {string} name The name of the reference.
-	//  * @return {Element | undefined} The element associated with the reference, or undefined if it does not exist.
-	//  */
-	// public ref(name: string): Element | undefined {
-	// 	return this.refs[name]?.element;
-	// }
-
 	/**
 	 * Contacts the Component.onContact method through its reference.
 	 * @param {string} name The name of the reference.
@@ -145,7 +137,10 @@ export default class Signature {
 
 		const component = ref.instance;
 
-		let fragment: string | Promise<string> = "";
+		let fragment: html | Promise<html> = {
+			strings: Object.assign([], {raw: []}) as TemplateStringsArray,
+			values: []
+		};
 
 		try {
 			fragment = component.render();
@@ -158,16 +153,16 @@ export default class Signature {
 		const template = document.createElement("template");
 
 		((next: () => void) => {
-			if (typeof fragment === "string") {
-				template.innerHTML = fragment.trim();
-				next();
-			} else if (fragment instanceof Promise) {
-				fragment.then((html: string) => {
-					template.innerHTML = html.trim();
+			if (fragment instanceof Promise) {
+				fragment.then((html: html) => {
+					template.content.appendChild(this.templateToElement(html))
 					next();
 				}).catch((err: Error) => {
 					throw {id: "unknown-from", from: component.name, err: err} as ErrorUnion;
 				});
+			} else if (typeof fragment === "object") {
+				template.content.appendChild(this.templateToElement(fragment));
+				next();
 			}
 		})(() => {
 			if (template.content.children.length !== 1) {
@@ -230,7 +225,7 @@ export default class Signature {
 				message = message.replace(new RegExp(`#${key}`, "gm"), String(err[key as keyof typeof err]));
 			});
 
-			if (err.id in ["unknown", "unknown-from"]) {
+			if (err.id in ["unknown", "unknown-from", "render-async-failed"]) {
 				console.error(`[${err.id}] ${message}`, (err as {
 					err: Error
 				}).err);
@@ -240,6 +235,86 @@ export default class Signature {
 		});
 	}
 
+	private templateToString(template: html): string {
+		let body = "";
+
+		for (let i = 0; i < template.strings.length; i++) {
+			body += template.strings[i];
+
+			if (i < template.values.length) {
+				body += `<!--si-mark-${i}-->`
+			}
+		}
+		console.log(body, template)
+		return body;
+	}
+
+	private fillTemplate(template: html, markup: string): HTMLTemplateElement {
+		let body = document.createElement("template");
+		body.innerHTML = markup;
+
+		// Processing si-mark comments
+		(() => {
+			let walker = document.createTreeWalker(body.content, NodeFilter.SHOW_COMMENT);
+
+			let node: ChildNode;
+
+			let marks: ChildNode[] = [];
+
+			while ((node = walker.nextNode() as ChildNode)) {
+				if (/si-mark-\d+/gm.test(node.nodeValue ?? "")) {
+					marks.push(node);
+				}
+			}
+
+			for (const node of marks) {
+				node.replaceWith(
+					document.createTextNode(
+						String(
+							template.values[Number(
+								(
+									(node.nodeValue ?? "").match(/si-mark-(\d+)/m) as string[]
+								)[1]
+							)]
+						)
+					)
+				);
+			}
+		})();
+
+		// Processing si-mark attributes
+		(() => {
+			let walker = document.createTreeWalker(body.content, NodeFilter.SHOW_ELEMENT);
+
+			let node: Element;
+
+			while ((node = walker.nextNode() as Element)) {
+				for (const attr of Array.from(node.attributes)) {
+					if (/<!--si-mark-\d+-->/gm.test(attr.value)) {
+						const match: RegExpMatchArray = attr.value.match(/si-mark-(\d+)/m) as RegExpMatchArray;
+
+						if (match) {
+							node.setAttribute(attr.name, String(template.values[Number(match[1])]))
+						}
+					}
+				}
+			}
+		})();
+
+		return body;
+	}
+
+	private templateToElement(template: html): HTMLElement {
+		const markup: string = this.templateToString(template);
+		const body: HTMLTemplateElement = this.fillTemplate(template, markup);
+
+		if (body.content.children.length !== 1) {
+			throw {id: "multiple-root-elements", elements: body.innerHTML} as ErrorUnion;
+		}
+
+		return (body.content.firstElementChild as HTMLElement);
+	}
+
 	private render(frame: Element | DocumentFragment): void {
 		for (const com of Object.keys(this.components)) {
 			const component: ComponentConstructor = this.components[com];
@@ -346,7 +421,10 @@ export default class Signature {
 				// Create a template for rendering
 				const body = document.createElement("template");
 
-				let fragment: string | Promise<string> = "";
+				let fragment: html | Promise<html> = {
+					strings: Object.assign([], {raw: []}) as TemplateStringsArray,
+					values: []
+				};
 
 				try {
 					fragment = renderer.render();
@@ -357,30 +435,27 @@ export default class Signature {
 				}
 
 				((next: () => void) => {
-					if (typeof fragment === "string") {
-						body.innerHTML = fragment.trim();
-						next();
-					} else if (fragment instanceof Promise) {
+					if (fragment instanceof Promise) {
 						try {
-							fragment.then((html: string) => {
-								body.innerHTML = html.trim();
+							fragment.then((html: html) => {
+								body.appendChild(this.templateToElement(html));
 								next();
 							}).catch((err: Error) => {
 								throw {id: "unknown-from", from: renderer.name, err: err} as ErrorUnion;
 							});
 						} catch (err) {
-							console.log(1)
+							throw {id: "render-async-failed", component: com, err: err} as ErrorUnion;
 						}
+					} else if (typeof fragment === "object") {
+						body.appendChild(this.templateToElement(fragment));
+						next();
 					}
 				})(() => {
-					if (body.content.children.length > 1) {
-						throw {id: "multiple-root-elements", component: com, elements: body.innerHTML} as ErrorUnion;
-					}
-
 					this.render(body.content);
+
 					renderer.onRender?.(); // lifecycle hook
 
-					const mountEl: Element = body.content.firstElementChild as Element;
+					const mountEl: Element = body.firstElementChild as Element;
 
 					// Processing ref
 					if (el.hasAttribute("ref") || renderer.options.generateRefIfNotSpecified) {
@@ -412,8 +487,8 @@ export default class Signature {
 						};
 					}
 
-					el.replaceWith(body.content);
-
+					el.replaceWith(body.firstElementChild as Element);
+					console.log(el, body)
 					renderer.onMount?.(mountEl); // lifecycle hook
 				});
 			}

package/src/html.ts

@@ -0,0 +1,6 @@
+export default function html(strings: TemplateStringsArray, ...values: any[]): {
+	strings: TemplateStringsArray,
+	values: any[]
+} {
+	return {strings, values};
+}

package/src/index.ts

@@ -7,4 +7,5 @@ export default function (): Signature {
 export {default as Signature} from './Signature.js';
 export {default as Component} from './Component.js';
 export {default as Prop} from './Prop.js';
-export {default as Library} from './Library.js';
+export {default as Library} from './Library.js';
+export {default as html} from './html.js';

package/src/types/Component.ts

@@ -26,6 +26,11 @@ export type Ref = {
 	update: () => void;
 }
 
+export type html = {
+	strings: TemplateStringsArray;
+	values: any[];
+}
+
 interface Component {
 	name: string;
 
@@ -54,10 +59,10 @@ interface Component {
 
 
 	/**
-	 * Returns the component as a string.
-	 * @returns {string} The rendered component as a string.
+	 * Returns the component as a string (template).
+	 * @returns {html | Promise<html>} The rendered component as a string (template).
 	 */
-	render(): string | Promise<string>;
+	render(): html | Promise<html>;
 
 	/**
 	 * Lifecycle hook that is called when the component is initialized.

package/src/types/Errors.ts

@@ -7,7 +7,9 @@ type Errors =
 	| "invalid-value-for-property"
 	| "multiple-root-elements"
 	| "ref-collision"
-	| "stack-overflow";
+	| "stack-overflow"
+	| "render-async-failed";
+
 
 export {Errors};
 
@@ -69,6 +71,12 @@ export interface StackOverflowError extends error {
 	err?: Error;
 }
 
+export interface RenderAsyncFailedError extends error {
+	id: "render-async-failed";
+	component: string;
+	err?: Error;
+}
+
 type ErrorUnion =
 	UnknownError
 	| UnknownFromError
@@ -78,6 +86,7 @@ type ErrorUnion =
 	| InvalidValueForPropertyError
 	| MultipleRootElementsError
 	| RefCollisionError
-	| StackOverflowError;
+	| StackOverflowError
+	| RenderAsyncFailedError;
 
 export default ErrorUnion;