vaderjs 1.3.2 → 1.3.4

package/create-vader-app/example_proj/dist/vaderjs/vaderRouter-min.js

@@ -0,0 +1 @@
+class VaderRouter{constructor(t){this.routes=[],this.middlewares=[],this.errorMiddlewares=[],this.listeners=[],this.basePath=t}get(t,e){this.routes.push({path:t,handler:e,method:"get"})}use(t){this.middlewares.push(t)}listen(t,e){t||(t=Math.random().toString(36).substring(7)),this.listeners.push(t),e(),1===this.listeners.length?this.handleRoute(window.location.hash):this.listeners.pop(),e&&e(),window.onhashchange=()=>{this.handleRoute(window.location.hash)}}extractParams(t,e){const s=t.split("/"),a=e.split("/"),r={};return s.forEach(((t,e)=>{if(t.startsWith(":")){const s=t.slice(1);r[s]=a[e]}else t.startsWith("*")&&(r[0]=a.slice(e).join("/").split("?")[0])})),r}extractQueryParams(t){const e=t.split("?")[1];if(!e)return{};const s={};return e.split("&").forEach((t=>{const[e,a]=t.split("=");s[e]=a})),s}handleRoute(t){t=t.slice(1);let e=200,s=this.routes.find((e=>{if(e.path===t)return!0;const s=e.path.split("/"),a=t.split("/");if(s.length!==a.length)return!1;if(s[s.length-1].startsWith("*"))return!0;const r=this.extractParams(e.path,t);return Object.keys(r).length>0}));s||(s=this.routes.find((t=>{if("/404"===t.path)return!0;window.location.hash=this.basePath})),e=s?200:404);const a=this.extractQueryParams(t),r={headers:{},params:s&&s.path?this.extractParams(s.path,t):{},query:a,path:t,method:s?s.method:"get"};window.$CURRENT_URL=r.path,window.$FULL_URL=window.location.href.replace("#","");const i={status:e,log:t=>{void 0===t?console.log(`${r.path} ${r.method} ${i.status} ${r.timestamp}`):console.table({"Request Path":r.path,"Request Method":s.method,"Response Status":i.status,"Request Timestamp":r.timestamp})},send:(t,e)=>{"string"==typeof t?document.querySelector(t).innerHTML=e:"number"==typeof t?i.status=t:"object"==typeof t&&(i.status=t.status)},json:(t,e)=>{if("string"!=typeof t)throw new Error("Selector must be a string");{let s=document.createElement("object");s.data=URL.createObjectURL(new Blob([JSON.stringify(e)],{type:"application/json"})),document.querySelector(t).appendChild(s)}}};this.middlewares.forEach((t=>{t(r,i)})),s&&s.handler(r,i)}}export default VaderRouter;

package/create-vader-app/example_proj/dist/vaderjs/worker.js

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

package/create-vader-app/example_proj/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module">
+        import { VaderRouter} from './dist/vaderjs/index.js'
+        import { Index} from './src/pages/index.js'
+        let app = new VaderRouter('/')
+        app.get('/', async (req, res)=>{
+            res.send('#app', await new Index().render())
+        })
+        app.listen(3000, ()=> console.log('listening on port 3000'))
+    </script>
+</body>
+</html>

package/create-vader-app/example_proj/readme.md

@@ -0,0 +1,2 @@
+# Vaderjs v1.3.
+

package/create-vader-app/example_proj/src/pages/Index.js

@@ -0,0 +1,13 @@
+import { include } from "../../dist/vaderjs/index.js";
+import Vader from "../../dist/vaderjs/index.js";
+
+export class Index extends Vader.Component{
+    constructor(){
+        super()
+    }
+
+    async render(){
+        
+      return this.html(await include('/views/app.html'))
+    }
+}

package/create-vader-app/example_proj/src/views/app.html

@@ -0,0 +1,16 @@
+<body>
+    @title 'Vader.js';
+      
+    <h1 
+    @style{
+    position:fixed,
+    top: 0,
+    left: 0,
+    margin: 0,
+    padding:14px
+    };
+    >
+      Vader
+    </h1>
+ 
+</body>

package/create-vader-app/index.js

@@ -0,0 +1,20 @@
+const commander = require('commander');
+ 
+const fs = require('fs-extra');
+const path = require('path');
+
+
+
+const version = require('../package.json').version;
+
+const program = new commander.Command('create-vader-app')
+
+program
+.version(version)
+.arguments('<project-directory>')
+.usage(`<project-directory> [options]`)
+.action((name) => {
+    let projectName = name
+    console.log(`Creating a new Vader app in ${projectName}`)
+})
+.parse(process.argv)