@fynixorg/ui 1.0.12 → 1.0.14

package/dist/runtime.js

@@ -22,6 +22,387 @@ import { nixRef } from "./hooks/nixRef";
 import { nixState } from "./hooks/nixState";
 import { nixStore } from "./hooks/nixStore";
 import createFynix from "./router/router";
+class SimplePriorityQueue {
+    constructor() {
+        this.items = [];
+        this.priorityOrder = {
+            immediate: 0,
+            high: 1,
+            normal: 2,
+            low: 3,
+            idle: 4,
+        };
+    }
+    push(item, priority) {
+        this.items.push({ item, priority });
+        this.items.sort((a, b) => this.priorityOrder[a.priority] - this.priorityOrder[b.priority]);
+    }
+    pop() {
+        return this.items.shift()?.item;
+    }
+    peek() {
+        return this.items[0]?.item;
+    }
+    size() {
+        return this.items.length;
+    }
+    isEmpty() {
+        return this.items.length === 0;
+    }
+}
+class FynixScheduler {
+    constructor() {
+        this.updateQueue = new SimplePriorityQueue();
+        this.batchedUpdates = new Set();
+        this.isScheduled = false;
+        this.isWorking = false;
+        this.currentPriority = "normal";
+        this.updateIdCounter = 0;
+    }
+    schedule(update, priority = "normal") {
+        update.id = `update_${this.updateIdCounter++}`;
+        update.priority = priority;
+        update.timestamp = performance.now();
+        if (priority === "immediate") {
+            this.flushUpdate(update);
+        }
+        else {
+            this.updateQueue.push(update, priority);
+            this.scheduleWork();
+        }
+    }
+    batchUpdates(updates) {
+        updates.forEach((update) => this.batchedUpdates.add(update));
+        this.scheduleWork();
+    }
+    timeSlice(deadline) {
+        const startTime = performance.now();
+        const previousPriority = this.currentPriority;
+        while (!this.updateQueue.isEmpty() &&
+            performance.now() - startTime < deadline) {
+            const update = this.updateQueue.pop();
+            if (update) {
+                if (this.shouldYield() && update.priority !== "immediate") {
+                    this.updateQueue.push(update, update.priority);
+                    break;
+                }
+                this.flushUpdate(update);
+            }
+        }
+        this.currentPriority = previousPriority;
+        return this.updateQueue.isEmpty();
+    }
+    flush() {
+        if (this.isWorking)
+            return;
+        this.isWorking = true;
+        try {
+            while (!this.updateQueue.isEmpty()) {
+                const update = this.updateQueue.peek();
+                if (update && update.priority === "immediate") {
+                    this.flushUpdate(this.updateQueue.pop());
+                }
+                else {
+                    break;
+                }
+            }
+            this.batchedUpdates.forEach((update) => this.flushUpdate(update));
+            this.batchedUpdates.clear();
+        }
+        finally {
+            this.isWorking = false;
+            this.isScheduled = false;
+        }
+    }
+    flushUpdate(update) {
+        const previousPriority = this.currentPriority;
+        this.currentPriority = update.priority;
+        try {
+            update.callback();
+        }
+        catch (error) {
+            console.error("[FynixScheduler] Update error:", error);
+            showErrorOverlay(error);
+        }
+        finally {
+            this.currentPriority = previousPriority;
+        }
+    }
+    scheduleWork() {
+        if (this.isScheduled)
+            return;
+        this.isScheduled = true;
+        const nextUpdate = this.updateQueue.peek();
+        if (nextUpdate) {
+            if (nextUpdate.priority === "high") {
+                requestAnimationFrame(() => this.workLoop(16.67));
+            }
+            else {
+                if ("requestIdleCallback" in window) {
+                    requestIdleCallback((deadline) => {
+                        this.workLoop(deadline.timeRemaining());
+                    });
+                }
+                else {
+                    setTimeout(() => this.workLoop(5), 0);
+                }
+            }
+        }
+    }
+    workLoop(deadline) {
+        const hasMoreWork = !this.timeSlice(deadline);
+        if (hasMoreWork) {
+            this.isScheduled = false;
+            this.scheduleWork();
+        }
+        else {
+            this.flush();
+        }
+    }
+    getCurrentPriority() {
+        return this.currentPriority;
+    }
+    shouldYield() {
+        const nextUpdate = this.updateQueue.peek();
+        if (!nextUpdate)
+            return false;
+        const currentPriorityLevel = this.getPriorityLevel(this.currentPriority);
+        const nextPriorityLevel = this.getPriorityLevel(nextUpdate.priority);
+        return nextPriorityLevel < currentPriorityLevel;
+    }
+    getPriorityLevel(priority) {
+        const levels = { immediate: 0, high: 1, normal: 2, low: 3, idle: 4 };
+        return levels[priority];
+    }
+}
+const scheduler = new FynixScheduler();
+class FiberRenderer {
+    constructor() {
+        this.workInProgressRoot = null;
+        this.nextUnitOfWork = null;
+        this.currentRoot = null;
+        this.deletions = [];
+    }
+    scheduleWork(fiber) {
+        this.workInProgressRoot = {
+            ...fiber,
+            alternate: this.currentRoot,
+        };
+        this.nextUnitOfWork = this.workInProgressRoot;
+        this.deletions = [];
+        scheduler.schedule({
+            id: "",
+            type: "layout",
+            priority: "high",
+            callback: () => this.workLoop(5),
+            timestamp: performance.now(),
+        }, "high");
+    }
+    workLoop(deadline) {
+        const startTime = performance.now();
+        while (this.nextUnitOfWork && performance.now() - startTime < deadline) {
+            this.nextUnitOfWork = this.performUnitOfWork(this.nextUnitOfWork);
+        }
+        if (!this.nextUnitOfWork && this.workInProgressRoot) {
+            this.commitRoot();
+        }
+        else if (this.nextUnitOfWork) {
+            scheduler.schedule({
+                id: "",
+                type: "layout",
+                priority: "normal",
+                callback: () => this.workLoop(5),
+                timestamp: performance.now(),
+            }, "normal");
+        }
+    }
+    performUnitOfWork(fiber) {
+        this.reconcileChildren(fiber, fiber.props?.children || []);
+        if (fiber.child) {
+            return fiber.child;
+        }
+        let nextFiber = fiber;
+        while (nextFiber) {
+            if (nextFiber.sibling) {
+                return nextFiber.sibling;
+            }
+            nextFiber = nextFiber.parent;
+        }
+        return null;
+    }
+    reconcileChildren(wipFiber, elements) {
+        let index = 0;
+        let oldFiber = wipFiber.alternate?.child;
+        let prevSibling = null;
+        while (index < elements.length || oldFiber != null) {
+            const element = elements[index];
+            let newFiber = null;
+            const sameType = oldFiber && element && element.type === oldFiber.type;
+            if (sameType && oldFiber) {
+                newFiber = {
+                    type: oldFiber.type,
+                    props: element.props,
+                    key: element.key,
+                    _domNode: oldFiber._domNode,
+                    parent: wipFiber,
+                    alternate: oldFiber,
+                    effectTag: "UPDATE",
+                    updatePriority: "normal",
+                    child: null,
+                    sibling: null,
+                    _rendered: null,
+                };
+            }
+            if (element && !sameType) {
+                newFiber = {
+                    type: element.type,
+                    props: element.props,
+                    key: element.key,
+                    _domNode: null,
+                    parent: wipFiber,
+                    alternate: null,
+                    effectTag: "PLACEMENT",
+                    updatePriority: "normal",
+                    child: null,
+                    sibling: null,
+                    _rendered: null,
+                };
+            }
+            if (oldFiber && !sameType) {
+                oldFiber.effectTag = "DELETION";
+                this.deletions.push(oldFiber);
+            }
+            if (oldFiber) {
+                oldFiber = oldFiber.sibling;
+            }
+            if (index === 0) {
+                wipFiber.child = newFiber;
+            }
+            else if (newFiber && prevSibling) {
+                prevSibling.sibling = newFiber;
+            }
+            prevSibling = newFiber;
+            index++;
+        }
+    }
+    commitRoot() {
+        this.deletions.forEach((fiber) => this.commitWork(fiber));
+        if (this.workInProgressRoot?.child) {
+            this.commitWork(this.workInProgressRoot.child);
+        }
+        this.currentRoot = this.workInProgressRoot;
+        this.workInProgressRoot = null;
+    }
+    commitWork(fiber) {
+        if (!fiber)
+            return;
+        let domParentFiber = fiber.parent;
+        while (!domParentFiber?._domNode) {
+            domParentFiber = domParentFiber?.parent || null;
+        }
+        const domParent = domParentFiber?._domNode;
+        if (fiber.effectTag === "PLACEMENT" && fiber._domNode && domParent) {
+            domParent.appendChild(fiber._domNode);
+        }
+        else if (fiber.effectTag === "UPDATE" && fiber._domNode) {
+            this.updateDom(fiber._domNode, fiber.alternate?.props || {}, fiber.props);
+        }
+        else if (fiber.effectTag === "DELETION" && domParent) {
+            this.commitDeletion(fiber, domParent);
+        }
+        this.commitWork(fiber.child);
+        this.commitWork(fiber.sibling);
+    }
+    commitDeletion(fiber, domParent) {
+        if (fiber._domNode) {
+            domParent.removeChild(fiber._domNode);
+        }
+        else if (fiber.child) {
+            this.commitDeletion(fiber.child, domParent);
+        }
+    }
+    updateDom(dom, prevProps, nextProps) {
+        Object.keys(prevProps)
+            .filter((key) => key !== "children" && !(key in nextProps))
+            .forEach((name) => {
+            if (name.startsWith("on")) {
+                const eventType = name.toLowerCase().substring(2);
+                dom.removeEventListener(eventType, prevProps[name]);
+            }
+            else {
+                dom[name] = "";
+            }
+        });
+        Object.keys(nextProps)
+            .filter((key) => key !== "children")
+            .forEach((name) => {
+            if (prevProps[name] !== nextProps[name]) {
+                if (name.startsWith("on")) {
+                    const eventType = name.toLowerCase().substring(2);
+                    dom.addEventListener(eventType, nextProps[name]);
+                }
+                else {
+                    dom[name] = nextProps[name];
+                }
+            }
+        });
+    }
+}
+const fiberRenderer = new FiberRenderer();
+export function useFiberRenderer() {
+    return fiberRenderer;
+}
+class HierarchicalStore {
+    constructor() {
+        this.root = new Map();
+        this.selectorCache = new Map();
+        this.stateSnapshot = {};
+    }
+    select(selector) {
+        const selectorKey = selector.toString();
+        if (this.selectorCache.has(selectorKey)) {
+            return this.selectorCache.get(selectorKey);
+        }
+        const result = selector(this.getState());
+        this.selectorCache.set(selectorKey, result);
+        return result;
+    }
+    optimisticUpdate(path, update, rollback) {
+        const original = this.get(path);
+        this.set(path, update);
+        return {
+            commit: () => this.clearRollback(path),
+            rollback: () => {
+                this.set(path, original);
+                rollback?.();
+            },
+        };
+    }
+    getState() {
+        return this.stateSnapshot;
+    }
+    get(path) {
+        return this.root.get(path)?.value;
+    }
+    set(path, value) {
+        const node = this.root.get(path);
+        if (node) {
+            node.value = value;
+            this.stateSnapshot = { ...this.stateSnapshot, [path]: value };
+            this.invalidateSelectors();
+        }
+    }
+    clearRollback(path) {
+        console.log(`[HierarchicalStore] Optimistic update committed for path: ${path}`);
+    }
+    invalidateSelectors() {
+        this.selectorCache.clear();
+    }
+}
+const hierarchicalStore = new HierarchicalStore();
+export function useHierarchicalStore() {
+    return hierarchicalStore;
+}
 export const TEXT = Symbol("text");
 export const Fragment = Symbol("Fragment");
 const BOOLEAN_ATTRS = new Set([
@@ -52,6 +433,31 @@ const DOM_PROPERTIES = new Set([
     "textContent",
     "innerText",
 ]);
+const DANGEROUS_HTML_PROPS = new Set([
+    "innerHTML",
+    "outerHTML",
+    "insertAdjacentHTML",
+    "srcdoc",
+]);
+const DANGEROUS_PROTOCOLS = new Set([
+    "javascript:",
+    "data:",
+    "vbscript:",
+    "file:",
+    "about:",
+]);
+const SAFE_PROTOCOLS = new Set([
+    "http:",
+    "https:",
+    "ftp:",
+    "ftps:",
+    "mailto:",
+    "tel:",
+    "#",
+    "/",
+    "./",
+    "../",
+]);
 export function createTextVNode(text) {
     if (text == null || text === false) {
         return { type: TEXT, props: { nodeValue: "" }, key: null };
@@ -302,7 +708,7 @@ export function renderComponent(Component, props = {}) {
     catch (err) {
         console.error("[Fynix] Component render error:", err);
         showErrorOverlay(err);
-        return h("div", { style: "color:red" }, `Error: ${err.message}`);
+        return h("div", { style: "color:red" }, `Error: ${sanitizeErrorMessage(err)}`);
     }
     finally {
         endComponent();
@@ -346,6 +752,45 @@ function registerDelegatedHandler(el, eventName, fn) {
         }
     });
 }
+function sanitizeText(text) {
+    if (typeof text !== "string")
+        return String(text);
+    return text
+        .replace(/[<>"'&]/g, (match) => {
+        const entityMap = {
+            "<": "&lt;",
+            ">": "&gt;",
+            '"': "&quot;",
+            "'": "&#x27;",
+            "&": "&amp;",
+        };
+        return entityMap[match] || match;
+    })
+        .replace(/javascript:/gi, "blocked:")
+        .replace(/data:.*?base64/gi, "blocked:");
+}
+function sanitizeAttributeValue(value) {
+    if (typeof value !== "string")
+        return String(value);
+    return value
+        .replace(/["'<>]/g, (match) => {
+        const entityMap = {
+            '"': "&quot;",
+            "'": "&#x27;",
+            "<": "&lt;",
+            ">": "&gt;",
+        };
+        return entityMap[match] || match;
+    })
+        .replace(/javascript:/gi, "blocked:")
+        .replace(/on\w+=/gi, "blocked=");
+}
+function sanitizeErrorMessage(error) {
+    if (!error)
+        return "Unknown error";
+    const message = error.message || error.toString() || "Unknown error";
+    return sanitizeText(String(message)).slice(0, 200);
+}
 function setProperty(el, key, value) {
     const k = key.toLowerCase();
     if (key === "r-class" || key === "rc") {
@@ -370,8 +815,40 @@ function setProperty(el, key, value) {
         Object.assign(el.style, value);
         return;
     }
-    if (key === "innerHTML" || key === "outerHTML") {
-        console.warn("[Fynix] Security: innerHTML/outerHTML not allowed. Use textContent or children.");
+    if (DANGEROUS_HTML_PROPS.has(key)) {
+        console.error(`[Fynix] Security: ${key} is blocked for security reasons. Use textContent or children instead.`);
+        return;
+    }
+    if ((key === "href" ||
+        key === "src" ||
+        key === "action" ||
+        key === "formaction") &&
+        typeof value === "string") {
+        const normalizedValue = value.trim().toLowerCase();
+        for (const protocol of DANGEROUS_PROTOCOLS) {
+            if (normalizedValue.startsWith(protocol)) {
+                console.error(`[Fynix] Security: ${protocol} protocol blocked in ${key}`);
+                return;
+            }
+        }
+        if (normalizedValue.includes(":")) {
+            const protocol = normalizedValue.split(":")[0] + ":";
+            if (!SAFE_PROTOCOLS.has(protocol) &&
+                !SAFE_PROTOCOLS.has(normalizedValue.charAt(0))) {
+                console.error(`[Fynix] Security: Protocol '${protocol}' not in safe list for ${key}`);
+                return;
+            }
+        }
+        if (normalizedValue.startsWith("data:")) {
+            if (normalizedValue.includes("javascript") ||
+                normalizedValue.includes("<script")) {
+                console.error(`[Fynix] Security: Suspicious data: URL blocked in ${key}`);
+                return;
+            }
+        }
+    }
+    if (key.toLowerCase().startsWith("on") && key !== "open") {
+        console.error(`[Fynix] Security: Inline event handler '${key}' blocked. Use r-${key.slice(2)} instead.`);
         return;
     }
     if (BOOLEAN_ATTRS.has(k)) {
@@ -385,25 +862,24 @@ function setProperty(el, key, value) {
         }
         return;
     }
-    if (DOM_PROPERTIES.has(key)) {
-        el[key] = value ?? "";
+    if (DOM_PROPERTIES.has(key) && !DANGEROUS_HTML_PROPS.has(key)) {
+        if (key === "textContent" || key === "innerText") {
+            el[key] = sanitizeText(value ?? "");
+        }
+        else {
+            el[key] = value ?? "";
+        }
         return;
     }
     if (key.startsWith("data-") || key.startsWith("aria-")) {
         if (value != null && value !== false) {
-            el.setAttribute(key, value);
+            el.setAttribute(key, sanitizeAttributeValue(String(value)));
         }
         else {
             el.removeAttribute(key);
         }
         return;
     }
-    if ((key === "href" || key === "src") && typeof value === "string") {
-        if (value.trim().toLowerCase().startsWith("javascript:")) {
-            console.warn("[Fynix] Security: javascript: protocol blocked in", key);
-            return;
-        }
-    }
     if (value != null && value !== false) {
         el.setAttribute(key, value);
     }
@@ -489,7 +965,7 @@ async function renderMaybeAsyncComponent(Component, props, vnode) {
         showErrorOverlay(err);
         ctx._isMounted = false;
         endComponent();
-        return h("div", { style: "color:red" }, `Error: ${err.message}`);
+        return h("div", { style: "color:red" }, `Error: ${sanitizeErrorMessage(err)}`);
     }
 }
 export async function patch(parent, newVNode, oldVNode) {