@unsetsoft/ryunixjs 1.0.3-nightly.9 → 1.1.1

package/dist/Ryunix.js

@@ -79,10 +79,16 @@
 
   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),
         ),
@@ -108,11 +114,12 @@
   };
 
   /**
-   * 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().
+   * 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 = {
@@ -122,20 +129,24 @@
       },
       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.
+   * 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 = (root) => {
-    const rootElement = root || '__ryunix';
-    vars.containerRoot = document.getElementById(rootElement);
-    return undefined
+  const init = (MainElement, root = '__ryunix') => {
+    vars.containerRoot = document.getElementById(root);
+
+    render(MainElement, vars.containerRoot);
   };
 
   /**
@@ -151,24 +162,19 @@
       vars.wipFiber.alternate.hooks[vars.hookIndex];
     const hook = {
       state: oldHook ? oldHook.state : initial,
-      queue: [],
+      queue: oldHook ? [...oldHook.queue] : [],
     };
 
-    const actions = oldHook ? oldHook.queue : [];
-    actions.forEach((action) => {
+    hook.queue.forEach((action) => {
       hook.state =
         typeof action === STRINGS.function ? action(hook.state) : action;
     });
 
-    /**
-     * The function `setState` updates the state of a component in Ryunix by adding an action to a queue
-     * and setting up a new work-in-progress root.
-     * @param action - The `action` parameter is an object that represents a state update to be performed
-     * on a component. It contains information about the type of update to be performed and any new data
-     * that needs to be applied to the component's state.
-     */
+    hook.queue = [];
+
     const setState = (action) => {
       hook.queue.push(action);
+
       vars.wipRoot = {
         dom: vars.currentRoot.dom,
         props: vars.currentRoot.props,
@@ -182,6 +188,7 @@
       vars.wipFiber.hooks.push(hook);
       vars.hookIndex++;
     }
+
     return [hook.state, setState]
   };
 
@@ -221,6 +228,36 @@
     }
   };
 
+  /**
+   * 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 &&
@@ -292,40 +329,31 @@
       }
     }, []);
 
-    const currentRoute = routes.find((route) => route.path === location);
-    const Children = () => (currentRoute ? currentRoute.component : null);
-
-    return { Children, navigate }
-  };
-
-  /**
-   * The `useQuery` function is a custom hook in JavaScript that retrieves query parameters from the URL
-   * and stores them in a hook for easy access.
-   * @returns The `useQuery` function returns the `query` property of the `hook` object.
-   */
-  const useQuery = () => {
-    const oldHook =
-      vars.wipFiber.alternate &&
-      vars.wipFiber.alternate.hooks &&
-      vars.wipFiber.alternate.hooks[vars.hookIndex];
+    let currentRoute = routes.find((route) => route.path === location);
+    if (!currentRoute) {
+      currentRoute = {
+        component: routes.find((route) => route.NotFound)?.NotFound || null,
+      };
+    }
 
-    const hasOld = oldHook ? oldHook : undefined;
+    const Children = () =>
+      currentRoute.component ? currentRoute.component : null;
 
-    const urlSearchParams = new URLSearchParams(window.location.search);
-    const params = Object.fromEntries(urlSearchParams.entries());
-    const Query = hasOld ? hasOld : params;
+    const NavLink = ({ to, ...props }) => {
+      const { children, ...restProps } = props;
 
-    const hook = {
-      type: RYUNIX_TYPES.RYUNIX_URL_QUERY,
-      query: Query,
+      const NewProps = {
+        href: to,
+        onClick: (e) => {
+          e.preventDefault();
+          navigate(to);
+        },
+        ...restProps,
+      };
+      return createElement('a', NewProps, children)
     };
 
-    if (vars.wipFiber.hooks) {
-      vars.wipFiber.hooks.push(hook);
-      vars.hookIndex++;
-    }
-
-    return hook.query
+    return { Children, navigate, NavLink }
   };
 
   const isEvent = (key) => key.startsWith('on');
@@ -486,9 +514,7 @@
    * @returns The function does not return anything, it performs side effects by manipulating the DOM.
    */
   const commitWork = (fiber) => {
-    if (!fiber) {
-      return
-    }
+    if (!fiber) return
 
     let domParentFiber = fiber.parent;
     while (!domParentFiber.dom) {
@@ -501,15 +527,19 @@
         domParent.appendChild(fiber.dom);
       }
       runEffects(fiber);
-    } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
+    }
+
+    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);
+    }
+
+    if (fiber.effectTag === EFFECT_TAGS.DELETION) {
       commitDeletion(fiber, domParent);
+      cancelEffects(fiber);
       return
     }
 
@@ -525,9 +555,9 @@
    * @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) {
+    if (fiber.dom) {
       domParent.removeChild(fiber.dom);
-    } else if (fiber && fiber.child) {
+    } else {
       commitDeletion(fiber.child, domParent);
     }
   };
@@ -539,20 +569,6 @@
     commitWork: commitWork
   });
 
-  const isPropsChanged = (prevProps, nextProps) => {
-    for (let key in prevProps) {
-      if (prevProps[key] !== nextProps[key]) {
-        return true
-      }
-    }
-    for (let key in nextProps) {
-      if (!(key in prevProps)) {
-        return true
-      }
-    }
-    return false
-  };
-
   /**
    * This function reconciles the children of a fiber node with a new set of elements, creating new
    * fibers for new elements, updating existing fibers for elements with the same type, and marking old
@@ -565,24 +581,33 @@
   const reconcileChildren = (wipFiber, elements) => {
     let index = 0;
     let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
-    let prevSibling;
+    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 || oldFiber != undefined) {
+    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;
+      const sameType = oldFiber && element && element.type === oldFiber.type;
 
       if (sameType) {
         newFiber = {
-          type: oldFiber ? oldFiber.type : undefined,
+          type: oldFiber.type,
           props: element.props,
-          dom: oldFiber ? oldFiber.dom : undefined,
+          dom: oldFiber.dom,
           parent: wipFiber,
           alternate: oldFiber,
-          effectTag: isPropsChanged(oldFiber.props, element.props)
-            ? EFFECT_TAGS.UPDATE
-            : null,
+          effectTag: EFFECT_TAGS.UPDATE,
         };
+        oldFibersMap.delete(key);
       } else if (element) {
         newFiber = {
           type: element.type,
@@ -592,18 +617,16 @@
           alternate: undefined,
           effectTag: EFFECT_TAGS.PLACEMENT,
         };
-      } else if (oldFiber) {
-        oldFiber.effectTag = EFFECT_TAGS.DELETION;
-        vars.deletions.push(oldFiber);
       }
 
-      if (oldFiber) {
-        oldFiber = oldFiber.sibling;
-      }
+      oldFibersMap.forEach((oldFiber) => {
+        oldFiber.effectTag = EFFECT_TAGS.DELETION;
+        vars.deletions.push(oldFiber);
+      });
 
       if (index === 0) {
         wipFiber.child = newFiber;
-      } else if (element && prevSibling) {
+      } else if (prevSibling) {
         prevSibling.sibling = newFiber;
       }
 
@@ -678,9 +701,7 @@
       commitRoot();
     }
 
-    if (vars.nextUnitOfWork) {
-      requestIdleCallback(workLoop, { timeout: 100 });
-    }
+    requestIdleCallback(workLoop);
   };
 
   requestIdleCallback(workLoop);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "1.0.3-nightly.9",
+  "version": "1.1.1",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
   "types": "./dist/Ryunix.d.ts",

package/src/lib/commits.js

@@ -22,9 +22,7 @@ const commitRoot = () => {
  * @returns The function does not return anything, it performs side effects by manipulating the DOM.
  */
 const commitWork = (fiber) => {
-  if (!fiber) {
-    return
-  }
+  if (!fiber) return
 
   let domParentFiber = fiber.parent
   while (!domParentFiber.dom) {
@@ -37,15 +35,19 @@ const commitWork = (fiber) => {
       domParent.appendChild(fiber.dom)
     }
     runEffects(fiber)
-  } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
+  }
+
+  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)
+  }
+
+  if (fiber.effectTag === EFFECT_TAGS.DELETION) {
     commitDeletion(fiber, domParent)
+    cancelEffects(fiber)
     return
   }
 
@@ -61,11 +63,10 @@ const commitWork = (fiber) => {
  * @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) {
+  if (fiber.dom) {
     domParent.removeChild(fiber.dom)
-  } else if (fiber && fiber.child) {
+  } else {
     commitDeletion(fiber.child, domParent)
   }
 }
-
 export { commitDeletion, commitWork, commitRoot }

package/src/lib/createElement.js

@@ -47,10 +47,16 @@ const cloneElement = (element, props) => {
 
 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),
       ),

package/src/lib/hooks.js

@@ -1,6 +1,6 @@
 import { RYUNIX_TYPES, STRINGS, vars } from '../utils/index'
 import { isEqual } from 'lodash'
-
+import { createElement } from './createElement'
 /**
  * @description The function creates a state.
  * @param initial - The initial value of the state for the hook.
@@ -14,24 +14,19 @@ const useStore = (initial) => {
     vars.wipFiber.alternate.hooks[vars.hookIndex]
   const hook = {
     state: oldHook ? oldHook.state : initial,
-    queue: [],
+    queue: oldHook ? [...oldHook.queue] : [],
   }
 
-  const actions = oldHook ? oldHook.queue : []
-  actions.forEach((action) => {
+  hook.queue.forEach((action) => {
     hook.state =
       typeof action === STRINGS.function ? action(hook.state) : action
   })
 
-  /**
-   * The function `setState` updates the state of a component in Ryunix by adding an action to a queue
-   * and setting up a new work-in-progress root.
-   * @param action - The `action` parameter is an object that represents a state update to be performed
-   * on a component. It contains information about the type of update to be performed and any new data
-   * that needs to be applied to the component's state.
-   */
+  hook.queue = []
+
   const setState = (action) => {
     hook.queue.push(action)
+
     vars.wipRoot = {
       dom: vars.currentRoot.dom,
       props: vars.currentRoot.props,
@@ -45,6 +40,7 @@ const useStore = (initial) => {
     vars.wipFiber.hooks.push(hook)
     vars.hookIndex++
   }
+
   return [hook.state, setState]
 }
 
@@ -84,6 +80,36 @@ 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 &&
@@ -155,40 +181,31 @@ const useRouter = (routes) => {
     }
   }, [])
 
-  const currentRoute = routes.find((route) => route.path === location)
-  const Children = () => (currentRoute ? currentRoute.component : null)
-
-  return { Children, navigate }
-}
-
-/**
- * The `useQuery` function is a custom hook in JavaScript that retrieves query parameters from the URL
- * and stores them in a hook for easy access.
- * @returns The `useQuery` function returns the `query` property of the `hook` object.
- */
-const useQuery = () => {
-  const oldHook =
-    vars.wipFiber.alternate &&
-    vars.wipFiber.alternate.hooks &&
-    vars.wipFiber.alternate.hooks[vars.hookIndex]
-
-  const hasOld = oldHook ? oldHook : undefined
+  let currentRoute = routes.find((route) => route.path === location)
+  if (!currentRoute) {
+    currentRoute = {
+      component: routes.find((route) => route.NotFound)?.NotFound || null,
+    }
+  }
 
-  const urlSearchParams = new URLSearchParams(window.location.search)
-  const params = Object.fromEntries(urlSearchParams.entries())
-  const Query = hasOld ? hasOld : params
+  const Children = () =>
+    currentRoute.component ? currentRoute.component : null
 
-  const hook = {
-    type: RYUNIX_TYPES.RYUNIX_URL_QUERY,
-    query: Query,
-  }
+  const NavLink = ({ to, ...props }) => {
+    const { children, ...restProps } = props
 
-  if (vars.wipFiber.hooks) {
-    vars.wipFiber.hooks.push(hook)
-    vars.hookIndex++
+    const NewProps = {
+      href: to,
+      onClick: (e) => {
+        e.preventDefault()
+        navigate(to)
+      },
+      ...restProps,
+    }
+    return createElement('a', NewProps, children)
   }
 
-  return hook.query
+  return { Children, navigate, NavLink }
 }
 
 export {

package/src/lib/reconciler.js

@@ -1,19 +1,5 @@
 import { EFFECT_TAGS, vars } from '../utils/index'
 
-const isPropsChanged = (prevProps, nextProps) => {
-  for (let key in prevProps) {
-    if (prevProps[key] !== nextProps[key]) {
-      return true
-    }
-  }
-  for (let key in nextProps) {
-    if (!(key in prevProps)) {
-      return true
-    }
-  }
-  return false
-}
-
 /**
  * This function reconciles the children of a fiber node with a new set of elements, creating new
  * fibers for new elements, updating existing fibers for elements with the same type, and marking old
@@ -26,24 +12,33 @@ const isPropsChanged = (prevProps, nextProps) => {
 const reconcileChildren = (wipFiber, elements) => {
   let index = 0
   let oldFiber = wipFiber.alternate && wipFiber.alternate.child
-  let prevSibling
+  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 || oldFiber != undefined) {
+  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
+    const sameType = oldFiber && element && element.type === oldFiber.type
 
     if (sameType) {
       newFiber = {
-        type: oldFiber ? oldFiber.type : undefined,
+        type: oldFiber.type,
         props: element.props,
-        dom: oldFiber ? oldFiber.dom : undefined,
+        dom: oldFiber.dom,
         parent: wipFiber,
         alternate: oldFiber,
-        effectTag: isPropsChanged(oldFiber.props, element.props)
-          ? EFFECT_TAGS.UPDATE
-          : null,
+        effectTag: EFFECT_TAGS.UPDATE,
       }
+      oldFibersMap.delete(key)
     } else if (element) {
       newFiber = {
         type: element.type,
@@ -53,18 +48,16 @@ const reconcileChildren = (wipFiber, elements) => {
         alternate: undefined,
         effectTag: EFFECT_TAGS.PLACEMENT,
       }
-    } else if (oldFiber) {
-      oldFiber.effectTag = EFFECT_TAGS.DELETION
-      vars.deletions.push(oldFiber)
     }
 
-    if (oldFiber) {
-      oldFiber = oldFiber.sibling
-    }
+    oldFibersMap.forEach((oldFiber) => {
+      oldFiber.effectTag = EFFECT_TAGS.DELETION
+      vars.deletions.push(oldFiber)
+    })
 
     if (index === 0) {
       wipFiber.child = newFiber
-    } else if (element && prevSibling) {
+    } else if (prevSibling) {
       prevSibling.sibling = newFiber
     }
 

package/src/lib/render.js

@@ -1,11 +1,18 @@
 import { vars } from '../utils/index'
 
+const clearContainer = (container) => {
+  while (container.firstChild) {
+    container.removeChild(container.firstChild)
+  }
+}
+
 /**
- * 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().
+ * 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 = {
@@ -15,20 +22,24 @@ const render = (element, container) => {
     },
     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.
+ * 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 = (root) => {
-  const rootElement = root || '__ryunix'
-  vars.containerRoot = document.getElementById(rootElement)
-  return this
+const init = (MainElement, root = '__ryunix') => {
+  vars.containerRoot = document.getElementById(root)
+
+  render(MainElement, vars.containerRoot)
 }
 
 export { render, init }

package/src/lib/workers.js

@@ -21,9 +21,7 @@ const workLoop = (deadline) => {
     commitRoot()
   }
 
-  if (vars.nextUnitOfWork) {
-    requestIdleCallback(workLoop, { timeout: 100 })
-  }
+  requestIdleCallback(workLoop)
 }
 
 requestIdleCallback(workLoop)