@unsetsoft/ryunixjs 1.0.3-nightly.7 → 1.0.3-nightly.9

package/dist/Ryunix.js

@@ -9,13 +9,12 @@
     nextUnitOfWork: undefined,
     currentRoot: undefined,
     wipRoot: undefined,
-    deletions: [],
-    workInProgressFiber: undefined,
-    hookIndex: 0,
-    errorBoundary: null, // New property to hold error boundary references
+    deletions: undefined,
+    wipFiber: undefined,
+    hookIndex: undefined,
   };
 
-  const capitalLetterRegex = /[A-Z]/g;
+  const reg = /[A-Z]/g;
 
   const RYUNIX_TYPES = Object.freeze({
     TEXT_ELEMENT: Symbol('text.element'),
@@ -23,7 +22,6 @@
     RYUNIX_MEMO: Symbol('ryunix.memo'),
     RYUNIX_URL_QUERY: Symbol('ryunix.urlQuery'),
     RYUNIX_REF: Symbol('ryunix.ref'),
-    RYUNIX_ERROR_BOUNDARY: Symbol('ryunix.errorBoundary'), // New Error Boundary Type
   });
 
   const STRINGS = Object.freeze({
@@ -41,24 +39,21 @@
   });
 
   const EFFECT_TAGS = Object.freeze({
-    PLACEMENT: Symbol('placement'),
-    UPDATE: Symbol('update'),
-    DELETION: Symbol('deletion'),
+    PLACEMENT: Symbol(),
+    UPDATE: Symbol(),
+    DELETION: Symbol(),
   });
 
   const Fragment = (props) => {
     return props.children
   };
 
-  /**
-   * The function takes a set of child elements and flattens them into an array to ensure all children are handled properly.
-   * @param children - The child elements, which can be of different types (array, object, primitive).
-   * @param out - The array where the final children will be stored.
-   * @returns An array with all the child elements.
-   */
-  const childArray = (children, out = []) => {
-    if (children == undefined || typeof children === STRINGS.boolean) ; else if (Array.isArray(children)) {
-      children.forEach((child) => childArray(child, out)); // Use forEach instead of some
+  const childArray = (children, out) => {
+    out = out || [];
+    if (children == undefined || typeof children == STRINGS.boolean) ; else if (Array.isArray(children)) {
+      children.some((child) => {
+        childArray(child, out);
+      });
     } else {
       out.push(children);
     }
@@ -66,12 +61,22 @@
   };
 
   /**
-   * The function creates a new element with a given type, properties, and children.
-   * @param type - The type of element to create (div, span, etc.).
-   * @param props - The properties of the element.
-   * @param children - The child elements of the new element.
-   * @returns An object representing the created element.
+   * The function creates a new element with the given type, props, and children.
+   * @param type - The type of the element to be created, such as "div", "span", "h1", etc.
+   * @param props - The `props` parameter is an object that contains the properties or attributes of the
+   * element being created. These properties can include things like `className`, `id`, `style`, and any
+   * other custom attributes that the user wants to add to the element. The `props` object is spread
+   * using the spread
+   * @param children - The `children` parameter is a rest parameter that allows the function to accept
+   * any number of arguments after the `props` parameter. These arguments will be treated as children
+   * elements of the created element. The `map` function is used to iterate over each child and create a
+   * new element if it is not
+   * @returns A JavaScript object with a `type` property and a `props` property. The `type` property is
+   * set to the `type` argument passed into the function, and the `props` property is an object that
+   * includes any additional properties passed in the `props` argument, as well as a `children` property
+   * that is an array of any child elements passed in the `...children` argument
    */
+
   const createElement = (type, props, ...children) => {
     children = childArray(children, []);
     return {
@@ -86,52 +91,254 @@
   };
 
   /**
-   * The function creates a text element from a given text value.
-   * @param text - The text content to create the element.
-   * @returns An object representing a text element.
+   * The function creates a text element with a given text value.
+   * @param text - The text content that will be used to create a new text element.
+   * @returns A JavaScript object with a `type` property set to `"TEXT_ELEMENT"` and a `props` property
+   * that contains a `nodeValue` property set to the `text` parameter and an empty `children` array.
    */
+
   const createTextElement = (text) => {
     return {
       type: RYUNIX_TYPES.TEXT_ELEMENT,
       props: {
         nodeValue: text,
-        children: [], // Text elements don't have children.
+        children: [],
       },
     }
   };
 
   /**
-   * Checks if a key is an event handler (i.e., starts with 'on').
-   * @param key - The key to check.
-   * @returns A boolean indicating if the key is an event.
+   * The function renders an element into a container using a work-in-progress root.
+   * @param element - The element parameter is the component or element that needs to be rendered in the
+   * container. It could be a Ryunix component or a DOM element.
+   * @param container - The container parameter is the DOM element where the rendered element will be
+   * appended to. this parameter is optional if you use createRoot().
    */
-  const isEvent = (key) => key.startsWith('on');
+  const render = (element, container) => {
+    vars.wipRoot = {
+      dom: vars.containerRoot || container,
+      props: {
+        children: [element],
+      },
+      alternate: vars.currentRoot,
+    };
+    vars.deletions = [];
+    vars.nextUnitOfWork = vars.wipRoot;
+  };
 
   /**
-   * Checks if a key is a property (not 'children' and not an event).
-   * @param key - The key to check.
-   * @returns A boolean indicating if the key is a property.
+   * @description The function creates a reference to a DOM element with the specified ID. This will be used to initialize the app.
+   * @example Ryunix.init("root") -> <div id="root" />
+   * @param root - The parameter "root" is the id of the HTML element that will serve as the container
+   * for the root element.
    */
-  const isProperty = (key) => key !== STRINGS.children && !isEvent(key);
+  const init = (root) => {
+    const rootElement = root || '__ryunix';
+    vars.containerRoot = document.getElementById(rootElement);
+    return undefined
+  };
 
   /**
-   * Checks if a property has changed between the previous and next props.
-   * @param prev - The previous props object.
-   * @param next - The next props object.
-   * @returns A function that takes a key and returns true if the property has changed.
+   * @description The function creates a state.
+   * @param initial - The initial value of the state for the hook.
+   * @returns The `useStore` function returns an array with two elements: the current state value and a
+   * `setState` function that can be used to update the state.
    */
-  const isNew = (prev, next) => (key) => prev[key] !== next[key];
+  const useStore = (initial) => {
+    const oldHook =
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
+    const hook = {
+      state: oldHook ? oldHook.state : initial,
+      queue: [],
+    };
+
+    const actions = oldHook ? oldHook.queue : [];
+    actions.forEach((action) => {
+      hook.state =
+        typeof action === STRINGS.function ? action(hook.state) : action;
+    });
+
+    /**
+     * The function `setState` updates the state of a component in Ryunix by adding an action to a queue
+     * and setting up a new work-in-progress root.
+     * @param action - The `action` parameter is an object that represents a state update to be performed
+     * on a component. It contains information about the type of update to be performed and any new data
+     * that needs to be applied to the component's state.
+     */
+    const setState = (action) => {
+      hook.queue.push(action);
+      vars.wipRoot = {
+        dom: vars.currentRoot.dom,
+        props: vars.currentRoot.props,
+        alternate: vars.currentRoot,
+      };
+      vars.nextUnitOfWork = vars.wipRoot;
+      vars.deletions = [];
+    };
+
+    if (vars.wipFiber && vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
+    }
+    return [hook.state, setState]
+  };
 
   /**
-   * Checks if a property is no longer present in the next props.
-   * @param next - The next props object.
-   * @returns A function that takes a key and returns true if the property is not present in the next props.
+   * This is a function that creates a hook for managing side effects in Ryunix components.
+   * @param effect - The effect function that will be executed after the component has rendered or when
+   * the dependencies have changed. It can perform side effects such as fetching data, updating the DOM,
+   * or subscribing to events.
+   * @param deps - An array of dependencies that the effect depends on. If any of the dependencies change
+   * between renders, the effect will be re-run. If the array is empty, the effect will only run once on
+   * mount and never again.
    */
+
+  const useEffect = (callback, deps) => {
+    const oldHook =
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
+
+    const hook = {
+      type: RYUNIX_TYPES.RYUNIX_EFFECT,
+      deps,
+    };
+
+    if (!oldHook) {
+      // invoke callback if this is the first time
+      callback();
+    } else {
+      if (!lodash.isEqual(oldHook.deps, hook.deps)) {
+        callback();
+      }
+    }
+
+    if (vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
+    }
+  };
+
+  const useRef = (initial) => {
+    const oldHook =
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
+
+    const hook = {
+      type: RYUNIX_TYPES.RYUNIX_REF,
+      value: oldHook ? oldHook.value : { current: initial },
+    };
+
+    if (vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
+    }
+
+    return hook.value
+  };
+
+  const useMemo = (comp, deps) => {
+    const oldHook =
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
+
+    const hook = {
+      type: RYUNIX_TYPES.RYUNIX_MEMO,
+      value: null,
+      deps,
+    };
+
+    if (oldHook) {
+      if (lodash.isEqual(oldHook.deps, hook.deps)) {
+        hook.value = oldHook.value;
+      } else {
+        hook.value = comp();
+      }
+    } else {
+      hook.value = comp();
+    }
+
+    if (vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
+    }
+
+    return hook.value
+  };
+  const useCallback = (callback, deps) => {
+    return useMemo(() => callback, deps)
+  };
+
+  const useRouter = (routes) => {
+    const [location, setLocation] = useStore(window.location.pathname);
+
+    const navigate = (path) => {
+      window.history.pushState({}, '', path);
+      setLocation(path);
+    };
+
+    useEffect(() => {
+      const onPopState = () => {
+        setLocation(window.location.pathname);
+      };
+
+      window.addEventListener('popstate', onPopState);
+      return () => {
+        window.removeEventListener('popstate', onPopState);
+      }
+    }, []);
+
+    const currentRoute = routes.find((route) => route.path === location);
+    const Children = () => (currentRoute ? currentRoute.component : null);
+
+    return { Children, navigate }
+  };
+
+  /**
+   * The `useQuery` function is a custom hook in JavaScript that retrieves query parameters from the URL
+   * and stores them in a hook for easy access.
+   * @returns The `useQuery` function returns the `query` property of the `hook` object.
+   */
+  const useQuery = () => {
+    const oldHook =
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
+
+    const hasOld = oldHook ? oldHook : undefined;
+
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const params = Object.fromEntries(urlSearchParams.entries());
+    const Query = hasOld ? hasOld : params;
+
+    const hook = {
+      type: RYUNIX_TYPES.RYUNIX_URL_QUERY,
+      query: Query,
+    };
+
+    if (vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
+    }
+
+    return hook.query
+  };
+
+  const isEvent = (key) => key.startsWith('on');
+  const isProperty = (key) => key !== STRINGS.children && !isEvent(key);
+  const isNew = (prev, next) => (key) => prev[key] !== next[key];
   const isGone = (next) => (key) => !(key in next);
 
   /**
-   * Cancels all effect hooks in a given fiber.
-   * @param fiber - The fiber object containing hooks.
+   * The function cancels all effect hooks in a given fiber.
+   * @param fiber - The "fiber" parameter is likely referring to a data structure used in React.js to
+   * represent a component and its state. It contains information about the component's props, state, and
+   * children, as well as metadata used by React to manage updates and rendering. The function
+   * "cancelEffects" is likely intended
    */
   const cancelEffects = (fiber) => {
     if (fiber.hooks) {
@@ -144,8 +351,11 @@
   };
 
   /**
-   * Runs all effect hooks in a given fiber.
-   * @param fiber - The fiber object containing hooks.
+   * The function runs all effect hooks in a given fiber.
+   * @param fiber - The "fiber" parameter is likely referring to a data structure used in the
+   * implementation of a fiber-based reconciliation algorithm, such as the one used in React. A fiber
+   * represents a unit of work that needs to be performed by the reconciliation algorithm, and it
+   * contains information about a component and its children, as
    */
   const runEffects = (fiber) => {
     if (fiber.hooks) {
@@ -158,38 +368,34 @@
   };
 
   /**
-   * Creates a new DOM element based on the given fiber object and updates its properties.
-   *
-   * @param fiber - The fiber object represents a node in the fiber tree and contains
-   *                information about the element type, props, and children.
-   * @returns A newly created DOM element based on the fiber object.
+   * The function creates a new DOM element based on the given fiber object and updates its properties.
+   * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
+   * contains information about the element type, props, and children of the node.
+   * @returns The `createDom` function returns a newly created DOM element based on the `fiber` object
+   * passed as an argument. If the `fiber` object represents a text element, a text node is created using
+   * `document.createTextNode("")`. Otherwise, a new element is created using
+   * `document.createElement(fiber.type)`. The function then calls the `updateDom` function to update the
+   * properties of the newly created
    */
   const createDom = (fiber) => {
-    // Log to verify fiber type before creating DOM
-    console.log('Creating DOM for fiber:', fiber);
-
-    // Check if the fiber is a text element or a regular element
     const dom =
-      fiber.type === RYUNIX_TYPES.TEXT_ELEMENT
-        ? document.createTextNode(fiber.props.nodeValue || '')
+      fiber.type == RYUNIX_TYPES.TEXT_ELEMENT
+        ? document.createTextNode('')
         : document.createElement(fiber.type);
 
-    // Update the newly created DOM element with its initial props
     updateDom(dom, {}, fiber.props);
 
     return dom
   };
 
   /**
-   * Updates a DOM element by removing old properties and event listeners,
-   * and applying new properties and event listeners from the nextProps.
-   *
-   * @param dom - The DOM element that needs to be updated.
-   * @param prevProps - The previous properties of the DOM element.
-   * @param nextProps - The new properties that should be applied to the DOM element.
+   * The function updates the DOM by removing old event listeners and properties, and adding new ones
+   * based on the previous and next props.
+   * @param dom - The DOM element that needs to be updated with new props.
+   * @param prevProps - An object representing the previous props (properties) of a DOM element.
+   * @param nextProps - An object containing the new props that need to be updated in the DOM.
    */
   const updateDom = (dom, prevProps, nextProps) => {
-    // Remove old or changed event listeners
     Object.keys(prevProps)
       .filter(isEvent)
       .filter((key) => isGone(nextProps)(key) || isNew(prevProps, nextProps)(key))
@@ -198,7 +404,6 @@
         dom.removeEventListener(eventType, prevProps[name]);
       });
 
-    // Remove old properties
     Object.keys(prevProps)
       .filter(isProperty)
       .filter(isGone(nextProps))
@@ -206,21 +411,35 @@
         dom[name] = '';
       });
 
-    // Set new or changed properties
     Object.keys(nextProps)
       .filter(isProperty)
       .filter(isNew(prevProps, nextProps))
       .forEach((name) => {
-        if (name === STRINGS.style || name === OLD_STRINGS.style) {
-          DomStyle(dom, nextProps[STRINGS.style] || nextProps[OLD_STRINGS.style]);
-        } else if (name === STRINGS.className || name === OLD_STRINGS.className) {
-          handleClassName(dom, prevProps, nextProps, name);
+        if (name === STRINGS.style) {
+          DomStyle(dom, nextProps['ryunix-style']);
+        } else if (name === OLD_STRINGS.style) {
+          DomStyle(dom, nextProps.style);
+        } else if (name === STRINGS.className) {
+          if (nextProps['ryunix-class'] === '') {
+            throw new Error('data-class cannot be empty.')
+          }
+
+          prevProps['ryunix-class'] &&
+            dom.classList.remove(...prevProps['ryunix-class'].split(/\s+/));
+          dom.classList.add(...nextProps['ryunix-class'].split(/\s+/));
+        } else if (name === OLD_STRINGS.className) {
+          if (nextProps.className === '') {
+            throw new Error('className cannot be empty.')
+          }
+
+          prevProps.className &&
+            dom.classList.remove(...prevProps.className.split(/\s+/));
+          dom.classList.add(...nextProps.className.split(/\s+/));
         } else {
           dom[name] = nextProps[name];
         }
       });
 
-    // Add new event listeners
     Object.keys(nextProps)
       .filter(isEvent)
       .filter(isNew(prevProps, nextProps))
@@ -230,47 +449,16 @@
       });
   };
 
-  /**
-   * Updates the DOM element's style by applying the provided styles.
-   *
-   * @param dom - The DOM element that needs to be styled.
-   * @param style - An object containing the styles to be applied.
-   */
   const DomStyle = (dom, style) => {
     dom.style = Object.keys(style).reduce((acc, styleName) => {
-      const key = styleName.replace(
-        capitalLetterRegex,
-        (v) => `-${v.toLowerCase()}`,
-      );
+      const key = styleName.replace(reg, function (v) {
+        return '-' + v.toLowerCase()
+      });
       acc += `${key}: ${style[styleName]};`;
       return acc
     }, '');
   };
 
-  /**
-   * Handles updating the className or ryunix-class properties, ensuring
-   * that the old class names are removed and the new ones are applied.
-   *
-   * @param dom - The DOM element to be updated.
-   * @param prevProps - The previous properties, including className.
-   * @param nextProps - The new properties, including className.
-   * @param name - The name of the class property (className or ryunix-class).
-   */
-  const handleClassName = (dom, prevProps, nextProps, name) => {
-    const classProp = name === STRINGS.className ? 'ryunix-class' : 'className';
-
-    if (nextProps[classProp] === '') {
-      throw new Error(`${classProp} cannot be empty.`)
-    }
-
-    // Remove old class names if they exist
-    prevProps[classProp] &&
-      dom.classList.remove(...prevProps[classProp].split(/\s+/));
-
-    // Add new class names
-    dom.classList.add(...nextProps[classProp].split(/\s+/));
-  };
-
   var Dom = /*#__PURE__*/Object.freeze({
     __proto__: null,
     DomStyle: DomStyle,
@@ -282,10 +470,8 @@
    * The function commits changes made to the virtual DOM to the actual DOM.
    */
   const commitRoot = () => {
-    console.log('Committing root...');
     vars.deletions.forEach(commitWork);
     if (vars.wipRoot && vars.wipRoot.child) {
-      console.log('Committing child...');
       commitWork(vars.wipRoot.child);
       vars.currentRoot = vars.wipRoot;
     }
@@ -293,107 +479,57 @@
   };
 
   /**
-   * Helper function to find the DOM parent of a given fiber.
-   * It walks up the fiber tree until it finds a parent with a DOM node.
-   * @param {Object} fiber - The fiber node whose DOM parent needs to be found.
-   * @returns {HTMLElement} The DOM node of the fiber's parent.
-   */
-  const findDomParent = (fiber) => {
-    let domParentFiber = fiber.parent;
-    // Walk up the tree until a DOM node is found or the root is reached
-    while (domParentFiber && !domParentFiber.dom) {
-      domParentFiber = domParentFiber.parent;
-    }
-    return domParentFiber ? domParentFiber.dom : null
-  };
-
-  /**
-   * Safely removes a child DOM node from its parent, with error handling.
-   * @param {HTMLElement} domParent - The parent DOM node.
-   * @param {HTMLElement} childDom - The child DOM node to be removed.
-   */
-  const safeRemoveChild = (domParent, childDom) => {
-    try {
-      domParent.removeChild(childDom);
-    } catch (error) {
-      console.error('Error removing DOM child:', error);
-    }
-  };
-
-  /**
-   * The function handles the deletion of a fiber's corresponding DOM node.
-   * It removes the fiber's DOM element or recursively removes its child.
-   * @param {Object} fiber - The fiber node to be deleted.
-   * @param {HTMLElement} domParent - The parent DOM node from which the fiber's DOM node will be removed.
+   * The function commits changes made to the DOM based on the effect tag of the fiber.
+   * @param fiber - A fiber is a unit of work in Ryunix's reconciliation process. It represents a
+   * component and its state at a particular point in time. The `commitWork` function takes a fiber as a
+   * parameter to commit the changes made during the reconciliation process to the actual DOM.
+   * @returns The function does not return anything, it performs side effects by manipulating the DOM.
    */
-  const commitDeletion = (fiber, domParent) => {
-    if (fiber && fiber.dom) {
-      safeRemoveChild(domParent, fiber.dom);
-    } else if (fiber && fiber.child) {
-      commitDeletion(fiber.child, domParent);
+  const commitWork = (fiber) => {
+    if (!fiber) {
+      return
     }
-  };
 
-  /**
-   * Cleans up the effects associated with a fiber node, specifically for
-   * UPDATE and DELETION effect tags.
-   * @param {Object} fiber - The fiber node whose effects need to be cleaned up.
-   */
-  const cleanupEffects = (fiber) => {
-    if (
-      fiber.effectTag === EFFECT_TAGS.UPDATE ||
-      fiber.effectTag === EFFECT_TAGS.DELETION
-    ) {
-      cancelEffects(fiber);
+    let domParentFiber = fiber.parent;
+    while (!domParentFiber.dom) {
+      domParentFiber = domParentFiber.parent;
     }
-  };
+    const domParent = domParentFiber.dom;
 
-  /**
-   * An object that maps effect tags to their corresponding handling functions.
-   * Each function takes a fiber node and a DOM parent, and applies the necessary changes to the DOM.
-   */
-  const effectHandlers = {
-    [EFFECT_TAGS.PLACEMENT]: (fiber, domParent) => {
+    if (fiber.effectTag === EFFECT_TAGS.PLACEMENT) {
       if (fiber.dom != undefined) {
         domParent.appendChild(fiber.dom);
-        console.log('Appending child DOM node:', fiber.dom);
-      } else {
-        console.error('Failed to append DOM. Fiber has no DOM:', fiber);
       }
       runEffects(fiber);
-    },
-    [EFFECT_TAGS.UPDATE]: (fiber, domParent) => {
-      cleanupEffects(fiber); // Cleanup effects before updating
+    } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
+      cancelEffects(fiber);
       if (fiber.dom != undefined) {
         updateDom(fiber.dom, fiber.alternate.props, fiber.props);
       }
       runEffects(fiber);
-    },
-    [EFFECT_TAGS.DELETION]: (fiber, domParent) => {
-      cleanupEffects(fiber);
+    } else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
+      cancelEffects(fiber);
       commitDeletion(fiber, domParent);
-    },
+      return
+    }
+
+    commitWork(fiber.child);
+    commitWork(fiber.sibling);
   };
 
   /**
-   * The function commits changes made to the DOM based on the effect tag of the fiber.
-   * It handles PLACEMENT, UPDATE, and DELETION of DOM nodes, and processes child and sibling fibers.
-   * @param {Object} fiber - The fiber node whose changes need to be committed to the DOM.
+   * The function removes a fiber's corresponding DOM node from its parent node or recursively removes
+   * its child's DOM node until it finds a node to remove.
+   * @param fiber - a fiber node in a fiber tree, which represents a component or an element in the Ryunix
+   * application.
+   * @param domParent - The parent DOM element from which the fiber's DOM element needs to be removed.
    */
-  const commitWork = (fiber) => {
-    if (!fiber) return
-
-    const domParent = findDomParent(fiber);
-    if (!domParent) return // If no parent DOM found, skip
-
-    const effectHandler = effectHandlers[fiber.effectTag];
-    if (effectHandler) {
-      effectHandler(fiber, domParent);
+  const commitDeletion = (fiber, domParent) => {
+    if (fiber && fiber.dom) {
+      domParent.removeChild(fiber.dom);
+    } else if (fiber && fiber.child) {
+      commitDeletion(fiber.child, domParent);
     }
-
-    // Process child and sibling fibers recursively
-    commitWork(fiber.child);
-    commitWork(fiber.sibling);
   };
 
   var Commits = /*#__PURE__*/Object.freeze({
@@ -403,6 +539,20 @@
     commitWork: commitWork
   });
 
+  const isPropsChanged = (prevProps, nextProps) => {
+    for (let key in prevProps) {
+      if (prevProps[key] !== nextProps[key]) {
+        return true
+      }
+    }
+    for (let key in nextProps) {
+      if (!(key in prevProps)) {
+        return true
+      }
+    }
+    return false
+  };
+
   /**
    * This function reconciles the children of a fiber node with a new set of elements, creating new
    * fibers for new elements, updating existing fibers for elements with the same type, and marking old
@@ -420,20 +570,20 @@
     while (index < elements.length || oldFiber != undefined) {
       const element = elements[index];
       let newFiber;
-
       const sameType = oldFiber && element && element.type == oldFiber.type;
 
       if (sameType) {
         newFiber = {
-          type: oldFiber.type,
+          type: oldFiber ? oldFiber.type : undefined,
           props: element.props,
-          dom: oldFiber.dom,
+          dom: oldFiber ? oldFiber.dom : undefined,
           parent: wipFiber,
           alternate: oldFiber,
-          effectTag: EFFECT_TAGS.UPDATE,
+          effectTag: isPropsChanged(oldFiber.props, element.props)
+            ? EFFECT_TAGS.UPDATE
+            : null,
         };
-      }
-      if (element && !sameType) {
+      } else if (element) {
         newFiber = {
           type: element.type,
           props: element.props,
@@ -442,8 +592,7 @@
           alternate: undefined,
           effectTag: EFFECT_TAGS.PLACEMENT,
         };
-      }
-      if (!element && oldFiber) {
+      } else if (oldFiber) {
         oldFiber.effectTag = EFFECT_TAGS.DELETION;
         vars.deletions.push(oldFiber);
       }
@@ -469,36 +618,38 @@
   });
 
   /**
-   * Updates a function component by setting up a work-in-progress fiber,
-   * resetting the hook index, initializing an empty hooks array, rendering the component,
-   * and reconciling its children.
-   *
-   * @param fiber - The fiber node representing the function component being updated. It contains
-   *                properties such as the component type, props, and hooks.
+   * This function updates a function component by setting up a work-in-progress fiber, resetting the
+   * hook index, creating an empty hooks array, rendering the component, and reconciling its children.
+   * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
+   * contains information about the component, its props, state, and children. In this function, it is
+   * used to update the state of the component and its children.
    */
   const updateFunctionComponent = (fiber) => {
-    // Set the current work-in-progress fiber
-    vars.workInProgressFiber = fiber;
+    vars.wipFiber = fiber;
     vars.hookIndex = 0;
-    vars.workInProgressFiber.hooks = [];
-
+    vars.wipFiber.hooks = [];
     const children = fiber.type(fiber.props);
-    reconcileChildren(fiber, children);
+    let childArr = [];
+    if (Array.isArray(children)) {
+      // Fragment results returns array
+      childArr = [...children];
+    } else {
+      // Normal function component returns single root node
+      childArr = [children];
+    }
+    reconcileChildren(fiber, childArr);
   };
+
   /**
-   * Updates a host component's DOM element and reconciles its children.
-   * This function handles standard DOM elements like div, span, etc.
-   *
-   * @param fiber - A fiber node representing the host component (e.g., a DOM node like div, span, etc.).
+   * This function updates a host component's DOM element and reconciles its children.
+   * @param fiber - A fiber is a unit of work in Ryunix that represents a component and its state. It
+   * contains information about the component's type, props, and children, as well as pointers to other
+   * fibers in the tree.
    */
   const updateHostComponent = (fiber) => {
-    // If the fiber doesn't already have a DOM node, create one
     if (!fiber.dom) {
       fiber.dom = createDom(fiber);
-      console.log('DOM node created:', fiber.dom);
     }
-
-    // Reconcile the fiber's children with its new or updated props
     reconcileChildren(fiber, fiber.props.children);
   };
 
@@ -509,13 +660,15 @@
   });
 
   /**
-   * Main work loop that processes the fiber tree using requestIdleCallback.
-   * It continues processing until all units of work are completed or the browser needs to yield.
-   * @param {IdleDeadline} deadline - Represents the time remaining for the browser to execute tasks before yielding.
+   * This function uses requestIdleCallback to perform work on a fiber tree until it is complete or the
+   * browser needs to yield to other tasks.
+   * @param deadline - The `deadline` parameter is an object that represents the amount of time the
+   * browser has to perform work before it needs to handle other tasks. It has a `timeRemaining()` method
+   * that returns the amount of time remaining before the deadline is reached. The `shouldYield` variable
+   * is used to determine
    */
   const workLoop = (deadline) => {
     let shouldYield = false;
-
     while (vars.nextUnitOfWork && !shouldYield) {
       vars.nextUnitOfWork = performUnitOfWork(vars.nextUnitOfWork);
       shouldYield = deadline.timeRemaining() < 1;
@@ -525,32 +678,43 @@
       commitRoot();
     }
 
-    requestIdleCallback(workLoop);
+    if (vars.nextUnitOfWork) {
+      requestIdleCallback(workLoop, { timeout: 100 });
+    }
   };
 
-  // Start the work loop for the first time
   requestIdleCallback(workLoop);
 
   /**
-   * Processes a unit of work in the fiber tree.
-   * Decides whether to update a function component or a host component (DOM element).
-   * @param {Object} fiber - The current fiber representing a component and its state in the virtual DOM tree.
-   * @returns {null} The next fiber to process, or undefined if there are no more.
+   * The function performs a unit of work by updating either a function component or a host component and
+   * returns the next fiber to be processed.
+   * @param fiber - A fiber is a unit of work in Ryunix that represents a component and its state. It
+   * contains information about the component's type, props, and children, as well as pointers to its
+   * parent, child, and sibling fibers. The `performUnitOfWork` function takes a fiber as a parameter and
+   * performs work
+   * @returns The function `performUnitOfWork` returns the next fiber to be processed. If the current
+   * fiber has a child, it returns the child. Otherwise, it looks for the next sibling of the current
+   * fiber. If there are no more siblings, it goes up the tree to the parent and looks for the next
+   * sibling of the parent. The function returns `undefined` if there are no more fibers to process.
    */
   const performUnitOfWork = (fiber) => {
-    console.log('Performing unit of work for fiber:', fiber);
     const isFunctionComponent = fiber.type instanceof Function;
-    isFunctionComponent
-      ? updateFunctionComponent(fiber)
-      : updateHostComponent(fiber);
-
-    if (fiber.child) return fiber.child
+    if (isFunctionComponent) {
+      updateFunctionComponent(fiber);
+    } else {
+      updateHostComponent(fiber);
+    }
+    if (fiber.child) {
+      return fiber.child
+    }
     let nextFiber = fiber;
     while (nextFiber) {
-      if (nextFiber.sibling) return nextFiber.sibling
+      if (nextFiber.sibling) {
+        return nextFiber.sibling
+      }
       nextFiber = nextFiber.parent;
     }
-    return null
+    return undefined
   };
 
   var Workers = /*#__PURE__*/Object.freeze({
@@ -559,116 +723,6 @@
     workLoop: workLoop
   });
 
-  /**
-   * Renders an element into the specified container or the default root element.
-   */
-  const render = (element, container) => {
-    vars.wipRoot = {
-      dom: vars.containerRoot || container,
-      props: { children: [element] },
-      alternate: vars.currentRoot,
-    };
-
-    console.log('Rendering element:', element);
-    console.log('Rendering to container:', vars.wipRoot.dom);
-
-    vars.deletions = [];
-    vars.nextUnitOfWork = vars.wipRoot;
-    requestIdleCallback(workLoop);
-  };
-
-  /**
-   * Initializes the app with a root container.
-   */
-  const init = (rootId = '__ryunix') => {
-    const rootElement = document.getElementById(rootId);
-    if (!rootElement) {
-      console.error(`Root element with ID '${rootId}' not found.`);
-      return null
-    }
-    console.log('Container initialized:', vars.containerRoot);
-
-    vars.containerRoot = rootElement;
-    return undefined
-  };
-
-  /**
-   * useStore is similar to useState in React, managing local state within a functional component.
-   */
-  const useStore = (initial) => {
-    const oldHook = vars.workInProgressFiber.alternate?.hooks?.[vars.hookIndex];
-    const hook = { state: oldHook ? oldHook.state : initial, queue: [] };
-
-    const actions = oldHook ? oldHook.queue : [];
-    actions.forEach((action) => {
-      hook.state = typeof action === 'function' ? action(hook.state) : action;
-    });
-
-    const setState = (action) => {
-      hook.queue.push(action);
-      vars.wipRoot = {
-        dom: vars.currentRoot.dom,
-        props: vars.currentRoot.props,
-        alternate: vars.currentRoot,
-      };
-      vars.nextUnitOfWork = vars.wipRoot;
-      vars.deletions = [];
-    };
-
-    vars.workInProgressFiber.hooks.push(hook);
-    vars.hookIndex++;
-    return [hook.state, setState]
-  };
-
-  /**
-   * useEffect runs side effects after rendering based on dependencies.
-   */
-  const useEffect = (callback, deps) => {
-    const oldHook = vars.workInProgressFiber.alternate?.hooks?.[vars.hookIndex];
-    const hook = { type: 'effect', deps };
-
-    const hasChanged = !oldHook || !lodash.isEqual(oldHook.deps, deps);
-    if (hasChanged) {
-      const cleanup = callback();
-      hook.cleanup = cleanup;
-    }
-
-    vars.workInProgressFiber.hooks.push(hook);
-    vars.hookIndex++;
-  };
-
-  /**
-   * useRef creates a mutable ref object to store values across renders.
-   */
-  const useRef = (initialValue) => {
-    const oldHook = vars.workInProgressFiber.alternate?.hooks?.[vars.hookIndex];
-    const hook = { value: oldHook ? oldHook.value : { current: initialValue } };
-
-    vars.workInProgressFiber.hooks.push(hook);
-    vars.hookIndex++;
-    return hook.value
-  };
-
-  /**
-   * useMemo memoizes a value to avoid recomputations.
-   */
-  const useMemo = (computeFn, deps) => {
-    const oldHook = vars.workInProgressFiber.alternate?.hooks?.[vars.hookIndex];
-    const hook = {
-      deps,
-      value: oldHook && lodash.isEqual(deps, oldHook.deps) ? oldHook.value : computeFn(),
-    };
-
-    vars.workInProgressFiber.hooks.push(hook);
-    vars.hookIndex++;
-    return hook.value
-  };
-
-  /**
-   * useCallback memoizes a callback function to avoid unnecessary recreations.
-   */
-  const useCallback = (callback, deps) => useMemo(() => callback, deps);
-
   var Ryunix = {
     createElement,
     render,
@@ -688,7 +742,9 @@
   exports.useCallback = useCallback;
   exports.useEffect = useEffect;
   exports.useMemo = useMemo;
+  exports.useQuery = useQuery;
   exports.useRef = useRef;
+  exports.useRouter = useRouter;
   exports.useStore = useStore;
 
   Object.defineProperty(exports, '__esModule', { value: true });