vaderjs 1.8.0 → 1.8.1

package/index.ts

@@ -79,15 +79,15 @@ export const A = (props: {
   /**
   * @description Set the elements classlist
   */
-  class: string;
+  className?: string;
   /**
   * @description Once clicked send user to a different link
   */
-  href: string;
-  style: string;
-  openInNewTab: boolean
-  onClick: () => void;
-  onChange: () => void;
+  href?: string;
+  style?: string;
+  openInNewTab?: boolean
+  onClick?: () => void;
+  onChange?: () => void;
 }, children: any) => {
   function handleClick(e) {
     e.preventDefault();
@@ -95,9 +95,7 @@ export const A = (props: {
       window.open(props.href, "_blank");
       return void 0;
     }
-    window.history.pushState({}, "", props.href);
-    window.dispatchEvent(new PopStateEvent("popstate"));
-    window.location.reload();
+    window.location.href = props.href;
     return void 0;
   }
   return e("a", { ...props, onClick: handleClick }, props.children);
@@ -112,6 +110,14 @@ export const Fragment = (props: any, children: any) => {
   }
 }
 
+if(typeof window !== "undefined") {
+  window.history.back = () => {
+    window.history.go(-1);
+  }
+  window.history.forward = () => {
+    window.history.go(1);
+  }
+}
 globalThis.Fragment = Fragment;
 
 /**
@@ -153,6 +159,12 @@ export const e = (element, props, ...children) => {
       if (el.type !== "head") {
         el.props = { idKey: crypto.randomUUID(), ...el.props };
       }
+
+      // if element == false return empty string
+      if (el.type === false) {
+        return "";
+      }
+
       return el;
   }
 };
@@ -166,9 +178,14 @@ export const e = (element, props, ...children) => {
   */
 
 
-export function Switch({ children }) {
+interface SwitchProps {
+  children: any[] | any;
+}
+
+// make children optional
+export function Switch({ children = [] }: SwitchProps) {
   for (let child of children) {
-    if (child.props.when) {
+    if (child && child.props && child.props.when) {
       return child;
     }
   }
@@ -625,7 +642,7 @@ export class Component {
       } else if (typeof child === "object") {
         // Nested object children
         el.appendChild(this.parseToElement(child));
-      } else if (child !== null && child !== undefined) {
+      } else if (child !== null && child !== undefined && child !== false) {
         // Text nodes
         el.appendChild(document.createTextNode(child));
       }

package/main.js

@@ -75,15 +75,16 @@ if (!fs.existsSync(process.cwd() + '/jsconfig.json')) {
     await Bun.write(process.cwd() + '/jsconfig.json', JSON.stringify(json, null, 4))
 }
 
-var bindes = []
+globalThis.bindes = []
 var fnmap = []
 const vader = {
+    isDev: mode === 'development',
     onFileChange: (file, cb) => {
         fs.watch(file, cb)
     },
     runCommand: (cmd) => {
         return new Promise((resolve, reject) => {
-            Bun.spawn(cmd, {
+           let c =  Bun.spawn(cmd, {
                 stdout: 'inherit',
                 cwd: process.cwd(),
                 onExit({ exitCode: code }) {
@@ -95,6 +96,11 @@ const vader = {
                 }
             })
 
+            setTimeout(() => {
+                c.kill()
+                reject()
+            }, 5000)
+
 
         })
     },
@@ -105,6 +111,7 @@ const vader = {
     },
     injectHTML: (html) => {
         bindes.push(html)
+        globalThis.bindes = bindes
     },
 }
 const handleReplacements = (code) => {
@@ -294,6 +301,7 @@ async function generateApp() {
                 await plugin.onBuildFinish(vader)
             }
         }
+         
     })
 
 
@@ -444,90 +452,106 @@ if (mode === 'development') {
 else if (mode == 'production') {
     await handleFiles()
     await generateApp()
+     
+    console.log(`Build complete in ${Date.now() - start}ms at ${new Date().toLocaleTimeString()}`);
 }
 else {
     if (isBuilding) console.log(`Build complete in ${Date.now() - start}ms at ${new Date().toLocaleTimeString()}`);
-
-}
-
-
-if (mode == 'development' || mode == 'serve') {
-    let server = Bun.serve({
-        port: port || 8080,
-        websocket: {
-            open(ws) {
-                globalThis.clients.push(ws)
-                ws.send('Connected')
-            },
-            message(ws, message) {
-                globalThis.clients.forEach(c => {
-                    c.send(message)
-                })
+    if (mode == 'development' || mode == 'serve') {
+        let server = Bun.serve({
+            port: port || 8080,
+            websocket: {
+                open(ws) {
+                    globalThis.clients.push(ws)
+                    ws.send('Connected')
+                },
+                message(ws, message) {
+                    globalThis.clients.forEach(c => {
+                        c.send(message)
+                    })
+                },
+    
             },
-
-        },
-        async fetch(req, res) {
-            if (res.upgrade(req)) {
-                return new Response('Upgraded', { status: 101 })
-            }
-
-            let url = new URL(req.url)
-            if (url.pathname.includes('.')) {
-                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 })
-                let imageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp', 'image/tiff', 'image/bmp', 'image/ico', 'image/cur', 'image/jxr', 'image/jpg']
-
-                return new Response(imageTypes.includes(file.type) ? await file.arrayBuffer() : await file.text(), {
-                    headers: {
-                        'Content-Type': file.type,
-                        'Cache-Control': imageTypes.includes(file.type) ? 'max-age=31536000' : 'no-cache',
-                        'Access-Control-Allow-Origin': '*'
-                    }
-                })
-            }
-            let router = new Bun.FileSystemRouter({
-                dir: process.cwd() + '/app',
-                style: 'nextjs'
-            })
-            router.reload()
-            let route = router.match(url.pathname)
-            if (!route) {
-                return new Response('Not found', { status: 404 })
-            }
-            let p = route.pathname;
-            let base = path.dirname(route.filePath)
-            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
-            let data = await Bun.file(path.join(base, 'index.html')).text()
-            if (mode == "development") {
-                return new Response(data + `
-            <script>
-            let ws = new WebSocket('ws://localhost:${server.port}')
-            ws.onmessage = (e) => {
-                if(e.data === 'reload'){
-                    console.log('Reloading to display changes from server')
-                    window.location.reload()
+            async fetch(req, res) {
+                if (res.upgrade(req)) {
+                    return new Response('Upgraded', { status: 101 })
                 }
-            }
-            </script>
-            `, {
-                    headers: {
-                        'Content-Type': 'text/html'
-                    }
+    
+                let url = new URL(req.url)
+                if (url.pathname.includes('.')) {
+                    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 })
+                    let imageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp', 'image/tiff', 'image/bmp', 'image/ico', 'image/cur', 'image/jxr', 'image/jpg']
+    
+                    return new Response(imageTypes.includes(file.type) ? await file.arrayBuffer() : await file.text(), {
+                        headers: {
+                            'Content-Type': file.type,
+                            'Cache-Control': imageTypes.includes(file.type) ? 'max-age=31536000' : 'no-cache',
+                            'Access-Control-Allow-Origin': '*'
+                        }
+                    })
+                }
+                let router = new Bun.FileSystemRouter({
+                    dir: process.cwd() + '/app',
+                    style: 'nextjs'
                 })
-            } else {
-                return new Response(data, {
-                    headers: {
-                        'Content-Type': 'text/html'
+                router.reload()
+                let route = router.match(url.pathname)
+                if (!route) {
+                    return new Response('Not found', { status: 404 })
+                }
+                let p = route.pathname;
+                let base = path.dirname(route.filePath)
+                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
+                if(!fs.existsSync(path.join(base, 'index.html'))){
+                    return new Response(`
+                    <html>
+                    <head>
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+                    <meta http-equiv="refresh" content="5">
+                    </head>
+                    <body>
+                    <h1>404 Not Found</h1>
+                    <p>Route not found</p>
+                    </body>    
+                    `, { status: 404 }, {
+                        headers: {
+                            'Content-Type': 'text/html'
+                        }
+                    })
+                }
+                let data = await Bun.file(path.join(base, 'index.html')).text()
+                if (mode == "development") {
+                    return new Response(data + `
+                <script>
+                let ws = new WebSocket('ws://localhost:${server.port}')
+                ws.onmessage = (e) => {
+                    if(e.data === 'reload'){
+                        console.log('Reloading to display changes from server')
+                        window.location.reload()
                     }
-                })
+                }
+                </script>
+                `, {
+                        headers: {
+                            'Content-Type': 'text/html'
+                        }
+                    })
+                } else {
+                    return new Response(data, {
+                        headers: {
+                            'Content-Type': 'text/html'
+                        }
+                    })
+                }
+    
             }
-
-        }
-    })
-
-    console.log(ansiColors.green('Server started at http://localhost:' + port || 8080))
+        })
+    
+        console.log(ansiColors.green('Server started at http://localhost:' + port || 8080))
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vaderjs",
-    "version": "1.8.0",
+    "version": "1.8.1",
     "description": "A simple and powerful JavaScript library for building modern web applications.", 
     "bin": {
         "vaderjs": "./main.js"

package/plugins/tailwind.ts

@@ -47,15 +47,18 @@ export default {
         }else{
            initTailwind()
            
-           vader.onFileChange('tailwind.config.js', async () => {
+           if(vader.isDev){
+            vader.onFileChange('tailwind.config.js', async () => {
                 console.log('Rebuilding TailwindCSS...')
                 await vader.runCommand(['bun', 'run', 'postcss',  './public/styles.css', '-o', 'dist/public/tailwind.css'])
                 console.log('TailwindCSS rebuilt successfully!')
            }) 
+           }
            await vader.runCommand(['bun', 'run', 'postcss', './public/styles.css', '-o', 'dist/public/tailwind.css']) 
            vader.injectHTML(`<style>${fs.readFileSync(path.resolve(process.cwd(), 'dist/public/tailwind.css'))}</style>`)
         }  
         
+        return
     },
     onBuildFinish: async (vader) => {
         console.log('TailwindCSS plugin finished building')