vaderjs 1.1.1 → 1.1.3

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vaderjs",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "A Reactive Framework for Single-Page Applications (SPA)",
   "main": "vader.js",
   "scripts": {

package/readme.md

@@ -29,6 +29,41 @@ useEffect((state)=>{
   console.log('New State for count' + state)
 }[state])
 <button onclick="increment()">Increment</button>
+
+// useRef in v1.1.2 - allows you to reference a dom element and efficiently update it, update takes the given html and checks for differences and only update the element if necessary
+componentDidMount: () => {
+        let title = useRef('title').current
+        title.innerHTML = 'Home'
+        useRef('title').update(`<span class="text-2xl font-bold">Home</span>`)
+},
+
+```
+
+### Signals
+
+Signals are a way to communicate between components. Signals are similar to events in React.js. Signals are useful for global state management and component communication.
+
+- This is new as of v1.1.2
+
+```javascript
+
+let count = signal('count', 0)
+function increment(){
+   count.set(count.get() + 1)
+} 
+
+signal.subscribe( (detail)=>{
+   console.log(detail)
+})
+
+// call the signal
+signal.call()
+
+signal.cleanup()  // cleans up the signal
+
+signal.get() // returns the signal detail
+ 
+
 ```
 
 ### Function Binding
@@ -63,9 +98,9 @@ const { state, setState, subscribe } = store;
 // id is a unique component key in which allows vader to update the component state!
 const myComponent = (id) = component(id, {
  render: (states, props) => {
-   return vhtml`
+   return vhtml(`
     <div>${props.message}</div>
-   `
+   `)
 }
 })
 
@@ -92,7 +127,7 @@ const app = component('app', {
     rf('incrementHandler', incrementHandler);
 
 
-    return vhtml`
+    return vhtml(`
      
       <div>
         <button className="btn" onclick="incrementHandler()"
@@ -102,7 +137,7 @@ const app = component('app', {
           count > 10 ? '<h1 style="color:lightBlue">Greater Than 10</h1>' : 'Less than 10'
         }
       </div>
-    `;
+    `)
   },
 })
 
@@ -131,7 +166,7 @@ import { vhtml, component, rf, include } from 'vader.js'
 const Home = component('Home', {
  render: async () =>{
   let html = await include('views/app.html')
-  return vhtml(html) || vhtml`${html}` // if using more than one view component
+  return vhtml(html)  
   },
  componentDidMount: () =>{
   console.log('home mounted')

package/vader.js

@@ -4,6 +4,7 @@
  * @description Allows you to store props for component
  */
 window.props = {};
+
 let events = {};
 /**
  * @function vhtml
@@ -12,7 +13,50 @@ let events = {};
  * @returns  modified string
  *
  */
-export function vhtml(strings, ...args) {
+
+window.dom = {};
+/**
+ * @function useRef
+ * @description Allows you to get reference to DOM element
+ * @param {String} ref
+ * @returns {Object} {current}
+ * @returns
+ */
+export const useRef = (ref) => {
+  // Try to get the existing DOM element from window.dom
+  let el = window.dom[ref] || document.querySelector(`[ref="${ref}"]`);
+
+  // Function to update the DOM element with new HTML content
+  const update = (data) => {
+    // Parse the new HTML data
+    const newDom = new DOMParser().parseFromString(data, "text/html");
+    const newHtml = newDom.body.firstChild;
+
+    if (el) {
+      // If the element already exists, update it
+      const isDifferent = !newHtml.isEqualNode(el);
+      if (isDifferent) {
+        const newElement = newHtml.cloneNode(true);
+        // Replace the old element with the new one
+        el.parentNode.replaceChild(newElement, el);
+        window.dom[ref] = newElement;
+      }
+    } else {
+      // If the element doesn't exist, create it
+      el = newHtml.cloneNode(true);
+      window.dom[ref] = el;
+      console.log("Element created:", ref);
+    }
+  };
+
+  return {
+    current: el,
+    update,
+  };
+};
+
+export function vhtml(strings, options, ...args) {
+  console.log(options);
   let result = "";
 
   for (let i = 0; i < strings.length; i++) {
@@ -33,8 +77,10 @@ export function vhtml(strings, ...args) {
     el.setAttribute("class", el.getAttribute("classname"));
     el.removeAttribute("classname");
   });
+
   return dom.body.innerHTML;
 }
+
 /**
  * @function component
  * @param {*} name 
@@ -95,10 +141,58 @@ export function component(name, options) {
     updateComponent();
   };
 
-  const signal = (key, value) => {
-    states[key] = value;
-    window.props[key] = value;
-    updateComponent();
+  /**
+   * @function signal
+   * @description Manage state much efficiently - alternative to vaders useEffect method
+   * @param {String} key
+   * @param {Object | String | Number | Boolean} initialState
+   * @returns  {Object} {subscribe, cleanup, dispatch, getDetail, call, setDetail}
+   * @example
+   * let count = signal('count', 0);
+   *
+   * count.subscribe((state) => {
+   *  console.log(state)
+   * });
+   *
+   * count.call();
+   * count.set(1);
+   * count.call();
+   * count.get();
+   *
+   */
+
+  const signal = (key, initialState) => {
+    let [state, setState] = useState(key, initialState);
+    let subscribers = [];
+
+    function subscribe(fn) {
+      subscribers.push(fn);
+    }
+    function cleanup() {
+      subscribers = subscribers.filter((subscriber) => subscriber !== fn);
+      setState(null);
+    }
+    function dispatch() {
+      subscribers.forEach((subscriber) => subscriber(state));
+    }
+    function get() {
+      return state;
+    }
+    function call() {
+      dispatch();
+    }
+    function set(detail) {
+      setState(detail);
+    }
+    return {
+      subscribe,
+      cleanup,
+      dispatch,
+
+      call,
+      set,
+      get,
+    };
   };
 
   /**
@@ -382,6 +476,8 @@ export function component(name, options) {
   window.useAuth = useAuth;
   window.useSyncStore = useSyncStore;
   window.useReducer = useReducer;
+  window.runEffects = runEffects;
+  window.signal = signal;
 
   const updateComponent = async () => {
     const componentContainer = document.querySelector(
@@ -398,8 +494,13 @@ export function component(name, options) {
       let html = newDom.body.firstChild;
       let oldHtml = oldDom.body.firstChild;
       if (!html.isEqualNode(oldHtml)) {
-        // only update the chunk of DOM that has changed
-        componentContainer.innerHTML = newHtml;
+        // make shadow
+        let shadow = document.createElement("div");
+        shadow.innerHTML = newHtml;
+        let newHtmlDom = shadow.firstChild;
+        let oldHtmlDom = componentContainer.firstChild;
+        // replace old html with new html
+        componentContainer.replaceChild(newHtmlDom, oldHtmlDom);
       }
       if (!componentMounted) {
         componentMounted = true;
@@ -425,12 +526,19 @@ export function component(name, options) {
    */
 
   const render = async (props) => {
-    options.componentDidMount ? options.componentDidMount() : null;
-    return vhtml`
-          <div data-component="${name}">
-            ${await options.render(states, props)}
-          </div>
-        `;
+    let data = await vhtml(
+      `<div data-component="${name}">${await options.render(
+        states,
+        props
+      )}</div>`
+    );
+    storedProps = props;
+
+    setTimeout(() => {
+      options.componentDidMount ? options.componentDidMount() : null;
+    }, 0);
+
+    return data;
   };
 
   return {
@@ -442,6 +550,7 @@ export function component(name, options) {
     useSyncStore,
     useReducer,
     runEffects,
+    signal,
   };
 }
 
@@ -477,6 +586,7 @@ export const include = (path, options) => {
     })
     .then((data) => {
       cache[path] = data;
+
       return new Function(`return \`${data}\`;`)();
     });
 };

package/vaderRouter.js

@@ -1,3 +1,6 @@
+window.$URL_PARAMS = {};
+window.$URL_QUERY = {};
+
 /**
  * @file VaderRouter.js
  * @version 1.0.0
@@ -63,12 +66,13 @@ class VaderRouter {
    * Starts the router.
    */
   start() {
-    
     if (window.location.hash === "") {
       window.location.hash = this.starturl;
     }
+    console.log(this.routes);
+    this.handleRoute("GET");
     window.addEventListener("hashchange", () => {
-      this.handleRoute();
+      this.handleRoute("POST");
     });
   }
 
@@ -88,23 +92,27 @@ class VaderRouter {
     this.errorHandlers[type] = callback;
     this.customerror = true;
   }
-  handleRoute() {
+  handleRoute(method) {
     if (this.hooked) {
       return;
     }
     this.hooked = true;
-    const route = window.location.hash.substring(1);
-    this.currentUrl = route;
+    let route = window.location.hash.substring(1);
+
     window.$CURRENT_URL = route;
-    window.$URL_PARAMS = {};
-    window.$URL_QUERY = {};
+
+    // remove query params from route
+    if (route.includes("?")) {
+      route = route.split("?")[0];
+    }
     if (this.routes[route]) {
+      console.log("route", route);
       this.storedroutes.push(route);
       const req = {
         params: {},
-        query: {},
+        query: $URL_QUERY ? $URL_QUERY : {},
         url: route,
-        method: "GET",
+        method: method ? method : "GET",
       };
       const res = {
         return: function (data) {
@@ -114,7 +122,11 @@ class VaderRouter {
           document.querySelector(selector).innerHTML = data;
         },
       };
-      this.routes[route] === Function ? this.routes[route](req, res) : null;
+      if (typeof this.routes[route] === "function") {
+        this.routes[route](req, res);
+      } else {
+        console.error("Error: Route is not a function");
+      }
     } else {
       if (this.customerror) {
         this.handleError("404", route);
@@ -142,7 +154,7 @@ class VaderRouter {
   handleError(type, data, res) {
     if (this.errorHandlers[type]) {
       this.errorHandlers[type](data);
-    }else{
+    } else {
       console.error("Error: No error handler found for " + type);
     }
   }
@@ -193,7 +205,7 @@ class VaderRouter {
           debug.log(
             [
               `
-                Cannot use query params with path params ${path} ${
+                  Cannot use query params with path params ${path} ${
                 window.location.hash.substring(1).split("?")[1]
               }`,
             ],
@@ -230,7 +242,14 @@ class VaderRouter {
       window.$URL_PARAMS = params;
       window.$URL_QUERY = query;
       window.$CURRENT_URL = window.location.hash.substring(1);
-
+      /**
+       * @alias render
+       * @param {*} selector
+       * @param {*} data
+       * @returns {void}
+       * @memberof VaderRouter
+       * @description  Allows you to perform actions when the currentRoute changes.
+       */
       const res = {
         return: function (data) {
           this.hooked = false;
@@ -250,11 +269,8 @@ class VaderRouter {
   }
 
   kill(path) {
-    const listener = this.listeners[path];
-
-    if (listener) {
-      window.removeEventListener("message", listener);
-      delete this.listeners[path];
+    if (this.routes[path]) {
+      delete this.routes[path];
     }
   }
   /**
@@ -264,7 +280,7 @@ class VaderRouter {
    * @memberof VaderRouter
    * @description  Allows you to set routes to be used throughout your spa.
    */
-  use(path) {
+  use(path, callback) {
     const paramNames = [];
     const queryNames = [];
     const parsedPath = path
@@ -286,9 +302,56 @@ class VaderRouter {
       })
       .join("/");
     const regex = new RegExp("^" + parsedPath + "(\\?(.*))?$");
+    let params = {};
+    let query = {};
     path = parsedPath;
-    this.routes[path] = true;
-    this.storedroutes.push(path);
+
+    // get params
+    if (window.location.hash.substring(1).match(regex)) {
+      this.storedroutes.push(window.location.hash.substring(1));
+      const matches = window.location.hash.substring(1).match(regex);
+      params = {};
+
+      for (let i = 0; i < paramNames.length; i++) {
+        params[paramNames[i]] = matches[i + 1];
+      }
+      if (
+        path.includes(":") &&
+        window.location.hash.substring(1).split("?")[1]
+      ) {
+        if (debug.enabled) {
+          debug.log(
+            [
+              `
+                        Cannot use query params with path params ${path} ${
+                window.location.hash.substring(1).split("?")[1]
+              }`,
+            ],
+            "assert"
+          );
+        }
+
+        return false;
+      }
+      query = {};
+
+      const queryString = window.location.hash.substring(1).split("?")[1];
+      if (queryString) {
+        const queryParts = queryString.split("&");
+        for (let i = 0; i < queryParts.length; i++) {
+          const queryParam = queryParts[i].split("=");
+          query[queryParam[0]] = queryParam[1];
+        }
+      }
+    }
+    window.$URL_PARAMS = params;
+    window.$URL_QUERY = query;
+    if (callback) {
+      this.routes[parsedPath] = callback;
+    } else {
+      this.storedroutes.push(parsedPath);
+      return this.routes[parsedPath];
+    }
   }
 
   onload(callback) {
@@ -309,6 +372,7 @@ class VaderRouter {
    * @returns {void}
    * @memberof VaderRouter
    * @description  Allows you to perform actions when the currentRoute changes.
+   *
    */
   on(path, callback) {
     window.addEventListener("hashchange", () => {
@@ -335,21 +399,21 @@ class VaderRouter {
       const regex = new RegExp("^" + parsedPath + "(\\?(.*))?$");
 
       let hash = window.location.hash.split("#")[1]
-          ? window.location.hash.split("#")[1]
-          : window.location.hash;
-    
+        ? window.location.hash.split("#")[1]
+        : window.location.hash;
+
       let basePath = "";
       if (hash.length > 1) {
-          basePath =  hash.split("/")[0] + "/" + hash.split("/")[1];
+        basePath = hash.split("/")[0] + "/" + hash.split("/")[1];
       } else {
-          basePath = hash[0];
+        basePath = hash[0];
       }
       const route = basePath;
 
       window.$CURRENT_URL = route;
       window.$URL_PARAMS = {};
       if (
-          window.location.hash.substring(1).match(regex) &&
+        window.location.hash.substring(1).match(regex) &&
         this.routes[$CURRENT_URL]
       ) {
         this.storedroutes.push(window.location.hash.substring(1));
@@ -393,6 +457,14 @@ class VaderRouter {
           send: function (selector, data) {
             document.querySelector(selector).innerHTML = data;
           },
+          /**
+           * @alias render
+           * @param {*} selector
+           * @param {*} data
+           * @returns {void}
+           * @memberof VaderRouter
+           * @description  Allows you to perform actions when the currentRoute changes.
+           */
           render: function (selector, data) {
             document.querySelector(selector).innerHTML = data;
           },

package/website/dist/init.js

@@ -0,0 +1,9 @@
+import VaderRouter from "vader-router";
+import { Home } from "../src/pages/Home.js";
+const app = new VaderRouter('/');
+app.use('/', async (req, res) => {
+    console.log(req)
+    res.render('#root', await Home.render());
+});
+ 
+app.start ();