@nestjs-ssr/react 0.1.5 → 0.1.6

package/dist/render/index.mjs

@@ -1,7 +1,7 @@
 import { Injectable, Logger, Optional, Inject, Global, Module } from '@nestjs/common';
 import { HttpAdapterHost, APP_INTERCEPTOR, Reflector } from '@nestjs/core';
 import { existsSync, readFileSync } from 'fs';
-import { join } from 'path';
+import { join, relative } from 'path';
 import serialize from 'serialize-javascript';
 import escapeHtml from 'escape-html';
 import { renderToStaticMarkup } from 'react-dom/server';
@@ -102,7 +102,7 @@ var TemplateParserService = class {
   * 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(data, {
       isJSON: true
@@ -110,7 +110,7 @@ window.__INITIAL_STATE__ = ${serialize(data, {
 window.__CONTEXT__ = ${serialize(context, {
       isJSON: true
     })};
-window.__COMPONENT_PATH__ = ${serialize(componentPath, {
+window.__COMPONENT_NAME__ = ${serialize(componentName, {
       isJSON: true
     })};
 </script>`;
@@ -420,12 +420,28 @@ var 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 = join(__dirname, "/templates/entry-server.tsx");
+    const relativeServerPath = relative(process.cwd(), absoluteServerPath);
+    if (relativeServerPath.startsWith("..")) {
+      this.entryServerPath = absoluteServerPath;
+    } else {
+      this.entryServerPath = "/" + relativeServerPath.replace(/\\/g, "/");
+    }
+    const absoluteClientPath = join(__dirname, "/templates/entry-client.tsx");
+    const relativeClientPath = relative(process.cwd(), absoluteClientPath);
+    if (relativeClientPath.startsWith("..")) {
+      this.entryClientPath = absoluteClientPath;
+    } else {
+      this.entryClientPath = "/" + relativeClientPath.replace(/\\/g, "/");
+    }
     let templatePath;
     if (this.isDevelopment) {
       const packageTemplatePaths = [
@@ -477,15 +493,15 @@ var 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
@@ -512,7 +528,7 @@ var 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;
@@ -521,7 +537,7 @@ var 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"));
@@ -537,7 +553,8 @@ var 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(pageData, {
@@ -546,7 +563,7 @@ var RenderService = class _RenderService {
           window.__CONTEXT__ = ${serialize(context, {
         isJSON: true
       })};
-          window.__COMPONENT_PATH__ = ${serialize(viewPath, {
+          window.__COMPONENT_NAME__ = ${serialize(componentName, {
         isJSON: true
       })};
         </script>
@@ -554,7 +571,7 @@ var 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) {
@@ -584,7 +601,8 @@ var 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) {
@@ -594,7 +612,7 @@ var 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 {
@@ -605,7 +623,7 @@ var 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"));
@@ -621,12 +639,13 @@ var 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;
@@ -639,15 +658,15 @@ var 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);
@@ -658,7 +677,7 @@ var 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")
       });
@@ -666,7 +685,8 @@ var 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);
     }
   }
 };
@@ -713,8 +733,8 @@ var RenderInterceptor = class {
     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(switchMap(async (data) => {
@@ -738,7 +758,7 @@ var RenderInterceptor = class {
         __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;
@@ -784,6 +804,7 @@ var ViteInitializerService = class _ViteInitializerService {
   logger = new Logger(_ViteInitializerService.name);
   viteMode;
   vitePort;
+  viteServer = null;
   constructor(renderService, httpAdapterHost, viteConfig) {
     this.renderService = renderService;
     this.httpAdapterHost = httpAdapterHost;
@@ -801,15 +822,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();
       }
@@ -872,6 +893,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([
   Injectable(),