@ecopages/react 0.2.0-alpha.52 → 0.2.0-alpha.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/react",
-  "version": "0.2.0-alpha.52",
+  "version": "0.2.0-alpha.53",
   "description": "React integration for Ecopages",
   "keywords": [
     "ecopages",
@@ -69,14 +69,14 @@
     "directory": "packages/integrations/react"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.52",
+    "@ecopages/core": "0.2.0-alpha.53",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "react": "^19",
     "react-dom": "^19"
   },
   "dependencies": {
-    "@ecopages/file-system": "0.2.0-alpha.52",
+    "@ecopages/file-system": "0.2.0-alpha.53",
     "@ecopages/logger": "^0.2.3",
     "@mdx-js/esbuild": "^3.1.1",
     "@mdx-js/mdx": "^3.1.1",

package/src/react-hmr-strategy.d.ts

@@ -100,6 +100,9 @@ export declare class ReactHmrStrategy extends HmrStrategy {
     private isRouteTemplate;
     private resolveTemplateExtension;
     private ownsWatchedEntrypoint;
+    private configContainsFile;
+    private pageModuleRequiresLayoutRefresh;
+    private hasLayoutOwnedDependencyTarget;
     /**
      * Determines if the file is a React/MDX entrypoint that's registered for HMR.
      *

package/src/react-hmr-strategy.js

@@ -7,6 +7,7 @@ import { Logger } from "@ecopages/logger";
 import { injectHmrHandler } from "./utils/hmr-scripts.js";
 import { createClientGraphBoundaryPlugin } from "./utils/client-graph-boundary-plugin.js";
 import { collectPageDeclaredModules, collectPageDeclaredModulesFromModule } from "./utils/declared-modules.js";
+import { someInConfigTree } from "./utils/component-config-traversal.js";
 import { createReactMdxLoaderPlugin } from "./utils/react-mdx-loader-plugin.js";
 import { getReactClientGraphAllowSpecifiers } from "./utils/react-runtime-alias-map.js";
 const appLogger = new Logger("[ReactHmrStrategy]");
@@ -103,6 +104,32 @@ class ReactHmrStrategy extends HmrStrategy {
   ownsWatchedEntrypoint(filePath) {
     return this.pageMetadataCache.ownsEntrypoint(filePath);
   }
+  configContainsFile(config, filePath) {
+    const resolvedFilePath = path.resolve(filePath);
+    return someInConfigTree(config, (node) => {
+      if (!node.__eco?.file) {
+        return false;
+      }
+      return path.resolve(node.__eco.file) === resolvedFilePath;
+    });
+  }
+  pageModuleRequiresLayoutRefresh(pageModule, filePath) {
+    return [pageModule.default?.config, pageModule.config].some((config) => {
+      return this.configContainsFile(config?.layout?.config, filePath);
+    });
+  }
+  async hasLayoutOwnedDependencyTarget(changedFilePath, requestedTargets) {
+    for (const target of requestedTargets) {
+      if (!this.isPageEntrypoint(target.entrypointPath)) {
+        continue;
+      }
+      const pageModule = await this.importNodePageModule(target.entrypointPath);
+      if (this.pageModuleRequiresLayoutRefresh(pageModule, changedFilePath)) {
+        return true;
+      }
+    }
+    return false;
+  }
   /**
    * Determines if the file is a React/MDX entrypoint that's registered for HMR.
    *
@@ -257,6 +284,7 @@ class ReactHmrStrategy extends HmrStrategy {
       return { type: "none" };
     }
     const isLayout = this.isLayoutFile(_filePath);
+    const isChangedPageEntrypoint = this.isPageEntrypoint(_filePath);
     if (isLayout) {
       appLogger.debug(`Detected layout file change: ${_filePath}`);
     }
@@ -268,21 +296,39 @@ class ReactHmrStrategy extends HmrStrategy {
     const dependencyHits = this.context.getEntrypointDependencyGraph().getDependencyEntrypoints(_filePath);
     const hasDependencyHits = dependencyHits.size > 0;
     const affectedEntrypoints = /* @__PURE__ */ new Map();
+    let hasOwnedLayoutDependencyHit = false;
+    let layoutOwnedPageTargets = [];
+    let hasLayoutOwnedRequestedTarget = false;
     if (hasDependencyHits && !changedEntrypointOutput) {
       for (const entrypoint of dependencyHits) {
         const outputUrl = watchedFiles.get(entrypoint);
         if (outputUrl && this.ownsWatchedEntrypoint(entrypoint)) {
           affectedEntrypoints.set(entrypoint, outputUrl);
+          continue;
+        }
+        if (this.isLayoutFile(entrypoint) && this.ownsWatchedEntrypoint(entrypoint)) {
+          hasOwnedLayoutDependencyHit = true;
         }
       }
-      if (affectedEntrypoints.size === 0) {
+      if (affectedEntrypoints.size === 0 && !hasOwnedLayoutDependencyHit) {
         appLogger.debug(`Dependency hits found but none map to React-owned watched entrypoints`);
         return { type: "none" };
       }
     }
-    const requestedTargets = changedEntrypointOutput ? [{ entrypointPath: _filePath, outputUrl: changedEntrypointOutput }] : hasDependencyHits ? Array.from(affectedEntrypoints, ([entrypointPath, outputUrl]) => ({ entrypointPath, outputUrl })) : Array.from(watchedFiles, ([entrypointPath, outputUrl]) => ({ entrypointPath, outputUrl }));
+    if (changedEntrypointOutput && !isLayout && !isChangedPageEntrypoint) {
+      layoutOwnedPageTargets = await this.collectReactPageBuildTargets();
+      hasLayoutOwnedRequestedTarget = await this.hasLayoutOwnedDependencyTarget(
+        _filePath,
+        layoutOwnedPageTargets
+      );
+    }
+    const requestedTargets = changedEntrypointOutput ? hasLayoutOwnedRequestedTarget ? [{ entrypointPath: _filePath, outputUrl: changedEntrypointOutput }, ...layoutOwnedPageTargets] : [{ entrypointPath: _filePath, outputUrl: changedEntrypointOutput }] : hasOwnedLayoutDependencyHit ? await this.collectReactPageBuildTargets() : hasDependencyHits ? Array.from(affectedEntrypoints, ([entrypointPath, outputUrl]) => ({ entrypointPath, outputUrl })) : Array.from(watchedFiles, ([entrypointPath, outputUrl]) => ({ entrypointPath, outputUrl }));
     const groupedPageTargets = await this.resolveBuildTargets(requestedTargets, _filePath);
     const { pageTargets, nonPageTargets } = this.partitionBuildTargets(requestedTargets, groupedPageTargets);
+    if (!changedEntrypointOutput) {
+      hasLayoutOwnedRequestedTarget = await this.hasLayoutOwnedDependencyTarget(_filePath, requestedTargets);
+    }
+    const requiresLayoutRefresh = isLayout || hasOwnedLayoutDependencyHit || hasLayoutOwnedRequestedTarget;
     const updates = [];
     const requestedOutputUrls = new Set(requestedTargets.map((target) => target.outputUrl));
     if (pageTargets.length > 1) {
@@ -313,7 +359,7 @@ class ReactHmrStrategy extends HmrStrategy {
       }
     }
     if (updates.length > 0) {
-      if (isLayout) {
+      if (requiresLayoutRefresh) {
         appLogger.debug(`Layout update detected, sending layout-update event`);
         return {
           type: "broadcast",