vaderjs 1.2.8 → 1.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vaderjs",
-  "version": "1.2.8",
-  "description": "A Reactive Framework for Single-Page Applications (SPA)",
+  "version": "1.3.0",
+  "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){

package/snippet-gen/vader/.vscode/launch.json

@@ -1,17 +0,0 @@
-// A launch configuration that launches the extension inside a new window
-// Use IntelliSense to learn about possible attributes.
-// Hover to view descriptions of existing attributes.
-// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-{
-	"version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Extension",
-            "type": "extensionHost",
-            "request": "launch",
-            "args": [
-                "--extensionDevelopmentPath=${workspaceFolder}"
-            ]
-        }
-    ]
-}

package/snippet-gen/vader/.vscodeignore

@@ -1,4 +0,0 @@
-.vscode/**
-.vscode-test/**
-.gitignore
-vsc-extension-quickstart.md

package/snippet-gen/vader/CHANGELOG.md

@@ -1,9 +0,0 @@
-# Change Log
-
-All notable changes to the "vader" extension will be documented in this file.
-
-Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
-
-## [Unreleased]
-
-- Initial release

package/snippet-gen/vader/README.md

@@ -1,26 +0,0 @@
-# vader README
-
-
-## Features
-
-HTML syntax highlighting for vader files & intellisense / autocomplete for html elements and vader.js methods
-
-Shows deprecated methods as deprecated in the intellisense - and shows suggestions for alternatives
-
-## Requirements
-
-Common knowlege of HTML and vader.js!
-
-
-## Known Issues
-
- 
-
-## Release Notes
-
-Users appreciate release notes as you update your extension.
-
-### 1.0.0
-
-Initial release of vader
- 

package/snippet-gen/vader/extension/extension.js

@@ -1,70 +0,0 @@
-const vscode = require('vscode');
-const html_completes = require('./html_completion/html_completion');
-function activate(context) {
- 
-  let completes = []
-  const include = vscode.languages.registerCompletionItemProvider(
-    'vader',
-    {
-      provideCompletionItems(document, position) {
-        const linePrefix =  document.lineAt(position).text.trim();
-        if(!linePrefix.startsWith('in')) {
-          return undefined;
-        }
-        let complete = new vscode.CompletionItem('include()', vscode.CompletionItemKind.Function);
-        complete.insertText = new vscode.SnippetString('include("${1:file}")');
-         
-        complete.tags = [vscode.CompletionItemTag.Deprecated]
-
-        complete.documentation = new vscode.MarkdownString(`Include a view file into your template\n - @param \`\string\`\ file - The file to include\n- @returns {string} - the parsed html code to client`, true) 
-        return [complete]
-      }
-    },
-  )
-
-  const comment = vscode.languages.registerCompletionItemProvider('vader', {
-    provideCompletionItems(document, position) {
-      const linePrefix = document.lineAt(position).text.slice(0, position.character);
-      if(!linePrefix.includes('-')) {
-        return undefined;
-      }
-      let complete = new vscode.CompletionItem('-', vscode.CompletionItemKind.Property);
-      complete.insertText = new vscode.SnippetString('-- \n ${1:comment} \n--');
-      complete.documentation = new vscode.MarkdownString(`Create a multi line comment`, true)
-      return [complete]
-
-    },
-  }, )
-
-  const syntaxeror = vscode.languages.registerCompletionItemProvider('vader', {
-    provideCompletionItems(document, position) {
-      let firstline = document.lineAt(0).text.trim();
-      let lastline = document.lineAt(document.lineCount - 1).text.trim();
-      if(!firstline.includes('body') || !lastline.includes('body')) {
-        
-          vscode.window.showWarningMessage('Syntax error: missing <body> tag in template\n vader may cut off your code if not present')
-          
-          return undefined;
-      }
-    },
-  })
-
- 
-
-   
-  const includehover = vscode.languages.registerHoverProvider('vader', {
-    provideHover(document, position) {
-      const linePrefix = document.lineAt(position).text.slice(0, position.character);
-      if (!linePrefix.startsWith('in')) {
-        return undefined;
-      }
-      let complete = new vscode.Hover(new vscode.MarkdownString(`Include a view file into your template\n - @param {string} file - The file to include\n- @returns {string} - the parsed html code to client`, true))
-      return  complete
-    }
-  })
-  
-
-  context.subscriptions.push(include,  html_completes, comment, includehover, syntaxeror,completes);
-}
-
-module.exports.activate = activate;

package/snippet-gen/vader/extension/html_completion/html_completion.js

@@ -1,91 +0,0 @@
-const vscode = require('vscode');
-let  completes = []
-const html_completes =  vscode.languages.registerCompletionItemProvider('vader', {
-    provideCompletionItems(document, position) {
-         let line =  document.lineAt(position).text.trim();
-          
-         let {tags, attributes} = JSON.parse(require('fs').readFileSync(require('path').join(__dirname, 'html_completion.json'), 'utf8'))
-         
-         let items = []
-            
-        
-      
-            for(tag in tags){
-               
-                if(!line.startsWith('<') && !line.endsWith('>')){
-                    continue
-                }
-                let complete = new vscode.CompletionItem(tag, tags[tag].type && tags[tag].type === "keyword" ? vscode.CompletionItemKind.Keyword : vscode.CompletionItemKind.Module);
-               // make sure its not in range between a entering < and closing > with a space in between
-                if(line.startsWith('<') && line.endsWith('>') && line.includes(' ')){
-                    // remove the tag from the completion
-                    let line = document.lineAt(position).text.trim();
-                    complete.range = new vscode.Range(new vscode.Position(position.line, line.indexOf('<')), new vscode.Position(position.line, line.indexOf('<') + tag.length))
-                }
-                complete.insertText = new vscode.SnippetString(tags[tag].body);
-                if(tags[tag].deprecated){
-                    complete.tags = [vscode.CompletionItemTag.Deprecated]
-                }
-                complete.documentation = new vscode.MarkdownString(tags[tag].description, true)
-                items.push(complete)
-            }
-            for(attribute in attributes){
-                let line = document.lineAt(position).text.trim();
-                if(line.includes('<') || line.includes('>') ){
-                    let tag =  line.split('<')[1] ? line.split('<')[1].split('>')[0].split(' ')[0] : line.split('>')[0]
-                    let valid_in = attributes[attribute].valid_in
-                    if(valid_in.includes(tag) || valid_in.includes('*')){
-                        let complete = new vscode.CompletionItem(attribute, vscode.CompletionItemKind.Property);
-                        if(attributes[attribute].deprecated){
-                            complete.tags = [vscode.CompletionItemTag.Deprecated]
-                        }
-                        complete.insertText = new vscode.SnippetString(attributes[attribute].body);
-                        complete.documentation = new vscode.MarkdownString(attributes[attribute].description, true)
-                        items.push(complete)
-                    }
-                     
-                    
-                 
-                } 
-            }
-          return items
-    },
-} , )
-
-const hovercompletes = vscode.languages.registerHoverProvider('vader', {
-    provideHover(document, position) {
-        let selection = document.getText(document.getWordRangeAtPosition(position));
-         
-
-        let  {tags, attributes} = JSON.parse(require('fs').readFileSync(require('path').join(__dirname, 'html_completion.json'), 'utf8'))
-        let line = document.lineAt(position.line).text.trim();
-
-        // make sure no attributes are in the hover position
-        if (selection === line.split('<')[1].split('>')[0].split(' ')[0]) {
-            let tag = line.split('<')[1].split('>')[0].split(' ')[0]
-            if (tags[tag]) {
-                return new vscode.Hover(new vscode.MarkdownString(tags[tag].description, true))
-            }
-        }
-        // get the parent tag
-        let parent_tag = line.split('<')[1].split('>')[0].split(' ')[0]
-        // get the attribute
-        let tag_attributes = line.split('<')[1].split('>')[0].split(' ') 
-        for (let i = 0; i < tag_attributes.length; i++) {
-            let attribute = tag_attributes[i]
-            if (attribute.includes('=')) {
-                attribute = attribute.split('=')[0]
-            }
-            if (attribute === selection) {
-                if (attributes[attribute]) {
-                    return new vscode.Hover(new vscode.MarkdownString(attributes[attribute].description, true))
-                }
-            }
-        }
-       
-        return null; // Return null if no matching tag or attribute is found.
-    }
-});
-completes.push(html_completes, hovercompletes)
-
-module.exports =  completes