vaderjs 1.3.3-7725642-hotfix → 1.3.3-777562-hotfix

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-7725642-hotfix",
+  "version": "1.3.3-777562-hotfix",
   "bin": {
     "vader": "./vader.js"
   },

package/vader.js

@@ -482,11 +482,17 @@ function Compiler(func, file) {
 
       let name = component.split("<")[1].split(">")[0].split(" ")[0].replace("/", "");
       let componentAttributes = component.split("<")[1].split(">")[0].split(" ").join(" ").replace(name, "").trim();
-      // catchall = {...}
-      const dynamicAttributesRegex = /(\w+)(?:="([^"]*?)"|='([^']*?)'|(?:=\{(.*?)\})?|(?:=\{(.*?)\})?)(?:\}|(?=\s[\w-]+=))/gs;
-
-      let props = component.match(dynamicAttributesRegex)
+      // catchall = "" ={} =[]
+   
+      
+      let props = component.split("<")[1].split(">")[0] 
+       
+    
+      const dynamicAttributesRegex = /([a-zA-Z0-9_-]+)\s*=\s*("(?:[^"\\]*(?:\\.[^"\\]*)*)"|'(?:[^'\\]*(?:\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{.*.*\})*)*\})*)*\}|(?:\([^)]*\)|()\s*=>\s*(?:\{.*\})?|\{[^}]*\})|\[[^\]]*\])/gs;
 
+      const attributeObject =  {};
+      
+      
       let filteredProps = [];
       let isWithinComponent = false;
       let componentName = name
@@ -494,73 +500,32 @@ function Compiler(func, file) {
 
       let $_ternaryprops = []
 
-     if(props){
-      for (let prop of props) {
-
-        if (prop === componentName) {
-
-          isWithinComponent = true;
-          filteredProps.push(prop);
-        } else if (isWithinComponent && prop.includes('=')) {
- 
-       if (prop.includes('${')) {
-
-
-            prop = prop.replace('="', ':')
-            if (prop.includes('${')) {
-              prop = prop.replace('="', ':')
-              prop = prop.replace('${', '')
-            }
-            if (prop.includes('="${{')) {
-              prop = prop.replace('${{', '{')
-              prop = prop.replace('}}', '}')
-              prop = prop.replace('="', ':')
-              prop = prop.replace('}"', '}')
-            }
-
-          }
-          if (prop.includes('={')) {
-            let value = prop.split('={')
-            let isObj = value[1].match(/^{.*}$/gs) ? true : false
-            if (!isObj) { 
-              value[1] = value[1].replace(/}\s*$/, '')
-            }else if(!value[0].length > 0 && isObj){
-                 prop = ''
-            }
-             
-            value[1] = value[1].replace(/}\s*$/, '') 
-            if (value[0] == 'style' && isObj) {
-              value[1] = `this.parseStyle(${value[1]})`
-            } 
-            prop = `${value[0]}:${value[1]}`
-          }
-
-          if (prop.includes('function') || prop.includes('=>')) {
-            // parse 'function' to function 
-            prop = prop.replace("'", '')
-
-            if (prop.endsWith("}'")) {
-              prop = prop.replace("}'", '}')
-
-            }
-
-            prop = prop.replace('=function', ':function')
-          }
-
-          filteredProps.push(prop);
-
-
-
-        } else if (isWithinComponent && prop.includes('}')) {
-
+      let match; 
+      let propstring = ''
+      // props right now is just a string with all of them on one line and a space between each
+      while ((match = dynamicAttributesRegex.exec(props)) !== null) { 
+        let str = match[0].trim().replace(/\s+/g, " ");
+        if(!str.includes('=')){
+          continue
         }
-
-
-        else {
-          isWithinComponent = false;
+        str = str.split('=')
+        let key = str[0].trim() 
+        let value = str[1].trim()
+        if(value.startsWith('"') && !value.endsWith('"') || value.startsWith("'") && !value.endsWith("'")
+        || value.startsWith('`') && !value.endsWith('`')){
+          // wrap in respective quotes
+          value = value + value[0]
         }
-      }
-     }
+        let isObject = value.startsWith('{{') && value.endsWith('}}')
+        if(isObject){ 
+          value = value.split('{{')[1].split('}}')[0].trim()
+          value = `{${value}}`
+        } else{
+          // remove starting { and ending } using regex
+          value = value.replace(/^{/, '').replace(/}$/, '') 
+        } 
+        propstring += `${key}:${value},`
+      } 
       component = component.replaceAll(/\s+/g, " ");
 
       component = component.replace(componentAttributes, '')
@@ -570,8 +535,8 @@ function Compiler(func, file) {
 
       let children = new RegExp(`<${name}[^>]*>([^]*)<\/${name}>`, 'gs').exec(component)?.[1] || null;
 
-      props = filteredProps.join(',').replace(/\s+/g, " ").trim().replace(/,$/, '')
-
+    
+ 
       let savedname = name;
 
 
@@ -601,26 +566,17 @@ function Compiler(func, file) {
         }
       });
 
+ 
+      
+      propstring = propstring.replace(/,$/, '')
 
-
-
-      props = props.replaceAll(`,${savedname}`, '').replaceAll(savedname, '')
-      if (props.startsWith(',')) {
-        props = props.replace(',', '')
-      }
-      props = props.replaceAll("='", ":'")
-        .replaceAll('=`', ':`')
-        .replaceAll('="', ':"')
-        .replaceAll('={', ':')
-
-
+       
       /**
        * @memoize - memoize a component to be remembered on each render and replace the old jsx
-       */
-
+       */ 
 
       let replace = "";
-      replace = `\${this.memoize(this.createComponent(${savedname}, {${props}}, [\`${myChildrens.join('')}\`]))}`;
+      replace = `\${this.memoize(this.createComponent(${savedname}, {${propstring}}, [\`${myChildrens.join('')}\`]))}`;
 
 
       body = body.replace(before, replace);
@@ -1378,7 +1334,7 @@ switch (true) {
     globalThis.devMode = true
     globalThis.isProduction = false
     console.log(`
-Vader.js v1.3.3
+Vader.js v${fs.readFileSync(process.cwd() + '/node_modules/vaderjs/package.json', 'utf8').split('"version": "')[1].split('"')[0]}
 - Watching for changes in ./pages
 - Watching for changes in ./src
 - Watching for changes in ./public
@@ -1418,7 +1374,7 @@ Vader.js v1.3.3
     globalThis.isProduction = true
     globalThis.routeStates = []
     console.log(`
-Vader.js v1.3.3 
+Vader.js v${fs.readFileSync(process.cwd() + '/node_modules/vaderjs/package.json', 'utf8').split('"version": "')[1].split('"')[0]}
 Building to ./dist
 `)
     if (fs.existsSync(process.cwd() + '/dist/src/maps')) {
@@ -1432,7 +1388,7 @@ Building to ./dist
     process.env.PORT = port
     globalThis.devMode = false
     console.log(`
-Vader.js v1.3.3 
+Vader.js v${fs.readFileSync(process.cwd() + '/node_modules/vaderjs/package.json', 'utf8').split('"version": "')[1].split('"')[0]}
 Serving ./dist on port ${port}
 url: http://localhost:${port}
     `)