@nestjs-ssr/react 0.3.2 → 0.3.4

package/dist/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
@@ -111,40 +121,53 @@ function hasLayout(
 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 the chain
+  // Must match server-side wrapping with data-layout and data-outlet attributes
+  for (const { layout: Layout, props: layoutProps } of layouts) {
+    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 = (

package/dist/templates/entry-server.tsx

@@ -2,6 +2,24 @@ import React from 'react';
 import { renderToString, renderToPipeableStream } from 'react-dom/server';
 import { PageContextProvider } from '@nestjs-ssr/react/client';
 
+// Auto-discover root layout using Vite's glob import
+// This eagerly loads layout if it exists, null otherwise
+// @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;
+
+/**
+ * Get the root layout component.
+ * Used by RenderService in production when dynamic import isn't available.
+ */
+export function getRootLayout(): React.ComponentType<any> | null {
+  return RootLayout;
+}
+
 /**
  * Compose a component with its layouts from the interceptor.
  * Layouts are passed from the RenderInterceptor based on decorators.

package/etc/react.api.md

@@ -1,262 +1,250 @@
-## API Report File for "@nestjs-ssr/react"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-import { CallHandler } from '@nestjs/common';
-import { ComponentType } from 'react';
-import { DynamicModule } from '@nestjs/common';
-import { ExecutionContext } from '@nestjs/common';
-import { NestInterceptor } from '@nestjs/common';
-import { Observable } from 'rxjs';
-import { default as React_2 } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-import { Reflector } from '@nestjs/core';
-import { Response as Response_2 } from 'express';
-import { ViteDevServer } from 'vite';
-
-// Warning: (ae-forgotten-export) The symbol "ErrorPageDevelopmentProps" needs to be exported by the entry point index.d.ts
-//
-// @public
-export function ErrorPageDevelopment({
-  error,
-  viewPath,
-  phase,
-}: ErrorPageDevelopmentProps): react_jsx_runtime.JSX.Element;
-
-// @public
-export function ErrorPageProduction(): react_jsx_runtime.JSX.Element;
-
-// @public
-export interface HeadData {
-  bodyAttributes?: Record<string, string>;
-  canonical?: string;
-  description?: string;
-  htmlAttributes?: Record<string, string>;
-  jsonLd?: Array<Record<string, any>>;
-  keywords?: string;
-  links?: Array<{
-    rel: string;
-    href: string;
-    as?: string;
-    type?: string;
-    crossorigin?: string;
-    [key: string]: any;
-  }>;
-  meta?: Array<{
-    name?: string;
-    property?: string;
-    content: string;
-    [key: string]: any;
-  }>;
-  ogDescription?: string;
-  ogImage?: string;
-  ogTitle?: string;
-  scripts?: Array<{
-    src?: string;
-    async?: boolean;
-    defer?: boolean;
-    type?: string;
-    innerHTML?: string;
-    [key: string]: any;
-  }>;
-  title?: string;
-}
-
-// @public
-export function Layout(
-  layout: LayoutComponent<any>,
-  options?: LayoutDecoratorOptions,
-): ClassDecorator;
-
-// @public
-export type LayoutComponent<TProps = {}> = ComponentType<LayoutProps<TProps>>;
-
-// @public
-export interface LayoutDecoratorOptions {
-  props?: Record<string, any>;
-  skipRoot?: boolean;
-}
-
-// @public
-export interface LayoutProps<TProps = {}> {
-  children: ReactNode;
-  context?: RenderContext;
-  head?: HeadData;
-  layoutProps?: TProps;
-}
-
-// @public
-export interface PageComponentWithLayout<TPageProps = {}, TLayoutProps = {}> {
-  (props: TPageProps): ReactNode;
-  layout?: LayoutComponent<TLayoutProps>;
-  layoutProps?: TLayoutProps;
-}
-
-// @public
-export type PageProps<TProps = {}> = TProps & {
-  head?: HeadData;
-  context: RenderContext;
-};
-
-// Warning: (ae-forgotten-export) The symbol "RenderReturnType" needs to be exported by the entry point index.d.ts
-// Warning: (ae-forgotten-export) The symbol "ExtractComponentData" needs to be exported by the entry point index.d.ts
-//
-// @public
-export function Render<T extends React_2.ComponentType<any>>(
-  component: T,
-  options?: RenderOptions,
-): <
-  TMethod extends (
-    ...args: any[]
-  ) =>
-    | RenderReturnType<ExtractComponentData<T>>
-    | Promise<RenderReturnType<ExtractComponentData<T>>>,
->(
-  target: any,
-  propertyKey: string | symbol,
-  descriptor: TypedPropertyDescriptor<TMethod>,
-) => TypedPropertyDescriptor<TMethod> | void;
-
-// @public
-export interface RenderConfig {
-  defaultHead?: HeadData;
-  // Warning: (ae-forgotten-export) The symbol "ErrorPageDevelopmentProps$1" needs to be exported by the entry point index.d.ts
-  errorPageDevelopment?: ComponentType<ErrorPageDevelopmentProps$1>;
-  errorPageProduction?: ComponentType;
-  mode?: SSRMode;
-  template?: string;
-  timeout?: number;
-  // Warning: (ae-forgotten-export) The symbol "ViteConfig" needs to be exported by the entry point index.d.ts
-  vite?: ViteConfig;
-}
-
-// @public
-export interface RenderContext {
-  // (undocumented)
-  [key: string]: any;
-  // (undocumented)
-  acceptLanguage?: string;
-  // (undocumented)
-  cookies?: Record<string, string>;
-  // (undocumented)
-  headers?: Record<string, string>;
-  // (undocumented)
-  method: string;
-  // (undocumented)
-  params: Record<string, string>;
-  // (undocumented)
-  path: string;
-  // (undocumented)
-  query: Record<string, string | string[]>;
-  // (undocumented)
-  referer?: string;
-  // (undocumented)
-  url: string;
-  // (undocumented)
-  userAgent?: string;
-}
-
-// @public (undocumented)
-export class RenderInterceptor implements NestInterceptor {
-  constructor(reflector: Reflector, renderService: RenderService);
-  // (undocumented)
-  intercept(context: ExecutionContext, next: CallHandler): Observable<any>;
-}
-
-// @public (undocumented)
-export class RenderModule {
-  static register(config?: RenderConfig): DynamicModule;
-  static registerAsync(options: {
-    imports?: any[];
-    inject?: any[];
-    useFactory: (...args: any[]) => Promise<RenderConfig> | RenderConfig;
-  }): DynamicModule;
-}
-
-// @public
-export interface RenderOptions {
-  layout?: LayoutComponent<any> | false | null;
-  layoutProps?: Record<string, any>;
-}
-
-// @public
-export interface RenderResponse<T = any> {
-  head?: HeadData;
-  layoutProps?: Record<string, any>;
-  props: T;
-}
-
-// @public (undocumented)
-export class RenderService {
-  constructor(
-    templateParser: TemplateParserService,
-    streamingErrorHandler: StreamingErrorHandler,
-    ssrMode?: SSRMode,
-    defaultHead?: HeadData | undefined,
-    customTemplate?: string,
-  );
-  getRootLayout(): Promise<any | null>;
-  render(
-    viewComponent: any,
-    data?: any,
-    res?: Response_2,
-    head?: HeadData,
-  ): Promise<string | void>;
-  // (undocumented)
-  setViteServer(vite: ViteDevServer): void;
-}
-
-// @public
-export type SSRMode = 'string' | 'stream';
-
-// @public
-export class StreamingErrorHandler {
-  constructor(
-    errorPageDevelopment?:
-      | ComponentType<ErrorPageDevelopmentProps$1>
-      | undefined,
-    errorPageProduction?: ComponentType | undefined,
-  );
-  handleShellError(
-    error: Error,
-    res: Response_2,
-    viewPath: string,
-    isDevelopment: boolean,
-  ): void;
-  handleStreamError(error: Error, viewPath: string): void;
-}
-
-// @public
-export class TemplateParserService {
-  buildHeadTags(head?: HeadData): string;
-  buildInlineScripts(
-    data: any,
-    context: any,
-    componentName: string,
-    layouts?: Array<{
-      layout: any;
-      props?: any;
-    }>,
-  ): string;
-  getClientScriptTag(isDevelopment: boolean, manifest?: any): string;
-  getStylesheetTags(isDevelopment: boolean, manifest?: any): string;
-  // Warning: (ae-forgotten-export) The symbol "TemplateParts" needs to be exported by the entry point index.d.ts
-  parseTemplate(html: string): TemplateParts;
-}
-
-// @public
-export function usePageContext(): RenderContext;
-
-// @public
-export function useParams(): Record<string, string>;
-
-// @public
-export function useQuery(): Record<string, string | string[]>;
-
-// @public
-export function useUserAgent(): string | undefined;
-
-// (No @packageDocumentation comment for this package)
-```
+## API Report File for "@nestjs-ssr/react"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { CallHandler } from '@nestjs/common';
+import { ComponentType } from 'react';
+import { DynamicModule } from '@nestjs/common';
+import { ExecutionContext } from '@nestjs/common';
+import { NestInterceptor } from '@nestjs/common';
+import { Observable } from 'rxjs';
+import { default as React_2 } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { Reflector } from '@nestjs/core';
+import { Response as Response_2 } from 'express';
+import { ViteDevServer } from 'vite';
+
+// @public
+export function createSSRHooks<T extends RenderContext = RenderContext>(): {
+    usePageContext: () => T;
+    useParams: () => Record<string, string>;
+    useQuery: () => Record<string, string | string[]>;
+    useRequest: () => T;
+    useHeaders: () => Record<string, string>;
+    useHeader: (name: string) => string | undefined;
+    useCookies: () => Record<string, string>;
+    useCookie: (name: string) => string | undefined;
+};
+
+// Warning: (ae-forgotten-export) The symbol "ErrorPageDevelopmentProps" needs to be exported by the entry point index.d.ts
+//
+// @public
+export function ErrorPageDevelopment({ error, viewPath, phase, }: ErrorPageDevelopmentProps): react_jsx_runtime.JSX.Element;
+
+// @public
+export function ErrorPageProduction(): react_jsx_runtime.JSX.Element;
+
+// @public
+export interface HeadData {
+    bodyAttributes?: Record<string, string>;
+    canonical?: string;
+    description?: string;
+    htmlAttributes?: Record<string, string>;
+    jsonLd?: Array<Record<string, any>>;
+    keywords?: string;
+    links?: Array<{
+        rel: string;
+        href: string;
+        as?: string;
+        type?: string;
+        crossorigin?: string;
+        [key: string]: any;
+    }>;
+    meta?: Array<{
+        name?: string;
+        property?: string;
+        content: string;
+        [key: string]: any;
+    }>;
+    ogDescription?: string;
+    ogImage?: string;
+    ogTitle?: string;
+    scripts?: Array<{
+        src?: string;
+        async?: boolean;
+        defer?: boolean;
+        type?: string;
+        innerHTML?: string;
+        [key: string]: any;
+    }>;
+    title?: string;
+}
+
+// @public
+export function Layout(layout: LayoutComponent<any>, options?: LayoutDecoratorOptions): ClassDecorator;
+
+// @public
+export type LayoutComponent<TProps = {}> = ComponentType<LayoutProps<TProps>>;
+
+// @public
+export interface LayoutDecoratorOptions {
+    props?: Record<string, any>;
+    skipRoot?: boolean;
+}
+
+// @public
+export interface LayoutProps<TProps = {}> {
+    children: ReactNode;
+    context?: RenderContext;
+    head?: HeadData;
+    layoutProps?: TProps;
+}
+
+// @public
+export interface PageComponentWithLayout<TPageProps = {}, TLayoutProps = {}> {
+    (props: TPageProps): ReactNode;
+    layout?: LayoutComponent<TLayoutProps>;
+    layoutProps?: TLayoutProps;
+}
+
+// @public
+export function PageContextProvider({ context: initialContext, children, isSegment, }: {
+    context: RenderContext;
+    children: React_2.ReactNode;
+    isSegment?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+// @public
+export type PageProps<TProps = {}> = TProps & {
+    head?: HeadData;
+};
+
+// Warning: (ae-forgotten-export) The symbol "RenderReturnType" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "ExtractComponentData" needs to be exported by the entry point index.d.ts
+//
+// @public
+export function Render<T extends React_2.ComponentType<any>>(component: T, options?: RenderOptions): <TMethod extends (...args: any[]) => RenderReturnType<ExtractComponentData<T>> | Promise<RenderReturnType<ExtractComponentData<T>>>>(target: any, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<TMethod>) => TypedPropertyDescriptor<TMethod> | void;
+
+// @public
+export interface RenderConfig {
+    allowedCookies?: string[];
+    allowedHeaders?: string[];
+    defaultHead?: HeadData;
+    // Warning: (ae-forgotten-export) The symbol "ErrorPageDevelopmentProps$1" needs to be exported by the entry point index.d.ts
+    errorPageDevelopment?: ComponentType<ErrorPageDevelopmentProps$1>;
+    errorPageProduction?: ComponentType;
+    mode?: SSRMode;
+    template?: string;
+    timeout?: number;
+    // Warning: (ae-forgotten-export) The symbol "ViteConfig" needs to be exported by the entry point index.d.ts
+    vite?: ViteConfig;
+}
+
+// @public
+export interface RenderContext {
+    // (undocumented)
+    method: string;
+    // (undocumented)
+    params: Record<string, string>;
+    // (undocumented)
+    path: string;
+    // (undocumented)
+    query: Record<string, string | string[]>;
+    // (undocumented)
+    url: string;
+}
+
+// @public (undocumented)
+export class RenderInterceptor implements NestInterceptor {
+    constructor(reflector: Reflector, renderService: RenderService, allowedHeaders?: string[] | undefined, allowedCookies?: string[] | undefined);
+    // (undocumented)
+    intercept(context: ExecutionContext, next: CallHandler): Observable<any>;
+}
+
+// @public (undocumented)
+export class RenderModule {
+    static forRoot(config?: RenderConfig): DynamicModule;
+    static forRootAsync(options: {
+        imports?: any[];
+        inject?: any[];
+        useFactory: (...args: any[]) => Promise<RenderConfig> | RenderConfig;
+    }): DynamicModule;
+    // @deprecated (undocumented)
+    static register(config?: RenderConfig): DynamicModule;
+    // @deprecated (undocumented)
+    static registerAsync(options: {
+        imports?: any[];
+        inject?: any[];
+        useFactory: (...args: any[]) => Promise<RenderConfig> | RenderConfig;
+    }): DynamicModule;
+}
+
+// @public
+export interface RenderOptions {
+    layout?: LayoutComponent<any> | false | null;
+    layoutProps?: Record<string, any>;
+}
+
+// @public
+export interface RenderResponse<T = any> {
+    head?: HeadData;
+    layoutProps?: Record<string, any>;
+    props: T;
+}
+
+// @public
+export class RenderService {
+    // Warning: (ae-forgotten-export) The symbol "StringRenderer" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "StreamRenderer" needs to be exported by the entry point index.d.ts
+    constructor(stringRenderer: StringRenderer, streamRenderer: StreamRenderer, ssrMode?: SSRMode, defaultHead?: HeadData | undefined, customTemplate?: string);
+    getRootLayout(): Promise<any | null>;
+    render(viewComponent: any, data?: any, res?: Response_2, head?: HeadData): Promise<string | void>;
+    // Warning: (ae-forgotten-export) The symbol "SegmentResponse" needs to be exported by the entry point index.d.ts
+    renderSegment(viewComponent: any, data: any, swapTarget: string, head?: HeadData): Promise<SegmentResponse>;
+    // (undocumented)
+    setViteServer(vite: ViteDevServer): void;
+}
+
+// @public
+export type SSRMode = 'string' | 'stream';
+
+// @public
+export class StreamingErrorHandler {
+    constructor(errorPageDevelopment?: ComponentType<ErrorPageDevelopmentProps$1> | undefined, errorPageProduction?: ComponentType | undefined);
+    handleShellError(error: Error, res: Response_2, viewPath: string, isDevelopment: boolean): void;
+    handleStreamError(error: Error, viewPath: string): void;
+}
+
+// @public
+export class TemplateParserService {
+    buildHeadTags(head?: HeadData): string;
+    buildInlineScripts(data: any, context: any, componentName: string, layouts?: Array<{
+        layout: any;
+        props?: any;
+    }>): string;
+    getClientScriptTag(isDevelopment: boolean, manifest?: any): string;
+    getStylesheetTags(isDevelopment: boolean, manifest?: any): string;
+    // Warning: (ae-forgotten-export) The symbol "TemplateParts" needs to be exported by the entry point index.d.ts
+    parseTemplate(html: string): TemplateParts;
+}
+
+// @public (undocumented)
+export const useCookie: (name: string) => string | undefined;
+
+// @public (undocumented)
+export const useCookies: () => Record<string, string>;
+
+// @public (undocumented)
+export const useHeader: (name: string) => string | undefined;
+
+// @public (undocumented)
+export const useHeaders: () => Record<string, string>;
+
+// @public (undocumented)
+export const usePageContext: () => RenderContext;
+
+// @public (undocumented)
+export const useParams: () => Record<string, string>;
+
+// @public (undocumented)
+export const useQuery: () => Record<string, string | string[]>;
+
+// @public (undocumented)
+export const useRequest: () => RenderContext;
+
+// (No @packageDocumentation comment for this package)
+
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nestjs-ssr/react",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "React SSR for NestJS that respects Clean Architecture. Proper DI, SOLID principles, clear separation of concerns.",
   "keywords": [
     "nestjs",