@unsetsoft/ryunixjs 1.1.6-canary.3 → 1.1.6-canary.7

package/dist/Ryunix.js

@@ -1,8 +1,8 @@
 (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';
 
   let vars = {
     containerRoot: {},
@@ -37,37 +37,31 @@
     string: 'string',
   });
 
+  const OLD_STRINGS = Object.freeze({
+    style: 'style',
+    className: 'className',
+  });
+
   const EFFECT_TAGS = Object.freeze({
     PLACEMENT: Symbol('ryunix.reconciler.status.placement').toString(),
     UPDATE: Symbol('ryunix.reconciler.status.update').toString(),
     DELETION: Symbol('ryunix.reconciler.status.deletion').toString(),
   });
 
-  const shallowEqual = (arr1, arr2) => {
-    if (!arr1 || !arr2 || arr1.length !== arr2.length) return false
-    for (let i = 0; i < arr1.length; i++) {
-      if (arr1[i] !== arr2[i]) return false
-    }
-    return true
-  };
-
-  const resolveProps = (props) => {
-    const resolvedProps = {};
-    for (const key in props) {
-      resolvedProps[key] =
-        typeof props[key] === STRINGS.function ? props[key]() : props[key];
-    }
-    return resolvedProps
+  const generateHash = (prefix) => {
+    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`
   };
 
   const Fragment = (props) => {
     return props.children
   };
 
-  const childArray = (children, out = []) => {
-    if (children == null) return out
-    if (Array.isArray(children)) {
-      children.forEach((child) => childArray(child, out));
+  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);
     }
@@ -92,18 +86,18 @@
    */
 
   const createElement = (type, props, ...children) => {
-    const resolvedProps = resolveProps({ ...props });
-    resolvedProps.children = childArray(children, []);
+    children = childArray(children, []);
     const key =
-      resolvedProps.key ||
-      `${RYUNIX_TYPES.Ryunix_ELEMENT.toString()}-${Math.random().toString(36).substring(2, 9)}`;
+      props && props.key
+        ? generateHash(props.key)
+        : generateHash(RYUNIX_TYPES.Ryunix_ELEMENT.toString());
 
     return {
       type,
       props: {
-        ...resolvedProps,
+        ...props,
         key,
-        children: resolvedProps.children.map((child) =>
+        children: children.map((child) =>
           typeof child === STRINGS.object ? child : createTextElement(child),
         ),
       },
@@ -170,36 +164,40 @@
    * `setState` function that can be used to update the state.
    */
   const useStore = (initial) => {
-    const oldHook = vars.wipFiber.alternate?.hooks?.[vars.hookIndex];
+    const oldHook =
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
     const hook = {
       state: oldHook ? oldHook.state : initial,
       queue: oldHook ? [...oldHook.queue] : [],
     };
 
     hook.queue.forEach((action) => {
-      const newState =
+      hook.state =
         typeof action === STRINGS.function ? action(hook.state) : action;
-      if (newState !== hook.state) {
-        hook.state = newState;
-      }
     });
 
+    hook.queue = [];
+
     const setState = (action) => {
       hook.queue.push(action);
 
-      if (!vars.wipRoot) {
-        vars.wipRoot = {
-          dom: vars.currentRoot.dom,
-          props: vars.currentRoot.props || {},
-          alternate: vars.currentRoot,
-        };
-        vars.nextUnitOfWork = vars.wipRoot;
-        vars.deletions = [];
-      }
+      vars.wipRoot = {
+        dom: vars.currentRoot.dom,
+        props: {
+          ...vars.currentRoot.props,
+        },
+        alternate: vars.currentRoot,
+      };
+      vars.nextUnitOfWork = vars.wipRoot;
+      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]
   };
@@ -215,53 +213,77 @@
    */
 
   const useEffect = (callback, deps) => {
-    const oldHook = vars.wipFiber.alternate?.hooks?.[vars.hookIndex];
+    const oldHook =
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
+
     const hook = {
       type: RYUNIX_TYPES.RYUNIX_EFFECT,
       deps,
-      cleanup: oldHook?.cleanup,
     };
 
-    const hasChangedDeps = !oldHook || !shallowEqual(oldHook.deps, deps);
-
-    if (hasChangedDeps && hook.cleanup) {
-      hook.cleanup();
+    if (!oldHook) {
+      // invoke callback if this is the first time
+      callback();
+    } else {
+      if (!lodash.isEqual(oldHook.deps, hook.deps)) {
+        callback();
+      }
     }
 
-    if (hasChangedDeps) {
-      hook.cleanup = callback();
+    if (vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
     }
-
-    vars.wipFiber.hooks.push(hook);
-    vars.hookIndex++;
   };
 
   const useRef = (initial) => {
-    const oldHook = vars.wipFiber.alternate?.hooks?.[vars.hookIndex];
+    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 },
     };
 
-    vars.wipFiber.hooks.push(hook);
-    vars.hookIndex++;
+    if (vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
+    }
+
     return hook.value
   };
 
-  const useMemo = (computeFn, deps) => {
-    const oldHook = vars.wipFiber.alternate?.hooks?.[vars.hookIndex];
+  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: oldHook ? oldHook.value : computeFn(),
+      value: null,
       deps,
     };
 
-    if (!oldHook || !shallowEqual(oldHook.deps, deps)) {
-      hook.value = computeFn();
+    if (oldHook) {
+      if (lodash.isEqual(oldHook.deps, hook.deps)) {
+        hook.value = oldHook.value;
+      } else {
+        hook.value = comp();
+      }
+    } else {
+      hook.value = comp();
+    }
+
+    if (vars.wipFiber.hooks) {
+      vars.wipFiber.hooks.push(hook);
+      vars.hookIndex++;
     }
 
-    vars.wipFiber.hooks.push(hook);
-    vars.hookIndex++;
     return hook.value
   };
 
@@ -341,51 +363,51 @@
   const useRouter = (routes) => {
     const [location, setLocation] = useStore(window.location.pathname);
 
-    const routeCache = new Map();
-
     const findRoute = (routes, path) => {
-      if (routeCache.has(path)) return routeCache.get(path)
-
       const pathname = path.split('?')[0];
-      const notFoundRoute = routes.find((route) => route.path === '*');
+
+      const notFoundRoute = routes.find((route) => route.NotFound);
       const notFound = notFoundRoute
         ? { route: { component: notFoundRoute.NotFound }, params: {} }
         : { route: { component: null }, params: {} };
 
       for (const route of routes) {
         if (route.subRoutes) {
-          const subRoute = findRoute(route.subRoutes, path);
-          if (subRoute && subRoute.route.component) {
-            routeCache.set(path, subRoute);
-            return subRoute
-          }
+          const childRoute = findRoute(route.subRoutes, path);
+          if (childRoute) return childRoute
+        }
+
+        if (route.path === '*') {
+          return notFound
         }
 
         if (!route.path || typeof route.path !== 'string') {
           console.warn('Invalid route detected:', route);
+          console.info(
+            "if you are using { NotFound: NotFound } please add { path: '*', NotFound: NotFound }",
+          );
           continue
         }
 
         const keys = [];
-        const pattern = `^${route.path.replace(/:\w+/g, (match) => {
-        keys.push(match.substring(1));
-        return '([^/]+)'
-      })}$`;
+        const pattern = new RegExp(
+          `^${route.path.replace(/:\w+/g, (match) => {
+          keys.push(match.substring(1));
+          return '([^/]+)'
+        })}$`,
+        );
 
-        const match = pathname.match(new RegExp(pattern));
+        const match = pathname.match(pattern);
         if (match) {
           const params = keys.reduce((acc, key, index) => {
             acc[key] = match[index + 1];
             return acc
           }, {});
 
-          const routeData = { route, params };
-          routeCache.set(path, routeData);
-          return routeData
+          return { route, params }
         }
       }
 
-      routeCache.set(path, notFound);
       return notFound
     };
 
@@ -458,12 +480,13 @@
    * "cancelEffects" is likely intended
    */
   const cancelEffects = (fiber) => {
-    if (!fiber.hooks) return
-    fiber.hooks
-      .filter((hook) => hook.type === RYUNIX_TYPES.RYUNIX_EFFECT && hook.cancel)
-      .forEach((effectHook) => {
-        effectHook.cancel();
-      });
+    if (fiber.hooks) {
+      fiber.hooks
+        .filter((hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.cancel)
+        .forEach((effectHook) => {
+          effectHook.cancel();
+        });
+    }
   };
 
   /**
@@ -474,12 +497,13 @@
    * contains information about a component and its children, as
    */
   const runEffects = (fiber) => {
-    if (!fiber.hooks) return
-    fiber.hooks
-      .filter((hook) => hook.type === RYUNIX_TYPES.RYUNIX_EFFECT && hook.effect)
-      .forEach((effectHook) => {
-        effectHook.cancel = effectHook.effect();
-      });
+    if (fiber.hooks) {
+      fiber.hooks
+        .filter((hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.effect)
+        .forEach((effectHook) => {
+          effectHook.cancel = effectHook.effect();
+        });
+    }
   };
 
   /**
@@ -494,14 +518,15 @@
    */
   const createDom = (fiber) => {
     const dom =
-      fiber.type === RYUNIX_TYPES.TEXT_ELEMENT
-        ? document.createTextNode(fiber.props.nodeValue)
+      fiber.type == RYUNIX_TYPES.TEXT_ELEMENT
+        ? document.createTextNode('')
         : document.createElement(fiber.type);
 
     updateDom(dom, {}, fiber.props);
 
     return dom
   };
+
   /**
    * The function updates the DOM by removing old event listeners and properties, and adding new ones
    * based on the previous and next props.
@@ -518,14 +543,6 @@
         dom.removeEventListener(eventType, prevProps[name]);
       });
 
-    Object.keys(nextProps)
-      .filter(isEvent)
-      .filter(isNew(prevProps, nextProps))
-      .forEach((name) => {
-        const eventType = name.toLowerCase().substring(2);
-        dom.addEventListener(eventType, nextProps[name]);
-      });
-
     Object.keys(prevProps)
       .filter(isProperty)
       .filter(isGone(nextProps))
@@ -538,24 +555,47 @@
       .filter(isNew(prevProps, nextProps))
       .forEach((name) => {
         if (name === STRINGS.style) {
-          DomStyle(dom, nextProps[name]);
+          DomStyle(dom, nextProps['ryunix-style']);
+        } else if (name === OLD_STRINGS.style) {
+          DomStyle(dom, nextProps.style);
         } else if (name === STRINGS.className) {
-          if (nextProps[name] !== prevProps[name]) {
-            dom.className = nextProps[name];
+          if (nextProps['ryunix-class'] === '') {
+            throw new Error('data-class cannot be empty.')
           }
+
+          prevProps['ryunix-class'] &&
+            dom.classList.remove(...prevProps['ryunix-class'].split(/\s+/));
+          dom.classList.add(...nextProps['ryunix-class'].split(/\s+/));
+        } else if (name === OLD_STRINGS.className) {
+          if (nextProps.className === '') {
+            throw new Error('className cannot be empty.')
+          }
+
+          prevProps.className &&
+            dom.classList.remove(...prevProps.className.split(/\s+/));
+          dom.classList.add(...nextProps.className.split(/\s+/));
         } else {
           dom[name] = nextProps[name];
         }
       });
+
+    Object.keys(nextProps)
+      .filter(isEvent)
+      .filter(isNew(prevProps, nextProps))
+      .forEach((name) => {
+        const eventType = name.toLowerCase().substring(2);
+        dom.addEventListener(eventType, nextProps[name]);
+      });
   };
 
   const DomStyle = (dom, style) => {
-    for (const key in style) {
-      const styleProp = key.replace(reg, (v) => '-' + v.toLowerCase());
-      if (dom.style[styleProp] !== style[key]) {
-        dom.style[styleProp] = style[key];
-      }
-    }
+    dom.style = Object.keys(style).reduce((acc, styleName) => {
+      const key = styleName.replace(reg, function (v) {
+        return '-' + v.toLowerCase()
+      });
+      acc += `${key}: ${style[styleName]};`;
+      return acc
+    }, '');
   };
 
   var Dom = /*#__PURE__*/Object.freeze({
@@ -574,7 +614,7 @@
       commitWork(vars.wipRoot.child);
       vars.currentRoot = vars.wipRoot;
     }
-    vars.wipRoot = null;
+    vars.wipRoot = undefined;
   };
 
   /**
@@ -588,15 +628,15 @@
     if (!fiber) return
 
     let domParentFiber = fiber.parent;
-    while (domParentFiber && !domParentFiber.dom) {
+    while (!domParentFiber.dom) {
       domParentFiber = domParentFiber.parent;
     }
-    const domParent = domParentFiber?.dom;
+    const domParent = domParentFiber.dom;
 
-    if (fiber.effectTag === EFFECT_TAGS.PLACEMENT && fiber.dom) {
+    if (fiber.effectTag === EFFECT_TAGS.PLACEMENT && fiber.dom != null) {
       domParent.appendChild(fiber.dom);
       runEffects(fiber);
-    } else if (fiber.effectTag === EFFECT_TAGS.UPDATE && fiber.dom) {
+    } else if (fiber.effectTag === EFFECT_TAGS.UPDATE && fiber.dom != null) {
       cancelEffects(fiber);
       updateDom(fiber.dom, fiber.alternate.props, fiber.props);
       runEffects(fiber);
@@ -606,6 +646,7 @@
       return
     }
 
+    // Recorre los "fibers" hijos y hermanos
     commitWork(fiber.child);
     commitWork(fiber.sibling);
   };
@@ -620,12 +661,9 @@
   const commitDeletion = (fiber, domParent) => {
     if (fiber.dom) {
       domParent.removeChild(fiber.dom);
-    } else if (fiber.child) {
+    } else {
       commitDeletion(fiber.child, domParent);
     }
-    if (fiber.sibling) {
-      commitDeletion(fiber.sibling, domParent);
-    }
   };
 
   var Commits = /*#__PURE__*/Object.freeze({
@@ -644,16 +682,15 @@
    * @param elements - an array of elements representing the new children to be rendered in the current
    * fiber's subtree
    */
-
   const reconcileChildren = (wipFiber, elements) => {
     let index = 0;
+    let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
     let prevSibling = null;
-    const oldFibersMap = new Map();
 
-    let oldFiber = wipFiber.alternate?.child;
+    const oldFibersMap = new Map();
     while (oldFiber) {
-      const key = oldFiber.props.key || oldFiber.type;
-      oldFibersMap.set(key, oldFiber);
+      const oldKey = oldFiber.props.key || oldFiber.type;
+      oldFibersMap.set(oldKey, oldFiber);
       oldFiber = oldFiber.sibling;
     }
 
@@ -665,12 +702,13 @@
       let newFiber;
       const sameType = oldFiber && element && element.type === oldFiber.type;
 
-      if (sameType && shallowEqual(oldFiber.props, element.props)) {
-        newFiber = oldFiber;
-      } else if (sameType) {
+      if (sameType) {
         newFiber = {
-          ...oldFiber,
+          type: oldFiber.type,
           props: element.props,
+          dom: oldFiber.dom,
+          parent: wipFiber,
+          alternate: oldFiber,
           effectTag: EFFECT_TAGS.UPDATE,
         };
         oldFibersMap.delete(key);
@@ -678,8 +716,10 @@
         newFiber = {
           type: element.type,
           props: element.props,
-          effectTag: EFFECT_TAGS.PLACEMENT,
+          dom: undefined,
           parent: wipFiber,
+          alternate: undefined,
+          effectTag: EFFECT_TAGS.PLACEMENT,
         };
       }
 
@@ -717,7 +757,9 @@
     vars.wipFiber.hooks = [];
 
     const children = fiber.type(fiber.props);
-    reconcileChildren(fiber, Array.isArray(children) ? children : [children]);
+    let childArr = Array.isArray(children) ? children : [children];
+
+    reconcileChildren(fiber, childArr);
   };
 
   /**
@@ -758,9 +800,7 @@
       commitRoot();
     }
 
-    if (vars.nextUnitOfWork || vars.wipRoot) {
-      requestIdleCallback(workLoop);
-    }
+    requestIdleCallback(workLoop);
   };
 
   requestIdleCallback(workLoop);
@@ -784,9 +824,9 @@
     } else {
       updateHostComponent(fiber);
     }
-
-    if (fiber.child) return fiber.child
-
+    if (fiber.child) {
+      return fiber.child
+    }
     let nextFiber = fiber;
     while (nextFiber) {
       if (nextFiber.sibling) {
@@ -794,6 +834,7 @@
       }
       nextFiber = nextFiber.parent;
     }
+    return undefined
   };
 
   var Workers = /*#__PURE__*/Object.freeze({

package/dist/Ryunix.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Ryunix={})}(this,(function(e){"use strict";let t={containerRoot:{},nextUnitOfWork:{},currentRoot:{},wipRoot:{},deletions:[],wipFiber:{},hookIndex:0};const o=/[A-Z]/g,n=Object.freeze({TEXT_ELEMENT:Symbol("text.element"),Ryunix_ELEMENT:Symbol("ryunix.element"),RYUNIX_EFFECT:Symbol("ryunix.effect"),RYUNIX_MEMO:Symbol("ryunix.memo"),RYUNIX_URL_QUERY:Symbol("ryunix.urlQuery"),RYUNIX_REF:Symbol("ryunix.ref"),RYUNIX_STORE:Symbol("ryunix.store"),RYUNIX_REDUCE:Symbol("ryunix.reduce")}),r=Object.freeze({object:"object",function:"function",style:"ryunix-style",className:"ryunix-class",children:"children",boolean:"boolean",string:"string"}),i=Object.freeze({PLACEMENT:Symbol("ryunix.reconciler.status.placement").toString(),UPDATE:Symbol("ryunix.reconciler.status.update").toString(),DELETION:Symbol("ryunix.reconciler.status.deletion").toString()}),s=(e,t)=>{if(!e||!t||e.length!==t.length)return!1;for(let o=0;o<e.length;o++)if(e[o]!==t[o])return!1;return!0},c=(e,t=[])=>(null==e||(Array.isArray(e)?e.forEach((e=>c(e,t))):t.push(e)),t),l=(e,t,...o)=>{const i=(e=>{const t={};for(const o in e)t[o]=typeof e[o]===r.function?e[o]():e[o];return t})({...t});i.children=c(o,[]);const s=i.key||`${n.Ryunix_ELEMENT.toString()}-${Math.random().toString(36).substring(2,9)}`;return{type:e,props:{...i,key:s,children:i.children.map((e=>typeof e===r.object?e:p(e)))}}},p=e=>({type:n.TEXT_ELEMENT,props:{nodeValue:e,children:[]}}),a=(e,o)=>{t.wipRoot={dom:o,props:{children:[e]},alternate:t.currentRoot},t.deletions=[],t.nextUnitOfWork=t.wipRoot},u=e=>{const o=t.wipFiber.alternate?.hooks?.[t.hookIndex],n={state:o?o.state:e,queue:o?[...o.queue]:[]};n.queue.forEach((e=>{const t=typeof e===r.function?e(n.state):e;t!==n.state&&(n.state=t)}));return t.wipFiber.hooks.push(n),t.hookIndex++,[n.state,e=>{n.queue.push(e),t.wipRoot||(t.wipRoot={dom:t.currentRoot.dom,props:t.currentRoot.props||{},alternate:t.currentRoot},t.nextUnitOfWork=t.wipRoot,t.deletions=[])}]},f=(e,o)=>{const r=t.wipFiber.alternate?.hooks?.[t.hookIndex],i={type:n.RYUNIX_EFFECT,deps:o,cleanup:r?.cleanup},c=!r||!s(r.deps,o);c&&i.cleanup&&i.cleanup(),c&&(i.cleanup=e()),t.wipFiber.hooks.push(i),t.hookIndex++},d=(e,o)=>{const r=t.wipFiber.alternate?.hooks?.[t.hookIndex],i={type:n.RYUNIX_MEMO,value:r?r.value:e(),deps:o};return r&&s(r.deps,o)||(i.value=e()),t.wipFiber.hooks.push(i),t.hookIndex++,i.value},h=()=>{const e=new URLSearchParams(window.location.search),t={};for(let[o,n]of e.entries())t[o]=n;return t},m=e=>e.startsWith("on"),y=e=>e!==r.children&&!m(e),E=(e,t)=>o=>e[o]!==t[o],b=e=>t=>!(t in e),R=e=>{e.hooks&&e.hooks.filter((e=>e.type===n.RYUNIX_EFFECT&&e.cancel)).forEach((e=>{e.cancel()}))},k=e=>{e.hooks&&e.hooks.filter((e=>e.type===n.RYUNIX_EFFECT&&e.effect)).forEach((e=>{e.cancel=e.effect()}))},w=e=>{const t=e.type===n.TEXT_ELEMENT?document.createTextNode(e.props.nodeValue):document.createElement(e.type);return x(t,{},e.props),t},x=(e,t,o)=>{Object.keys(t).filter(m).filter((e=>b(o)(e)||E(t,o)(e))).forEach((o=>{const n=o.toLowerCase().substring(2);e.removeEventListener(n,t[o])})),Object.keys(o).filter(m).filter(E(t,o)).forEach((t=>{const n=t.toLowerCase().substring(2);e.addEventListener(n,o[t])})),Object.keys(t).filter(y).filter(b(o)).forEach((t=>{e[t]=""})),Object.keys(o).filter(y).filter(E(t,o)).forEach((n=>{n===r.style?_(e,o[n]):n===r.className?o[n]!==t[n]&&(e.className=o[n]):e[n]=o[n]}))},_=(e,t)=>{for(const n in t){const r=n.replace(o,(e=>"-"+e.toLowerCase()));e.style[r]!==t[n]&&(e.style[r]=t[n])}};var g=Object.freeze({__proto__:null,DomStyle:_,createDom:w,updateDom:x});const T=()=>{t.deletions.forEach(I),t.wipRoot&&t.wipRoot.child&&(I(t.wipRoot.child),t.currentRoot=t.wipRoot),t.wipRoot=null},I=e=>{if(!e)return;let t=e.parent;for(;t&&!t.dom;)t=t.parent;const o=t?.dom;if(e.effectTag===i.PLACEMENT&&e.dom)o.appendChild(e.dom),k(e);else if(e.effectTag===i.UPDATE&&e.dom)R(e),x(e.dom,e.alternate.props,e.props),k(e);else if(e.effectTag===i.DELETION)return N(e,o),void R(e);I(e.child),I(e.sibling)},N=(e,t)=>{e.dom?t.removeChild(e.dom):e.child&&N(e.child,t),e.sibling&&N(e.sibling,t)};var O=Object.freeze({__proto__:null,commitDeletion:N,commitRoot:T,commitWork:I});const U=(e,o)=>{let n=0,r=null;const c=new Map;let l=e.alternate?.child;for(;l;){const e=l.props.key||l.type;c.set(e,l),l=l.sibling}for(;n<o.length;){const t=o[n],l=t.props.key||t.type,p=c.get(l);let a;const u=p&&t&&t.type===p.type;u&&s(p.props,t.props)?a=p:u?(a={...p,props:t.props,effectTag:i.UPDATE},c.delete(l)):t&&(a={type:t.type,props:t.props,effectTag:i.PLACEMENT,parent:e}),0===n?e.child=a:r&&(r.sibling=a),r=a,n++}c.forEach((e=>{e.effectTag=i.DELETION,t.deletions.push(e)}))};var v=Object.freeze({__proto__:null,reconcileChildren:U});const F=e=>{t.wipFiber=e,t.hookIndex=0,t.wipFiber.hooks=[];const o=e.type(e.props);U(e,Array.isArray(o)?o:[o])},C=e=>{e.dom||(e.dom=w(e)),U(e,e.props.children)};var L=Object.freeze({__proto__:null,updateFunctionComponent:F,updateHostComponent:C});const S=e=>{let o=!1;for(;t.nextUnitOfWork&&!o;)t.nextUnitOfWork=j(t.nextUnitOfWork),o=e.timeRemaining()<1;!t.nextUnitOfWork&&t.wipRoot&&T(),(t.nextUnitOfWork||t.wipRoot)&&requestIdleCallback(S)};requestIdleCallback(S);const j=e=>{if(e.type instanceof Function?F(e):C(e),e.child)return e.child;let t=e;for(;t;){if(t.sibling)return t.sibling;t=t.parent}};var M={createElement:l,render:a,init:(e,o="__ryunix")=>{t.containerRoot=document.getElementById(o),a(e,t.containerRoot)},Fragment:e=>e.children,Dom:g,Workers:Object.freeze({__proto__:null,performUnitOfWork:j,workLoop:S}),Reconciler:v,Components:L,Commits:O};window.Ryunix=M,e.default=M,e.useCallback=(e,t)=>d((()=>e),t),e.useEffect=f,e.useMemo=d,e.useQuery=h,e.useRef=e=>{const o=t.wipFiber.alternate?.hooks?.[t.hookIndex],r={type:n.RYUNIX_REF,value:o?o.value:{current:e}};return t.wipFiber.hooks.push(r),t.hookIndex++,r.value},e.useRouter=e=>{const[t,o]=u(window.location.pathname),n=new Map,i=(e,t)=>{if(n.has(t))return n.get(t);const o=t.split("?")[0],r=e.find((e=>"*"===e.path)),s=r?{route:{component:r.NotFound},params:{}}:{route:{component:null},params:{}};for(const r of e){if(r.subRoutes){const e=i(r.subRoutes,t);if(e&&e.route.component)return n.set(t,e),e}if(!r.path||"string"!=typeof r.path){console.warn("Invalid route detected:",r);continue}const e=[],s=`^${r.path.replace(/:\w+/g,(t=>(e.push(t.substring(1)),"([^/]+)")))}$`,c=o.match(new RegExp(s));if(c){const o={route:r,params:e.reduce(((e,t,o)=>(e[t]=c[o+1],e)),{})};return n.set(t,o),o}}return n.set(t,s),s},s=e=>{window.history.pushState({},"",e),c(e)},c=e=>{const t=e.split("?")[0];o(t)};f((()=>{const e=()=>c(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]);const p=i(e,t)||{};return{Children:()=>{const e=h(),{route:t}=p;return t&&t.component&&typeof t.component===r.function?t.component({params:p.params||{},query:e}):(console.error("Component not found for current path or the component is not a valid function:",p),null)},NavLink:({to:e,...t})=>l("a",{href:e,onClick:t=>{t.preventDefault(),s(e)},...t},t.children),navigate:s}},e.useStore=u,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("lodash")):"function"==typeof define&&define.amd?define(["exports","lodash"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Ryunix={},e.lodash)}(this,(function(e,t){"use strict";let o={containerRoot:{},nextUnitOfWork:{},currentRoot:{},wipRoot:{},deletions:[],wipFiber:{},hookIndex:0};const n=/[A-Z]/g,r=Object.freeze({TEXT_ELEMENT:Symbol("text.element"),Ryunix_ELEMENT:Symbol("ryunix.element"),RYUNIX_EFFECT:Symbol("ryunix.effect"),RYUNIX_MEMO:Symbol("ryunix.memo"),RYUNIX_URL_QUERY:Symbol("ryunix.urlQuery"),RYUNIX_REF:Symbol("ryunix.ref"),RYUNIX_STORE:Symbol("ryunix.store"),RYUNIX_REDUCE:Symbol("ryunix.reduce")}),i=Object.freeze({object:"object",function:"function",style:"ryunix-style",className:"ryunix-class",children:"children",boolean:"boolean",string:"string"}),s=Object.freeze({style:"style",className:"className"}),a=Object.freeze({PLACEMENT:Symbol("ryunix.reconciler.status.placement").toString(),UPDATE:Symbol("ryunix.reconciler.status.update").toString(),DELETION:Symbol("ryunix.reconciler.status.deletion").toString()}),l=e=>`${e}-${Math.random().toString(36).substring(2,9)}`,c=(e,t)=>(t=t||[],null==e||typeof e==i.boolean||(Array.isArray(e)?e.some((e=>{c(e,t)})):t.push(e)),t),p=(e,t,...o)=>{o=c(o,[]);const n=t&&t.key?l(t.key):l(r.Ryunix_ELEMENT.toString());return{type:e,props:{...t,key:n,children:o.map((e=>typeof e===i.object?e:u(e)))}}},u=e=>({type:r.TEXT_ELEMENT,props:{nodeValue:e,children:[]}}),d=(e,t)=>{o.wipRoot={dom:t,props:{children:[e]},alternate:o.currentRoot},o.deletions=[],o.nextUnitOfWork=o.wipRoot},f=e=>{const t=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],n={state:t?t.state:e,queue:t?[...t.queue]:[]};n.queue.forEach((e=>{n.state=typeof e===i.function?e(n.state):e})),n.queue=[];return o.wipFiber&&o.wipFiber.hooks&&(o.wipFiber.hooks.push(n),o.hookIndex++),[n.state,e=>{n.queue.push(e),o.wipRoot={dom:o.currentRoot.dom,props:{...o.currentRoot.props},alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[]}]},m=(e,n)=>{const i=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],s={type:r.RYUNIX_EFFECT,deps:n};i&&t.isEqual(i.deps,s.deps)||e(),o.wipFiber.hooks&&(o.wipFiber.hooks.push(s),o.hookIndex++)},h=(e,n)=>{const i=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],s={type:r.RYUNIX_MEMO,value:null,deps:n};return i&&t.isEqual(i.deps,s.deps)?s.value=i.value:s.value=e(),o.wipFiber.hooks&&(o.wipFiber.hooks.push(s),o.hookIndex++),s.value},y=()=>{const e=new URLSearchParams(window.location.search),t={};for(let[o,n]of e.entries())t[o]=n;return t},b=e=>e.startsWith("on"),E=e=>e!==i.children&&!b(e),w=(e,t)=>o=>e[o]!==t[o],k=e=>t=>!(t in e),R=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.cancel)).forEach((e=>{e.cancel()}))},x=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.effect)).forEach((e=>{e.cancel=e.effect()}))},F=e=>{const t=e.type==r.TEXT_ELEMENT?document.createTextNode(""):document.createElement(e.type);return _(t,{},e.props),t},_=(e,t,o)=>{Object.keys(t).filter(b).filter((e=>k(o)(e)||w(t,o)(e))).forEach((o=>{const n=o.toLowerCase().substring(2);e.removeEventListener(n,t[o])})),Object.keys(t).filter(E).filter(k(o)).forEach((t=>{e[t]=""})),Object.keys(o).filter(E).filter(w(t,o)).forEach((n=>{if(n===i.style)N(e,o["ryunix-style"]);else if(n===s.style)N(e,o.style);else if(n===i.className){if(""===o["ryunix-class"])throw new Error("data-class cannot be empty.");t["ryunix-class"]&&e.classList.remove(...t["ryunix-class"].split(/\s+/)),e.classList.add(...o["ryunix-class"].split(/\s+/))}else if(n===s.className){if(""===o.className)throw new Error("className cannot be empty.");t.className&&e.classList.remove(...t.className.split(/\s+/)),e.classList.add(...o.className.split(/\s+/))}else e[n]=o[n]})),Object.keys(o).filter(b).filter(w(t,o)).forEach((t=>{const n=t.toLowerCase().substring(2);e.addEventListener(n,o[t])}))},N=(e,t)=>{e.style=Object.keys(t).reduce(((e,o)=>e+=`${o.replace(n,(function(e){return"-"+e.toLowerCase()}))}: ${t[o]};`),"")};var g=Object.freeze({__proto__:null,DomStyle:N,createDom:F,updateDom:_});const T=()=>{o.deletions.forEach(v),o.wipRoot&&o.wipRoot.child&&(v(o.wipRoot.child),o.currentRoot=o.wipRoot),o.wipRoot=void 0},v=e=>{if(!e)return;let t=e.parent;for(;!t.dom;)t=t.parent;const o=t.dom;if(e.effectTag===a.PLACEMENT&&null!=e.dom)o.appendChild(e.dom),x(e);else if(e.effectTag===a.UPDATE&&null!=e.dom)R(e),_(e.dom,e.alternate.props,e.props),x(e);else if(e.effectTag===a.DELETION)return O(e,o),void R(e);v(e.child),v(e.sibling)},O=(e,t)=>{e.dom?t.removeChild(e.dom):O(e.child,t)};var I=Object.freeze({__proto__:null,commitDeletion:O,commitRoot:T,commitWork:v});const L=(e,t)=>{let n=0,r=e.alternate&&e.alternate.child,i=null;const s=new Map;for(;r;){const e=r.props.key||r.type;s.set(e,r),r=r.sibling}for(;n<t.length;){const o=t[n],r=o.props.key||o.type,l=s.get(r);let c;l&&o&&o.type===l.type?(c={type:l.type,props:o.props,dom:l.dom,parent:e,alternate:l,effectTag:a.UPDATE},s.delete(r)):o&&(c={type:o.type,props:o.props,dom:void 0,parent:e,alternate:void 0,effectTag:a.PLACEMENT}),0===n?e.child=c:i&&(i.sibling=c),i=c,n++}s.forEach((e=>{e.effectTag=a.DELETION,o.deletions.push(e)}))};var U=Object.freeze({__proto__:null,reconcileChildren:L});const C=e=>{o.wipFiber=e,o.hookIndex=0,o.wipFiber.hooks=[];const t=e.type(e.props);let n=Array.isArray(t)?t:[t];L(e,n)},S=e=>{e.dom||(e.dom=F(e)),L(e,e.props.children)};var j=Object.freeze({__proto__:null,updateFunctionComponent:C,updateHostComponent:S});const M=e=>{let t=!1;for(;o.nextUnitOfWork&&!t;)o.nextUnitOfWork=X(o.nextUnitOfWork),t=e.timeRemaining()<1;!o.nextUnitOfWork&&o.wipRoot&&T(),requestIdleCallback(M)};requestIdleCallback(M);const X=e=>{if(e.type instanceof Function?C(e):S(e),e.child)return e.child;let t=e;for(;t;){if(t.sibling)return t.sibling;t=t.parent}};var D={createElement:p,render:d,init:(e,t="__ryunix")=>{o.containerRoot=document.getElementById(t),d(e,o.containerRoot)},Fragment:e=>e.children,Dom:g,Workers:Object.freeze({__proto__:null,performUnitOfWork:X,workLoop:M}),Reconciler:U,Components:j,Commits:I};window.Ryunix=D,e.default=D,e.useCallback=(e,t)=>h((()=>e),t),e.useEffect=m,e.useMemo=h,e.useQuery=y,e.useRef=e=>{const t=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],n={type:r.RYUNIX_REF,value:t?t.value:{current:e}};return o.wipFiber.hooks&&(o.wipFiber.hooks.push(n),o.hookIndex++),n.value},e.useRouter=e=>{const[t,o]=f(window.location.pathname),n=(e,t)=>{const o=t.split("?")[0],r=e.find((e=>e.NotFound)),i=r?{route:{component:r.NotFound},params:{}}:{route:{component:null},params:{}};for(const r of e){if(r.subRoutes){const e=n(r.subRoutes,t);if(e)return e}if("*"===r.path)return i;if(!r.path||"string"!=typeof r.path){console.warn("Invalid route detected:",r),console.info("if you are using { NotFound: NotFound } please add { path: '*', NotFound: NotFound }");continue}const e=[],s=new RegExp(`^${r.path.replace(/:\w+/g,(t=>(e.push(t.substring(1)),"([^/]+)")))}$`),a=o.match(s);if(a){return{route:r,params:e.reduce(((e,t,o)=>(e[t]=a[o+1],e)),{})}}}return i},r=e=>{window.history.pushState({},"",e),s(e)},s=e=>{const t=e.split("?")[0];o(t)};m((()=>{const e=()=>s(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]);const a=n(e,t)||{};return{Children:()=>{const e=y(),{route:t}=a;return t&&t.component&&typeof t.component===i.function?t.component({params:a.params||{},query:e}):(console.error("Component not found for current path or the component is not a valid function:",a),null)},NavLink:({to:e,...t})=>p("a",{href:e,onClick:t=>{t.preventDefault(),r(e)},...t},t.children),navigate:r}},e.useStore=f,Object.defineProperty(e,"__esModule",{value:!0})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "1.1.6-canary.3",
+  "version": "1.1.6-canary.7",
   "license": "MIT",
   "main": "./dist/Ryunix.min.js",
   "types": "./dist/Ryunix.d.ts",