vaderjs 1.2.8 → 1.2.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vaderjs",
-  "version": "1.2.8",
-  "description": "A Reactive Framework for Single-Page Applications (SPA)",
+  "version": "1.2.9",
+  "description": "A Reactive Framework for Building Content Rich Single-Page Applications (SPA)",
   "main": "index.js",
   "scripts": {
     "test": "tsc --noEmit "

package/vader.js

@@ -1,5 +1,6 @@
 let dom = /**@type {Obect}  **/ {};
 let states = {};
+let worker =  new Worker(new URL('./worker.js', import.meta.url));
 /**
  * @function markdown
  * @param {String} content
@@ -219,8 +220,7 @@ export class Component {
      * @description Allows you to use a web worker to compile html code on the fly  - client fly rendering
       
      */
-    // @ts-ignore
-    this.worker =  new Worker(new URL('./worker.js', import.meta.url));
+  
   }
 
   /**
@@ -846,7 +846,6 @@ export class Component {
             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");
-             // @ts-ignore
             let image = new Image();
             image.src = url;
             image.onerror = () => {
@@ -1008,26 +1007,20 @@ export class Component {
      
     if(this.cfr){
        
-      this.worker.postMessage({strings, args, location: window.location.href, name: this.name})
+      worker.postMessage({strings, args, location: window.location.origin +  window.location.pathname.replace(/\/[^\/]*$/, '') + '/public/', name: this.name})
       let promise = new Promise((resolve, reject)=>{
-        this.worker.onmessage = (e)=>{
+        worker.onmessage = (e)=>{
           if(e.data.error){
             throw new Error(e.data.error)
           }
 
-          let d = ""
-          if(new Function("useRef", `return \`${e.data}\``)(useRef).includes('#')){
-              d = markdown(new Function("useRef", `return \`${e.data}\``)(useRef))
-          }else{
-            d = new Function("useRef", `return \`${e.data}\``)(useRef)
-          }
-        
-          resolve(d)
+     
+          resolve(new Function("useRef", `return \`${e.data}\``)(useRef))
            
           
          
         }
-        this.worker.onerror = (e)=>{
+         worker.onerror = (e)=>{
           reject(e)
         }
       }) 
@@ -1131,12 +1124,90 @@ export const rf = (name, fn) => {
   window[name] = fn;
 };
 let cache = {};
+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")
+        }
+        
+         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>`
+                    }
+                  })
+                  
+                  
+                }
+                
+             }
+
+             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, "\\`")
+  data = new Function(`return \`${dom.body.outerHTML}\`;`)();
+  
+  return  data;
+}
 /**
  * @function include
  * @description Allows you to include html file
  * @returns {Promise}  - modified string with html content
  * @param {string}  path
  */
+
+ 
  
 export const include = async (path) => {
     
@@ -1150,10 +1221,10 @@ export const include = async (path) => {
     path = "/src/" + path;
   }
   if (cache[path]) {
-    return new Function(`return \`${cache[path]}\`;`)();
-  }
-
-  return fetch(`./${path}`)
+    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}`);
@@ -1161,81 +1232,14 @@ export const include = async (path) => {
       return res.text();
     })
     .then(async (data) => {
-      data = new Function(`return \`${data}\`;`)();
-       
-      let dom = new DOMParser().parseFromString(data, "text/html");
-      let elements = dom.documentElement.querySelectorAll("*");
-      let conccurentIncludes = [];
-      if(cache[path]){
-        return new Function(`return \`${cache[path]}\`;`)();
-      }
-      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")
-            }
-            
-             let componentName = elements[i].getAttribute("src")?.split("/").pop()?.split(".")[0]
-             // @ts-ignore
-             let filedata = await include(elements[i].getAttribute("src"));
-             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)=>{
-                 
-                 console.log(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>`
-                        }
-                      })
-                      
-                      
-                    }
-                    
-                 }
-
-                 dom.body.querySelectorAll('include').forEach((el)=>{
-                    el.remove()
-                 })
-                 
-                 dom.body.outerHTML = dom.body.outerHTML.replace(el.outerHTML, newdom.body.innerHTML)
-                 
-               
-              })
-          
-           
-               
-
-          }
-        }
-
-         
-      }
-      
-      data = dom.body.outerHTML
-       
-      return  data;
+      cache[path] = data
+   
+      data =  await handletemplate(new Function(`return \`${data}\`;`)())
+    
+      return data
     });
+  }
+ 
 };
 
 export default Vader;

package/vaderRouter.js

@@ -53,7 +53,7 @@ class VaderRouter{
 
   /**
    * @method listen
-   * @param {String} port - unique id for the listener
+   * @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}
@@ -226,4 +226,6 @@ class VaderRouter{
   
 }
 
-export default VaderRouter;
+export default VaderRouter;
+ 
+ 

package/worker.js

@@ -1,8 +1,9 @@
+ 
 onmessage = (e)=>{
     let time_started = Date.now()
     let strings =  e.data.strings
     let args =   e.data.args
-    let l = e.data.location.split('/#/')[0]
+    let l =  e.data.location.split('/').slice(0,-1).join('/')
     let result = "";
     for (let i = 0; i < strings.length; i++) {
       result += strings[i];
@@ -21,15 +22,78 @@ onmessage = (e)=>{
         }
     }
 
-    let code =  result.match(/<code([^>]*)>/g)
-    if(code){
-        while(code.length){
-            let c = code.pop()
-            // @ts-ignore
-            c = c.replace('<code','').replace('>','')
-            result = result.replace(`<code${c}>`,`<code${c} style="background:#000;color:#fff;padding:5px;border-radius:5px;font-size:12px;font-weight:bold">`)
+  
+    // Convert headings (e.g., #1-6 Heading => <h1-6>Heading</h1-6>)
+    // @ts-ignore
+      result = result.replace(/(#+)(.*)/g, (match, hashes, text) => {
+        if(!match.includes('<')){
+          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" />');
+    
+      
+   
  
  
     if(!result.includes('<body>')){
@@ -47,13 +111,15 @@ onmessage = (e)=>{
      */
     // @ts-ignore
     let images = result.match(/<img([^>]*)>/g)
-    for(let i = 0; i < images.length; i++){
+     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(src){
         if(!src[1].includes('http') || !result.includes('<!-- #vader-disable_relative-paths -->')){
-          result = result.replace(src[0],`src="${l}/public/${src[1]}"`)
+            // @ts-ignore
+            result = result.replace(src[1],`${l}/${src[1]}`)
         }else{
             throw new Error(`Vader Error: You cannot use relative paths in the src attribute of ${src[0]}. Use absolute paths instead. \n\n${src[0]}`)
         }
@@ -63,20 +129,21 @@ onmessage = (e)=>{
       }
  
       // @ts-ignore
-       if(!caches.match(`${l}/public/${src[1]}`)){
+       if(!caches.match(`${l}/${src[1]}`)){
         caches.open('vader').then((cache)=>{
             // @ts-ignore
-            cache.add(`${l}/public/${src[1]}`)
+            cache.add(`${l}/${src[1]}`)
             // @ts-ignore
-            console.log('cached', `${l}/public/${src[1]}`)
+            console.log('cached', `${l}/${src[1]}`)
            }).catch((err)=>{
              console.log(err)
            })
        }else{
         // @ts-ignore
-            console.log('already cached', caches.match(`${l}/public/${src[1]}`))
+            console.log('already cached', caches.match(`${l}/${src[1]}`))
        }
     }
+     }
 
     let href =  result.match(/href="([^"]*)"/g)
     if(href){