@unsetsoft/ryunixjs 1.1.2 → 1.1.3-nightly.2

package/dist/Ryunix.js

@@ -1,773 +1 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'lodash'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Ryunix = {}, global.lodash));
-})(this, (function (exports, lodash) { 'use strict';
-
-  const vars = {
-    containerRoot: undefined,
-    nextUnitOfWork: undefined,
-    currentRoot: undefined,
-    wipRoot: undefined,
-    deletions: undefined,
-    wipFiber: undefined,
-    hookIndex: undefined,
-  };
-
-  const reg = /[A-Z]/g;
-
-  const RYUNIX_TYPES = Object.freeze({
-    TEXT_ELEMENT: Symbol('text.element'),
-    RYUNIX_EFFECT: Symbol('ryunix.effect'),
-    RYUNIX_MEMO: Symbol('ryunix.memo'),
-    RYUNIX_URL_QUERY: Symbol('ryunix.urlQuery'),
-    RYUNIX_REF: Symbol('ryunix.ref'),
-  });
-
-  const STRINGS = Object.freeze({
-    object: 'object',
-    function: 'function',
-    style: 'ryunix-style',
-    className: 'ryunix-class',
-    children: 'children',
-    boolean: 'boolean',
-  });
-
-  const OLD_STRINGS = Object.freeze({
-    style: 'style',
-    className: 'className',
-  });
-
-  const EFFECT_TAGS = Object.freeze({
-    PLACEMENT: Symbol(),
-    UPDATE: Symbol(),
-    DELETION: Symbol(),
-  });
-
-  const Fragment = (props) => {
-    return props.children
-  };
-
-  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);
-    }
-    return out
-  };
-
-  /**
-   * 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, []);
-    const key =
-      props && props.key
-        ? props.key
-        : `${type}-${Math.random().toString(36).substring(2, 9)}`;
-
-    return {
-      type,
-      props: {
-        ...props,
-        key,
-        children: children.map((child) =>
-          typeof child === STRINGS.object ? child : createTextElement(child),
-        ),
-      },
-    }
-  };
-
-  /**
-   * 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: [],
-      },
-    }
-  };
-
-  /**
-   * Renders an element into a container using a work-in-progress (WIP) root.
-   * @function render
-   * @param {Object|HTMLElement} element - The element to be rendered in the container. It can be a Ryunix component (custom element) or a standard DOM element.
-   * @param {HTMLElement} container - The container where the element will be rendered. This parameter is optional if `createRoot()` is used beforehand to set up the container.
-   * @description The function assigns the `container` to a work-in-progress root and sets up properties for reconciliation, including children and the reference to the current root.
-   * It also clears any scheduled deletions and establishes the next unit of work for incremental rendering.
-   */
-  const render = (element, container) => {
-    vars.wipRoot = {
-      dom: vars.containerRoot || container,
-      props: {
-        children: [element],
-      },
-      alternate: vars.currentRoot,
-    };
-
-    vars.deletions = [];
-    vars.nextUnitOfWork = vars.wipRoot;
-  };
-
-  /**
-   * Initializes the application by creating a reference to a DOM element with the specified ID and rendering the main component.
-   * @function init
-   * @param {Object} MainElement - The main component to render, typically the root component of the application.
-   * @param {string} [root='__ryunix'] - The ID of the HTML element that serves as the container for the root element. Defaults to `'__ryunix'` if not provided.
-   * @example
-   * Ryunix.init(App, "__ryunix"); // Initializes and renders the App component into the <div id="__ryunix"></div> element.
-   * @description This function retrieves the container element by its ID and invokes the `render` function to render the main component into it.
-   */
-  const init = (MainElement, root = '__ryunix') => {
-    vars.containerRoot = document.getElementById(root);
-
-    render(MainElement, vars.containerRoot);
-  };
-
-  /**
-   * @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 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: oldHook ? [...oldHook.queue] : [],
-    };
-
-    hook.queue.forEach((action) => {
-      hook.state =
-        typeof action === STRINGS.function ? action(hook.state) : action;
-    });
-
-    hook.queue = [];
-
-    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]
-  };
-
-  /**
-   * 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++;
-    }
-  };
-
-  /**
-   * 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 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);
-      }
-    }, []);
-
-    let currentRoute = routes.find((route) => route.path === location);
-    if (!currentRoute) {
-      currentRoute = {
-        component: routes.find((route) => route.NotFound)?.NotFound || null,
-      };
-    }
-
-    const Children = () =>
-      currentRoute.component ? currentRoute.component : null;
-
-    const NavLink = ({ to, ...props }) => {
-      const { children, ...restProps } = props;
-
-      const NewProps = {
-        href: to,
-        onClick: (e) => {
-          e.preventDefault();
-          navigate(to);
-        },
-        ...restProps,
-      };
-      return createElement('a', NewProps, children)
-    };
-
-    return { Children, navigate, NavLink }
-  };
-
-  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);
-
-  /**
-   * 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) {
-      fiber.hooks
-        .filter((hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.cancel)
-        .forEach((effectHook) => {
-          effectHook.cancel();
-        });
-    }
-  };
-
-  /**
-   * 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) {
-      fiber.hooks
-        .filter((hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.effect)
-        .forEach((effectHook) => {
-          effectHook.cancel = effectHook.effect();
-        });
-    }
-  };
-
-  /**
-   * 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) => {
-    const dom =
-      fiber.type == RYUNIX_TYPES.TEXT_ELEMENT
-        ? document.createTextNode('')
-        : document.createElement(fiber.type);
-
-    updateDom(dom, {}, fiber.props);
-
-    return dom
-  };
-
-  /**
-   * 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) => {
-    Object.keys(prevProps)
-      .filter(isEvent)
-      .filter((key) => isGone(nextProps)(key) || isNew(prevProps, nextProps)(key))
-      .forEach((name) => {
-        const eventType = name.toLowerCase().substring(2);
-        dom.removeEventListener(eventType, prevProps[name]);
-      });
-
-    Object.keys(prevProps)
-      .filter(isProperty)
-      .filter(isGone(nextProps))
-      .forEach((name) => {
-        dom[name] = '';
-      });
-
-    Object.keys(nextProps)
-      .filter(isProperty)
-      .filter(isNew(prevProps, nextProps))
-      .forEach((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];
-        }
-      });
-
-    Object.keys(nextProps)
-      .filter(isEvent)
-      .filter(isNew(prevProps, nextProps))
-      .forEach((name) => {
-        const eventType = name.toLowerCase().substring(2);
-        dom.addEventListener(eventType, nextProps[name]);
-      });
-  };
-
-  const DomStyle = (dom, style) => {
-    dom.style = Object.keys(style).reduce((acc, styleName) => {
-      const key = styleName.replace(reg, function (v) {
-        return '-' + v.toLowerCase()
-      });
-      acc += `${key}: ${style[styleName]};`;
-      return acc
-    }, '');
-  };
-
-  var Dom = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    DomStyle: DomStyle,
-    createDom: createDom,
-    updateDom: updateDom
-  });
-
-  /**
-   * The function commits changes made to the virtual DOM to the actual DOM.
-   */
-  const commitRoot = () => {
-    vars.deletions.forEach(commitWork);
-    if (vars.wipRoot && vars.wipRoot.child) {
-      commitWork(vars.wipRoot.child);
-      vars.currentRoot = vars.wipRoot;
-    }
-    vars.wipRoot = undefined;
-  };
-
-  /**
-   * 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 commitWork = (fiber) => {
-    if (!fiber) return
-
-    let domParentFiber = fiber.parent;
-    while (!domParentFiber.dom) {
-      domParentFiber = domParentFiber.parent;
-    }
-    const domParent = domParentFiber.dom;
-
-    if (fiber.effectTag === EFFECT_TAGS.PLACEMENT) {
-      if (fiber.dom != undefined) {
-        domParent.appendChild(fiber.dom);
-      }
-      runEffects(fiber);
-    }
-
-    if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
-      cancelEffects(fiber);
-      if (fiber.dom != undefined) {
-        updateDom(fiber.dom, fiber.alternate.props, fiber.props);
-      }
-      runEffects(fiber);
-    }
-
-    if (fiber.effectTag === EFFECT_TAGS.DELETION) {
-      commitDeletion(fiber, domParent);
-      cancelEffects(fiber);
-      return
-    }
-
-    commitWork(fiber.child);
-    commitWork(fiber.sibling);
-  };
-
-  /**
-   * 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 commitDeletion = (fiber, domParent) => {
-    if (fiber.dom) {
-      domParent.removeChild(fiber.dom);
-    } else {
-      commitDeletion(fiber.child, domParent);
-    }
-  };
-
-  var Commits = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    commitDeletion: commitDeletion,
-    commitRoot: commitRoot,
-    commitWork: commitWork
-  });
-
-  /**
-   * 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
-   * fibers for deletion if they are not present in the new set of elements.
-   * @param wipFiber - A work-in-progress fiber object representing a component or element in the virtual
-   * DOM tree.
-   * @param elements - an array of elements representing the new children to be rendered in the current
-   * fiber's subtree
-   */
-  const reconcileChildren = (wipFiber, elements) => {
-    let index = 0;
-    let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
-    let prevSibling = null;
-
-    const oldFibersMap = new Map();
-    while (oldFiber) {
-      const oldKey = oldFiber.props.key || oldFiber.type;
-      oldFibersMap.set(oldKey, oldFiber);
-      oldFiber = oldFiber.sibling;
-    }
-
-    while (index < elements.length) {
-      const element = elements[index];
-      const key = element.props.key || element.type;
-      const oldFiber = oldFibersMap.get(key);
-
-      let newFiber;
-      const sameType = oldFiber && element && element.type === oldFiber.type;
-
-      if (sameType) {
-        newFiber = {
-          type: oldFiber.type,
-          props: element.props,
-          dom: oldFiber.dom,
-          parent: wipFiber,
-          alternate: oldFiber,
-          effectTag: EFFECT_TAGS.UPDATE,
-        };
-        oldFibersMap.delete(key);
-      } else if (element) {
-        newFiber = {
-          type: element.type,
-          props: element.props,
-          dom: undefined,
-          parent: wipFiber,
-          alternate: undefined,
-          effectTag: EFFECT_TAGS.PLACEMENT,
-        };
-      }
-
-      oldFibersMap.forEach((oldFiber) => {
-        oldFiber.effectTag = EFFECT_TAGS.DELETION;
-        vars.deletions.push(oldFiber);
-      });
-
-      if (index === 0) {
-        wipFiber.child = newFiber;
-      } else if (prevSibling) {
-        prevSibling.sibling = newFiber;
-      }
-
-      prevSibling = newFiber;
-      index++;
-    }
-  };
-
-  var Reconciler = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    reconcileChildren: reconcileChildren
-  });
-
-  /**
-   * 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) => {
-    vars.wipFiber = fiber;
-    vars.hookIndex = 0;
-    vars.wipFiber.hooks = [];
-    const children = fiber.type(fiber.props);
-    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);
-  };
-
-  /**
-   * 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 (!fiber.dom) {
-      fiber.dom = createDom(fiber);
-    }
-    reconcileChildren(fiber, fiber.props.children);
-  };
-
-  var Components = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    updateFunctionComponent: updateFunctionComponent,
-    updateHostComponent: updateHostComponent
-  });
-
-  /**
-   * 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;
-    }
-
-    if (!vars.nextUnitOfWork && vars.wipRoot) {
-      commitRoot();
-    }
-
-    requestIdleCallback(workLoop);
-  };
-
-  requestIdleCallback(workLoop);
-
-  /**
-   * 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) => {
-    const isFunctionComponent = fiber.type instanceof Function;
-    if (isFunctionComponent) {
-      updateFunctionComponent(fiber);
-    } else {
-      updateHostComponent(fiber);
-    }
-    if (fiber.child) {
-      return fiber.child
-    }
-    let nextFiber = fiber;
-    while (nextFiber) {
-      if (nextFiber.sibling) {
-        return nextFiber.sibling
-      }
-      nextFiber = nextFiber.parent;
-    }
-    return undefined
-  };
-
-  var Workers = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    performUnitOfWork: performUnitOfWork,
-    workLoop: workLoop
-  });
-
-  var Ryunix = {
-    createElement,
-    render,
-    init,
-    Fragment,
-    Dom,
-    Workers,
-    Reconciler,
-    Components,
-    Commits,
-  };
-
-  window.Ryunix = Ryunix;
-
-  exports.Fragment = Fragment;
-  exports.default = Ryunix;
-  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 });
-
-}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("lodash")):"function"==typeof define&&define.amd?define(["exports","lodash"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Ryunix={},e.lodash)}(this,(function(e,t){"use strict";const o={containerRoot:void 0,nextUnitOfWork:void 0,currentRoot:void 0,wipRoot:void 0,deletions:void 0,wipFiber:void 0,hookIndex:void 0},r=/[A-Z]/g,n=Object.freeze({TEXT_ELEMENT:Symbol("text.element"),RYUNIX_EFFECT:Symbol("ryunix.effect"),RYUNIX_MEMO:Symbol("ryunix.memo"),RYUNIX_URL_QUERY:Symbol("ryunix.urlQuery"),RYUNIX_REF:Symbol("ryunix.ref")}),i=Object.freeze({object:"object",function:"function",style:"ryunix-style",className:"ryunix-class",children:"children",boolean:"boolean"}),s=Object.freeze({style:"style",className:"className"}),a=Object.freeze({PLACEMENT:Symbol(),UPDATE:Symbol(),DELETION:Symbol()}),l=e=>e.children,c=(e,t)=>(t=t||[],null==e||typeof e==i.boolean||(Array.isArray(e)?e.some((e=>{c(e,t)})):t.push(e)),t),p=(e,t,...o)=>{o=c(o,[]);const r=t&&t.key?t.key:`${e}-${Math.random().toString(36).substring(2,9)}`;return{type:e,props:{...t,key:r,children:o.map((e=>typeof e===i.object?e:u(e)))}}},u=e=>({type:n.TEXT_ELEMENT,props:{nodeValue:e,children:[]}}),d=(e,t)=>{o.wipRoot={dom:o.containerRoot||t,props:{children:[e]},alternate:o.currentRoot},o.deletions=[],o.nextUnitOfWork=o.wipRoot},f=e=>{const t=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],r={state:t?t.state:e,queue:t?[...t.queue]:[]};r.queue.forEach((e=>{r.state=typeof e===i.function?e(r.state):e})),r.queue=[];return o.wipFiber&&o.wipFiber.hooks&&(o.wipFiber.hooks.push(r),o.hookIndex++),[r.state,e=>{r.queue.push(e),o.wipRoot={dom:o.currentRoot.dom,props:o.currentRoot.props,alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[]}]},m=(e,r)=>{const i=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],s={type:n.RYUNIX_EFFECT,deps:r};i&&t.isEqual(i.deps,s.deps)||e(),o.wipFiber.hooks&&(o.wipFiber.hooks.push(s),o.hookIndex++)},h=(e,r)=>{const i=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],s={type:n.RYUNIX_MEMO,value:null,deps:r};return i&&t.isEqual(i.deps,s.deps)?s.value=i.value:s.value=e(),o.wipFiber.hooks&&(o.wipFiber.hooks.push(s),o.hookIndex++),s.value},y=()=>{const e=new URLSearchParams(window.location.search),t={};for(let[o,r]of e.entries())t[o]=r;return t},b=e=>e.startsWith("on"),E=e=>e!==i.children&&!b(e),w=(e,t)=>o=>e[o]!==t[o],k=e=>t=>!(t in e),R=e=>{e.hooks&&e.hooks.filter((e=>e.tag===n.RYUNIX_EFFECT&&e.cancel)).forEach((e=>{e.cancel()}))},F=e=>{e.hooks&&e.hooks.filter((e=>e.tag===n.RYUNIX_EFFECT&&e.effect)).forEach((e=>{e.cancel=e.effect()}))},x=e=>{const t=e.type==n.TEXT_ELEMENT?document.createTextNode(""):document.createElement(e.type);return _(t,{},e.props),t},_=(e,t,o)=>{Object.keys(t).filter(b).filter((e=>k(o)(e)||w(t,o)(e))).forEach((o=>{const r=o.toLowerCase().substring(2);e.removeEventListener(r,t[o])})),Object.keys(t).filter(E).filter(k(o)).forEach((t=>{e[t]=""})),Object.keys(o).filter(E).filter(w(t,o)).forEach((r=>{if(r===i.style)v(e,o["ryunix-style"]);else if(r===s.style)v(e,o.style);else if(r===i.className){if(""===o["ryunix-class"])throw new Error("data-class cannot be empty.");t["ryunix-class"]&&e.classList.remove(...t["ryunix-class"].split(/\s+/)),e.classList.add(...o["ryunix-class"].split(/\s+/))}else if(r===s.className){if(""===o.className)throw new Error("className cannot be empty.");t.className&&e.classList.remove(...t.className.split(/\s+/)),e.classList.add(...o.className.split(/\s+/))}else e[r]=o[r]})),Object.keys(o).filter(b).filter(w(t,o)).forEach((t=>{const r=t.toLowerCase().substring(2);e.addEventListener(r,o[t])}))},v=(e,t)=>{e.style=Object.keys(t).reduce(((e,o)=>e+=`${o.replace(r,(function(e){return"-"+e.toLowerCase()}))}: ${t[o]};`),"")};var N=Object.freeze({__proto__:null,DomStyle:v,createDom:x,updateDom:_});const g=()=>{o.deletions.forEach(T),o.wipRoot&&o.wipRoot.child&&(T(o.wipRoot.child),o.currentRoot=o.wipRoot),o.wipRoot=void 0},T=e=>{if(!e)return;let t=e.parent;for(;!t.dom;)t=t.parent;const o=t.dom;if(e.effectTag===a.PLACEMENT&&(null!=e.dom&&o.appendChild(e.dom),F(e)),e.effectTag===a.UPDATE&&(R(e),null!=e.dom&&_(e.dom,e.alternate.props,e.props),F(e)),e.effectTag===a.DELETION)return O(e,o),void R(e);T(e.child),T(e.sibling)},O=(e,t)=>{e.dom?t.removeChild(e.dom):O(e.child,t)};var I=Object.freeze({__proto__:null,commitDeletion:O,commitRoot:g,commitWork:T});const L=(e,t)=>{let r=0,n=e.alternate&&e.alternate.child,i=null;const s=new Map;for(;n;){const e=n.props.key||n.type;s.set(e,n),n=n.sibling}for(;r<t.length;){const n=t[r],l=n.props.key||n.type,c=s.get(l);let p;c&&n&&n.type===c.type?(p={type:c.type,props:n.props,dom:c.dom,parent:e,alternate:c,effectTag:a.UPDATE},s.delete(l)):n&&(p={type:n.type,props:n.props,dom:void 0,parent:e,alternate:void 0,effectTag:a.PLACEMENT}),s.forEach((e=>{e.effectTag=a.DELETION,o.deletions.push(e)})),0===r?e.child=p:i&&(i.sibling=p),i=p,r++}};var U=Object.freeze({__proto__:null,reconcileChildren:L});const C=e=>{o.wipFiber=e,o.hookIndex=0,o.wipFiber.hooks=[];const t=e.type(e.props);let r=[];r=Array.isArray(t)?[...t]:[t],L(e,r)},j=e=>{e.dom||(e.dom=x(e)),L(e,e.props.children)};var M=Object.freeze({__proto__:null,updateFunctionComponent:C,updateHostComponent:j});const S=e=>{let t=!1;for(;o.nextUnitOfWork&&!t;)o.nextUnitOfWork=D(o.nextUnitOfWork),t=e.timeRemaining()<1;!o.nextUnitOfWork&&o.wipRoot&&g(),requestIdleCallback(S)};requestIdleCallback(S);const D=e=>{if(e.type instanceof Function?C(e):j(e),e.child)return e.child;let t=e;for(;t;){if(t.sibling)return t.sibling;t=t.parent}};var X={createElement:p,render:d,init:(e,t="__ryunix")=>{o.containerRoot=document.getElementById(t),d(e,o.containerRoot)},Fragment:l,Dom:N,Workers:Object.freeze({__proto__:null,performUnitOfWork:D,workLoop:S}),Reconciler:U,Components:M,Commits:I};window.Ryunix=X,e.Fragment=l,e.default=X,e.useCallback=(e,t)=>h((()=>e),t),e.useEffect=m,e.useMemo=h,e.useQuery=y,e.useRef=e=>{const t=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],r={type:n.RYUNIX_REF,value:t?t.value:{current:e}};return o.wipFiber.hooks&&(o.wipFiber.hooks.push(r),o.hookIndex++),r.value},e.useRouter=e=>{const[t,o]=f(window.location.pathname),r=e=>{window.history.pushState({},"",e),n(e)},n=e=>{o(e.split("?")[0])};m((()=>{const e=()=>n(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]);const i=((e,t)=>{const o=t.split("?")[0];for(const{path:t,component:r}of e){if(!t)continue;const e=[],n=new RegExp(`^${t.replace(/:\w+/g,(()=>(e.push(RegExp.$_),"([^/]+)")))}$`),i=o.match(n);if(i){return{route:{component:r},params:e.reduce(((e,t,o)=>({...e,[t.substring(1)]:i[o+1]})),{})}}}const r=e.find((e=>e.NotFound));return r?{route:{component:r.NotFound},params:{}}:{route:{component:null},params:{}}})(e,t);return{Children:()=>{const e=y();return i.route.component?i.route.component({params:i.params,query:e}):null},NavLink:({to:e,...t})=>p("a",{href:e,onClick:t=>{t.preventDefault(),r(e)},...t},t.children),navigate:r}},e.useStore=f,Object.defineProperty(e,"__esModule",{value:!0})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "1.1.2",
+  "version": "1.1.3-nightly.2",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
   "types": "./dist/Ryunix.d.ts",
@@ -10,7 +10,7 @@
   },
   "homepage": "https://github.com/UnSetSoft/Ryunixjs#readme",
   "scripts": {
-    "build:js": "rollup ./src/main.js --file ./dist/Ryunix.js --format umd --name Ryunix",
+    "build:js": "rollup ./src/main.js --file ./dist/Ryunix.js --format umd --name Ryunix --plugin @rollup/plugin-terser",
     "prepublishOnly": "npm run build:js",
     "postinstall": "npm run build:js",
     "nightly:release": "npm publish --tag nightly",
@@ -18,6 +18,7 @@
     "lint": "eslint . --ext .ts --fix --max-warnings=0 --config .eslintrc.js --no-eslintrc"
   },
   "dependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
     "eslint": "8.56.0",
     "lodash": "^4.17.20",
     "rollup": "4.9.2"

package/src/lib/hooks.js

@@ -80,36 +80,6 @@ const useEffect = (callback, deps) => {
   }
 }
 
-/**
- * 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 useRef = (initial) => {
   const oldHook =
     vars.wipFiber.alternate &&
@@ -158,54 +128,152 @@ const useMemo = (comp, deps) => {
 
   return hook.value
 }
+
 const useCallback = (callback, deps) => {
   return useMemo(() => callback, deps)
 }
 
+/**
+ * The `useQuery` function parses the query parameters from the URL and returns them as an object.
+ * @returns An object containing key-value pairs of the query parameters from the URLSearchParams in
+ * the current window's URL is being returned.
+ */
+const useQuery = () => {
+  const searchParams = new URLSearchParams(window.location.search)
+  const query = {}
+  for (let [key, value] of searchParams.entries()) {
+    query[key] = value
+  }
+  return query
+}
+
+/**
+ * useRouter is a routing function to manage navigation and route matching.
+ *
+ * This function handles client-side routing, URL updates, and component rendering based on defined routes.
+ * It supports dynamic routes (e.g., "/user/:id") and allows navigation using links.
+ *
+ * @param {Array} routes - An array of route objects, each containing:
+ *    - `path` (string): The URL path to match (supports dynamic segments like "/user/:id").
+ *    - `component` (function): The component to render when the route matches.
+ *    - `NotFound` (optional function): Component to render for unmatched routes (default 404 behavior).
+ *
+ * @returns {Object} - An object with:
+ *    - `Children` (function): Returns the component that matches the current route, passing route parameters and query parameters as props.
+ *    - `NavLink` (component): A link component to navigate within the application without refreshing the page.
+ *
+ * @example
+ * // Define routes
+ * const routes = [
+ *   {
+ *     path: "/",
+ *     component: HomePage,
+ *   },
+ *   {
+ *     path: "/user/:id",
+ *     component: UserProfile,
+ *   },
+ *   {
+ *     path: "*",
+ *     NotFound: NotFoundPage,
+ *   },
+ * ];
+ *
+ * // Use the routing function
+ * const { Children, NavLink } = useRouter(routes);
+ *
+ * // Render the matched component
+ * const App = () => (
+ *   <div>
+ *     <NavLink to="/">Home</NavLink>
+ *     <NavLink to="/user/123">User Profile</NavLink>
+ *     <Children />
+ *   </div>
+ * );
+ *
+ * // Example: UserProfile Component that receives route parameters
+ * const UserProfile = ({ params, query }) => {
+ *   return (
+ *     <div>
+ *       <h1>User ID: {params.id}</h1>
+ *       <p>Query Parameters: {JSON.stringify(query)}</p>
+ *     </div>
+ *   );
+ * };
+ */
+
 const useRouter = (routes) => {
   const [location, setLocation] = useStore(window.location.pathname)
 
   const navigate = (path) => {
     window.history.pushState({}, '', path)
-    setLocation(path)
+    updateRoute(path)
   }
 
-  useEffect(() => {
-    const onPopState = () => {
-      setLocation(window.location.pathname)
-    }
+  const updateRoute = (path) => {
+    setLocation(path.split('?')[0])
+  }
 
+  useEffect(() => {
+    const onPopState = () => updateRoute(window.location.pathname)
     window.addEventListener('popstate', onPopState)
-    return () => {
-      window.removeEventListener('popstate', onPopState)
-    }
+    return () => window.removeEventListener('popstate', onPopState)
   }, [])
 
-  let currentRoute = routes.find((route) => route.path === location)
-  if (!currentRoute) {
-    currentRoute = {
-      component: routes.find((route) => route.NotFound)?.NotFound || null,
+  const findCurrentRoute = (routes, path) => {
+    const pathname = path.split('?')[0]
+
+    for (const { path: routePath, component } of routes) {
+      if (!routePath) continue
+
+      const keys = []
+      const pattern = new RegExp(
+        `^${routePath.replace(/:\w+/g, () => (keys.push(RegExp.$_), '([^/]+)'))}$`,
+      )
+
+      const match = pathname.match(pattern)
+      if (match) {
+        const params = keys.reduce(
+          (acc, key, index) => ({
+            ...acc,
+            [key.substring(1)]: match[index + 1],
+          }),
+          {},
+        )
+        return { route: { component }, params }
+      }
     }
+
+    const notFoundRoute = routes.find((route) => route.NotFound)
+    return notFoundRoute
+      ? { route: { component: notFoundRoute.NotFound }, params: {} }
+      : { route: { component: null }, params: {} }
   }
 
-  const Children = () =>
-    currentRoute.component ? currentRoute.component : null
+  const currentRouteData = findCurrentRoute(routes, location)
+  const Children = () => {
+    const query = useQuery()
+    return currentRouteData.route.component
+      ? currentRouteData.route.component({
+          params: currentRouteData.params,
+          query,
+        })
+      : null
+  }
 
   const NavLink = ({ to, ...props }) => {
-    const { children, ...restProps } = props
-
-    const NewProps = {
-      href: to,
-      onClick: (e) => {
-        e.preventDefault()
-        navigate(to)
-      },
-      ...restProps,
+    const handleClick = (e) => {
+      e.preventDefault()
+      navigate(to)
     }
-    return createElement('a', NewProps, children)
+    return createElement(
+      'a',
+      { href: to, onClick: handleClick, ...props },
+      props.children,
+    )
   }
 
-  return { Children, navigate, NavLink }
+  return { Children, NavLink, navigate }
 }
 
 export {