web-signature 0.2.1 → 0.2.2

package/README.MD

@@ -29,23 +29,33 @@ npm install
 npm run dev
 ```
 
+* [Signature](#signature)
+* [Quick Start](#quick-start)
+* [Introduction](#introduction)
+	* [Briefly about Signature](#briefly-about-signature)
+	* [About Component](#about-component)
+	* [Quick about the Library](#quick-about-the-library)
+	* [See more here](#see-more-here)
+
 # 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.
+- [Signature](https://github.com/Pinbib/Signature/docs/Signature.md) - which processes the entire page and components.
+- [Component](https://github.com/Pinbib/Signature/docs/Component.md) - which defines a standard structure for any
+  element.
+- [Prop](https://github.com/Pinbib/Signature/docs/Prop.md) - which defines properties for components.
+- [Library](https://github.com/Pinbib/Signature/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)
+## Briefly about [Signature](https://github.com/Pinbib/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.
+The [signature](https://github.com/Pinbib/Signature/docs/Signature.md) is the main class that is responsible for
+processing the entire page. It is used to
+add [components](https://github.com/Pinbib/Signature/docs/Component.md),
+register [libraries](https://github.com/Pinbib/Signature/docs/Library.md), and essentially render the page.
 
 ```ts 
 // Creating a Signature instance
@@ -56,9 +66,11 @@ const si = new Signature();
 ```
 
 To add a component, use the
-[`Signature.add(component: ComponentConstructor, name?: string)`](./docs/Signature.md#signatureadd) method, which takes
+[
+`Signature.add(component: ComponentConstructor, name?: string)`](https://github.com/Pinbib/Signature/docs/Signature.md#signatureadd)
+method, which takes
 the
-[component](./docs/Component.md) class and its name. For example:
+[component](https://github.com/Pinbib/Signature/docs/Component.md) class and its name. For example:
 
 ```ts
 import {Signature, Component} from 'web-signature';
@@ -73,13 +85,13 @@ 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,
+**Although the [component](https://github.com/Pinbib/Signature/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)
+To register a [library](https://github.com/Pinbib/Signature/docs/Library.md), the [
+`Signature.register(library: Library)`](https://github.com/Pinbib/Signature/docs/Signature.md#signatureregister)
 method is used, which takes an
-instance of the [Library](./docs/Library.md).
+instance of the [Library](https://github.com/Pinbib/Signature/docs/Library.md).
 For example:
 
 ```ts
@@ -91,7 +103,7 @@ si.register(new MyLibrary());
 ```
 
 For rendering the page there is a [
-`Signature.contact(selector: string, callback?)`](./docs/Signature.md#signaturecontact)
+`Signature.contact(selector: string, callback?)`](https://github.com/Pinbib/Signature/docs/Signature.md#signaturecontact)
 method. For example:
 
 ```ts
@@ -104,15 +116,17 @@ si.contact('#app', () => {
 });
 ```
 
-## About [Component](./docs/Component.md)
+## About [Component](https://github.com/Pinbib/Signature/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
+It has a main method [`Component.render()`](https://github.com/Pinbib/Signature/docs/Component.md#componentrender), and
+component lifecycle hooks such
 as [
-`Component.onMount()`](./docs/Component.md#componentonmount).
+`Component.onMount()`](https://github.com/Pinbib/Signature/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
+To create a component, you need to inherit the [`Component`](https://github.com/Pinbib/Signature/docs/Component.md)
+class and implement the
+[`Component.render(): string`](https://github.com/Pinbib/Signature/docs/Component.md#componentrender) method
 and the
 `name` field.
 Let's create a simple component that simply displays text:
@@ -141,8 +155,10 @@ 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,
+element, if the ref is not specified, the [Signature](https://github.com/Pinbib/Signature/docs/Signature.md) will not
+remember the component instance.
+And to track events, we will use the [
+`Component.onMount(el: Element)`](https://github.com/Pinbib/Signature/docs/Component.md#componentonmount) hook,
 which is
 called after the component has been
 added to
@@ -208,7 +224,8 @@ class Counter extends Component {
 ```
 
 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`.
+using [Props](https://github.com/Pinbib/Signature/docs/Prop.md). We need to create
+a [Prop](https://github.com/Pinbib/Signature/docs/Prop.md) `step` with type `number`.
 
 ```ts
 import {Signature, Component, Prop, html} from 'web-signature';
@@ -264,14 +281,17 @@ Now, when you click the button, the counter will increase by the specified numbe
 
 ## 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
+The [Library](https://github.com/Pinbib/Signature/docs/Library.md) class allows you to create a set
+of [components](https://github.com/Pinbib/Signature/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.
+It has no other purpose than to facilitate the registration
+of [components](https://github.com/Pinbib/Signature/docs/Component.md)
+in [Signature](https://github.com/Pinbib/Signature/docs/Signature.md),
+and avoiding [component](https://github.com/Pinbib/Signature/docs/Component.md) name collisions by grouping them.
 
-Let's create a [library](./docs/Library.md) that will contain our `Counter` and `StepCounter` components:
+Let's create a [library](https://github.com/Pinbib/Signature/docs/Library.md) that will contain our `Counter` and
+`StepCounter` components:
 
 ```ts
 import {Library} from 'web-signature';
@@ -290,8 +310,8 @@ 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)
+To register the library in [Signature](https://github.com/Pinbib/Signature/docs/Signature.md#signatureregister), use the
+[`Signature.register(library: Library)`](https://github.com/Pinbib/Signature/docs/Signature.md#signatureregister)
 method:
 
 ```ts
@@ -308,11 +328,13 @@ 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
+Now you can use the components from the [library](https://github.com/Pinbib/Signature/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]`.
+is used as a prefix for the [component](https://github.com/Pinbib/Signature/docs/Component.md) name
+`[libName]-[componentName]`.
 
 ```html
 
@@ -322,4 +344,4 @@ is used as a prefix for the [component](./docs/Component.md) name `[libName]-[co
 </div>
 ```
 
-## [See more here](./docs)
+## [See more here](https://github.com/Pinbib/Signature/docs)

package/bundle/index.js

@@ -214,7 +214,6 @@ class Signature {
                 body += `<!--si-mark-${i}-->`;
             }
         }
-        console.log(body, template);
         return body;
     }
     fillTemplate(template, markup) {
@@ -413,7 +412,6 @@ class Signature {
                         };
                     }
                     el.replaceWith(body.firstElementChild);
-                    console.log(el, body);
                     renderer.onMount?.(mountEl); // lifecycle hook
                 });
             }

package/bundle/index.min.js

@@ -1 +1 @@
-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};
+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 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),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/Signature.js

@@ -194,7 +194,6 @@ export default class Signature {
                 body += `<!--si-mark-${i}-->`;
             }
         }
-        console.log(body, template);
         return body;
     }
     fillTemplate(template, markup) {
@@ -393,7 +392,6 @@ export default class Signature {
                         };
                     }
                     el.replaceWith(body.firstElementChild);
-                    console.log(el, body);
                     renderer.onMount?.(mountEl); // lifecycle hook
                 });
             }

package/package.json

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

package/src/Signature.ts

@@ -245,7 +245,7 @@ export default class Signature {
 				body += `<!--si-mark-${i}-->`
 			}
 		}
-		console.log(body, template)
+		
 		return body;
 	}
 
@@ -488,7 +488,7 @@ export default class Signature {
 					}
 
 					el.replaceWith(body.firstElementChild as Element);
-					console.log(el, body)
+
 					renderer.onMount?.(mountEl); // lifecycle hook
 				});
 			}