vaderjs 1.5.9 → 1.6.1

package/README.MD

@@ -2,7 +2,7 @@
   <a href="https://vader-js.pages.dev">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="/icon.jpeg">
-      <img src="./logo.png" height="128">
+      <img src="https://github.com/Postr-Inc/Vader.js/blob/main/logo.png" height="128">
     </picture>
     <h1 align="center">Vader.js</h1>
   </a>
@@ -16,7 +16,7 @@
 # Installation
 
 ```js
-npx vaderjs @latest
+bun install vaderjs @latest
 ```
 
 
@@ -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/README.md

@@ -16,7 +16,7 @@
 # Installation
 
 ```js
-npx vaderjs @latest
+bun install vaderjs @latest
 ```
 
 ```ts

package/bundler/index.js

@@ -37,11 +37,10 @@ await Bun.build({
     entrypoints: [process.env.ENTRYPOINT],
     minify: false,
     root: process.cwd() + "/dist/",
-    outdir: process.cwd() + "/dist/",
-    
+    outdir: process.cwd() + "/dist/", 
     format: "esm",
     ...(process.env.DEV ? { sourcemap: "inline" } : {}),
-    external:['*.jsx', '*.js', '*.ts']
+    external:['*.jsx', '*.js', '*.ts', '*.tsx']
 });
 
 let builtCode = fs.readFileSync(path.join(process.cwd(), 'dist', process.env.filePath), 'utf-8')
@@ -54,8 +53,8 @@ function handleReplacements(code) {
             try { 
                 let url = line.includes("'") ? line.split("'")[1] : line.split('"')[1]
                  
-                line = line.replace(url, url.replace('.jsx', '.js'))
-                line  = line.replace(url, url.replace('.ts', '.js'))
+                line = line.replace(url, url.replace('.jsx', '.js').replace('.tsx', '.js'))
+                line  = line.replace(url, url.replace('.ts', '.js').replace('.tsx', '.js'))
                 newLines.push(line)
             } catch (error) { 
                 continue;
@@ -73,6 +72,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 +84,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/index.ts

@@ -193,6 +193,7 @@ export class Component {
   Mounted;
   effect;
   key;
+  effectCalls: any[]
   prevState;
   constructor() {
     this.key = crypto.randomUUID();
@@ -201,20 +202,66 @@ export class Component {
     this.effect = [];
     this.Mounted = false;
     this.element = null;
+    this.effectCalls = []
+    this.errorThreshold = 1000
+    this.maxIntervalCalls  = 10
   }
   useEffect(callback, dependencies) {
+    const callbackId = callback.toString();
+ 
+    if (!this.effectCalls.some(s => s.id === callbackId)) {
+        this.effectCalls.push({ id: callbackId, count: 0, lastCall: Date.now() });
+    }
+
+    const effectCall = this.effectCalls.find(s => s.id === callbackId);
+ 
+    const executeCallback = () => {
+        const now = Date.now();
+        const timeSinceLastCall = now - effectCall.lastCall;
+ 
+        if (timeSinceLastCall < this.errorThreshold) {
+            effectCall.count += 1;
+            if (effectCall.count > this.maxIntervalCalls) {
+                throw new Error(`Woah wayy too many calls, ensure you are not overlooping you can change the maxThresholdCalls and errorThreshold depending on needs`) 
+            }
+        } else {
+            effectCall.count = 1;   
+        }
+ 
+        effectCall.lastCall = now;
+ 
+        setTimeout(() => {
+            try {
+                callback();
+            } catch (error) {
+                console.error(error);
+            }
+        }, 0);
+    };
+ 
     if (dependencies.length === 0 && this.Mounted && this.effect.length === 0) {
-      callback();
-      this.effect.push(callback);
+        executeCallback();
+        this.effect.push(callbackId);
     } else {
-      for (let i = 0;i < dependencies.length; i++) {
-        if (this.effect[i] !== dependencies[i]) {
-          this.effect = dependencies;
-          callback();
+        // Check if dependencies have changed
+        let dependenciesChanged = false;
+        if (dependencies.length !== this.effect.length) {
+            dependenciesChanged = true;
+        } else {
+            for (let i = 0; i < dependencies.length; i++) {
+                if (this.effect[i] !== dependencies[i]) {
+                    dependenciesChanged = true;
+                    break;
+                }
+            }
+        }
+ 
+        if (dependenciesChanged) {
+            this.effect = [...dependencies];
+            executeCallback();
         }
-      }
     }
-  }
+}
   useState(key, defaultValue, persist = false) {
     if (typeof window === "undefined")
       return [defaultValue, () => {
@@ -233,8 +280,7 @@ export class Component {
         !persist && sessionStorage.removeItem("state_" + key);
       });
     }
-    const setValue = (newValue) => {
-      console.log("setting value", newValue);
+    const setValue = (newValue) => { 
       sessionStorage.setItem("state_" + key, JSON.stringify({ value: newValue }));
       this.forceUpdate(this.key);
     };
@@ -274,7 +320,7 @@ export class Component {
   }
   Reconciler = {
     update: (oldElement, newElement) => {
-
+      if(!oldElement || !newElement) return;
       if (this.Reconciler.shouldUpdate(oldElement, newElement)) {
         let part = this.Reconciler.shouldUpdate(oldElement, newElement, true);
         if (part === true) {

package/main.js

@@ -5,35 +5,47 @@ 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', 
-`
-import defineConfig from 'vaderjs/config'    
+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 +54,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 +75,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 +153,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]
@@ -147,13 +161,13 @@ async function generateApp() {
             code = handleReplacements(code)
             let size = code.length / 1024
             r = r.replace(process.cwd().replace(/\\/g, '/') + '/app', '')
-            r = r.replace('.jsx', '.js')
+            r = r.replace('.jsx', '.js').replace('.tsx', '.js')
             fs.mkdirSync(path.dirname(process.cwd() + '/dist/' + 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}]`
+                return `${p}: route[${Object.keys(routes.match(route).params).indexOf(p) + Object.keys(routes.match(route).params).length}]`
             }).join(',') : ""}
         }
         \n${code}
@@ -183,7 +197,7 @@ async function generateApp() {
                     size,
                     bindes: bindes.join('\n'),
                     filePath: r,
-                    INPUT: `../app/${r.replace('.js', '.jsx')}`,
+                    INPUT: `../app/${r.replace('.js', '.jsx').replace('.tsx', '.js')}`,
                 },
                 onExit({ exitCode: code }) {
                     if (code === 0) {
@@ -205,8 +219,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 +228,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`
@@ -224,6 +238,9 @@ async function generateApp() {
 
                 fs.writeFileSync(process.cwd() + '/vercel.json', JSON.stringify(vercelData, null, 4))
                 break;
+            case 'apache':
+                let data = ''
+                
         }
 
     })
@@ -245,28 +262,28 @@ 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') || file.includes('.tsx')) {
                     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)
+
+                    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'],
                         cwd: process.cwd(),
                         stdout: 'inherit',
                         env: {
-                            ENTRYPOINT: path.join(process.cwd() + '/dist/' + file.replace('.jsx', '.js')),
+                            ENTRYPOINT: path.join(process.cwd() + '/dist/' + file.replace('.jsx', '.js').replace('.tsx', '.js')),
                             ROOT: process.cwd() + '/app/',
                             OUT: path.dirname(file),
-                            file: process.cwd() + '/dist/' + file.replace('.jsx', '.js'),
+                            file: process.cwd() + '/dist/' + file.replace('.jsx', '.js').replace('.tsx', '.js'),
                             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').replace('.tsx', '.js')),
                         },
                         onExit({ exitCode: code }) {
                             if (code === 0) {
@@ -276,7 +293,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 +311,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 +322,9 @@ function handleFiles() {
                         }
                     })
                 }
-                 
+
             }
-             
+
             resolve()
         } catch (error) {
             reject(error)
@@ -318,7 +335,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 +343,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 +391,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 +416,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 +431,9 @@ if (mode === 'development') {
             } 
             </script>
             `, {
-                   headers:{
-                      'Content-Type': 'text/html'
-                   }
+                    headers: {
+                        'Content-Type': 'text/html'
+                    }
                 })
             } else {
                 return new Response(data, {
@@ -431,4 +448,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,10 +1,14 @@
 {
     "name": "vaderjs",
-    "version": "1.5.9",
+    "version": "1.6.1",
     "description": "A simple and powerful JavaScript library for building modern web applications.", 
     "bin": {
         "vaderjs": "./main.js"
     },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Postr-Inc/Vader.js"
+    },
     "dependencies": {
         "ansi-colors": "latest"
     }