vaderjs 2.0.2 → 2.0.4

package/index.ts

@@ -205,11 +205,11 @@ interface SwitchProps {
 }
 
 // make children optional
-export function Switch({children}, key) {
+export function Switch({ children = [] }: SwitchProps) {
   for (let child of children) {
     if (child.props.when) { 
       return { type: "div", props: {
-        idKey:  key || crypto.randomUUID()
+        idKey: crypto.randomUUID()
       }, children: [child] };
     }
   }
@@ -310,9 +310,8 @@ export class Component {
   useEffect(callback, dependencies = []) {
     const callbackId = callback.toString(); // Unique ID based on callback string representation
 
-    // Ensure effect is tracked only once per callback function
     if (!this.effectCalls.some((effect) => effect.id === callbackId)) {
-        // Initialize the effect call tracking
+        // Add the initial effect call if it doesn't exist
         this.effectCalls.push({
             id: callbackId,
             count: 0,
@@ -324,7 +323,7 @@ export class Component {
 
     const effectCall = this.effectCalls.find((effect) => effect.id === callbackId);
 
-    const executeCallback = async () => {
+    const executeCallback = () => {
         const now = Date.now();
         const timeSinceLastCall = now - effectCall.lastCall;
 
@@ -342,21 +341,22 @@ export class Component {
 
         effectCall.lastCall = now;
 
-        try {
-            // Wait for async callback to finish before continuing
-            await callback();
-            effects.push(callbackId); // Track executed effects after callback completion
-        } catch (error) {
-            console.error("Effect callback failed:", error);
-        }
+        setTimeout(() => {
+            try {
+                effects.push(callbackId); // Track executed effects
+                callback(); // Execute the callback
+            } catch (error) {
+                console.error(error);
+            }
+        }, 0);
     };
 
     // First time: Run the effect and mark it as run
     if (!effectCall.hasRun && dependencies.length === 0) {
-        executeCallback(); // Run async callback
-        effectCall.hasRun = true;
-        effectCall.dependencies = dependencies;
-        return;
+      executeCallback();
+      effectCall.hasRun = true;
+      effectCall.dependencies = dependencies;
+      return;
     }
 
     // If there are no dependencies, do nothing after the first run
@@ -364,7 +364,7 @@ export class Component {
         return;
     }
 
-    // Check if dependencies have changed by deep comparison (improve this if necessary)
+    // Check if dependencies have changed
     let dependenciesChanged = false;
     for (let i = 0; i < dependencies.length; i++) {
         const previousDependencies = effectCall.dependencies || [];
@@ -378,14 +378,13 @@ export class Component {
 
     // If dependencies have changed, run the effect and update dependencies
     if (dependenciesChanged) {
-        executeCallback(); // Run async callback
+        executeCallback();
         effectCall.dependencies = dependencies;
     }
 }
 
-
   
-  useState(key, defaultValue, persist = false) {
+   useState(key, defaultValue, persist = false) {
     let value = this.state[key] || defaultValue;
     if(value === "true" || value === "false") {
       value = JSON.parse(value);
@@ -404,9 +403,7 @@ export class Component {
         sessionStorage.setItem(key, JSON.stringify({ value: newValue }));
       }
       this.forceUpdate(this.key);
-    };
-    value =  typeof value === "boolean" ?  value === "true" : value;
-     
+    }; 
     return [value, setValue];
   }
   useFetch(url, options) {

package/main.js

@@ -5,8 +5,16 @@ import { Glob } from 'bun'
 const args = Bun.argv.slice(2)
 globalThis.isBuilding = false;
 import fs from 'fs'
+import { platform } from 'os'
 import path from 'path'
 
+let bunPath = 'bun'; // Default for Linux/Mac
+if (platform() === 'win32') {
+    bunPath = 'bun'; // Bun path for Windows
+} else {
+    bunPath = path.resolve(process.env.HOME || process.env.USERPROFILE, '.bun', 'bin', 'bun');
+}
+
 
 if (!fs.existsSync(process.cwd() + '/app') && !args.includes('init')) {
     console.error(`App directory not found in ${process.cwd()}/app`)
@@ -21,21 +29,21 @@ if (!fs.existsSync(process.cwd() + '/src')) {
 if (!fs.existsSync(process.cwd() + '/vader.config.ts')) {
     fs.writeFileSync(process.cwd() + '/vader.config.ts',
         `import defineConfig from 'vaderjs/config'
-export default  defineConfig({
-    port: 8080,
-    host_provider: 'apache'
+export default defineConfig({
+ port: 8080,
+ host_provider: 'apache'
 })`)
 }
 var config = require(process.cwd() + '/vader.config.ts').default
 const mode = args.includes('dev') ? 'development' : args.includes('prod') || args.includes('build') ? 'production' : args.includes('init') ? 'init' : args.includes('serve') ? 'serve' : null;
 if (!mode) {
     console.log(`
-    Usage:
-     bun vaderjs serve - Start the server
-     bun vaderjs dev - Start development server output in dist/
-     bun vaderjs prod - Build for production output in dist/
-     bun vaderjs init - Initialize a new vaderjs project
-    `)
+ Usage:
+ bun vaderjs serve - Start the server
+ bun vaderjs dev - Start development server output in dist/
+ bun vaderjs prod - Build for production output in dist/
+ bun vaderjs init - Initialize a new vaderjs project
+ `)
     process.exit(1)
 }
 
@@ -52,11 +60,11 @@ if (mode === 'init') {
 
 console.log(
     `VaderJS - v${require(process.cwd() + '/node_modules/vaderjs/package.json').version} 🚀
-  Mode: ${mode}
-  SSR: ${require(process.cwd() + '/vader.config.ts').default.ssr ? 'Enabled' : 'Disabled'}
-  PORT: ${require(process.cwd() + '/vader.config.ts').default.port || 8080}
-  ${mode == 'serve' ? `SSL: ${require(process.cwd() + '/vader.config.ts').default?.ssl?.enabled ? 'Enabled' : 'Disabled'} ` : ``}
-    `
+ Mode: ${mode}
+ SSR: ${require(process.cwd() + '/vader.config.ts').default.ssr ? 'Enabled' : 'Disabled'}
+ PORT: ${require(process.cwd() + '/vader.config.ts').default.port || 8080}
+ ${mode == 'serve' ? `SSL: ${require(process.cwd() + '/vader.config.ts').default?.ssl?.enabled ? 'Enabled' : 'Disabled'} ` : ``}
+ `
 )
 
 
@@ -84,7 +92,7 @@ const vader = {
     },
     runCommand: (cmd) => {
         return new Promise((resolve, reject) => {
-           let c =  Bun.spawn(cmd, {
+            let c = Bun.spawn(cmd, {
                 stdout: 'inherit',
                 cwd: process.cwd(),
                 onExit({ exitCode: code }) {
@@ -134,10 +142,10 @@ const handleReplacements = (code) => {
                 url = url.replace(/\\/g, '/')
                 if (!bindes.includes(`<link rel="stylesheet" href="${url}">`)) {
                     bindes.push(`
-                    <style>
-                      ${fs.readFileSync(p, 'utf-8')}
-                    </style>
-                    `)
+ <style>
+ ${fs.readFileSync(p, 'utf-8')}
+ </style>
+ `)
                 }
             } catch (error) {
                 console.error(error)
@@ -169,7 +177,7 @@ const handleReplacements = (code) => {
         if (!hasImport && line.includes('useRef')) {
             line = line.replace(' ', '')
             let b4 = line
-            let key = line.split('=')[0].split(' ').filter(Boolean)[1] 
+            let key = line.split('=')[0].split(' ').filter(Boolean)[1]
             b4 = line.replace('useRef(', `this.useRef('${key}',`)
             line = b4
         }
@@ -180,14 +188,14 @@ const handleReplacements = (code) => {
     return c
 }
 
-if (!fs.existsSync(process.cwd() + '/dev/bundler.js')) { 
+if (!fs.existsSync(process.cwd() + '/dev/bundler.js')) {
     fs.mkdirSync(process.cwd() + '/dev', { recursive: true })
     fs.copyFileSync(require.resolve('vaderjs/bundler/index.js'), process.cwd() + '/dev/bundler.js')
 }
 let start = Date.now()
 async function generateApp() {
     globalThis.isBuilding = true;
-    console.log(ansiColors.green('Building...')) 
+    console.log(ansiColors.green('Building...'))
     let plugins = config.plugins || []
     for (let plugin of plugins) {
         if (plugin.onBuildStart) {
@@ -214,40 +222,40 @@ async function generateApp() {
             code = handleReplacements(code)
             let size = code.length / 1024
             r = r.replace(process.cwd().replace(/\\/g, '/') + '/app', '')
-            r = r.replace('.jsx', '.js').replace('.tsx', '.js') 
+            r = r.replace('.jsx', '.js').replace('.tsx', '.js')
             fs.mkdirSync(path.join(process.cwd() + '/dist', path.dirname(r)), { recursive: true })
             let params = routes.match(route).params || {}
-            let base = routes.match(route) 
-            let paramIndexes = [] 
+            let base = routes.match(route)
+            let paramIndexes = []
             for (let param in params) {
-                let  routes = base.pathname.split('/')
+                let routes = base.pathname.split('/')
                 let index = routes.indexOf('[' + param + ']')
                 paramIndexes.push(index)
-            } 
- 
+            }
+
             // dont return
-            
+
             fs.writeFileSync(
                 process.cwd() + '/dist/' + path.dirname(r) + '/' + path.basename(r),
                 `
-                      let route = window.location.pathname.split('/').filter(Boolean) 
-                      let params = {
-                        // get index tehn do route[index]
-                        ${Object.keys(params).map((param, i) => {
-                             if (paramIndexes[i] !== -1) {  
-                                var r_copy = r;
-                                r_copy = r_copy.split('/').filter(Boolean)
-                                var index = paramIndexes[i] - 1
-                                return `${param}: route[${index}]`
-                             }
-                            }).join(',\n')}
-                      }
-              
-                      \n${code}
-                  `
+ let route = window.location.pathname.split('/').filter(Boolean) 
+ let params = {
+ // get index tehn do route[index]
+ ${Object.keys(params).map((param, i) => {
+                    if (paramIndexes[i] !== -1) {
+                        var r_copy = r;
+                        r_copy = r_copy.split('/').filter(Boolean)
+                        var index = paramIndexes[i] - 1
+                        return `${param}: route[${index}]`
+                    }
+                }).join(',\n')}
+ }
+ 
+ \n${code}
+ `
             );
             fs.mkdirSync(process.cwd() + '/dev', { recursive: true })
-             
+
 
             if (!fs.existsSync(process.cwd() + '/dev/readme.md')) {
                 fs.writeFileSync(process.cwd() + '/dev/readme.md', `# Please do not edit the bundler.js file in the dev directory. This file is automatically generated by the bundler. \n\n`)
@@ -257,14 +265,14 @@ async function generateApp() {
                 loader: 'ts',
             }).transformSync(await Bun.file(require.resolve('vaderjs')).text()))
             Bun.spawn({
-                cmd: ['bun', 'run', './dev/bundler.js'],
+                cmd: [bunPath, 'run', './dev/bundler.js'],
                 cwd: process.cwd(),
                 stdout: 'inherit',
                 env: {
-                    ENTRYPOINT: path.join(process.cwd() + '/dist/' + path.dirname(r) + '/' + path.basename(r)),
-                    ROOT: process.cwd() + '/app/',
+                    ENTRYPOINT: path.join(process.cwd(), 'dist', path.dirname(r), path.basename(r)),
+                    ROOT: path.join(process.cwd(), 'app/'),
                     OUT: path.dirname(r),
-                    file: process.cwd() + '/dist/' + path.dirname(r) + '/' + path.basename(r),
+                    file: path.join(process.cwd(), 'dist', path.dirname(r), path.basename(r)),
                     DEV: mode === 'development',
                     size,
                     bindes: bindes.join('\n'),
@@ -275,14 +283,13 @@ async function generateApp() {
                 },
                 onExit({ exitCode: code }) {
                     if (code === 0) {
-                        bindes = [] 
-                        resolve()
+                        bindes = [];
+                        resolve();
                     } else {
-                        reject()
+                        reject();
                     }
-                }
-            })
-
+                },
+            });
         })
 
         switch (host_provider) {
@@ -322,7 +329,7 @@ async function generateApp() {
                 await plugin.onBuildFinish(vader)
             }
         }
-         
+
     })
 
 
@@ -330,7 +337,7 @@ async function generateApp() {
 
 function handleFiles() {
     return new Promise(async (resolve, reject) => {
-        try { 
+        try {
             let glob = new Glob('public/**/*')
             for await (var i of glob.scan()) {
                 let file = i
@@ -353,7 +360,7 @@ function handleFiles() {
                     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({
-                        cmd: ['bun', 'run', './dev/bundler.js'],
+                        cmd: [bunPath, 'run', './dev/bundler.js'],
                         cwd: process.cwd(),
                         stdout: 'inherit',
                         env: {
@@ -382,7 +389,7 @@ function handleFiles() {
                     file = file.replace('.ts', '.js')
                     fs.writeFileSync(path.join(process.cwd() + '/dist', file.replace('.ts', '.js')), code)
                     await Bun.spawn({
-                        cmd: ['bun', 'run', './dev/bundler.js'],
+                        cmd: [bunPath, 'run', './dev/bundler.js'],
                         cwd: process.cwd(),
                         stdout: 'inherit',
                         env: {
@@ -428,10 +435,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
@@ -472,12 +479,12 @@ 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') {
@@ -530,17 +537,17 @@ if (mode == 'development' || mode == 'serve') {
             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'))){
+            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>
-                 <p>Rerouting to display changes from server</p>
-                </body>    
-                `, {
+ <html>
+ <head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+ <meta http-equiv="refresh" content="5">
+ </head>
+ <body>
+ <p>Rerouting to display changes from server</p>
+ </body> 
+ `, {
                     headers: {
                         'Content-Type': 'text/html',
                         'Cache-Control': 'no-cache'
@@ -550,26 +557,26 @@ if (mode == 'development' || mode == 'serve') {
             let data = await Bun.file(path.join(base, 'index.html')).text()
             if (mode == "development") {
                 return new Response(data + `
-            <script>
-            let ws = new WebSocket(\`\${location.protocol === 'https:' ? 'wss' : 'ws'}://\${location.host}\`)
-            ws.onmessage = (e) => {
-                if(e.data === 'reload'){
-                    console.log('Reloading to display changes from server')
-                    window.location.reload()
-                }
-            }
-            ws.onopen = () => {
-                console.log('Connected to hmr server')
-            }
-            
-            ws.onclose = () => {
-                // try to reconnect
-                 console.log('Reconnecting to hmr server')
-                 ws = new WebSocket(\`\${location.protocol === 'https:' ? 'wss' : 'ws'}://\${location.host}\`)    
-            }
-            
-            </script>
-            `, {
+ <script>
+ let ws = new WebSocket(\`\${location.protocol === 'https:' ? 'wss' : 'ws'}://\${location.host}\`)
+ ws.onmessage = (e) => {
+ if(e.data === 'reload'){
+ console.log('Reloading to display changes from server')
+ window.location.reload()
+ }
+ }
+ ws.onopen = () => {
+ console.log('Connected to hmr server')
+ }
+ 
+ ws.onclose = () => {
+ // try to reconnect
+ console.log('Reconnecting to hmr server')
+ ws = new WebSocket(\`\${location.protocol === 'https:' ? 'wss' : 'ws'}://\${location.host}\`) 
+ }
+ 
+ </script>
+ `, {
                     headers: {
                         'Content-Type': 'text/html'
                     }
@@ -587,6 +594,3 @@ if (mode == 'development' || mode == 'serve') {
 
     console.log(ansiColors.green('Server started at http://localhost:' + port || 8080))
 }
-
-
- 

package/package.json

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