vaderjs 1.3.0 → 1.3.1

package/package.json

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

package/vader-min.js

@@ -0,0 +1 @@
+let dom=[],states={},worker=new Worker(new URL("./worker.js",import.meta.url));function markdown(e){let t=e.match(/(#+)(.*)/g);return t&&t.forEach((t=>{if(t.includes("/")||t.includes("<")||t.includes(">"))return;let s=t.split("#").length;e=e.replace(t,`<h${s} class="markdown_heading">${t.replace(/#/g,"")}</h${s}>`)})),e=(e=(e=(e=(e=(e=(e=e.replace(/\*\*(.*?)\*\*/g,((e,t)=>`<b class="markdown_bold">${t}</b>`))).replace(/\*(.*?)\*/g,((e,t)=>`<i class="markdown_italic">${t}</i>`))).replace(/`(.*?)`/g,((e,t)=>`<code>${t}</code>`))).replace(/\[([^\]]+)\]\(([^)]+)\)/g,((e,t,s)=>`<a class="markdown_link" href="${s}">${t}</a>`))).replace(/!\[([^\]]+)\]\(([^)]+)\)/g,((e,t,s)=>`<img class="markdown_image" src="${s}" alt="${t}" />`))).split("\n").map(((e,t,s)=>e.match(/^\s*-\s+(.*?)$/gm)?0!==t&&s[t-1].match(/^\s*-\s+(.*?)$/gm)?t!==s.length-1&&s[t+1].match(/^\s*-\s+(.*?)$/gm)?`<li>${e.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li>`:`<li>${e.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li></ul>`:`<ul class="markdown_unordered" style="list-style-type:disc;list-style:inside"><li>${e.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li>`:e)).join("\n")).split("\n").map(((e,t,s)=>e.match(/^\s*\d+\.\s+(.*?)$/gm)?0!==t&&s[t-1].match(/^\s*\d+\.\s+(.*?)$/gm)?t!==s.length-1&&s[t+1].match(/^\s*\d+\.\s+(.*?)$/gm)?`<li>${e.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li>`:`<li>${e.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li></ol>`:`<ol class="markdown_ordered" style="list-style-type:decimal;"><li>${e.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li>`:e)).join("\n")}export const useRef=e=>{const t=document.querySelector(`[ref="${e}"]`);return{current:t,update:e=>{const s=(new DOMParser).parseFromString(e,"text/html").body.firstChild;if(t){!s.isEqualNode(t)&&t.parentNode.replaceChild(s,t)}}}};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.snapshots=[],this.dom=[],this.cfr=!1}adapter(){}init(){this.registerComponent()}registerComponent(){components.push(this)}setState(e,t){this.states[e]=t,this.updateComponent()}unmount(){this.componentMounted=!1,this.componentWillUnmount(),document.querySelector(`[data-component="${this.name}"]`).remove(),document.querySelector(`[data-component="${this.name}"]`)||(components=components.filter((e=>e.name!==this.name)))}componentUpdate(e,t,s){}componentDidMount(){}componentWillUnmount(){}signal=(e,t)=>{let s=!1,[r,n]=this.useState(e,t,(()=>{if(this.$_signal_subscribers.length>0){for(var e=0;e<this.$_signal_subscribers.length;e++)if(!s){if(this.$_signal_subscribers[e].runonce&&this.$_signal_subscribers_ran.includes(this.$_signal_subscribers[e]))break;return this.$_signal_subscribers[e].function(r),void this.$_signal_subscribers_ran.push(this.$_signal_subscribers[e])}}else this.$_signal_dispatch_event.detail.hasUpdated=!0,this.$_signal_dispatch_event.detail.state=r,window.dispatchEvent(this.$_signal_dispatch_event)}));return this.$_signal_subscribe=(e,t)=>{this.$_signal_subscribers.push({function:e,runonce:t})},this.$_signal_cleanup=e=>{this.$_signal_subscribers=this.$_signal_subscribers.filter((t=>t.function!==e))},this.$_signal_dispatch=()=>{for(var e=0;e<this.$_signal_subscribers.length&&(!this.$_signal_subscribers[e].runonce||!this.$_signal_subscribers_ran.includes(this.$_signal_subscribers[e]));e++)this.$_signal_subscribers[e].function(r),this.$_signal_subscribers_ran.push(this.$_signal_subscribers[e])},this.$_signal_get=()=>r,this.$_signal_call=()=>{s=!0,this.$_signal_dispatch()},this.$_signal_set=e=>{n(e)},{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(e){let t=e.rulesets;if(!t)throw new Error("No rulesets provided");let s=e.user,r={can:e=>{let r=!1;return t.forEach((t=>{t.action===e&&t.condition(s)&&(r=!0)})),r},hasRole:e=>s.role&&s.role.includes(e),canWithRole:(e,t)=>r.can(e)&&r.hasRole(t),assignRule:e=>{t.some((t=>t.action===e.action))||t.push(e)},revokeRule:e=>{t=t.filter((t=>t.action!==e))},canAnyOf:e=>e.some((e=>r.can(e))),canAllOf:e=>e.every((e=>r.can(e))),canGroup:(e,t="any")=>"any"===t?r.canAnyOf(e):r.canAllOf(e)};return r}useReducer(e,t,s){return this.states[e]||(this.states[e]=s),[this.states[e],s=>{this.states[e]=t(this.states[e],s),this.updateComponent()}]}runEffects(){Object.keys(this.effects).forEach((e=>{this.effects[e].forEach((e=>{this.executedEffects[e]||(e(),this.executedEffects[e]=!0)}))}))}useSyncStore(e,t){let[s,r]=this.useState(e,t||localStorage.getItem(`$_vader_${e}`,(t=>{localStorage.setItem(`$_vader_${e}`,JSON.stringify(t)),this.$_useStore_subscribers.forEach((e=>{e(t)}))}))||{});return{getField:e=>s[e],setField:(e,t)=>{const n={...s,[e]:t};r(n)},subscribe:e=>this.$_useStore_subscribers.push(e),clear:e=>{let t=s;delete t[e],r(t)}}}useState(e,t,s=null){return this.states[e]||(this.states[e]=t),[this.states[e],t=>{this.states[e]=t,this.updateComponent(),"function"==typeof s&&s()}]}useRef(e){console.log(this.dom);const t=this.dom[e];return{current:()=>t,update:e=>{const s=(new DOMParser).parseFromString(e,"text/html").body.firstChild;if(t){!s.isEqualNode(t)&&t.parentNode.replaceChild(s,t)}}}}useEffect(e,t){return this.effects[this.name]||(this.effects[this.name]=[]),this.effects[this.name].push(e),t.length>0?t.forEach((e=>{if(e.set)throw new Error("signal found, do not use effect and signals at the same time - signals are more efficient")})):this.hasMounted||(e(),this.hasMounted=!0),{cleanup:()=>{this.effects[this.name]=this.effects[this.name].filter((t=>t!==e))}}}$Function(e){let t=e.name;return t||(t="anonymous"+Math.floor(1e17*Math.random())),window[t]=e,`window.${t}()`}updateComponent(){const e=document.createDocumentFragment();Object.keys(components).forEach((async t=>{const{name:s}=components[t];let r=document.querySelector(`[data-component="${s}"]`),n={name:s,time:(new Date).getTime(),prev_state:this.states,prev_props:this.storedProps,content:r.innerHTML};if(!r)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!==r.innerHTML){if(this.snapshots.length>0){this.snapshots[this.snapshots.length-1]!==n&&this.snapshots.push(n)}else this.snapshots.push(n);this.componentUpdate(n.prev_state,n.prev_props,n.content),e.appendChild(document.createRange().createContextualFragment(i)),r.innerHTML="",r.appendChild(e),this.runEffects()}}))}validateClassName(e){return/^[a-zA-Z0-9-_]+$/.test(e)}parseHTML(e){const t=(new DOMParser).parseFromString(e,"text/html");console.log(t);return t.documentElement.querySelectorAll("*").forEach((e=>{if("IMG"===e.nodeName){if(!e.hasAttribute("alt")&&!document.documentElement.outerHTML.trim().includes("\x3c!-- #vader-disable_accessibility --\x3e"))throw new SyntaxError(`Image: ${e.outerHTML} missing alt attribute`);if(e.hasAttribute("alt")&&e.getAttribute("alt").length<1&&!document.documentElement.outerHTML.trim().includes("\x3c!-- #vader-disable_accessibility --\x3e"))throw new SyntaxError(`Image: ${e.outerHTML} alt attribute cannot be empty`);if(e.hasAttribute("src")&&!e.getAttribute("src")?.includes("http")||!e.getAttribute("src")?.includes("https")&&!document.documentElement.outerHTML.trim().includes("\x3c!-- #vader-disable_accessibility --\x3e")){let t=e.getAttribute("src");e.setAttribute("aria-hidden","true"),e.setAttribute("hidden","true");let s=window.location.origin+window.location.pathname.replace(/\/[^\/]*$/,"")+"/public/"+e.getAttribute("src"),r=new Image;r.src=s,r.onerror=()=>{throw e.setAttribute("src",t),new Error(`Image: ${e.outerHTML} not found`)},e.setAttribute("src",s),r.onload=()=>{document.querySelectorAll(`img[src="${s}"]`).forEach((e=>{e.setAttribute("src",s),e.removeAttribute("aria-hidden"),e.removeAttribute("hidden")}))}}}else{if(e.hasAttribute("ref")&&(t[e.getAttribute("ref")]=e),"MARKDOWN"===e.nodeName&&(e.innerHTML=markdown(e.innerHTML.replace(/\\n/g,"\n").trim())),e.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 e.hasAttribute("className")&&(e.setAttribute("class",e.getAttribute("className")),e.removeAttribute("className"));e.hasAttribute("href")&&e.getAttribute("href").startsWith("/")&&!document.documentElement.outerHTML.trim().includes("\x3c!-- #vader-disable_relative-paths --\x3e")&&e.setAttribute("href",`#/${e.getAttribute("href").replace("/","")}`),!e.hasAttribute("src")||e.getAttribute("src").includes("http")||e.getAttribute("src").includes("https")||document.documentElement.outerHTML.includes("\x3c!-- #vader-disable_relative-paths --\x3e")||e.setAttribute("src",`./public/${e.getAttribute("src")}`)}})),e=t.body.innerHTML,this.Componentcontent=e,e.includes("<div data-component")||(e=`<div data-component="${this.name}">${e}</div>`),markdown(e.replace(/\\n/g,"\n").trim())}html(e,...t){let s=setInterval((()=>{document.querySelector(`[data-component="${this.name}"]`)&&(clearInterval(s),this.componentMounted=!0,document.querySelector(`[data-component="${this.name}"]`)?.querySelectorAll("*").forEach((e=>{e.hasAttribute("ref")&&(this.dom[e.getAttribute("ref")]=e)})),this.componentDidMount())}),100),r=document.createElement("script");r.setAttribute("type","text/javascript"),r.setAttribute("data-component-script",this.name);this.dom;if(this.cfr){worker.postMessage({strings:e,args:t,location:window.location.origin+window.location.pathname.replace(/\/[^\/]*$/,"")+"/public/",name:this.name});let s=new Promise(((e,t)=>{worker.onmessage=t=>{if(t.data.error)throw new Error(t.data.error);this.dom;console.log(this.dom);let s=t.data.js,r=t.data.template;const n=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)(n,i,o,a,c,l,u,this.dom,this.render,this.states,d),e(new Function("useRef","states","return`"+r+"`")(d,h))},worker.onerror=e=>{t(e)}}));return s}{let s="";for(let r=0;r<e.length;r++)s+=e[r],r<t.length&&(s+=t[r]);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(e){}}const Vader={Component:Component,useRef:useRef};export const component=e=>new Component;export const rf=(e,t)=>{window[e]=t};let cache={};async function handletemplate(e){let t=(new DOMParser).parseFromString(e,"text/html"),s=t.documentElement.querySelectorAll("*");if(s.length>0)for(var r=0;r<s.length;r++)if("INCLUDE"===s[r].nodeName){if(!s[r].getAttribute("src")||""===s[r].getAttribute("src"))throw new Error("Include tag must have src attribute");let e=s[r].getAttribute("src")?.split("/").pop()?.split(".")[0],n=await include(s[r].getAttribute("src"));n=n.replace(/`/g,"\\`"),cache[s[r].getAttribute("src")]=n,n=new Function(`return \`${n}\`;`)();let i=(new DOMParser).parseFromString(n,"text/html");i.querySelectorAll("include").forEach((e=>{e.remove()})),t.querySelectorAll(e).forEach((e=>{if(e.attributes.length>0)for(var s=0;s<e.attributes.length;s++)i.body.outerHTML=i.body.outerHTML.replace(`{{${e.attributes[s].name}}}`,e.attributes[s].value);if(e.children.length>0&&i.body.querySelector("slot"))for(s=0;s<e.children.length;s++){i.body.querySelectorAll("slot").forEach((t=>{t.getAttribute("id")===e.nodeName.toLowerCase()&&(t.outerHTML=`<div>${e.innerHTML}</div>`)}))}t.body.querySelectorAll("include").forEach((e=>{e.remove()})),t.body.outerHTML=t.body.outerHTML.replace(/`/g,"\\`"),t.body.outerHTML=t.body.outerHTML.replace(e.outerHTML,new Function(`return \`${i.body.outerHTML}\`;`)())}))}return t.body.outerHTML=t.body.outerHTML.replace(/`/g,"\\`"),e=new Function(`return \`${t.body.outerHTML}\`;`)()}export const include=async e=>(!e.startsWith("/")||e.includes("/src/")||document.documentElement.outerHTML.trim().includes("\x3c!-- #vader-disable_relative-paths --\x3e")||(e="/src/"+e),cache[e]?await handletemplate(new Function(`return \`${cache[e]}\`;`)()):fetch(`./${e}`).then((t=>{if(404===t.status)throw new Error(`No file found at ${e}`);return t.text()})).then((async t=>(cache[e]=t,t=await handletemplate(new Function(`return \`${t}\`;`)())))));export default Vader;

package/vader.js

@@ -1,4 +1,4 @@
-let dom = /**@type {Obect}  **/ {};
+let dom = []
 let states = {};
 let worker =  new Worker(new URL('./worker.js', import.meta.url));
 /**
@@ -7,125 +7,65 @@ let worker =  new Worker(new URL('./worker.js', import.meta.url));
  * @description Allows you to convert markdown to html 
  */
 function markdown(content) {
-  const lines = content.split('\n').filter((line) => line !== '').map((line) => line.trim());
-   
-  let result = '';
-
-  lines.forEach((line) => {
-    let heading = line.match(/^#{1,6}\s/);
-    let bold = line.match(/\*\*(.*?)\*\*/g);
-    let italic = line.match(/\*(.*?)\*/g);
- 
-    let link = line.match(/\[(.*?)\]\((.*?)\)/g);
-    let ul = line.match(/^\-\s/);
-    let ol =  line.match(/^\d\.\s/);
   
-    let li = line.match(/^\s/);
-    let hr = line.match(/^\-\-\-\s/);
-    let blockquote = line.match(/^\>\s/);
-    let image = line.match(/\!\[(.*?)\]\((.*?)\)/g);
-    
-    
-    let codeBlock = line.match(/\`\`\`/g);
-    let codeBlockEnd = line.match(/\`\`\`/g);
-    let code = line.match(/\`(.*?)\`/g);
-    
+  let headers = content.match(/(#+)(.*)/g);
+  if (headers) {
+  headers.forEach((header) => {
+     if(header.includes('/') || header.includes('<') || header.includes('>')){
+       return
 
-     
-    if (heading) {
-       // @ts-ignore
-      let headingLevel = heading[0].match(/#/g).length;
-      line = line.replace(heading[0], `<h${headingLevel}>`);
-      line += `</h${headingLevel}>`;
-    }
-    if (bold) {
-      bold.forEach((b) => {
-        line = line.replace(b, `<strong
-        className="$vader_markdown_bold"
-        >${b.replace(/\*\*/g, "")}</strong>`);
-      });
-    }
-    if (italic) {
-      italic.forEach((i) => {
-        line = line.replace(i, `<em
-        className="$vader_markdown_italic"
-        >${i.replace(/\*/g, "")}</em>`);
-      });
-    }
+     }
+    let level = header.split('#').length;
+    content = content.replace(header, `<h${level} class="markdown_heading">${header.replace(/#/g, '')}</h${level}>`);
+  });
+  }
 
-   
-    if(link){
-      link.forEach((l) => {
-         // @ts-ignore
-        let text = l.match(/\[(.*?)\]/g)[0].replace(/\[|\]/g, "");
-         // @ts-ignore
-        let href = l.match(/\((.*?)\)/g)[0].replace(/\(|\)/g, "");
-        line = line.replace(l, `<a 
-        className="$vader_markdown_link"
-        href="${href}">${text}</a>`);
-      });
-    }
-    if (ul) {
-      line = line.replace(ul[0], `<li
-      className="$vader_markdown_ul"
-      style="list-style-type: disc;">`);
-      line += `</li>`;
-    }
-    if (ol) {
-      line = line.replace(ol[0], `<li 
-      className="$vader_markdown_ol"
-      style="list-style-type: decimal;">`);
-      line += `</li>`;
-    }
-    if (hr) {
-      line = line.replace(hr[0], `<hr/>`);
-    }
-    if (blockquote) {
-      line = line.replace(blockquote[0], `<blockquote
-      className="$vader_markdown_blockquote"
-      >`);
-      line += `</blockquote>`;
-    }
-    if (image) {
-      image.forEach((i) => {
-        // @ts-ignore
-        let alt = i.match(/\[(.*?)\]/g)[0].replace(/\[|\]/g, "");
-         // @ts-ignore
-        let src = i.match(/\((.*?)\)/g)[0].replace(/\(|\)/g, "");
-        i.replace(i, `<img src="${src}" alt="${alt}"/>`);
-        line = line.replace(i, `<img 
-        className="$vader_markdown_image"
-        src="${src}" alt="${alt}"/>`).replace('!','')
-      });
-    }
-    if (li) {
-      line = line.replace(li[0], `<li>`);
-      line += `</li>`;
-    }
-    if (codeBlock) {
-      line = line.replace(codeBlock[0], `<pre className="$vader_markdown_code_block" ><code>`);
-    }
-    if (codeBlockEnd) {
-      line = line.replace(codeBlockEnd[0], `</code></pre>`);
+  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');
 
-    if (code) {
-      code.forEach((c) => {
-        line = line.replace(c, `<code
-        className="$vader_markdown_code"
-        style="background-color: #f5f5f5; padding: 5px; border-radius: 5px;
-        "
-        >${c.replace(/\`/g, "")}</code>`);
-      });
+  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');
 
 
-    result += `${line}\n`;
-  });
-
-  return result;
+  return content
+   
 }
 
  
@@ -208,6 +148,13 @@ export class Component {
       },
     });
     this.snapshots = [];
+    /**
+     * @property {Object} dom
+     * @description Allows you to get reference to DOM element
+     * @returns {void | HTMLElement}
+     * 
+     */
+    this.dom =  []
     
     /**
      * @property {Boolean} cfr
@@ -562,6 +509,8 @@ export class Component {
       },
     ];
   }
+
+ 
   runEffects() {
     Object.keys(this.effects).forEach((component) => {
       this.effects[component].forEach((effect) => {
@@ -572,6 +521,7 @@ export class Component {
       });
     });
   }
+   
   /**
    * @method useSyncStore
    * @description Allows you to create a store
@@ -660,8 +610,50 @@ export class Component {
       },
     ];
   }
+  /**
+   * @method useRef
+   * @memberof Component
+   * @param {string} ref
+   * @description Allows you to get reference to DOM elements from the dom array
+   * @returns {Object} {current, update}
+   * @example
+   * let ref = this.useRef('ref')
+   * ref.current // returns the DOM element 
+ 
+   */
+
+  useRef(ref) {
+    // get ref from array
+    console.log(this.dom)
+    const element =  this.dom[ref]
+      
+    const getElement = () => element;
+
+    const update = (data) => {
+      const newDom = new DOMParser().parseFromString(data, "text/html");
+      const newElement = newDom.body.firstChild;
+
+      if (element) {
+        // @ts-ignore
+        const isDifferent = !newElement.isEqualNode(element);
+        if (isDifferent) {
+          // @ts-ignore
+          element.parentNode.replaceChild(newElement, element);
+        }
+      }
+    };
+
+    return {
+      /**@type {HTMLElement} */
+      // @ts-ignore
+      current: getElement,
+      /**@type {Function} */
+      update,
+    };
+  }
 
   /**
+   * 
    * @function useEffect
    * @param {*} effectFn
    * @param {*} dependencies
@@ -726,11 +718,12 @@ export class Component {
     const fragment = document.createDocumentFragment();
     Object.keys(components).forEach(async (component) => {
       const { name } = components[component];
-      const componentContainer = document.querySelector(
+       
+    
+      let componentContainer = document.querySelector(
         `[data-component="${name}"]`
       );
-
-      let time = new Date().getTime().toLocaleString();
+      let time = new Date().getTime();
       /**
        * @property {Object} snapshot
        * @description Allows you to keep track of component snapshots
@@ -989,22 +982,28 @@ export class Component {
   
   html(strings, ...args) {
     // @ts-ignore
-    if (
-      // @ts-ignore
-      new Error().stack &&
-       // @ts-ignore
-      new Error().stack.split("\n").length > 0 &&
-       // @ts-ignore
-      new Error().stack.split("\n")[2] &&
-       // @ts-ignore
-      new Error().stack.split("\n")[2].includes("render") &&
-      !this.componentMounted
-    ) {
-      this.componentMounted = true;
-      this.componentDidMount();
-    }
+    let tiemr = setInterval(()=>{
+      if(document.querySelector(`[data-component="${this.name}"]`)){
+        clearInterval(tiemr)
+        this.componentMounted = true;
+         
+        document.querySelector(`[data-component="${this.name}"]`)?.querySelectorAll("*").forEach((element)=>{
+          if(element.hasAttribute("ref")){
+            // @ts-ignore
+            this.dom[element.getAttribute("ref")] = element
+          }
+        })
+        this.componentDidMount();
+      }
+    }, 100)
+    let script = document.createElement("script");
+    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})
@@ -1013,11 +1012,39 @@ export class Component {
           if(e.data.error){
             throw new Error(e.data.error)
           }
-
-     
-          resolve(new Function("useRef", `return \`${e.data}\``)(useRef))
+          const dom = this.dom; // Assuming this.dom is an object
+          console.log(this.dom)
+          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 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  
+          new Function("useState", "useEffect", "useAuth", "useReducer", "useSyncStore", "signal", "rf", "dom", "render", "states", "useRef", js)(
+            useState,
+            useEffect,
+            useAuth,
+            useReducer,
+            useSyncStore,
+            signal,
+            rf,
+            this.dom,
+            this.render,
+            this.states,
+            useRef
+          )
+          
+          resolve(new Function("useRef", "states", "return" + "`" + template + "`")(useRef, states))
            
           
+           
          
         }
          worker.onerror = (e)=>{

package/worker-min.js

@@ -0,0 +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 n=c.match(/<img([^>]*)>/g);if(n)for(let a=0;a<n.length;a++){let l=n[a],s=l.match(/src="([^"]*)"/),t=l.match(/alt="([^"]*)"/);if(s){if(s[1].includes("http")&&c.includes("\x3c!-- #vader-disable_relative-paths --\x3e"))throw new Error(`Vader Error: You cannot use relative paths in the src attribute of ${s[0]}. Use absolute paths instead. \n\n${s[0]}`);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 i=c.match(/href="([^"]*)"/g);if(i)for(;i.length;){let a=i.pop();if(a=a.replace('href="',"").replace('"',""),a.includes("http")&&c.includes("\x3c!-- #vader-disable_relative-paths --\x3e"))throw new Error(`Vader Error: You cannot use relative paths in ${e.data.file}. Use absolute paths instead. \n\n${a}`);c=c.replace(`href="${a}"`,`href="#${a}"`)}let d=Date.now()-a,$=!1;(r.includes("localhost")||r.includes("127.0.0.1")&&!$)&&($=!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 h=c.split("<script>");h&&h.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 p=c.match(/(\$\(.*?\))/gs);if(p)for(;p.length;){let e=p.pop();c=c.replace(e,`\${${e.replace("$(","").replace(")","")}}`)}postMessage({template:`<div data-component=${e.data.name}>${c}</div>`,js:t||""})};

package/worker.js

@@ -3,6 +3,7 @@ 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++) {
@@ -26,9 +27,12 @@ onmessage = (e)=>{
     // Convert headings (e.g., #1-6 Heading => <h1-6>Heading</h1-6>)
     // @ts-ignore
       result = result.replace(/(#+)(.*)/g, (match, hashes, text) => {
-        if(!match.includes('<')){
+        console.log(match)
+        if(!match.includes('<') || !match.includes('>')){ 
           let level = hashes.length;
-           return `<h ${level} class="markdown_heading">${text}</h${level}>`;
+            return `<h ${level} class="markdown_heading">${text}</h${level}>`;
+        }else{
+            return match
         }
       });
   
@@ -62,7 +66,7 @@ onmessage = (e)=>{
       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>`);
+            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 {
@@ -70,8 +74,7 @@ onmessage = (e)=>{
           }
         }
       });
-    
-      
+ 
       // Convert ordered lists (e.g., 1. Item => <ol><li>Item</li></ol>) in order
     
        result.split('\n').forEach((line, index, arr) => {
@@ -91,10 +94,30 @@ onmessage = (e)=>{
         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>`;
+      });
+
+      // 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">';
+        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">';
+        cells.forEach((cell) => {
+          table += `<td class="markdown_table_body_cell">${cell}</td>`;
+        });
+        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}`)
@@ -168,6 +191,33 @@ onmessage = (e)=>{
     }
    
    
-    postMessage(`<div data-component=${e.data.name}>${result}</div>`)
+    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
+          }
+          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(')','')}\}`)
+        }
+    }
+    postMessage({
+      template: `<div data-component=${e.data.name}>${result}</div>`,
+      js: js ? js : ''
+    })
    
   }