@unsetsoft/ryunixjs 0.4.15-nightly.8 → 0.5.1

package/dist/Ryunix.js

@@ -1,17 +1,17 @@
 (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';
+  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: null,
-    nextUnitOfWork: null,
-    currentRoot: null,
-    wipRoot: null,
-    deletions: null,
-    wipFiber: null,
-    hookIndex: null,
+    containerRoot: undefined,
+    nextUnitOfWork: undefined,
+    currentRoot: undefined,
+    wipRoot: undefined,
+    deletions: undefined,
+    wipFiber: undefined,
+    hookIndex: undefined,
   };
 
   const reg = /[A-Z]/g;
@@ -19,6 +19,9 @@
   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({
@@ -27,6 +30,7 @@
     style: 'ryunix-style',
     className: 'ryunix-class',
     children: 'children',
+    boolean: 'boolean',
   });
 
   const OLD_STRINGS = Object.freeze({
@@ -40,14 +44,20 @@
     DELETION: Symbol(),
   });
 
-  const cloneElement = (element, props) => {
-    return {
-      ...element,
-      props: {
-        ...element.props,
-        ...props,
-      },
+  const Fragments = (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
   };
 
   /**
@@ -68,24 +78,33 @@
    */
 
   const createElement = (type, props, ...children) => {
+    children = childArray(children, []);
     return {
       type,
       props: {
         ...props,
-        children: children
-          .flat()
-          .map((child, index) =>
-            typeof child === STRINGS.object && child !== null
-              ? cloneElement(child, { key: index })
-              : child,
-          ),
+        children: children.map((child) =>
+          typeof child === STRINGS.object ? child : createTextElement(child),
+        ),
       },
     }
   };
 
-  const Fragments = (props) => {
-    console.log(props);
-    return
+  /**
+   * 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: [],
+      },
+    }
   };
 
   /**
@@ -118,50 +137,6 @@
     vars.containerRoot = document.getElementById(rootElement);
   };
 
-  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);
-  const hasDepsChanged = (prevDeps, nextDeps) =>
-    !prevDeps ||
-    !nextDeps ||
-    prevDeps.length !== nextDeps.length ||
-    prevDeps.some((dep, index) => dep !== nextDeps[index]);
-
-  /**
-   * 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();
-        });
-    }
-  };
-
   /**
    * @description The function creates a state.
    * @param initial - The initial value of the state for the hook.
@@ -202,8 +177,10 @@
       vars.deletions = [];
     };
 
-    vars.wipFiber.hooks.push(hook);
-    vars.hookIndex++;
+    if (vars.wipFiber && vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
+    }
     return [hook.state, setState]
   };
 
@@ -216,23 +193,31 @@
    * 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 = (effect, deps) => {
+
+  const useEffect = (callback, deps) => {
     const oldHook =
       vars.wipFiber.alternate &&
       vars.wipFiber.alternate.hooks &&
       vars.wipFiber.alternate.hooks[vars.hookIndex];
 
-    const hasChanged = hasDepsChanged(oldHook ? oldHook.deps : undefined, deps);
-
     const hook = {
-      tag: RYUNIX_TYPES.RYUNIX_EFFECT,
-      effect: hasChanged ? effect : null,
-      cancel: hasChanged && oldHook && oldHook.cancel,
+      type: RYUNIX_TYPES.RYUNIX_EFFECT,
       deps,
     };
 
-    vars.wipFiber.hooks.push(hook);
-    vars.hookIndex++;
+    if (!oldHook) {
+      // invoke callback if this is the first time
+      callback();
+    } else {
+      if (!lodash.isEqual(oldHook.deps, hook.deps)) {
+        callback();
+      }
+    }
+
+    if (vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
+    }
   };
 
   /**
@@ -241,8 +226,6 @@
    * @returns The `useQuery` function returns the `query` property of the `hook` object.
    */
   const useQuery = () => {
-    vars.hookIndex++;
-
     const oldHook =
       vars.wipFiber.alternate &&
       vars.wipFiber.alternate.hooks &&
@@ -255,101 +238,107 @@
     const Query = hasOld ? hasOld : params;
 
     const hook = {
-      tag: RYUNIX_TYPES.RYUNIX_EFFECT,
+      type: RYUNIX_TYPES.RYUNIX_URL_QUERY,
       query: Query,
     };
 
-    vars.wipFiber.hooks.push(hook);
+    if (vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
+    }
 
     return hook.query
   };
 
-  const Router = ({ path, component, children }) => {
-    const [currentPath, setCurrentPath] = useStore(window.location.pathname);
-
-    useEffect(() => {
-      const onLocationChange = () => {
-        setCurrentPath(() => window.location.pathname);
-      };
+  const useRef = (initial) => {
+    const oldHook =
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
 
-      window.addEventListener('navigate', onLocationChange);
-      window.addEventListener('pushsatate', onLocationChange);
-      window.addEventListener('popstate', onLocationChange);
+    const hook = {
+      type: RYUNIX_TYPES.RYUNIX_REF,
+      value: oldHook ? oldHook.value : { current: initial },
+    };
 
-      return () => {
-        setTimeout(() => {
-          window.removeEventListener('navigate', onLocationChange);
-          window.removeEventListener('pushsatate', onLocationChange);
-          window.removeEventListener('popstate', onLocationChange);
-        }, 100);
-      }
-    }, [currentPath]);
+    if (vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
+    }
 
-    return currentPath === path ? component() : null
+    return hook.value
   };
 
-  const Navigate = () => {
-    /**
-     * The function `push` is used to push a new state to the browser's history and trigger a custom
-     * event called 'pushstate'.
-     * @param to - The `to` parameter is a string representing the URL path to which you want to
-     * navigate.
-     * @param [state] - The `state` parameter is an optional object that represents the state associated
-     * with the new history entry. It can be used to store any data that you want to associate with the
-     * new URL. When you navigate back or forward in the browser history, this state object will be
-     * passed to the `popstate
-     * @returns The function `push` does not have a return statement, so it returns `undefined` by
-     * default.
-     */
-    const push = (to, state = {}) => {
-      if (window.location.pathname === to) return
+  const useMemo = (comp, deps) => {
+    const oldHook =
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
 
-      window.history.pushState(state, '', to);
-      const navigationEvent = new PopStateEvent('popstate');
-      window.dispatchEvent(navigationEvent);
+    const hook = {
+      type: RYUNIX_TYPES.RYUNIX_MEMO,
+      value: null,
+      deps,
     };
 
-    return { push }
-  };
-
-  const Link = (props) => {
-    if (props.style) {
-      throw new Error(
-        'The style attribute is not supported on internal components, use className.',
-      )
-    }
-    if (props.to === '') {
-      throw new Error("'to=' cannot be empty.")
-    }
-    if (props.className === '') {
-      throw new Error('className cannot be empty.')
-    }
-    if (props.label === '' && !props.children) {
-      throw new Error("'label=' cannot be empty.")
+    if (oldHook) {
+      if (lodash.isEqual(oldHook.deps, hook.deps)) {
+        hook.value = oldHook.value;
+      } else {
+        hook.value = comp();
+      }
+    } else {
+      hook.value = comp();
     }
 
-    if (!props.to) {
-      throw new Error("Missig 'to' param.")
+    if (vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
     }
-    const preventReload = (event) => {
-      if (event.metaKey || event.ctrlKey) {
-        return
-      }
 
-      event.preventDefault();
-      const { push } = Navigate();
-      push(props.to);
-    };
+    return hook.value
+  };
+  const useCallback = (callback, deps) => {
+    return useMemo(() => callback, deps)
+  };
 
-    const anchor = {
-      href: props.to,
-      onClick: preventReload,
-      ...props,
-    };
+  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);
 
-    const children = props.label ? props.label : props.children;
+  /**
+   * 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();
+        });
+    }
+  };
 
-    return createElement('a', anchor, children)
+  /**
+   * 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();
+        });
+    }
   };
 
   /**
@@ -456,9 +445,11 @@
    */
   const commitRoot = () => {
     vars.deletions.forEach(commitWork);
-    commitWork(vars.wipRoot.child);
-    vars.currentRoot = vars.wipRoot;
-    vars.wipRoot = null;
+    if (vars.wipRoot && vars.wipRoot.child) {
+      commitWork(vars.wipRoot.child);
+      vars.currentRoot = vars.wipRoot;
+    }
+    vars.wipRoot = undefined;
   };
 
   /**
@@ -480,13 +471,13 @@
     const domParent = domParentFiber.dom;
 
     if (fiber.effectTag === EFFECT_TAGS.PLACEMENT) {
-      if (fiber.dom != null) {
+      if (fiber.dom != undefined) {
         domParent.appendChild(fiber.dom);
       }
       runEffects(fiber);
     } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
       cancelEffects(fiber);
-      if (fiber.dom != null) {
+      if (fiber.dom != undefined) {
         updateDom(fiber.dom, fiber.alternate.props, fiber.props);
       }
       runEffects(fiber);
@@ -508,9 +499,9 @@
    * @param domParent - The parent DOM element from which the fiber's DOM element needs to be removed.
    */
   const commitDeletion = (fiber, domParent) => {
-    if (fiber.dom) {
+    if (fiber && fiber.dom) {
       domParent.removeChild(fiber.dom);
-    } else {
+    } else if (fiber && fiber.child) {
       commitDeletion(fiber.child, domParent);
     }
   };
@@ -536,7 +527,7 @@
     let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
     let prevSibling;
 
-    while (index < elements.length || oldFiber != null) {
+    while (index < elements.length || oldFiber != undefined) {
       const element = elements[index];
       let newFiber;
 
@@ -544,9 +535,9 @@
 
       if (sameType) {
         newFiber = {
-          type: oldFiber.type,
+          type: oldFiber ? oldFiber.type : undefined,
           props: element.props,
-          dom: oldFiber.dom,
+          dom: oldFiber ? oldFiber.dom : undefined,
           parent: wipFiber,
           alternate: oldFiber,
           effectTag: EFFECT_TAGS.UPDATE,
@@ -556,9 +547,9 @@
         newFiber = {
           type: element.type,
           props: element.props,
-          dom: null,
+          dom: undefined,
           parent: wipFiber,
-          alternate: null,
+          alternate: undefined,
           effectTag: EFFECT_TAGS.PLACEMENT,
         };
       }
@@ -573,7 +564,7 @@
 
       if (index === 0) {
         wipFiber.child = newFiber;
-      } else if (element) {
+      } else if (element && prevSibling) {
         prevSibling.sibling = newFiber;
       }
 
@@ -598,8 +589,16 @@
     vars.wipFiber = fiber;
     vars.hookIndex = 0;
     vars.wipFiber.hooks = [];
-    const children = [fiber.type(fiber.props)];
-    reconcileChildren(fiber, children);
+    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);
   };
 
   /**
@@ -612,7 +611,7 @@
     if (!fiber.dom) {
       fiber.dom = createDom(fiber);
     }
-    reconcileChildren(fiber, fiber.props.children.flat());
+    reconcileChildren(fiber, fiber.props.children);
   };
 
   var Components = /*#__PURE__*/Object.freeze({
@@ -655,7 +654,7 @@
    * @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 `null` if there are no more fibers to process.
+   * 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;
@@ -674,6 +673,7 @@
       }
       nextFiber = nextFiber.parent;
     }
+    return undefined
   };
 
   var Workers = /*#__PURE__*/Object.freeze({
@@ -697,12 +697,12 @@
   window.Ryunix = Ryunix;
 
   exports.Fragments = Fragments;
-  exports.Link = Link;
-  exports.Navigate = Navigate;
-  exports.Router = Router;
   exports.default = Ryunix;
+  exports.useCallback = useCallback;
   exports.useEffect = useEffect;
+  exports.useMemo = useMemo;
   exports.useQuery = useQuery;
+  exports.useRef = useRef;
   exports.useStore = useStore;
 
   Object.defineProperty(exports, '__esModule', { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "0.4.15-nightly.8",
+  "version": "0.5.1",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
   "types": "./dist/Ryunix.d.ts",
@@ -10,7 +10,6 @@
   },
   "homepage": "https://github.com/UnSetSoft/Ryunixjs#readme",
   "scripts": {
-    "build:ts": "npm run lint && tsc",
     "build:js": "rollup ./src/main.js --file ./dist/Ryunix.js --format umd --name Ryunix",
     "prepublishOnly": "npm run build:js",
     "postinstall": "npm run build:js",
@@ -20,13 +19,8 @@
   },
   "dependencies": {
     "eslint": "8.56.0",
-    "@typescript-eslint/parser": "6.17.0",
-    "@typescript-eslint/eslint-plugin": "6.17.0",
-    "rollup": "4.9.2",
-    "ts-node": "10.9.2",
-    "tsup": "8.0.1",
-    "typescript": "5.3.3",
-    "tslint": "6.1.3"
+    "lodash": "^4.17.20",
+    "rollup": "4.9.2"
   },
   "engines": {
     "node": ">=18.16.0"

package/src/lib/commits.js

@@ -7,9 +7,11 @@ import { EFFECT_TAGS, vars } from '../utils/index'
  */
 const commitRoot = () => {
   vars.deletions.forEach(commitWork)
-  commitWork(vars.wipRoot.child)
-  vars.currentRoot = vars.wipRoot
-  vars.wipRoot = null
+  if (vars.wipRoot && vars.wipRoot.child) {
+    commitWork(vars.wipRoot.child)
+    vars.currentRoot = vars.wipRoot
+  }
+  vars.wipRoot = undefined
 }
 
 /**
@@ -31,13 +33,13 @@ const commitWork = (fiber) => {
   const domParent = domParentFiber.dom
 
   if (fiber.effectTag === EFFECT_TAGS.PLACEMENT) {
-    if (fiber.dom != null) {
+    if (fiber.dom != undefined) {
       domParent.appendChild(fiber.dom)
     }
     runEffects(fiber)
   } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
     cancelEffects(fiber)
-    if (fiber.dom != null) {
+    if (fiber.dom != undefined) {
       updateDom(fiber.dom, fiber.alternate.props, fiber.props)
     }
     runEffects(fiber)
@@ -59,9 +61,9 @@ 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.dom) {
+  if (fiber && fiber.dom) {
     domParent.removeChild(fiber.dom)
-  } else {
+  } else if (fiber && fiber.child) {
     commitDeletion(fiber.child, domParent)
   }
 }

package/src/lib/components.js

@@ -13,8 +13,16 @@ const updateFunctionComponent = (fiber) => {
   vars.wipFiber = fiber
   vars.hookIndex = 0
   vars.wipFiber.hooks = []
-  const children = [fiber.type(fiber.props)]
-  reconcileChildren(fiber, children)
+  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)
 }
 
 /**
@@ -27,7 +35,7 @@ const updateHostComponent = (fiber) => {
   if (!fiber.dom) {
     fiber.dom = createDom(fiber)
   }
-  reconcileChildren(fiber, fiber.props.children.flat())
+  reconcileChildren(fiber, fiber.props.children)
 }
 
 export { updateFunctionComponent, updateHostComponent }

package/src/lib/createElement.js

@@ -1,5 +1,23 @@
 import { RYUNIX_TYPES, STRINGS } from '../utils/index'
 
+const Fragments = (props) => {
+  return props.children
+}
+
+const childArray = (children, out) => {
+  out = out || []
+  if (children == undefined || typeof children == STRINGS.boolean) {
+    // pass
+  } else if (Array.isArray(children)) {
+    children.some((child) => {
+      childArray(child, out)
+    })
+  } else {
+    out.push(children)
+  }
+  return out
+}
+
 const cloneElement = (element, props) => {
   return {
     ...element,
@@ -28,17 +46,14 @@ const cloneElement = (element, props) => {
  */
 
 const createElement = (type, props, ...children) => {
+  children = childArray(children, [])
   return {
     type,
     props: {
       ...props,
-      children: children
-        .flat()
-        .map((child, index) =>
-          typeof child === STRINGS.object && child !== null
-            ? cloneElement(child, { key: index })
-            : child,
-        ),
+      children: children.map((child) =>
+        typeof child === STRINGS.object ? child : createTextElement(child),
+      ),
     },
   }
 }
@@ -60,9 +75,4 @@ const createTextElement = (text) => {
   }
 }
 
-const Fragments = (props) => {
-  console.log(props)
-  return
-}
-
-export { createElement, createTextElement, Fragments }
+export { createElement, createTextElement, Fragments, cloneElement }

package/src/lib/hooks.js

@@ -1,6 +1,5 @@
-import { hasDepsChanged } from './effects'
 import { RYUNIX_TYPES, STRINGS, vars } from '../utils/index'
-
+import { isEqual } from 'lodash'
 /**
  * @description The function creates a state.
  * @param initial - The initial value of the state for the hook.
@@ -41,8 +40,10 @@ const useStore = (initial) => {
     vars.deletions = []
   }
 
-  vars.wipFiber.hooks.push(hook)
-  vars.hookIndex++
+  if (vars.wipFiber && vars.wipFiber.hooks) {
+    vars.wipFiber.hooks.push(hook)
+    vars.hookIndex++
+  }
   return [hook.state, setState]
 }
 
@@ -55,23 +56,31 @@ const useStore = (initial) => {
  * 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 = (effect, deps) => {
+
+const useEffect = (callback, deps) => {
   const oldHook =
     vars.wipFiber.alternate &&
     vars.wipFiber.alternate.hooks &&
     vars.wipFiber.alternate.hooks[vars.hookIndex]
 
-  const hasChanged = hasDepsChanged(oldHook ? oldHook.deps : undefined, deps)
-
   const hook = {
-    tag: RYUNIX_TYPES.RYUNIX_EFFECT,
-    effect: hasChanged ? effect : null,
-    cancel: hasChanged && oldHook && oldHook.cancel,
+    type: RYUNIX_TYPES.RYUNIX_EFFECT,
     deps,
   }
 
-  vars.wipFiber.hooks.push(hook)
-  vars.hookIndex++
+  if (!oldHook) {
+    // invoke callback if this is the first time
+    callback()
+  } else {
+    if (!isEqual(oldHook.deps, hook.deps)) {
+      callback()
+    }
+  }
+
+  if (vars.wipFiber.hooks) {
+    vars.wipFiber.hooks.push(hook)
+    vars.hookIndex++
+  }
 }
 
 /**
@@ -80,8 +89,6 @@ const useEffect = (effect, deps) => {
  * @returns The `useQuery` function returns the `query` property of the `hook` object.
  */
 const useQuery = () => {
-  vars.hookIndex++
-
   const oldHook =
     vars.wipFiber.alternate &&
     vars.wipFiber.alternate.hooks &&
@@ -94,13 +101,68 @@ const useQuery = () => {
   const Query = hasOld ? hasOld : params
 
   const hook = {
-    tag: RYUNIX_TYPES.RYUNIX_EFFECT,
+    type: RYUNIX_TYPES.RYUNIX_URL_QUERY,
     query: Query,
   }
 
-  vars.wipFiber.hooks.push(hook)
+  if (vars.wipFiber.hooks) {
+    vars.wipFiber.hooks.push(hook)
+    vars.hookIndex++
+  }
 
   return hook.query
 }
 
-export { useStore, useEffect, useQuery }
+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 (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)
+}
+
+export { useStore, useEffect, useQuery, useRef, useMemo, useCallback }

package/src/lib/index.js

@@ -1,14 +1,28 @@
-import { createElement, Fragments } from './createElement'
+import { createElement, cloneElement, Fragments } from './createElement'
 import { render, init } from './render'
-import { useStore, useEffect, useQuery } from './hooks'
-import { Router, Navigate, Link } from './navigation'
+import {
+  useStore,
+  useEffect,
+  useQuery,
+  useRef,
+  useMemo,
+  useCallback,
+} from './hooks'
 import * as Dom from './dom'
 import * as Workers from './workers'
 import * as Reconciler from './reconciler'
 import * as Components from './components'
 import * as Commits from './commits'
 
-export { useStore, useEffect, useQuery, Fragments, Router, Navigate, Link }
+export {
+  useStore,
+  useEffect,
+  useQuery,
+  useRef,
+  useMemo,
+  useCallback,
+  Fragments,
+}
 
 export default {
   createElement,

package/src/lib/reconciler.js

@@ -14,7 +14,7 @@ const reconcileChildren = (wipFiber, elements) => {
   let oldFiber = wipFiber.alternate && wipFiber.alternate.child
   let prevSibling
 
-  while (index < elements.length || oldFiber != null) {
+  while (index < elements.length || oldFiber != undefined) {
     const element = elements[index]
     let newFiber
 
@@ -22,9 +22,9 @@ const reconcileChildren = (wipFiber, elements) => {
 
     if (sameType) {
       newFiber = {
-        type: oldFiber.type,
+        type: oldFiber ? oldFiber.type : undefined,
         props: element.props,
-        dom: oldFiber.dom,
+        dom: oldFiber ? oldFiber.dom : undefined,
         parent: wipFiber,
         alternate: oldFiber,
         effectTag: EFFECT_TAGS.UPDATE,
@@ -34,9 +34,9 @@ const reconcileChildren = (wipFiber, elements) => {
       newFiber = {
         type: element.type,
         props: element.props,
-        dom: null,
+        dom: undefined,
         parent: wipFiber,
-        alternate: null,
+        alternate: undefined,
         effectTag: EFFECT_TAGS.PLACEMENT,
       }
     }
@@ -51,7 +51,7 @@ const reconcileChildren = (wipFiber, elements) => {
 
     if (index === 0) {
       wipFiber.child = newFiber
-    } else if (element) {
+    } else if (element && prevSibling) {
       prevSibling.sibling = newFiber
     }
 

package/src/lib/workers.js

@@ -36,7 +36,7 @@ requestIdleCallback(workLoop)
  * @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 `null` if there are no more fibers to process.
+ * 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
@@ -55,6 +55,7 @@ const performUnitOfWork = (fiber) => {
     }
     nextFiber = nextFiber.parent
   }
+  return undefined
 }
 
 export { performUnitOfWork, workLoop }

package/src/main.js

@@ -3,10 +3,10 @@ export {
   useStore,
   useEffect,
   useQuery,
+  useRef,
+  useMemo,
+  useCallback,
   Fragments,
-  Navigate,
-  Router,
-  Link,
 } from './lib/index.js'
 
 window.Ryunix = Ryunix

package/src/utils/index.js

@@ -1,11 +1,11 @@
 const vars = {
-  containerRoot: null,
-  nextUnitOfWork: null,
-  currentRoot: null,
-  wipRoot: null,
-  deletions: null,
-  wipFiber: null,
-  hookIndex: null,
+  containerRoot: undefined,
+  nextUnitOfWork: undefined,
+  currentRoot: undefined,
+  wipRoot: undefined,
+  deletions: undefined,
+  wipFiber: undefined,
+  hookIndex: undefined,
 }
 
 const reg = /[A-Z]/g
@@ -13,6 +13,9 @@ 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({
@@ -21,6 +24,7 @@ const STRINGS = Object.freeze({
   style: 'ryunix-style',
   className: 'ryunix-class',
   children: 'children',
+  boolean: 'boolean',
 })
 
 const OLD_STRINGS = Object.freeze({

package/src/lib/navigation.js

@@ -1,91 +0,0 @@
-import { useStore, useEffect } from './hooks'
-import { createElement } from './createElement'
-const Router = ({ path, component, children }) => {
-  const [currentPath, setCurrentPath] = useStore(window.location.pathname)
-
-  useEffect(() => {
-    const onLocationChange = () => {
-      setCurrentPath(() => window.location.pathname)
-    }
-
-    window.addEventListener('navigate', onLocationChange)
-    window.addEventListener('pushsatate', onLocationChange)
-    window.addEventListener('popstate', onLocationChange)
-
-    return () => {
-      setTimeout(() => {
-        window.removeEventListener('navigate', onLocationChange)
-        window.removeEventListener('pushsatate', onLocationChange)
-        window.removeEventListener('popstate', onLocationChange)
-      }, 100)
-    }
-  }, [currentPath])
-
-  return currentPath === path ? component() : null
-}
-
-const Navigate = () => {
-  /**
-   * The function `push` is used to push a new state to the browser's history and trigger a custom
-   * event called 'pushstate'.
-   * @param to - The `to` parameter is a string representing the URL path to which you want to
-   * navigate.
-   * @param [state] - The `state` parameter is an optional object that represents the state associated
-   * with the new history entry. It can be used to store any data that you want to associate with the
-   * new URL. When you navigate back or forward in the browser history, this state object will be
-   * passed to the `popstate
-   * @returns The function `push` does not have a return statement, so it returns `undefined` by
-   * default.
-   */
-  const push = (to, state = {}) => {
-    if (window.location.pathname === to) return
-
-    window.history.pushState(state, '', to)
-    const navigationEvent = new PopStateEvent('popstate')
-    window.dispatchEvent(navigationEvent)
-  }
-
-  return { push }
-}
-
-const Link = (props) => {
-  if (props.style) {
-    throw new Error(
-      'The style attribute is not supported on internal components, use className.',
-    )
-  }
-  if (props.to === '') {
-    throw new Error("'to=' cannot be empty.")
-  }
-  if (props.className === '') {
-    throw new Error('className cannot be empty.')
-  }
-  if (props.label === '' && !props.children) {
-    throw new Error("'label=' cannot be empty.")
-  }
-
-  if (!props.to) {
-    throw new Error("Missig 'to' param.")
-  }
-  const preventReload = (event) => {
-    if (event.metaKey || event.ctrlKey) {
-      return
-    }
-
-    event.preventDefault()
-    const { push } = Navigate()
-    push(props.to)
-  }
-
-  const anchor = {
-    href: props.to,
-    onClick: preventReload,
-    ...props,
-  }
-
-  const children = props.label ? props.label : props.children
-
-  return createElement('a', anchor, children)
-}
-
-export { Router, Navigate, Link }