vaderjs 1.5.9 → 1.6.0

package/README.MD

@@ -39,6 +39,7 @@ Keyword folders - all files are passed from these folders to the build folder
 ```md
 1. app - used for jsx route files 
 2. public - used for anything / css / json etc
+3. Src - components utilities etc
 ```
 
 
@@ -53,4 +54,4 @@ export default defineConfig({
     hot_reload: true,
 })
 
-```
+```

package/bundler/index.js

@@ -73,6 +73,7 @@ builtCode = handleReplacements(builtCode)
 fs.writeFileSync(path.join(process.cwd(), 'dist', process.env.filePath), builtCode)
 }
 let isClass = function (element) {
+    if (!element) return false;
     return element.toString().startsWith("class");
 };
 const generatePage = async (
@@ -84,6 +85,10 @@ const generatePage = async (
     let { head } = await import(path).then((m) => m);
     let isFunction = false;
     globalThis.isServer = true;
+    if(!html) {
+        console.log(ansiColors.red(`No default export found in ${path}`))
+        process.exit(0)
+    }
     if (isClass(html)) {
         html = new html();
         html.Mounted = true;

package/examples/counter/index.jsx

@@ -0,0 +1,10 @@
+import { useState } from "vaderjs";
+export default function App() {
+    let [count, setCount] = useState(0);
+    return (
+        <div>
+            <h1>{count()}</h1>
+            <button onClick={() => setCount(count() + 1)}>Increment</button>
+        </div>
+    );
+}

package/main.js

@@ -5,35 +5,48 @@ import { Glob } from 'bun'
 const args = Bun.argv.slice(2)
 import fs from 'fs'
 import path from 'path'
-if (!fs.existsSync(process.cwd() + '/app')) {
+if (!fs.existsSync(process.cwd() + '/app') && !args.includes('init')) {
     console.error(`App directory not found in ${process.cwd()}/app`)
     process.exit(1)
 }
 if (!fs.existsSync(process.cwd() + '/public')) {
     fs.mkdirSync(process.cwd() + '/public')
 }
-if(!fs.existsSync(process.cwd() + '/src')){
+if (!fs.existsSync(process.cwd() + '/src')) {
     fs.mkdirSync(process.cwd() + '/src')
 }
-if(!fs.existsSync(process.cwd() + '/vader.config.ts')){
-    fs.writeFileSync(process.cwd() + '/vader.config.ts', 
-`
+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'
 })`)
 }
-const mode = args.includes('dev') ? 'development' : args.includes('prod') || args.includes('build') ? 'production' : null
+const mode = args.includes('dev') ? 'development' : args.includes('prod') || args.includes('build') ? 'production' : args.includes('init') ? 'init' : null
 if (!mode) {
     console.log(`
     Usage:
      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)
 }
 
+if (mode === 'init') {
+    if (fs.existsSync(process.cwd() + '/app')) {
+        console.error('App directory already exists: just run `bun vaderjs dev` to start the development server')
+        process.exit(1)
+    }
+    fs.mkdirSync(process.cwd() + '/app')  
+    fs.copyFileSync(path.join(process.cwd(), "/node_modules/vaderjs/example/counter/index.jsx"), path.join(process.cwd(), "/app/index.jsx"))
+
+    console.log('Initialized new vaderjs project: run `bun vaderjs dev` to start the development server')
+    procss.exit(1)
+}
+
 console.log(
     `VaderJS - v${require(process.cwd() + '/node_modules/vaderjs/package.json').version} 🚀
   Mode: ${mode}
@@ -42,6 +55,8 @@ console.log(
     `
 )
 
+
+console.log(ansiColors.green('Building...'))
 let start = Date.now()
 console.log(`Starting build at ${new Date().toLocaleTimeString()}`)
 let { port, host, host_provider } = require(process.cwd() + '/vader.config.ts').default
@@ -61,31 +76,31 @@ if (!fs.existsSync(process.cwd() + '/jsconfig.json')) {
 
 var bindes = []
 
-const handleReplacements = (code ) => {
+const handleReplacements = (code) => {
     let lines = code.split('\n')
     let newLines = []
     for (let line of lines) {
         let hasImport = line.includes('import')
-        
+
         if (hasImport && line.includes('.css')) {
             try {
-                 let isSmallColon = line.includes("'")
-                 let url = isSmallColon ? line.split("'")[1] : line.split('"')[1]
-                 // start from "/" not "/app" 
-                 // remvoe all ./ and ../
-                  url = url.replaceAll('./', '/').replaceAll('../', '/') 
-                  
-                 let p = path.join(process.cwd() , '/', url) 
-                 line = '';
-                 url = url.replace(process.cwd() + '/app', '')
-                 url = url.replace(/\\/g, '/')
-                 if (!bindes.includes(`<link rel="stylesheet" href="${url}">`)) {
-                     bindes.push(`
+                let isSmallColon = line.includes("'")
+                let url = isSmallColon ? line.split("'")[1] : line.split('"')[1]
+                // start from "/" not "/app" 
+                // remvoe all ./ and ../
+                url = url.replaceAll('./', '/').replaceAll('../', '/')
+
+                let p = path.join(process.cwd(), '/', url)
+                line = '';
+                url = url.replace(process.cwd() + '/app', '')
+                url = url.replace(/\\/g, '/')
+                if (!bindes.includes(`<link rel="stylesheet" href="${url}">`)) {
+                    bindes.push(`
                     <style>
                       ${fs.readFileSync(p, 'utf-8')}
                     </style>    
                     `)
-                 }
+                }
             } catch (error) {
                 console.error(error)
             }
@@ -139,7 +154,7 @@ async function generateApp() {
             style: 'nextjs'
         })
         routes.reload()
-        globalThis.routes = routes.routes 
+        globalThis.routes = routes.routes
         Object.keys(routes.routes).forEach(async (route) => {
 
             let r = routes.routes[route]
@@ -153,7 +168,7 @@ async function generateApp() {
         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}]`
+                return `${p}: route[${Object.keys(routes.match(route).params).indexOf(p) + Object.keys(routes.match(route).params).length}]`
             }).join(',') : ""}
         }
         \n${code}
@@ -205,8 +220,8 @@ async function generateApp() {
                     rewrites: []
                 }
 
-                for (let route in routes.routes) { 
-                    let { filePath, kind, name, params, pathname, query } = routes.match(route) 
+                for (let route in routes.routes) {
+                    let { filePath, kind, name, params, pathname, query } = routes.match(route)
                     let r = route
 
                     if (r.includes('[')) {
@@ -214,8 +229,8 @@ async function generateApp() {
                     }
                     if (r === '/') {
                         continue
-                    } 
-                    
+                    }
+
                     vercelData.rewrites.push({
                         source: r,
                         destination: `${path.dirname(routes.routes[route]).replace(process.cwd().replace(/\\/g, '/') + '/app', '')}/index.html`
@@ -245,13 +260,13 @@ function handleFiles() {
             }
             let glob2 = new Glob('src/**/*')
             for await (var i of glob2.scan()) {
-              var file = i 
+                var file = i
                 fs.mkdirSync(path.join(process.cwd() + '/dist', path.dirname(file)), { recursive: true })
-                 // turn jsx to js
-                if (file.includes('.jsx')) { 
+                // turn jsx to js
+                if (file.includes('.jsx')) {
                     let code = await Bun.file(file).text()
                     code = handleReplacements(code)
-                    
+
                     file = file.replace('.jsx', '.js')
                     fs.writeFileSync(path.join(process.cwd() + '/dist', file.replace('.jsx', '.js')), code)
                     await Bun.spawn({
@@ -266,7 +281,7 @@ function handleFiles() {
                             DEV: mode === 'development',
                             size: code.length / 1024,
                             filePath: file.replace('.jsx', '.js'),
-                            INPUT:  path.join(process.cwd() , file.replace('.js', '.jsx')),
+                            INPUT: path.join(process.cwd(), file.replace('.js', '.jsx')),
                         },
                         onExit({ exitCode: code }) {
                             if (code === 0) {
@@ -276,7 +291,7 @@ function handleFiles() {
                             }
                         }
                     })
-                }else if(file.includes('.ts')){
+                } else if (file.includes('.ts')) {
                     let code = await Bun.file(file).text()
                     code = handleReplacements(code)
                     file = file.replace('.ts', '.js')
@@ -294,7 +309,7 @@ function handleFiles() {
                             isTS: true,
                             size: code.length / 1024,
                             filePath: file.replace('.ts', '.js'),
-                            INPUT:  path.join(process.cwd() , file.replace('.js', '.jsx')),
+                            INPUT: path.join(process.cwd(), file.replace('.js', '.jsx')),
                         },
                         onExit({ exitCode: code }) {
                             if (code === 0) {
@@ -305,9 +320,9 @@ function handleFiles() {
                         }
                     })
                 }
-                 
+
             }
-             
+
             resolve()
         } catch (error) {
             reject(error)
@@ -318,7 +333,7 @@ await handleFiles()
 globalThis.clients = []
 
 if (mode === 'development') {
-    const watcher = fs.watch(path.join(process.cwd() + '/'), { 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
@@ -326,33 +341,33 @@ 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') ) {
-            if(file.includes('dist')) return
+        if (file.endsWith('.tsx') || file.endsWith('.jsx') || file.endsWith('.css') || file.endsWith('.ts')) {
+            if (file.includes('dist')) return
             clearTimeout(debounceTimeout);
-        debounceTimeout = setTimeout(async () => {
-            if (!isBuilding) { // Check if not already building
-                isBuilding = true; // Set build flag to true
-                try {
-                    await generateApp();
-                    await handleFiles();
-                    let t = setTimeout(() => {
-                        clients.forEach(c => {
-                            c.send('reload');
-                        });
-                        clearTimeout(t)
-                    }, 1000)
-                } catch (error) {
-                    console.error(error);
-                } finally {
-                    isBuilding = false; // Reset build flag
+            debounceTimeout = setTimeout(async () => {
+                if (!isBuilding) { // Check if not already building
+                    isBuilding = true; // Set build flag to true
+                    try {
+                        await generateApp();
+                        await handleFiles();
+                        let t = setTimeout(() => {
+                            clients.forEach(c => {
+                                c.send('reload');
+                            });
+                            clearTimeout(t)
+                        }, 1000)
+                    } catch (error) {
+                        console.error(error);
+                    } finally {
+                        isBuilding = false; // Reset build flag
+                    }
                 }
-            }
-        }, 500);
+            }, 500);
         }
     };
 
     // Event listeners with debounced handling 
-    watcher.on('change', handleFileChangeDebounced); 
+    watcher.on('change', handleFileChangeDebounced);
     let server = Bun.serve({
         port: port || 8080,
         websocket: {
@@ -374,11 +389,11 @@ 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 })
                 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,
@@ -399,9 +414,9 @@ if (mode === 'development') {
             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(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 + `
@@ -414,9 +429,9 @@ if (mode === 'development') {
             } 
             </script>
             `, {
-                   headers:{
-                      'Content-Type': 'text/html'
-                   }
+                    headers: {
+                        'Content-Type': 'text/html'
+                    }
                 })
             } else {
                 return new Response(data, {
@@ -431,4 +446,6 @@ if (mode === 'development') {
 } else {
     console.log(`Build complete in ${Date.now() - start}ms at ${new Date().toLocaleTimeString()}`)
     process.exit(0)
-}
+}
+
+console.log(ansiColors.green('Server started at http://localhost:' + port || 8080))

package/package.json

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