vaderjs 1.5.3 → 1.5.5

package/document/index.ts

@@ -1,39 +1,43 @@
-export const document = (element: any) => {
+export const document = (element: any) => { 
    let type = element.type;
-   let el = `<${type}`;
+   let el =  type ===  null ? `` : `<${type}`
+   console.log(el)
    let attributes = element.props;
    let children = element.children;
-    for (let key in attributes) {
-      if(key === "key"){ 
-         el += ` key="${attributes[key]}"`;
-         continue;
-      }
-      if (key === "className") {
-         el += ` class="${attributes[key]}"`;
-         continue;
-      }
-      if (key === "style") {
-         // convert style object to string
-         let styles = attributes[key];
-         let styleString = "";
-        // convert camelCase to kebab-case
-         for (let style in styles) {
-            let kebabStyle = style.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
-            styleString += `${kebabStyle}:${styles[style]};`;
+     if(type != null){
+      for (let key in attributes) {
+         if(key === "key"){ 
+            el += ` key="${attributes[key]}"`;
+            continue;
          }
-         el += ` style="${styleString}"`;
-         continue;
-      }
-      //@ts-ignore
-      if (key.startsWith("on")){
-         continue;
-      }
-      el += ` ${key}="${attributes[key]}"`;
-
-    }
-    el += ">";
+         if (key === "className") {
+            el += ` class="${attributes[key]}"`;
+            continue;
+         }
+         if (key === "style") {
+            // convert style object to string
+            let styles = attributes[key];
+            let styleString = "";
+           // convert camelCase to kebab-case
+            for (let style in styles) {
+               let kebabStyle = style.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+               styleString += `${kebabStyle}:${styles[style]};`;
+            }
+            el += ` style="${styleString}"`;
+            continue;
+         }
+         //@ts-ignore
+         if (key.startsWith("on")){
+            continue;
+         }
+         el += ` ${key}="${attributes[key]}"`;
+   
+       }
+     }
+    el += type === null ? `` : `>`
     for (let i = 0;i < children.length; i++) {
       let child = children[i];
+      console.log(child)
       if (Array.isArray(child)) {
          child.forEach((c) => {
             el += document(c);
@@ -48,6 +52,6 @@ export const document = (element: any) => {
          el += child;
       }
     }
-    el += `</${type}>`;
+    el += type ===  null ? `` : `</${type}>`
     return el;
 }

package/index.ts

@@ -76,8 +76,8 @@ export const useEffect = (callback:any, dependencies: any[]) => {
 
 export const Fragment = (props: any, children: any) => {
   return  {
-    type: "div",
-    props: props || {},
+    type: isServer ? null : "div",
+    props:{},
     children: children || [],
   }
 }
@@ -105,7 +105,8 @@ export const e = (element, props, ...children) => {
       let firstEl = instance.render({key: instance.key, children: children, ...props}); 
       instance.children = children;  
       if (!firstEl) firstEl = {type: "div", props: {key: instance.key, children: [], ...props}, children: []};
-      firstEl.props = {key: instance.key, children: children, ...props}; 
+      firstEl.props = {key: instance.key, ...props}; 
+      firstEl.children = children;
       return firstEl;
     default:
       return { type: element, props: props || {}, children: children || [] };

package/main.js

@@ -267,17 +267,16 @@ await handleFiles()
 globalThis.clients = []
 
 if (mode === 'development') {
-    const watcher = fs.watch(path.join(process.cwd() + '/app'), { recursive: true })
-    const publicWatcher = fs.watch(path.join(process.cwd() + '/public'), { recursive: true })
-    const srcWatcher = fs.watch(path.join(process.cwd() + '/src'), { recursive: true })
+    const watcher = fs.watch(path.join(process.cwd() + '/'), { recursive: true }) 
     let isBuilding = false; // Flag to track build status
 
     // Initialize a variable to hold the timeout ID
     let debounceTimeout;
 
     // Function to handle file changes with debounce
-    const handleFileChangeDebounced = async () => {
-        clearTimeout(debounceTimeout);
+    const handleFileChangeDebounced = async (change, file) => {
+        if(file.endsWith('.tsx') || file.endsWith('.jsx')){
+            clearTimeout(debounceTimeout);
         debounceTimeout = setTimeout(async () => {
             if (!isBuilding) { // Check if not already building
                 isBuilding = true; // Set build flag to true
@@ -294,12 +293,11 @@ if (mode === 'development') {
                 }
             }
         }, 500);
+        }
     };
 
-    // Event listeners with debounced handling
-    publicWatcher.on('change', handleFileChangeDebounced);
-    watcher.on('change', handleFileChangeDebounced);
-    srcWatcher.on('change', handleFileChangeDebounced); 
+    // Event listeners with debounced handling 
+    watcher.on('change', handleFileChangeDebounced); 
     let server = Bun.serve({
         port: port || 8080,
         websocket: {
@@ -321,7 +319,7 @@ if (mode === 'development') {
 
             let url = new URL(req.url)
             if (url.pathname.includes('.')) {
-                let p = url.pathname.replaceAll("%5B", "[").replaceAll("%5D", "]")
+                let p = url.pathname.replaceAll("%5B", "[").replaceAll("%5D", "]") 
                 let file = await Bun.file(path.join(process.cwd() + '/dist' + p))
                 if (!await file.exists()) return new Response('Not found', { status: 404 })
                 return new Response(await file.text(), {
@@ -343,9 +341,10 @@ if (mode === 'development') {
             }
             let p = route.pathname;
             let base = path.dirname(route.filePath)
-            base = base.replace(path.join(process.cwd() + '/app'), '')
+            base = base.replace(/\\/g, '/')
+            base = base.replace(path.join(process.cwd() + '/app').replace(/\\/g, '/'), '') 
             base = base.replace(/\\/g, '/').replace('/app', '/dist')
-            base = process.cwd() + "/dist/" + base
+            base = process.cwd() + "/dist/" + base 
             let data = await Bun.file(path.join(base, 'index.html')).text()
             if (mode == "development") {
                 return new Response(data + `

package/package.json

@@ -1,8 +1,7 @@
 {
     "name": "vaderjs",
-    "version": "1.5.3",
-    "description": "A simple and powerful JavaScript library for building modern web applications.",
-    "main": "./main.js", 
+    "version": "1.5.5",
+    "description": "A simple and powerful JavaScript library for building modern web applications.", 
     "bin": {
         "vaderjs": "./main.js"
     },