vaderjs 1.4.4 → 1.4.6

package/index.ts

@@ -1,18 +1,43 @@
+//@ts-nocheck
 let isClassComponent = function(element) {
   return element.toString().startsWith("class");
 };
 
+const memoizes = new Map();
+//@ts-ignore
+ 
 declare global {
   interface Window {
     onbeforeunload: any;
     localStorage: any;
     sessionStorage: any;
+    state: any;
   } 
   const genKey: any; 
   let isServer: boolean;
+  /**
+   * @description - The params object is used to store the query parameters of the current URL
+   * @example
+   * // URL: https://example.com?name=John
+   * console.log(params.name) // John
+   * @example
+   * // URL: https://example.com/:name/:age
+   * // GO: https://example.com/John/20
+   * console.log(params.name) // John
+   * console.log(params.age) // 20
+   */
+  let params:  { [key: string]: string };
 }
 //@ts-ignore
 globalThis.isServer = typeof window === "undefined";
+//@ts-ignore
+globalThis.params = {
+  [Symbol.iterator]: function* () {
+    for (const key in this) {
+      yield [key, this[key]];
+    }
+  },
+};
  
 
 /**
@@ -41,6 +66,17 @@ export const useEffect = (callback:any, dependencies: any[]) => {
   }
 }
 
+function memoizeComponent(Component: any) {
+  let key = Component.toString();
+  if (memoizes.has(key)) {
+    return memoizes.get(key);
+  }
+  let instance = new Component();
+  memoizes.set(key, instance);
+  return instance;
+
+}
+
 /**
  * @description - Create a new element
  * @param element 
@@ -63,20 +99,16 @@ export const e = (element: any, props: any, ...children: any[]) => {
  * @param initialState 
  * @returns {state,  (newState: any, Element: string) => void, key}
  */
-export const useState = (key, initialState) => {
-  const instance = new Component;
-  return  [instance.state[key],
-  /**
-   * @description - Set the state of the component
-   * @param newState 
-   * @param Element 
-   */
-  (newState: any, Element: string) => {
-    instance.setState({ [key]: newState }, Element);
-  }, key];
+export const useState = <T>(initialState: T) => {
+  const setState = (newState: T, Element: string) => {
+    initialState = newState;
+  }
+  return [initialState, setState];
+}
+//@ts-ignore  
+if(!isServer){
+  window.state = {};
 }
-//@ts-ignore
-let state = {};
 export class Component {
   props: any;
   state: any;
@@ -88,21 +120,24 @@ export class Component {
   constructor() {
     this.key = Math.random().toString(36).substring(7);
     this.props = {};
-    //@ts-ignore
-    state[this.key] = {};
-    this.state = state[this.key];
+    //@ts-ignore 
+    if(!isServer){
+      window.state[this.key] = {};
+      this.state =  window.state[this.key];
+    }else{
+      this.state = {};
+    }
     this.effect = [];
     this.Mounted = false;
     this.element = null;
   }
   setState(newState: any, Element: string) {
-    state[this.key] = { ...this.state, ...newState };
-    console.log(state[this.key]);
+    globalThis.window.state[this.key] = { ...this.state, ...newState }; 
     this.forceUpdate(Element);
   }
 
   useEffect(callback: any, dependencies: any[]) {
-    if (dependencies.length === 0 && this.Mounted && this.effect.length === 0) {
+    if (dependencies.length === 0 && this.Mounted && this.effect.length === 0) { 
       callback();
       this.effect.push(callback);
     }else{
@@ -114,34 +149,26 @@ export class Component {
       }
     }
   }  
-  useState(key: string, initialState: any) {
-    if (!this.state[key]) { 
-      console.log(`State ${key} does not exist`)
-      this.state[key] = initialState;
-    }
+   useState <T> (key: string, defaultValue: T)  { 
+    let value = sessionStorage.getItem("state_" + key) || defaultValue; 
+    typeof value === "string" ? value = JSON.parse(value) : value;
 
-    window.onbeforeunload = () => {
-      sessionStorage.setItem("state", JSON.stringify({}));
+    window.onbeforeunload = function() {
+      sessionStorage.removeItem("state_" + key);
+    } 
+    const setValue =  (newValue: T ,element: string) => {
+      value = newValue;  
+      sessionStorage.setItem("state_" + key, JSON.stringify(value));
+      this.state[key] = value;
+      this.forceUpdate(element)
     }
-    /**
-     * 
-     * @param {*} newState 
-     * @param {*} Element  - The element affected by the state change
-     */
-    const setState = (newState, Element) => {
-      this.prevState = { ...this.state };
-      this.state[key] = newState;
-      state[this.key] = { ...this.state };
-      this.forceUpdate(Element);
-    }; 
-    const returnKey = key;
-    return [this.state[key], setState, returnKey];
+    return [value, setValue];
   }
+  
+ 
 
   useFetch(url, options) {
-    const { key } = options;
-
-    console.log(key);
+    const { key } = options; 
     if (!key) {
         throw new Error(`You must supply a key for the affected element in the options object`);
     }
@@ -151,23 +178,23 @@ export class Component {
     const dataKey = "_data" + url;
 
     // Initialize loading to false if loadingKey doesn't exist in state
-    const loading = state[this.key][loadingKey] !== undefined ? state[this.key][loadingKey] : true;
-    const error = state[this.key][errorKey] || null;
-    const data = state[this.key][dataKey] || null;
+     let [loading, setLoading] = this.useState(loadingKey, false);
+     let [error, setError] = this.useState(errorKey, null);
+     let [data, setData] = this.useState(dataKey, null);
 
     if (loading && !error && !data) {
-        state[this.key][loadingKey] = true;
+        this.state[this.key][loadingKey] = true;
 
         fetch(url, options)
             .then((res) => res.json())
             .then((data) => {
-                state[this.key][dataKey] = data;
-                state[this.key][loadingKey] = false;
+              //@ts-ignore
+                setLoading(false, options.key); 
+                setData(data, options.key);
                 this.forceUpdate(key);
             })
             .catch((err) => {
-                state[this.key][errorKey] = err;
-                state[this.key][loadingKey] = false;
+                setError(err, options.key);
                 this.forceUpdate(key);
             });
     }
@@ -179,7 +206,7 @@ export class Component {
   forceUpdate(key) { 
     //@ts-ignore
     let el = Array.from(document.querySelectorAll("*")).filter((el2: any) =>{ return el2.key === key})[0]; 
-    let newl = this.parseToElement(this.render());    
+    let newl = this.parseToElement(this.render());     
     if(newl.key !== key){  
       //@ts-ignore 
       newl = Array.from(newl.children).filter((el2) => el2.key === key)[0];
@@ -239,8 +266,7 @@ export class Component {
           continue;
         }
         //@ts-ignore
-        if (key.startsWith("on")) { 
-          console.log(key.substring(2).toLowerCase());
+        if (key.startsWith("on")) {  
           el.addEventListener(key.substring(2).toLowerCase(), attributes[key]);
           continue;
         }
@@ -281,8 +307,21 @@ export class Component {
   render() {
     return "";
   }
+
+  
 }
  
+function memoizeClassComponent(Component: any) {
+  let key = Component.toString();
+  if (memoizes.has(key)) {
+    return memoizes.get(key);
+  }
+  let instance = new Component();
+  memoizes.set(key, instance);
+  return instance;
+
+}
+
 export function render(element: any, container) {
   if (isClassComponent(element)) {
     const instance = new element();  
@@ -292,14 +331,14 @@ export function render(element: any, container) {
     container.innerHTML = ""; 
     container.replaceWith(el);
   } else {
-    const newInstance = new Component;
-    element = element.bind(newInstance);
-    newInstance.render = element; 
-    newInstance.Mounted = true;
-    let el = newInstance.toElement(); 
-    newInstance.element = el;
-    container.innerHTML = "";   
-    container.replaceWith(el);
+     // memoizeComponent(element);
+     let memoizedInstance = memoizeClassComponent(Component);
+      memoizedInstance.Mounted = true;
+      memoizedInstance.render =  element.bind(memoizedInstance);
+      let el = memoizedInstance.toElement();
+      container.innerHTML = "";
+      container.replaceWith(el);
+
   }
 }
 

package/main.js

@@ -12,19 +12,19 @@ if (!fs.existsSync(process.cwd() + '/app')) {
 if (!fs.existsSync(process.cwd() + '/public')) {
     fs.mkdirSync(process.cwd() + '/public')
 } 
-const mode = args.includes('dev') ? 'development' :  args.includes('prod') ? 'production' : null
+const mode = args.includes('dev') ? 'development' :  args.includes('prod') || args.includes('build') ? 'production' : 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 prod - Build for production output in dist/
     `)
     process.exit(1)
 }
 
 let start = Date.now()
 console.log(`Starting build at ${new Date().toLocaleTimeString()}`) 
-let { port, host, } = require(process.cwd() + '/config').default
+let { port, host, host_provider } = require(process.cwd() + '/config').default
 
 if (!fs.existsSync(process.cwd() + '/jsconfig.json')) {
     let json = {
@@ -96,21 +96,36 @@ const handleReplacements = (code, file) => {
 } 
  
 
-async function generateApp() {
+async function generateApp() {  
+// remove files from dist
+   if(mode === 'development'){
+    fs.rmdirSync(process.cwd() + '/dist', { recursive: true })
+   }else{
+    fs.mkdirSync(process.cwd() + '/dist', { recursive: true })
+   }
    return new Promise(async (resolve, reject) => {
     let routes = new Bun.FileSystemRouter({
         dir: process.cwd() + '/app',
         style: 'nextjs'
     })
-    globalThis.routes = routes.routes
+    routes.reload()
+    globalThis.routes = routes.routes 
     Object.keys(routes.routes).forEach(async (route) => { 
         let r = routes.routes[route]
         let code = await Bun.file(r).text()  
         code = handleReplacements(code)
         r = r.replace(process.cwd().replace(/\\/g, '/') + '/app', '')
-        r = r.replace('.jsx', '.js')
-        fs.mkdirSync(path.dirname(process.cwd() + '/dist/' + r), { recursive: true })
-        fs.writeFileSync(process.cwd() + '/dist/' + r, code)
+        r = r.replace('.jsx', '.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) + 1}]`
+            }).join(',') : ""}
+        }
+        \n${code}
+        `)
         fs.mkdirSync(process.cwd() + '/dev', { recursive: true })
         fs.writeFileSync(path.join(process.cwd() + '/dev/bundler.js'), ` 
           import { Component, e, useState, useEffect, useFetch, useAsyncState } from 'vaderjs'
@@ -134,14 +149,16 @@ async function generateApp() {
             getElementById: (id) => {},
           }
           await Bun.build({
-            entrypoints: [process.cwd() + '/dist/' +  process.env.ENTRYPOINT],
-            minify:true,
-            root:  process.cwd() + '/dist',
-            outdir: process.cwd() + '/dist',
-        })  
+            entrypoints: [process.env.ENTRYPOINT],
+            minify:true, 
+            root: process.cwd() + '/dist/',
+            outdir: process.cwd() + '/dist/',
+            format: 'esm',
+            ...(process.env.DEV ? { sourcemap: 'inline' } : {})
+         })  
         let isClass = function(element) { 
             return  element.toString().startsWith('class');
-        };
+        }; 
         const generatePage = async (data = {path: process.env.INPUT, route: process.env.OUT}) => {
             const { path, route } = data
             if(path.includes('root.js')) return
@@ -168,10 +185,10 @@ async function generateApp() {
             let headHtml = ''
             if(head){ 
                 headHtml = document(head())
-            }
+            } 
             Bun.write(process.cwd() + '/dist/' + route + '/index.html', \`<!DOCTYPE html><head>\${headHtml}</head>\${h}
             <script type="module"> 
-            import c from '\${route === '/' ? './index.js' : route + '/index.js'}'
+            import c from '\${process.env.filePath}'
             import {render} from '/src/vader/index.js'
             render(c, document.body.firstChild)
             </script>
@@ -183,15 +200,19 @@ async function generateApp() {
         fs.mkdirSync(process.cwd() + '/dist/src/vader', { recursive: true })
         fs.writeFileSync(process.cwd() + '/dist/src/vader/index.js', await new Bun.Transpiler({
             loader: 'ts',
-        }).transformSync(await Bun.file(require.resolve('vaderjs')).text()))  
+        }).transformSync(await Bun.file(require.resolve('vaderjs')).text()))   
+ 
         const spawn = Bun.spawn({
             cmd: ['bun', 'run', './dev/bundler.js'],
             cwd: process.cwd(),
             stdout: 'inherit',
             env: {
-                ENTRYPOINT: r,
+                ENTRYPOINT: path.join(process.cwd() + '/dist/' + path.dirname(r) +  '/' + path.basename(r)),
                 ROOT: process.cwd() + '/app/',
-                OUT: route,
+                OUT:  path.dirname(r),
+                file: process.cwd() + '/dist/' + path.dirname(r) + '/index.js',
+                DEV: mode === 'development',
+                filePath: r,
                 INPUT:  `../app/${r.replace('.js', '.jsx')}`,
             },
             onExit({exitCode: code}) { 
@@ -205,12 +226,50 @@ async function generateApp() {
         })  
          
     })
+
+    switch(host_provider){
+        case 'vercel':
+            
+            let vercelData = {
+                rewrites: []
+            }
+             
+            for(let route in routes.routes){  
+                let {filePath, kind, name, params, pathname,query} = routes.match(route)  
+                let exists = vercelData.rewrites.find(v => v.source === `/${route}`)
+                let paramString = ''
+                if(pathname === '/'){
+                    continue
+                }
+                if(params){
+                    paramString = Object.keys(params).map(p => `:${p}`).join('/')
+                } 
+                // replace double slashes
+                paramString = paramString.replace(/\/\//g, '/')
+                let base =  path.dirname(route)
+                if(base.includes('[')){
+                    base = base.split('[')[0].split('/').filter(v => v !== '').join('/')
+                }else{
+                    base = base.split('/').filter(v => v !== '').join('/')
+                }
+              
+                if(!exists){
+                    vercelData.rewrites.push({
+                        source: `/${base}/${paramString}`,
+                        destination: `${path.dirname(routes.routes[route]).replace(process.cwd().replace(/\\/g, '/') + '/app', '')}/index.html`
+                    })
+                }
+            }
+            fs.writeFileSync(process.cwd() + '/vercel.json', JSON.stringify(vercelData, null, 4))
+
+        break;
+    } 
     
    })
 
 }
 
-generateApp()
+await generateApp()
 function handleFiles(){
    return new Promise(async (resolve, reject) => {
        try {
@@ -226,7 +285,7 @@ function handleFiles(){
        }
    }) 
 }
-handleFiles()
+await handleFiles()
 let  isBuilding = false;
 let timeout = null
 if(mode === 'development'){
@@ -245,6 +304,8 @@ if(mode === 'development'){
     watcher.on('change', async (event, filename) => {
         try {
             await generateApp()
+             
+            handleFiles()
             clients.forEach(c => {
                 c.send('reload')
             })
@@ -289,14 +350,26 @@ if(mode === 'development'){
                     }
                 })
             } 
-            return new Response(fs.readFileSync(process.cwd() + '/dist/' + url.pathname + '/index.html')  + `
+            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(path.join(process.cwd() + '/app'), '')
+            base = base.replace(/\\/g, '/').replace('/app', '/dist')
+            return new Response(await Bun.file(path.join(base, 'index.html')).text() + `
             <script>
             let ws = new WebSocket('ws://localhost:${server.port}')
             ws.onmessage = (e) => {
                 if(e.data === 'reload'){
                     window.location.reload()
-                }
-                console.log(e.data)
+                }  
             } 
             </script>
             `, {

package/package.json

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