@unsetsoft/ryunixjs 1.2.4-canary.17 → 1.2.4-canary.18

package/README.md

@@ -1,19 +1,91 @@
-<img src="https://raw.githubusercontent.com/UnSetSoft/Ryunixjs/canary/assets/logo.png"  width="200" height="200" style="
-    display: block;
-    margin: 0 auto;" />
+<p align="center">
+  <img src="https://raw.githubusercontent.com/UnSetSoft/Ryunixjs/canary/assets/logo.png" width="200" height="200" alt="RyunixJS Logo" />
+</p>
 
-## RyunixJS [![npm version](https://img.shields.io/npm/v/@unsetsoft/ryunixjs.svg?style=flat)](https://www.npmjs.com/package/@unsetsoft/ryunixjs)[![npm version](https://img.shields.io/npm/v/@unsetsoft/ryunixjs/canary.svg?style=flat)](https://www.npmjs.com/package/@unsetsoft/ryunixjs/v/canary)
+<h1 align="center">@unsetsoft/ryunixjs</h1>
 
-### What is RyunixJS?
+<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="npm version" />
+  </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="canary version" />
+  </a>
+</p>
 
-Like React, NextJS, Preact, Vite. Ryunix allows you to build static websites from JavaScript in a similar way to the aforementioned frameworks. However, Ryunix is planned to be completely standalone, i.e. without including React internally. This way allowing it to be more manageable and moldable for each developer. The reactivity of Ryunix is similar to Preact, however, it does not pretend to follow any standard of React or any similar Framework, but to allow to generate an SPA in its own way.
+---
 
-### Usage
+## 🧠 What is the Core?
 
-`npx @unsetsoft/cra@latest <my-app>`
+`@unsetsoft/ryunixjs` is the **foundational engine** of the RyunixJS framework. It's a lightweight, high-performance library responsible for:
 
-### Do you want to contribute?
+- **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.
 
-You can make any change as long as it does not affect the `canary` branches. Make changes that are important, necessary or to add something new if you see it necessary, include your proposal before in an issue and then create a PR referencing that issue.
+While you can use it standalone for custom integrations, it is typically used via `@unsetsoft/ryunix-presets` and our official CLI.
 
-To be able to work more comfortably you should create a branch with this name `gh/[user]/[branch name]`, all changes should always go to the canary version. Once the changes are applied and no problems are detected, they will become part of the nightly version for further testing and finally the final version will be released. make each change with a simple descriptive message, and remember not to change the version of the mono repo or packages, such changes are made manually when a new update is about to be made.
+## 🚀 Installation
+
+```bash
+npm install @unsetsoft/ryunixjs
+```
+
+## 🛠️ API Reference
+
+### Core Functions
+
+- `createElement(type, props, ...children)`: Creates a Vitual 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. |
+
+### Specialized Hooks
+
+- `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.
+- `useQuery()` / `useHash()`: Reactive URL parameters and hash.
+
+### 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.
+
+## 🏗️ Example Usage
+
+```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"));
+```
+
+## 📄 License
+
+RyunixJS is [MIT Licensed](file:///e:/proyects/Ryunixjs/LICENSE).

package/dist/Ryunix.esm.js

@@ -477,6 +477,24 @@ const createDom = (fiber) => {
   }
 };
 
+const validateUri = (name, value) => {
+  if (typeof value !== 'string') return value
+  const attr = name.toLowerCase();
+  if (attr !== 'href' && attr !== 'src' && attr !== 'action' && attr !== 'formaction') {
+    return value
+  }
+
+  const normalized = value.replace(/\s+/g, '').toLowerCase();
+  if (normalized.startsWith('javascript:') || normalized.startsWith('vbscript:')) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(`[Ryunix Security] Blocked dangerous ${name} URI: ${value}`);
+    }
+    return 'javascript:void(0)'
+  }
+
+  return value
+};
+
 /**
  * Update DOM element with new props
  * @param {HTMLElement|Text} dom - DOM element
@@ -566,13 +584,15 @@ const updateDom = (dom, prevProps = {}, nextProps = {}) => {
             const isSvgNode = dom instanceof SVGElement;
             if (isSvgNode) {
               const attrName = toSvgAttrName(name);
+              const validatedValue = validateUri(attrName, nextProps[name]);
               // viewBox is case sensitive, we respect the camelCase for it.
-              dom.setAttribute(attrName, nextProps[name]);
+              dom.setAttribute(attrName, validatedValue);
             } else {
-              dom[name] = nextProps[name];
+              const validatedValue = validateUri(name, nextProps[name]);
+              dom[name] = validatedValue;
               // Best effort: set html attributes if it's not a primitive component property
               if (typeof nextProps[name] !== 'object' && typeof nextProps[name] !== 'function') {
-                dom.setAttribute(name, nextProps[name]);
+                dom.setAttribute(name, validatedValue);
               }
             }
           }
@@ -2603,6 +2623,16 @@ const hydrate = (element, container) => {
   return root
 };
 
+const sanitizeProps = (props) => {
+  if (!props || typeof props !== 'object' || Array.isArray(props)) return props
+  const sanitized = {};
+  for (const key in props) {
+    if (key === '__proto__' || key === 'constructor' || key === 'prototype') continue
+    sanitized[key] = props[key];
+  }
+  return sanitized
+};
+
 /**
  * The `init` function initializes a rendering process for a main element within a specified container
  * root element.
@@ -2635,7 +2665,8 @@ const hydrateIslands = (components = {}, hasMainElement = false) => {
       return
     }
     try {
-      const props = JSON.parse(container.getAttribute('data-props') || '{}');
+      const rawProps = JSON.parse(container.getAttribute('data-props') || '{}');
+      const props = sanitizeProps(rawProps);
       hydrate(createElement(Component, props), container);
     } catch (e) {
       console.error(`[Ryunix Islands] Error hydrating island "${id}":`, e);
@@ -2800,8 +2831,8 @@ const renderToStringImpl = (element) => {
         if (value) attributes += ` ${key}=""`;
       } else if (value != null) {
         let attrName = toSvgAttrName(key);
-
-        attributes += ` ${attrName}="${escapeHtml(value)}"`;
+        let validatedValue = validateUri(attrName, value);
+        attributes += ` ${attrName}="${escapeHtml(validatedValue)}"`;
       }
     }
   });
@@ -2982,7 +3013,9 @@ const renderToStreamImpl = async (element, push, suspenseTasks = []) => {
       if (typeof value === 'boolean') {
         if (value) attributes += ` ${key}=""`;
       } else if (value != null) {
-        attributes += ` ${toSvgAttrName(key)}="${escapeHtml(value)}"`;
+        const attrName = toSvgAttrName(key);
+        const validatedValue = validateUri(attrName, value);
+        attributes += ` ${attrName}="${escapeHtml(validatedValue)}"`;
       }
     }
   });
@@ -3006,7 +3039,7 @@ const renderToStreamImpl = async (element, push, suspenseTasks = []) => {
   }
 };
 
-const renderToReadableStream = (element) => {
+const renderToReadableStream = (element, options = {}) => {
   const state = getState();
   const encoder = new TextEncoder();
 
@@ -3021,7 +3054,8 @@ const renderToReadableStream = (element) => {
 
       try {
         // 0. Inject RC helper script first
-        push(`<script>${RC_SCRIPT}</script>`);
+        const nonceAttr = options.nonce ? ` nonce="${options.nonce}"` : '';
+        push(`<script${nonceAttr}>${RC_SCRIPT}</script>`);
 
         // 1. Render initial tree (with fallbacks)
         await renderToStreamImpl(element, push, suspenseTasks);
@@ -3034,7 +3068,7 @@ const renderToReadableStream = (element) => {
           const res = await task;
           if (res.success) {
             push(`<template id="P:${res.id}">${res.content}</template>`);
-            push(`<script>$RC("S:${res.id}", "P:${res.id}")</script>`);
+            push(`<script${nonceAttr}>$RC("S:${res.id}", "P:${res.id}")</script>`);
           }
         }
 
@@ -3048,7 +3082,7 @@ const renderToReadableStream = (element) => {
   })
 };
 
-const renderToString = (element) => {
+const renderToString = (element, options = {}) => {
   const state = getState();
   const wasServerRendering = state.isServerRendering;
   state.isServerRendering = true;
@@ -3305,6 +3339,7 @@ function createActionProxy(actionId) {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
+        'X-Ryunix-Action': 'true',
       },
       body: JSON.stringify({ actionId, args }),
     });