vaderjs 1.2.7 → 1.2.8

package/vader.js

@@ -39,12 +39,16 @@ function markdown(content) {
     }
     if (bold) {
       bold.forEach((b) => {
-        line = line.replace(b, `<strong>${b.replace(/\*\*/g, "")}</strong>`);
+        line = line.replace(b, `<strong
+        className="$vader_markdown_bold"
+        >${b.replace(/\*\*/g, "")}</strong>`);
       });
     }
     if (italic) {
       italic.forEach((i) => {
-        line = line.replace(i, `<em>${i.replace(/\*/g, "")}</em>`);
+        line = line.replace(i, `<em
+        className="$vader_markdown_italic"
+        >${i.replace(/\*/g, "")}</em>`);
       });
     }
 
@@ -55,22 +59,30 @@ function markdown(content) {
         let text = l.match(/\[(.*?)\]/g)[0].replace(/\[|\]/g, "");
          // @ts-ignore
         let href = l.match(/\((.*?)\)/g)[0].replace(/\(|\)/g, "");
-        line = line.replace(l, `<a href="${href}">${text}</a>`);
+        line = line.replace(l, `<a 
+        className="$vader_markdown_link"
+        href="${href}">${text}</a>`);
       });
     }
     if (ul) {
-      line = line.replace(ul[0], `<li style="list-style-type: disc;">`);
+      line = line.replace(ul[0], `<li
+      className="$vader_markdown_ul"
+      style="list-style-type: disc;">`);
       line += `</li>`;
     }
     if (ol) {
-      line = line.replace(ol[0], `<li style="list-style-type: decimal;">`);
+      line = line.replace(ol[0], `<li 
+      className="$vader_markdown_ol"
+      style="list-style-type: decimal;">`);
       line += `</li>`;
     }
     if (hr) {
       line = line.replace(hr[0], `<hr/>`);
     }
     if (blockquote) {
-      line = line.replace(blockquote[0], `<blockquote>`);
+      line = line.replace(blockquote[0], `<blockquote
+      className="$vader_markdown_blockquote"
+      >`);
       line += `</blockquote>`;
     }
     if (image) {
@@ -80,7 +92,9 @@ function markdown(content) {
          // @ts-ignore
         let src = i.match(/\((.*?)\)/g)[0].replace(/\(|\)/g, "");
         i.replace(i, `<img src="${src}" alt="${alt}"/>`);
-        line = line.replace(i, `<img src="${src}" alt="${alt}"/>`).replace('!','')
+        line = line.replace(i, `<img 
+        className="$vader_markdown_image"
+        src="${src}" alt="${alt}"/>`).replace('!','')
       });
     }
     if (li) {
@@ -88,7 +102,7 @@ function markdown(content) {
       line += `</li>`;
     }
     if (codeBlock) {
-      line = line.replace(codeBlock[0], `<pre><code>`);
+      line = line.replace(codeBlock[0], `<pre className="$vader_markdown_code_block" ><code>`);
     }
     if (codeBlockEnd) {
       line = line.replace(codeBlockEnd[0], `</code></pre>`);
@@ -97,8 +111,8 @@ function markdown(content) {
     if (code) {
       code.forEach((c) => {
         line = line.replace(c, `<code
+        className="$vader_markdown_code"
         style="background-color: #f5f5f5; padding: 5px; border-radius: 5px;
-        
         "
         >${c.replace(/\`/g, "")}</code>`);
       });
@@ -194,6 +208,19 @@ export class Component {
     });
     this.snapshots = [];
     
+    /**
+     * @property {Boolean} cfr
+     * @description Allows you to compile html code on the fly  - client fly rendering 
+     *  
+     */
+    this.cfr = false
+    /**
+     * @property {Boolean} worker
+     * @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));
   }
 
   /**
@@ -207,6 +234,7 @@ export class Component {
   }
   init() {
     this.registerComponent();
+    
   }
 
   registerComponent() {
@@ -775,92 +803,11 @@ export class Component {
     return /^[a-zA-Z0-9-_]+$/.test(className);
   }
 
-  /**
-   * The `html` method generates and processes HTML content for a component, performing various validations and tasks.
-   *
-   * @param {String} strings - The HTML content to be processed.
-   * @param {...any} args - Dynamic values to be inserted into the template.
-   * @returns {string} - The processed HTML content as a string.
-   *
-   * @throws {SyntaxError} - Throws a `SyntaxError` if image-related attributes are missing or invalid.
-   * @throws {Error} - Throws an `Error` if there are issues with class names or relative paths.
-   *
-   * @example
-   * // Example usage within a component:
-   * const myComponent = new Component();
-   * const htmlContent = myComponent.html`
-   *   <div>
-   *     <img src="/images/example.jpg" alt="Example Image" />
-   *   </div>
-   * `;
-   * document.body.innerHTML = htmlContent;
-   *
-   * @remarks
-   * The `html` method is a core function used in component rendering. It allows you to define and generate HTML content within your component while enforcing best practices and accessibility standards. The method performs several essential tasks:
-   *
-   * 1. **Image Validation**: It checks images for the presence of 'alt' attributes and their validity.
-   *    - Throws a `SyntaxError` if an image is missing the 'alt' attribute.
-   *    - Throws a `SyntaxError` if the 'alt' attribute is empty.
-   *    - Checks for an 'aria-hidden' attribute for image elements.
-   *
-   * 2. **Class Attribute Handling**: It enforces class attribute usage and allows optional configuration via comments.
-   *    - Throws an `Error` if 'class' attributes are used without permission.
-   *    - Supports 'className' attributes for class definitions.
-   *    - Allows or disallows class-related comments based on your configuration.
-   *
-   * 3. **Relative Path Handling**: It processes relative paths in 'href' and 'src' attributes, ensuring proper routing.
-   *    - Converts relative 'href' attributes to anchor links with appropriate routing.
-   *    - Converts relative 'src' attributes to absolute paths with 'public' directories.
-   *
-   * 4. **Custom Component Attributes**: It supports adding a 'data-component' attribute to the root element.
-   *    - Ensures that the 'data-component' attribute is present for component identification.
-   *
-   * 5. **Lifecycle Method Invocation**: It invokes the `componentDidMount` method if called from a 'render' context.
-   *    - Executes `componentDidMount` to handle component initialization once the DOM is ready.
-   *
-   * @see {@link Component}
-   * @see {@link Component#componentDidMount}
-   */
-  
-  html(strings, ...args) {
-    // @ts-ignore
-    if (
-      // @ts-ignore
-      new Error().stack &&
-       // @ts-ignore
-      new Error().stack.split("\n").length > 0 &&
-       // @ts-ignore
-      new Error().stack.split("\n")[2] &&
-       // @ts-ignore
-      new Error().stack.split("\n")[2].includes("render") &&
-      !this.componentMounted
-    ) {
-      this.componentMounted = true;
-      this.componentDidMount();
-      console.log("component mounted");
-    }
-
-    let result = "";
-    for (let i = 0; i < strings.length; i++) {
-      result += strings[i];
-      if (i < args.length) {
-        result += args[i];
-      }
-    }
-   
-    result = result.replace(/\\n/g, '\n').trim()
-    // replace ` 
-    result = result.replace(/`/g, '\`').trim()
-
-    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!"
-      );
-    }
-     
+  parseHTML(result) {
+         
     const dom = new DOMParser().parseFromString(result, "text/html");
+    console.log(dom)
     const elements = dom.documentElement.querySelectorAll("*");
 
     elements.forEach((element) => {
@@ -899,6 +846,7 @@ 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 = () => {
@@ -941,27 +889,6 @@ export class Component {
               );
             }
           } else if (element.hasAttribute("className")) {
-            const isLocalhost = window.location.href.includes("localhost");
-            const is127001 = window.location.href.includes("127.0.0.1");
-            const ignoreClassComments = document.documentElement.outerHTML
-              .trim()
-              .includes("<!-- #vader-class-ignore -->");
-            const allowClassComments = document.documentElement.outerHTML
-              .trim()
-              .includes("<!-- #vader-allow_class -->");
-
-            if (
-              // @ts-ignore
-              (!this.validateClassName(element.getAttribute("className")) &&
-                isLocalhost) ||
-              (is127001 && !ignoreClassComments && !allowClassComments)
-            ) {
-              throw new Error(
-                `Invalid className ${element.getAttribute(
-                  "className"
-                )}, please use camelCase instead - example: myClass`
-              );
-            }
             // @ts-ignore
             element.setAttribute("class", element.getAttribute("className"));
             element.removeAttribute("className");
@@ -998,6 +925,7 @@ export class Component {
           }
           break;
       }
+      
     });
 
     result = dom.body.innerHTML;
@@ -1005,12 +933,128 @@ export class Component {
     this.Componentcontent = result;
 
     if (!result.includes("<div data-component")) {
-      result = `<div 
-      
-      data-component="${this.name}">${result}</div>`;
+       result = `<div data-component="${this.name}">${result}</div>`;
     }
+    return  markdown(result.replace(/\\n/g, '\n').trim())
 
-    return result;
+  }
+  
+  /**
+   * The `html` method generates and processes HTML content for a component, performing various validations and tasks.
+   *
+   * @param {String} strings - The HTML content to be processed.
+   * @param {...any} args - Dynamic values to be inserted into the template.
+   * @returns {string} - The processed HTML content as a string.
+   *
+   * @throws {SyntaxError} - Throws a `SyntaxError` if image-related attributes are missing or invalid.
+   * @throws {Error} - Throws an `Error` if there are issues with class names or relative paths.
+   *
+   * @example
+   * // Example usage within a component:
+   * const myComponent = new Component();
+   * const htmlContent = myComponent.html`
+   *   <div>
+   *     <img src="/images/example.jpg" alt="Example Image" />
+   *   </div>
+   * `;
+   * document.body.innerHTML = htmlContent;
+   *
+   * @remarks
+   * The `html` method is a core function used in component rendering. It allows you to define and generate HTML content within your component while enforcing best practices and accessibility standards. The method performs several essential tasks:
+   *
+   * 1. **Image Validation**: It checks images for the presence of 'alt' attributes and their validity.
+   *    - Throws a `SyntaxError` if an image is missing the 'alt' attribute.
+   *    - Throws a `SyntaxError` if the 'alt' attribute is empty.
+   *    - Checks for an 'aria-hidden' attribute for image elements.
+   *
+   * 2. **Class Attribute Handling**: It enforces class attribute usage and allows optional configuration via comments.
+   *    - Throws an `Error` if 'class' attributes are used without permission.
+   *    - Supports 'className' attributes for class definitions.
+   *    - Allows or disallows class-related comments based on your configuration.
+   *
+   * 3. **Relative Path Handling**: It processes relative paths in 'href' and 'src' attributes, ensuring proper routing.
+   *    - Converts relative 'href' attributes to anchor links with appropriate routing.
+   *    - Converts relative 'src' attributes to absolute paths with 'public' directories.
+   *
+   * 4. **Custom Component Attributes**: It supports adding a 'data-component' attribute to the root element.
+   *    - Ensures that the 'data-component' attribute is present for component identification.
+   *
+   * 5. **Lifecycle Method Invocation**: It invokes the `componentDidMount` method if called from a 'render' context.
+   *    - Executes `componentDidMount` to handle component initialization once the DOM is ready.
+   *
+   * @see {@link Component}
+   * @see {@link Component#componentDidMount}
+   */
+  
+  
+  
+  html(strings, ...args) {
+    // @ts-ignore
+    if (
+      // @ts-ignore
+      new Error().stack &&
+       // @ts-ignore
+      new Error().stack.split("\n").length > 0 &&
+       // @ts-ignore
+      new Error().stack.split("\n")[2] &&
+       // @ts-ignore
+      new Error().stack.split("\n")[2].includes("render") &&
+      !this.componentMounted
+    ) {
+      this.componentMounted = true;
+      this.componentDidMount();
+    }
+
+     
+    if(this.cfr){
+       
+      this.worker.postMessage({strings, args, location: window.location.href, name: this.name})
+      let promise = new Promise((resolve, reject)=>{
+        this.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)
+           
+          
+         
+        }
+        this.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!"
+        );
+      }
+     
+       
+   
+      return  this.parseHTML(result);
+    }
+
+  
   }
   // write types to ensure it returns a string
   /**
@@ -1117,38 +1161,80 @@ export const include = async (path) => {
       return res.text();
     })
     .then(async (data) => {
-      // Handle includes
-      let includes = data.match(/<include src="(.*)"\/>/g);
-      if (includes) {
-      
-        const includePromises = includes.map((e) => {
+      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++) {
         
-          // @ts-ignore
-          let includePath = e.match(/<include src="(.*)"\/>/)[1];
+          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");
 
-          if (
-            includePath.startsWith("/") &&
-            !document.documentElement.outerHTML
-              .trim()
-              .includes("<!-- #vader-disable_relative-paths -->")
-          ) {
-            includePath = "/src" + includePath;
-          }
-          return include(includePath).then((includeData) => {
-            data = data.replace(e, includeData);
-          });
-        });
+              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>`
+                        }
+                      })
+                      
+                      
+                    }
+                    
+                 }
 
-        // Wait for all includes to be fetched and replaced
-        return Promise.all(includePromises).then(() => {
-          cache[path] = data;
+                 dom.body.querySelectorAll('include').forEach((el)=>{
+                    el.remove()
+                 })
+                 
+                 dom.body.outerHTML = dom.body.outerHTML.replace(el.outerHTML, newdom.body.innerHTML)
+                 
+               
+              })
+          
            
-          return data
-        });
-      } else {
-        cache[path] = data;
-        return data;
+               
+
+          }
+        }
+
+         
       }
+      
+      data = dom.body.outerHTML
+       
+      return  data;
     });
 };
 

package/worker.js

@@ -0,0 +1,106 @@
+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 result = "";
+    for (let i = 0; i < strings.length; i++) {
+      result += strings[i];
+      if (i < args.length) {
+        result += args[i];
+      }
+    }
+
+    let comments = result.match(/--([^>]*)--/gs)
+    if(comments){
+        while(comments.length){
+            let comment = comments.pop()
+            console.log(comment)
+            // @ts-ignore
+            result = result.replace(comment,'')
+        }
+    }
+
+    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">`)
+        }
+    }
+ 
+ 
+    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)
+    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]}"`)
+        }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]}`)
+        }
+      }
+      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}. `)
+      }
+ 
+      // @ts-ignore
+       if(!caches.match(`${l}/public/${src[1]}`)){
+        caches.open('vader').then((cache)=>{
+            // @ts-ignore
+            cache.add(`${l}/public/${src[1]}`)
+            // @ts-ignore
+            console.log('cached', `${l}/public/${src[1]}`)
+           }).catch((err)=>{
+             console.log(err)
+           })
+       }else{
+        // @ts-ignore
+            console.log('already cached', caches.match(`${l}/public/${src[1]}`))
+       }
+    }
+
+    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{
+                throw new Error(`Vader Error: You cannot use relative paths in ${e.data.file}. Use absolute 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','color:#fff;background:#000;padding:5px;border-radius:5px;font-size:12px;font-weight:bold'),""\}`
+    }
+   
+   
+    postMessage(`<div data-component=${e.data.name}>${result}</div>`)
+   
+  }