@unsetsoft/ryunixjs 1.1.6-canary.49 → 1.1.6-canary.50

package/dist/Ryunix.js

@@ -612,10 +612,10 @@
   function reconcileChildren(wipFiber, elements) {
     let index = 0;
     let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
-    let newFiber = null;
     let prevSibling = null;
     const oldFibersByKey = new Map();
 
+    // Mapea los antiguos `fibers` por clave
     while (oldFiber) {
       const key = oldFiber.props.key || index;
       oldFibersByKey.set(key, oldFiber);
@@ -623,19 +623,25 @@
       index++;
     }
 
-    elements.forEach((element) => {
-      const key = element.props.key || index;
+    index = 0;
+    oldFiber = wipFiber.alternate && wipFiber.alternate.child; // Reinicia oldFiber
+    while (index < elements.length || oldFiber) {
+      const element = elements[index];
+      let newFiber = null;
 
-      const sameType = oldFiber && element && element.type === oldFiber.type;
+      const key = element ? element.props.key || index : null;
+      const oldFiberByKey = oldFibersByKey.get(key);
+      const sameType =
+        oldFiberByKey && element && element.type === oldFiberByKey.type;
 
       if (sameType) {
         // Actualiza el nodo si es del mismo tipo
         newFiber = {
-          type: oldFiber.type,
+          type: oldFiberByKey.type,
           props: element.props,
-          dom: oldFiber.dom,
+          dom: oldFiberByKey.dom,
           parent: wipFiber,
-          alternate: oldFiber,
+          alternate: oldFiberByKey,
           key,
           effectTag: 'UPDATE',
         };
@@ -652,10 +658,10 @@
         };
       }
 
-      if (oldFiber && !sameType) {
+      if (oldFiberByKey && !sameType) {
         // Marca el nodo viejo para eliminación si ya no es del mismo tipo
-        oldFiber.effectTag = 'DELETION';
-        vars.deletions.push(oldFiber);
+        oldFiberByKey.effectTag = 'DELETION';
+        vars.deletions.push(oldFiberByKey);
       }
 
       // Solo avanza `oldFiber` si es el mismo tipo o ya no hay un nuevo elemento
@@ -671,18 +677,16 @@
       }
 
       prevSibling = newFiber;
-
       index++;
-    });
-    // Manejo de eliminaciones de antiguos fibers que no existen en los nuevos elementos
-    if (oldFibersByKey) {
-      oldFibersByKey.forEach((oldFiber, key) => {
-        if (!elements.some((element) => (element.props.key || index) === key)) {
-          oldFiber.effectTag = 'DELETION';
-          vars.deletions.push(oldFiber);
-        }
-      });
     }
+
+    // Elimina cualquier fiber sobrante en oldFibersByKey que no tenga un match en elements
+    oldFibersByKey.forEach((oldFiber, key) => {
+      if (!elements.some((element) => (element.props.key || index) === key)) {
+        oldFiber.effectTag = 'DELETION';
+        vars.deletions.push(oldFiber);
+      }
+    });
   }
 
   var Reconciler = /*#__PURE__*/Object.freeze({

package/dist/Ryunix.min.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("lodash")):"function"==typeof define&&define.amd?define(["exports","lodash"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).Ryunix={},e.lodash)}(this,(function(e,o){"use strict";let t={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({PLACEMENT:"PLACEMENT",UPDATE:"UPDATE",DELETION:"DELETION"});function a(e,o){return o=o||[],null==e||"boolean"==typeof e||(Array.isArray(e)?e.some((e=>{a(e,o)})):o.push(e)),o}function l(e,o,...t){return t=a(t,[]),{type:e,props:{...o,children:t.map((e=>typeof e===i.object?e:p(e))),key:o&&o.key?o.key:(n=r.RYUNIX_ELEMENT.toString(),`${n}-${Math.random().toString(36).substring(2,9)}`)}};var n}const p=e=>({type:r.TEXT_ELEMENT,props:{nodeValue:e,children:[]}});function u(e,o){t.wipRoot={dom:o,props:{children:[e]},alternate:t.currentRoot},t.deletions=[],t.nextUnitOfWork=t.wipRoot}const c=e=>{const o=t.wipFiber.alternate&&t.wipFiber.alternate.hooks&&t.wipFiber.alternate.hooks[t.hookIndex],n={state:o?o.state:e,queue:o?[...o.queue]:[]};n.queue.forEach((e=>{n.state=typeof e===i.function?e(n.state):e})),n.queue=[];return t.wipFiber&&t.wipFiber.hooks&&(t.wipFiber.hooks.push(n),t.hookIndex++),[n.state,e=>{n.queue.push(e),t.wipRoot={dom:t.currentRoot.dom,props:{...t.currentRoot.props},alternate:t.currentRoot},t.nextUnitOfWork=t.wipRoot,t.deletions=[]}]},d=(e,n)=>{const i=t.wipFiber.alternate&&t.wipFiber.alternate.hooks&&t.wipFiber.alternate.hooks[t.hookIndex],s={type:r.RYUNIX_EFFECT,deps:n};i&&o.isEqual(i.deps,s.deps)||e(),t.wipFiber.hooks&&(t.wipFiber.hooks.push(s),t.hookIndex++)},f=(e,n)=>{const i=t.wipFiber.alternate&&t.wipFiber.alternate.hooks&&t.wipFiber.alternate.hooks[t.hookIndex],s={type:r.RYUNIX_MEMO,value:null,deps:n};return i&&o.isEqual(i.deps,s.deps)?s.value=i.value:s.value=e(),t.wipFiber.hooks&&(t.wipFiber.hooks.push(s),t.hookIndex++),s.value},h=()=>{const e=new URLSearchParams(window.location.search),o={};for(let[t,n]of e.entries())o[t]=n;return o},m=e=>e.startsWith("on"),y=e=>e!==i.children&&!m(e),E=(e,o)=>t=>e[t]!==o[t];function b(e){const o=e.type===r.TEXT_ELEMENT?document.createTextNode(""):document.createElement(e.type);return w(o,{},e.props),o}function w(e,o,t){var n;Object.keys(o).filter(m).filter((e=>!(e in t)||E(o,t)(e))).forEach((t=>{const n=t.toLowerCase().substring(2);e.removeEventListener(n,o[t])})),Object.keys(o).filter(y).filter((n=t,e=>!(e in n))).forEach((o=>{e[o]=""})),Object.keys(t).filter(y).filter(E(o,t)).forEach((o=>{e[o]=t[o]})),Object.keys(t).filter(m).filter(E(o,t)).forEach((o=>{const n=o.toLowerCase().substring(2);e.addEventListener(n,t[o])}))}var k=Object.freeze({__proto__:null,DomStyle:(e,o)=>{e.style=Object.keys(o).reduce(((e,t)=>e+=`${t.replace(n,(function(e){return"-"+e.toLowerCase()}))}: ${o[t]};`),"")},createDom:b,updateDom:w});function R(){t.deletions.forEach(F),t.wipRoot&&t.wipRoot.child&&(F(t.wipRoot.child),t.currentRoot=t.wipRoot),t.wipRoot=void 0}function F(e){if(!e)return;let o=e.parent;for(;!o.dom;)o=o.parent;const t=o.dom;if(e.effectTag===s.PLACEMENT&&null!=e.dom)t.appendChild(e.dom);else if(e.effectTag===s.UPDATE&&null!=e.dom)w(e.dom,e.alternate.props,e.props);else if(e.effectTag===s.DELETION)return void _(t,e);F(e.child),F(e.sibling)}function _(e,o){o&&o.dom?e.removeChild(o.dom):o&&o.child&&_(e,o.child)}var T=Object.freeze({__proto__:null,commitDeletion:_,commitRoot:R,commitWork:F});function x(e,o){let n=0,r=e.alternate&&e.alternate.child,i=null,s=null;const a=new Map;for(;r;){const e=r.props.key||n;a.set(e,r),r=r.sibling,n++}o.forEach((o=>{const a=o.props.key||n,l=r&&o&&o.type===r.type;l?i={type:r.type,props:o.props,dom:r.dom,parent:e,alternate:r,key:a,effectTag:"UPDATE"}:o&&(i={type:o.type,props:o.props,dom:null,parent:e,alternate:null,key:a,effectTag:"PLACEMENT"}),r&&!l&&(r.effectTag="DELETION",t.deletions.push(r)),r&&(r=r.sibling),0===n?e.child=i:s&&(s.sibling=i),s=i,n++})),a&&a.forEach(((e,r)=>{o.some((e=>(e.props.key||n)===r))||(e.effectTag="DELETION",t.deletions.push(e))}))}var N=Object.freeze({__proto__:null,reconcileChildren:x});const g=e=>{t.wipFiber=e,t.hookIndex=0,t.wipFiber.hooks=[];let o=e.type(e.props),n=[];n=Array.isArray(o)?[...o]:[o],x(e,n)};function v(e){e.dom||(e.dom=b(e)),x(e,e.props.children)}var I=Object.freeze({__proto__:null,updateFunctionComponent:g,updateHostComponent:v});function O(e){let o=!1;for(;t.nextUnitOfWork&&!o;)t.nextUnitOfWork=U(t.nextUnitOfWork),o=e.timeRemaining()<1;!t.nextUnitOfWork&&t.wipRoot&&R(),window.requestIdleCallback(O)}function U(e){if(e.type instanceof Function?g(e):v(e),e.child)return e.child;let o=e;for(;o;){if(o.sibling)return o.sibling;o=o.parent}}requestIdleCallback(O);var L={createElement:l,render:u,init:(e,o="__ryunix")=>{u(e,document.getElementById(o))},Fragment:e=>e.children,Dom:k,Workers:Object.freeze({__proto__:null,performUnitOfWork:U,workLoop:O}),Reconciler:N,Components:I,Commits:T};window.Ryunix=L,e.default=L,e.useCallback=(e,o)=>f((()=>e),o),e.useEffect=d,e.useMemo=f,e.useQuery=h,e.useRef=e=>{const o=t.wipFiber.alternate&&t.wipFiber.alternate.hooks&&t.wipFiber.alternate.hooks[t.hookIndex],n={type:r.RYUNIX_REF,value:o?o.value:{current:e}};return t.wipFiber.hooks&&(t.wipFiber.hooks.push(n),t.hookIndex++),n.value},e.useRouter=e=>{const[o,t]=c(window.location.pathname),n=(e,o)=>{const t=o.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,o);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,(o=>(e.push(o.substring(1)),"([^/]+)")))}$`),a=t.match(s);if(a){return{route:r,params:e.reduce(((e,o,t)=>(e[o]=a[t+1],e)),{})}}}return i},r=e=>{window.history.pushState({},"",e),s(e)},s=e=>{const o=e.split("?")[0];t(o)};d((()=>{const e=()=>s(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]);const a=n(e,o)||{};return{Children:()=>{const e=h(),{route:o}=a;return o&&o.component&&typeof o.component===i.function?o.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,...o})=>l("a",{href:e,onClick:o=>{o.preventDefault(),r(e)},...o},o.children),navigate:r}},e.useStore=c,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({PLACEMENT:"PLACEMENT",UPDATE:"UPDATE",DELETION:"DELETION"});function l(e,t){return t=t||[],null==e||"boolean"==typeof e||(Array.isArray(e)?e.some((e=>{l(e,t)})):t.push(e)),t}function a(e,t,...o){return o=l(o,[]),{type:e,props:{...t,children:o.map((e=>typeof e===i.object?e:p(e))),key:t&&t.key?t.key:(n=r.RYUNIX_ELEMENT.toString(),`${n}-${Math.random().toString(36).substring(2,9)}`)}};var n}const p=e=>({type:r.TEXT_ELEMENT,props:{nodeValue:e,children:[]}});function u(e,t){o.wipRoot={dom:t,props:{children:[e]},alternate:o.currentRoot},o.deletions=[],o.nextUnitOfWork=o.wipRoot}const c=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=[]}]},d=(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++)},f=(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},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!==i.children&&!m(e),b=(e,t)=>o=>e[o]!==t[o];function E(e){const t=e.type===r.TEXT_ELEMENT?document.createTextNode(""):document.createElement(e.type);return w(t,{},e.props),t}function w(e,t,o){var n;Object.keys(t).filter(m).filter((e=>!(e in o)||b(t,o)(e))).forEach((o=>{const n=o.toLowerCase().substring(2);e.removeEventListener(n,t[o])})),Object.keys(t).filter(y).filter((n=o,e=>!(e in n))).forEach((t=>{e[t]=""})),Object.keys(o).filter(y).filter(b(t,o)).forEach((t=>{e[t]=o[t]})),Object.keys(o).filter(m).filter(b(t,o)).forEach((t=>{const n=t.toLowerCase().substring(2);e.addEventListener(n,o[t])}))}var k=Object.freeze({__proto__:null,DomStyle:(e,t)=>{e.style=Object.keys(t).reduce(((e,o)=>e+=`${o.replace(n,(function(e){return"-"+e.toLowerCase()}))}: ${t[o]};`),"")},createDom:E,updateDom:w});function R(){o.deletions.forEach(F),o.wipRoot&&o.wipRoot.child&&(F(o.wipRoot.child),o.currentRoot=o.wipRoot),o.wipRoot=void 0}function F(e){if(!e)return;let t=e.parent;for(;!t.dom;)t=t.parent;const o=t.dom;if(e.effectTag===s.PLACEMENT&&null!=e.dom)o.appendChild(e.dom);else if(e.effectTag===s.UPDATE&&null!=e.dom)w(e.dom,e.alternate.props,e.props);else if(e.effectTag===s.DELETION)return void _(o,e);F(e.child),F(e.sibling)}function _(e,t){t&&t.dom?e.removeChild(t.dom):t&&t.child&&_(e,t.child)}var T=Object.freeze({__proto__:null,commitDeletion:_,commitRoot:R,commitWork:F});function x(e,t){let n=0,r=e.alternate&&e.alternate.child,i=null;const s=new Map;for(;r;){const e=r.props.key||n;s.set(e,r),r=r.sibling,n++}for(n=0,r=e.alternate&&e.alternate.child;n<t.length||r;){const l=t[n];let a=null;const p=l?l.props.key||n:null,u=s.get(p),c=u&&l&&l.type===u.type;c?a={type:u.type,props:l.props,dom:u.dom,parent:e,alternate:u,key:p,effectTag:"UPDATE"}:l&&(a={type:l.type,props:l.props,dom:null,parent:e,alternate:null,key:p,effectTag:"PLACEMENT"}),u&&!c&&(u.effectTag="DELETION",o.deletions.push(u)),r&&(r=r.sibling),0===n?e.child=a:i&&(i.sibling=a),i=a,n++}s.forEach(((e,r)=>{t.some((e=>(e.props.key||n)===r))||(e.effectTag="DELETION",o.deletions.push(e))}))}var g=Object.freeze({__proto__:null,reconcileChildren:x});const N=e=>{o.wipFiber=e,o.hookIndex=0,o.wipFiber.hooks=[];let t=e.type(e.props),n=[];n=Array.isArray(t)?[...t]:[t],x(e,n)};function v(e){e.dom||(e.dom=E(e)),x(e,e.props.children)}var I=Object.freeze({__proto__:null,updateFunctionComponent:N,updateHostComponent:v});function O(e){let t=!1;for(;o.nextUnitOfWork&&!t;)o.nextUnitOfWork=U(o.nextUnitOfWork),t=e.timeRemaining()<1;!o.nextUnitOfWork&&o.wipRoot&&R(),window.requestIdleCallback(O)}function U(e){if(e.type instanceof Function?N(e):v(e),e.child)return e.child;let t=e;for(;t;){if(t.sibling)return t.sibling;t=t.parent}}requestIdleCallback(O);var L={createElement:a,render:u,init:(e,t="__ryunix")=>{u(e,document.getElementById(t))},Fragment:e=>e.children,Dom:k,Workers:Object.freeze({__proto__:null,performUnitOfWork:U,workLoop:O}),Reconciler:g,Components:I,Commits:T};window.Ryunix=L,e.default=L,e.useCallback=(e,t)=>f((()=>e),t),e.useEffect=d,e.useMemo=f,e.useQuery=h,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]=c(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)),"([^/]+)")))}$`),l=o.match(s);if(l){return{route:r,params:e.reduce(((e,t,o)=>(e[t]=l[o+1],e)),{})}}}return i},r=e=>{window.history.pushState({},"",e),s(e)},s=e=>{const t=e.split("?")[0];o(t)};d((()=>{const e=()=>s(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]);const l=n(e,t)||{};return{Children:()=>{const e=h(),{route:t}=l;return t&&t.component&&typeof t.component===i.function?t.component({params:l.params||{},query:e}):(console.error("Component not found for current path or the component is not a valid function:",l),null)},NavLink:({to:e,...t})=>a("a",{href:e,onClick:t=>{t.preventDefault(),r(e)},...t},t.children),navigate:r}},e.useStore=c,Object.defineProperty(e,"__esModule",{value:!0})}));

package/package.json

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