@creact-labs/creact 0.1.0

package/dist/core/Renderer.js

@@ -0,0 +1,791 @@
+"use strict";
+/**
+
+ * Licensed under the Apache License, Version 2.0 (the "License");
+
+ * you may not use this file except in compliance with the License.
+
+ * You may obtain a copy of the License at
+
+ *
+
+ *     http://www.apache.org/licenses/LICENSE-2.0
+
+ *
+
+ * Unless required by applicable law or agreed to in writing, software
+
+ * distributed under the License is distributed on an "AS IS" BASIS,
+
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+
+ * See the License for the specific language governing permissions and
+
+ * limitations under the License.
+
+ *
+
+ * Copyright 2025 Daniel Coutinho Ribeiro
+
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Renderer = void 0;
+const useInstance_1 = require("../hooks/useInstance");
+const context_1 = require("../hooks/context");
+const naming_1 = require("../utils/naming");
+const Logger_1 = require("../utils/Logger");
+const logger = Logger_1.LoggerFactory.getLogger('renderer');
+/**
+ * Renderer transforms JSX into a Fiber tree
+ *
+ * The Fiber tree is an intermediate representation that includes:
+ * - All components (containers + resources)
+ * - Hierarchical paths for identity tracking
+ * - Props and children resolved recursively
+ *
+ * Enhanced with context reactivity:
+ * - Tracks context provider value changes
+ * - Integrates with ContextDependencyTracker for selective re-rendering
+ * - Detects when context values change and triggers appropriate re-renders
+ *
+ * No dependencies injected - pure transformation logic
+ */
+class Renderer {
+    constructor() {
+        this.currentFiber = null;
+        this.currentPath = [];
+        // Structural change detection
+        this.previousStructures = new WeakMap();
+    }
+    /**
+     * Render JSX to Fiber tree
+     *
+     * @param jsx - JSX element to render
+     * @returns Root Fiber node
+     */
+    render(jsx) {
+        // Run rendering within AsyncLocalStorage context for thread safety
+        return (0, context_1.runWithHookContext)(() => {
+            try {
+                this.currentPath = [];
+                this.currentFiber = this.renderElement(jsx, [], 0);
+                return this.currentFiber;
+            }
+            finally {
+                // Clear context stacks to prevent memory leaks
+                // This ensures context stacks are always cleared after each render cycle
+                (0, context_1.clearContextStacks)();
+            }
+        });
+    }
+    /**
+     * Recursively render a JSX element to a Fiber node
+     *
+     * @param element - JSX element
+     * @param parentPath - Path from parent
+     * @param siblingIndex - Sibling index for automatic key generation (default 0)
+     * @returns Fiber node
+     */
+    renderElement(element, parentPath, siblingIndex = 0) {
+        if (!element || typeof element !== 'object') {
+            throw new Error('Invalid JSX element');
+        }
+        const { type, props, key } = element;
+        if (!type) {
+            throw new Error('JSX element missing type');
+        }
+        // Ensure props is always an object (handle null/undefined)
+        const safeProps = props || {};
+        // Generate path for this node with sibling index support
+        const nodeName = (0, naming_1.getNodeName)(type, safeProps, key, siblingIndex);
+        const path = [...parentPath, nodeName];
+        // Create Fiber node for component execution
+        const fiber = {
+            type,
+            props: { ...safeProps },
+            children: [],
+            path,
+            key: key !== undefined ? (typeof key === 'symbol' ? nodeName : key.toString()) : undefined,
+            cloudDOMNodes: [], // Will be populated by useInstance
+        };
+        // Check if this is a Context Provider and handle value changes
+        const isProvider = typeof type === 'function' && type._isContextProvider;
+        if (isProvider) {
+            const contextId = type._contextId;
+            const newValue = safeProps.value;
+            // Detect context value changes and schedule re-renders if needed
+            this.handleContextProviderValueChange(contextId, newValue);
+            // Push value onto stack for child components
+            (0, context_1.pushContextValue)(contextId, newValue);
+        }
+        // Set context and execute component function to get children
+        (0, context_1.setRenderContext)(fiber, path);
+        (0, useInstance_1.resetConstructCounts)(fiber); // Reset construct call counts for this component
+        const children = this.executeComponent(type, safeProps, path);
+        (0, context_1.clearRenderContext)();
+        // Recursively render children
+        if (children) {
+            fiber.children = this.renderChildren(children, path);
+        }
+        // Check for structural changes after component execution
+        this.handleStructuralChanges(fiber);
+        // Pop context value from stack after rendering children
+        if (isProvider) {
+            const contextId = type._contextId;
+            (0, context_1.popContextValue)(contextId);
+        }
+        return fiber;
+    }
+    /**
+     * Execute a component function to resolve its children
+     *
+     * Note: setRenderContext should already be called by renderComponent before this
+     *
+     * @param type - Component type (function or class)
+     * @param props - Props to pass
+     * @param path - Current path (for context)
+     * @returns Children elements
+     */
+    executeComponent(type, props, path) {
+        // Store current path for hooks to access
+        const previousPath = this.currentPath;
+        this.currentPath = path;
+        try {
+            // Handle Fragment (symbol type)
+            if (typeof type === 'symbol') {
+                // Fragments just pass through their children
+                return props.children;
+            }
+            // Handle function components
+            if (typeof type === 'function') {
+                // Check if it's a class component
+                if (type.prototype && type.prototype.isReactComponent) {
+                    const instance = new type(props);
+                    return instance.render();
+                }
+                // Function component
+                return type(props);
+            }
+            // Handle intrinsic elements (strings like 'div')
+            if (typeof type === 'string') {
+                return props.children;
+            }
+            throw new Error(`Unknown component type: ${typeof type === 'symbol' ? 'Symbol' : type}`);
+        }
+        finally {
+            // Clear rendering context for hooks
+            (0, context_1.clearRenderContext)();
+            // Restore previous path
+            this.currentPath = previousPath;
+            // Copy CloudDOM nodes from temp fiber to actual fiber (will be done in renderElement)
+            // This is handled by returning the tempFiber's cloudDOMNodes
+        }
+    }
+    /**
+     * Render children elements
+     *
+     * @param children - Children to render (can be array, single element, or null)
+     * @param parentPath - Path from parent
+     * @returns Array of Fiber nodes
+     */
+    renderChildren(children, parentPath) {
+        if (!children) {
+            return [];
+        }
+        // Debug logging for array handling
+        if (Array.isArray(children) && children.length > 0) {
+            const hasNestedArrays = children.some(child => Array.isArray(child));
+            if (hasNestedArrays) {
+                logger.debug(`[renderChildren] Nested arrays detected at ${parentPath.join('.')}`);
+                logger.debug(`  Before flat: ${children.length} items`);
+                logger.debug(`  After flat: ${children.flat().length} items`);
+            }
+        }
+        // Normalize to array and flatten nested arrays (handles .map() results)
+        const childArray = Array.isArray(children) ? children.flat() : [children];
+        // Filter out null/undefined/boolean values
+        const validChildren = childArray.filter((child) => child !== null && child !== undefined && typeof child !== 'boolean');
+        // Track sibling counts by component type for automatic key generation
+        const siblingCounts = new Map();
+        // Track which types have been warned about (only warn once per type per render)
+        const warnedTypes = new Set();
+        // Render each child
+        return validChildren
+            .map((child) => {
+            // Handle text nodes (strings/numbers)
+            if (typeof child === 'string' || typeof child === 'number') {
+                // Skip text nodes in infrastructure (they don't make sense)
+                return null;
+            }
+            // Render JSX element
+            if (typeof child === 'object' && child.type) {
+                // Track sibling index for this type
+                const currentIndex = siblingCounts.get(child.type) || 0;
+                siblingCounts.set(child.type, currentIndex + 1);
+                // Emit warning when multiple siblings of same type without explicit keys
+                // This detects potential .map() usage without keys
+                if (currentIndex > 0 && !child.key && !warnedTypes.has(child.type)) {
+                    warnedTypes.add(child.type);
+                    const typeName = this.getTypeName(child.type);
+                    const pathStr = parentPath.join('.');
+                    logger.warn(`Warning: Multiple children of type "${typeName}" ` +
+                        `without explicit keys at path "${pathStr}". ` +
+                        `Consider adding a "key" prop for better reconciliation.`);
+                }
+                // Pass sibling index to renderElement
+                return this.renderElement(child, parentPath, currentIndex);
+            }
+            return null;
+        })
+            .filter((node) => node !== null);
+    }
+    /**
+     * Get a human-readable type name for warning messages
+     *
+     * @param type - Component type
+     * @returns Type name string
+     */
+    getTypeName(type) {
+        if (typeof type === 'function') {
+            return type.displayName || type.name || 'anonymous';
+        }
+        if (typeof type === 'string') {
+            return type;
+        }
+        if (typeof type === 'symbol') {
+            return 'Fragment';
+        }
+        return 'unknown';
+    }
+    /**
+     * Get current path (for hooks to access)
+     */
+    getCurrentPath() {
+        return [...this.currentPath];
+    }
+    /**
+     * Get current Fiber for post-deployment effects
+     *
+     * @returns Current Fiber node or null
+     */
+    getCurrentFiber() {
+        return this.currentFiber;
+    }
+    /**
+     * Set the RenderScheduler for selective re-rendering integration
+     *
+     * @param scheduler - RenderScheduler instance
+     */
+    setRenderScheduler(scheduler) {
+        this.renderScheduler = scheduler;
+    }
+    /**
+     * Set the ContextDependencyTracker for context reactivity
+     *
+     * @param tracker - ContextDependencyTracker instance
+     */
+    setContextDependencyTracker(tracker) {
+        this.contextDependencyTracker = tracker;
+    }
+    /**
+     * Set structural change detector for topology change detection
+     * @param detector - StructuralChangeDetector instance
+     */
+    setStructuralChangeDetector(detector) {
+        this.structuralChangeDetector = detector;
+    }
+    /**
+     * Handle context provider value changes
+     * Called when a context provider's value prop changes
+     *
+     * @param contextId - Context identifier
+     * @param newValue - New context value
+     */
+    handleContextProviderValueChange(contextId, newValue) {
+        if (this.contextDependencyTracker) {
+            try {
+                // Update context value and get affected fibers
+                const affectedFibers = this.contextDependencyTracker.updateContextValue(contextId, newValue);
+                // Schedule re-renders for affected components
+                if (this.renderScheduler && affectedFibers.length > 0) {
+                    affectedFibers.forEach((fiber) => {
+                        this.renderScheduler.schedule(fiber, 'context-change');
+                    });
+                }
+            }
+            catch (error) {
+                logger.warn('Context provider value change handling failed:', error);
+            }
+        }
+    }
+    /**
+     * Detect structural changes in a component
+     * Compares the current structure with the previous render
+     *
+     * @param fiber - Fiber node to check for structural changes
+     * @returns True if structural changes were detected
+     */
+    detectStructuralChanges(fiber) {
+        // Generate structural signature for current render
+        const currentStructure = this.generateStructuralSignature(fiber);
+        // Get previous structure
+        const previousStructure = this.previousStructures.get(fiber);
+        // Store current structure for next comparison
+        this.previousStructures.set(fiber, currentStructure);
+        // If no previous structure, this is the first render (not a change)
+        if (!previousStructure) {
+            return false;
+        }
+        // Compare structures
+        const hasChanged = previousStructure !== currentStructure;
+        if (hasChanged) {
+            logger.debug(`Structural change detected in ${fiber.path.join('.')}:`);
+            logger.debug(`  Previous: ${previousStructure}`);
+            logger.debug(`  Current:  ${currentStructure}`);
+        }
+        return hasChanged;
+    }
+    /**
+     * Generate a structural signature for a fiber node
+     * This captures the essential structure that affects CloudDOM generation
+     *
+     * @param fiber - Fiber node to generate signature for
+     * @returns Structural signature string
+     */
+    generateStructuralSignature(fiber) {
+        const parts = [];
+        // Include component type
+        const typeName = fiber.type?.name || (typeof fiber.type === 'symbol' ? 'fragment' : fiber.type);
+        parts.push(`type:${typeName}`);
+        // Include number and types of CloudDOM nodes (useInstance calls)
+        if (fiber.cloudDOMNodes && fiber.cloudDOMNodes.length > 0) {
+            const nodeSignatures = fiber.cloudDOMNodes
+                .map((node) => `${node.construct?.name || 'unknown'}:${node.id}`)
+                .sort(); // Sort for consistent ordering
+            parts.push(`nodes:[${nodeSignatures.join(',')}]`);
+        }
+        else {
+            parts.push('nodes:[]');
+        }
+        // Include number of children and their types
+        if (fiber.children && fiber.children.length > 0) {
+            const childTypes = fiber.children
+                .map((child) => child.type?.name ||
+                (typeof child.type === 'symbol' ? 'fragment' : child.type) ||
+                'unknown')
+                .sort(); // Sort for consistent ordering
+            parts.push(`children:[${childTypes.join(',')}]`);
+        }
+        else {
+            parts.push('children:[]');
+        }
+        // Include key if present (affects identity)
+        if (fiber.key) {
+            const keyValue = typeof fiber.key === 'symbol' ? 'fragment' : fiber.key;
+            parts.push(`key:${keyValue}`);
+        }
+        return parts.join('|');
+    }
+    /**
+     * Check for structural changes and schedule re-renders if needed
+     * Called during component re-execution
+     *
+     * @param fiber - Fiber node to check
+     */
+    handleStructuralChanges(fiber) {
+        if (this.detectStructuralChanges(fiber)) {
+            // Schedule re-render for structural change
+            if (this.renderScheduler) {
+                this.renderScheduler.schedule(fiber, 'structural-change');
+            }
+            // Also check if any dependent components need re-rendering
+            if (fiber.dependents) {
+                Array.from(fiber.dependents).forEach((dependent) => {
+                    if (this.renderScheduler) {
+                        this.renderScheduler.schedule(dependent, 'structural-change');
+                    }
+                });
+            }
+        }
+    }
+    /**
+     * Handle structural changes between old and new fiber trees
+     * Called during re-rendering to detect topology changes
+     *
+     * @param oldFiber - Previous fiber tree
+     * @param newFiber - New fiber tree after re-render
+     */
+    handleStructuralChangesComparison(oldFiber, newFiber) {
+        if (!this.structuralChangeDetector) {
+            return;
+        }
+        try {
+            // Extract CloudDOM from both fiber trees for comparison
+            const oldCloudDOM = this.extractCloudDOMFromFiber(oldFiber);
+            const newCloudDOM = this.extractCloudDOMFromFiber(newFiber);
+            // Detect structural changes
+            const changes = this.structuralChangeDetector.detectStructuralChanges(oldCloudDOM, newCloudDOM, newFiber);
+            if (changes.length > 0) {
+                // Trigger re-renders for affected components
+                this.structuralChangeDetector.triggerStructuralReRenders(changes, this.renderScheduler);
+            }
+        }
+        catch (error) {
+            logger.error('Error handling structural changes:', error);
+        }
+    }
+    /**
+     * Extract CloudDOM nodes from a fiber tree for structural comparison
+     *
+     * @param fiber - Fiber tree to extract CloudDOM from
+     * @returns Array of CloudDOM nodes
+     */
+    extractCloudDOMFromFiber(fiber) {
+        const cloudDOMNodes = [];
+        const walkFiber = (currentFiber) => {
+            // Check for cloudDOMNodes array
+            if (currentFiber.cloudDOMNodes &&
+                Array.isArray(currentFiber.cloudDOMNodes)) {
+                cloudDOMNodes.push(...currentFiber.cloudDOMNodes);
+            }
+            // Legacy cloudDOMNode removed - only use cloudDOMNodes array
+            // Recursively walk children
+            if (currentFiber.children && currentFiber.children.length > 0) {
+                for (const child of currentFiber.children) {
+                    walkFiber(child);
+                }
+            }
+        };
+        walkFiber(fiber);
+        return cloudDOMNodes;
+    }
+    /**
+     * Re-render specific components with selective updates
+     * This method re-executes only the specified components and their children
+     *
+     * @param components - Array of fiber nodes to re-render
+     * @param reason - Reason for the re-render
+     * @returns Updated root fiber node
+     */
+    reRenderComponents(components, reason) {
+        if (components.length === 0) {
+            throw new Error('[Renderer] No components provided for re-rendering');
+        }
+        return (0, context_1.runWithHookContext)(() => {
+            try {
+                // Find the root component to determine the full tree structure
+                const rootComponent = this.findRootComponent(components);
+                if (!rootComponent) {
+                    throw new Error('[Renderer] Could not determine root component for re-rendering');
+                }
+                // Track dependencies during re-render
+                this.trackDependenciesDuringRender(components);
+                // Selectively re-render the components
+                const updatedRoot = this.selectiveReRender(rootComponent, new Set(components), reason);
+                // Detect structural changes if this is a structural re-render
+                if (reason === 'structural-change' && this.structuralChangeDetector) {
+                    this.handleStructuralChangesComparison(rootComponent, updatedRoot);
+                }
+                // Update current fiber reference
+                this.currentFiber = updatedRoot;
+                return updatedRoot;
+            }
+            finally {
+                // Clear context stacks to prevent memory leaks
+                (0, context_1.clearContextStacks)();
+            }
+        });
+    }
+    /**
+     * Find components that depend on changed state/outputs
+     * This method traverses the fiber tree to find dependent components
+     *
+     * @param changedFiber - Fiber node that changed
+     * @returns Set of fiber nodes that depend on the changed fiber
+     */
+    findDependentComponents(changedFiber) {
+        const dependents = new Set();
+        // If the fiber has explicit dependents, add them
+        if (changedFiber.dependents) {
+            Array.from(changedFiber.dependents).forEach((dependent) => dependents.add(dependent));
+        }
+        // Traverse the tree to find implicit dependencies
+        if (this.currentFiber) {
+            this.findDependentsRecursive(this.currentFiber, changedFiber, dependents);
+        }
+        return dependents;
+    }
+    /**
+     * Track component dependencies during render
+     * This builds the dependency graph for selective re-rendering
+     *
+     * @param components - Components being rendered
+     */
+    trackDependenciesDuringRender(components) {
+        for (const component of components) {
+            // Initialize dependency tracking if not present
+            if (!component.dependencies) {
+                component.dependencies = new Set();
+            }
+            if (!component.dependents) {
+                component.dependents = new Set();
+            }
+            // Track dependencies based on context usage, state bindings, etc.
+            this.buildDependencyGraph(component);
+        }
+    }
+    /**
+     * Build dependency graph for a component
+     * This analyzes the component's usage patterns to determine dependencies
+     *
+     * @param component - Component to analyze
+     */
+    buildDependencyGraph(component) {
+        // Track context dependencies
+        const contextDependencies = this.contextDependencyTracker.getFiberContexts(component);
+        contextDependencies.forEach((contextId) => {
+            // Find context provider components and add as dependencies
+            const providerFiber = this.findContextProvider(contextId);
+            if (providerFiber && providerFiber !== component) {
+                if (!component.dependencies) {
+                    component.dependencies = new Set();
+                }
+                component.dependencies.add(providerFiber);
+                if (!providerFiber.dependents) {
+                    providerFiber.dependents = new Set();
+                }
+                providerFiber.dependents.add(component);
+            }
+        });
+        // Track state binding dependencies
+        // (This would integrate with StateBindingManager)
+        // Track instance output dependencies
+        // (This would integrate with ProviderOutputTracker)
+        // Basic parent-child dependencies
+        if (component.children) {
+            component.children.forEach((child) => {
+                // Child depends on parent
+                if (!child.dependencies) {
+                    child.dependencies = new Set();
+                }
+                child.dependencies.add(component);
+                // Parent has child as dependent
+                if (!component.dependents) {
+                    component.dependents = new Set();
+                }
+                component.dependents.add(child);
+            });
+        }
+    }
+    /**
+     * Find the context provider fiber for a given context ID
+     * This traverses up the fiber tree to find the provider
+     *
+     * @param contextId - Context identifier to find provider for
+     * @returns Provider fiber node or null if not found
+     */
+    findContextProvider(contextId) {
+        // This is a simplified implementation
+        // In a full implementation, we would traverse the fiber tree
+        // to find the actual provider component
+        if (!this.currentFiber) {
+            return null;
+        }
+        // For now, we'll do a simple search through the current fiber tree
+        return this.searchForProvider(this.currentFiber, contextId);
+    }
+    /**
+     * Recursively search for a context provider in the fiber tree
+     *
+     * @param fiber - Current fiber to search
+     * @param contextId - Context ID to find
+     * @returns Provider fiber or null
+     */
+    searchForProvider(fiber, contextId) {
+        // Check if this fiber is a provider for the context
+        const isProvider = typeof fiber.type === 'function' &&
+            fiber.type._isContextProvider &&
+            fiber.type._contextId === contextId;
+        if (isProvider) {
+            return fiber;
+        }
+        // Search children
+        if (fiber.children) {
+            for (const child of fiber.children) {
+                const result = this.searchForProvider(child, contextId);
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return null;
+    }
+    /**
+     * Perform selective re-render of specific components
+     * Only re-executes components that need updates
+     *
+     * @param rootFiber - Root fiber node
+     * @param componentsToReRender - Set of components that need re-rendering
+     * @param reason - Reason for re-render
+     * @returns Updated fiber tree
+     */
+    selectiveReRender(rootFiber, componentsToReRender, reason) {
+        // Create a copy of the root fiber for selective updates
+        const updatedFiber = this.cloneFiberForUpdate(rootFiber);
+        // Recursively update only the components that need re-rendering
+        this.selectiveReRenderRecursive(updatedFiber, componentsToReRender, reason, []);
+        return updatedFiber;
+    }
+    /**
+     * Recursively perform selective re-rendering
+     *
+     * @param fiber - Current fiber node
+     * @param componentsToReRender - Set of components to re-render
+     * @param reason - Reason for re-render
+     * @param currentPath - Current path in the tree
+     */
+    selectiveReRenderRecursive(fiber, componentsToReRender, reason, currentPath) {
+        // Check if this component needs re-rendering
+        const needsReRender = this.shouldReRenderComponent(fiber, componentsToReRender);
+        if (needsReRender) {
+            // Update reactive state
+            if (!fiber.reactiveState) {
+                fiber.reactiveState = {
+                    renderCount: 0,
+                    isDirty: false,
+                    updatePending: false,
+                };
+            }
+            fiber.reactiveState.lastRenderReason = reason;
+            fiber.reactiveState.lastRenderTime = Date.now();
+            fiber.reactiveState.renderCount++;
+            fiber.reactiveState.isDirty = false;
+            fiber.reactiveState.updatePending = false;
+            // Re-execute the component
+            this.reExecuteComponent(fiber, currentPath);
+        }
+        // Recursively process children
+        if (fiber.children) {
+            fiber.children.forEach((child) => {
+                const childPath = [...currentPath, child.path[child.path.length - 1]];
+                this.selectiveReRenderRecursive(child, componentsToReRender, reason, childPath);
+            });
+        }
+    }
+    /**
+     * Determine if a component should be re-rendered
+     *
+     * @param fiber - Fiber node to check
+     * @param componentsToReRender - Set of components marked for re-rendering
+     * @returns True if component should be re-rendered
+     */
+    shouldReRenderComponent(fiber, componentsToReRender) {
+        // Direct match
+        if (componentsToReRender.has(fiber)) {
+            return true;
+        }
+        // Check if any dependencies need re-rendering
+        if (fiber.dependencies) {
+            const dependencyArray = Array.from(fiber.dependencies);
+            for (const dependency of dependencyArray) {
+                if (componentsToReRender.has(dependency)) {
+                    return true;
+                }
+            }
+        }
+        // Check reactive state
+        if (fiber.reactiveState?.isDirty) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Re-execute a component function
+     *
+     * @param fiber - Fiber node to re-execute
+     * @param currentPath - Current path in the tree
+     */
+    reExecuteComponent(fiber, currentPath) {
+        // Set up rendering context
+        (0, context_1.setRenderContext)(fiber, fiber.path);
+        (0, useInstance_1.resetConstructCounts)(fiber);
+        try {
+            // Re-execute the component
+            const children = this.executeComponent(fiber.type, fiber.props, fiber.path);
+            // Update children if they changed
+            if (children) {
+                fiber.children = this.renderChildren(children, fiber.path);
+            }
+            // Check for structural changes after re-execution
+            this.handleStructuralChanges(fiber);
+        }
+        finally {
+            // Clean up context
+            (0, context_1.clearRenderContext)();
+        }
+    }
+    /**
+     * Find the root component from a set of components
+     *
+     * @param components - Array of components
+     * @returns Root component or null
+     */
+    findRootComponent(components) {
+        // Find the component with the shortest path (closest to root)
+        let rootComponent = null;
+        let shortestPathLength = Infinity;
+        for (const component of components) {
+            if (component.path.length < shortestPathLength) {
+                shortestPathLength = component.path.length;
+                rootComponent = component;
+            }
+        }
+        return rootComponent;
+    }
+    /**
+     * Recursively find dependent components
+     *
+     * @param currentFiber - Current fiber being examined
+     * @param changedFiber - Fiber that changed
+     * @param dependents - Set to collect dependents
+     */
+    findDependentsRecursive(currentFiber, changedFiber, dependents) {
+        // Check if current fiber depends on changed fiber
+        if (currentFiber.dependencies?.has(changedFiber)) {
+            dependents.add(currentFiber);
+        }
+        // Recursively check children
+        if (currentFiber.children) {
+            currentFiber.children.forEach((child) => {
+                this.findDependentsRecursive(child, changedFiber, dependents);
+            });
+        }
+    }
+    /**
+     * Set StateBindingManager for context dependency tracker integration
+     */
+    setStateBindingManager(stateBindingManager) {
+        this.contextDependencyTracker.setStateBindingManager(stateBindingManager);
+    }
+    /**
+     * Clone a fiber node for selective updates
+     *
+     * @param fiber - Fiber to clone
+     * @returns Cloned fiber
+     */
+    cloneFiberForUpdate(fiber) {
+        return {
+            ...fiber,
+            props: { ...fiber.props },
+            children: fiber.children
+                ? fiber.children.map((child) => this.cloneFiberForUpdate(child))
+                : [],
+            hooks: fiber.hooks ? [...fiber.hooks] : undefined,
+            state: fiber.state ? { ...fiber.state } : undefined,
+            reactiveState: fiber.reactiveState ? { ...fiber.reactiveState } : undefined,
+            dependencies: fiber.dependencies ? new Set(fiber.dependencies) : undefined,
+            dependents: fiber.dependents ? new Set(fiber.dependents) : undefined,
+        };
+    }
+}
+exports.Renderer = Renderer;