vaderjs 2.0.0 → 2.0.2

package/bundler/index.js

@@ -132,14 +132,13 @@ const handleReplacements = (code) => {
       line = updatedLine; 
     }
 
-    if (!hasImport && line.match(/\buseRef\d*\(/) && !line.includes("this")) {
-     
-
-      let key = line.split(' ')[1].split('=')[0];
-
-      let updatedLine = line.replace(/\buseRef\d*\(/, `this.useRef('${key}',`);
-
-      line = updatedLine; 
+    if (!hasImport && line.match(/\buseRef\d*\(/) && line.includes('[') && !line.includes("this")) {
+      line = line.replace(' ', '')
+      let b4 = line
+      let key = line.split('=')[0].split(' ').filter(Boolean)[1]
+      console.log(key)
+      b4 = line.replace('useRef(', `this.useRef('${key}',`)
+      line = b4
     }
 
 

package/index.ts

@@ -3,8 +3,6 @@ let isClassComponent = function (element) {
   return element.toString().startsWith("class");
 };
 
-
-
  
 
 const memoizes = new Map();
@@ -61,6 +59,19 @@ export const useFetch = (url: string, options: any) => {
   return [null, true, null];
 };
 
+/**
+ * @description - useRef allows you to store a reference to a DOM element
+ * @param value
+ * @returns {current:   HTMLElement}
+ * @example
+ * const inputRef = useRef();
+ * <input ref={inputRef} />
+ * console.log(inputRef.current) // <input />
+ */
+export const useRef = (value) => {
+  return { key: crypto.randomUUID(), current: value };
+}
+
 /**
  * @description  - Handle asyncronous promises and return the data or error;
  * @param promise
@@ -69,7 +80,7 @@ export const useFetch = (url: string, options: any) => {
 export const useAsyncState = (promise: Promise<any>) => {
   return [null, () => { }];
 }
-export const useEffect = (callback: any, dependencies: any[] = []) => {
+export const useEffect = (callback: any, dependencies: any[] = []) => { 
   dependencies = dependencies.map((dep) => JSON.stringify(dep));
   if (dependencies.length === 0) {
     callback();
@@ -158,8 +169,8 @@ export const e = (element, props, ...children) => {
       instance.children = children;
       if (!firstEl)
         firstEl = { type: "div", props: { key: instance.key, ...props }, children };
-      firstEl.props = { key: instance.key, ...firstEl.props, ...props };
-      firstEl.props["idKey"] = instance.key;
+      firstEl.props = { key: instance.key, ...firstEl.props, ...props }; 
+      firstEl.props["idKey"] = instance.props?.ref?.key || instance.key;
       instance.props = firstEl.props; 
       return firstEl;
     default:
@@ -168,7 +179,7 @@ export const e = (element, props, ...children) => {
       }
       let el = { type: element, props: props || {}, children: children || [] };
       if (el.type !== "head") {
-        el.props = { idKey: crypto.randomUUID(), ...el.props };
+        el.props = { idKey: el.props?.ref?.key || crypto.randomUUID(), ...el.props };
       }
 
       // if element == false return empty string
@@ -194,11 +205,11 @@ interface SwitchProps {
 }
 
 // make children optional
-export function Switch({ children = [] }: SwitchProps) {
+export function Switch({children}, key) {
   for (let child of children) {
     if (child.props.when) { 
       return { type: "div", props: {
-        idKey: crypto.randomUUID()
+        idKey:  key || crypto.randomUUID()
       }, children: [child] };
     }
   }
@@ -291,16 +302,17 @@ export class Component {
   }
   useRef = (key, value) => {
     if (!this.refs.find((r) => r.key == key)) {
-      this.refs.push({ key, value });
+      this.refs.push({ key,  current: value});
     }
 
-    return this.refs.find((r) => r.key == key).value;
+    return { key, current: this.refs.find((r) => r.key == key).current };
   }
   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)) {
-        // Add the initial effect call if it doesn't exist
+        // Initialize the effect call tracking
         this.effectCalls.push({
             id: callbackId,
             count: 0,
@@ -312,7 +324,7 @@ export class Component {
 
     const effectCall = this.effectCalls.find((effect) => effect.id === callbackId);
 
-    const executeCallback = () => {
+    const executeCallback = async () => {
         const now = Date.now();
         const timeSinceLastCall = now - effectCall.lastCall;
 
@@ -330,22 +342,21 @@ export class Component {
 
         effectCall.lastCall = now;
 
-        setTimeout(() => {
-            try {
-                effects.push(callbackId); // Track executed effects
-                callback(); // Execute the callback
-            } catch (error) {
-                console.error(error);
-            }
-        }, 0);
+        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);
+        }
     };
 
     // First time: Run the effect and mark it as run
     if (!effectCall.hasRun && dependencies.length === 0) {
-      executeCallback();
-      effectCall.hasRun = true;
-      effectCall.dependencies = dependencies;
-      return;
+        executeCallback(); // Run async callback
+        effectCall.hasRun = true;
+        effectCall.dependencies = dependencies;
+        return;
     }
 
     // If there are no dependencies, do nothing after the first run
@@ -353,7 +364,7 @@ export class Component {
         return;
     }
 
-    // Check if dependencies have changed
+    // Check if dependencies have changed by deep comparison (improve this if necessary)
     let dependenciesChanged = false;
     for (let i = 0; i < dependencies.length; i++) {
         const previousDependencies = effectCall.dependencies || [];
@@ -367,14 +378,20 @@ export class Component {
 
     // If dependencies have changed, run the effect and update dependencies
     if (dependenciesChanged) {
-        executeCallback();
+        executeCallback(); // Run async callback
         effectCall.dependencies = dependencies;
     }
 }
 
+
   
   useState(key, defaultValue, persist = false) {
     let value = this.state[key] || defaultValue;
+    if(value === "true" || value === "false") {
+      value = JSON.parse(value);
+    }
+    // if value is boolean store as string
+
     if (persist) {
       value = sessionStorage.getItem(key) ? JSON.parse(sessionStorage.getItem(key)).value : defaultValue;
     }
@@ -382,13 +399,14 @@ export class Component {
       if(typeof newValue === "function") {
         newValue = newValue(this.state[key]);
       }
-      this.state[key] = newValue; 
+      this.state[key] =  typeof newValue === "boolean" ? newValue.toString() : newValue;
       if (persist) {
         sessionStorage.setItem(key, JSON.stringify({ value: newValue }));
       }
       this.forceUpdate(this.key);
     };
-    value = this.state[key] || defaultValue; 
+    value =  typeof value === "boolean" ?  value === "true" : value;
+     
     return [value, setValue];
   }
   useFetch(url, options) {
@@ -619,11 +637,18 @@ export class Component {
   
     // Set attributes
     let attributes = element.props || {};
-    for (let key in attributes) {
-      if(typeof attributes[key] === "object" && key !== "style"){
-        continue;
-      }
-      if (key === "key") {
+    for (let key in attributes) { 
+      if(key === "ref") {  
+        let _key = attributes[key].key;
+        // update the ref
+        let ref = this.refs.find((r) => r.key == _key);
+         if(ref) {
+           ref.current = document.querySelector(`[idKey="${_key}"]`) || el;
+         }
+        el.setAttribute("idKey", _key);
+        element.props.idKey = _key
+     } 
+      else if (key === "key") {
         el.key = attributes[key];
       } else if (key === "className") {
         el.setAttribute("class", attributes[key]);
@@ -647,7 +672,9 @@ export class Component {
         } catch (error) {
            
         }
-      }
+      } else   if(typeof attributes[key] === "object" && key !== "style"){
+        continue;
+      } 
     }
   
     // Handle children

package/main.js

@@ -167,8 +167,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
         }
@@ -186,8 +187,7 @@ if (!fs.existsSync(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) {
@@ -275,8 +275,7 @@ async function generateApp() {
                 },
                 onExit({ exitCode: code }) {
                     if (code === 0) {
-                        bindes = []
-                        console.log(`Built ${r} in ${Date.now() - start}ms`)
+                        bindes = [] 
                         resolve()
                     } else {
                         reject()

package/package.json

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