@unsetsoft/ryunixjs 1.2.3-canary.9 → 1.2.4

package/dist/Ryunix.esm.js

@@ -70,7 +70,12 @@ const is = {
 };
 
 /**
- * Create text element
+ * The `createTextElement` function creates a text element with the specified text content.
+ * @param text - The `text` parameter in the `createTextElement` function is the text content that you
+ * want to create a text element for. This text will be set as the `nodeValue` of the text element in
+ * the returned object.
+ * @returns A text element object is being returned with a type of RYUNIX_TYPES.TEXT_ELEMENT and props
+ * containing the text value provided in the function argument.
  */
 const createTextElement = (text) => {
   return {
@@ -83,7 +88,21 @@ const createTextElement = (text) => {
 };
 
 /**
- * Create element
+ * The `createElement` function creates a virtual DOM element with specified type, properties, and
+ * children.
+ * @param type - The `type` parameter in the `createElement` function represents the type of element
+ * you want to create, such as a HTML tag like 'div', 'span', 'p', etc.
+ * @param props - The `props` parameter in the `createElement` function is an object that contains the
+ * properties or attributes for the element being created. These properties can include things like
+ * class names, styles, event handlers, and any other custom attributes you want to assign to the
+ * element. In the code snippet you provided,
+ * @param children - The `children` parameter in the `createElement` function represents the child
+ * elements or text content that will be nested within the created element. These children can be
+ * passed as arguments to the `createElement` function and will be rendered as part of the element's
+ * content.
+ * @returns An object is being returned with a `type` property representing the type of element, and a
+ * `props` property containing the element's properties. The `props` object includes the children of
+ * the element, which are processed to ensure they are in the correct format.
  */
 const createElement = (type, props, ...children) => {
   const safeProps = props || {};
@@ -102,7 +121,14 @@ const createElement = (type, props, ...children) => {
 };
 
 /**
- * Fragment component
+ * The `Fragment` function in JavaScript creates a fragment element with the given children.
+ * @param props - The `props` parameter in the `Fragment` function is an object that contains the
+ * properties passed to the `Fragment` component. These properties can include `children`, which
+ * represents the child elements or components nested within the `Fragment`.
+ * @returns The `Fragment` component is returning a Ryunix fragment element created using the
+ * `createElement` function. The element is of type `RYUNIX_TYPES.RYUNIX_FRAGMENT` and contains the
+ * children passed to the `Fragment` component. If `props.children` is not an array, it is converted
+ * into an array before being spread into the `createElement` function.
  */
 const Fragment = (props) => {
   const children = Array.isArray(props.children)
@@ -450,6 +476,9 @@ const updateDom = (dom, prevProps = {}, nextProps = {}) => {
     });
 };
 
+/**
+ * The `commitRoot` function commits the changes made to the virtual DOM by updating the actual DOM.
+ */
 const commitRoot = () => {
   const state = getState();
   state.deletions.forEach(commitWork);
@@ -587,34 +616,6 @@ const reconcileChildren = (wipFiber, elements) => {
   });
 };
 
-const updateFunctionComponent = (fiber) => {
-  const state = getState();
-  state.wipFiber = fiber;
-  state.hookIndex = 0;
-  state.wipFiber.hooks = [];
-
-  const children = [fiber.type(fiber.props)];
-
-  if (fiber.type._contextId && fiber.props.value !== undefined) {
-    fiber._contextId = fiber.type._contextId;
-    fiber._contextValue = fiber.props.value;
-  }
-
-  reconcileChildren(fiber, children);
-};
-
-const updateHostComponent = (fiber) => {
-  if (!fiber.dom) {
-    fiber.dom = createDom(fiber);
-  }
-  const children = fiber.props?.children || [];
-  reconcileChildren(fiber, children);
-};
-
-const Image = ({ src, ...props }) => {
-  return createElement('img', { ...props, src })
-};
-
 /**
  * Priority levels for updates
  */
@@ -628,369 +629,180 @@ const Priority = {
 
 Priority.NORMAL;
 
-/**
- * Performance profiler for Ryunix
- */
-class Profiler {
-  constructor() {
-    this.enabled = process.env.NODE_ENV !== 'production';
-    this.measures = new Map();
-    this.renderTimes = [];
-    this.maxSamples = 100;
-  }
-
-  startMeasure(name) {
-    if (!this.enabled) return
-    this.measures.set(name, performance.now());
-  }
-
-  endMeasure(name) {
-    if (!this.enabled) return
-    const start = this.measures.get(name);
-    if (!start) return
-
-    const duration = performance.now() - start;
-    this.measures.delete(name);
-
-    return duration
+const validateHookCall = () => {
+  const state = getState();
+  if (!state.wipFiber) {
+    throw new Error(
+      'Hooks can only be called inside the body of a function component.',
+    )
   }
-
-  recordRender(componentName, duration) {
-    if (!this.enabled) return
-
-    this.renderTimes.push({
-      component: componentName,
-      duration,
-      timestamp: Date.now(),
-    });
-
-    if (this.renderTimes.length > this.maxSamples) {
-      this.renderTimes.shift();
-    }
+  if (!Array.isArray(state.wipFiber.hooks)) {
+    state.wipFiber.hooks = [];
   }
+};
 
-  getStats() {
-    if (!this.enabled) return null
+const haveDepsChanged = (oldDeps, newDeps) => {
+  if (!oldDeps || !newDeps) return true
+  if (oldDeps.length !== newDeps.length) return true
+  return oldDeps.some((dep, i) => !Object.is(dep, newDeps[i]))
+};
 
-    const total = this.renderTimes.reduce((sum, r) => sum + r.duration, 0);
-    const avg = total / this.renderTimes.length;
-    const max = Math.max(...this.renderTimes.map((r) => r.duration));
-    const min = Math.min(...this.renderTimes.map((r) => r.duration));
+/**
+ * The `useStore` function in JavaScript is a custom hook that uses a reducer to manage state updates
+ * based on actions provided.
+ * @param initialState - The `initialState` parameter in the `useStore` function is the initial state
+ * of the store that will be used with the `useReducer` hook. It represents the starting state of the
+ * store before any actions are dispatched to update it.
+ * @returns The `useStore` function is returning the result of calling the `useReducer` hook with the
+ * `reducer` function and the `initialState` as arguments.
+ */
+const useStore = (initialState) => {
+  const reducer = (state, action) =>
+    is.function(action) ? action(state) : action;
+  return useReducer(reducer, initialState)
+};
 
-    return { total, avg, max, min, count: this.renderTimes.length }
-  }
+/**
+ * The `useReducer` function in JavaScript is used to manage state and actions.
+ *
+ * @param reducer - The `reducer` parameter in the `useReducer` function is a function that specifies
+ * how the state should be updated in response to an action. It takes the current state and an action
+ * as arguments and returns the new state based on the action.
+ * @param initialState - The `initialState` parameter in the `useReducer` function represents the
+ * initial state of the reducer. It is the state that will be used when the reducer is first called or
+ * when the state needs to be reset. This initial state can be a simple value, an object, an array, or
+ * @param init - The `init` parameter in the `useReducer` function is an optional function that can be
+ * used to initialize the state. If provided, it will be called with the `initialState` as its argument
+ * and the return value will be used as the initial state for the reducer. If `init`
+ * @returns An array containing the current state and the dispatch function is being returned.
+ */
+const useReducer = (reducer, initialState, init) => {
+  validateHookCall();
 
-  getSlowestComponents(limit = 10) {
-    if (!this.enabled) return []
+  const state = getState();
+  const { wipFiber, hookIndex } = state;
+  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
 
-    const byComponent = new Map();
+  const hook = {
+    hookID: hookIndex,
+    type: RYUNIX_TYPES.RYUNIX_STORE,
+    state: oldHook ? oldHook.state : init ? init(initialState) : initialState,
+    queue: [],
+  };
 
-    this.renderTimes.forEach(({ component, duration }) => {
-      if (!byComponent.has(component)) {
-        byComponent.set(component, { total: 0, count: 0, max: 0 });
+  if (oldHook?.queue) {
+    oldHook.queue.forEach((action) => {
+      try {
+        hook.state = reducer(hook.state, action);
+      } catch (error) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error('Error in reducer:', error);
+        }
       }
-      const stats = byComponent.get(component);
-      stats.total += duration;
-      stats.count++;
-      stats.max = Math.max(stats.max, duration);
     });
-
-    return Array.from(byComponent.entries())
-      .map(([name, stats]) => ({
-        name,
-        avg: stats.total / stats.count,
-        max: stats.max,
-        count: stats.count,
-      }))
-      .sort((a, b) => b.avg - a.avg)
-      .slice(0, limit)
   }
 
-  logStats() {
-    if (!this.enabled) return
+  const dispatch = (action) => {
+    if (action === undefined) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn('dispatch called with undefined action');
+      }
+      return
+    }
 
-    const stats = this.getStats();
-    if (!stats) return
+    hook.queue.push(action);
 
-    console.group('🔍 Ryunix Performance Stats');
-    console.log(`Total renders: ${stats.count}`);
-    console.log(`Avg render time: ${stats.avg.toFixed(2)}ms`);
-    console.log(
-      `Min: ${stats.min.toFixed(2)}ms | Max: ${stats.max.toFixed(2)}ms`,
-    );
+    const currentState = getState();
+    currentState.wipRoot = {
+      dom: currentState.currentRoot.dom,
+      props: currentState.currentRoot.props,
+      alternate: currentState.currentRoot,
+    };
+    currentState.deletions = [];
+    currentState.hookIndex = 0;
+    scheduleWork(currentState.wipRoot);
+  };
 
-    const slowest = this.getSlowestComponents(5);
-    if (slowest.length > 0) {
-      console.log('\n⚠️  Slowest components:');
-      slowest.forEach((comp, i) => {
-        console.log(
-          `${i + 1}. ${comp.name}: ${comp.avg.toFixed(2)}ms avg (${comp.count} renders)`,
-        );
-      });
-    }
-    console.groupEnd();
-  }
+  wipFiber.hooks[hookIndex] = hook;
+  state.hookIndex++;
+  return [hook.state, dispatch]
+};
 
-  clear() {
-    this.renderTimes = [];
-    this.measures.clear();
-  }
+/**
+ * The `useEffect` function in JavaScript is used to manage side effects in functional components by
+ * comparing dependencies and executing a callback function when dependencies change.
+ * @param callback - The `callback` parameter in the `useEffect` function is a function that will be
+ * executed as the effect. This function can perform side effects like data fetching, subscriptions, or
+ * DOM manipulations.
+ * @param deps - The `deps` parameter in the `useEffect` function stands for dependencies. It is an
+ * optional array that contains values that the effect depends on. The effect will only re-run if any
+ * of the values in the `deps` array have changed since the last render. If the `deps` array
+ */
+const useEffect = (callback, deps) => {
+  validateHookCall();
 
-  enable() {
-    this.enabled = true;
+  if (!is.function(callback)) {
+    throw new Error('useEffect callback must be a function')
   }
-
-  disable() {
-    this.enabled = false;
+  if (deps !== undefined && !Array.isArray(deps)) {
+    throw new Error('useEffect dependencies must be an array or undefined')
   }
-}
 
-// Global profiler instance
-const profiler = new Profiler();
+  const state = getState();
+  const { wipFiber, hookIndex } = state;
+  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
+  const hasChanged = haveDepsChanged(oldHook?.deps, deps);
 
-/**
- * Hook to profile component render
- */
-const useProfiler = (componentName) => {
-  const startTime = performance.now();
+  const hook = {
+    hookID: hookIndex,
+    type: RYUNIX_TYPES.RYUNIX_EFFECT,
+    deps,
+    effect: hasChanged ? callback : null,
+    cancel: oldHook?.cancel,
+  };
 
-  return () => {
-    const duration = performance.now() - startTime;
-    profiler.recordRender(componentName, duration);
-  }
+  wipFiber.hooks[hookIndex] = hook;
+  state.hookIndex++;
 };
 
 /**
- * HOC to profile component
+ * The useRef function in JavaScript creates a reference object with an initial value for use in functional components.
+ * @param initialValue - The `initialValue` parameter in the `useRef` function represents the initial
+ * value that will be assigned to the `current` property of the reference object. This initial value
+ * will be used if there is no previous value stored in the hook.
+ * @returns The `useRef` function is returning the `current` property of the `hook.value` object, which
+ * contains the initial value passed to the `useRef` function.
  */
-const withProfiler = (Component, name) => {
-  return (props) => {
-    profiler.startMeasure(name);
-    const result = Component(props);
-    const duration = profiler.endMeasure(name);
-    if (duration) profiler.recordRender(name, duration);
-    return result
-  }
-};
+const useRef = (initialValue) => {
+  validateHookCall();
 
-const workLoop = (deadline) => {
   const state = getState();
-  let shouldYield = false;
-
-  while (state.nextUnitOfWork && !shouldYield) {
-    state.nextUnitOfWork = performUnitOfWork(state.nextUnitOfWork);
-    shouldYield = deadline.timeRemaining() < 1;
-  }
+  const { wipFiber, hookIndex } = state;
+  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
 
-  if (!state.nextUnitOfWork && state.wipRoot) {
-    commitRoot();
-  }
+  const hook = {
+    hookID: hookIndex,
+    type: RYUNIX_TYPES.RYUNIX_REF,
+    value: oldHook ? oldHook.value : { current: initialValue },
+  };
 
-  requestIdleCallback(workLoop);
-};
-
-requestIdleCallback(workLoop);
-
-const performUnitOfWork = (fiber) => {
-  const componentName = fiber.type?.name || fiber.type?.displayName || 'Unknown';
-
-  profiler.startMeasure(componentName);
-
-  const isFunctionComponent = fiber.type instanceof Function;
-  if (isFunctionComponent) {
-    updateFunctionComponent(fiber);
-  } else {
-    updateHostComponent(fiber);
-  }
-
-  const duration = profiler.endMeasure(componentName);
-  if (duration) profiler.recordRender(componentName, duration);
-
-  if (fiber.child) {
-    return fiber.child
-  }
-  let nextFiber = fiber;
-  while (nextFiber) {
-    if (nextFiber.sibling) {
-      return nextFiber.sibling
-    }
-    nextFiber = nextFiber.parent;
-  }
-};
-
-const scheduleWork = (root, priority = Priority.NORMAL) => {
-  const state = getState();
-  state.nextUnitOfWork = root;
-  state.wipRoot = root;
-  state.deletions = [];
-  state.hookIndex = 0;
-  state.effects = [];
-
-  // Higher priority = faster scheduling
-  if (priority <= Priority.USER_BLOCKING) {
-    requestIdleCallback(workLoop);
-  } else {
-    setTimeout(() => requestIdleCallback(workLoop), 0);
-  }
-};
-
-const render = (element, container) => {
-  const state = getState();
-  state.wipRoot = {
-    dom: container,
-    props: {
-      children: [element],
-    },
-    alternate: state.currentRoot,
-  };
-
-  state.nextUnitOfWork = state.wipRoot;
-  state.deletions = [];
-  scheduleWork(state.wipRoot);
-  return state.wipRoot
-};
-
-const init = (MainElement, root = '__ryunix') => {
-  const state = getState();
-  state.containerRoot = document.getElementById(root);
-  const renderProcess = render(MainElement, state.containerRoot);
-  return renderProcess
-};
-
-const safeRender = (component, props, onError) => {
-  try {
-    return component(props)
-  } catch (error) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.error('Component error:', error);
-    }
-    if (onError) onError(error);
-    return null
-  }
-};
-
-const validateHookCall = () => {
-  const state = getState();
-  if (!state.wipFiber) {
-    throw new Error(
-      'Hooks can only be called inside the body of a function component.',
-    )
-  }
-  if (!Array.isArray(state.wipFiber.hooks)) {
-    state.wipFiber.hooks = [];
-  }
-};
-
-const haveDepsChanged = (oldDeps, newDeps) => {
-  if (!oldDeps || !newDeps) return true
-  if (oldDeps.length !== newDeps.length) return true
-  return oldDeps.some((dep, i) => !Object.is(dep, newDeps[i]))
-};
-
-const useStore = (initialState) => {
-  const reducer = (state, action) =>
-    is.function(action) ? action(state) : action;
-  return useReducer(reducer, initialState)
-};
-
-const useReducer = (reducer, initialState, init) => {
-  validateHookCall();
-
-  const state = getState();
-  const { wipFiber, hookIndex } = state;
-  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
-
-  const hook = {
-    hookID: hookIndex,
-    type: RYUNIX_TYPES.RYUNIX_STORE,
-    state: oldHook ? oldHook.state : init ? init(initialState) : initialState,
-    queue: [], // Siempre nueva cola vacía
-  };
-
-  // Procesar acciones del render anterior
-  if (oldHook?.queue) {
-    oldHook.queue.forEach((action) => {
-      try {
-        hook.state = reducer(hook.state, action);
-      } catch (error) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.error('Error in reducer:', error);
-        }
-      }
-    });
-  }
-
-  const dispatch = (action) => {
-    if (action === undefined) {
-      if (process.env.NODE_ENV !== 'production') {
-        console.warn('dispatch called with undefined action');
-      }
-      return
-    }
-
-    hook.queue.push(action);
-
-    const currentState = getState();
-    currentState.wipRoot = {
-      dom: currentState.currentRoot.dom,
-      props: currentState.currentRoot.props,
-      alternate: currentState.currentRoot,
-    };
-    currentState.deletions = [];
-    currentState.hookIndex = 0;
-    scheduleWork(currentState.wipRoot);
-  };
-
-  wipFiber.hooks[hookIndex] = hook;
-  state.hookIndex++;
-  return [hook.state, dispatch]
-};
-
-const useEffect = (callback, deps) => {
-  validateHookCall();
-
-  if (!is.function(callback)) {
-    throw new Error('useEffect callback must be a function')
-  }
-  if (deps !== undefined && !Array.isArray(deps)) {
-    throw new Error('useEffect dependencies must be an array or undefined')
-  }
-
-  const state = getState();
-  const { wipFiber, hookIndex } = state;
-  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
-  const hasChanged = haveDepsChanged(oldHook?.deps, deps);
-
-  const hook = {
-    hookID: hookIndex,
-    type: RYUNIX_TYPES.RYUNIX_EFFECT,
-    deps,
-    effect: hasChanged ? callback : null,
-    cancel: oldHook?.cancel,
-  };
-
-  wipFiber.hooks[hookIndex] = hook;
-  state.hookIndex++;
-};
-
-const useRef = (initialValue) => {
-  validateHookCall();
-
-  const state = getState();
-  const { wipFiber, hookIndex } = state;
-  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
-
-  const hook = {
-    hookID: hookIndex,
-    type: RYUNIX_TYPES.RYUNIX_REF,
-    value: oldHook ? oldHook.value : { current: initialValue },
-  };
-
-  wipFiber.hooks[hookIndex] = hook;
-  state.hookIndex++;
-  return hook.value
+  wipFiber.hooks[hookIndex] = hook;
+  state.hookIndex++;
+  return hook.value
 };
 
+/**
+ * The useMemo function in JavaScript is used to memoize the result of a computation based on
+ * dependencies.
+ * @param compute - The `compute` parameter in the `useMemo` function is a callback function that
+ * calculates the value that `useMemo` will memoize and return. This function will be called to compute
+ * the memoized value when necessary.
+ * @param deps - The `deps` parameter in the `useMemo` function refers to an array of dependencies.
+ * These dependencies are used to determine whether the memoized value needs to be recalculated or if
+ * the previously calculated value can be reused. The `useMemo` hook will recompute the memoized value
+ * only if
+ * @returns The `useMemo` function is returning the `value` calculated by the `compute` function.
+ */
 const useMemo = (compute, deps) => {
   validateHookCall();
 
@@ -1031,6 +843,17 @@ const useMemo = (compute, deps) => {
   return value
 };
 
+/**
+ * The useCallback function in JavaScript ensures that a callback function is memoized based on its
+ * dependencies.
+ * @param callback - A function that you want to memoize and return for later use.
+ * @param deps - The `deps` parameter in the `useCallback` function refers to an array of dependencies.
+ * These dependencies are used to determine when the callback function should be re-evaluated and
+ * memoized. If any of the dependencies change, the callback function will be re-executed and the
+ * memoized value will
+ * @returns The useCallback function is returning the memoized version of the callback function passed
+ * as the first argument, based on the dependencies array provided as the second argument.
+ */
 const useCallback = (callback, deps) => {
   if (!is.function(callback)) {
     throw new Error('useCallback requires a function as first argument')
@@ -1038,6 +861,20 @@ const useCallback = (callback, deps) => {
   return useMemo(() => callback, deps)
 };
 
+/**
+ * The createContext function creates a context provider and useContext hook in JavaScript.
+ * @param [contextId] - The `contextId` parameter in the `createContext` function is used to specify
+ * the unique identifier for the context being created. It defaults to `RYUNIX_TYPES.RYUNIX_CONTEXT` if
+ * not provided.
+ * @param [defaultValue] - The `defaultValue` parameter in the `createContext` function is used to
+ * specify the default value that will be returned by the `useContext` hook if no provider is found in
+ * the component tree. It is an optional parameter, and if not provided, an empty object `{}` will be
+ * used as
+ * @returns The `createContext` function returns an object with two properties: `Provider` and
+ * `useContext`. The `Provider` property is a component that accepts `children` and `value` props, and
+ * sets the `_contextId` and `_contextValue` properties on the element. The `useContext` property is a
+ * hook function that retrieves the context value based on the context ID provided, or
+ */
 const createContext = (
   contextId = RYUNIX_TYPES.RYUNIX_CONTEXT,
   defaultValue = {},
@@ -1075,6 +912,10 @@ const createContext = (
   return { Provider, useContext }
 };
 
+/**
+ * The `useQuery` function extracts query parameters from the URL in a browser environment.
+ * @returns An object containing the query parameters from the current URL is being returned.
+ */
 const useQuery = () => {
   if (typeof window === 'undefined') return {}
 
@@ -1086,6 +927,14 @@ const useQuery = () => {
   return query
 };
 
+/**
+ * The function `useHash` in JavaScript is used to manage and update the hash portion of the URL in a
+ * web application.
+ * @returns The `useHash` function returns the current hash value from the window's location. If the
+ * window is undefined (e.g., in a server-side environment), it returns an empty string. The function
+ * also sets up an event listener to update the hash value when the hash in the URL changes and removes
+ * the event listener when the component unmounts.
+ */
 const useHash = () => {
   if (typeof window === 'undefined') return ''
 
@@ -1098,6 +947,25 @@ const useHash = () => {
   return hash
 };
 
+/**
+ * The `useMetadata` function in JavaScript is used to dynamically update metadata tags in the document
+ * head based on provided tags and options.
+ * @param [tags] - The `tags` parameter in the `useMetadata` function is an object that contains
+ * metadata information for the webpage. It can include properties like `pageTitle`, `canonical`, and
+ * other custom metadata tags like `og:title`, `og:description`, `twitter:title`,
+ * `twitter:description`, etc. These tags
+ * @param [options] - The `options` parameter in the `useMetadata` function is an object that can
+ * contain the following properties:
+ * - `title`: An object that can have the following properties:
+ *  - `template`: A string that defines the template for the page title. It can include a placeholder
+ * `%s` that will be replaced with the actual page title.
+ * - `prefix`: A string that will be used as the default title if no specific page title is provided.
+ * @returns The `useMetadata` function does not return anything. It is a custom hook that updates the
+ * document's metadata (such as title and meta tags) based on the provided `tags` and `options` whenever
+ * they change.
+ * This hook can't be reached by google crawler.
+ */
+
 const useMetadata = (tags = {}, options = {}) => {
   useEffect(() => {
     if (typeof document === 'undefined') return
@@ -1188,6 +1056,12 @@ const findRoute = (routes, path) => {
   return notFound
 };
 
+/**
+ * The `RouterProvider` component manages routing in a Ryunix application by updating the location based
+ * on window events and providing context for the current route.
+ * @returns The `RouterProvider` component is returning a `RouterContext.Provider` component with a
+ * `value` prop set to `contextValue`, and wrapping the `children` within a `Fragment`.
+ */
 const RouterProvider = ({ routes, children }) => {
   const [location, setLocation] = useStore(window.location.pathname);
 
@@ -1224,10 +1098,24 @@ const RouterProvider = ({ routes, children }) => {
   )
 };
 
+/**
+ * The function `useRouter` returns the context of the Router for navigation in a Ryunix application.
+ * @returns The `useRouter` function is returning the result of calling
+ * `RouterContext.useContext('ryunix.navigation')`. This function is likely attempting to retrieve the
+ * navigation context from the RouterContext.
+ */
 const useRouter = () => {
   return RouterContext.useContext('ryunix.navigation')
 };
 
+/**
+ * The `Children` function in JavaScript uses router hooks to handle scrolling to a specific element
+ * based on the hash in the URL.
+ * @returns The `Children` component is returning the result of calling `createElement` with
+ * `route.component` as the first argument and an object with `key`, `params`, `query`, and `hash`
+ * properties as the second argument. The `key` property is set to `location`, and the `params`,
+ * `query`, and `hash` properties are passed as values from the component's props.
+ */
 const Children = () => {
   const { route, params, query, location } = useRouter();
   if (!route || !route.component) return null
@@ -1249,6 +1137,12 @@ const Children = () => {
   })
 };
 
+/**
+ * The NavLink function in JavaScript is a component that generates a link element with customizable
+ * classes and active state based on the current location.
+ * @returns The `NavLink` component is returning a JSX element representing an anchor (`<a>`) tag with
+ * the following attributes and properties:
+ */
 const NavLink = ({ to, exact = false, ...props }) => {
   const { location, navigate } = useRouter();
   const isActive = exact ? location === to : location.startsWith(to);
@@ -1361,6 +1255,376 @@ var hooks = /*#__PURE__*/Object.freeze({
   useTransition: useTransition
 });
 
+const updateFunctionComponent = (fiber) => {
+  const state = getState();
+  state.wipFiber = fiber;
+  state.hookIndex = 0;
+  state.wipFiber.hooks = [];
+
+  const children = [fiber.type(fiber.props)];
+
+  if (fiber.type._contextId && fiber.props.value !== undefined) {
+    fiber._contextId = fiber.type._contextId;
+    fiber._contextValue = fiber.props.value;
+  }
+
+  reconcileChildren(fiber, children);
+};
+
+const updateHostComponent = (fiber) => {
+  if (!fiber.dom) {
+    fiber.dom = createDom(fiber);
+  }
+  const children = fiber.props?.children || [];
+  reconcileChildren(fiber, children);
+};
+
+/**
+ * The Component `Image` takes in a `src` and other props, and returns an `img` element with the
+ * specified `src` and props.
+ * @returns The `Image` component is being returned. It is a functional component that renders an `img`
+ * element with the specified `src` and other props passed to it.
+ */
+const Image = ({ src, ...props }) => {
+  return createElement('img', { ...props, src })
+};
+
+const { Provider: MDXProvider, useContext: useMDXComponents } = createContext(
+  'ryunix.mdx',
+  {},
+);
+
+/**
+ * Get merged MDX components from context and provided components
+ * @param {Object} components - Additional components to merge
+ * @returns {Object} Merged components object
+ */
+const getMDXComponents = (components) => {
+  const contextComponents = useMDXComponents();
+  return {
+    ...contextComponents,
+    ...components,
+  }
+};
+
+/**
+ * Default MDX components with Ryunix-optimized rendering
+ */
+const defaultComponents = {
+  // Headings
+  h1: (props) => createElement('h1', { ...props }),
+  h2: (props) => createElement('h2', { ...props }),
+  h3: (props) => createElement('h3', { ...props }),
+  h4: (props) => createElement('h4', { ...props }),
+  h5: (props) => createElement('h5', { ...props }),
+  h6: (props) => createElement('h6', { ...props }),
+
+  // Text
+  p: (props) => createElement('p', { ...props }),
+  a: (props) => createElement('a', { ...props }),
+  strong: (props) => createElement('strong', { ...props }),
+  em: (props) => createElement('em', { ...props }),
+  code: (props) => createElement('code', { ...props }),
+
+  // Lists
+  ul: (props) => createElement('ul', { ...props }),
+  ol: (props) => createElement('ol', { ...props }),
+  li: (props) => createElement('li', { ...props }),
+
+  // Blocks
+  blockquote: (props) => createElement('blockquote', { ...props }),
+  pre: (props) => createElement('pre', { ...props }),
+  hr: (props) => createElement('hr', { ...props }),
+
+  // Tables
+  table: (props) => createElement('table', { ...props }),
+  thead: (props) => createElement('thead', { ...props }),
+  tbody: (props) => createElement('tbody', { ...props }),
+  tr: (props) => createElement('tr', { ...props }),
+  th: (props) => createElement('th', { ...props }),
+  td: (props) => createElement('td', { ...props }),
+
+  // Media
+  img: (props) => createElement('img', { ...props }),
+};
+
+/**
+ * MDX Wrapper component
+ * Provides default styling and components for MDX content
+ */
+const MDXContent = ({ children, components = {} }) => {
+  const mergedComponents = getMDXComponents(components);
+
+  return createElement(
+    MDXProvider,
+    { value: mergedComponents },
+    createElement('div', null, children),
+  )
+};
+
+/**
+ * Performance profiler for Ryunix
+ */
+class Profiler {
+  constructor() {
+    this.enabled = process.env.NODE_ENV !== 'production';
+    this.measures = new Map();
+    this.renderTimes = [];
+    this.maxSamples = 100;
+  }
+
+  startMeasure(name) {
+    if (!this.enabled) return
+    this.measures.set(name, performance.now());
+  }
+
+  endMeasure(name) {
+    if (!this.enabled) return
+    const start = this.measures.get(name);
+    if (!start) return
+
+    const duration = performance.now() - start;
+    this.measures.delete(name);
+
+    return duration
+  }
+
+  recordRender(componentName, duration) {
+    if (!this.enabled) return
+
+    this.renderTimes.push({
+      component: componentName,
+      duration,
+      timestamp: Date.now(),
+    });
+
+    if (this.renderTimes.length > this.maxSamples) {
+      this.renderTimes.shift();
+    }
+  }
+
+  getStats() {
+    if (!this.enabled) return null
+
+    const total = this.renderTimes.reduce((sum, r) => sum + r.duration, 0);
+    const avg = total / this.renderTimes.length;
+    const max = Math.max(...this.renderTimes.map((r) => r.duration));
+    const min = Math.min(...this.renderTimes.map((r) => r.duration));
+
+    return { total, avg, max, min, count: this.renderTimes.length }
+  }
+
+  getSlowestComponents(limit = 10) {
+    if (!this.enabled) return []
+
+    const byComponent = new Map();
+
+    this.renderTimes.forEach(({ component, duration }) => {
+      if (!byComponent.has(component)) {
+        byComponent.set(component, { total: 0, count: 0, max: 0 });
+      }
+      const stats = byComponent.get(component);
+      stats.total += duration;
+      stats.count++;
+      stats.max = Math.max(stats.max, duration);
+    });
+
+    return Array.from(byComponent.entries())
+      .map(([name, stats]) => ({
+        name,
+        avg: stats.total / stats.count,
+        max: stats.max,
+        count: stats.count,
+      }))
+      .sort((a, b) => b.avg - a.avg)
+      .slice(0, limit)
+  }
+
+  logStats() {
+    if (!this.enabled) return
+
+    const stats = this.getStats();
+    if (!stats) return
+
+    console.group('🔍 Ryunix Performance Stats');
+    console.log(`Total renders: ${stats.count}`);
+    console.log(`Avg render time: ${stats.avg.toFixed(2)}ms`);
+    console.log(
+      `Min: ${stats.min.toFixed(2)}ms | Max: ${stats.max.toFixed(2)}ms`,
+    );
+
+    const slowest = this.getSlowestComponents(5);
+    if (slowest.length > 0) {
+      console.log('\n⚠️  Slowest components:');
+      slowest.forEach((comp, i) => {
+        console.log(
+          `${i + 1}. ${comp.name}: ${comp.avg.toFixed(2)}ms avg (${comp.count} renders)`,
+        );
+      });
+    }
+    console.groupEnd();
+  }
+
+  clear() {
+    this.renderTimes = [];
+    this.measures.clear();
+  }
+
+  enable() {
+    this.enabled = true;
+  }
+
+  disable() {
+    this.enabled = false;
+  }
+}
+
+// Global profiler instance
+const profiler = new Profiler();
+
+/**
+ * Hook to profile component render
+ */
+const useProfiler = (componentName) => {
+  const startTime = performance.now();
+
+  return () => {
+    const duration = performance.now() - startTime;
+    profiler.recordRender(componentName, duration);
+  }
+};
+
+/**
+ * HOC to profile component
+ */
+const withProfiler = (Component, name) => {
+  return (props) => {
+    profiler.startMeasure(name);
+    const result = Component(props);
+    const duration = profiler.endMeasure(name);
+    if (duration) profiler.recordRender(name, duration);
+    return result
+  }
+};
+
+const workLoop = (deadline) => {
+  const state = getState();
+  let shouldYield = false;
+
+  while (state.nextUnitOfWork && !shouldYield) {
+    state.nextUnitOfWork = performUnitOfWork(state.nextUnitOfWork);
+    shouldYield = deadline.timeRemaining() < 1;
+  }
+
+  if (!state.nextUnitOfWork && state.wipRoot) {
+    commitRoot();
+  }
+
+  requestIdleCallback(workLoop);
+};
+
+requestIdleCallback(workLoop);
+
+const performUnitOfWork = (fiber) => {
+  const componentName = fiber.type?.name || fiber.type?.displayName || 'Unknown';
+
+  profiler.startMeasure(componentName);
+
+  const isFunctionComponent = fiber.type instanceof Function;
+  if (isFunctionComponent) {
+    updateFunctionComponent(fiber);
+  } else {
+    updateHostComponent(fiber);
+  }
+
+  const duration = profiler.endMeasure(componentName);
+  if (duration) profiler.recordRender(componentName, duration);
+
+  if (fiber.child) {
+    return fiber.child
+  }
+  let nextFiber = fiber;
+  while (nextFiber) {
+    if (nextFiber.sibling) {
+      return nextFiber.sibling
+    }
+    nextFiber = nextFiber.parent;
+  }
+};
+
+const scheduleWork = (root, priority = Priority.NORMAL) => {
+  const state = getState();
+  state.nextUnitOfWork = root;
+  state.wipRoot = root;
+  state.deletions = [];
+  state.hookIndex = 0;
+  state.effects = [];
+
+  // Higher priority = faster scheduling
+  if (priority <= Priority.USER_BLOCKING) {
+    requestIdleCallback(workLoop);
+  } else {
+    setTimeout(() => requestIdleCallback(workLoop), 0);
+  }
+};
+
+/**
+ * The `render` function in JavaScript updates the DOM with a new element and schedules work to be done
+ * on the element.
+ * @param element - The `element` parameter in the `render` function is the element that you want to
+ * render in the specified container. It could be a DOM element, a component, or any other valid
+ * element that you want to display on the screen.
+ * @param container - The `container` parameter in the `render` function is the DOM element where the
+ * `element` will be rendered. It is the target container where the element will be appended as a
+ * child.
+ * @returns The `render` function is returning the `state.wipRoot` object.
+ */
+const render = (element, container) => {
+  const state = getState();
+  state.wipRoot = {
+    dom: container,
+    props: {
+      children: [element],
+    },
+    alternate: state.currentRoot,
+  };
+
+  state.nextUnitOfWork = state.wipRoot;
+  state.deletions = [];
+  scheduleWork(state.wipRoot);
+  return state.wipRoot
+};
+
+/**
+ * The `init` function initializes a rendering process for a main element within a specified container
+ * root element.
+ * @param MainElement - MainElement is the main component or element that you want to render on the
+ * webpage. It could be a React component, a DOM element, or any other element that you want to display
+ * on the page.
+ * @param [root=__ryunix] - The `root` parameter in the `init` function is a default parameter with the
+ * value `'__ryunix'`. If no value is provided for `root` when calling the `init` function, it will
+ * default to `'__ryunix'`.
+ * @returns The `renderProcess` function is being returned from the `init` function.
+ */
+const init = (MainElement, root = '__ryunix') => {
+  const state = getState();
+  state.containerRoot = document.getElementById(root);
+  const renderProcess = render(MainElement, state.containerRoot);
+  return renderProcess
+};
+
+const safeRender = (component, props, onError) => {
+  try {
+    return component(props)
+  } catch (error) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error('Component error:', error);
+    }
+    if (onError) onError(error);
+    return null
+  }
+};
+
 /**
  * memo - Memoize component to prevent unnecessary re-renders
  */
@@ -1431,7 +1695,11 @@ let isBatching = false;
 let pendingUpdates = [];
 
 /**
- * Batch multiple state updates into single render
+ * The `batchUpdates` function in JavaScript allows for batching multiple updates and flushing them all
+ * at once.
+ * @param callback - The `callback` parameter in the `batchUpdates` function is a function that will be
+ * executed within a batch update. This function can contain multiple updates that need to be processed
+ * together in a batch to improve performance and avoid unnecessary re-renders.
  */
 const batchUpdates = (callback) => {
   const wasBatching = isBatching;
@@ -1449,7 +1717,9 @@ const batchUpdates = (callback) => {
 };
 
 /**
- * Flush all pending updates
+ * The `flushUpdates` function processes and executes pending updates stored in an array.
+ * @returns If the `pendingUpdates` array is empty, the `flushUpdates` function will return nothing
+ * (undefined).
  */
 const flushUpdates = () => {
   if (pendingUpdates.length === 0) return
@@ -1498,5 +1768,5 @@ var Ryunix = /*#__PURE__*/Object.freeze({
 
 window.Ryunix = Ryunix;
 
-export { Children, Fragment, hooks as Hooks, Image, NavLink, Priority, RouterProvider, Suspense, batchUpdates, createContext, createElement, Ryunix as default, init, lazy, memo, profiler, render, safeRender, useCallback, useDeferredValue, useEffect, useHash, useMemo, useMetadata, useProfiler, useQuery, useReducer, useRef, useRouter, useStore, useStorePriority, useTransition, withProfiler };
+export { Children, Fragment, hooks as Hooks, Image, MDXContent, MDXProvider, NavLink, Priority, RouterProvider, Suspense, batchUpdates, createContext, createElement, Ryunix as default, defaultComponents, getMDXComponents, init, lazy, memo, profiler, render, safeRender, useCallback, useDeferredValue, useEffect, useHash, useMDXComponents, useMemo, useMetadata, useProfiler, useQuery, useReducer, useRef, useRouter, useStore, useStorePriority, useTransition, withProfiler };
 //# sourceMappingURL=Ryunix.esm.js.map