vaderjs 2.0.0 → 2.0.1

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
@@ -291,10 +302,10 @@ 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
@@ -619,11 +630,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 +665,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.1",
     "description": "A simple and powerful JavaScript library for building modern web applications.", 
     "bin": {
         "vaderjs": "./main.js"