vaderjs 1.3.2 → 1.3.3

package/package.json

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

package/ts.config.json

@@ -0,0 +1 @@
+ 

package/vader-min.js

@@ -1 +1 @@
-let dom=[],states={},worker=new Worker(new URL("./worker.js",import.meta.url));function markdown(t){let e=t.match(/(#+)(.*)/g);return e&&e.forEach((e=>{if(e.includes("/")||e.includes("<")||e.includes(">"))return;let s=e.split("#").length;t=t.replace(e,`<h${s} class="markdown_heading">${e.replace(/#/g,"")}</h${s}>`)})),t=(t=(t=(t=(t=(t=(t=t.replace(/\*\*(.*?)\*\*/g,((t,e)=>`<b class="markdown_bold">${e}</b>`))).replace(/\*(.*?)\*/g,((t,e)=>`<i class="markdown_italic">${e}</i>`))).replace(/`(.*?)`/g,((t,e)=>`<code>${e}</code>`))).replace(/\[([^\]]+)\]\(([^)]+)\)/g,((t,e,s)=>`<a class="markdown_link" href="${s}">${e}</a>`))).replace(/!\[([^\]]+)\]\(([^)]+)\)/g,((t,e,s)=>`<img class="markdown_image" src="${s}" alt="${e}" />`))).split("\n").map(((t,e,s)=>t.match(/^\s*-\s+(.*?)$/gm)?0!==e&&s[e-1].match(/^\s*-\s+(.*?)$/gm)?e!==s.length-1&&s[e+1].match(/^\s*-\s+(.*?)$/gm)?`<li>${t.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li>`:`<li>${t.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li></ul>`:`<ul class="markdown_unordered" style="list-style-type:disc;list-style:inside"><li>${t.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li>`:t)).join("\n")).split("\n").map(((t,e,s)=>t.match(/^\s*\d+\.\s+(.*?)$/gm)?0!==e&&s[e-1].match(/^\s*\d+\.\s+(.*?)$/gm)?e!==s.length-1&&s[e+1].match(/^\s*\d+\.\s+(.*?)$/gm)?`<li>${t.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li>`:`<li>${t.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li></ol>`:`<ol class="markdown_ordered" style="list-style-type:decimal;"><li>${t.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li>`:t)).join("\n")}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,r]=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=>{r(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 r={...s,[t]:e};n(r)},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}"]`),r={name:s,time:(new Date).getTime(),prev_state:this.states,prev_props:this.storedProps,content:n.innerHTML};if(!n)return;const i=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(i!==n.innerHTML){if(this.snapshots.length>0){this.snapshots[this.snapshots.length-1]!==r&&this.snapshots.push(r)}else this.snapshots.push(r);this.componentUpdate(r.prev_state,r.prev_props,r.content),t.appendChild(document.createRange().createContextualFragment(i)),n.innerHTML="",n.appendChild(t),this.runEffects()}}))}validateClassName(t){return/^[a-zA-Z0-9-_]+$/.test(t)}parseHTML(t){const e=(new DOMParser).parseFromString(t,"text/html");return e.documentElement.querySelectorAll("*").forEach((t=>{if("IMG"===t.nodeName){if(!t.hasAttribute("alt")&&!document.documentElement.outerHTML.trim().includes("\x3c!-- #vader-disable_accessibility --\x3e"))throw new SyntaxError(`Image: ${t.outerHTML} missing alt attribute`);if(t.hasAttribute("alt")&&t.getAttribute("alt").length<1&&!document.documentElement.outerHTML.trim().includes("\x3c!-- #vader-disable_accessibility --\x3e"))throw new SyntaxError(`Image: ${t.outerHTML} alt attribute cannot be empty`);if(t.hasAttribute("src")&&!t.getAttribute("src")?.includes("http")||!t.getAttribute("src")?.includes("https")&&!document.documentElement.outerHTML.trim().includes("\x3c!-- #vader-disable_accessibility --\x3e")){let e=t.getAttribute("src");t.setAttribute("aria-hidden","true"),t.setAttribute("hidden","true");let s=window.location.origin+window.location.pathname.replace(/\/[^\/]*$/,"")+"/public/"+t.getAttribute("src"),n=new Image;n.src=s,n.onerror=()=>{throw t.setAttribute("src",e),new Error(`Image: ${t.outerHTML} not found`)},t.setAttribute("src",s),n.onload=()=>{document.querySelectorAll(`img[src="${s}"]`).forEach((t=>{t.setAttribute("src",s),t.removeAttribute("aria-hidden"),t.removeAttribute("hidden")}))}}}else{if(t.hasAttribute("ref")&&(e[t.getAttribute("ref")]=t),"MARKDOWN"===t.nodeName&&(t.innerHTML=markdown(t.innerHTML.replace(/\\n/g,"\n").trim())),t.hasAttribute("class")){if(!document.documentElement.outerHTML.includes("\x3c!-- #vader-allow_class --\x3e"))throw console.warn("you can disable class errors using, \x3c!-- #vader-allow_class --\x3e"),new Error("class attribute is not allowed, please use className instead")}else t.hasAttribute("className")&&(t.setAttribute("class",t.getAttribute("className")),t.removeAttribute("className"));t.hasAttribute("href")&&t.getAttribute("href").startsWith("/")&&!document.documentElement.outerHTML.trim().includes("\x3c!-- #vader-disable_relative-paths --\x3e")&&t.setAttribute("href",`#/${t.getAttribute("href").replace("/","")}`),!t.hasAttribute("src")||t.getAttribute("src").includes("http")||t.getAttribute("src").includes("https")||document.documentElement.outerHTML.includes("\x3c!-- #vader-disable_relative-paths --\x3e")||t.setAttribute("src",`./public/${t.getAttribute("src")}`)}})),t=e.body.innerHTML,this.Componentcontent=t,t.includes("<div data-component")||(t=`<div data-component="${this.name}">${t}</div>`),markdown(t.replace(/\\n/g,"\n").trim())}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);this.dom;if(this.cfr){worker.postMessage({strings:t,args:e,location:window.location.origin+window.location.pathname.replace(/\/[^\/]*$/,"")+"/public/",name:this.name});let s=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 r=this.useState.bind(this),i=this.useEffect.bind(this),a=this.useReducer.bind(this),o=this.useAuth.bind(this),c=this.useSyncStore.bind(this),l=this.signal.bind(this),u=this.$Function.bind(this);let h=this.states;const d=this.useRef.bind(this);new Function("useState","useEffect","useAuth","useReducer","useSyncStore","signal","rf","dom","render","states","useRef",s)(r,i,o,a,c,l,u,this.dom,this.render,this.states,d),t(new Function("useRef","states","return`"+n+"`")(d,h))},worker.onerror=t=>{e(t)}}));return s}{let s="";for(let n=0;n<t.length;n++)s+=t[n],n<e.length&&(s+=e[n]);return s=new Function("useRef",`return \`${s}\``)(useRef),s.trim().startsWith("<body>")||console.warn("You should wrap your html in a body tag, vader may not grab all html!"),this.parseHTML(s)}}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],r=await include(s[n].getAttribute("src"));r=r.replace(/`/g,"\\`"),cache[s[n].getAttribute("src")]=r,r=new Function(`return \`${r}\`;`)();let i=(new DOMParser).parseFromString(r,"text/html");i.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++)i.body.outerHTML=i.body.outerHTML.replaceAll(`{{${t.attributes[s].name}}}`,t.attributes[s].value);if(t.children.length>0&&i.body.querySelector("slot"))for(s=0;s<t.children.length;s++){i.body.querySelectorAll("slot").forEach((e=>{let s=e.getAttribute("id");console.log(s),(t.hasAttribute("key")&&t.getAttribute("key")===s||!t.hasAttribute("key")&&t.nodeName===s)&&(e.outerHTML=`<div>${t.innerHTML}</div>`)}))}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 \`${i.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]?await handletemplate(new Function(`return \`${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=await handletemplate(new Function(`return \`${e}\`;`)())))));export default Vader;
+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(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]?await handletemplate(new Function(`return \`${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=await handletemplate(new Function(`return \`${e}\`;`)())))));export default Vader;

package/vader.js

@@ -1,96 +1,8 @@
+// @ts-nocheck
 let dom = [];
 let states = {};
-let worker = new Worker(new URL("./worker.js", import.meta.url));
-/**
- * @function markdown
- * @param {String} content
- * @description Allows you to convert markdown to html
- */
-function markdown(content) {
-  let headers = content.match(/(#+)(.*)/g);
-  if (headers) {
-    headers.forEach((header) => {
-      if (
-        header.includes("/") ||
-        header.includes("<") ||
-        header.includes(">")
-      ) {
-        return;
-      }
-      let level = header.split("#").length;
-      content = content.replace(
-        header,
-        `<h${level} class="markdown_heading">${header.replace(
-          /#/g,
-          ""
-        )}</h${level}>`
-      );
-    });
-  }
-
-  content = content.replace(/\*\*(.*?)\*\*/g, (match, text) => {
-    return `<b class="markdown_bold">${text}</b>`;
-  });
-  content = content.replace(/\*(.*?)\*/g, (match, text) => {
-    return `<i class="markdown_italic">${text}</i>`;
-  });
-  content = content.replace(/`(.*?)`/g, (match, text) => {
-    return `<code>${text}</code>`;
-  });
-  content = content.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, text, url) => {
-    return `<a class="markdown_link" href="${url}">${text}</a>`;
-  });
-  content = content.replace(/!\[([^\]]+)\]\(([^)]+)\)/g, (match, alt, src) => {
-    return `<img class="markdown_image" src="${src}" alt="${alt}" />`;
-  });
-  content = content
-    .split("\n")
-    .map((line, index, arr) => {
-      if (line.match(/^\s*-\s+(.*?)$/gm)) {
-        if (index === 0 || !arr[index - 1].match(/^\s*-\s+(.*?)$/gm)) {
-          return `<ul class="markdown_unordered" style="list-style-type:disc;list-style:inside"><li>${line.replace(
-            /^\s*-\s+(.*?)$/gm,
-            "$1"
-          )}</li>`;
-        } else if (
-          index === arr.length - 1 ||
-          !arr[index + 1].match(/^\s*-\s+(.*?)$/gm)
-        ) {
-          return `<li>${line.replace(/^\s*-\s+(.*?)$/gm, "$1")}</li></ul>`;
-        } else {
-          return `<li>${line.replace(/^\s*-\s+(.*?)$/gm, "$1")}</li>`;
-        }
-      } else {
-        return line;
-      }
-    })
-    .join("\n");
 
-  content = content
-    .split("\n")
-    .map((line, index, arr) => {
-      if (line.match(/^\s*\d+\.\s+(.*?)$/gm)) {
-        if (index === 0 || !arr[index - 1].match(/^\s*\d+\.\s+(.*?)$/gm)) {
-          return `<ol class="markdown_ordered" style="list-style-type:decimal;"><li>${line.replace(
-            /^\s*\d+\.\s+(.*?)$/gm,
-            "$1"
-          )}</li>`;
-        } else if (
-          index === arr.length - 1 ||
-          !arr[index + 1].match(/^\s*\d+\.\s+(.*?)$/gm)
-        ) {
-          return `<li>${line.replace(/^\s*\d+\.\s+(.*?)$/gm, "$1")}</li></ol>`;
-        } else {
-          return `<li>${line.replace(/^\s*\d+\.\s+(.*?)$/gm, "$1")}</li>`;
-        }
-      } else {
-        return line;
-      }
-    })
-    .join("\n");
-
-  return content;
-}
+let worker = new Worker(new URL("./worker.js", import.meta.url));
 
 /**
  * @function useRef
@@ -187,7 +99,7 @@ export class Component {
      * @property {Array} snapshots
      * @private
      */
-     this.snapshots = [];
+    this.snapshots = [];
     /**
      * @property {Object} dom
      * @description Allows you to get reference to DOM element
@@ -217,8 +129,6 @@ export class Component {
    */
   adapter(options) {
     // allow you to override the compoent logic
-     
-     
   }
   init() {
     this.registerComponent();
@@ -386,7 +296,6 @@ export class Component {
      * @param {*} detail
      */
     this.$_signal_set = (detail) => {
-       
       setState(detail);
     };
 
@@ -725,7 +634,9 @@ export class Component {
 
     return {
       cleanup: () => {
+        // @ts-ignore
         this.effects[this.name] = this.effects[this.name].filter(
+          // @ts-ignore
           (effect) => effect !== effectFn
         );
       }
@@ -838,143 +749,6 @@ export class Component {
     return /^[a-zA-Z0-9-_]+$/.test(className);
   }
 
-  parseHTML(result) {
-    const dom = new DOMParser().parseFromString(result, "text/html");
-    const elements = dom.documentElement.querySelectorAll("*");
-
-    elements.forEach((element) => {
-      switch (element.nodeName) {
-        case "IMG":
-          if (
-            !element.hasAttribute("alt") &&
-            !document.documentElement.outerHTML
-              .trim()
-              .includes("<!-- #vader-disable_accessibility -->")
-          ) {
-            throw new SyntaxError(
-              `Image: ${element.outerHTML} missing alt attribute`
-            );
-          } else if (
-            element.hasAttribute("alt") &&
-            // @ts-ignore
-            element.getAttribute("alt").length < 1 &&
-            !document.documentElement.outerHTML
-              .trim()
-              .includes("<!-- #vader-disable_accessibility -->")
-          ) {
-            throw new SyntaxError(
-              `Image: ${element.outerHTML} alt attribute cannot be empty`
-            );
-          } else if (
-            (element.hasAttribute("src") &&
-              !element.getAttribute("src")?.includes("http")) ||
-            (!element.getAttribute("src")?.includes("https") &&
-              !document.documentElement.outerHTML
-                .trim()
-                .includes("<!-- #vader-disable_accessibility -->"))
-          ) {
-            let prevurl = element.getAttribute("src");
-            element.setAttribute("aria-hidden", "true");
-            element.setAttribute("hidden", "true");
-            // if window.lcoation.pathname includes a html file remove it and only use the path
-            let url =
-              window.location.origin +
-              window.location.pathname.replace(/\/[^\/]*$/, "") +
-              "/public/" +
-              element.getAttribute("src");
-            let image = new Image();
-            image.src = url;
-            image.onerror = () => {
-              // @ts-ignore
-              element.setAttribute("src", prevurl);
-              throw new Error(`Image: ${element.outerHTML} not found`);
-            };
-            element.setAttribute("src", url);
-
-            image.onload = () => {
-              document.querySelectorAll(`img[src="${url}"]`).forEach((img) => {
-                img.setAttribute("src", url);
-                img.removeAttribute("aria-hidden");
-                img.removeAttribute("hidden");
-              });
-            };
-          }
-          break;
-
-        default:
-          if (element.hasAttribute("ref")) {
-            // @ts-ignore
-            dom[element.getAttribute("ref")] = element;
-          }
-          if (element.nodeName === "MARKDOWN") {
-            element.innerHTML = markdown(
-              element.innerHTML.replace(/\\n/g, "\n").trim()
-            );
-          }
-
-          if (element.hasAttribute("class")) {
-            const allowClassComments = document.documentElement.outerHTML.includes(
-              "<!-- #vader-allow_class -->"
-            );
-            if (!allowClassComments) {
-              console.warn(
-                "you can disable class errors using, <!-- #vader-allow_class -->"
-              );
-              throw new Error(
-                "class attribute is not allowed, please use className instead"
-              );
-            }
-          } else if (element.hasAttribute("className")) {
-            // @ts-ignore
-            element.setAttribute("class", element.getAttribute("className"));
-            element.removeAttribute("className");
-          }
-
-          if (
-            element.hasAttribute("href") &&
-            // @ts-ignore
-            element.getAttribute("href").startsWith("/") &&
-            !document.documentElement.outerHTML
-              .trim()
-              .includes("<!-- #vader-disable_relative-paths -->")
-          ) {
-            element.setAttribute(
-              "href",
-              // @ts-ignore
-              `#/${element.getAttribute("href").replace("/", "")}`
-            );
-          }
-
-          if (
-            element.hasAttribute("src") &&
-            // @ts-ignore
-            !element.getAttribute("src").includes("http") &&
-            // @ts-ignore
-            !element.getAttribute("src").includes("https") &&
-            !document.documentElement.outerHTML.includes(
-              `<!-- #vader-disable_relative-paths -->`
-            )
-          ) {
-            element.setAttribute(
-              "src",
-              // @ts-ignore
-              `./public/${element.getAttribute("src")}`
-            );
-          }
-          break;
-      }
-    });
-
-    result = dom.body.innerHTML;
-
-    this.Componentcontent = result;
-
-    if (!result.includes("<div data-component")) {
-      result = `<div data-component="${this.name}">${result}</div>`;
-    }
-    return markdown(result.replace(/\\n/g, "\n").trim());
-  }
-
   /**
    * The `html` method generates and processes HTML content for a component, performing various validations and tasks.
    *
@@ -1024,9 +798,9 @@ export class Component {
 
   html(strings, ...args) {
     // @ts-ignore
-    let tiemr = setInterval(() => {
+    let timer = setInterval(() => {
       if (document.querySelector(`[data-component="${this.name}"]`)) {
-        clearInterval(tiemr);
+        clearInterval(timer);
         this.componentMounted = true;
 
         document
@@ -1045,95 +819,92 @@ export class Component {
     script.setAttribute("type", "text/javascript");
     script.setAttribute(`data-component-script`, this.name);
 
-    let dom = this.dom;
-
-    if (this.cfr) {
-      worker.postMessage({
-        strings,
-        args,
-        location:
-          window.location.origin +
-          window.location.pathname.replace(/\/[^\/]*$/, "") +
-          "/public/",
-        name: this.name
-      });
-      let promise = new Promise((resolve, reject) => {
-        worker.onmessage = (e) => {
-          if (e.data.error) {
-            throw new Error(e.data.error);
-          }
-          const dom = this.dom; // Assuming this.dom is an object
-          let js = e.data.js;
-          let template = e.data.template;
-          // Bind the component's context
+    worker.postMessage({
+      strings,
+      args,
+      location:
+        window.location.origin +
+        window.location.pathname.replace(/\/[^\/]*$/, "") +
+        "/public/",
+      name: this.name
+    });
+    let promise = new Promise((resolve, reject) => {
+      worker.onmessage = (e) => {
+        if (e.data.error) {
+          throw new Error(e.data.error);
+        }
+        const dom = this.dom; // Assuming this.dom is an object
+        let js = e.data.js;
+        let template = e.data.template;
+        // Bind the component's context
+
+        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
+        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
+        );
 
-          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 rf = this.$Function.bind(this); // Bind the component's context
-          let states = this.states;
-          const useRef = this.useRef.bind(this); // Bind the component's context
+        resolve(
           new Function(
+            "useRef",
+            "states",
+            "signal",
             "useState",
-            "useEffect",
-            "useAuth",
             "useReducer",
+            "useAuth",
             "useSyncStore",
-            "signal",
-            "rf",
-            "dom",
-            "render",
-            "states",
             "useRef",
-            js
+            "$Function",
+            "return" + "`" + template + "`"
           )(
+            useRef,
+            states,
+            signal,
             useState,
-            useEffect,
-            useAuth,
             useReducer,
+            useAuth,
             useSyncStore,
-            signal,
-            rf,
-            this.dom,
-            this.render,
-            this.states,
-            useRef
-          );
-
-          resolve(
-            new Function("useRef", "states", "return" + "`" + template + "`")(
-              useRef,
-              states
-            )
-          );
-        };
-        worker.onerror = (e) => {
-          reject(e);
-        };
-      });
-      // @ts-ignore
-      return promise;
-    } else {
-      let result = "";
-      for (let i = 0; i < strings.length; i++) {
-        result += strings[i];
-        if (i < args.length) {
-          result += args[i];
-        }
-      }
-      result = new Function("useRef", `return \`${result}\``)(useRef);
-
-      if (!result.trim().startsWith("<body>")) {
-        console.warn(
-          "You should wrap your html in a body tag, vader may not grab all html!"
+            useRef,
+            $Function
+          )
         );
-      }
-
-      return this.parseHTML(result);
-    }
+      };
+      worker.onerror = (e) => {
+        reject(e);
+      };
+    });
+    // @ts-ignore
+    return promise;
   }
   // write types to ensure it returns a string
   /**
@@ -1200,7 +971,7 @@ const Vader = {
  * @returns {Component}
  */
 export const component = () => {
-  return new Component()
+  return new Component();
 };
 
 /**
@@ -1242,7 +1013,6 @@ async function handletemplate(data) {
         filedata = new Function(`return \`${filedata}\`;`)();
         let newdom = new DOMParser().parseFromString(filedata, "text/html");
 
-    
         newdom.querySelectorAll("include").forEach((el) => {
           el.remove();
         });
@@ -1254,22 +1024,29 @@ async function handletemplate(data) {
           if (el.attributes.length > 0) {
             for (var i = 0; i < el.attributes.length; i++) {
               // @ts-ignore
-              newdom.body.outerHTML = newdom.body.outerHTML.replaceAll(
-                `{{${el.attributes[i].name}}}`,
-                el.attributes[i].value
-              );
+              let t = "{{" + el.attributes[i].name + "}}";
+              if (newdom.body.innerHTML.includes(t)) {
+                // @ts-ignore
+                newdom.body.innerHTML = newdom.body.innerHTML.replaceAll(
+                  t,
+                  el.attributes[i].value
+                );
+              }
             }
           }
           if (el.children.length > 0 && newdom.body.querySelector("slot")) {
             for (var i = 0; i < el.children.length; i++) {
               let slots = newdom.body.querySelectorAll("slot");
               slots.forEach((slot) => {
-               
                 let id = slot.getAttribute("id");
-                console.log(id)
-                if(el.hasAttribute('key') && el.getAttribute('key') === id || !el.hasAttribute('key') && el.nodeName === id){
-             
-                  slot.outerHTML = `<div>${el.innerHTML}</div>`
+
+                if (
+                  (el.hasAttribute("key") && el.getAttribute("key") === id) ||
+                  (!el.hasAttribute("key") && el.nodeName === id)
+                ) {
+                  if (el.children[i].innerHTML.length > 0) {
+                    slot.outerHTML = el.children[i].innerHTML;
+                  }
                 }
               });
             }
@@ -1312,7 +1089,9 @@ export const include = async (path) => {
   ) {
     path = "/src/" + path;
   }
+  // @ts-ignore
   if (cache[path]) {
+    // @ts-ignore
     return await handletemplate(new Function(`return \`${cache[path]}\`;`)());
   } else {
     return fetch(`./${path}`)
@@ -1323,6 +1102,7 @@ export const include = async (path) => {
         return res.text();
       })
       .then(async (data) => {
+        // @ts-ignore
         cache[path] = data;
 
         data = await handletemplate(new Function(`return \`${data}\`;`)());
@@ -1332,4 +1112,4 @@ export const include = async (path) => {
   }
 };
 
-export default Vader;
+export default Vader

package/worker-min.js

@@ -1 +1 @@
-onmessage=e=>{let a=Date.now(),l=e.data.strings,s=e.data.args,t="",r=e.data.location.split("/").slice(0,-1).join("/"),c="";for(let e=0;e<l.length;e++)c+=l[e],e<s.length&&(c+=s[e]);let o=c.match(/--([^>]*)--/gs);if(o)for(;o.length;){let e=o.pop();console.log(e),c=c.replace(e,"")}if(c=c.replace(/(#+)(.*)/g,((e,a,l)=>{if(console.log(e),e.includes("<")&&e.includes(">"))return e;{let e=a.length;return`<h ${e} class="markdown_heading">${l}</h${e}>`}})),c=c.replace(/\*\*(.*?)\*\*/g,((e,a)=>`<b class="markdown_bold">${a}</b>`)),c=c.replace(/\*(.*?)\*/g,((e,a)=>`<i class="markdown_italic">${a}</i>`)),c=c.replace(/`(.*?)`/g,((e,a)=>`<code>${a}</code>`)),c=c.replace(/\[([^\]]+)\]\(([^)]+)\)/g,((e,a,l)=>`<a  class="markdown_link" href="${l}">${a}</a>`)),c=c.replace(/!\[([^\]]+)\]\(([^)]+)\)/g,((e,a,l)=>`<img  class="markdown_image" src="${l}" alt="${a}" />`)),c.split("\n").forEach(((e,a,l)=>{e.match(/^\s*-\s+(.*?)$/gm)&&(c=0!==a&&l[a-1].match(/^\s*-\s+(.*?)$/gm)?a!==l.length-1&&l[a+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,a,l)=>{e.match(/^\s*\d+\.\s+(.*?)$/gm)&&(c=0!==a&&l[a-1].match(/^\s*\d+\.\s+(.*?)$/gm)?a!==l.length-1&&l[a+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,a)=>`<li class="markdown_list_item">${a}</li>`)),c=c.replace(/^\s*---\s*$/gm,'<hr class="markdown_horizontal" />'),c=c.replace(/^\s*> (.*)$/gm,((e,a)=>`<blockquote class="markdown_blockquote">${a}</blockquote>`)),c=c.replace(/((?: *\|.*?)+)\n((?: *\|.*?)+)/gm,((e,a,l)=>{const s=a.split("|").slice(1,-1),t=l.split("|").slice(1,-1);let r='<table class="markdown_table">';return r+='<thead class="markdown_table_head"><tr class="markdown_table_row">',s.forEach((e=>{r+=`<th class="markdown_table_header_cell">${e}</th>`})),r+='</tr></thead><tbody class="markdown_table_body"><tr class="markdown_table_row">',t.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 i=c.match(/<img([^>]*)>/g);if(i)for(let a=0;a<i.length;a++){let l=i[a],s=l.match(/src="([^"]*)"/),t=l.match(/alt="([^"]*)"/);if(s)if(s[1].includes("http")||c.includes("\x3c!-- #vader-disable_relative-paths --\x3e")){if(!s[1].includes("http")&&s[1].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${s[1]}`)}else c=c.replace(s[1],`${r}/${s[1]}`);if(!t&&!c.includes("\x3c!-- #vader-disable_accessibility --\x3e"))throw new Error(`Vader Error: You must include an alt attribute in the image tag  \n\n${l} of class ${e.data.name}. `);caches.match(`${r}/${s[1]}`)?console.log("already cached",caches.match(`${r}/${s[1]}`)):caches.open("vader").then((e=>{e.add(`${r}/${s[1]}`),console.log("cached",`${r}/${s[1]}`)})).catch((e=>{console.log(e)}))}let n=c.match(/href="([^"]*)"/g);if(n)for(;n.length;){let a=n.pop();if(a=a.replace('href="',"").replace('"',""),a.includes("http")||c.includes("\x3c!-- #vader-disable_relative-paths --\x3e")){if(!a.includes("http")&&a.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${a}`)}else c=c.replace(`href="${a}"`,`href="#${a}"`)}let d=Date.now()-a,h=!1;(r.includes("localhost")||r.includes("127.0.0.1")&&!h)&&(h=!0,c+=`\${console.log('%c${e.data.name} component rendered in ${d}ms','color:#fff;background:#000;padding:5px;border-radius:5px;font-size:12px;font-weight:bold'),""}`);const p=c.split("<script>");p&&p.forEach(((e,a)=>{if(0===a)c=e;else{if(e.includes("// <![CDATA[  <-- For SVG support"))return;let a=e.split("<\/script>")[0];t+=a}}));let $=c.match(/(\$\(.*?\))/gs);if($)for(;$.length;){let e=$.pop();c=c.replace(e,`\${${e.replace("$(","").replace(")","")}}`)}postMessage({template:`<div data-component=${e.data.name}>${c}</div>`,js:t||""})};
+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(/(#+)(.*)/g,((e,l,a)=>{if(e.includes("<")&&e.includes(">"))return e;{let e=l.length;return`<h ${e} class="markdown_heading">${a}</h${e}>`}})),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 n=c.match(/<img([^>]*)>/g);if(n)for(let l=0;l<n.length;l++){let a=n[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 o=c.match(/href="([^"]*)"/g);if(o)for(;o.length;){let l=o.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)}c=c.replaceAll('=""',"");let g=c.match(/@style{([^>]*)};/gs);if(g)for(let e=0;e<g.length;e++){if(!g[e].includes("style"))continue;g[e].match(/@style{([^>]*)};/).forEach((e=>{let l=e.replace("@style{","").replace("};","");l=l.replaceAll(",",";"),l=l.replaceAll(/'/g," "),c=c.replace(e,`style="${l}"`)}))}postMessage({template:`<div data-component=${e.data.name}>${c}</div>`,js:s||""})};

package/worker.js

@@ -1,10 +1,9 @@
- 
-onmessage = (e)=>{
-  let time_started = Date.now()
-  let strings =  e.data.strings
-  let args =   e.data.args
-  let js = ''
-  let l =  e.data.location.split('/').slice(0,-1).join('/')
+onmessage = (e) => {
+  let time_started = Date.now();
+  let strings = e.data.strings;
+  let args = e.data.args;
+  let js = "";
+  let l = e.data.location.split("/").slice(0, -1).join("/");
   let result = "";
   for (let i = 0; i < strings.length; i++) {
     result += strings[i];
@@ -13,214 +12,290 @@ onmessage = (e)=>{
     }
   }
 
-  let comments = result.match(/--([^>]*)--/gs)
-  if(comments){
-      while(comments.length){
-          let comment = comments.pop()
-          console.log(comment)
-          // @ts-ignore
-          result = result.replace(comment,'')
-      }
+  let comments = result.match(/--([^>]*)--/gs);
+  if (comments) {
+    while (comments.length) {
+      let comment = comments.pop();
+      // @ts-ignore
+      result = result.replace(comment, "");
+    }
   }
 
-
   // Convert headings (e.g., #1-6 Heading => <h1-6>Heading</h1-6>)
   // @ts-ignore
-    result = result.replace(/(#+)(.*)/g, (match, hashes, text) => {
-      console.log(match)
-      if(!match.includes('<') || !match.includes('>')){ 
-        let level = hashes.length;
-          return `<h ${level} class="markdown_heading">${text}</h${level}>`;
-      }else{
-          return match
-      }
-    });
+  result = result.replace(/(#+)(.*)/g, (match, hashes, text) => {
+    if (!match.includes("<") || !match.includes(">")) {
+      let level = hashes.length;
+      return `<h ${level} class="markdown_heading">${text}</h${level}>`;
+    } else {
+      return match;
+    }
+  });
 
-    
+  // Convert bold (e.g., **Bold** => <b>Bold</b>)
+  result = result.replace(/\*\*(.*?)\*\*/g, (match, text) => {
+    return `<b class="markdown_bold">${text}</b>`;
+  });
 
-  
-    // Convert bold (e.g., **Bold** => <b>Bold</b>)
-    result = result.replace(/\*\*(.*?)\*\*/g, (match, text) => {
-      return `<b class="markdown_bold">${text}</b>`;
-    });
-  
-    // Convert italic (e.g., *Italic* => <i>Italic</i>)
-    result = result.replace(/\*(.*?)\*/g, (match, text) => {
-      return `<i class="markdown_italic">${text}</i>`;
-    });
-  
-    // Convert code (e.g., `code` => <code>code</code>)
-    result = result.replace(/`(.*?)`/g, (match, text) => {
-      return `<code>${text}</code>`;
-    });
-  
-    // Convert links (e.g., [Text](URL) => <a href="URL">Text</a>)
-    result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, text, url) => {
-      return `<a  class="markdown_link" href="${url}">${text}</a>`;
-    });
-  
-    // Convert images (e.g., ![Alt](URL) => <img src="URL" alt="Alt" />)
-    result = result.replace(/!\[([^\]]+)\]\(([^)]+)\)/g, (match, alt, src) => {
-      return `<img  class="markdown_image" src="${src}" alt="${alt}" />`;
-    });
-  
-    // Convert unordered lists (e.g., * Item => <ul><li>Item</li></ul>)
-    result.split('\n').forEach((line, index, arr) => {
-      if (line.match(/^\s*-\s+(.*?)$/gm)) {
-        if (index === 0 || !arr[index - 1].match(/^\s*-\s+(.*?)$/gm)) {
-          result = result.replace(line, `<ul class="markdown_unordered" style="list-style-type:disc;list-style:inside"><li>${line.replace(/^\s*-\s+(.*?)$/gm, '$1')}</li>`);
-        } else if (index === arr.length - 1 || !arr[index + 1].match(/^\s*-\s+(.*?)$/gm)) {
-          result = result.replace(line, `<li>${line.replace(/^\s*-\s+(.*?)$/gm, '$1')}</li></ul>`);
-        } else {
-          result = result.replace(line, `<li>${line.replace(/^\s*-\s+(.*?)$/gm, '$1')}</li>`);
-        }
+  // Convert italic (e.g., *Italic* => <i>Italic</i>)
+  result = result.replace(/\*(.*?)\*/g, (match, text) => {
+    return `<i class="markdown_italic">${text}</i>`;
+  });
+
+  // Convert code (e.g., `code` => <code>code</code>)
+  result = result.replace(/`(.*?)`/g, (match, text) => {
+    return `<code>${text}</code>`;
+  });
+
+  // Convert links (e.g., [Text](URL) => <a href="URL">Text</a>)
+  result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, text, url) => {
+    return `<a  class="markdown_link" href="${url}">${text}</a>`;
+  });
+
+  // Convert images (e.g., ![Alt](URL) => <img src="URL" alt="Alt" />)
+  result = result.replace(/!\[([^\]]+)\]\(([^)]+)\)/g, (match, alt, src) => {
+    return `<img  class="markdown_image" src="${src}" alt="${alt}" />`;
+  });
+
+  // Convert unordered lists (e.g., * Item => <ul><li>Item</li></ul>)
+  result.split("\n").forEach((line, index, arr) => {
+    if (line.match(/^\s*-\s+(.*?)$/gm)) {
+      if (index === 0 || !arr[index - 1].match(/^\s*-\s+(.*?)$/gm)) {
+        result = result.replace(
+          line,
+          `<ul class="markdown_unordered" style="list-style-type:disc;list-style:inside"><li>${line.replace(
+            /^\s*-\s+(.*?)$/gm,
+            "$1"
+          )}</li>`
+        );
+      } else if (
+        index === arr.length - 1 ||
+        !arr[index + 1].match(/^\s*-\s+(.*?)$/gm)
+      ) {
+        result = result.replace(
+          line,
+          `<li>${line.replace(/^\s*-\s+(.*?)$/gm, "$1")}</li></ul>`
+        );
+      } else {
+        result = result.replace(
+          line,
+          `<li>${line.replace(/^\s*-\s+(.*?)$/gm, "$1")}</li>`
+        );
       }
-    });
+    }
+  });
 
-    // Convert ordered lists (e.g., 1. Item => <ol><li>Item</li></ol>) in order
-  
-     result.split('\n').forEach((line, index, arr) => {
-      if (line.match(/^\s*\d+\.\s+(.*?)$/gm)) {
-        if (index === 0 || !arr[index - 1].match(/^\s*\d+\.\s+(.*?)$/gm)) {
-          result = result.replace(line, `<ol class="markdown_ordered" style="list-style-type:decimal;"><li>${line.replace(/^\s*\d+\.\s+(.*?)$/gm, '$1')}</li>`);
-        } else if (index === arr.length - 1 || !arr[index + 1].match(/^\s*\d+\.\s+(.*?)$/gm)) {
-          result = result.replace(line, `<li>${line.replace(/^\s*\d+\.\s+(.*?)$/gm, '$1')}</li></ol>`);
-        } else {
-          result = result.replace(line, `<li>${line.replace(/^\s*\d+\.\s+(.*?)$/gm, '$1')}</li>`);
-        }
+  // Convert ordered lists (e.g., 1. Item => <ol><li>Item</li></ol>) in order
+
+  result.split("\n").forEach((line, index, arr) => {
+    if (line.match(/^\s*\d+\.\s+(.*?)$/gm)) {
+      if (index === 0 || !arr[index - 1].match(/^\s*\d+\.\s+(.*?)$/gm)) {
+        result = result.replace(
+          line,
+          `<ol class="markdown_ordered" style="list-style-type:decimal;"><li>${line.replace(
+            /^\s*\d+\.\s+(.*?)$/gm,
+            "$1"
+          )}</li>`
+        );
+      } else if (
+        index === arr.length - 1 ||
+        !arr[index + 1].match(/^\s*\d+\.\s+(.*?)$/gm)
+      ) {
+        result = result.replace(
+          line,
+          `<li>${line.replace(/^\s*\d+\.\s+(.*?)$/gm, "$1")}</li></ol>`
+        );
+      } else {
+        result = result.replace(
+          line,
+          `<li>${line.replace(/^\s*\d+\.\s+(.*?)$/gm, "$1")}</li>`
+        );
       }
-     });
+    }
+  });
 
-     
-     result = result.replace(/^\s*-\s+(.*?)$/gm, (match, text) => {
-      return `<li class="markdown_list_item">${text}</li>`;
-    });
-    result = result.replace(/^\s*---\s*$/gm, '<hr class="markdown_horizontal" />');
-   
-    // Convert blockquotes (e.g., > Quote => <blockquote>Quote</blockquote>)
-    result = result.replace(/^\s*> (.*)$/gm, (match, text) => {
-      return `<blockquote class="markdown_blockquote">${text}</blockquote>`;
-    });
+  result = result.replace(/^\s*-\s+(.*?)$/gm, (match, text) => {
+    return `<li class="markdown_list_item">${text}</li>`;
+  });
+  result = result.replace(
+    /^\s*---\s*$/gm,
+    '<hr class="markdown_horizontal" />'
+  );
 
-    // Convert tables (e.g., | Header | Cell | => <table><thead><tr><th>Header</th><th>Cell</th></tr></thead></table>)
-    result = result.replace(/((?: *\|.*?)+)\n((?: *\|.*?)+)/gm, (match, header, cell) => {
-      const headerCells = header.split('|').slice(1, -1);
-      const cells = cell.split('|').slice(1, -1);
+  // Convert blockquotes (e.g., > Quote => <blockquote>Quote</blockquote>)
+  result = result.replace(/^\s*> (.*)$/gm, (match, text) => {
+    return `<blockquote class="markdown_blockquote">${text}</blockquote>`;
+  });
+
+  // Convert tables (e.g., | Header | Cell | => <table><thead><tr><th>Header</th><th>Cell</th></tr></thead></table>)
+  result = result.replace(
+    /((?: *\|.*?)+)\n((?: *\|.*?)+)/gm,
+    (match, header, cell) => {
+      const headerCells = header.split("|").slice(1, -1);
+      const cells = cell.split("|").slice(1, -1);
       let table = '<table class="markdown_table">';
-      table += '<thead class="markdown_table_head"><tr class="markdown_table_row">';
+      table +=
+        '<thead class="markdown_table_head"><tr class="markdown_table_row">';
       headerCells.forEach((headerCell) => {
         table += `<th class="markdown_table_header_cell">${headerCell}</th>`;
       });
-      table += '</tr></thead><tbody class="markdown_table_body"><tr class="markdown_table_row">';
+      table +=
+        '</tr></thead><tbody class="markdown_table_body"><tr class="markdown_table_row">';
       cells.forEach((cell) => {
         table += `<td class="markdown_table_body_cell">${cell}</td>`;
       });
-      table += '</tr></tbody></table>';
+      table += "</tr></tbody></table>";
       return table;
-    });
-
-    
-  
+    }
+  );
 
-  if(!result.includes('<body>')){
-      throw new Error(`Vader Error: You must enclose your html in a body tag for all components. \n\n${result}`)
+  if (!result.includes("<body>")) {
+    throw new Error(
+      `Vader Error: You must enclose your html in a body tag for all components. \n\n${result}`
+    );
   }
   /**
    * @type {string[]}
    * @description - grabbing all className attributes and replace them with  class
    */
   // @ts-ignore
-   result = result.replace(/classname/g,'class')
-       /**
+  result = result.replace(/classname/g, "class");
+  /**
    * @type {string[]}
    * @description - grabbing all image tags and replace the src attribute with the absolute path
    */
   // @ts-ignore
-  let images = result.match(/<img([^>]*)>/g)
-   if(images){
-      for(let i = 0; i < images.length; i++){
-    let image = images[i]
-    let src = image.match(/src="([^"]*)"/)
-    let alt = image.match(/alt="([^"]*)"/)
-    if(src){
-      if(!src[1].includes('http') && !result.includes('<!-- #vader-disable_relative-paths -->')){
-          // @ts-ignore
-          result = result.replace(src[1],`${l}/${src[1]}`)
-      } else if(!src[1].includes('http') && src[1].startsWith('.') && !result.includes('<!-- #vader-disable_relative-paths -->')){
-        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${src[1]}`)
-    }
-    }
-    if(!alt && !result.includes('<!-- #vader-disable_accessibility -->')){
-       throw new Error(`Vader Error: You must include an alt attribute in the image tag  \n\n${image} of class ${e.data.name}. `)
+  let images = result.match(/<img([^>]*)>/g);
+  if (images) {
+    for (let i = 0; i < images.length; i++) {
+      let image = images[i];
+      let src = image.match(/src="([^"]*)"/);
+      let alt = image.match(/alt="([^"]*)"/);
+
+      if (!alt && !result.includes("<!-- #vader-disable_accessibility -->")) {
+        throw new Error(
+          `Vader Error: You must include an alt attribute in the image tag  \n\n${image} of class ${e.data.name}. `
+        );
+      }
+      if (src) {
+        src.forEach((s) => {
+          if (
+            !s.includes("http") &&
+            !result.includes("<!-- #vader-disable_relative-paths -->")
+          ) {
+            result = result.replace(`src="${s}"`, `src="${l}/${s}"`);
+          } else if (
+            !s.includes("http") &&
+            s.startsWith(".") &&
+            !result.includes("<!-- #vader-disable_relative-paths -->")
+          ) {
+            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${s}`
+            );
+          }
+        });
+      }
     }
+  }
 
-    // @ts-ignore
-     if(!caches.match(`${l}/${src[1]}`)){
-      caches.open('vader').then((cache)=>{
-          // @ts-ignore
-          cache.add(`${l}/${src[1]}`)
-          // @ts-ignore
-          console.log('cached', `${l}/${src[1]}`)
-         }).catch((err)=>{
-           console.log(err)
-         })
-     }else{
+  let href = result.match(/href="([^"]*)"/g);
+  if (href) {
+    while (href.length) {
+      let h = href.pop();
       // @ts-ignore
-          console.log('already cached', caches.match(`${l}/${src[1]}`))
-     }
-  }
-   }
-
-  let href =  result.match(/href="([^"]*)"/g)
-  if(href){
-      while(href.length){
-          let h = href.pop()
-          // @ts-ignore
-          h = h.replace('href="','').replace('"','')
-          if(!h.includes('http') && !result.includes('<!-- #vader-disable_relative-paths -->')){
-             result = result.replace(`href="${h}"`,`href="#${h}"`)
-          }else if(!h.includes('http') && h.startsWith('.') && !result.includes('<!-- #vader-disable_relative-paths -->')){
-            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${h}`)
-          }
+      h = h.replace('href="', "").replace('"', "");
+      if (
+        !h.includes("http") &&
+        !result.includes("<!-- #vader-disable_relative-paths -->")
+      ) {
+        result = result.replace(`href="${h}"`, `href="#${h}"`);
+      } else if (
+        !h.includes("http") &&
+        h.startsWith(".") &&
+        !result.includes("<!-- #vader-disable_relative-paths -->")
+      ) {
+        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${h}`
+        );
       }
+    }
   }
-  
-  let time_ended = Date.now()
-  let time_taken = time_ended - time_started
-  let hasran = false
-  if(l.includes('localhost') || l.includes('127.0.0.1') && !hasran){
-      hasran = true
-      result+= `\$\{console.log('%c${e.data.name} component rendered in ${time_taken}ms','color:#fff;background:#000;padding:5px;border-radius:5px;font-size:12px;font-weight:bold'),""\}`
+
+  let time_ended = Date.now();
+  let time_taken = time_ended - time_started;
+  let hasran = false;
+  if (l.includes("localhost") || (l.includes("127.0.0.1") && !hasran)) {
+    hasran = true;
+    result += `\$\{console.log('%c${e.data.name} component rendered in ${time_taken}ms')\}`;
   }
- 
- 
-  const d = result.split('<script>')
+
+  const d = result.split("<script>");
 
   if (d) {
     d.forEach((scriptTag, index) => {
       if (index === 0) {
         result = scriptTag;
       } else {
-        if(scriptTag.includes('// <![CDATA[  <-- For SVG support')){
-          return
+        if (scriptTag.includes("// <![CDATA[  <-- For SVG support")) {
+          return;
         }
-        let script = scriptTag.split('</script>')[0];
+        let script = scriptTag.split("</script>")[0];
         js += script;
       }
     });
   }
-   
-  let  jstemplates = result.match(/(\$\(.*?\))/gs)
-  if(jstemplates){
-      while(jstemplates.length){
-          let jstemplate = jstemplates.pop()
-          // @ts-ignore
-          result = result.replace(jstemplate,`$\{${jstemplate.replace('$(','').replace(')','')}\}`)
+
+  let jstemplates = result.match(/(\$\(.*?\))/gs);
+  if (jstemplates) {
+    while (jstemplates.length) {
+      let jstemplate = jstemplates.pop();
+      // @ts-ignore
+      result = result.replace(
+        // @ts-ignore
+        jstemplate,
+        // @ts-ignore
+        `$\{${jstemplate.replace("$(", "").replace(")", "")}\}`
+      );
+    }
+  }
+
+  let title = result.match(/@title '([^>]*)'/);
+  if (title) {
+    let t = title[1];
+    let ti = `{document.title = "${t}", ""}`;
+    result = result.replace(title[0], "$" + ti);
+  }
+  // @ts-ignore
+  result = result.replaceAll('=""', '')
+  let styles =  result.match(/@style{([^>]*)};/gs);
+  if (styles) {
+    for (let i = 0; i < styles.length; i++) {
+      // make sure its in a tag
+
+      if (!styles[i].includes("style")) {
+        continue;
       }
+      let style = styles[i];
+ 
+ 
+      let s = style.match(/@style{([^>]*)};/);
+      
+      // @ts-ignore
+      s.forEach((style) => {
+     
+        let st = style.replace("@style{", "").replace("};", "");
+        // @ts-ignore
+        st = st.replaceAll(',', ';')
+        // @ts-ignore
+        st = st.replaceAll(/'/g, ' ')
+        
+        result = result.replace(style, `style="${st}"`);
+      });
+    }
   }
+
   postMessage({
     template: `<div data-component=${e.data.name}>${result}</div>`,
-    js: js ? js : ''
-  })
- 
-}
+    js: js ? js : ""
+  });
+};