@nestjs-ssr/react 0.1.1

package/package.json

@@ -0,0 +1,135 @@
+{
+  "name": "@nestjs-ssr/react",
+  "version": "0.1.1",
+  "description": "React SSR for NestJS that respects Clean Architecture. Proper DI, SOLID principles, clear separation of concerns.",
+  "keywords": [
+    "nestjs",
+    "nest",
+    "nestjs-react",
+    "nestjs-ssr",
+    "react",
+    "ssr",
+    "server-side-rendering",
+    "react-ssr",
+    "clean-architecture",
+    "dependency-injection",
+    "solid-principles",
+    "separation-of-concerns",
+    "mvc",
+    "view-layer",
+    "vite",
+    "typescript",
+    "streaming-ssr",
+    "hydration",
+    "hmr",
+    "hot-module-replacement"
+  ],
+  "author": "Georgi Alexandrov",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/georgialexandrov/nestjs-ssr.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/georgialexandrov/nestjs-ssr/issues"
+  },
+  "homepage": "https://github.com/georgialexandrov/nestjs-ssr#readme",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./render": {
+      "types": "./dist/render/index.d.ts",
+      "import": "./dist/render/index.mjs",
+      "require": "./dist/render/index.js"
+    },
+    "./vite": {
+      "types": "./dist/vite/index.d.ts",
+      "import": "./dist/vite/index.mjs",
+      "require": "./dist/vite/index.js"
+    },
+    "./react/*": {
+      "types": "./dist/react/*.d.ts",
+      "import": "./dist/react/*.mjs",
+      "require": "./dist/react/*.js"
+    },
+    "./templates/*": "./src/templates/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src/templates",
+    "src/global.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "prepublishOnly": "pnpm build && pnpm typecheck && pnpm test"
+  },
+  "peerDependencies": {
+    "@nestjs/common": "^11.0.0",
+    "@nestjs/core": "^11.0.0",
+    "@nestjs/platform-express": "^11.0.0",
+    "http-proxy-middleware": "^3.0.0 || ^2.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^7.0.0 || ^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "http-proxy-middleware": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "escape-html": "^1.0.3",
+    "serialize-javascript": "^6.0.2"
+  },
+  "devDependencies": {
+    "@nestjs/common": "^11.0.0",
+    "@nestjs/core": "^11.0.0",
+    "@nestjs/platform-express": "^11.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/escape-html": "^1.0.4",
+    "@types/express": "^5.0.5",
+    "@types/glob": "^9.0.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/serialize-javascript": "^5.0.4",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitest/ui": "^4.0.14",
+    "glob": "^13.0.0",
+    "happy-dom": "^20.0.11",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rxjs": "^7.8.2",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^7.0.5",
+    "vitest": "^4.0.14"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.0.0",
+    "pnpm": ">=8.0.0"
+  }
+}

package/src/global.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Global type declarations for @nestjs-ssr/react
+ */
+
+declare global {
+  interface Window {
+    /**
+     * Initial state/props serialized from the server for hydration
+     */
+    __INITIAL_STATE__: any;
+
+    /**
+     * Render context serialized from the server for hydration
+     */
+    __CONTEXT__: any;
+
+    /**
+     * Component path for the current page
+     */
+    __COMPONENT_PATH__: string;
+  }
+}
+
+/**
+ * Module declaration for generated view registry
+ * This file is generated at build time in user applications
+ */
+declare module '@/views/view-registry.generated' {
+  export const viewRegistry: Record<string, React.ComponentType<any>>;
+}
+
+export {};

package/src/templates/entry-client.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { viewRegistry } from '@/views/view-registry.generated';
+
+const viewPath = window.__COMPONENT_PATH__;
+const initialProps = window.__INITIAL_STATE__ || {};
+const renderContext = window.__CONTEXT__ || {};
+
+const ViewComponent = viewRegistry[viewPath];
+
+if (!ViewComponent) {
+  throw new Error(`View "${viewPath}" not found in registry`);
+}
+
+hydrateRoot(
+  document.getElementById('root')!,
+  <StrictMode>
+    <ViewComponent {...initialProps} context={renderContext} />
+  </StrictMode>,
+);

package/src/templates/entry-server.tsx

@@ -0,0 +1,13 @@
+import { renderToString } from 'react-dom/server';
+import { viewRegistry } from '@/views/view-registry.generated';
+
+export function renderComponent(viewPath: string, data: any) {
+  const ViewComponent = viewRegistry[viewPath];
+
+  if (!ViewComponent) {
+    throw new Error(`View "${viewPath}" not found in registry`);
+  }
+
+  const { data: pageData, __context: context } = data;
+  return renderToString(<ViewComponent {...pageData} context={context} />);
+}

package/src/templates/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NestJS React SSR</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <!--styles-->
+  </head>
+  <body>
+    <div id="root"><!--app-html--></div>
+    <!--initial-state-->
+    <!--client-scripts-->
+  </body>
+</html>