vaderjs 1.9.9 → 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

@@ -59,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
@@ -67,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();
@@ -96,8 +109,11 @@ export const A = (props: {
     if (props.openInNewTab) {
       window.open(props.href, "_blank");
       return void 0;
-    }
-    window.location.href = props.href;
+    }   
+    window.history.pushState({}, "", props.href);
+    window.dispatchEvent(new Event("popstate")); 
+    window.dispatchEvent(new Event("load"));
+    window.location.reload();
     return void 0;
   }
   return e("a", { ...props, onClick: handleClick }, props.children);
@@ -153,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:
@@ -163,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
@@ -192,7 +208,9 @@ interface SwitchProps {
 export function Switch({ children = [] }: SwitchProps) {
   for (let child of children) {
     if (child.props.when) { 
-      return child
+      return { type: "div", props: {
+        idKey: crypto.randomUUID()
+      }, children: [child] };
     }
   }
   return { type: "div", props: {}, children: [] };
@@ -284,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
@@ -612,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]);
@@ -640,7 +665,9 @@ export class Component {
         } catch (error) {
            
         }
-      }
+      } else   if(typeof attributes[key] === "object" && key !== "style"){
+        continue;
+      } 
     }
   
     // Handle children
@@ -675,7 +702,7 @@ export class Component {
   }
   toElement() {
     let children = this.render(this.props); 
-    let el = this.parseToElement(children);
+    let el = this.parseToElement(children); 
     el.setAttribute("idKey", this.key);
     return el;
   }

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()
@@ -552,13 +551,23 @@ if (mode == 'development' || mode == 'serve') {
             if (mode == "development") {
                 return new Response(data + `
             <script>
-            let ws = new WebSocket('ws://localhost:${server.port}')
+            let ws = new WebSocket(\`\${location.protocol === 'https:' ? 'wss' : 'ws'}://\${location.host}\`)
             ws.onmessage = (e) => {
                 if(e.data === 'reload'){
                     console.log('Reloading to display changes from server')
                     window.location.reload()
                 }
             }
+            ws.onopen = () => {
+                console.log('Connected to hmr server')
+            }
+            
+            ws.onclose = () => {
+                // try to reconnect
+                 console.log('Reconnecting to hmr server')
+                 ws = new WebSocket(\`\${location.protocol === 'https:' ? 'wss' : 'ws'}://\${location.host}\`)    
+            }
+            
             </script>
             `, {
                     headers: {

package/package.json

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