@unsetsoft/ryunixjs 1.2.5-canary.4 → 1.2.5-canary.6

package/README.es.md

@@ -0,0 +1,120 @@
+<!-- markdownlint-disable MD033 MD041 MD013 -->
+
+> **Language / Idioma:** [English](./README.md) · [Español](./README.es.md)
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/UnSetSoft/Ryunixjs/canary/assets/logo.png" width="200" height="200" alt="RyunixJS Logo" />
+</p>
+
+<h1 align="center">@unsetsoft/ryunixjs</h1>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@unsetsoft/ryunixjs">
+    <img src="https://img.shields.io/npm/v/@unsetsoft/ryunixjs.svg?style=flat-square" alt="versión npm" />
+  </a>
+  <a href="https://www.npmjs.com/package/@unsetsoft/ryunixjs/v/canary">
+    <img src="https://img.shields.io/npm/v/@unsetsoft/ryunixjs/canary.svg?style=flat-square&label=canary" alt="versión canary" />
+  </a>
+</p>
+
+## <!-- markdownlint-enable MD013 -->
+
+## 🧠 ¿Qué es el Core?
+
+`@unsetsoft/ryunixjs` es el **motor fundamental** del framework RyunixJS.
+Es una biblioteca ligera y de alto rendimiento responsable de:
+
+- **Reconciliación y arquitectura Fiber**: actualiza el DOM de forma eficiente
+
+  comparando árboles de Virtual DOM.
+
+- **Sistema de hooks**: gestión de estado y ciclo de vida (p. ej.
+
+  `useStore`, `useEffect`).
+
+- **Renderizado concurrente**: soporte para actualizaciones priorizadas y transiciones.
+- **SSR e hidratación**: motores de renderizado en servidor para Node.js y entornos
+
+  Edge.
+
+Aunque puedes usarlo de forma independiente en integraciones personalizadas, lo habitual
+es consumirlo mediante `@unsetsoft/ryunix-presets` y el CLI oficial.
+
+## 🚀 Instalación
+
+```bash
+npm install @unsetsoft/ryunixjs
+```
+
+## 🛠️ Referencia de API
+
+### Funciones principales
+
+- `createElement(type, props, ...children)`: crea un elemento de Virtual DOM.
+- `render(element, container)`: renderiza un elemento Ryunix en el DOM.
+- `hydrate(element, container)`: hidrata HTML generado en servidor.
+- `init()`: inicializa el estado de Ryunix.
+
+### Hooks
+
+| Hook                           | Descripción                                              |
+| :----------------------------- | :------------------------------------------------------- |
+| `useStore(initial)`            | Gestión de estado (equivalente Ryunix de `useState`).    |
+| `useReducer(reducer, initial)` | Estado avanzado con reducers.                            |
+| `useEffect(cb, deps)`          | Efectos secundarios.                                     |
+| `useLayoutEffect(cb, deps)`    | Efectos síncronos antes del pintado del navegador.       |
+| `useRef(initial)`              | Referencia persistente entre renders.                    |
+| `useMemo(cb, deps)`            | Valores memorizados.                                     |
+| `useCallback(cb, deps)`        | Funciones memorizadas.                                   |
+| `useContext(id)`               | Consume un valor de contexto.                            |
+| `useId()`                      | Genera IDs únicos y estables para SSR.                   |
+
+### Hooks especializados
+
+- `usePersistentStore(key, initial)`: sincroniza el estado con
+
+  `localStorage` automáticamente.
+
+- `useSwitch(initial)`: hook optimizado para estado booleano.
+- `useDebounce(value, delay)`: aplaza actualizaciones de un valor.
+- `useThrottle(value, interval)`: limita la frecuencia de actualizaciones.
+- `useQuery()` / `useHash()`: parámetros de URL y hash reactivos.
+
+### Concurrencia y servidor
+
+- **Actualizaciones priorizadas**: usa `useTransition` y `useDeferredValue` para
+
+  actualizaciones de UI no urgentes.
+
+- **Motor SSR**: `renderToString` y `renderToReadableStream` para renderizado
+
+  flexible en servidor.
+
+- **Límites**: `ServerBoundary` y `ErrorBoundary` para aplicaciones resilientes.
+
+## 🏗️ Ejemplo de uso
+
+```javascript
+import { render, useStore, createElement } from '@unsetsoft/ryunixjs'
+
+function App() {
+  const [count, setCount] = useStore(0)
+
+  return createElement(
+    'div',
+    null,
+    createElement('h1', null, `Count: ${count}`),
+    createElement(
+      'button',
+      { onClick: () => setCount(count + 1) },
+      'Increment',
+    ),
+  )
+}
+
+render(createElement(App), document.getElementById('root'))
+```
+
+## 📄 Licencia
+
+RyunixJS tiene [licencia MIT](../../LICENSE).

package/README.md

@@ -1,3 +1,7 @@
+<!-- markdownlint-disable MD033 MD041 MD013 -->
+
+> **Language / Idioma:** [English](./README.md) · [Español](./README.es.md)
+
 <p align="center">
   <img src="https://raw.githubusercontent.com/UnSetSoft/Ryunixjs/canary/assets/logo.png" width="200" height="200" alt="RyunixJS Logo" />
 </p>
@@ -13,18 +17,28 @@
   </a>
 </p>
 
----
+## <!-- markdownlint-enable MD013 -->
 
 ## 🧠 What is the Core?
 
-`@unsetsoft/ryunixjs` is the **foundational engine** of the RyunixJS framework. It's a lightweight, high-performance library responsible for:
+`@unsetsoft/ryunixjs` is the **foundational engine** of the RyunixJS framework.
+It's a lightweight, high-performance library responsible for:
+
+- **Reconciliation & Fiber Architecture**: Efficiently updating the DOM by
+
+  comparing Virtual DOM trees.
+
+- **Hooks System**: Providing the core state and lifecycle management (e.g.,
+
+  `useStore`, `useEffect`).
 
-- **Reconciliation & Fiber Architecture**: Efficiently updating the DOM by comparing Virtual DOM trees.
-- **Hooks System**: Providing the core state and lifecycle management (e.g., `useStore`, `useEffect`).
 - **Concurrent Rendering**: Support for prioritized updates and transitions.
-- **SSR & Hydration**: Server-Side Rendering engines for both Node.js and Edge environments.
+- **SSR & Hydration**: Server-Side Rendering engines for both Node.js and Edge
 
-While you can use it standalone for custom integrations, it is typically used via `@unsetsoft/ryunix-presets` and our official CLI.
+  environments.
+
+While you can use it standalone for custom integrations, it is typically used
+via `@unsetsoft/ryunix-presets` and our official CLI.
 
 ## 🚀 Installation
 
@@ -36,28 +50,31 @@ npm install @unsetsoft/ryunixjs
 
 ### Core Functions
 
-- `createElement(type, props, ...children)`: Creates a Vitual DOM element.
+- `createElement(type, props, ...children)`: Creates a Virtual DOM element.
 - `render(element, container)`: Renders a Ryunix element into the DOM.
 - `hydrate(element, container)`: Hydrates server-rendered HTML.
 - `init()`: Initializes the Ryunix state.
 
 ### Hooks
 
-| Hook | Description |
-| :--- | :--- |
-| `useStore(initial)` | State management (Ryunix equivalent of `useState`). |
-| `useReducer(reducer, initial)` | Advanced state management with reducers. |
-| `useEffect(cb, deps)` | Side effects management. |
-| `useLayoutEffect(cb, deps)` | Synchronous side effects before browser paint. |
-| `useRef(initial)` | Persistent reference across renders. |
-| `useMemo(cb, deps)` | Memoized values. |
-| `useCallback(cb, deps)` | Memoized functions. |
-| `useContext(id)` | Consumes a context value. |
-| `useId()` | Generates unique, stable IDs for SSR. |
+| Hook                           | Description                                         |
+| :----------------------------- | :-------------------------------------------------- |
+| `useStore(initial)`            | State management (Ryunix equivalent of `useState`). |
+| `useReducer(reducer, initial)` | Advanced state management with reducers.            |
+| `useEffect(cb, deps)`          | Side effects management.                            |
+| `useLayoutEffect(cb, deps)`    | Synchronous side effects before browser paint.      |
+| `useRef(initial)`              | Persistent reference across renders.                |
+| `useMemo(cb, deps)`            | Memoized values.                                    |
+| `useCallback(cb, deps)`        | Memoized functions.                                 |
+| `useContext(id)`               | Consumes a context value.                           |
+| `useId()`                      | Generates unique, stable IDs for SSR.               |
 
 ### Specialized Hooks
 
-- `usePersistentStore(key, initial)`: Automatically syncs state with `localStorage`.
+- `usePersistentStore(key, initial)`: Automatically syncs state with
+
+  `localStorage`.
+
 - `useSwitch(initial)`: Optimized toggle state hook.
 - `useDebounce(value, delay)`: Debounces a value update.
 - `useThrottle(value, interval)`: Throttles value updates.
@@ -65,27 +82,41 @@ npm install @unsetsoft/ryunixjs
 
 ### Concurrency & Server-Side
 
-- **Prioritized Updates**: Use `useTransition` and `useDeferredValue` to manage non-urgent UI updates.
-- **SSR Engine**: `renderToString` and `renderToReadableStream` for flexible server rendering.
-- **Boundaries**: `ServerBoundary` and `ErrorBoundary` for resilient applications.
+- **Prioritized Updates**: Use `useTransition` and `useDeferredValue` to manage
+
+  non-urgent UI updates.
+
+- **SSR Engine**: `renderToString` and `renderToReadableStream` for flexible
+
+  server rendering.
+
+- **Boundaries**: `ServerBoundary` and `ErrorBoundary` for resilient
+
+  applications.
 
 ## 🏗️ Example Usage
 
 ```javascript
-import { render, useStore, createElement } from "@unsetsoft/ryunixjs";
+import { render, useStore, createElement } from '@unsetsoft/ryunixjs'
 
 function App() {
-  const [count, setCount] = useStore(0);
-
-  return createElement("div", null,
-    createElement("h1", null, `Count: ${count}`),
-    createElement("button", { onClick: () => setCount(count + 1) }, "Increment")
-  );
+  const [count, setCount] = useStore(0)
+
+  return createElement(
+    'div',
+    null,
+    createElement('h1', null, `Count: ${count}`),
+    createElement(
+      'button',
+      { onClick: () => setCount(count + 1) },
+      'Increment',
+    ),
+  )
 }
 
-render(createElement(App), document.getElementById("root"));
+render(createElement(App), document.getElementById('root'))
 ```
 
 ## 📄 License
 
-RyunixJS is [MIT Licensed](file:///e:/proyects/Ryunixjs/LICENSE).
+RyunixJS is [MIT Licensed](../../LICENSE).

package/dist/Ryunix.esm.js

@@ -1288,14 +1288,12 @@ const useReducer = (reducer, initialState, init, defaultPriority = getCurrentPri
 
     if (!activeRoot) return
 
-    currentState.wipRoot = {
+    const newRoot = {
       dom: activeRoot.dom,
       props: activeRoot.props,
       alternate: currentState.currentRoot || null,
     };
-    currentState.deletions = [];
-    currentState.hookIndex = 0;
-    queueUpdate(() => scheduleWork$1(currentState.wipRoot, priority));
+    queueUpdate(() => scheduleWork$1(newRoot, priority));
   };
 
   wipFiber.hooks[hookIndex] = hook;
@@ -2174,6 +2172,21 @@ const updateFunctionComponent = (fiber) => {
     fiber.effectTag = EFFECT_TAGS.HYDRATE;
   }
 
+  // Memo bailout: skip re-render if props haven't changed
+  if (fiber.type._isMemo && fiber.alternate) {
+    const { children: _pc, ...prevRest } = fiber.alternate.props || {};
+    const { children: _nc, ...nextRest } = fiber.props || {};
+    if (fiber.type._arePropsEqual(prevRest, nextRest)) {
+      fiber.hooks = fiber.alternate.hooks;
+      const oldChild = fiber.alternate.child;
+      if (oldChild) {
+        oldChild.parent = fiber;
+        fiber.child = oldChild;
+      }
+      return
+    }
+  }
+
   let children = [fiber.type(fiber.props)];
 
   if (fiber.type._contextId && fiber.props.value !== undefined) {
@@ -3140,18 +3153,12 @@ const renderToStringAsync = async (element, options = {}) => {
  * @returns {Function} Memoized component
  */
 const memo = (Component, arePropsEqual = shallowEqual) => {
-  let prevProps = null;
-  let prevResult = null;
-
   const MemoizedComponent = (props) => {
-    if (prevProps && arePropsEqual(prevProps, props)) {
-      return prevResult
-    }
-    prevProps = props;
-    prevResult = Component(props);
-    return prevResult
+    return Component(props)
   };
-
+  MemoizedComponent._isMemo = true;
+  MemoizedComponent._wrappedComponent = Component;
+  MemoizedComponent._arePropsEqual = arePropsEqual;
   MemoizedComponent.displayName = `Memo(${Component.displayName || Component.name || 'Component'})`;
   return MemoizedComponent
 };