vaderjs 1.3.0 → 1.3.2

package/vader.js

@@ -1,134 +1,96 @@
-let dom = /**@type {Obect}  **/ {};
+let dom = [];
 let states = {};
-let worker =  new Worker(new URL('./worker.js', import.meta.url));
+let worker = new Worker(new URL("./worker.js", import.meta.url));
 /**
  * @function markdown
  * @param {String} content
- * @description Allows you to convert markdown to html 
+ * @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);
-    
-
-     
-    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>`);
-      });
-    }
-
-   
-    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>`);
-    }
-
-    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>`);
-      });
-    }
-   
-    
-
+  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}>`
+      );
+    });
+  }
 
-    result += `${line}\n`;
+  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");
 
-  return result;
-}
+  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;
+}
 
 /**
  * @function useRef
@@ -136,7 +98,7 @@ function markdown(content) {
  * @param {String} ref
  * @returns {void | Object} {current, update}
  */
- 
+
 export const useRef = (ref) => {
   const element = document.querySelector(`[ref="${ref}"]`);
   const getElement = () => element;
@@ -157,7 +119,7 @@ export const useRef = (ref) => {
 
   return {
     current: getElement(),
-    update,
+    update
   };
 };
 
@@ -201,40 +163,65 @@ export class Component {
     this.$_useStore_subscribers = [];
     this.init();
     this.Componentcontent = null;
-    this.$_signal_dispatch_event = new CustomEvent("signalDispatch", {
+    this.$_signal_dispatch_event = new CustomEvent("SignalDispatch", {
       detail: {
         hasUpdated: false,
-        state: null,
-      },
+        state: null
+      }
     });
-    this.snapshots = [];
-    
+    /**
+     * @property {Object} $_signal_dispatch_cleanup_event
+     * @description Allows you to dispatch a signal cleanup event
+     * @private
+     */
+    this.$_signal_dispatch_cleanup_event = new CustomEvent(
+      "Signal_Cleanup_Dispatch",
+      {
+        detail: {
+          state: null,
+          lastState: null
+        }
+      }
+    );
+    /**
+     * @property {Array} snapshots
+     * @private
+     */
+     this.snapshots = [];
+    /**
+     * @property {Object} dom
+     * @description Allows you to get reference to DOM element
+     * @returns {void | HTMLElement}
+     *
+     */
+    this.dom = [];
+
     /**
      * @property {Boolean} cfr
-     * @description Allows you to compile html code on the fly  - client fly rendering 
-     *  
+     * @description Allows you to compile html code on the fly  - client fly rendering
+     *
      */
-    this.cfr = false
+    this.cfr = false;
     /**
      * @property {Boolean} worker
      * @description Allows you to use a web worker to compile html code on the fly  - client fly rendering
       
      */
-  
   }
 
   /**
    * @method adapter
    * @description Allows you to create an adapter - this is used to create  custom logic
-   *  
-   * 
+   *
+   *
    */
-  adapter() {
-    return  
+  adapter(options) {
+    // allow you to override the compoent logic
+     
+     
   }
   init() {
     this.registerComponent();
-    
   }
 
   registerComponent() {
@@ -356,13 +343,20 @@ export class Component {
     this.$_signal_subscribe = (fn, runonce) => {
       this.$_signal_subscribers.push({
         function: fn,
-        runonce: runonce,
+        runonce: runonce
       });
+      return fn;
     };
     this.$_signal_cleanup = (fn) => {
+      this.lastState = state;
       this.$_signal_subscribers = this.$_signal_subscribers.filter(
         (subscriber) => subscriber.function !== fn
       );
+      // @ts-ignore
+      this.$_signal_dispatch_cleanup_event.detail.state = this.states;
+      // @ts-ignore
+      this.$_signal_dispatch_cleanup_event.detail.lastState = this.lastState;
+      window.dispatchEvent(this.$_signal_dispatch_event);
     };
     this.$_signal_dispatch = () => {
       for (var i = 0; i < this.$_signal_subscribers.length; i++) {
@@ -392,6 +386,7 @@ export class Component {
      * @param {*} detail
      */
     this.$_signal_set = (detail) => {
+       
       setState(detail);
     };
 
@@ -435,7 +430,7 @@ export class Component {
        * @description Allows you to get the value of a signal
        * @returns {any}
        */
-      get: this.$_signal_get,
+      get: this.$_signal_get
     };
   };
   /**
@@ -519,7 +514,7 @@ export class Component {
         return logicalOperator === "any"
           ? auth.canAnyOf(actions)
           : auth.canAllOf(actions);
-      },
+      }
     };
     return auth;
   }
@@ -559,9 +554,10 @@ export class Component {
       (action) => {
         this.states[key] = reducer(this.states[key], action);
         this.updateComponent();
-      },
+      }
     ];
   }
+
   runEffects() {
     Object.keys(this.effects).forEach((component) => {
       this.effects[component].forEach((effect) => {
@@ -572,6 +568,7 @@ export class Component {
       });
     });
   }
+
   /**
    * @method useSyncStore
    * @description Allows you to create a store
@@ -595,8 +592,7 @@ export class Component {
             subscriber(s);
           });
         }) ||
-        {},
-
+        {}
     );
 
     const getField = (fieldName) => {
@@ -619,7 +615,7 @@ export class Component {
       getField,
       setField,
       subscribe,
-      clear,
+      clear
     };
   }
   /**
@@ -638,12 +634,10 @@ export class Component {
    *   setCount(count + 1)
    */
   useState(key, initialValue, callback = null) {
-    
-   if(!this.states[key]){
-    this.states[key] = initialValue;
-   }
-   
-     
+    if (!this.states[key]) {
+      this.states[key] = initialValue;
+    }
+
     return [
       this.states[key],
       /**
@@ -657,11 +651,52 @@ export class Component {
         this.updateComponent();
         // @ts-ignore
         typeof callback === "function" ? callback() : null;
-      },
+      }
     ];
   }
+  /**
+   * @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
+    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
@@ -693,7 +728,7 @@ export class Component {
         this.effects[this.name] = this.effects[this.name].filter(
           (effect) => effect !== effectFn
         );
-      },
+      }
     };
   }
   /**
@@ -726,11 +761,11 @@ 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
@@ -743,7 +778,7 @@ export class Component {
         prev_state: this.states,
         prev_props: this.storedProps,
         // @ts-ignore
-        content: componentContainer.innerHTML,
+        content: componentContainer.innerHTML
       };
 
       if (!componentContainer) return;
@@ -803,11 +838,8 @@ export class Component {
     return /^[a-zA-Z0-9-_]+$/.test(className);
   }
 
-
   parseHTML(result) {
-         
     const dom = new DOMParser().parseFromString(result, "text/html");
-    console.log(dom)
     const elements = dom.documentElement.querySelectorAll("*");
 
     elements.forEach((element) => {
@@ -833,19 +865,23 @@ export class Component {
             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 -->")
+            (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");
+            // 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 = () => {
@@ -870,15 +906,16 @@ export class Component {
             // @ts-ignore
             dom[element.getAttribute("ref")] = element;
           }
-          if(element.nodeName === "MARKDOWN"){
-            element.innerHTML = markdown(element.innerHTML.replace(/\\n/g, '\n').trim())
+          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 -->"
-              );
+            const allowClassComments = document.documentElement.outerHTML.includes(
+              "<!-- #vader-allow_class -->"
+            );
             if (!allowClassComments) {
               console.warn(
                 "you can disable class errors using, <!-- #vader-allow_class -->"
@@ -909,12 +946,14 @@ export class Component {
           }
 
           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.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",
@@ -924,7 +963,6 @@ export class Component {
           }
           break;
       }
-      
     });
 
     result = dom.body.innerHTML;
@@ -932,12 +970,11 @@ export class Component {
     this.Componentcontent = result;
 
     if (!result.includes("<div data-component")) {
-       result = `<div data-component="${this.name}">${result}</div>`;
+      result = `<div data-component="${this.name}">${result}</div>`;
     }
-    return  markdown(result.replace(/\\n/g, '\n').trim())
-
+    return markdown(result.replace(/\\n/g, "\n").trim());
   }
-  
+
   /**
    * The `html` method generates and processes HTML content for a component, performing various validations and tasks.
    *
@@ -984,49 +1021,102 @@ export class Component {
    * @see {@link Component}
    * @see {@link Component#componentDidMount}
    */
-  
-  
-  
+
   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;
 
-     
-    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)
+        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
+      });
+      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
 
-     
-          resolve(new Function("useRef", `return \`${e.data}\``)(useRef))
-           
-          
-         
-        }
-         worker.onerror = (e)=>{
-          reject(e)
-        }
-      }) 
+          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) => {
+          reject(e);
+        };
+      });
       // @ts-ignore
       return promise;
-    }else{
+    } else {
       let result = "";
       for (let i = 0; i < strings.length; i++) {
         result += strings[i];
@@ -1034,20 +1124,16 @@ export class Component {
           result += args[i];
         }
       }
-      result =  new Function("useRef", `return \`${result}\``)(useRef) 
+      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!"
         );
       }
-     
-       
-   
-      return  this.parseHTML(result);
-    }
 
-  
+      return this.parseHTML(result);
+    }
   }
   // write types to ensure it returns a string
   /**
@@ -1106,10 +1192,15 @@ const Vader = {
    * }
    */
   Component: Component,
-  useRef: useRef,
+  useRef: useRef
 };
-export const component = (name) => {
-  return new Component();
+/**
+ * @function component
+ * @description Allows you to create a component
+ * @returns {Component}
+ */
+export const component = () => {
+  return new Component()
 };
 
 /**
@@ -1124,81 +1215,85 @@ export const rf = (name, fn) => {
   window[name] = fn;
 };
 let cache = {};
-async function handletemplate(data){
+async function handletemplate(data) {
   let dom = new DOMParser().parseFromString(data, "text/html");
   let elements = dom.documentElement.querySelectorAll("*");
-  
+
   if (elements.length > 0) {
     for (var i = 0; i < elements.length; i++) {
-    
       if (elements[i].nodeName === "INCLUDE") {
-        if(!elements[i].getAttribute("src") || elements[i].getAttribute("src") === ""){
-          throw new Error("Include tag must have src attribute")
+        if (
+          !elements[i].getAttribute("src") ||
+          elements[i].getAttribute("src") === ""
+        ) {
+          throw new Error("Include tag must have src attribute");
         }
-        
-         let componentName = elements[i].getAttribute("src")?.split("/").pop()?.split(".")[0]
-         // @ts-ignore
-          let filedata = await include(elements[i].getAttribute("src"))
-         // replace ` with \`\` to allow for template literals
-          filedata = filedata.replace(/`/g, "\\`")
-          cache[elements[i].getAttribute("src")] = filedata
-          filedata = new Function(`return \`${filedata}\`;`)();
-          let newdom = new DOMParser().parseFromString(filedata, "text/html");
-
-          newdom.querySelectorAll("include").forEach((el)=>{
-            el.remove()
-          })
-          // @ts-ignore
-       
-          let els = dom.querySelectorAll(componentName)
-           
-          els.forEach((el)=>{
-         
-             if(el.attributes.length > 0){
-                for(var i = 0; i < el.attributes.length; i++){
-                  newdom.body.outerHTML = newdom.body.outerHTML.replace(`{{${el.attributes[i].name}}}`, 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")
-                    if(id === el.nodeName.toLowerCase()){
-                      slot.outerHTML = `<div>${el.innerHTML}</div>`
-                    }
-                  })
-                  
-                  
+
+        let componentName = elements[i]
+          .getAttribute("src")
+          ?.split("/")
+          .pop()
+          ?.split(".")[0];
+        // @ts-ignore
+        let filedata = await include(elements[i].getAttribute("src"));
+        // replace ` with \`\` to allow for template literals
+        filedata = filedata.replace(/`/g, "\\`");
+        cache[elements[i].getAttribute("src")] = filedata;
+        filedata = new Function(`return \`${filedata}\`;`)();
+        let newdom = new DOMParser().parseFromString(filedata, "text/html");
+
+    
+        newdom.querySelectorAll("include").forEach((el) => {
+          el.remove();
+        });
+        // @ts-ignore
+
+        let els = dom.querySelectorAll(componentName);
+
+        els.forEach((el) => {
+          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
+              );
+            }
+          }
+          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>`
                 }
-                
-             }
-
-             dom.body.querySelectorAll('include').forEach((el)=>{
-                el.remove()
-             })
-             // replace ` with \`\` to allow for template literals
-             dom.body.outerHTML =  dom.body.outerHTML.replace(/`/g, "\\`")
-             dom.body.outerHTML = dom.body.outerHTML.replace(el.outerHTML, new Function(`return \`${newdom.body.outerHTML}\`;`)())
-          
-           
-          })
-      
-       
-           
+              });
+            }
+          }
 
+          dom.body.querySelectorAll("include").forEach((el) => {
+            el.remove();
+          });
+          // replace ` with \`\` to allow for template literals
+          dom.body.outerHTML = dom.body.outerHTML.replace(/`/g, "\\`");
+          dom.body.outerHTML = dom.body.outerHTML.replace(
+            el.outerHTML,
+            new Function(`return \`${newdom.body.outerHTML}\`;`)()
+          );
+        });
       }
     }
-
-     
   }
-  
+
   // replace ` with \`\` to allow for template literals
-  dom.body.outerHTML = dom.body.outerHTML.replace(/`/g, "\\`")
+  dom.body.outerHTML = dom.body.outerHTML.replace(/`/g, "\\`");
   data = new Function(`return \`${dom.body.outerHTML}\`;`)();
-  
-  return  data;
+
+  return data;
 }
 /**
  * @function include
@@ -1207,10 +1302,7 @@ async function handletemplate(data){
  * @param {string}  path
  */
 
- 
- 
 export const include = async (path) => {
-    
   if (
     path.startsWith("/") &&
     !path.includes("/src/") &&
@@ -1221,25 +1313,23 @@ export const include = async (path) => {
     path = "/src/" + path;
   }
   if (cache[path]) {
-    return await handletemplate(new Function(`return \`${cache[path]}\`;`)())
-   
-  }else{
+    return await handletemplate(new Function(`return \`${cache[path]}\`;`)());
+  } else {
     return fetch(`./${path}`)
-    .then((res) => {
-      if (res.status === 404) {
-        throw new Error(`No file found at ${path}`);
-      }
-      return res.text();
-    })
-    .then(async (data) => {
-      cache[path] = data
-   
-      data =  await handletemplate(new Function(`return \`${data}\`;`)())
-    
-      return data
-    });
+      .then((res) => {
+        if (res.status === 404) {
+          throw new Error(`No file found at ${path}`);
+        }
+        return res.text();
+      })
+      .then(async (data) => {
+        cache[path] = data;
+
+        data = await handletemplate(new Function(`return \`${data}\`;`)());
+
+        return data;
+      });
   }
- 
 };
 
 export default Vader;