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

package/vader.js

@@ -143,9 +143,6 @@ function Compiler(func, file) {
             isJSXComponent = elementTag.match(/^[A-Z]/) ? true : false;
           }
         });
-        if(isJSXComponent){
-          continue
-        }
         // add ; after newlines  
 
 
@@ -482,17 +479,12 @@ 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 = "" ={} =[]
-   
-      
-      let props = component.split("<")[1].split(">")[0] 
-       
-    
-      const dynamicAttributesRegex = /([a-zA-Z0-9_-]+)\s*=\s*("(?:[^"\\]*(?:\\.[^"\\]*)*)"|'(?:[^'\\]*(?:\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{.*.*\})*)*\})*)*\}|(?:\([^)]*\)|()\s*=>\s*(?:\{.*\})?|\{[^}]*\})|\[[^\]]*\])/gs;
+      const dynamicAttributesRegex = /(\w+)(?:="([^"]*?)"|='([^']*?)'|(?:=\{([^}]*?)\})?|(?:=\{(.*?)*\})?|(?:={([^}]*?)})?|(?:{([^}]*?)})?|(?:}))?|\$=\s*\{\s*\{\s*([^]*?)\s*\}\s*\}/gs;
+
+
+
+      let props = component.match(dynamicAttributesRegex)
 
-      const attributeObject =  {};
-      
-      
       let filteredProps = [];
       let isWithinComponent = false;
       let componentName = name
@@ -500,32 +492,79 @@ function Compiler(func, file) {
 
       let $_ternaryprops = []
 
-      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
+      for (let prop of props) {
+
+        if (prop === componentName) {
+
+          isWithinComponent = true;
+          filteredProps.push(prop);
+        } else if (isWithinComponent && prop.includes('=')) {
+
+          if (prop.startsWith('$=')) {
+            let old = prop
+            let match = prop.replace(/\$\s*=\s*\{\s*\{\s*([^]*?)\s*\}\s*\}/gs, '$1') 
+            match = match.replace('$:', '$_ternary:')
+            component = component.replace(old, '')
+            componentAttributes = componentAttributes.replace(old,  match)
+
+            $_ternaryprops.push(prop)
+
+          }
+          else 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) {
+              // remove trailing }
+              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('}')) {
+
         }
-        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]
+
+
+        else {
+          isWithinComponent = false;
         }
-        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, '')
@@ -535,8 +574,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;
 
 
@@ -566,17 +605,26 @@ 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}, {${propstring}}, [\`${myChildrens.join('')}\`]))}`;
+      replace = `\${this.memoize(this.createComponent(${savedname}, {${props}}, [\`${myChildrens.join('')}\`]))}`;
 
 
       body = body.replace(before, replace);
@@ -1185,7 +1233,7 @@ async function Build() {
     await writer(process.cwd() + "/dist/src/" + name, data);
   })
 
-  const scannedPublicFiles = await glob("**/**/**.{css,js,html,mjs,cjs,png,jpg,jpeg,gif,svg,mp4,webm,ogg}", {
+  const scannedPublicFiles = await glob("**/**.{css,js,html,mjs,cjs}", {
     ignore: ["node_modules/**/*", "dist/**/*"],
     cwd: process.cwd() + '/public/',
     absolute: true,
@@ -1193,7 +1241,7 @@ async function Build() {
   scannedPublicFiles.forEach(async (file) => {
     file = file.replace(/\\/g, '/');
     file = file.split('/public/')[1]
-    let data = fs.readFileSync(process.cwd() + "/public/" + file);
+    let data = await reader(process.cwd() + "/public/" + file)
     bundleSize += fs.statSync(process.cwd() + "/public/" + file).size;
     await writer(process.cwd() + "/dist/public/" + file, data);
   })
@@ -1226,7 +1274,7 @@ async function Build() {
   }
 
   globalThis.isBuilding = false
-  console.log(`\nTotal bundle size: ${Math.round(bundleSize / 1000)}kb`)
+   globalThis.isProduction  ? console.log(`\nTotal bundle size: ${Math.round(bundleSize / 1000)}kb`) : null
 
   bundleSize = 0;
 
@@ -1334,7 +1382,7 @@ switch (true) {
     globalThis.devMode = true
     globalThis.isProduction = false
     console.log(`
-Vader.js v${fs.readFileSync(process.cwd() + '/node_modules/vaderjs/package.json', 'utf8').split('"version": "')[1].split('"')[0]}
+Vader.js v1.3.3
 - Watching for changes in ./pages
 - Watching for changes in ./src
 - Watching for changes in ./public
@@ -1374,7 +1422,7 @@ Vader.js v${fs.readFileSync(process.cwd() + '/node_modules/vaderjs/package.json'
     globalThis.isProduction = true
     globalThis.routeStates = []
     console.log(`
-Vader.js v${fs.readFileSync(process.cwd() + '/node_modules/vaderjs/package.json', 'utf8').split('"version": "')[1].split('"')[0]}
+Vader.js v1.3.3 
 Building to ./dist
 `)
     if (fs.existsSync(process.cwd() + '/dist/src/maps')) {
@@ -1388,7 +1436,7 @@ Building to ./dist
     process.env.PORT = port
     globalThis.devMode = false
     console.log(`
-Vader.js v${fs.readFileSync(process.cwd() + '/node_modules/vaderjs/package.json', 'utf8').split('"version": "')[1].split('"')[0]}
+Vader.js v1.3.3 
 Serving ./dist on port ${port}
 url: http://localhost:${port}
     `)
@@ -1397,7 +1445,7 @@ url: http://localhost:${port}
   default:
     // add color
     console.log(` 
-Vader.js is a reactive framework for building interactive applications for the web built ontop of bun.js!
+Vader.js is a reactive framework for building interactive applications for the web!
     
 Usage: vader <command> 
     
@@ -1415,3 +1463,4 @@ Learn more about vader:           https://vader-js.pages.dev/
     break;
 
 }
+