@nestjs-ssr/react 0.1.5 → 0.1.6

package/dist/render/index.d.mts

@@ -1,4 +1,4 @@
-export { E as ErrorPageDevelopment, f as ErrorPageProduction, b as RenderInterceptor, R as RenderModule, a as RenderService, S as StreamingErrorHandler, T as TemplateParserService } from '../index-Bptct1Q3.mjs';
+export { E as ErrorPageDevelopment, f as ErrorPageProduction, b as RenderInterceptor, R as RenderModule, a as RenderService, S as StreamingErrorHandler, T as TemplateParserService } from '../index-Bpzo1KfR.mjs';
 import '@nestjs/common';
 import 'react';
 import 'vite';

package/dist/render/index.d.ts

@@ -1,4 +1,4 @@
-export { E as ErrorPageDevelopment, f as ErrorPageProduction, b as RenderInterceptor, R as RenderModule, a as RenderService, S as StreamingErrorHandler, T as TemplateParserService } from '../index-Bptct1Q3.js';
+export { E as ErrorPageDevelopment, f as ErrorPageProduction, b as RenderInterceptor, R as RenderModule, a as RenderService, S as StreamingErrorHandler, T as TemplateParserService } from '../index-Bpzo1KfR.js';
 import '@nestjs/common';
 import 'react';
 import 'vite';

package/dist/render/index.js

@@ -109,7 +109,7 @@ exports.TemplateParserService = class TemplateParserService {
   * This library handles all edge cases including escaping dangerous characters,
   * functions, dates, regexes, and prevents prototype pollution.
   */
-  buildInlineScripts(data, context, componentPath) {
+  buildInlineScripts(data, context, componentName) {
     return `<script>
 window.__INITIAL_STATE__ = ${serialize__default.default(data, {
       isJSON: true
@@ -117,7 +117,7 @@ window.__INITIAL_STATE__ = ${serialize__default.default(data, {
 window.__CONTEXT__ = ${serialize__default.default(context, {
       isJSON: true
     })};
-window.__COMPONENT_PATH__ = ${serialize__default.default(componentPath, {
+window.__COMPONENT_NAME__ = ${serialize__default.default(componentName, {
       isJSON: true
     })};
 </script>`;
@@ -427,12 +427,28 @@ exports.RenderService = class _RenderService {
   serverManifest = null;
   isDevelopment;
   ssrMode;
+  entryServerPath;
+  entryClientPath;
   constructor(templateParser, streamingErrorHandler, ssrMode, defaultHead) {
     this.templateParser = templateParser;
     this.streamingErrorHandler = streamingErrorHandler;
     this.defaultHead = defaultHead;
     this.isDevelopment = process.env.NODE_ENV !== "production";
     this.ssrMode = ssrMode || process.env.SSR_MODE || "string";
+    const absoluteServerPath = path.join(__dirname, "/templates/entry-server.tsx");
+    const relativeServerPath = path.relative(process.cwd(), absoluteServerPath);
+    if (relativeServerPath.startsWith("..")) {
+      this.entryServerPath = absoluteServerPath;
+    } else {
+      this.entryServerPath = "/" + relativeServerPath.replace(/\\/g, "/");
+    }
+    const absoluteClientPath = path.join(__dirname, "/templates/entry-client.tsx");
+    const relativeClientPath = path.relative(process.cwd(), absoluteClientPath);
+    if (relativeClientPath.startsWith("..")) {
+      this.entryClientPath = absoluteClientPath;
+    } else {
+      this.entryClientPath = "/" + relativeClientPath.replace(/\\/g, "/");
+    }
     let templatePath;
     if (this.isDevelopment) {
       const packageTemplatePaths = [
@@ -484,15 +500,15 @@ exports.RenderService = class _RenderService {
   /**
   * Main render method that routes to string or stream mode
   */
-  async render(viewPath, data = {}, res, head) {
+  async render(viewComponent, data = {}, res, head) {
     const mergedHead = this.mergeHead(this.defaultHead, head);
     if (this.ssrMode === "stream") {
       if (!res) {
         throw new Error("Response object is required for streaming SSR mode. Pass res as third parameter.");
       }
-      return this.renderToStream(viewPath, data, res, mergedHead);
+      return this.renderToStream(viewComponent, data, res, mergedHead);
     }
-    return this.renderToString(viewPath, data, mergedHead);
+    return this.renderToString(viewComponent, data, mergedHead);
   }
   /**
   * Merge default head with page-specific head
@@ -519,7 +535,7 @@ exports.RenderService = class _RenderService {
   /**
   * Traditional string-based SSR using renderToString
   */
-  async renderToString(viewPath, data = {}, head) {
+  async renderToString(viewComponent, data = {}, head) {
     const startTime = Date.now();
     try {
       let template = this.template;
@@ -528,7 +544,7 @@ exports.RenderService = class _RenderService {
       }
       let renderModule;
       if (this.vite) {
-        renderModule = await this.vite.ssrLoadModule("/src/entry-server.tsx");
+        renderModule = await this.vite.ssrLoadModule(this.entryServerPath);
       } else {
         if (this.serverManifest) {
           const manifestEntry = Object.entries(this.serverManifest).find(([key, value]) => value.isEntry && key.includes("entry-server"));
@@ -544,7 +560,8 @@ exports.RenderService = class _RenderService {
         }
       }
       const { data: pageData, __context: context } = data;
-      const appHtml = await renderModule.renderComponent(viewPath, data);
+      const appHtml = await renderModule.renderComponent(viewComponent, data);
+      const componentName = viewComponent.displayName || viewComponent.name || "Component";
       const initialStateScript = `
         <script>
           window.__INITIAL_STATE__ = ${serialize__default.default(pageData, {
@@ -553,7 +570,7 @@ exports.RenderService = class _RenderService {
           window.__CONTEXT__ = ${serialize__default.default(context, {
         isJSON: true
       })};
-          window.__COMPONENT_PATH__ = ${serialize__default.default(viewPath, {
+          window.__COMPONENT_NAME__ = ${serialize__default.default(componentName, {
         isJSON: true
       })};
         </script>
@@ -561,7 +578,7 @@ exports.RenderService = class _RenderService {
       let clientScript = "";
       let styles = "";
       if (this.vite) {
-        clientScript = `<script type="module" src="/src/entry-client.tsx"></script>`;
+        clientScript = `<script type="module" src="${this.entryClientPath}"></script>`;
         styles = "";
       } else {
         if (this.manifest) {
@@ -591,7 +608,8 @@ exports.RenderService = class _RenderService {
       html = html.replace("<!--head-meta-->", headTags);
       if (this.isDevelopment) {
         const duration = Date.now() - startTime;
-        this.logger.log(`[SSR] ${viewPath} rendered in ${duration}ms (string mode)`);
+        const componentName2 = typeof viewComponent === "function" ? viewComponent.name : String(viewComponent);
+        this.logger.log(`[SSR] ${componentName2} rendered in ${duration}ms (string mode)`);
       }
       return html;
     } catch (error) {
@@ -601,7 +619,7 @@ exports.RenderService = class _RenderService {
   /**
   * Modern streaming SSR using renderToPipeableStream
   */
-  async renderToStream(viewPath, data = {}, res, head) {
+  async renderToStream(viewComponent, data = {}, res, head) {
     const startTime = Date.now();
     let shellReadyTime = 0;
     try {
@@ -612,7 +630,7 @@ exports.RenderService = class _RenderService {
       const templateParts = this.templateParser.parseTemplate(template);
       let renderModule;
       if (this.vite) {
-        renderModule = await this.vite.ssrLoadModule("/src/entry-server.tsx");
+        renderModule = await this.vite.ssrLoadModule(this.entryServerPath);
       } else {
         if (this.serverManifest) {
           const manifestEntry = Object.entries(this.serverManifest).find(([key, value]) => value.isEntry && key.includes("entry-server"));
@@ -628,12 +646,13 @@ exports.RenderService = class _RenderService {
         }
       }
       const { data: pageData, __context: context } = data;
-      const inlineScripts = this.templateParser.buildInlineScripts(pageData, context, viewPath);
+      const componentName = viewComponent.displayName || viewComponent.name || "Component";
+      const inlineScripts = this.templateParser.buildInlineScripts(pageData, context, componentName);
       const clientScript = this.templateParser.getClientScriptTag(this.isDevelopment, this.manifest);
       const stylesheetTags = this.templateParser.getStylesheetTags(this.isDevelopment, this.manifest);
       const headTags = this.templateParser.buildHeadTags(head);
       let didError = false;
-      const { pipe, abort } = renderModule.renderComponentStream(viewPath, data, {
+      const { pipe, abort } = renderModule.renderComponentStream(viewComponent, data, {
         onShellReady: /* @__PURE__ */ __name(() => {
           shellReadyTime = Date.now();
           res.statusCode = didError ? 500 : 200;
@@ -646,15 +665,15 @@ exports.RenderService = class _RenderService {
           pipe(res);
           if (this.isDevelopment) {
             const ttfb = shellReadyTime - startTime;
-            this.logger.log(`[SSR] ${viewPath} shell ready in ${ttfb}ms (stream mode - TTFB)`);
+            this.logger.log(`[SSR] ${componentName} shell ready in ${ttfb}ms (stream mode - TTFB)`);
           }
         }, "onShellReady"),
         onShellError: /* @__PURE__ */ __name((error) => {
-          this.streamingErrorHandler.handleShellError(error, res, viewPath, this.isDevelopment);
+          this.streamingErrorHandler.handleShellError(error, res, componentName, this.isDevelopment);
         }, "onShellError"),
         onError: /* @__PURE__ */ __name((error) => {
           didError = true;
-          this.streamingErrorHandler.handleStreamError(error, viewPath);
+          this.streamingErrorHandler.handleStreamError(error, componentName);
         }, "onError"),
         onAllReady: /* @__PURE__ */ __name(() => {
           res.write(inlineScripts);
@@ -665,7 +684,7 @@ exports.RenderService = class _RenderService {
           if (this.isDevelopment) {
             const totalTime = Date.now() - startTime;
             const streamTime = Date.now() - shellReadyTime;
-            this.logger.log(`[SSR] ${viewPath} streaming complete in ${totalTime}ms total (${streamTime}ms streaming)`);
+            this.logger.log(`[SSR] ${componentName} streaming complete in ${totalTime}ms total (${streamTime}ms streaming)`);
           }
         }, "onAllReady")
       });
@@ -673,7 +692,8 @@ exports.RenderService = class _RenderService {
         abort();
       });
     } catch (error) {
-      this.streamingErrorHandler.handleShellError(error, res, viewPath, this.isDevelopment);
+      const componentName = typeof viewComponent === "function" ? viewComponent.name : String(viewComponent);
+      this.streamingErrorHandler.handleShellError(error, res, componentName, this.isDevelopment);
     }
   }
 };
@@ -720,8 +740,8 @@ exports.RenderInterceptor = class RenderInterceptor {
     this.renderService = renderService;
   }
   intercept(context, next) {
-    const viewPath = this.reflector.get(RENDER_KEY, context.getHandler());
-    if (!viewPath) {
+    const viewPathOrComponent = this.reflector.get(RENDER_KEY, context.getHandler());
+    if (!viewPathOrComponent) {
       return next.handle();
     }
     return next.handle().pipe(operators.switchMap(async (data) => {
@@ -745,7 +765,7 @@ exports.RenderInterceptor = class RenderInterceptor {
         __context: renderContext
       };
       try {
-        const html = await this.renderService.render(viewPath, fullData, response, renderResponse.head);
+        const html = await this.renderService.render(viewPathOrComponent, fullData, response, renderResponse.head);
         if (html !== void 0) {
           response.type("text/html");
           return html;
@@ -791,6 +811,7 @@ var ViteInitializerService = class _ViteInitializerService {
   logger = new common.Logger(_ViteInitializerService.name);
   viteMode;
   vitePort;
+  viteServer = null;
   constructor(renderService, httpAdapterHost, viteConfig) {
     this.renderService = renderService;
     this.httpAdapterHost = httpAdapterHost;
@@ -808,15 +829,15 @@ var ViteInitializerService = class _ViteInitializerService {
   async setupDevelopmentMode() {
     try {
       const { createServer: createViteServer } = await import('vite');
-      const vite = await createViteServer({
+      this.viteServer = await createViteServer({
         server: {
           middlewareMode: true
         },
         appType: "custom"
       });
-      this.renderService.setViteServer(vite);
+      this.renderService.setViteServer(this.viteServer);
       if (this.viteMode === "embedded") {
-        await this.mountViteMiddleware(vite);
+        await this.mountViteMiddleware(this.viteServer);
       } else if (this.viteMode === "proxy") {
         await this.setupViteProxy();
       }
@@ -879,6 +900,20 @@ var ViteInitializerService = class _ViteInitializerService {
       this.logger.warn(`Failed to setup static assets: ${error.message}`);
     }
   }
+  /**
+  * Cleanup: Close Vite server on module destroy
+  * This prevents port conflicts on hot reload
+  */
+  async onModuleDestroy() {
+    if (this.viteServer) {
+      try {
+        await this.viteServer.close();
+        this.logger.log("\u2713 Vite server closed");
+      } catch (error) {
+        this.logger.warn(`Failed to close Vite server: ${error.message}`);
+      }
+    }
+  }
 };
 ViteInitializerService = _ts_decorate5([
   common.Injectable(),