vaderjs 1.3.3-alpha-37 → 1.3.3-alpha-39

package/package.json

@@ -2,7 +2,7 @@
   "name": "vaderjs",
   "description": "A Reactive library aimed to helping you build reactive applications inspired by react.js",
   "module": "vader.js",
-  "version": "1.3.3-alpha-37",
+  "version": "1.3.3-alpha-39",
   "bin": {
     "vader": "./vader.js"
   },

package/runtime/router.js

@@ -1,6 +1,6 @@
 import { Component } from "./vader.js";
 
- 
+let middlewares = [];
 
  
 
@@ -55,6 +55,7 @@ class VaderRouter{
      */
   
     use(/* path, */ middleware) {
+      console.log(middleware)
       this.middlewares.push(middleware);
     }
   
@@ -226,45 +227,69 @@ class VaderRouter{
             });
           }
         },
+        refresh: () => {
+           this.handleRoute(window.location.hash);
+        },
         redirect: (path) => { 
           !path.startsWith('/') ? path = `/${path}` : null;
           window.location.hash = `#${path}`;
         },
         render: async (/**@type {Component} */ Component, req, res) => {
-          
-            if(!Component || !Component.default || !Component.constructor){
-              let message = !Component || !Component.default ? 'default' : 'constructor';
-              switch(message){
-                case 'default':
-                  throw new Error(`Component must have a default export ex: return {default: Component}`);
-                  
-                case 'constructor':
-                  throw new Error(`Component is invalid, please check the constructor`);
-                  
+          try {
+              // Check if the component is valid
+              if (!Component || !Component.default || !Component.constructor) {
+                  let message = !Component || !Component.default ? 'default' : 'constructor';
+                  switch (message) {
+                      case 'default':
+                          throw new Error(`Component must have a default export ex: return {default: Component}`);
+                      case 'constructor':
+                          throw new Error(`Component is invalid, please check the constructor`);
+                  }
+              }
+      
+              // Create an instance of the component
+              Component = Component.default ? new Component.default() : Component.constructor ? new Component() : Component;
+      
+              // Set the 'mounted' flag to true
+              Component.mounted = true;
+      
+              // Check if the root element exists
+              if (!document.querySelector('#root')) {
+                  throw new Error('Root element not found, please add an element with id root');
               }
+      
+              // Reset component state
+              Component.reset();
+              Component.components = {};
+              Component.request = req;
+              Component.response = res;
+      
+              // Check if the component has a router and is not a child component
+              if (Component.router.use && !Component.isChild) {
+                  // Allow pausing the route and run code before rendering
+                  await new Promise(async (resolve) => {
+                      await Component.router.use(req, res)
+                      if(req.pause){
+                      let timer = setInterval(() => {
+                        if(!req.pause){
+                          resolve();
+                          clearInterval(timer);
+                        }
+                      }, 1000);
+                     }
+                  });
+              } else if (Component.router.use && Component.isChild) {
+                  console.warn('Router.use() is not supported in child components');
+              } 
+                  const renderedContent = await Component.render();
+                  document.querySelector('#root').innerHTML = renderedContent;
+                  Component.bindMount();
+                  Component.onMount();
              
-            }
-        
-            Component = Component.default ? new Component.default() :  Component.constructor ? new Component() : Component;
-            
-         
-            Component.mounted = true;
-            
-            if(!document.querySelector('#root')){
-              throw new Error('Root element not found, please add an element with id root');
-            }
-            Component.router.use = this.use.bind(this)
-            Component.state = {}
-            Component.reset();
-            Component.components = {}
-            Component.request = req;
-            Component.response = res;
-            document.querySelector('#root').innerHTML =   Component.render() 
-            Component.bindMount();
-            Component.onMount()
-           
-           
-        },
+          } catch (error) {
+              console.error(error);
+          }
+      },
         setQuery: (query) => {
           let queryString = '';
           Object.keys(query).forEach((key, index) => {
@@ -290,8 +315,8 @@ class VaderRouter{
             throw new Error('Selector must be a string');
           }
         } 
-      };
-      this.middlewares.forEach((middleware) => {
+      }; 
+      middlewares.forEach((middleware) => { 
         middleware(req, res);
       });
     
@@ -300,7 +325,7 @@ class VaderRouter{
     
     
   }
-
+ 
   window.VaderRouter = VaderRouter;
   
   export default VaderRouter;

package/runtime/vader.js

@@ -165,7 +165,11 @@ export class Component {
     this.freeMemoryFromFunctions();
     this.checkIFMounted();
     this.memoizes = []
-    
+    /**
+     * @type {boolean}
+     * @description Indicates if the component is a child component
+     */
+    this.isChild = false;
     this.vdom =  []
     
     this.children = []
@@ -281,6 +285,8 @@ export class Component {
     comp.parentNode  = this;
     comp.request = this.request;
     comp.response = this.response;
+    comp.isChild = true;
+    delete comp.router 
     comp.key = props.key || null;
      
     if(!this.components[props.key]){
@@ -615,7 +621,7 @@ export class Component {
     if (!this.state[key]) {
       this.state[key] = initialState;
     }
-    const getValue = () => this.state[key];
+    const getValue = () =>  document.querySelector(`[ref="${key + this.key}"]`) ||  initialState;
     const set = (newValue) => {
       this.state[key] = newValue;
       this.hydrate();
@@ -624,7 +630,7 @@ export class Component {
     
     return  {
        bind: key + this.key,
-       current:   document.querySelector(`[ref="${key + this.key}"]`) ||  initialState
+       current: getValue(),
     }
   }
 
@@ -677,22 +683,23 @@ let cache = {};
  * @param {Boolean} noresolve - used to tell if the path should be automatically handled or manually handled - this is false by default
  * @returns
  */
-export const require = async (path, noresolve = false) => {
+export const require = async (path, options) => {
    
   if (cache[path]) {
     return cache[path];
   }
   let file = ''
   try {
-    file = await fetch(path).then((res) => res.text());
-    cache
+    file = await fetch(path).then((res) =>  options && options.type === 'json' ? res.json() : res.text());
+  
   } catch (error) {
      console.error(error)
   }
 
-  file = file + `\n//# sourceURL=${path}\n`;
+  
 
   let filetype = path.split(".").pop();
+  filetype !== "json"  ? file = file + `\n//# sourceURL=${path}\n` : null;
   switch (true) {
     case filetype === "js":
       let exports = file.match(/module.exports\s*=\s*{.*}/gs) || file.match(/exports\s*=\s*{.*}/gs);
@@ -712,6 +719,10 @@ export const require = async (path, noresolve = false) => {
       
       cache[path] = new Function(`return (async () => { ${file} })()`)();
       return cache[path]
+    case filetype === "json": 
+      cache[path] = file
+      return cache[path]
+
     case filetype === "jsx": 
     cache[path] = new Function(`return (async () => { ${file} })()`)();
     return  cache[path]
@@ -787,11 +798,12 @@ export const useRef = (initialState) => {
   return {
     /**
      * @description The current value of the ref.
-     
+       @type {*}
      */
     current: initialState,
     /**
      * @description A unique string that can be used to bind the ref to an element.
+     * @type {HTMLElement|string}
      */
     bind: '',
   };

package/vader.js

@@ -662,9 +662,12 @@ function Compiler(func) {
   let exportss = {}
   string.split('\n').forEach(line => {
     if(line.includes('import')){
-      let asyncimportMatch = line.match(/import\((.*)\)/gs) 
-      // handle other imports like import { useState } from 'vaderjs/client' or import vader from 'vaderjs/client'
-      let regularimportMatch = line.match(/import\s*(.*)\s*from\s*(.*)/gs)
+       // Regular expression for matching import() statements
+let  asyncimportMatch = line.match(/import\s*\((.*)\)/gs);
+
+// Regular expression for matching regular import statements excluding lines with HTML elements
+let  regularimportMatch = line.match(/import\s+([\w\s{},]*)\s*from\s*(['"][^'"]+['"])(?![^<]*>)/gs);
+
       if(asyncimportMatch){
         asyncimportMatch.forEach(async (match) => {
           let beforeimport = match
@@ -672,8 +675,8 @@ function Compiler(func) {
           let newImport = ''
           switch(true){
             case path && path.includes('json'):
-              // return default json
-            newImport = `import(${path}, {assert:{type:'json'}}).then((data) => data.default)`
+            path = path.replace(';', '')
+            newImport = `JSON.parse(require(${path}))`
             let htmlPrefetch = `<link rel="prefetch" href="${path}" as="fetch">`
             let beforeHTML = fs.existsSync(process.cwd() + "/dist/index.html") ? fs.readFileSync(process.cwd() + "/dist/index.html", "utf8") : '';
             if(!beforeHTML.includes(htmlPrefetch)){
@@ -691,14 +694,15 @@ function Compiler(func) {
       
       if(regularimportMatch){
         regularimportMatch.forEach(async (match) => {
+           
           let beforeimport = match
           let path = match.split('from')[1].trim()
           let newImport = ''
           let name = match.split('import')[1].split('from')[0].trim()
           switch(true){
             case path && path.includes('json'):
-              // return default json
-            newImport = `let ${name} = await import(${path}, {assert:{type:'json'}}).then((data) => data.default)`
+             path = path.replace(';', '')
+            newImport = `let ${name} = await require(${path}, {type: 'json'})`
             let htmlPrefetch = `<link rel="prefetch" href="${path.replace(/'/g, '')}" as="fetch">`
             let beforeHTML = fs.existsSync(process.cwd() + "/dist/index.html") ? fs.readFileSync(process.cwd() + "/dist/index.html", "utf8") : '';
             if(!beforeHTML.includes(htmlPrefetch)){
@@ -707,6 +711,7 @@ function Compiler(func) {
             }
             break;
            case path && path.includes('.jsx'):
+            
             newImport = `let ${name} = await require(${path})`
             break;
             default: 
@@ -718,15 +723,14 @@ function Compiler(func) {
           }
         })
       }
-    }else  if (line.includes('export')) {
+    }else  if (line.includes('export') && !line.includes('>') && !line.includes('<')) {
       let b4line = line;
       let exports = line.split('export')[1].trim();
       let isDefault = exports.includes('default');  
        
       let name = ''
       switch (true) {
-        case exports &&  isDefault:
-          console.log('default')
+        case exports &&  isDefault: 
 
           let expt = exports.split('default')[1].trim();
           // Check if it's a class definition
@@ -736,7 +740,7 @@ function Compiler(func) {
             let className =  match ? match[0].split('class')[1].split('extends')[0].trim() : expt.split('class')[1].split('{')[0].trim();
              name = className
 
-            exportss['default'] = className
+            exportss[isDefault ? 'default' : className] = className
           } else if (expt.includes('function')) {
             let funcName = expt.split('function')[1].split('(')[0].trim();
             name = funcName
@@ -767,8 +771,10 @@ function Compiler(func) {
     
      
   })
-  if(exportss){
-    string = string + `\n return ${Object.keys(exportss).length > 1 ? `{${Object.keys(exportss).map(key => key + ':' + exportss[key]).join(',')}}` : Object.keys(exportss)[0]}`
+  if(exportss){ 
+    let exports = Object.keys(exportss).map(key => key + ':' + exportss[key]).join(',')
+   
+    Object.keys(exportss).length > 1 ? string += `\n\n return {${exports}}` : string += `\n\nreturn ${Object.keys(exportss) == 'default' ? `{default: ${Object.values(exportss)[0]}}` : `${Object.keys(exportss)[0]}`}`
   }
    
   return string;