vaderjs 1.3.5 → 1.3.7-alpha-1

package/vaderRouter.js

@@ -1,231 +0,0 @@
-
-/**
- * @class VaderRouter
- * @description  - creates an instance of Vader Express Router
- *  
- * @param {String} path
- * @param {Function} handler
- * @param {object} req  request object
- * @param {object} res  response object
- * @returns {Object} Express
- *  
- */
-class VaderRouter{
-  /**
-   * @constructor
-   * @param {*} basePath 
-   *  
-   */
-  constructor(basePath) {
-    this.routes = [];
-    this.middlewares = [];
-    this.errorMiddlewares = [];
-    this.listeners = [];
-     
-    this.basePath = basePath;
-  }
-
-  /**
-   * @method get
-   * @param {String} path
-   * @param {Function} handler
-   * @description This method is used to register a get route
-   * @returns {void}
-   * @memberof Express
-   */
-  get(path, handler) {
-   
-    this.routes.push({
-      path,
-      handler,
-      method: 'get',
-    });
-  }
-  /**
-   * @method use
-   * @description This method allows you to use middlewares
-   * @param {Function} middleware 
-   */
-
-  use(/* path, */ middleware) {
-    this.middlewares.push(middleware);
-  }
-
-  /**
-   * @method listen
-   * @param {*} port - unique id for the listener
-   * @param {Function} callback - callback function
-   * @description This method is used to start listening to the routes
-   * @returns {void}
-   * 
-   */
-
-  listen(port, callback) {
-    if(!port){
-     port = Math.random().toString(36).substring(7);
-    }
-    this.listeners.push(port);
-    callback();
-    if (this.listeners.length === 1) {
-      this.handleRoute(window.location.hash);
-    }else{
-      this.listeners.pop();
-    }
-    if (callback) {
-      callback();
-    }
-    window.onhashchange = () => {
-      this.handleRoute(window.location.hash);
-    }
-  }
-  /**
-   * @method extractParams
-   * @description This method is used to extract parameters from the route path
-   * @param {*} routePath
-   * @param {*} hash 
-   * @returns  {Object} params
-   * @memberof Express
-   */
-
-  extractParams(routePath, hash) {
-    const routeParts = routePath.split('/');
-    const hashParts = hash.split('/');
-    const params = {};
-    routeParts.forEach((part, index) => {
-      if (part.startsWith(':')) {
-        const paramName = part.slice(1);
-        params[paramName] = hashParts[index];
-      }else if(part.startsWith('*')){
-        // remove queries from this par
-        params[0] = hashParts.slice(index).join('/').split('?')[0];
-      }
-    });
-    return params;
-  }
-  extractQueryParams(hash){
-    
-    const queryParams = hash.split('?')[1];
-    if(!queryParams){
-      return {};
-    }
-    const params = {};
-    queryParams.split('&').forEach((param)=>{
-      const [key, value] = param.split('=');
-      params[key] = value;
-    })
-    return params;
-  }
-
-  /**
-   * @method handleRoute
-   * @param {String} hash
-   * @description This method is used to handle the route
-   */
-
-  handleRoute(hash) {
-    hash = hash.slice(1);
-    let status = 200;
-    let route = this.routes.find((route) => {
-     
-      if (route.path === hash) {
-        return true;
-      }
-      const routePathParts = route.path.split('/');
-      const hashParts = hash.split('/');
-      if (routePathParts.length !== hashParts.length) {
-        return false;
-      }else if(routePathParts[routePathParts.length-1].startsWith('*')){
-        return true;
-      }
-      const params = this.extractParams( route.path, hash);
-      return Object.keys(params).length > 0;
-    });
-  
-    if (!route) {
-      route = this.routes.find((route) => {
-         
-         if(route.path === '/404'){
-          return  true;
-         }else{
-           window.location.hash = this.basePath  
-         }
-      });
-
-      route ? status = 200 :
-
-      status = 404;
-    }
-
-     
-    const queryParams = this.extractQueryParams(hash);
-    const params =  route && route.path ? this.extractParams(route.path, hash) : {};
-    const req = {
-      headers: {},
-      params: params,
-      query: queryParams,
-      path: hash,
-      method: route ? route.method : 'get',
-    };
-  
-    // @ts-ignore
-    window.$CURRENT_URL = req.path
-   
-    // @ts-ignore
-    window.$FULL_URL = window.location.href.replace('#', '')
-   
-    const res = {
-      status: status,
-      /**
-       * @method log
-       * @param {String} type 
-       * @description This method is used to log the request and response
-       */
-      log: (type) => {
-        if(type === undefined){
-          console.log(`${req.path} ${req.method} ${res.status} ${req.timestamp}`);
-        }else{
-          console.table({
-            'Request Path': req.path,
-            'Request Method': route.method,
-            'Response Status': res.status,
-            'Request Timestamp': req.timestamp,
-          });
-        }
-      },
-      send: (selector, data) => {
-        if(typeof selector === 'string'){
-          // @ts-ignore
-          document.querySelector(selector).innerHTML = data;
-        }else if(typeof selector === 'number'){
-          res.status = selector;
-        }else if(typeof selector === 'object'){
-          res.status = selector.status;
-        }
-      },
-      json: (selector, data) => {
-        
-        if(typeof selector === 'string'){
-          // @ts-ignore
-          let obj = document.createElement('object');
-           // data url
-          obj.data =  URL.createObjectURL(new Blob([JSON.stringify(data)], {type: 'application/json'}));
-          // @ts-ignore
-          document.querySelector(selector).appendChild(obj);
-        }else{
-          throw new Error('Selector must be a string');
-        }
-      },
-    };
-    this.middlewares.forEach((middleware) => {
-      middleware(req, res);
-    });
-  
-    route ? route.handler(req, res) : null;
-     
-  }
-  
-}
-
-export default VaderRouter;
- 
- 

package/worker-min.js

@@ -1 +0,0 @@
-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||""})};

package/worker.js

@@ -1,326 +0,0 @@
-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];
-    if (i < args.length) {
-      result += args[i];
-    }
-  }
-
-  let comments = result.match(/--([^>]*)--/gs);
-  /**
-   * @example
-   * 
-   * -- This is a comment --
-   */
-  if (comments) {
-    while (comments.length) {
-      let comment = comments.pop();
-      // @ts-ignore
-      result = result.replace(comment, "");
-    }
-  }
-
-  result = result.replace(/(#+)([^<>\n]*)(?![^<]*>)(?![^{]*})/g, (match, hashes, text) => {
-      let level = hashes.length;
-      return `<h${level} class="markdown_heading">${text}</h${level}>`;
-  });
-  
-
-  // 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 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>`;
-  });
-
-  // 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}`
-    );
-  }
-  /**
-   * @type {string[]}
-   * @description - grabbing all className attributes and replace them with  class
-   */
-  // @ts-ignore
-  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 (!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}`
-            );
-          }
-        });
-      }
-    }
-  }
-
-  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}`
-        );
-      }
-    }
-  }
-
-  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>");
-
-  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(
-        // @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
-  
-  
-  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];
-      console.log(style)
-     
-      let css =   style.replace("@style{", "").replace("};", "");
-      // @ts-ignore
-      css = css.replaceAll(",", ";");
-      // @ts-ignore
-      css = css.replaceAll(/[A-Z]/g, (match) => {
-          return `-${match.toLowerCase()}`;
-          }
-      );
-      //@ts-ignore
-      css = css.replaceAll(/'/g, " ");
-      result = result.replace(style, `style="${css}"`);
-  
-       
-    }
-  }
-
-  let stylsheet = result.match(/@stylesheet{([^>]*)};/);
-  if (stylsheet) {
-    let styles = stylsheet[1];
-    /**
-     * @stylesheet{
-     *  body:{
-     *  backgroundColor: red;
-     * 
-     *  }
-     * }
-     */
-
-    // @ts-ignore
-      let css = styles.replaceAll(" ", "");
-      css = css.replaceAll(",", ";");
-      css = css.replaceAll(/[A-Z]/g, (match) => {
-          return `-${match.toLowerCase()}`;
-          }
-      );
-      css = css.replaceAll(/'/g, " ");
-  
-      result = result.replace(stylsheet[0], `<style>${css}</style>`);
-  }
-  postMessage({
-    template: `<div data-component=${e.data.name}>${result}</div>`,
-    js: js ? js : ""
-  });
-};