@nestjs-ssr/react 0.3.22 → 0.3.23

package/dist/client.d.mts

@@ -1,4 +1,4 @@
-export { P as PageContextProvider, a as PageProps, c as createSSRHooks, u as updatePageContext, b as useCookie, d as useCookies, e as useHeader, f as useHeaders, g as usePageContext, h as useParams, i as useQuery, j as useRequest } from './use-page-context-DXjw-66u.mjs';
+export { a as PageContextProvider, P as PageProps, c as createSSRHooks, j as updatePageContext, u as useCookie, b as useCookies, d as useHeader, e as useHeaders, f as usePageContext, g as useParams, h as useQuery, i as useRequest } from './use-page-context-CmxWHIK3.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 export { R as RenderContext } from './render-response.interface-ClWJXKL4.mjs';
@@ -67,4 +67,71 @@ declare function useNavigate(): (url: string, options?: NavigateOptions) => Prom
  */
 declare function useIsNavigating(): boolean;
 
-export { Link, type LinkProps, type NavigateOptions, NavigationProvider, navigate, useIsNavigating, useNavigate, useNavigation, useNavigationState };
+/**
+ * Shared view-component resolution used by both the initial hydration entry
+ * (`entry-client.tsx`) and client-side segment navigation (`hydrate-segment.tsx`).
+ *
+ * Components are discovered with Vite's `import.meta.glob` over every `views`
+ * directory in the project (including those colocated inside feature modules,
+ * e.g. `@/products/views/list.tsx`). The server can only communicate *which*
+ * component to hydrate by its name (`displayName` || function name), because the
+ * component instance the server renders comes from the Nest build and is never
+ * identity-equal to the Vite-bundled module. That makes the name the contract,
+ * so it must be unique across all `views` directories.
+ *
+ * This module centralizes the matching logic so both call sites stay in sync
+ * (previously they normalized filenames differently — `recipe-list` resolved on
+ * first load but failed on client navigation) and so same-name collisions across
+ * submodules surface a clear error instead of silently hydrating the wrong view.
+ */
+interface ViewModule {
+    default: React.ComponentType<any>;
+}
+type ViewModuleRegistry = Record<string, ViewModule>;
+interface ComponentEntry {
+    /** The glob key, e.g. `/src/products/views/list.tsx`. Unique per file. */
+    path: string;
+    component: React.ComponentType<any>;
+    /** `displayName` || function name, if any. */
+    name?: string;
+    /** Filename without extension, e.g. `recipe-list`. */
+    filename?: string;
+    /** Filename converted to PascalCase, e.g. `RecipeList`. */
+    normalizedFilename?: string;
+}
+/**
+ * Build the list of resolvable view components from a glob module registry.
+ * Entry files and modules without a default export are excluded.
+ */
+declare function buildComponentRegistry(modules: ViewModuleRegistry): ComponentEntry[];
+interface ResolveOptions {
+    /**
+     * Called when a name resolves to more than one distinct component (a
+     * collision across `views` directories). Receives the requested name and the
+     * sorted list of colliding file paths. Defaults to `console.error`.
+     */
+    onCollision?: (name: string, paths: string[]) => void;
+}
+/**
+ * Resolve a view component by the name the server sent for hydration.
+ *
+ * Matching is tiered by precedence (mirrors the server's `displayName || name`
+ * identifier); the first non-empty tier wins:
+ *   1. exact `displayName` / function name
+ *   2. normalized (PascalCase) filename, e.g. "recipe-list.tsx" -> "RecipeList"
+ *   3. raw filename (case-insensitive)
+ *   4. minified anonymous defaults ("default", "default_1", ...)
+ *
+ * Tiering matters: a submodule view `recipe-list.tsx` (displayName "SpecialsList")
+ * normalizes to "RecipeList", so a flat match would tie it with the *real*
+ * `RecipeList` and mis-resolve. By preferring the exact-name tier, the explicit
+ * `displayName` always wins over an incidental filename collision.
+ *
+ * A collision is only reported when the *winning* tier itself contains more than
+ * one distinct component — i.e. the name is genuinely ambiguous (e.g. two files
+ * both `displayName = "RecipeList"`). In that case `onCollision` is invoked and
+ * resolution falls back to the first match by sorted path for determinism.
+ */
+declare function resolveViewComponent(name: string, modules: ViewModuleRegistry, options?: ResolveOptions): React.ComponentType<any> | undefined;
+
+export { type ComponentEntry, Link, type LinkProps, type NavigateOptions, NavigationProvider, type ResolveOptions, type ViewModule, type ViewModuleRegistry, buildComponentRegistry, navigate, resolveViewComponent, useIsNavigating, useNavigate, useNavigation, useNavigationState };

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-export { P as PageContextProvider, a as PageProps, c as createSSRHooks, u as updatePageContext, b as useCookie, d as useCookies, e as useHeader, f as useHeaders, g as usePageContext, h as useParams, i as useQuery, j as useRequest } from './use-page-context-Bo3Z0m-_.js';
+export { a as PageContextProvider, P as PageProps, c as createSSRHooks, j as updatePageContext, u as useCookie, b as useCookies, d as useHeader, e as useHeaders, f as usePageContext, g as useParams, h as useQuery, i as useRequest } from './use-page-context-CUV31oda.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 export { R as RenderContext } from './render-response.interface-ClWJXKL4.js';
@@ -67,4 +67,71 @@ declare function useNavigate(): (url: string, options?: NavigateOptions) => Prom
  */
 declare function useIsNavigating(): boolean;
 
-export { Link, type LinkProps, type NavigateOptions, NavigationProvider, navigate, useIsNavigating, useNavigate, useNavigation, useNavigationState };
+/**
+ * Shared view-component resolution used by both the initial hydration entry
+ * (`entry-client.tsx`) and client-side segment navigation (`hydrate-segment.tsx`).
+ *
+ * Components are discovered with Vite's `import.meta.glob` over every `views`
+ * directory in the project (including those colocated inside feature modules,
+ * e.g. `@/products/views/list.tsx`). The server can only communicate *which*
+ * component to hydrate by its name (`displayName` || function name), because the
+ * component instance the server renders comes from the Nest build and is never
+ * identity-equal to the Vite-bundled module. That makes the name the contract,
+ * so it must be unique across all `views` directories.
+ *
+ * This module centralizes the matching logic so both call sites stay in sync
+ * (previously they normalized filenames differently — `recipe-list` resolved on
+ * first load but failed on client navigation) and so same-name collisions across
+ * submodules surface a clear error instead of silently hydrating the wrong view.
+ */
+interface ViewModule {
+    default: React.ComponentType<any>;
+}
+type ViewModuleRegistry = Record<string, ViewModule>;
+interface ComponentEntry {
+    /** The glob key, e.g. `/src/products/views/list.tsx`. Unique per file. */
+    path: string;
+    component: React.ComponentType<any>;
+    /** `displayName` || function name, if any. */
+    name?: string;
+    /** Filename without extension, e.g. `recipe-list`. */
+    filename?: string;
+    /** Filename converted to PascalCase, e.g. `RecipeList`. */
+    normalizedFilename?: string;
+}
+/**
+ * Build the list of resolvable view components from a glob module registry.
+ * Entry files and modules without a default export are excluded.
+ */
+declare function buildComponentRegistry(modules: ViewModuleRegistry): ComponentEntry[];
+interface ResolveOptions {
+    /**
+     * Called when a name resolves to more than one distinct component (a
+     * collision across `views` directories). Receives the requested name and the
+     * sorted list of colliding file paths. Defaults to `console.error`.
+     */
+    onCollision?: (name: string, paths: string[]) => void;
+}
+/**
+ * Resolve a view component by the name the server sent for hydration.
+ *
+ * Matching is tiered by precedence (mirrors the server's `displayName || name`
+ * identifier); the first non-empty tier wins:
+ *   1. exact `displayName` / function name
+ *   2. normalized (PascalCase) filename, e.g. "recipe-list.tsx" -> "RecipeList"
+ *   3. raw filename (case-insensitive)
+ *   4. minified anonymous defaults ("default", "default_1", ...)
+ *
+ * Tiering matters: a submodule view `recipe-list.tsx` (displayName "SpecialsList")
+ * normalizes to "RecipeList", so a flat match would tie it with the *real*
+ * `RecipeList` and mis-resolve. By preferring the exact-name tier, the explicit
+ * `displayName` always wins over an incidental filename collision.
+ *
+ * A collision is only reported when the *winning* tier itself contains more than
+ * one distinct component — i.e. the name is genuinely ambiguous (e.g. two files
+ * both `displayName = "RecipeList"`). In that case `onCollision` is invoked and
+ * resolution falls back to the first match by sorted path for determinism.
+ */
+declare function resolveViewComponent(name: string, modules: ViewModuleRegistry, options?: ResolveOptions): React.ComponentType<any> | undefined;
+
+export { type ComponentEntry, Link, type LinkProps, type NavigateOptions, NavigationProvider, type ResolveOptions, type ViewModule, type ViewModuleRegistry, buildComponentRegistry, navigate, resolveViewComponent, useIsNavigating, useNavigate, useNavigation, useNavigationState };

package/dist/client.js

@@ -258,6 +258,74 @@ var useHeaders = defaultHooks.useHeaders;
 var useHeader = defaultHooks.useHeader;
 var useCookies = defaultHooks.useCookies;
 var useCookie = defaultHooks.useCookie;
+
+// src/react/navigation/resolve-component.ts
+function toPascalCase(str) {
+  return str.replace(/(^|-)([a-z])/g, (_, __, c) => c.toUpperCase());
+}
+__name(toPascalCase, "toPascalCase");
+function isEntryFile(filename) {
+  return /^entry-/.test(filename);
+}
+__name(isEntryFile, "isEntryFile");
+function buildComponentRegistry(modules) {
+  return Object.entries(modules).filter(([path, module]) => {
+    const filename = path.split("/").pop() ?? "";
+    if (isEntryFile(filename)) return false;
+    return module?.default !== void 0;
+  }).map(([path, module]) => {
+    const component = module.default;
+    const name = component.displayName || component.name || void 0;
+    const filename = path.split("/").pop()?.replace(/\.tsx?$/, "");
+    const normalizedFilename = filename ? toPascalCase(filename) : void 0;
+    return {
+      path,
+      component,
+      name,
+      filename,
+      normalizedFilename
+    };
+  });
+}
+__name(buildComponentRegistry, "buildComponentRegistry");
+function reportCollision(name, paths) {
+  console.error(`[nestjs-ssr] Multiple view components resolve to the name "${name}":
+` + paths.map((p) => `  - ${p}`).join("\n") + `
+View component names must be unique across all "views" directories. Give the components distinct names by setting a unique \`displayName\` (or renaming the files). Falling back to the first match by path.`);
+}
+__name(reportCollision, "reportCollision");
+function resolveViewComponent(name, modules, options = {}) {
+  const registry = buildComponentRegistry(modules);
+  const lower = name.toLowerCase();
+  const tiers = [
+    registry.filter((c) => c.name === name),
+    registry.filter((c) => c.normalizedFilename === name),
+    registry.filter((c) => c.filename === lower)
+  ];
+  for (const tier of tiers) {
+    if (tier.length === 0) continue;
+    const distinct = new Set(tier.map((c) => c.component));
+    if (distinct.size > 1) {
+      const sorted = tier.slice().sort((a, b) => a.path.localeCompare(b.path));
+      (options.onCollision ?? reportCollision)(name, sorted.map((c) => c.path));
+      return sorted[0].component;
+    }
+    return tier[0].component;
+  }
+  if (/^default(_\d+)?$/.test(name)) {
+    if (registry.length === 1) {
+      return registry[0].component;
+    }
+    const indexMatch = name.match(/^default_(\d+)$/);
+    const index = indexMatch ? parseInt(indexMatch[1], 10) - 1 : 0;
+    const defaults = registry.filter((c) => c.name === "default").sort((a, b) => a.path.localeCompare(b.path));
+    return defaults[index]?.component;
+  }
+  return void 0;
+}
+__name(resolveViewComponent, "resolveViewComponent");
+
+// src/react/navigation/hydrate-segment.tsx
 var rootRegistry = /* @__PURE__ */ new WeakMap();
 function hydrateSegment(outlet, componentName, props, layouts) {
   const modules = window.__MODULES__;
@@ -265,7 +333,7 @@ function hydrateSegment(outlet, componentName, props, layouts) {
     console.warn("[navigation] Module registry not available for segment hydration. Make sure entry-client.tsx exports window.__MODULES__.");
     return;
   }
-  const ViewComponent = resolveComponent(componentName, modules);
+  const ViewComponent = resolveViewComponent(componentName, modules);
   if (!ViewComponent) {
     console.warn(`[navigation] Component "${componentName}" not found for hydration. Available components: ` + Object.keys(modules).map((path) => {
       const c = modules[path].default;
@@ -300,7 +368,7 @@ function composeWithLayouts(ViewComponent, props, layouts, context, modules) {
   let result = /* @__PURE__ */ React2__default.default.createElement(ViewComponent, props);
   for (let i = layouts.length - 1; i >= 0; i--) {
     const { name: layoutName, props: layoutProps } = layouts[i];
-    const Layout = resolveComponent(layoutName, modules);
+    const Layout = resolveViewComponent(layoutName, modules);
     if (!Layout) {
       console.warn(`[navigation] Layout "${layoutName}" not found for hydration`);
       continue;
@@ -317,41 +385,6 @@ function composeWithLayouts(ViewComponent, props, layouts, context, modules) {
   return result;
 }
 __name(composeWithLayouts, "composeWithLayouts");
-function resolveComponent(name, modules) {
-  const componentMap = Object.entries(modules).filter(([path, module]) => {
-    const filename = path.split("/").pop();
-    if (filename === "entry-client.tsx" || filename === "entry-server.tsx") {
-      return false;
-    }
-    return module.default !== void 0;
-  }).map(([path, module]) => {
-    const component = module.default;
-    const componentName = component.displayName || component.name;
-    const filename = path.split("/").pop()?.replace(".tsx", "");
-    const normalizedFilename = filename ? filename.charAt(0).toUpperCase() + filename.slice(1) : void 0;
-    return {
-      component,
-      name: componentName,
-      filename,
-      normalizedFilename
-    };
-  });
-  let match = componentMap.find((c) => c.name === name || c.normalizedFilename === name || c.filename === name.toLowerCase());
-  if (!match && /^default(_\d+)?$/.test(name)) {
-    if (componentMap.length === 1) {
-      match = componentMap[0];
-    } else {
-      const indexMatch = name.match(/^default_(\d+)$/);
-      const index = indexMatch ? parseInt(indexMatch[1], 10) - 1 : 0;
-      const defaultComponents = componentMap.filter((c) => c.name === "default").sort((a, b) => (a.filename || "").localeCompare(b.filename || ""));
-      if (defaultComponents[index]) {
-        match = defaultComponents[index];
-      }
-    }
-  }
-  return match?.component;
-}
-__name(resolveComponent, "resolveComponent");
 
 // src/react/navigation/navigate.ts
 var setNavigationState = null;
@@ -579,8 +612,10 @@ __name(useIsNavigating, "useIsNavigating");
 exports.Link = Link;
 exports.NavigationProvider = NavigationProvider;
 exports.PageContextProvider = PageContextProvider;
+exports.buildComponentRegistry = buildComponentRegistry;
 exports.createSSRHooks = createSSRHooks;
 exports.navigate = navigate;
+exports.resolveViewComponent = resolveViewComponent;
 exports.updatePageContext = updatePageContext;
 exports.useCookie = useCookie;
 exports.useCookies = useCookies;

package/dist/client.mjs

@@ -252,6 +252,74 @@ var useHeaders = defaultHooks.useHeaders;
 var useHeader = defaultHooks.useHeader;
 var useCookies = defaultHooks.useCookies;
 var useCookie = defaultHooks.useCookie;
+
+// src/react/navigation/resolve-component.ts
+function toPascalCase(str) {
+  return str.replace(/(^|-)([a-z])/g, (_, __, c) => c.toUpperCase());
+}
+__name(toPascalCase, "toPascalCase");
+function isEntryFile(filename) {
+  return /^entry-/.test(filename);
+}
+__name(isEntryFile, "isEntryFile");
+function buildComponentRegistry(modules) {
+  return Object.entries(modules).filter(([path, module]) => {
+    const filename = path.split("/").pop() ?? "";
+    if (isEntryFile(filename)) return false;
+    return module?.default !== void 0;
+  }).map(([path, module]) => {
+    const component = module.default;
+    const name = component.displayName || component.name || void 0;
+    const filename = path.split("/").pop()?.replace(/\.tsx?$/, "");
+    const normalizedFilename = filename ? toPascalCase(filename) : void 0;
+    return {
+      path,
+      component,
+      name,
+      filename,
+      normalizedFilename
+    };
+  });
+}
+__name(buildComponentRegistry, "buildComponentRegistry");
+function reportCollision(name, paths) {
+  console.error(`[nestjs-ssr] Multiple view components resolve to the name "${name}":
+` + paths.map((p) => `  - ${p}`).join("\n") + `
+View component names must be unique across all "views" directories. Give the components distinct names by setting a unique \`displayName\` (or renaming the files). Falling back to the first match by path.`);
+}
+__name(reportCollision, "reportCollision");
+function resolveViewComponent(name, modules, options = {}) {
+  const registry = buildComponentRegistry(modules);
+  const lower = name.toLowerCase();
+  const tiers = [
+    registry.filter((c) => c.name === name),
+    registry.filter((c) => c.normalizedFilename === name),
+    registry.filter((c) => c.filename === lower)
+  ];
+  for (const tier of tiers) {
+    if (tier.length === 0) continue;
+    const distinct = new Set(tier.map((c) => c.component));
+    if (distinct.size > 1) {
+      const sorted = tier.slice().sort((a, b) => a.path.localeCompare(b.path));
+      (options.onCollision ?? reportCollision)(name, sorted.map((c) => c.path));
+      return sorted[0].component;
+    }
+    return tier[0].component;
+  }
+  if (/^default(_\d+)?$/.test(name)) {
+    if (registry.length === 1) {
+      return registry[0].component;
+    }
+    const indexMatch = name.match(/^default_(\d+)$/);
+    const index = indexMatch ? parseInt(indexMatch[1], 10) - 1 : 0;
+    const defaults = registry.filter((c) => c.name === "default").sort((a, b) => a.path.localeCompare(b.path));
+    return defaults[index]?.component;
+  }
+  return void 0;
+}
+__name(resolveViewComponent, "resolveViewComponent");
+
+// src/react/navigation/hydrate-segment.tsx
 var rootRegistry = /* @__PURE__ */ new WeakMap();
 function hydrateSegment(outlet, componentName, props, layouts) {
   const modules = window.__MODULES__;
@@ -259,7 +327,7 @@ function hydrateSegment(outlet, componentName, props, layouts) {
     console.warn("[navigation] Module registry not available for segment hydration. Make sure entry-client.tsx exports window.__MODULES__.");
     return;
   }
-  const ViewComponent = resolveComponent(componentName, modules);
+  const ViewComponent = resolveViewComponent(componentName, modules);
   if (!ViewComponent) {
     console.warn(`[navigation] Component "${componentName}" not found for hydration. Available components: ` + Object.keys(modules).map((path) => {
       const c = modules[path].default;
@@ -294,7 +362,7 @@ function composeWithLayouts(ViewComponent, props, layouts, context, modules) {
   let result = /* @__PURE__ */ React2.createElement(ViewComponent, props);
   for (let i = layouts.length - 1; i >= 0; i--) {
     const { name: layoutName, props: layoutProps } = layouts[i];
-    const Layout = resolveComponent(layoutName, modules);
+    const Layout = resolveViewComponent(layoutName, modules);
     if (!Layout) {
       console.warn(`[navigation] Layout "${layoutName}" not found for hydration`);
       continue;
@@ -311,41 +379,6 @@ function composeWithLayouts(ViewComponent, props, layouts, context, modules) {
   return result;
 }
 __name(composeWithLayouts, "composeWithLayouts");
-function resolveComponent(name, modules) {
-  const componentMap = Object.entries(modules).filter(([path, module]) => {
-    const filename = path.split("/").pop();
-    if (filename === "entry-client.tsx" || filename === "entry-server.tsx") {
-      return false;
-    }
-    return module.default !== void 0;
-  }).map(([path, module]) => {
-    const component = module.default;
-    const componentName = component.displayName || component.name;
-    const filename = path.split("/").pop()?.replace(".tsx", "");
-    const normalizedFilename = filename ? filename.charAt(0).toUpperCase() + filename.slice(1) : void 0;
-    return {
-      component,
-      name: componentName,
-      filename,
-      normalizedFilename
-    };
-  });
-  let match = componentMap.find((c) => c.name === name || c.normalizedFilename === name || c.filename === name.toLowerCase());
-  if (!match && /^default(_\d+)?$/.test(name)) {
-    if (componentMap.length === 1) {
-      match = componentMap[0];
-    } else {
-      const indexMatch = name.match(/^default_(\d+)$/);
-      const index = indexMatch ? parseInt(indexMatch[1], 10) - 1 : 0;
-      const defaultComponents = componentMap.filter((c) => c.name === "default").sort((a, b) => (a.filename || "").localeCompare(b.filename || ""));
-      if (defaultComponents[index]) {
-        match = defaultComponents[index];
-      }
-    }
-  }
-  return match?.component;
-}
-__name(resolveComponent, "resolveComponent");
 
 // src/react/navigation/navigate.ts
 var setNavigationState = null;
@@ -570,4 +603,4 @@ function useIsNavigating() {
 }
 __name(useIsNavigating, "useIsNavigating");
 
-export { Link, NavigationProvider, PageContextProvider, createSSRHooks, navigate, updatePageContext, useCookie, useCookies, useHeader, useHeaders, useIsNavigating, useNavigate, useNavigation, useNavigationState, usePageContext, useParams, useQuery, useRequest };
+export { Link, NavigationProvider, PageContextProvider, buildComponentRegistry, createSSRHooks, navigate, resolveViewComponent, updatePageContext, useCookie, useCookies, useHeader, useHeaders, useIsNavigating, useNavigate, useNavigation, useNavigationState, usePageContext, useParams, useQuery, useRequest };

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 export { C as ContextFactory, E as ErrorPageDevelopment, a as ErrorPageProduction, R as RenderConfig, b as RenderInterceptor, c as RenderModule, d as RenderService, S as SSRMode, e as StreamingErrorHandler, T as TemplateParserService } from './index-CF5JpFZh.mjs';
 import React, { ComponentType, ReactNode } from 'react';
-import { a as PageProps } from './use-page-context-DXjw-66u.mjs';
-export { P as PageContextProvider, c as createSSRHooks, b as useCookie, d as useCookies, e as useHeader, f as useHeaders, g as usePageContext, h as useParams, i as useQuery, j as useRequest } from './use-page-context-DXjw-66u.mjs';
+import { P as PageProps } from './use-page-context-CmxWHIK3.mjs';
+export { a as PageContextProvider, c as createSSRHooks, u as useCookie, b as useCookies, d as useHeader, e as useHeaders, f as usePageContext, g as useParams, h as useQuery, i as useRequest } from './use-page-context-CmxWHIK3.mjs';
 import { R as RenderContext, H as HeadData, a as RenderResponse } from './render-response.interface-ClWJXKL4.mjs';
 import '@nestjs/common';
 import 'http';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { C as ContextFactory, E as ErrorPageDevelopment, a as ErrorPageProduction, R as RenderConfig, b as RenderInterceptor, c as RenderModule, d as RenderService, S as SSRMode, e as StreamingErrorHandler, T as TemplateParserService } from './index-Cd0UvVmK.js';
 import React, { ComponentType, ReactNode } from 'react';
-import { a as PageProps } from './use-page-context-Bo3Z0m-_.js';
-export { P as PageContextProvider, c as createSSRHooks, b as useCookie, d as useCookies, e as useHeader, f as useHeaders, g as usePageContext, h as useParams, i as useQuery, j as useRequest } from './use-page-context-Bo3Z0m-_.js';
+import { P as PageProps } from './use-page-context-CUV31oda.js';
+export { a as PageContextProvider, c as createSSRHooks, u as useCookie, b as useCookies, d as useHeader, e as useHeaders, f as usePageContext, g as useParams, h as useQuery, i as useRequest } from './use-page-context-CUV31oda.js';
 import { R as RenderContext, H as HeadData, a as RenderResponse } from './render-response.interface-ClWJXKL4.js';
 import '@nestjs/common';
 import 'http';

package/dist/templates/entry-client.tsx

@@ -5,17 +5,14 @@ import { hydrateRoot } from 'react-dom/client';
 import {
   PageContextProvider,
   NavigationProvider,
+  buildComponentRegistry,
+  resolveViewComponent,
 } from '@nestjs-ssr/react/client';
 
 const componentName = window.__COMPONENT_NAME__;
 const initialProps = window.__INITIAL_STATE__ || {};
 const renderContext = window.__CONTEXT__ || {};
 
-/** Convert kebab-case filename to PascalCase (e.g., "login-page" → "LoginPage") */
-function toPascalCase(str: string): string {
-  return str.replace(/(^|-)([a-z])/g, (_, __, c: string) => c.toUpperCase());
-}
-
 // 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', {
@@ -25,75 +22,26 @@ const layoutModules = import.meta.glob('@/views/layout.tsx', {
 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
+// Auto-import all view components using Vite's glob feature.
+// Match any `views` directory under the source root (`@`), so views colocated
+// inside feature modules (e.g. `@/products/views/list.tsx`) are discovered too,
+// not just the top-level `@/views` folder. Exclude entry-* files in any views dir.
 // @ts-ignore - Vite-specific API
 const modules: Record<string, { default: React.ComponentType<any> }> =
-  import.meta.glob(['@/views/**/*.tsx', '!@/views/entry-*.tsx'], {
+  import.meta.glob(['@/**/views/**/*.tsx', '!@/**/views/entry-*.tsx'], {
     eager: true,
   });
 
 // Export modules globally for segment hydration after client-side navigation
 window.__MODULES__ = modules;
 
-// Build a map of components with their metadata
-// Filter out entry files and modules without default exports
-const componentMap = Object.entries(modules)
-  .filter(([path, module]) => {
-    // Skip entry-client and entry-server files
-    const filename = path.split('/').pop();
-    if (filename === 'entry-client.tsx' || filename === 'entry-server.tsx') {
-      return false;
-    }
-    // Only include modules with a default export
-    return module.default !== undefined;
-  })
-  .map(([path, module]) => {
-    const component = module.default;
-    const name = component.displayName || component.name;
-    const filename = path.split('/').pop()?.replace('.tsx', '');
-    const normalizedFilename = filename ? toPascalCase(filename) : undefined;
-
-    return { path, component, name, filename, normalizedFilename };
-  });
+// Build the component registry once (used below for layout lookups).
+const componentMap = buildComponentRegistry(modules);
 
-// Find the component by matching in this order:
-// 1. Exact match by displayName or function name
-// 2. Match by normalized filename (e.g., "home.tsx" -> "Home")
-// 3. For minified names (default_N), match the Nth component with name "default"
-// 4. If only one component exists, use it (regardless of name)
-let ViewComponent: React.ComponentType<any> | undefined;
-
-// Try exact name match first
-ViewComponent = componentMap.find(
-  (c) =>
-    c.name === componentName ||
-    c.normalizedFilename === componentName ||
-    c.filename === componentName.toLowerCase(),
-)?.component;
-
-// If no match found and component name looks like a generic/minified name (default, default_1, etc.)
-if (!ViewComponent && /^default(_\d+)?$/.test(componentName)) {
-  // If there's only one component, use it regardless of name
-  if (componentMap.length === 1) {
-    ViewComponent = componentMap[0].component;
-  } else {
-    // Handle minified anonymous functions: default_1, default_2, etc.
-    // Extract the index from the name (default_1 -> 1, default_2 -> 2, default -> 0)
-    const match = componentName.match(/^default_(\d+)$/);
-    const index = match ? parseInt(match[1], 10) - 1 : 0;
-
-    // Get all components with name "default" (anonymous functions), sorted by path for consistency
-    const defaultComponents = componentMap
-      .filter((c) => c.name === 'default')
-      .sort((a, b) => a.path.localeCompare(b.path));
-
-    // Try to match by index
-    if (defaultComponents[index]) {
-      ViewComponent = defaultComponents[index].component;
-    }
-  }
-}
+// Resolve the page component the server rendered. The shared resolver matches by
+// displayName/name, then normalized (PascalCase) filename, then minified default
+// exports — and logs a clear error if the name collides across views directories.
+const ViewComponent = resolveViewComponent(componentName, modules);
 
 if (!ViewComponent) {
   const availableComponents = Object.entries(modules)

package/dist/{use-page-context-Bo3Z0m-_.d.ts → use-page-context-CUV31oda.d.ts}

@@ -279,4 +279,4 @@ declare const useHeader: (name: string) => string | undefined;
 declare const useCookies: () => Record<string, string>;
 declare const useCookie: (name: string) => string | undefined;
 
-export { PageContextProvider as P, type PageProps as a, useCookie as b, createSSRHooks as c, useCookies as d, useHeader as e, useHeaders as f, usePageContext as g, useParams as h, useQuery as i, useRequest as j, updatePageContext as u };
+export { type PageProps as P, PageContextProvider as a, useCookies as b, createSSRHooks as c, useHeader as d, useHeaders as e, usePageContext as f, useParams as g, useQuery as h, useRequest as i, updatePageContext as j, useCookie as u };

package/dist/{use-page-context-DXjw-66u.d.mts → use-page-context-CmxWHIK3.d.mts}

@@ -279,4 +279,4 @@ declare const useHeader: (name: string) => string | undefined;
 declare const useCookies: () => Record<string, string>;
 declare const useCookie: (name: string) => string | undefined;
 
-export { PageContextProvider as P, type PageProps as a, useCookie as b, createSSRHooks as c, useCookies as d, useHeader as e, useHeaders as f, usePageContext as g, useParams as h, useQuery as i, useRequest as j, updatePageContext as u };
+export { type PageProps as P, PageContextProvider as a, useCookies as b, createSSRHooks as c, useHeader as d, useHeaders as e, usePageContext as f, useParams as g, useQuery as h, useRequest as i, updatePageContext as j, useCookie as u };

package/package.json

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

package/src/templates/entry-client.tsx

@@ -5,17 +5,14 @@ import { hydrateRoot } from 'react-dom/client';
 import {
   PageContextProvider,
   NavigationProvider,
+  buildComponentRegistry,
+  resolveViewComponent,
 } from '@nestjs-ssr/react/client';
 
 const componentName = window.__COMPONENT_NAME__;
 const initialProps = window.__INITIAL_STATE__ || {};
 const renderContext = window.__CONTEXT__ || {};
 
-/** Convert kebab-case filename to PascalCase (e.g., "login-page" → "LoginPage") */
-function toPascalCase(str: string): string {
-  return str.replace(/(^|-)([a-z])/g, (_, __, c: string) => c.toUpperCase());
-}
-
 // 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', {
@@ -25,75 +22,26 @@ const layoutModules = import.meta.glob('@/views/layout.tsx', {
 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
+// Auto-import all view components using Vite's glob feature.
+// Match any `views` directory under the source root (`@`), so views colocated
+// inside feature modules (e.g. `@/products/views/list.tsx`) are discovered too,
+// not just the top-level `@/views` folder. Exclude entry-* files in any views dir.
 // @ts-ignore - Vite-specific API
 const modules: Record<string, { default: React.ComponentType<any> }> =
-  import.meta.glob(['@/views/**/*.tsx', '!@/views/entry-*.tsx'], {
+  import.meta.glob(['@/**/views/**/*.tsx', '!@/**/views/entry-*.tsx'], {
     eager: true,
   });
 
 // Export modules globally for segment hydration after client-side navigation
 window.__MODULES__ = modules;
 
-// Build a map of components with their metadata
-// Filter out entry files and modules without default exports
-const componentMap = Object.entries(modules)
-  .filter(([path, module]) => {
-    // Skip entry-client and entry-server files
-    const filename = path.split('/').pop();
-    if (filename === 'entry-client.tsx' || filename === 'entry-server.tsx') {
-      return false;
-    }
-    // Only include modules with a default export
-    return module.default !== undefined;
-  })
-  .map(([path, module]) => {
-    const component = module.default;
-    const name = component.displayName || component.name;
-    const filename = path.split('/').pop()?.replace('.tsx', '');
-    const normalizedFilename = filename ? toPascalCase(filename) : undefined;
-
-    return { path, component, name, filename, normalizedFilename };
-  });
+// Build the component registry once (used below for layout lookups).
+const componentMap = buildComponentRegistry(modules);
 
-// Find the component by matching in this order:
-// 1. Exact match by displayName or function name
-// 2. Match by normalized filename (e.g., "home.tsx" -> "Home")
-// 3. For minified names (default_N), match the Nth component with name "default"
-// 4. If only one component exists, use it (regardless of name)
-let ViewComponent: React.ComponentType<any> | undefined;
-
-// Try exact name match first
-ViewComponent = componentMap.find(
-  (c) =>
-    c.name === componentName ||
-    c.normalizedFilename === componentName ||
-    c.filename === componentName.toLowerCase(),
-)?.component;
-
-// If no match found and component name looks like a generic/minified name (default, default_1, etc.)
-if (!ViewComponent && /^default(_\d+)?$/.test(componentName)) {
-  // If there's only one component, use it regardless of name
-  if (componentMap.length === 1) {
-    ViewComponent = componentMap[0].component;
-  } else {
-    // Handle minified anonymous functions: default_1, default_2, etc.
-    // Extract the index from the name (default_1 -> 1, default_2 -> 2, default -> 0)
-    const match = componentName.match(/^default_(\d+)$/);
-    const index = match ? parseInt(match[1], 10) - 1 : 0;
-
-    // Get all components with name "default" (anonymous functions), sorted by path for consistency
-    const defaultComponents = componentMap
-      .filter((c) => c.name === 'default')
-      .sort((a, b) => a.path.localeCompare(b.path));
-
-    // Try to match by index
-    if (defaultComponents[index]) {
-      ViewComponent = defaultComponents[index].component;
-    }
-  }
-}
+// Resolve the page component the server rendered. The shared resolver matches by
+// displayName/name, then normalized (PascalCase) filename, then minified default
+// exports — and logs a clear error if the name collides across views directories.
+const ViewComponent = resolveViewComponent(componentName, modules);
 
 if (!ViewComponent) {
   const availableComponents = Object.entries(modules)