@nestjs-ssr/react 0.3.3 → 0.3.5

package/src/templates/entry-client.tsx

@@ -1,4 +1,5 @@
 /// <reference types="@nestjs-ssr/react/global" />
+
 import React, { StrictMode } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import {
@@ -10,6 +11,15 @@ const componentName = window.__COMPONENT_NAME__;
 const initialProps = window.__INITIAL_STATE__ || {};
 const renderContext = window.__CONTEXT__ || {};
 
+// Auto-discover root layout using Vite's glob import (must match server-side discovery)
+// @ts-ignore - Vite-specific API
+const layoutModules = import.meta.glob('@/views/layout.tsx', {
+  eager: true,
+}) as Record<string, { default: React.ComponentType<any> }>;
+
+const layoutPath = Object.keys(layoutModules)[0];
+const RootLayout = layoutPath ? layoutModules[layoutPath].default : null;
+
 // Auto-import all view components using Vite's glob feature
 // Exclude entry-client.tsx and entry-server.tsx from the glob
 // @ts-ignore - Vite-specific API
@@ -105,46 +115,68 @@ function hasLayout(
 }
 
 /**
- * Compose a component with its layout (and nested layouts if any)
- * This must match the server-side composition in entry-server.tsx
+ * Compose a component with its layout (and nested layouts if any).
+ * This must match the server-side composition in entry-server.tsx.
+ *
+ * The layouts array is ordered [RootLayout, ControllerLayout, MethodLayout] (outer to inner).
+ * We iterate in REVERSE order because wrapping happens inside-out:
+ * - Start with Page
+ * - Wrap with innermost layout first (MethodLayout)
+ * - Then wrap with ControllerLayout
+ * - Finally wrap with RootLayout (outermost)
  */
 function composeWithLayout(
   ViewComponent: React.ComponentType<any>,
   props: any,
+  context?: any,
+  layouts: Array<{ layout: React.ComponentType<any>; props?: any }> = [],
 ): React.ReactElement {
-  const element = <ViewComponent {...props} />;
-
-  // Check if component has a layout
-  if (!hasLayout(ViewComponent)) {
-    return element;
-  }
-
-  // Collect all layouts in the chain (innermost to outermost)
-  const layoutChain: Array<{
-    Layout: React.ComponentType<any>;
-    layoutProps: any;
-  }> = [];
-  let currentComponent: any = ViewComponent;
-
-  while (hasLayout(currentComponent)) {
-    layoutChain.push({
-      Layout: currentComponent.layout,
-      layoutProps: currentComponent.layoutProps || {},
-    });
-    currentComponent = currentComponent.layout;
+  // Start with the page component
+  let result = <ViewComponent {...props} />;
+
+  // If no layouts passed, check if component has its own layout chain
+  if (layouts.length === 0 && hasLayout(ViewComponent)) {
+    let currentComponent: any = ViewComponent;
+    while (hasLayout(currentComponent)) {
+      layouts.push({
+        layout: currentComponent.layout,
+        props: currentComponent.layoutProps || {},
+      });
+      currentComponent = currentComponent.layout;
+    }
   }
 
-  // Wrap the element with layouts from innermost to outermost
-  let result = element;
-  for (const { Layout, layoutProps } of layoutChain) {
-    result = <Layout layoutProps={layoutProps}>{result}</Layout>;
+  // Wrap with each layout in REVERSE order (innermost to outermost)
+  // This produces the correct nesting: RootLayout > ControllerLayout > Page
+  // Must match server-side wrapping with data-layout and data-outlet attributes
+  for (let i = layouts.length - 1; i >= 0; i--) {
+    const { layout: Layout, props: layoutProps } = layouts[i];
+    const layoutName = Layout.displayName || Layout.name || 'Layout';
+    result = (
+      <div data-layout={layoutName}>
+        <Layout context={context} layoutProps={layoutProps}>
+          <div data-outlet={layoutName}>{result}</div>
+        </Layout>
+      </div>
+    );
   }
 
   return result;
 }
 
+// Build layouts array - use RootLayout if it exists (matching server behavior)
+const layouts: Array<{ layout: React.ComponentType<any>; props?: any }> = [];
+if (RootLayout) {
+  layouts.push({ layout: RootLayout, props: {} });
+}
+
 // Compose the component with its layout (if any)
-const composedElement = composeWithLayout(ViewComponent, initialProps);
+const composedElement = composeWithLayout(
+  ViewComponent,
+  initialProps,
+  renderContext,
+  layouts,
+);
 
 // Wrap with providers to make context and navigation state available via hooks
 const wrappedElement = (
@@ -160,8 +192,18 @@ hydrateRoot(
   <StrictMode>{wrappedElement}</StrictMode>,
 );
 
+// Track if initial hydration is complete to ignore false popstate events
+let hydrationComplete = false;
+requestAnimationFrame(() => {
+  hydrationComplete = true;
+});
+
 // Handle browser back/forward navigation
 window.addEventListener('popstate', async () => {
+  // Ignore popstate events that fire before hydration is complete
+  // (some browsers fire popstate on initial page load)
+  if (!hydrationComplete) return;
+
   // Dynamically import navigate to avoid circular dependency with hydrate-segment
   const { navigate } = await import('@nestjs-ssr/react/client');
   // Re-navigate to the current URL (browser already updated location)

package/src/templates/entry-server.tsx

@@ -25,6 +25,13 @@ export function getRootLayout(): React.ComponentType<any> | null {
  * Layouts are passed from the RenderInterceptor based on decorators.
  * Each layout is wrapped with data-layout and data-outlet attributes
  * for client-side navigation segment swapping.
+ *
+ * The layouts array is ordered [RootLayout, ControllerLayout, MethodLayout] (outer to inner).
+ * We iterate in REVERSE order because wrapping happens inside-out:
+ * - Start with Page
+ * - Wrap with innermost layout first (MethodLayout)
+ * - Then wrap with ControllerLayout
+ * - Finally wrap with RootLayout (outermost)
  */
 function composeWithLayouts(
   ViewComponent: React.ComponentType<any>,
@@ -35,11 +42,12 @@ function composeWithLayouts(
   // Start with the page component
   let result = <ViewComponent {...props} />;
 
-  // Wrap with each layout in the chain (outermost to innermost in array)
-  // We iterate normally because layouts are already in correct order from interceptor
+  // Wrap with each layout in REVERSE order (innermost to outermost)
+  // This produces the correct nesting: RootLayout > ControllerLayout > Page
   // Pass context to layouts so they can access path, params, etc. for navigation
   // Each layout gets data-layout attribute and children are wrapped in data-outlet
-  for (const { layout: Layout, props: layoutProps } of layouts) {
+  for (let i = layouts.length - 1; i >= 0; i--) {
+    const { layout: Layout, props: layoutProps } = layouts[i];
     const layoutName = Layout.displayName || Layout.name || 'Layout';
     result = (
       <div data-layout={layoutName}>
@@ -80,19 +88,28 @@ export function renderComponent(
 }
 
 /**
- * Render just the page component for segment navigation.
- * No layout wrappers - the layout already exists on the client.
+ * Render a segment for client-side navigation.
+ * Includes any layouts below the swap target (e.g., nested layouts).
+ * The swap target's outlet will receive this rendered content.
  */
 export function renderSegment(
   ViewComponent: React.ComponentType<any>,
   data: any,
 ) {
-  const { data: pageData, __context: context } = data;
+  const { data: pageData, __context: context, __layouts: layouts } = data;
+
+  // Compose with filtered layouts (layouts below the swap target)
+  const composedElement = composeWithLayouts(
+    ViewComponent,
+    pageData,
+    layouts,
+    context,
+  );
 
-  // Render just the page component, no layout wrappers
+  // Wrap with PageContextProvider to make context available via hooks
   const element = (
     <PageContextProvider context={context}>
-      <ViewComponent {...pageData} />
+      {composedElement}
     </PageContextProvider>
   );