vaderjs 1.3.2 → 1.3.4

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