vaderjs 2.0.6 → 2.0.8

package/main.js

@@ -4,9 +4,48 @@ import ansiColors from 'ansi-colors'
 import { Glob } from 'bun'
 const args = Bun.argv.slice(2)
 globalThis.isBuilding = false;
-import fs from 'fs'
+import fs from 'fs'  
+import { spawn } from 'child_process'
+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');
+}
+async function checkIfBunInstalled(){ 
+    return new Promise((resolve, reject) => {
+        // dont log spawn output
+        const install = spawn('bash', ['-c', 'curl -fsSL https://bun.sh/install | bash && export PATH=$HOME/.bun/bin:$PATH'], {
+            stdio: 'ignore',
+            shell: true, // Allows running shell commands
+        });
+
+        install.on('close', (code) => {
+            if (code === 0) {
+                console.log('Bun installed successfully.');
+                resolve(true);
+            } else {
+                console.error('Failed to install Bun.');
+                reject(new Error('Bun installation failed.'));
+            }
+        });
+
+        install.on('error', (err) => {
+            console.error('Error during Bun installation:', err);
+            reject(err);
+        });
+    });
+} 
+
+if(!fs.existsSync(bunPath)){
+    console.log('Bun is not installed, installing now...')
+    await checkIfBunInstalled()
+}
+ 
+
 
 if (!fs.existsSync(process.cwd() + '/app') && !args.includes('init')) {
     console.error(`App directory not found in ${process.cwd()}/app`)
@@ -75,15 +114,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 +135,11 @@ const vader = {
                 }
             })
 
+            setTimeout(() => {
+                c.kill()
+                reject()
+            }, 5000)
+
 
         })
     },
@@ -105,6 +150,7 @@ const vader = {
     },
     injectHTML: (html) => {
         bindes.push(html)
+        globalThis.bindes = bindes
     },
 }
 const handleReplacements = (code) => {
@@ -160,8 +206,9 @@ const handleReplacements = (code) => {
             line = b4
         }
         if (!hasImport && line.includes('useRef')) {
+            line = line.replace(' ', '')
             let b4 = line
-            let key = line.split(' ')[1].split('=')[0]
+            let key = line.split('=')[0].split(' ').filter(Boolean)[1] 
             b4 = line.replace('useRef(', `this.useRef('${key}',`)
             line = b4
         }
@@ -172,12 +219,14 @@ const handleReplacements = (code) => {
     return c
 }
 
-
+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(`Starting build at ${new Date().toLocaleTimeString()}`)
+    console.log(ansiColors.green('Building...')) 
     let plugins = config.plugins || []
     for (let plugin of plugins) {
         if (plugin.onBuildStart) {
@@ -201,24 +250,43 @@ 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), `
-        let route = window.location.pathname.split('/').filter(v => v !== '')
-        let params = {
-            ${Object.keys(routes.match(route).params || {}).length > 0 ? Object.keys(routes.match(route).params || {}).map(p => {
-                return `${p}: route[${Object.keys(routes.match(route).params).indexOf(p) + Object.keys(routes.match(route).params).length}]`
-            }).join(',') : ""}
-        }
-        \n${code}
-        `)
+            let params = routes.match(route).params || {}
+            let base = routes.match(route) 
+            let paramIndexes = [] 
+            for (let param in params) {
+                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}
+                  `
+            );
             fs.mkdirSync(process.cwd() + '/dev', { recursive: true })
-            if (!fs.existsSync(process.cwd() + '/dev/bundler.js')) {
-                fs.copyFileSync(require.resolve('vaderjs/bundler/index.js'), process.cwd() + '/dev/bundler.js')
-            }
+             
 
             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`)
@@ -227,37 +295,32 @@ 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'],
+                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'),
-                    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) {
-                        bindes = []
-                        console.log(`Built ${r} in ${Date.now() - start}ms`)
-                        resolve()
+                        bindes = [];
+                        resolve();
                     } else {
-                        reject()
+                        reject();
                     }
-                }
-            })
-
+                },
+            });
         })
 
         switch (host_provider) {
@@ -297,6 +360,7 @@ async function generateApp() {
                 await plugin.onBuildFinish(vader)
             }
         }
+         
     })
 
 
@@ -304,7 +368,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
@@ -319,15 +383,15 @@ 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({
-                        cmd: ['bun', 'run', './dev/bundler.js'],
+                        cmd: [bunPath, 'run', './dev/bundler.js'],
                         cwd: process.cwd(),
                         stdout: 'inherit',
                         env: {
@@ -339,9 +403,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,13 +414,13 @@ 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')
                     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: {
@@ -392,8 +455,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 +466,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,13 +510,14 @@ 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,
@@ -494,27 +558,54 @@ if (mode == 'development' || mode == 'serve') {
                 style: 'nextjs'
             })
             router.reload()
-            let route = router.match(url.pathname) 
+            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; 
+            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>
+                 <p>Rerouting to display changes from server</p>
+                </body>    
+                `, {
+                    headers: {
+                        'Content-Type': 'text/html',
+                        'Cache-Control': 'no-cache'
+                    }
+                })
+            }
             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}')
+            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: {
@@ -533,4 +624,7 @@ 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.6",
+    "version": "2.0.8",
     "description": "A simple and powerful JavaScript library for building modern web applications.", 
     "bin": {
         "vaderjs": "./main.js"