vaderjs 1.3.5 → 1.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vaderjs",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "A Reactive Framework for Building Content Rich Single-Page Applications (SPA)",
   "main": "index.js",
   "scripts": {

package/vader-min.js

@@ -1 +1 @@
-let dom=[],states={},worker=new Worker(new URL("./worker.js",import.meta.url));export const useRef=t=>{const e=document.querySelector(`[ref="${t}"]`);return{current:e,update:t=>{const s=(new DOMParser).parseFromString(t,"text/html").body.firstChild;if(e){!s.isEqualNode(e)&&e.parentNode.replaceChild(s,e)}}}};let components=[];export class Component{constructor(){this.states={},this.name=this.constructor.name,this.executedEffects={},this.storedProps={},this.componentMounted=!1,this.hasMounted=!1,this.$_signal_subscribers=[],this.$_signal_subscribers_ran=[],this.effects={},this.$_useStore_subscribers=[],this.init(),this.Componentcontent=null,this.$_signal_dispatch_event=new CustomEvent("SignalDispatch",{detail:{hasUpdated:!1,state:null}}),this.$_signal_dispatch_cleanup_event=new CustomEvent("Signal_Cleanup_Dispatch",{detail:{state:null,lastState:null}}),this.snapshots=[],this.dom=[],this.cfr=!1}adapter(t){}init(){this.registerComponent()}registerComponent(){components.push(this)}setState(t,e){this.states[t]=e,this.updateComponent()}unmount(){this.componentMounted=!1,this.componentWillUnmount(),document.querySelector(`[data-component="${this.name}"]`).remove(),document.querySelector(`[data-component="${this.name}"]`)||(components=components.filter((t=>t.name!==this.name)))}componentUpdate(t,e,s){}componentDidMount(){}componentWillUnmount(){}signal=(t,e)=>{let s=!1,[n,i]=this.useState(t,e,(()=>{if(this.$_signal_subscribers.length>0){for(var t=0;t<this.$_signal_subscribers.length;t++)if(!s){if(this.$_signal_subscribers[t].runonce&&this.$_signal_subscribers_ran.includes(this.$_signal_subscribers[t]))break;return this.$_signal_subscribers[t].function(n),void this.$_signal_subscribers_ran.push(this.$_signal_subscribers[t])}}else this.$_signal_dispatch_event.detail.hasUpdated=!0,this.$_signal_dispatch_event.detail.state=n,window.dispatchEvent(this.$_signal_dispatch_event)}));return this.$_signal_subscribe=(t,e)=>(this.$_signal_subscribers.push({function:t,runonce:e}),t),this.$_signal_cleanup=t=>{this.lastState=n,this.$_signal_subscribers=this.$_signal_subscribers.filter((e=>e.function!==t)),this.$_signal_dispatch_cleanup_event.detail.state=this.states,this.$_signal_dispatch_cleanup_event.detail.lastState=this.lastState,window.dispatchEvent(this.$_signal_dispatch_event)},this.$_signal_dispatch=()=>{for(var t=0;t<this.$_signal_subscribers.length&&(!this.$_signal_subscribers[t].runonce||!this.$_signal_subscribers_ran.includes(this.$_signal_subscribers[t]));t++)this.$_signal_subscribers[t].function(n),this.$_signal_subscribers_ran.push(this.$_signal_subscribers[t])},this.$_signal_get=()=>n,this.$_signal_call=()=>{s=!0,this.$_signal_dispatch()},this.$_signal_set=t=>{i(t)},{subscribe:this.$_signal_subscribe,cleanup:this.$_signal_cleanup,dispatch:this.$_signal_dispatch,call:this.$_signal_call,set:this.$_signal_set,get:this.$_signal_get}};useAuth(t){let e=t.rulesets;if(!e)throw new Error("No rulesets provided");let s=t.user,n={can:t=>{let n=!1;return e.forEach((e=>{e.action===t&&e.condition(s)&&(n=!0)})),n},hasRole:t=>s.role&&s.role.includes(t),canWithRole:(t,e)=>n.can(t)&&n.hasRole(e),assignRule:t=>{e.some((e=>e.action===t.action))||e.push(t)},revokeRule:t=>{e=e.filter((e=>e.action!==t))},canAnyOf:t=>t.some((t=>n.can(t))),canAllOf:t=>t.every((t=>n.can(t))),canGroup:(t,e="any")=>"any"===e?n.canAnyOf(t):n.canAllOf(t)};return n}useReducer(t,e,s){return this.states[t]||(this.states[t]=s),[this.states[t],s=>{this.states[t]=e(this.states[t],s),this.updateComponent()}]}runEffects(){Object.keys(this.effects).forEach((t=>{this.effects[t].forEach((t=>{this.executedEffects[t]||(t(),this.executedEffects[t]=!0)}))}))}useSyncStore(t,e){let[s,n]=this.useState(t,e||localStorage.getItem(`$_vader_${t}`,(e=>{localStorage.setItem(`$_vader_${t}`,JSON.stringify(e)),this.$_useStore_subscribers.forEach((t=>{t(e)}))}))||{});return{getField:t=>s[t],setField:(t,e)=>{const i={...s,[t]:e};n(i)},subscribe:t=>this.$_useStore_subscribers.push(t),clear:t=>{let e=s;delete e[t],n(e)}}}useState(t,e,s=null){return this.states[t]||(this.states[t]=e),[this.states[t],e=>{this.states[t]=e,this.updateComponent(),"function"==typeof s&&s()}]}useRef(t){const e=this.dom[t];return{current:()=>e,update:t=>{const s=(new DOMParser).parseFromString(t,"text/html").body.firstChild;if(e){!s.isEqualNode(e)&&e.parentNode.replaceChild(s,e)}}}}useEffect(t,e){return this.effects[this.name]||(this.effects[this.name]=[]),this.effects[this.name].push(t),e.length>0?e.forEach((t=>{if(t.set)throw new Error("signal found, do not use effect and signals at the same time - signals are more efficient")})):this.hasMounted||(t(),this.hasMounted=!0),{cleanup:()=>{this.effects[this.name]=this.effects[this.name].filter((e=>e!==t))}}}$Function(t){let e=t.name;return e||(e="anonymous"+Math.floor(1e17*Math.random())),window[e]=t,`window.${e}()`}updateComponent(){const t=document.createDocumentFragment();Object.keys(components).forEach((async e=>{const{name:s}=components[e];let n=document.querySelector(`[data-component="${s}"]`),i={name:s,time:(new Date).getTime(),prev_state:this.states,prev_props:this.storedProps,content:n.innerHTML};if(!n)return;const r=await new Function("useState","useEffect","useAuth","useReducer","useSyncStore","signal","rf","props","render","return `"+await this.render()+"`;")(this.useState,this.useEffect,this.useAuth,this.useReducer,this.useSyncStore,this.signal,this.render);if(r!==n.innerHTML){if(this.snapshots.length>0){this.snapshots[this.snapshots.length-1]!==i&&this.snapshots.push(i)}else this.snapshots.push(i);this.componentUpdate(i.prev_state,i.prev_props,i.content),t.appendChild(document.createRange().createContextualFragment(r)),n.innerHTML="",n.appendChild(t),this.runEffects()}}))}validateClassName(t){return/^[a-zA-Z0-9-_]+$/.test(t)}html(t,...e){let s=setInterval((()=>{document.querySelector(`[data-component="${this.name}"]`)&&(clearInterval(s),this.componentMounted=!0,document.querySelector(`[data-component="${this.name}"]`)?.querySelectorAll("*").forEach((t=>{t.hasAttribute("ref")&&(this.dom[t.getAttribute("ref")]=t)})),this.componentDidMount())}),100),n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("data-component-script",this.name),worker.postMessage({strings:t,args:e,location:window.location.origin+window.location.pathname.replace(/\/[^\/]*$/,"")+"/public/",name:this.name});let i=new Promise(((t,e)=>{worker.onmessage=e=>{if(e.data.error)throw new Error(e.data.error);this.dom;let s=e.data.js,n=e.data.template;const i=this.useState.bind(this),r=this.useEffect.bind(this),a=this.useReducer.bind(this),o=this.useAuth.bind(this),c=this.useSyncStore.bind(this),u=this.signal.bind(this),h=this.$Function.bind(this);let l=this.states;const d=this.useRef.bind(this);new Function("useState","useEffect","useAuth","useReducer","useSyncStore","signal","$Function","dom","render","states","useRef",s)(i,r,o,a,c,u,h,this.dom,this.render,this.states,d),t(handletemplate(new Function("useRef","states","signal","useState","useReducer","useAuth","useSyncStore","useRef","$Function","return`"+n+"`")(d,l,u,i,a,o,c,d,h)))},worker.onerror=t=>{e(t)}}));return i}async render(t){}}const Vader={Component:Component,useRef:useRef};export const component=()=>new Component;export const rf=(t,e)=>{window[t]=e};let cache={};async function handletemplate(t){let e=(new DOMParser).parseFromString(t,"text/html"),s=e.documentElement.querySelectorAll("*");if(s.length>0)for(var n=0;n<s.length;n++)if("INCLUDE"===s[n].nodeName){if(!s[n].getAttribute("src")||""===s[n].getAttribute("src"))throw new Error("Include tag must have src attribute");let t=s[n].getAttribute("src")?.split("/").pop()?.split(".")[0],i=await include(s[n].getAttribute("src"));i=i.replace(/`/g,"\\`"),cache[s[n].getAttribute("src")]=i,i=new Function(`return \`${i}\`;`)();let r=(new DOMParser).parseFromString(i,"text/html");r.querySelectorAll("include").forEach((t=>{t.remove()})),e.querySelectorAll(t).forEach((t=>{if(t.attributes.length>0)for(var s=0;s<t.attributes.length;s++){let e="{{"+t.attributes[s].name+"}}";r.body.innerHTML.includes(e)&&(r.body.innerHTML=r.body.innerHTML.replaceAll(e,t.attributes[s].value))}if(t.children.length>0&&r.body.querySelector("slot"))for(s=0;s<t.children.length;s++){r.body.querySelectorAll("slot").forEach((e=>{let n=e.getAttribute("id");(t.hasAttribute("key")&&t.getAttribute("key")===n||!t.hasAttribute("key")&&t.nodeName===n)&&t.children[s].innerHTML.length>0&&(e.outerHTML=t.children[s].innerHTML)}))}e.body.querySelectorAll("include").forEach((t=>{t.remove()})),e.body.outerHTML=e.body.outerHTML.replace(/`/g,"\\`"),e.body.outerHTML=e.body.outerHTML.replace(t.outerHTML,new Function(`return \`${r.body.outerHTML}\`;`)())}))}return e.body.outerHTML=e.body.outerHTML.replace(/`/g,"\\`"),t=new Function(`return \`${e.body.outerHTML}\`;`)()}export const include=async t=>(!t.startsWith("/")||t.includes("/src/")||document.documentElement.outerHTML.trim().includes("\x3c!-- #vader-disable_relative-paths --\x3e")||(t="/src/"+t),cache[t]?cache[t]:fetch(`./${t}`).then((e=>{if(404===e.status)throw new Error(`No file found at ${t}`);return e.text()})).then((async e=>(cache[t]=e,e))));export default Vader;
+let dom=[],states={},worker=new Worker(new URL("./worker.js",import.meta.url));export const useRef=t=>{let e=document.querySelector(`[ref="${t}"]`),s=t=>{let s=new DOMParser().parseFromString(t,"text/html"),n=s.body.firstChild;if(e){let i=!n.isEqualNode(e);i&&e.parentNode.replaceChild(n,e)}};return{current:e,update:s}};let components=[];export class Component{constructor(){this.states={},this.name=this.constructor.name,this.executedEffects={},this.storedProps={},this.componentMounted=!1,this.hasMounted=!1,this.$_signal_subscribers=[],this.$_signal_subscribers_ran=[],this.effects={},this.$_useStore_subscribers=[],this.init(),this.Componentcontent=null,this.$_signal_dispatch_event=new CustomEvent("SignalDispatch",{detail:{hasUpdated:!1,state:null}}),this.$_signal_dispatch_cleanup_event=new CustomEvent("Signal_Cleanup_Dispatch",{detail:{state:null,lastState:null}}),this.snapshots=[],this.dom=[],this.cfr=!1}adapter(t){}init(){this.registerComponent()}registerComponent(){components.push(this)}setState(t,e){this.states[t]=e,this.updateComponent()}unmount(){this.componentMounted=!1,this.componentWillUnmount(),document.querySelector(`[data-component="${this.name}"]`).remove(),document.querySelector(`[data-component="${this.name}"]`)||(components=components.filter(t=>t.name!==this.name))}componentUpdate(t,e,s){}componentDidMount(){}componentWillUnmount(){}signal=(t,e)=>{let s=!1,[n,i]=this.useState(t,e,()=>{if(this.$_signal_subscribers.length>0){for(var t=0;t<this.$_signal_subscribers.length;t++)if(!s){if(this.$_signal_subscribers[t].runonce&&this.$_signal_subscribers_ran.includes(this.$_signal_subscribers[t]))break;this.$_signal_subscribers[t].function(n),this.$_signal_subscribers_ran.push(this.$_signal_subscribers[t]);return}}else this.$_signal_dispatch_event.detail.hasUpdated=!0,this.$_signal_dispatch_event.detail.state=n,window.dispatchEvent(this.$_signal_dispatch_event)});return this.$_signal_subscribe=(t,e)=>(this.$_signal_subscribers.push({function:t,runonce:e}),t),this.$_signal_cleanup=t=>{this.lastState=n,this.$_signal_subscribers=this.$_signal_subscribers.filter(e=>e.function!==t),this.$_signal_dispatch_cleanup_event.detail.state=this.states,this.$_signal_dispatch_cleanup_event.detail.lastState=this.lastState,window.dispatchEvent(this.$_signal_dispatch_event)},this.$_signal_dispatch=()=>{for(var t=0;t<this.$_signal_subscribers.length&&!(this.$_signal_subscribers[t].runonce&&this.$_signal_subscribers_ran.includes(this.$_signal_subscribers[t]));t++)this.$_signal_subscribers[t].function(n),this.$_signal_subscribers_ran.push(this.$_signal_subscribers[t])},this.$_signal_get=()=>n,this.$_signal_call=()=>{s=!0,this.$_signal_dispatch()},this.$_signal_set=t=>{i(t)},{subscribe:this.$_signal_subscribe,cleanup:this.$_signal_cleanup,dispatch:this.$_signal_dispatch,call:this.$_signal_call,set:this.$_signal_set,get:this.$_signal_get}};useAuth(t){let e=t.rulesets;if(!e)throw Error("No rulesets provided");let s=t.user,n={can(t){let n=!1;return e.forEach(e=>{e.action===t&&e.condition(s)&&(n=!0)}),n},hasRole:t=>s.role&&s.role.includes(t),canWithRole:(t,e)=>n.can(t)&&n.hasRole(e),assignRule(t){e.some(e=>e.action===t.action)||e.push(t)},revokeRule(t){e=e.filter(e=>e.action!==t)},canAnyOf:t=>t.some(t=>n.can(t)),canAllOf:t=>t.every(t=>n.can(t)),canGroup:(t,e="any")=>"any"===e?n.canAnyOf(t):n.canAllOf(t)};return n}useReducer(t,e,s){return this.states[t]||(this.states[t]=s),[this.states[t],s=>{this.states[t]=e(s),this.updateComponent()}]}runEffects(){Object.keys(this.effects).forEach(t=>{this.effects[t].forEach(t=>{this.executedEffects[t]||(t(),this.executedEffects[t]=!0)})})}useSyncStore(t,e){let[s,n]=this.useState(t,e||localStorage.getItem(`$_vader_${t}`,e=>{localStorage.setItem(`$_vader_${t}`,JSON.stringify(e)),this.$_useStore_subscribers.forEach(t=>{t(e)})})||{}),i=t=>s[t],r=(t,e)=>{let i={...s,[t]:e};n(i)},a=t=>this.$_useStore_subscribers.push(t),o=t=>{let e=s;delete e[t],n(e)};return{getField:i,setField:r,subscribe:a,clear:o}}useState(t,e,s=null){return this.states[t]||(this.states[t]=e),[this.states[t],e=>{this.states[t]=e,this.updateComponent(),"function"==typeof s&&s()}]}useRef(t){let e=this.dom[t],s=t=>{let s=new DOMParser().parseFromString(t,"text/html"),n=s.body.firstChild;if(e){let i=!n.isEqualNode(e);i&&e.parentNode.replaceChild(n,e)}};return{current:e,update:s}}useEffect(t,e){return this.effects[this.name]||(this.effects[this.name]=[]),this.effects[this.name].push(t),e.length>0?e.forEach(t=>{if(t.set)throw Error("signal found, do not use effect and signals at the same time - signals are more efficient")}):this.hasMounted||(t(),this.hasMounted=!0),{cleanup:()=>{this.effects[this.name]=this.effects[this.name].filter(e=>e!==t)}}}$Function(t){let e=t.name;return e||(e="anonymous"+Math.floor(1e17*Math.random())),window[e]=t,`window.${e}()`}updateComponent(){let t=document.createDocumentFragment();Object.keys(components).forEach(async e=>{let{name:s}=components[e],n=document.querySelector(`[data-component="${s}"]`),i=new Date().getTime(),r={name:s,time:i,prev_state:this.states,prev_props:this.storedProps,content:n.innerHTML};if(!n)return;let a=this.useState.bind(this),o=this.useEffect.bind(this),h=this.useReducer.bind(this),l=this.useAuth.bind(this),u=this.useSyncStore.bind(this),c=this.signal.bind(this),d=this.$Function.bind(this),p=this.useRef.bind(this),f=Function("useState","useEffect","useAuth","useReducer","useSyncStore","signal","$Function","dom","render","state","useRef","return`"+await this.render()+"`")(a,o,l,h,u,c,d,dom,this.render,this.states,p);new DOMParser().parseFromString(f,"text/html").body.innerHTML!==n.innerHTML&&(this.snapshots.length>0?this.snapshots[this.snapshots.length-1]!==r&&this.snapshots.push(r):this.snapshots.push(r),this.componentUpdate(r.prev_state,r.prev_props,r.content),t.appendChild(document.createRange().createContextualFragment(f)),n.innerHTML="",n.replaceWith(t),this.runEffects())})}validateClassName(t){return/^[a-zA-Z0-9-_]+$/.test(t)}html(t,...e){let s=setInterval(()=>{document.querySelector(`[data-component="${this.name}"]`)&&(clearInterval(s),this.componentMounted=!0,document.querySelector(`[data-component="${this.name}"]`)?.querySelectorAll("*").forEach(t=>{t.hasAttribute("ref")&&(this.dom[t.getAttribute("ref")]=t)}),this.componentDidMount())},100),n=document.createElement("script");return n.setAttribute("type","text/javascript"),n.setAttribute("data-component-script",this.name),worker.postMessage({strings:t,args:e,location:window.location.origin+window.location.pathname.replace(/\/[^\/]*$/,"")+"/public/",name:this.name}),new Promise((t,e)=>{worker.onmessage=e=>{if(e.data.error)throw Error(e.data.error);let s=this.dom,n=e.data.js,i=e.data.template,r=this.useState.bind(this),a=this.useEffect.bind(this),o=this.useReducer.bind(this),h=this.useAuth.bind(this),l=this.useSyncStore.bind(this),u=this.signal.bind(this),c=this.$Function.bind(this),d=this.states,p=this.useRef.bind(this),f=setInterval(()=>{this.componentMounted&&(clearInterval(f),Function("useState","useEffect","useAuth","useReducer","useSyncStore","signal","$Function","dom","render","state","useRef",n)(r,a,h,o,l,u,c,s,this.render,this.states,p))},100);t(handletemplate(Function("useRef","state","signal","useState","useReducer","useAuth","useSyncStore","useRef","$Function","return`"+i+"`")(p,d,u,r,o,h,l,p,c)))},worker.onerror=t=>{e(t)}})}async render(t){}}let Vader={Component:Component,useRef:useRef};export const component=()=>new Component;export const rf=(t,e)=>{window[t]=e};let cache={};async function handletemplate(t){let e=new DOMParser().parseFromString(t,"text/html"),s=e.documentElement.querySelectorAll("*");if(s.length>0){for(var n=0;n<s.length;n++)if("INCLUDE"===s[n].nodeName){if(!s[n].getAttribute("src")||""===s[n].getAttribute("src"))throw Error("Include tag must have src attribute");let i=s[n].getAttribute("src")?.split("/").pop()?.split(".")[0],r=await include(s[n].getAttribute("src"));r=r.replace(/`/g,"\\`"),cache[s[n].getAttribute("src")]=r,r=Function(`return \`${r}\`;`)();let a=new DOMParser().parseFromString(r,"text/html");a.querySelectorAll("include").forEach(t=>{t.remove()});e.querySelectorAll(i).forEach(t=>{if(t.attributes.length>0)for(var s=0;s<t.attributes.length;s++){let n="{{"+t.attributes[s].name+"}}";a.body.innerHTML.includes(n)&&(a.body.innerHTML=a.body.innerHTML.replaceAll(n,t.attributes[s].value))}if(t.children.length>0&&a.body.querySelector("slot"))for(var s=0;s<t.children.length;s++)a.body.querySelectorAll("slot").forEach(e=>{let n=e.getAttribute("id");(t.hasAttribute("key")&&t.getAttribute("key")===n||!t.hasAttribute("key")&&t.nodeName===n)&&t.children[s].innerHTML.length>0&&(e.outerHTML=t.children[s].innerHTML)});e.body.querySelectorAll("include").forEach(t=>{t.remove()}),e.body.outerHTML=e.body.outerHTML.replace(/`/g,"\\`"),e.body.outerHTML=e.body.outerHTML.replace(t.outerHTML,Function(`return \`${a.body.outerHTML}\`;`)())})}}return e.body.outerHTML=e.body.outerHTML.replace(/`/g,"\\`"),t=Function(`return \`${e.body.outerHTML}\`;`)()}export const include=async t=>(!t.startsWith("/")||t.includes("/src/")||document.documentElement.outerHTML.trim().includes("<!-- #vader-disable_relative-paths -->")||(t="/src/"+t),cache[t])?cache[t]:fetch(`./${t}`).then(e=>{if(404===e.status)throw Error(`No file found at ${t}`);return e.text()}).then(async e=>(cache[t]=e,e));export default Vader;

package/vader.js

@@ -461,7 +461,7 @@ export class Component {
        * @returns {void}
        */
       (action) => {
-        this.states[key] = reducer(this.states[key], action);
+        this.states[key] = reducer(action);
         this.updateComponent();
       }
     ];
@@ -579,7 +579,7 @@ export class Component {
     // get ref from array
     const element = this.dom[ref];
 
-    const getElement = () => element;
+    const getElement =   element;
 
     const update = (data) => {
       const newDom = new DOMParser().parseFromString(data, "text/html");
@@ -693,28 +693,47 @@ export class Component {
       };
 
       if (!componentContainer) return;
-      const newHtml = await new Function(
-        "useState",
-        "useEffect",
-        "useAuth",
-        "useReducer",
-        "useSyncStore",
-        "signal",
-        "rf",
-        "props",
-        "render",
-        "return `" + (await this.render()) + "`;"
-      )(
-        this.useState,
-        this.useEffect,
-        this.useAuth,
-        this.useReducer,
-        this.useSyncStore,
-        this.signal,
-        this.render
-      );
+        const useState = this.useState.bind(this); // Bind the component's context
+        const useEffect = this.useEffect.bind(this); // Bind the component's context
+        const useReducer = this.useReducer.bind(this); // Bind the component's context
+        const useAuth = this.useAuth.bind(this); // Bind the component's context
+        const useSyncStore = this.useSyncStore.bind(this); // Bind the component's context
+        const signal = this.signal.bind(this); // Bind the component's context
+        const $Function = this.$Function.bind(this); // Bind the component's context
+        const useRef = this.useRef.bind(this); // Bind the component's context
+        
 
-      if (newHtml !== componentContainer.innerHTML) {
+        
+               let newHtml =  new Function(
+                    "useState",
+                    "useEffect",
+                    "useAuth",
+                    "useReducer",
+                    "useSyncStore",
+                    "signal",
+                    "$Function",
+                    "dom",
+                    "render",
+                    "state",
+                    "useRef",
+                    "return" + "`" + await this.render() + "`"
+                  )(
+                    useState,
+                    useEffect,
+                    useAuth,
+                    useReducer,
+                    useSyncStore,
+                    signal,
+                    $Function,
+                    dom,
+                    this.render,
+                    this.states,
+                    useRef
+                  );
+         
+      // compare new html with old html
+      let hdom = new DOMParser().parseFromString(newHtml, "text/html");
+      if (hdom.body.innerHTML !== componentContainer.innerHTML) {
         if (this.snapshots.length > 0) {
           let lastSnapshot = this.snapshots[this.snapshots.length - 1];
           if (lastSnapshot !== snapshot) {
@@ -733,7 +752,7 @@ export class Component {
           document.createRange().createContextualFragment(newHtml)
         );
         componentContainer.innerHTML = "";
-        componentContainer.appendChild(fragment);
+        componentContainer.replaceWith(fragment);
         this.runEffects();
       }
     });
@@ -847,37 +866,44 @@ export class Component {
         const $Function = this.$Function.bind(this); // Bind the component's context
         let states = this.states;
         const useRef = this.useRef.bind(this); // Bind the component's context
-        new Function(
-          "useState",
-          "useEffect",
-          "useAuth",
-          "useReducer",
-          "useSyncStore",
-          "signal",
-          "$Function",
-          "dom",
-          "render",
-          "states",
-          "useRef",
-          js
-        )(
-          useState,
-          useEffect,
-          useAuth,
-          useReducer,
-          useSyncStore,
-          signal,
-          $Function,
-          this.dom,
-          this.render,
-          this.states,
-          useRef
-        );
+        
+
+        let interval = setInterval(() => {
+            if(this.componentMounted){
+                clearInterval(interval)
+                new Function(
+                    "useState",
+                    "useEffect",
+                    "useAuth",
+                    "useReducer",
+                    "useSyncStore",
+                    "signal",
+                    "$Function",
+                    "dom",
+                    "render",
+                    "state",
+                    "useRef",
+                    js
+                  )(
+                    useState,
+                    useEffect,
+                    useAuth,
+                    useReducer,
+                    useSyncStore,
+                    signal,
+                    $Function,
+                    dom,
+                    this.render,
+                    this.states,
+                    useRef
+                  );
+            }
+        }, 100);
 
         resolve(
           handletemplate( new Function(
             "useRef",
-            "states",
+            "state",
             "signal",
             "useState",
             "useReducer",

package/worker-min.js

@@ -1 +1,9 @@
-onmessage=e=>{let l=Date.now(),a=e.data.strings,t=e.data.args,s="",r=e.data.location.split("/").slice(0,-1).join("/"),c="";for(let e=0;e<a.length;e++)c+=a[e],e<t.length&&(c+=t[e]);let i=c.match(/--([^>]*)--/gs);if(i)for(;i.length;){let e=i.pop();c=c.replace(e,"")}if(c=c.replace(/(#+)([^<>\n]*)(?![^<]*>)(?![^{]*})/g,((e,l,a)=>{let t=l.length;return`<h${t} class="markdown_heading">${a}</h${t}>`})),c=c.replace(/\*\*(.*?)\*\*/g,((e,l)=>`<b class="markdown_bold">${l}</b>`)),c=c.replace(/\*(.*?)\*/g,((e,l)=>`<i class="markdown_italic">${l}</i>`)),c=c.replace(/`(.*?)`/g,((e,l)=>`<code>${l}</code>`)),c=c.replace(/\[([^\]]+)\]\(([^)]+)\)/g,((e,l,a)=>`<a  class="markdown_link" href="${a}">${l}</a>`)),c=c.replace(/!\[([^\]]+)\]\(([^)]+)\)/g,((e,l,a)=>`<img  class="markdown_image" src="${a}" alt="${l}" />`)),c.split("\n").forEach(((e,l,a)=>{e.match(/^\s*-\s+(.*?)$/gm)&&(c=0!==l&&a[l-1].match(/^\s*-\s+(.*?)$/gm)?l!==a.length-1&&a[l+1].match(/^\s*-\s+(.*?)$/gm)?c.replace(e,`<li>${e.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li>`):c.replace(e,`<li>${e.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li></ul>`):c.replace(e,`<ul class="markdown_unordered" style="list-style-type:disc;list-style:inside"><li>${e.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li>`))})),c.split("\n").forEach(((e,l,a)=>{e.match(/^\s*\d+\.\s+(.*?)$/gm)&&(c=0!==l&&a[l-1].match(/^\s*\d+\.\s+(.*?)$/gm)?l!==a.length-1&&a[l+1].match(/^\s*\d+\.\s+(.*?)$/gm)?c.replace(e,`<li>${e.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li>`):c.replace(e,`<li>${e.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li></ol>`):c.replace(e,`<ol class="markdown_ordered" style="list-style-type:decimal;"><li>${e.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li>`))})),c=c.replace(/^\s*-\s+(.*?)$/gm,((e,l)=>`<li class="markdown_list_item">${l}</li>`)),c=c.replace(/^\s*---\s*$/gm,'<hr class="markdown_horizontal" />'),c=c.replace(/^\s*> (.*)$/gm,((e,l)=>`<blockquote class="markdown_blockquote">${l}</blockquote>`)),c=c.replace(/((?: *\|.*?)+)\n((?: *\|.*?)+)/gm,((e,l,a)=>{const t=l.split("|").slice(1,-1),s=a.split("|").slice(1,-1);let r='<table class="markdown_table">';return r+='<thead class="markdown_table_head"><tr class="markdown_table_row">',t.forEach((e=>{r+=`<th class="markdown_table_header_cell">${e}</th>`})),r+='</tr></thead><tbody class="markdown_table_body"><tr class="markdown_table_row">',s.forEach((e=>{r+=`<td class="markdown_table_body_cell">${e}</td>`})),r+="</tr></tbody></table>",r})),!c.includes("<body>"))throw new Error(`Vader Error: You must enclose your html in a body tag for all components. \n\n${c}`);c=c.replace(/classname/g,"class");let o=c.match(/<img([^>]*)>/g);if(o)for(let l=0;l<o.length;l++){let a=o[l],t=a.match(/src="([^"]*)"/);if(!a.match(/alt="([^"]*)"/)&&!c.includes("\x3c!-- #vader-disable_accessibility --\x3e"))throw new Error(`Vader Error: You must include an alt attribute in the image tag  \n\n${a} of class ${e.data.name}. `);t&&t.forEach((l=>{if(l.includes("http")||c.includes("\x3c!-- #vader-disable_relative-paths --\x3e")){if(!l.includes("http")&&l.startsWith(".")&&!c.includes("\x3c!-- #vader-disable_relative-paths --\x3e"))throw new Error(`Vader Error: You cannot use absolute paths since relative paths are not disabled in ${e.data.file}. Use relative paths instead. \n\n${l}`)}else c=c.replace(`src="${l}"`,`src="${r}/${l}"`)}))}let n=c.match(/href="([^"]*)"/g);if(n)for(;n.length;){let l=n.pop();if(l=l.replace('href="',"").replace('"',""),l.includes("http")||c.includes("\x3c!-- #vader-disable_relative-paths --\x3e")){if(!l.includes("http")&&l.startsWith(".")&&!c.includes("\x3c!-- #vader-disable_relative-paths --\x3e"))throw new Error(`Vader Error: You cannot use absolute paths since relative paths are not disabled in ${e.data.file}. Use relative paths instead. \n\n${l}`)}else c=c.replace(`href="${l}"`,`href="#${l}"`)}let d=Date.now()-l,p=!1;(r.includes("localhost")||r.includes("127.0.0.1")&&!p)&&(p=!0,c+=`\${console.log('%c${e.data.name} component rendered in ${d}ms')}`);const h=c.split("<script>");h&&h.forEach(((e,l)=>{if(0===l)c=e;else{if(e.includes("// <![CDATA[  <-- For SVG support"))return;let l=e.split("<\/script>")[0];s+=l}}));let m=c.match(/(\$\(.*?\))/gs);if(m)for(;m.length;){let e=m.pop();c=c.replace(e,`\${${e.replace("$(","").replace(")","")}}`)}let $=c.match(/@title '([^>]*)';/);if($){let e=`{document.title = "${$[1]}", ""}`;c=c.replace($[0],"$"+e)}let g=c.match(/@style{([^>]*)};/gs);if(g)for(let e=0;e<g.length;e++){if(!g[e].includes("style"))continue;let l=g[e];console.log(l);let a=l.replace("@style{","").replace("};","");a=a.replaceAll(",",";"),a=a.replaceAll(/[A-Z]/g,(e=>`-${e.toLowerCase()}`)),a=a.replaceAll(/'/g," "),c=c.replace(l,`style="${a}"`)}let u=c.match(/@stylesheet{([^>]*)};/);if(u){let e=u[1].replaceAll(" ","");e=e.replaceAll(",",";"),e=e.replaceAll(/[A-Z]/g,(e=>`-${e.toLowerCase()}`)),e=e.replaceAll(/'/g," "),c=c.replace(u[0],`<style>${e}</style>`)}postMessage({template:`<div data-component=${e.data.name}>${c}</div>`,js:s||""})};
+onmessage=e=>{let l=Date.now(),a=e.data.strings,t=e.data.args,s="",r=e.data.location.split("/").slice(0,-1).join("/"),c="";for(let i=0;i<a.length;i++)c+=a[i],i<t.length&&(c+=t[i]);let o=c.match(/--([^>]*)--/gs);if(o)for(;o.length;){let n=o.pop();c=c.replace(n,"")}if((c=(c=(c=(c=(c=(c=c.replace(/(#+)([^<>\n]*)(?![^<]*>)(?![^{]*})/g,(e,l,a)=>{let t=l.length;return`<h${t} class="markdown_heading">${a}</h${t}>`})).replace(/\*\*(.*?)\*\*/g,(e,l)=>`<b class="markdown_bold">${l}</b>`)).replace(/\*(.*?)\*/g,(e,l)=>`<i class="markdown_italic">${l}</i>`)).replace(/`(.*?)`/g,(e,l)=>`<code>${l}</code>`)).replace(/\[([^\]]+)\]\(([^)]+)\)/g,(e,l,a)=>`<a  class="markdown_link" href="${a}">${l}</a>`)).replace(/!\[([^\]]+)\]\(([^)]+)\)/g,(e,l,a)=>`<img  class="markdown_image" src="${a}" alt="${l}" />`)).split("\n").forEach((e,l,a)=>{e.match(/^\s*-\s+(.*?)$/gm)&&(c=0!==l&&a[l-1].match(/^\s*-\s+(.*?)$/gm)?l!==a.length-1&&a[l+1].match(/^\s*-\s+(.*?)$/gm)?c.replace(e,`<li>${e.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li>`):c.replace(e,`<li>${e.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li></ul>`):c.replace(e,`<ul class="markdown_unordered" style="list-style-type:disc;list-style:inside"><li>${e.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li>`))}),c.split("\n").forEach((e,l,a)=>{e.match(/^\s*\d+\.\s+(.*?)$/gm)&&(c=0!==l&&a[l-1].match(/^\s*\d+\.\s+(.*?)$/gm)?l!==a.length-1&&a[l+1].match(/^\s*\d+\.\s+(.*?)$/gm)?c.replace(e,`<li>${e.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li>`):c.replace(e,`<li>${e.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li></ol>`):c.replace(e,`<ol class="markdown_ordered" style="list-style-type:decimal;"><li>${e.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li>`))}),!(c=(c=(c=(c=c.replace(/^\s*-\s+(.*?)$/gm,(e,l)=>`<li class="markdown_list_item">${l}</li>`)).replace(/^\s*---\s*$/gm,'<hr class="markdown_horizontal" />')).replace(/^\s*> (.*)$/gm,(e,l)=>`<blockquote class="markdown_blockquote">${l}</blockquote>`)).replace(/((?: *\|.*?)+)\n((?: *\|.*?)+)/gm,(e,l,a)=>{let t=l.split("|").slice(1,-1),s=a.split("|").slice(1,-1),r='<table class="markdown_table">';return r+='<thead class="markdown_table_head"><tr class="markdown_table_row">',t.forEach(e=>{r+=`<th class="markdown_table_header_cell">${e}</th>`}),r+='</tr></thead><tbody class="markdown_table_body"><tr class="markdown_table_row">',s.forEach(e=>{r+=`<td class="markdown_table_body_cell">${e}</td>`}),r+="</tr></tbody></table>"})).includes("<body>"))throw Error(`Vader Error: You must enclose your html in a body tag for all components. 
+
+${c}`);let d=(c=c.replace(/classname/g,"class")).match(/<img([^>]*)>/g);if(d)for(let p=0;p<d.length;p++){let h=d[p],m=h.match(/src="([^"]*)"/);if(!h.match(/alt="([^"]*)"/)&&!c.includes("<!-- #vader-disable_accessibility -->"))throw Error(`Vader Error: You must include an alt attribute in the image tag  
+
+${h} of class ${e.data.name}. `);m&&m.forEach(l=>{if(l.includes("http")||c.includes("<!-- #vader-disable_relative-paths -->")){if(!l.includes("http")&&l.startsWith(".")&&!c.includes("<!-- #vader-disable_relative-paths -->"))throw Error(`Vader Error: You cannot use absolute paths since relative paths are not disabled in ${e.data.file}. Use relative paths instead. 
+
+${l}`)}else c=c.replace(`src="${l}"`,`src="${r}/${l}"`)})}let g=c.match(/href="([^"]*)"/g);if(g)for(;g.length;){let u=g.pop();if((u=u.replace('href="',"").replace('"',"")).includes("http")||c.includes("<!-- #vader-disable_relative-paths -->")){if(!u.includes("http")&&u.startsWith(".")&&!c.includes("<!-- #vader-disable_relative-paths -->"))throw Error(`Vader Error: You cannot use absolute paths since relative paths are not disabled in ${e.data.file}. Use relative paths instead. 
+
+${u}`)}else c=c.replace(`href="${u}"`,`href="#${u}"`)}let f=Date.now()-l,b=!1;(r.includes("localhost")||r.includes("127.0.0.1")&&!b)&&(b=!0,c+=`$\{console.log('%c${e.data.name} component rendered in ${f}ms')}`);let w=c.split("<script>");w&&w.forEach((e,l)=>{if(0===l)c=e;else{if(e.includes("// <![CDATA[  <-- For SVG support"))return;s+=e.split("</script>")[0]}});let y=c.match(/(\$\(.*?\))/gs);if(y)for(;y.length;){let _=y.pop();c=c.replace(_,`$\{${_.replace("$(","").replace(")","")}}`)}let k=c.match(/@title '([^>]*)';/);if(k){let v=`{document.title = "${k[1]}", ""}`;c=c.replace(k[0],"$"+v)}let $=c.match(/@style{([^>]*)};/gs);if($)for(let A=0;A<$.length;A++){if(!$[A].includes("style"))continue;let E=$[A],V=E.replace("@style{","").replace("};","");V=(V=(V=V.replaceAll(",",";")).replaceAll(/[A-Z]/g,e=>`-${e.toLowerCase()}`)).replaceAll(/'/g," "),c=c.replace(E,`style="${V}"`)}let Y=c.match(/@stylesheet{([^>]*)};/);if(Y){let q=Y[1].replaceAll(" ","");q=(q=(q=q.replaceAll(",",";")).replaceAll(/[A-Z]/g,e=>`-${e.toLowerCase()}`)).replaceAll(/'/g," "),c=c.replace(Y[0],`<style>${q}</style>`)}postMessage({template:c.includes("data-component")?c:`<div data-component="${e.data.name}">${c}</div>`,js:s||""})};

package/worker.js

@@ -278,7 +278,6 @@ onmessage = (e) => {
         continue;
       }
       let style = styles[i];
-      console.log(style)
      
       let css =   style.replace("@style{", "").replace("};", "");
       // @ts-ignore
@@ -320,7 +319,7 @@ onmessage = (e) => {
       result = result.replace(stylsheet[0], `<style>${css}</style>`);
   }
   postMessage({
-    template: `<div data-component=${e.data.name}>${result}</div>`,
+    template: result.includes('data-component') ? result : `<div data-component="${e.data.name}">${result}</div>`,
     js: js ? js : ""
   });
 };