@creact-labs/creact 0.1.0 → 0.1.2

package/README.md

@@ -1,4 +1,10 @@
-# CReact — React for Infrastructure
+
+NOTE: !!! THIS IS A EXPERIMENT OF THOUGHT NOT A PRODUCTION READY PRODUCT !!!
+
+# CReact 
+
+![creact](https://i.postimg.cc/8P66GnT3/banner.jpg)
+
 
 Think of it as React's rendering model — but instead of a DOM, you render to the cloud.
 

package/dist/core/CReact.js

@@ -106,7 +106,7 @@ class CReact {
         this.renderer.setRenderScheduler(this.renderScheduler);
         this.renderer.setContextDependencyTracker(this.contextDependencyTracker);
         this.renderer.setStructuralChangeDetector(this.structuralChangeDetector);
-        this.cloudDOMBuilder.setReactiveComponents(this.stateBindingManager, this.providerOutputTracker);
+        this.cloudDOMBuilder.setReactiveComponents(this.stateBindingManager, this.providerOutputTracker, this.contextDependencyTracker);
         this.contextDependencyTracker.setStateBindingManager(this.stateBindingManager);
         // Set the context dependency tracker in useContext hook
         (0, useContext_1.setContextDependencyTracker)(this.contextDependencyTracker);
@@ -513,16 +513,20 @@ class CReact {
                 this.log('Executing post-deployment effects...');
                 // Integrate with post-deployment effects and output sync
                 const affectedFibers = await this.cloudDOMBuilder.integrateWithPostDeploymentEffects(this.lastFiberTree, cloudDOM, previousCloudDOM);
-                // REQ-7.1, 7.2, 7.3: Check if outputs actually changed (including undefined → value)
-                const hasActualChanges = this.hasActualOutputChanges(previousCloudDOM, cloudDOM);
-                // CRITICAL: If state outputs changed but no provider output bindings triggered,
-                // we still need to re-render to display updated state in the component
-                const needsReRender = hasActualChanges || affectedFibers.length > 0;
+                // CRITICAL: Only re-render if there are actually affected fibers
+                // If outputs changed but no fibers are bound to those outputs, skip re-render
+                console.log(`[BUG DEBUG] affectedFibers.length = ${affectedFibers.length}`);
+                if (affectedFibers.length > 0) {
+                    console.log(`[BUG DEBUG] affectedFibers paths:`, affectedFibers.map(f => f.path?.join('.')));
+                }
+                else {
+                    console.log('[BUG DEBUG] No affected fibers - should NOT re-render!');
+                }
+                const needsReRender = affectedFibers.length > 0;
                 if (needsReRender) {
-                    // If no fibers were affected by provider outputs, but state changed,
-                    // re-render the root component to display updated state
-                    const fibersToReRender = affectedFibers.length > 0 ? affectedFibers : [this.lastFiberTree];
-                    this.log(`Triggering re-renders for ${fibersToReRender.length} affected components (${hasActualChanges ? 'output changes detected' : 'state changes detected'})`);
+                    // Re-render only the affected components
+                    const fibersToReRender = affectedFibers;
+                    logger.info(`Triggering re-renders for ${fibersToReRender.length} affected components`);
                     // REQ-7.4, 7.5: Schedule re-renders with proper batching and deduplication
                     fibersToReRender.forEach((fiber) => {
                         this.scheduleReRender(fiber, 'output-update');
@@ -536,7 +540,8 @@ class CReact {
                     // Execute the scheduled re-renders
                     const updatedFiber = this.renderer.reRenderComponents(fibersToReRender, 'output-update');
                     // Build updated CloudDOM from re-rendered components
-                    const updatedCloudDOM = await this.cloudDOMBuilder.build(updatedFiber);
+                    // CRITICAL FIX: Pass previousCloudDOM to preserve non-re-rendered nodes
+                    const updatedCloudDOM = await this.cloudDOMBuilder.build(updatedFiber, cloudDOM);
                     // Check if the re-render produced new resources to deploy
                     const reactiveChangeSet = this.reconciler.reconcile(cloudDOM, updatedCloudDOM);
                     if ((0, Reconciler_1.hasChanges)(reactiveChangeSet)) {

package/dist/core/CloudDOMBuilder.d.ts

@@ -31,6 +31,7 @@ import { FiberNode, CloudDOMNode, OutputChange } from './types';
 import { ICloudProvider } from '../providers/ICloudProvider';
 import { StateBindingManager } from './StateBindingManager';
 import { ProviderOutputTracker } from './ProviderOutputTracker';
+import { ContextDependencyTracker } from './ContextDependencyTracker';
 /**
  * CloudDOMBuilder transforms a Fiber tree into a CloudDOM tree
  *
@@ -59,6 +60,10 @@ export declare class CloudDOMBuilder {
      * Provider output tracker for instance-output binding
      */
     private providerOutputTracker?;
+    /**
+     * Context dependency tracker for context reactivity
+     */
+    private contextDependencyTracker?;
     /**
      * Track existing nodes to handle re-render scenarios
      * Maps node ID to fiber path for duplicate detection during re-renders
@@ -98,8 +103,9 @@ export declare class CloudDOMBuilder {
      *
      * @param stateBindingManager - State binding manager instance
      * @param providerOutputTracker - Provider output tracker instance
+     * @param contextDependencyTracker - Context dependency tracker instance (optional)
      */
-    setReactiveComponents(stateBindingManager: StateBindingManager, providerOutputTracker: ProviderOutputTracker): void;
+    setReactiveComponents(stateBindingManager: StateBindingManager, providerOutputTracker: ProviderOutputTracker, contextDependencyTracker?: ContextDependencyTracker): void;
     /**
      * Build CloudDOM tree from Fiber tree
      *
@@ -109,12 +115,23 @@ export declare class CloudDOMBuilder {
      *
      * Supports async lifecycle hooks for validation and provider preparation.
      *
+     * CRITICAL FIX: Preserves nodes from previousCloudDOM that weren't re-rendered.
+     * This prevents node loss during selective re-renders (e.g., multi-environment apps).
+     *
      * REQ-01: Transform Fiber → CloudDOM
      *
      * @param fiber - Root Fiber node
+     * @param previousCloudDOM - Optional previous CloudDOM for incremental builds
      * @returns Promise resolving to array of CloudDOM nodes (top-level resources)
      */
-    build(fiber: FiberNode): Promise<CloudDOMNode[]>;
+    build(fiber: FiberNode, previousCloudDOM?: CloudDOMNode[]): Promise<CloudDOMNode[]>;
+    /**
+     * Flatten CloudDOM tree into a flat array of all nodes
+     *
+     * @param nodes - Root CloudDOM nodes
+     * @returns Flattened array of all nodes
+     */
+    private flattenCloudDOM;
     /**
      * Build CloudDOM tree with error handling for CLI/CI environments
      *
@@ -122,9 +139,10 @@ export declare class CloudDOMBuilder {
      * crashing the entire process. Useful for CI/CD pipelines.
      *
      * @param fiber - Root Fiber node
+     * @param previousCloudDOM - Optional previous CloudDOM for incremental builds
      * @returns Promise resolving to array of CloudDOM nodes, or empty array on error
      */
-    buildSafe(fiber: FiberNode): Promise<CloudDOMNode[]>;
+    buildSafe(fiber: FiberNode, previousCloudDOM?: CloudDOMNode[]): Promise<CloudDOMNode[]>;
     /**
      * Recursively collect CloudDOM nodes from Fiber tree
      *

package/dist/core/CloudDOMBuilder.js

@@ -123,10 +123,12 @@ class CloudDOMBuilder {
      *
      * @param stateBindingManager - State binding manager instance
      * @param providerOutputTracker - Provider output tracker instance
+     * @param contextDependencyTracker - Context dependency tracker instance (optional)
      */
-    setReactiveComponents(stateBindingManager, providerOutputTracker) {
+    setReactiveComponents(stateBindingManager, providerOutputTracker, contextDependencyTracker) {
         this.stateBindingManager = stateBindingManager;
         this.providerOutputTracker = providerOutputTracker;
+        this.contextDependencyTracker = contextDependencyTracker;
     }
     /**
      * Build CloudDOM tree from Fiber tree
@@ -137,12 +139,16 @@ class CloudDOMBuilder {
      *
      * Supports async lifecycle hooks for validation and provider preparation.
      *
+     * CRITICAL FIX: Preserves nodes from previousCloudDOM that weren't re-rendered.
+     * This prevents node loss during selective re-renders (e.g., multi-environment apps).
+     *
      * REQ-01: Transform Fiber → CloudDOM
      *
      * @param fiber - Root Fiber node
+     * @param previousCloudDOM - Optional previous CloudDOM for incremental builds
      * @returns Promise resolving to array of CloudDOM nodes (top-level resources)
      */
-    async build(fiber) {
+    async build(fiber, previousCloudDOM) {
         if (!fiber) {
             throw new Error('[CloudDOMBuilder] Cannot build CloudDOM from null Fiber tree');
         }
@@ -163,6 +169,17 @@ class CloudDOMBuilder {
         // Collect all CloudDOM nodes from the Fiber tree
         const cloudDOMNodes = [];
         this.collectCloudDOMNodes(fiber, cloudDOMNodes);
+        // CRITICAL FIX: If we have previous CloudDOM and this is an incremental build,
+        // preserve nodes that aren't in the current fiber tree
+        if (previousCloudDOM && previousCloudDOM.length > 0) {
+            const currentNodeIds = new Set(cloudDOMNodes.map(n => n.id));
+            // Find nodes from previous CloudDOM that aren't in current build
+            const preservedNodes = this.flattenCloudDOM(previousCloudDOM).filter(node => !currentNodeIds.has(node.id));
+            if (preservedNodes.length > 0) {
+                logger.info(`[CloudDOMBuilder] Preserving ${preservedNodes.length} nodes from previous CloudDOM that weren't re-rendered`);
+                cloudDOMNodes.push(...preservedNodes);
+            }
+        }
         // Validate collected nodes
         this.validateCloudDOMNodes(cloudDOMNodes);
         // Build parent-child relationships
@@ -188,6 +205,25 @@ class CloudDOMBuilder {
         }
         return rootNodes;
     }
+    /**
+     * Flatten CloudDOM tree into a flat array of all nodes
+     *
+     * @param nodes - Root CloudDOM nodes
+     * @returns Flattened array of all nodes
+     */
+    flattenCloudDOM(nodes) {
+        const flattened = [];
+        const walk = (nodeList) => {
+            for (const node of nodeList) {
+                flattened.push(node);
+                if (node.children && node.children.length > 0) {
+                    walk(node.children);
+                }
+            }
+        };
+        walk(nodes);
+        return flattened;
+    }
     /**
      * Build CloudDOM tree with error handling for CLI/CI environments
      *
@@ -195,11 +231,12 @@ class CloudDOMBuilder {
      * crashing the entire process. Useful for CI/CD pipelines.
      *
      * @param fiber - Root Fiber node
+     * @param previousCloudDOM - Optional previous CloudDOM for incremental builds
      * @returns Promise resolving to array of CloudDOM nodes, or empty array on error
      */
-    async buildSafe(fiber) {
+    async buildSafe(fiber, previousCloudDOM) {
         try {
-            return await this.build(fiber);
+            return await this.build(fiber, previousCloudDOM);
         }
         catch (error) {
             logger.error('Build failed:', error);
@@ -232,6 +269,7 @@ class CloudDOMBuilder {
                         cloudNode.state = { ...stateValues };
                     }
                     collected.push(cloudNode);
+                    logger.debug(`Collected CloudDOM node: ${cloudNode.id} from fiber: ${fiber.path?.join('.')}`);
                 }
                 else {
                     const nodeId = cloudNode?.id ?? 'unknown';
@@ -239,6 +277,14 @@ class CloudDOMBuilder {
                 }
             }
         }
+        else {
+            // CRITICAL FIX: If this fiber has no cloudDOMNodes but has children,
+            // it might be a component that wasn't re-executed during selective re-rendering.
+            // Log this for debugging purposes.
+            if (fiber.children && fiber.children.length > 0) {
+                logger.debug(`Fiber ${fiber.path?.join('.')} has no cloudDOMNodes but has ${fiber.children.length} children`);
+            }
+        }
         // Legacy cloudDOMNode removed - only cloudDOMNodes array is supported
         // Recursively collect from children
         if (fiber.children && fiber.children.length > 0) {
@@ -399,6 +445,10 @@ class CloudDOMBuilder {
      * @returns True if node is a valid CloudDOM node
      */
     isValidCloudNode(node) {
+        // Filter out placeholder nodes - they shouldn't be deployed
+        if (node?.id?.includes?.('__placeholder__') || node?.constructType === 'Placeholder') {
+            return false;
+        }
         return (typeof node?.id === 'string' &&
             Array.isArray(node?.path) &&
             node.path.length > 0 &&
@@ -957,24 +1007,10 @@ class CloudDOMBuilder {
      * 2. Have children that are Context.Provider components
      */
     findContextValueCreators(fiber, affectedFibers) {
-        // Check if this fiber uses outputs (has cloudDOMNodes)
-        const usesOutputs = fiber.cloudDOMNodes && fiber.cloudDOMNodes.length > 0;
-        // Check if this fiber has Context.Provider children
-        const hasProviderChild = fiber.children &&
-            fiber.children.some((child) => typeof child.type === 'function' && child.type._isContextProvider);
-        logger.info(`[Context Reactivity] Checking fiber: ${fiber.path?.join('.')}`);
-        logger.info(`  Uses outputs: ${usesOutputs}`);
-        logger.info(`  Has provider child: ${hasProviderChild}`);
-        if (usesOutputs && hasProviderChild) {
-            // This component creates context values from outputs - needs re-render
-            logger.info(`[Context Reactivity] ✓ Found context value creator: ${fiber.path?.join('.')}`);
-            logger.info(`  Has ${fiber.cloudDOMNodes?.length || 0} output dependencies`);
-            // Add to affected fibers for re-rendering
-            if (!affectedFibers.includes(fiber)) {
-                affectedFibers.push(fiber);
-            }
-        }
-        // Recursively process children
+        // IMPORTANT: Don't automatically mark context value creators as affected
+        // Only mark them if their specific outputs changed (handled by ProviderOutputTracker)
+        // This prevents unnecessary re-renders that lose context values from parent providers
+        // Recursively process children only (don't mark anything as affected)
         if (fiber.children && fiber.children.length > 0) {
             for (const child of fiber.children) {
                 this.findContextValueCreators(child, affectedFibers);

package/dist/core/Renderer.d.ts

@@ -232,6 +232,15 @@ export declare class Renderer {
      * @param currentPath - Current path in the tree
      */
     private selectiveReRenderRecursive;
+    /**
+     * Check if component should re-render by matching paths
+     * This works with cloned fibers where object identity doesn't match
+     *
+     * @param fiber - Current fiber to check
+     * @param componentsToReRender - Set of original fibers to re-render
+     * @returns True if this fiber's path matches any in the set
+     */
+    private shouldReRenderComponentByPath;
     /**
      * Determine if a component should be re-rendered
      *
@@ -247,13 +256,64 @@ export declare class Renderer {
      * @param currentPath - Current path in the tree
      */
     private reExecuteComponent;
+    /**
+     * Restore context stack for a fiber by traversing parent providers
+     * This ensures useContext() gets the correct values during re-renders
+     *
+     * @param fiber - Fiber node to restore context for
+     */
+    private restoreContextStackForFiber;
+    /**
+     * Find all ancestor context providers for a fiber
+     * Returns providers in order from root to the fiber's parent
+     *
+     * @param fiber - Fiber node to find ancestors for
+     * @returns Array of provider fibers (root to leaf order)
+     */
+    private findAncestorProviders;
+    /**
+     * Recursively search for ancestor providers
+     *
+     * @param currentFiber - Current fiber being examined
+     * @param targetFiber - Target fiber we're looking for ancestors of
+     * @param providers - Array to collect providers
+     * @param path - Current path of provider fibers
+     * @returns True if targetFiber was found in this subtree
+     */
+    private findAncestorProvidersRecursive;
     /**
      * Find the root component from a set of components
      *
+     * CRITICAL FIX: Find common ancestor instead of just shortest path
+     * When multiple components have the same path length (e.g., multi-environment apps),
+     * we need to find their common ancestor, not just pick the first one.
+     *
      * @param components - Array of components
      * @returns Root component or null
      */
     private findRootComponent;
+    /**
+     * Find common path prefix among multiple paths
+     *
+     * @param paths - Array of path arrays
+     * @returns Common prefix path
+     */
+    private findCommonPathPrefix;
+    /**
+     * Find fiber by path in the fiber tree
+     *
+     * @param fiber - Root fiber to search from
+     * @param targetPath - Path to find
+     * @returns Fiber at path or null
+     */
+    private findFiberByPath;
+    /**
+     * Find actual root by traversing up the fiber tree
+     *
+     * @param fiber - Starting fiber
+     * @returns Root fiber
+     */
+    private findActualRoot;
     /**
      * Recursively find dependent components
      *

package/dist/core/Renderer.js

@@ -472,28 +472,22 @@ class Renderer {
             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;
+            // 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');
             }
-            finally {
-                // Clear context stacks to prevent memory leaks
-                (0, context_1.clearContextStacks)();
+            // 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;
         });
     }
     /**
@@ -646,7 +640,8 @@ class Renderer {
      */
     selectiveReRenderRecursive(fiber, componentsToReRender, reason, currentPath) {
         // Check if this component needs re-rendering
-        const needsReRender = this.shouldReRenderComponent(fiber, componentsToReRender);
+        // Match by path instead of object identity (fibers are cloned)
+        const needsReRender = this.shouldReRenderComponentByPath(fiber, componentsToReRender);
         if (needsReRender) {
             // Update reactive state
             if (!fiber.reactiveState) {
@@ -672,6 +667,25 @@ class Renderer {
             });
         }
     }
+    /**
+     * Check if component should re-render by matching paths
+     * This works with cloned fibers where object identity doesn't match
+     *
+     * @param fiber - Current fiber to check
+     * @param componentsToReRender - Set of original fibers to re-render
+     * @returns True if this fiber's path matches any in the set
+     */
+    shouldReRenderComponentByPath(fiber, componentsToReRender) {
+        // Match by path (works with cloned fibers)
+        const fiberPath = fiber.path?.join('.') || '';
+        for (const componentToReRender of componentsToReRender) {
+            const targetPath = componentToReRender.path?.join('.') || '';
+            if (fiberPath === targetPath) {
+                return true;
+            }
+        }
+        return false;
+    }
     /**
      * Determine if a component should be re-rendered
      *
@@ -706,6 +720,8 @@ class Renderer {
      * @param currentPath - Current path in the tree
      */
     reExecuteComponent(fiber, currentPath) {
+        // CRITICAL: Restore context stack from parent providers before re-executing
+        this.restoreContextStackForFiber(fiber);
         // Set up rendering context
         (0, context_1.setRenderContext)(fiber, fiber.path);
         (0, useInstance_1.resetConstructCounts)(fiber);
@@ -724,23 +740,158 @@ class Renderer {
             (0, context_1.clearRenderContext)();
         }
     }
+    /**
+     * Restore context stack for a fiber by traversing parent providers
+     * This ensures useContext() gets the correct values during re-renders
+     *
+     * @param fiber - Fiber node to restore context for
+     */
+    restoreContextStackForFiber(fiber) {
+        // Find all ancestor providers up to the root
+        const ancestorProviders = this.findAncestorProviders(fiber);
+        // Push context values onto the stack in order (root to leaf)
+        for (const providerFiber of ancestorProviders) {
+            const contextId = providerFiber.type._contextId;
+            const contextValue = providerFiber.props.value;
+            (0, context_1.pushContextValue)(contextId, contextValue);
+        }
+    }
+    /**
+     * Find all ancestor context providers for a fiber
+     * Returns providers in order from root to the fiber's parent
+     *
+     * @param fiber - Fiber node to find ancestors for
+     * @returns Array of provider fibers (root to leaf order)
+     */
+    findAncestorProviders(fiber) {
+        if (!this.currentFiber) {
+            return [];
+        }
+        const providers = [];
+        this.findAncestorProvidersRecursive(this.currentFiber, fiber, providers, []);
+        return providers;
+    }
+    /**
+     * Recursively search for ancestor providers
+     *
+     * @param currentFiber - Current fiber being examined
+     * @param targetFiber - Target fiber we're looking for ancestors of
+     * @param providers - Array to collect providers
+     * @param path - Current path of provider fibers
+     * @returns True if targetFiber was found in this subtree
+     */
+    findAncestorProvidersRecursive(currentFiber, targetFiber, providers, path) {
+        // Check if we found the target by comparing paths (works with cloned fibers)
+        const currentPath = currentFiber.path?.join('.') || '';
+        const targetPath = targetFiber.path?.join('.') || '';
+        if (currentPath === targetPath) {
+            // Add all providers in the path
+            providers.push(...path);
+            return true;
+        }
+        // Check if this is a provider
+        const isProvider = typeof currentFiber.type === 'function' && currentFiber.type._isContextProvider;
+        // Search children
+        if (currentFiber.children) {
+            for (const child of currentFiber.children) {
+                // Add this fiber to path if it's a provider
+                const newPath = isProvider ? [...path, currentFiber] : path;
+                if (this.findAncestorProvidersRecursive(child, targetFiber, providers, newPath)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
     /**
      * Find the root component from a set of components
      *
+     * CRITICAL FIX: Find common ancestor instead of just shortest path
+     * When multiple components have the same path length (e.g., multi-environment apps),
+     * we need to find their common ancestor, not just pick the first one.
+     *
      * @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;
+        if (components.length === 0)
+            return null;
+        if (components.length === 1) {
+            // Single component - traverse up to find actual root
+            return this.findActualRoot(components[0]);
+        }
+        // Find common ancestor by comparing paths
+        const paths = components.map(c => c.path || []);
+        const commonPath = this.findCommonPathPrefix(paths);
+        // Find the fiber at the common path
+        return this.findFiberByPath(this.currentFiber, commonPath);
+    }
+    /**
+     * Find common path prefix among multiple paths
+     *
+     * @param paths - Array of path arrays
+     * @returns Common prefix path
+     */
+    findCommonPathPrefix(paths) {
+        if (paths.length === 0)
+            return [];
+        const shortest = paths.reduce((a, b) => a.length <= b.length ? a : b);
+        const commonPath = [];
+        for (let i = 0; i < shortest.length; i++) {
+            const segment = shortest[i];
+            if (paths.every(path => path[i] === segment)) {
+                commonPath.push(segment);
+            }
+            else {
+                break;
+            }
+        }
+        return commonPath;
+    }
+    /**
+     * Find fiber by path in the fiber tree
+     *
+     * @param fiber - Root fiber to search from
+     * @param targetPath - Path to find
+     * @returns Fiber at path or null
+     */
+    findFiberByPath(fiber, targetPath) {
+        if (!fiber)
+            return null;
+        const fiberPath = fiber.path?.join('.') || '';
+        const target = targetPath.join('.');
+        if (fiberPath === target)
+            return fiber;
+        if (fiber.children) {
+            for (const child of fiber.children) {
+                const result = this.findFiberByPath(child, targetPath);
+                if (result)
+                    return result;
+            }
+        }
+        return null;
+    }
+    /**
+     * Find actual root by traversing up the fiber tree
+     *
+     * @param fiber - Starting fiber
+     * @returns Root fiber
+     */
+    findActualRoot(fiber) {
+        // Traverse up to find the actual root
+        let current = fiber;
+        while (current.path && current.path.length > 1) {
+            // Try to find parent in currentFiber tree
+            const parentPath = current.path.slice(0, -1);
+            const parent = this.findFiberByPath(this.currentFiber, parentPath);
+            if (parent) {
+                current = parent;
+            }
+            else {
+                break;
             }
         }
-        return rootComponent;
+        return current;
     }
     /**
      * Recursively find dependent components
@@ -785,6 +936,8 @@ class Renderer {
             reactiveState: fiber.reactiveState ? { ...fiber.reactiveState } : undefined,
             dependencies: fiber.dependencies ? new Set(fiber.dependencies) : undefined,
             dependents: fiber.dependents ? new Set(fiber.dependents) : undefined,
+            cloudDOMNodes: fiber.cloudDOMNodes ? [...fiber.cloudDOMNodes] : undefined,
+            effectBindings: fiber.effectBindings ? new Map(fiber.effectBindings) : undefined,
         };
     }
 }

package/dist/core/types.d.ts

@@ -72,6 +72,8 @@ export interface FiberNode {
         boundOutputs: string[];
         registeredAt: number;
     }>;
+    /** Context stack snapshot at the time this component was rendered */
+    contextSnapshot?: Map<symbol, any[]>;
 }
 /**
  * CloudDOM Event Callbacks - Lifecycle event handlers for resources

package/dist/hooks/useInstance.js

@@ -76,16 +76,21 @@ function getProviderOutputTrackerInstance() {
  * This node won't be included in CloudDOM but allows the component to continue rendering
  * All output accesses return undefined
  *
+ * Uses the same ID generation logic as real nodes for proper reconciliation tracking
+ *
  * @internal
  */
-function createPlaceholderNode() {
+function createPlaceholderNode(construct, currentPath, key, currentFiber, props) {
+    // Generate ID using same logic as real nodes (use existing naming utilities)
+    const id = (0, naming_1.getNodeName)(construct, props, key);
+    const fullPath = [...currentPath, id];
+    const resourceId = (0, naming_1.generateResourceId)(fullPath);
     const placeholderNode = {
-        id: '__placeholder__',
-        path: ['__placeholder__'],
-        construct: class Placeholder {
-        },
-        constructType: 'Placeholder',
-        props: {},
+        id: resourceId,
+        path: fullPath,
+        construct,
+        constructType: construct.name || 'UnknownConstruct',
+        props: props,
         children: [],
         outputs: {},
     };
@@ -258,7 +263,8 @@ function useInstance(construct, props) {
         // Don't attach anything to fiber - this resource will be skipped entirely
         // Return a placeholder node that won't be included in CloudDOM
         // The proxy will return undefined for all output accesses
-        return createPlaceholderNode();
+        // Use the same ID generation logic as real nodes for proper reconciliation tracking
+        return createPlaceholderNode(construct, currentPath, key, currentFiber, restProps);
     }
     // Remove undefined values from props to match JSON serialization behavior
     // When CloudDOM is saved to backend, JSON.stringify strips undefined values
@@ -284,35 +290,9 @@ function useInstance(construct, props) {
     if (typeof componentProps.onDestroy === 'function') {
         eventCallbacks.onDestroy = componentProps.onDestroy;
     }
-    // Generate ID from key or construct type
-    // Priority: explicit key from useInstance props > component fiber key > auto-generated
-    let id;
-    if (key !== undefined) {
-        // Use explicit key if provided in useInstance props
-        id = String(key);
-    }
-    else {
-        // Auto-generate ID from construct type name (kebab-case)
-        const constructName = (0, naming_1.toKebabCase)(construct.name);
-        // Track call count for this construct type in this component
-        if (!constructCallCounts.has(currentFiber)) {
-            constructCallCounts.set(currentFiber, new Map());
-        }
-        const counts = constructCallCounts.get(currentFiber);
-        const count = counts.get(construct) || 0;
-        counts.set(construct, count + 1);
-        // Append index if multiple calls with same type
-        if (count > 0) {
-            id = `${constructName}-${count}`;
-        }
-        else {
-            id = constructName;
-        }
-        // If component has a key (from JSX), prepend it to make resources unique per component instance
-        if (currentFiber.key) {
-            id = `${currentFiber.key}-${id}`;
-        }
-    }
+    // Generate ID using getNodeName for consistency with placeholder nodes
+    // This ensures placeholder and real nodes have matching IDs for proper reconciliation
+    const id = (0, naming_1.getNodeName)(construct, restProps, key);
     // Generate full resource ID from current path
     // Example: ['registry', 'service'] + 'bucket' → 'registry.service.bucket'
     const fullPath = [...currentPath, id];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@creact-labs/creact",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "CReact - React for Infrastructure. Render JSX to CloudDOM.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,4 +84,4 @@
     "ora": "^5.4.1",
     "tsx": "^4.20.6"
   }
-}
+}