vaderjs 1.7.9 → 1.8.1

package/bundler/index.js

@@ -93,7 +93,7 @@ const handleReplacements = (code) => {
 
       let key = line.split(',')[0].split('[')[1].replace(' ', '');
 
-      let updatedLine = line.replace(/\buseState\d*\(/, `this.useState('${key + Math.random()}',`);
+      let updatedLine = line.replace(/\buseState\d*\(/, `this.useState('${key}',`);
 
       line = updatedLine; 
     }
@@ -103,7 +103,7 @@ const handleReplacements = (code) => {
 
       let key = line.split(',')[0].split('[')[1].replace(' ', '');
 
-      let updatedLine = line.replace(/\buseAsyncState\d*\(/, `this.useAsyncState('${key + Math.random()}',`);
+      let updatedLine = line.replace(/\buseAsyncState\d*\(/, `this.useAsyncState('${key}',`);
 
       line = updatedLine; 
     }
@@ -191,7 +191,7 @@ const generatePage = async (
         import c from '${process.env.filePath}'
         import {render, e} from '/src/vader/index.js'
         window.e = e
-        render(c, document.body)
+        render(c, document.body.firstChild)
       </script> 
             `
   );

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) => {
@@ -201,9 +208,9 @@ async function generateApp() {
 
             let r = routes.routes[route]
             let code = await Bun.file(r).text()
+            code = handleReplacements(code)
             let size = code.length / 1024
             r = r.replace(process.cwd().replace(/\\/g, '/') + '/app', '')
-            var beforeR = r
             r = r.replace('.jsx', '.js').replace('.tsx', '.js') 
             fs.mkdirSync(path.join(process.cwd() + '/dist', path.dirname(r)), { recursive: true })
             fs.writeFileSync(process.cwd() + '/dist/' + path.dirname(r) + '/' + path.basename(r), `
@@ -227,7 +234,6 @@ async function generateApp() {
             fs.writeFileSync(process.cwd() + '/dist/src/vader/index.js', await new Bun.Transpiler({
                 loader: 'ts',
             }).transformSync(await Bun.file(require.resolve('vaderjs')).text()))
-
             Bun.spawn({
                 cmd: ['bun', 'run', './dev/bundler.js'],
                 cwd: process.cwd(),
@@ -240,12 +246,10 @@ async function generateApp() {
                     DEV: mode === 'development',
                     size,
                     bindes: bindes.join('\n'),
-                    isTs: beforeR.endsWith(".tsx"),
                     filePath: r,
-
-                    isJsx: beforeR.endsWith('.tsx') || beforeR.endsWith(".jsx"),
                     isAppFile: true,
-                    INPUT: `../app/${beforeR}`,
+                    isJsx: true,
+                    INPUT: `../app/${r.replace('.js', '.jsx').replace('.tsx', '.js')}`,
                 },
                 onExit({ exitCode: code }) {
                     if (code === 0) {
@@ -297,6 +301,7 @@ async function generateApp() {
                 await plugin.onBuildFinish(vader)
             }
         }
+         
     })
 
 
@@ -305,6 +310,7 @@ async function generateApp() {
 function handleFiles() {
     return new Promise(async (resolve, reject) => {
         try {
+            console.log(Glob)
             let glob = new Glob('public/**/*')
             for await (var i of glob.scan()) {
                 let file = i
@@ -319,11 +325,11 @@ function handleFiles() {
                 var file = i
                 fs.mkdirSync(path.join(process.cwd() + '/dist', path.dirname(file)), { recursive: true })
                 // turn jsx to js
-                if (file.endsWith('.jsx') || file.endsWith('.tsx')) {
+                if (file.includes('.jsx') || file.includes('.tsx')) {
                     let code = await Bun.file(file).text()
 
                     code = handleReplacements(code)
-                    var url = file
+
                     file = file.replace('.jsx', '.js').replace('.tsx', '.js')
                     fs.writeFileSync(path.join(process.cwd() + '/dist', file.replace('.jsx', '.js').replace('.tsx', '.js')), code)
                     await Bun.spawn({
@@ -339,9 +345,8 @@ function handleFiles() {
                             DEV: mode === 'development',
                             size: code.length / 1024,
                             filePath: file.replace('.jsx', '.js'),
-                            isJsx: url.endsWith('.tsx') || url.endsWith(".jsx"),
-                            isAppFile: false,
-                            INPUT: path.join(process.cwd(), url),
+                            isTs: file.includes('.tsx'),
+                            INPUT: path.join(process.cwd(), file.replace('.js', '.jsx').replace('.tsx', '.js')),
                         },
                         onExit({ exitCode: code }) {
                             if (code === 0) {
@@ -351,7 +356,7 @@ function handleFiles() {
                             }
                         }
                     })
-                } else if (file.endsWith('.ts')) {
+                } else if (file.includes('.ts')) {
                     let code = await Bun.file(file).text()
                     code = handleReplacements(code)
                     file = file.replace('.ts', '.js')
@@ -392,8 +397,8 @@ function handleFiles() {
 globalThis.clients = []
 
 if (mode === 'development') {
-    await handleFiles()
     await generateApp()
+    await handleFiles()
     const watcher = fs.watch(path.join(process.cwd() + '/'), { recursive: true })
     let isBuilding = false; // Flag to track build status
 
@@ -403,10 +408,10 @@ if (mode === 'development') {
     // Function to handle file changes with debounce
     const handleFileChangeDebounced = async (change, file) => {
         if (file.endsWith('.tsx') || file.endsWith('.jsx') || file.endsWith('.css') || file.endsWith('.ts')
-            && !file.includes('node_module')
+        && !file.includes('node_module')
         ) {
             // delete files cache
-            if (file.endsWith('vader.config.ts')) {
+            if (file.endsWith('vader.config.ts')){
                 delete require.cache[require.resolve(process.cwd() + '/vader.config.ts')]
 
                 config = require(process.cwd() + '/vader.config.ts').default
@@ -447,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$1');
-            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.7.9",
+    "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')

package/plugins/tailwindcss/index.ts

@@ -1,72 +0,0 @@
-//@ts-nocheck
-import fs from 'fs'
-import path from 'path'
-function checkIfTailwindInstalled() {
-    try {
-        //@ts-ignore
-        require.resolve('tailwindcss')
-        return true
-    } catch (e) {
-        return false
-    }
-}
-
-function initTailwind() {
-    const tailwindConfig = path.resolve(process.cwd(), 'tailwind.config.js')
-    const postcssConfig = path.resolve(process.cwd(), 'postcss.config.js')
-    if(!fs.existsSync(path.join(process.cwd(), '/public/styles.css'))){
-
-        fs.writeFileSync(path.join(process.cwd(), '/public/styles.css'), `
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-        `)
-    }
-    if (!fs.existsSync(tailwindConfig)) {
-        fs.writeFileSync(postcssConfig, `module.exports = {
-            plugins: {
-              tailwindcss: {},
-              autoprefixer: {},
-              }
-              }`)
-
-        fs.writeFileSync(tailwindConfig, `/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./src/**/*.{html,js,jsx,ts,tsx}', './app/**/*.{html,js,jsx,ts,tsx}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}`)
-
-}
-
-}
-
-
-export default {
-    name: 'tailwindcss',
-    description: 'TailwindCSS plugin for Vader.js',
-    version: '0.0.1',
-    onBuildStart: async (vader) => {
-        if (!checkIfTailwindInstalled()) {
-            console.error('TailwindCSS is not installed. Please install it using `bun install  tailwindcss postcss-cli autoprefixer`')
-            process.exit(1)
-        }else{
-           initTailwind()
-
-           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>`)
-        }
-
-    },
-    onBuildFinish: async (vader) => {
-        console.log('TailwindCSS plugin finished building')
-    },
-
-}