@unsetsoft/ryunixjs 1.0.0-alpha.0 → 1.0.1

package/dist/Ryunix.js

@@ -1,186 +1,736 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Ryunix = {}));
-})(this, (function (exports) { 'use strict';
-
-  /**
-   * This function updates the properties and event listeners of a DOM element based on the previous and
-   * next props passed as arguments.
-   * @param dom - The DOM element that needs to be updated with new properties.
-   * @param prevProps - An object representing the previous properties of a DOM element.
-   * @param nextProps - An object containing the new props that need to be updated on the DOM element.
-   */
-  function updateDomProperties(dom, prevProps, nextProps) {
-    const isEvent = name => name.startsWith("on");
-    const isAttribute = name => !isEvent(name) && name != "children";
-    Object.keys(prevProps).filter(isEvent).forEach(name => {
-      const eventType = name.toLowerCase().substring(2);
-      dom.removeEventListener(eventType, prevProps[name]);
-    });
-    Object.keys(prevProps).filter(isAttribute).forEach(name => {
-      dom[name] = null;
-    });
-    Object.keys(nextProps).filter(isAttribute).forEach(name => {
-      dom[name] = nextProps[name];
-    });
-    Object.keys(nextProps).filter(isEvent).forEach(name => {
-      const eventType = name.toLowerCase().substring(2);
-      dom.addEventListener(eventType, nextProps[name]);
-    });
-  }
-
-  const TEXT_ELEMENT = "TEXT";
-
-  /**
-   * This function creates a new element with the given type, configuration object, and children.
-   * @param type - The type of the element being created (e.g. "div", "span", "h1", etc.).
-   * @param configObject - The `configObject` parameter is an object that contains the properties and
-   * values for the element's attributes. These attributes can include things like `className`, `id`,
-   * `style`, and any other custom attributes that the user wants to add to the element.
-   * @param args - The `args` parameter is a rest parameter that allows the function to accept any number
-   * of additional arguments after the `configObject` parameter. These additional arguments are used as
-   * children elements for the created element.
-   * @returns An object with two properties: "type" and "props".
-   */
-  function createElement(type, configObject, ...args) {
-    const props = Object.assign({}, configObject);
-    const hasChildren = args.length > 0;
-    const nodeChildren = hasChildren ? [...args] : [];
-    props.children = nodeChildren.filter(Boolean).map(c => c instanceof Object ? c : createTextElement(c));
+  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, []);
     return {
       type,
-      props
+      props: {
+        ...props,
+        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: [],
+      },
+    }
+  };
+
+  /**
+   * 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 render = (element, container) => {
+    vars.wipRoot = {
+      dom: vars.containerRoot || container,
+      props: {
+        children: [element],
+      },
+      alternate: vars.currentRoot,
+    };
+    vars.deletions = [];
+    vars.nextUnitOfWork = vars.wipRoot;
+  };
+
+  /**
+   * @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 init = (root) => {
+    const rootElement = root || '__ryunix';
+    vars.containerRoot = document.getElementById(rootElement);
+    return undefined
+  };
+
+  /**
+   * @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: [],
     };
-  }
-
-  /**
-   * The function creates a text element with a given node value and an empty array of children.
-   * @param nodeValue - The value of the text node that will be created.
-   * @returns The function `createTextElement` is returning an element object with a `nodeValue` property
-   * and an empty `children` array. This element object represents a text node in the virtual DOM.
-   */
-  function createTextElement(nodeValue) {
-    return createElement(TEXT_ELEMENT, {
-      nodeValue,
-      children: []
+
+    const actions = oldHook ? oldHook.queue : [];
+    actions.forEach((action) => {
+      hook.state =
+        typeof action === STRINGS.function ? action(hook.state) : action;
     });
-  }
-
-  let rootInstance = null;
-  function render(element, parentDom) {
-    const prevInstance = rootInstance;
-    const nextInstance = reconcile(parentDom, prevInstance, element);
-    rootInstance = nextInstance;
-  }
-  function reconcile(parentDom, instance, element) {
-    if (instance === null) {
-      const newInstance = instantiate(element);
-      parentDom.appendChild(newInstance.dom);
-      return newInstance;
-    } else if (element == null) {
-      parentDom.removeChild(instance.dom);
-      return null;
-    } else if (instance.element.type !== element.type) {
-      const newInstance = instantiate(element);
-      parentDom.replaceChild(newInstance.dom, instance.dom);
-      return newInstance;
-    } else if (typeof element.type === "string") {
-      instance.childInstances = reconcileChildren(instance, element);
-      instance.element = element;
-      return instance;
-    } else {
-      instance.publicInstance.props = element.props;
-      const childElement = instance.publicInstance.render();
-      const oldChildInstance = instance.childInstance;
-      const childInstance = reconcile(parentDom, oldChildInstance, childElement);
-      instance.dom = childInstance.dom;
-      instance.childInstance = childInstance;
-      instance.element = element;
-      return instance;
-    }
-  }
-  function instantiate(element) {
-    const { type, props } = element;
-    const isDomElement = typeof type === "string";
-    if (isDomElement) {
-      const isTextElement = type === TEXT_ELEMENT;
-      const dom = isTextElement
-        ? document.createTextNode("")
-        : document.createElement(type);
-      updateDomProperties(dom, [], props);
-      const childElements = props.children || [];
-      const childInstances = childElements.map(instantiate);
-      const childDoms = childInstances.map((childInstance) => childInstance.dom);
-      childDoms.forEach((childDom) => dom.appendChild(childDom));
-      const instance = {
-        dom,
-        element,
-        childInstances,
+
+    /**
+     * 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,
       };
-      return instance;
+      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 {
-      const instance = {};
-      const publicInstance = createPublicInstance(element, instance);
-      const childElement = publicInstance.render();
-      const childInstance = instantiate(childElement);
-      const dom = childInstance.dom;
-      Object.assign(instance, {
-        dom,
-        element,
-        childInstance,
-        publicInstance,
+      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);
+      }
+    }, []);
+
+    const currentRoute = routes.find((route) => route.path === location);
+    const Children = () => (currentRoute ? currentRoute.component : null);
+
+    return { Children, navigate }
+  };
+
+  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]);
       });
-      return instance;
-    }
-  }
-  function createPublicInstance(element, internalInstance) {
-    const { type, props } = element;
-    const publicInstance = new type(props);
-    publicInstance.__internalInstance = internalInstance;
-    return publicInstance;
-  }
-  function reconcileChildren(instance, element) {
-    const dom = instance.dom;
-    const childInstances = instance.childInstances;
-    const nextChildElements = element.props.children || [];
-    const newChildInstances = [];
-    const count = Math.max(childInstances.length, nextChildElements.length);
-    for (let i = 0; i < count; i++) {
-      const childInstance = childInstances[i];
-      const childElement = nextChildElements[i];
-      const newChildInstance = reconcile(dom, childInstance, childElement);
-      newChildInstances.push(newChildInstance);
-    }
-    return newChildInstances.filter((instance) => instance != null);
-  }
-
-  class Component {
-    constructor(props) {
-      this.props = props;
-      this.state = this.state || {};
-    }
-    setState(partialState) {
-      this.state = Object.assign({}, this.state, partialState);
-      updateInstance(this.__internalInstance);
-    }
-  }
-  function updateInstance(internalInstance) {
-    const parentDom = internalInstance.dom.parentNode;
-    const element = internalInstance.element;
-    reconcile(parentDom, internalInstance, element);
-  }
-
-  var ryunix = {
-    render,
+
+    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);
+    } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
+      cancelEffects(fiber);
+      if (fiber.dom != undefined) {
+        updateDom(fiber.dom, fiber.alternate.props, fiber.props);
+      }
+      runEffects(fiber);
+    } else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
+      cancelEffects(fiber);
+      commitDeletion(fiber, domParent);
+      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 && fiber.dom) {
+      domParent.removeChild(fiber.dom);
+    } else if (fiber && fiber.child) {
+      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;
+
+    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 ? oldFiber.type : undefined,
+          props: element.props,
+          dom: oldFiber ? oldFiber.dom : undefined,
+          parent: wipFiber,
+          alternate: oldFiber,
+          effectTag: EFFECT_TAGS.UPDATE,
+        };
+      }
+      if (element && !sameType) {
+        newFiber = {
+          type: element.type,
+          props: element.props,
+          dom: undefined,
+          parent: wipFiber,
+          alternate: undefined,
+          effectTag: EFFECT_TAGS.PLACEMENT,
+        };
+      }
+      if (oldFiber && !sameType) {
+        oldFiber.effectTag = EFFECT_TAGS.DELETION;
+        vars.deletions.push(oldFiber);
+      }
+
+      if (oldFiber) {
+        oldFiber = oldFiber.sibling;
+      }
+
+      if (index === 0) {
+        wipFiber.child = newFiber;
+      } else if (element && 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,
-    Component,
+    render,
+    init,
+    Fragment,
+    Dom,
+    Workers,
+    Reconciler,
+    Components,
+    Commits,
   };
 
-  exports.Component = Component;
-  exports.createElement = createElement;
-  exports.default = ryunix;
-  exports.render = render;
+  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 });