@unsetsoft/ryunixjs 1.1.6-canary.39 → 1.1.6-canary.40

package/dist/Ryunix.js

@@ -614,53 +614,75 @@
     let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
     let prevSibling = null;
 
+    // Crear un mapa de claves para los oldFibers
+    const oldFibersByKey = new Map();
+    while (oldFiber) {
+      const key = oldFiber.props.key || index;
+      oldFibersByKey.set(key, oldFiber);
+      oldFiber = oldFiber.sibling;
+      index++;
+    }
+
+    // Reconciliación de nuevos elementos con los viejos basados en key
+    index = 0;
+    oldFiber = wipFiber.alternate && wipFiber.alternate.child;
     while (index < elements.length || oldFiber != null) {
       const element = elements[index];
+      const key = element ? element.props.key || index : null;
+      const oldFiberByKey = key != null ? oldFibersByKey.get(key) : null;
+
       let newFiber = null;
 
-      const sameType = oldFiber && element && element.type === oldFiber.type;
+      const sameType =
+        oldFiberByKey && element && element.type === oldFiberByKey.type;
 
       if (sameType) {
-        // Reutilizar el fiber existente con actualizaciones en propiedades
+        // Actualizar el nodo
         newFiber = {
-          type: oldFiber.type,
+          type: oldFiberByKey.type,
           props: element.props,
-          dom: oldFiber.dom,
+          dom: oldFiberByKey.dom,
           parent: wipFiber,
-          alternate: oldFiber,
-          effectTag: EFFECT_TAGS.UPDATE,
+          alternate: oldFiberByKey,
+          effectTag: 'UPDATE',
         };
       } else if (element) {
-        // Crear un nuevo fiber si no es del mismo tipo o no existe
+        // Añadir nuevo nodo
         newFiber = {
           type: element.type,
           props: element.props,
           dom: null,
           parent: wipFiber,
           alternate: null,
-          effectTag: EFFECT_TAGS.PLACEMENT,
+          effectTag: 'PLACEMENT',
         };
       }
 
-      if (oldFiber && !sameType) {
-        // Marcar el viejo fiber para eliminación si el tipo no coincide
-        oldFiber.effectTag = EFFECT_TAGS.DELETION;
-        vars.deletions.push(oldFiber);
+      if (oldFiberByKey && !sameType) {
+        // Eliminar el nodo viejo
+        oldFiberByKey.effectTag = 'DELETION';
+        vars.deletions.push(oldFiberByKey);
       }
 
-      if (oldFiber) {
-        oldFiber = oldFiber.sibling;
+      if (oldFiberByKey) {
+        oldFibersByKey.delete(key);
       }
 
       if (index === 0) {
         wipFiber.child = newFiber;
-      } else if (prevSibling) {
+      } else if (element && prevSibling) {
         prevSibling.sibling = newFiber;
       }
 
       prevSibling = newFiber;
       index++;
     }
+
+    // Marcar oldFibers restantes para eliminación
+    oldFibersByKey.forEach((oldFiber) => {
+      oldFiber.effectTag = 'DELETION';
+      vars.deletions.push(oldFiber);
+    });
   }
 
   var Reconciler = /*#__PURE__*/Object.freeze({

package/dist/Ryunix.min.js

@@ -1 +1 @@
-!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:u(e))),key:t&&t.key?t.key:(n=r.RYUNIX_ELEMENT.toString(),`${n}-${Math.random().toString(36).substring(2,9)}`)}};var n}const u=e=>({type:r.TEXT_ELEMENT,props:{nodeValue:e,children:[]}});function p(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"),b=e=>e!==i.children&&!m(e),y=(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)||y(t,o)(e))).forEach((o=>{const n=o.toLowerCase().substring(2);e.removeEventListener(n,t[o])})),Object.keys(t).filter(b).filter((n=o,e=>!(e in n))).forEach((t=>{e[t]=""})),Object.keys(o).filter(b).filter(y(t,o)).forEach((t=>{e[t]=o[t]})),Object.keys(o).filter(m).filter(y(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 x=Object.freeze({__proto__:null,commitDeletion:_,commitRoot:R,commitWork:F});function T(e,t){let n=0,r=e.alternate&&e.alternate.child,i=null;for(;n<t.length||null!=r;){const l=t[n];let a=null;const u=r&&l&&l.type===r.type;u?a={type:r.type,props:l.props,dom:r.dom,parent:e,alternate:r,effectTag:s.UPDATE}:l&&(a={type:l.type,props:l.props,dom:null,parent:e,alternate:null,effectTag:s.PLACEMENT}),r&&!u&&(r.effectTag=s.DELETION,o.deletions.push(r)),r&&(r=r.sibling),0===n?e.child=a:i&&(i.sibling=a),i=a,n++}}var N=Object.freeze({__proto__:null,reconcileChildren:T});const g=e=>{o.wipFiber=e,o.hookIndex=0,o.wipFiber.hooks=[];let t=e.type(e.props),n=[];n=Array.isArray(t)?[...t]:[t],T(e,n)};function v(e){e.dom||(e.dom=E(e)),T(e,e.props.children)}var I=Object.freeze({__proto__:null,updateFunctionComponent:g,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?g(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:p,init:(e,t="__ryunix")=>{p(e,document.getElementById(t))},Fragment:e=>e.children,Dom:k,Workers:Object.freeze({__proto__:null,performUnitOfWork:U,workLoop:O}),Reconciler:N,Components:I,Commits:x};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})}));
+!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"}),l=Object.freeze({PLACEMENT:"PLACEMENT",UPDATE:"UPDATE",DELETION:"DELETION"});function s(e,t){return t=t||[],null==e||"boolean"==typeof e||(Array.isArray(e)?e.some((e=>{s(e,t)})):t.push(e)),t}function a(e,t,...o){return o=s(o,[]),{type:e,props:{...t,children:o.map((e=>typeof e===i.object?e:u(e))),key:t&&t.key?t.key:(n=r.RYUNIX_ELEMENT.toString(),`${n}-${Math.random().toString(36).substring(2,9)}`)}};var n}const u=e=>({type:r.TEXT_ELEMENT,props:{nodeValue:e,children:[]}});function p(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],l={type:r.RYUNIX_EFFECT,deps:n};i&&t.isEqual(i.deps,l.deps)||e(),o.wipFiber.hooks&&(o.wipFiber.hooks.push(l),o.hookIndex++)},f=(e,n)=>{const i=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],l={type:r.RYUNIX_MEMO,value:null,deps:n};return i&&t.isEqual(i.deps,l.deps)?l.value=i.value:l.value=e(),o.wipFiber.hooks&&(o.wipFiber.hooks.push(l),o.hookIndex++),l.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"),E=e=>e!==i.children&&!m(e),b=(e,t)=>o=>e[o]!==t[o];function y(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(E).filter((n=o,e=>!(e in n))).forEach((t=>{e[t]=""})),Object.keys(o).filter(E).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:y,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===l.PLACEMENT&&null!=e.dom)o.appendChild(e.dom);else if(e.effectTag===l.UPDATE&&null!=e.dom)w(e.dom,e.alternate.props,e.props);else if(e.effectTag===l.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 l=new Map;for(;r;){const e=r.props.key||n;l.set(e,r),r=r.sibling,n++}for(n=0,r=e.alternate&&e.alternate.child;n<t.length||null!=r;){const r=t[n],s=r?r.props.key||n:null,a=null!=s?l.get(s):null;let u=null;const p=a&&r&&r.type===a.type;p?u={type:a.type,props:r.props,dom:a.dom,parent:e,alternate:a,effectTag:"UPDATE"}:r&&(u={type:r.type,props:r.props,dom:null,parent:e,alternate:null,effectTag:"PLACEMENT"}),a&&!p&&(a.effectTag="DELETION",o.deletions.push(a)),a&&l.delete(s),0===n?e.child=u:r&&i&&(i.sibling=u),i=u,n++}l.forEach((e=>{e.effectTag="DELETION",o.deletions.push(e)}))}var N=Object.freeze({__proto__:null,reconcileChildren:x});const g=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=y(e)),x(e,e.props.children)}var I=Object.freeze({__proto__:null,updateFunctionComponent:g,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?g(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:p,init:(e,t="__ryunix")=>{p(e,document.getElementById(t))},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,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=[],l=new RegExp(`^${r.path.replace(/:\w+/g,(t=>(e.push(t.substring(1)),"([^/]+)")))}$`),s=o.match(l);if(s){return{route:r,params:e.reduce(((e,t,o)=>(e[t]=s[o+1],e)),{})}}}return i},r=e=>{window.history.pushState({},"",e),l(e)},l=e=>{const t=e.split("?")[0];o(t)};d((()=>{const e=()=>l(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]);const s=n(e,t)||{};return{Children:()=>{const e=h(),{route:t}=s;return t&&t.component&&typeof t.component===i.function?t.component({params:s.params||{},query:e}):(console.error("Component not found for current path or the component is not a valid function:",s),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.39",
+  "version": "1.1.6-canary.40",
   "license": "MIT",
   "main": "./dist/Ryunix.min.js",
   "types": "./dist/Ryunix.d.ts",