@nestjs-ssr/react 0.1.6 → 0.1.8

package/src/cli/init.ts

@@ -0,0 +1,260 @@
+#!/usr/bin/env node
+
+import { existsSync, readFileSync, writeFileSync, mkdirSync, copyFileSync } from 'fs';
+import { join, resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { consola } from 'consola';
+import { defineCommand, runMain } from 'citty';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const main = defineCommand({
+  meta: {
+    name: 'nestjs-ssr',
+    description: 'Initialize @nestjs-ssr/react in your NestJS project',
+    version: '0.1.6',
+  },
+  args: {
+    force: {
+      type: 'boolean',
+      description: 'Overwrite existing files',
+      alias: 'f',
+    },
+    views: {
+      type: 'string',
+      description: 'Views directory path',
+      default: 'src/views',
+    },
+  },
+  async run({ args }) {
+    const cwd = process.cwd();
+    const viewsDir = args.views;
+
+    consola.box('@nestjs-ssr/react initialization');
+    consola.start('Setting up your NestJS SSR React project...\n');
+
+    // Find template files - check both src/ (dev) and dist/ (production) locations
+    const templateLocations = [
+      resolve(__dirname, '../../src/templates'),  // Development (ts-node/tsx)
+      resolve(__dirname, '../templates'),         // Built package (dist/cli -> dist/templates)
+    ];
+    const templateDir = templateLocations.find(loc => existsSync(join(loc, 'entry-client.tsx')));
+
+    if (!templateDir) {
+      consola.error('Failed to locate template files');
+      consola.info('Searched:', templateLocations);
+      process.exit(1);
+    }
+
+    // Find global.d.ts - check both src/ (dev) and package root (production)
+    const globalTypesLocations = [
+      resolve(__dirname, '../../src/global.d.ts'),  // Development
+      resolve(__dirname, '../global.d.ts'),         // Built (dist/cli -> dist/../src/global.d.ts)
+    ];
+    const globalTypesSrc = globalTypesLocations.find(loc => existsSync(loc));
+
+    if (!globalTypesSrc) {
+      consola.error('Failed to locate global.d.ts');
+      consola.info('Searched:', globalTypesLocations);
+      process.exit(1);
+    }
+
+    // Check that tsconfig.json exists - we don't create it
+    const tsconfigPath = join(cwd, 'tsconfig.json');
+    if (!existsSync(tsconfigPath)) {
+      consola.error('No tsconfig.json found in project root');
+      consola.info('Please create a tsconfig.json file first');
+      process.exit(1);
+    }
+
+    // 1. Copy entry-client.tsx to views directory
+    consola.start('Creating entry-client.tsx...');
+    const entryClientSrc = join(templateDir, 'entry-client.tsx');
+    const entryClientDest = join(cwd, viewsDir, 'entry-client.tsx');
+
+    // Create views directory if it doesn't exist
+    mkdirSync(join(cwd, viewsDir), { recursive: true });
+
+    if (existsSync(entryClientDest) && !args.force) {
+      consola.warn(`${viewsDir}/entry-client.tsx already exists (use --force to overwrite)`);
+    } else {
+      copyFileSync(entryClientSrc, entryClientDest);
+      consola.success(`Created ${viewsDir}/entry-client.tsx`);
+    }
+
+    // 2. Copy entry-server.tsx to views directory
+    consola.start('Creating entry-server.tsx...');
+    const entryServerSrc = join(templateDir, 'entry-server.tsx');
+    const entryServerDest = join(cwd, viewsDir, 'entry-server.tsx');
+
+    if (existsSync(entryServerDest) && !args.force) {
+      consola.warn(`${viewsDir}/entry-server.tsx already exists (use --force to overwrite)`);
+    } else {
+      copyFileSync(entryServerSrc, entryServerDest);
+      consola.success(`Created ${viewsDir}/entry-server.tsx`);
+    }
+
+    // 2. Copy global.d.ts
+    consola.start('Creating global.d.ts...');
+    const globalTypesDest = join(cwd, 'src/global.d.ts');
+
+    if (existsSync(globalTypesDest) && !args.force) {
+      consola.warn('src/global.d.ts already exists (use --force to overwrite)');
+    } else {
+      copyFileSync(globalTypesSrc, globalTypesDest);
+      consola.success('Created src/global.d.ts');
+    }
+
+    // 4. Update/create vite.config.js
+    consola.start('Configuring vite.config.js...');
+    const viteConfigPath = join(cwd, 'vite.config.js');
+    const viteConfigTs = join(cwd, 'vite.config.ts');
+    const useTypeScript = existsSync(viteConfigTs);
+    const configPath = useTypeScript ? viteConfigTs : viteConfigPath;
+
+    if (existsSync(configPath)) {
+      consola.warn(`${useTypeScript ? 'vite.config.ts' : 'vite.config.js'} already exists`);
+      consola.info('Please manually add to your Vite config:');
+      consola.log('  import { resolve } from \'path\';');
+      consola.log('  build: {');
+      consola.log('    rollupOptions: {');
+      consola.log(`      input: { client: resolve(__dirname, '${viewsDir}/entry-client.tsx') }`);
+      consola.log('    }');
+      consola.log('  }');
+    } else {
+      const viteConfig = `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+    },
+  },
+  server: {
+    port: 5173,
+    strictPort: true,
+    hmr: { port: 5173 },
+  },
+  build: {
+    outDir: 'dist/client',
+    manifest: true,
+    rollupOptions: {
+      input: {
+        client: resolve(__dirname, '${viewsDir}/entry-client.tsx'),
+      },
+    },
+  },
+});
+`;
+      writeFileSync(viteConfigPath, viteConfig);
+      consola.success('Created vite.config.js');
+    }
+
+    // 5. Update tsconfig.json
+    consola.start('Configuring tsconfig.json...');
+    try {
+      const tsconfig = JSON.parse(readFileSync(tsconfigPath, 'utf-8'));
+
+      let updated = false;
+
+      if (!tsconfig.compilerOptions) {
+        tsconfig.compilerOptions = {};
+      }
+
+      // Ensure jsx is set
+      if (tsconfig.compilerOptions.jsx !== 'react-jsx') {
+        tsconfig.compilerOptions.jsx = 'react-jsx';
+        updated = true;
+      }
+
+      // Ensure paths includes @ alias
+      if (!tsconfig.compilerOptions.paths) {
+        tsconfig.compilerOptions.paths = {};
+      }
+      if (!tsconfig.compilerOptions.paths['@/*']) {
+        tsconfig.compilerOptions.paths['@/*'] = ['./src/*'];
+        updated = true;
+      }
+
+      // Ensure types includes vite/client
+      if (!tsconfig.compilerOptions.types) {
+        tsconfig.compilerOptions.types = [];
+      }
+      if (!tsconfig.compilerOptions.types.includes('vite/client')) {
+        tsconfig.compilerOptions.types.push('vite/client');
+        updated = true;
+      }
+
+      if (updated) {
+        writeFileSync(tsconfigPath, JSON.stringify(tsconfig, null, 2));
+        consola.success('Updated tsconfig.json');
+      } else {
+        consola.info('tsconfig.json already configured');
+      }
+    } catch (error) {
+      consola.error('Failed to update tsconfig.json:', error);
+    }
+
+    // 6. Setup build scripts
+    consola.start('Configuring build scripts...');
+    const packageJsonPath = join(cwd, 'package.json');
+
+    if (!existsSync(packageJsonPath)) {
+      consola.warn('No package.json found, skipping build script setup');
+    } else {
+      try {
+        const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+
+        if (!packageJson.scripts) {
+          packageJson.scripts = {};
+        }
+
+        const existingBuild = packageJson.scripts.build;
+        const defaultNestBuild = 'nest build';
+        const ssrBuildPrefix = 'vite build && ';
+
+        let shouldUpdate = false;
+        let newBuildScript = '';
+
+        if (!existingBuild) {
+          // No build script exists, create one
+          newBuildScript = `${ssrBuildPrefix}${defaultNestBuild}`;
+          shouldUpdate = true;
+        } else if (existingBuild.includes('vite build')) {
+          // Already has vite build
+          consola.info('Build script already includes vite build');
+        } else if (existingBuild === defaultNestBuild) {
+          // Default nest build, prepend vite build
+          newBuildScript = `${ssrBuildPrefix}${existingBuild}`;
+          shouldUpdate = true;
+        } else {
+          // Custom build script, ask user
+          consola.warn(`Found custom build script: "${existingBuild}"`);
+          consola.info('SSR requires running "vite build" before your build command');
+          consola.info(`Recommended: ${ssrBuildPrefix}${existingBuild}`);
+          consola.info('Please manually update your build script in package.json');
+        }
+
+        if (shouldUpdate) {
+          packageJson.scripts.build = newBuildScript;
+          writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
+          consola.success(`Updated build script to: "${newBuildScript}"`);
+        }
+      } catch (error) {
+        consola.error('Failed to update package.json:', error);
+      }
+    }
+
+    consola.success('\nInitialization complete!');
+    consola.box('Next steps');
+    consola.info(`1. Create your first view component in ${viewsDir}/`);
+    consola.info('2. Render it from a NestJS controller using render.render()');
+    consola.info('3. Run your dev server with: pnpm start:dev');
+  },
+});
+
+runMain(main);

package/src/templates/entry-client.tsx

@@ -1,4 +1,4 @@
-import { StrictMode } from 'react';
+import React, { StrictMode } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 
 const componentName = window.__COMPONENT_NAME__;
@@ -9,19 +9,69 @@ const renderContext = window.__CONTEXT__ || {};
 // @ts-ignore - Vite-specific API
 const modules: Record<string, { default: React.ComponentType<any> }> = import.meta.glob('@/views/**/*.tsx', { eager: true });
 
-// Find the component by matching its display name or function name
+// 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 ? filename.charAt(0).toUpperCase() + filename.slice(1) : undefined;
+
+    return { path, component, name, filename, normalizedFilename };
+  });
+
+// 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;
-for (const module of Object.values(modules)) {
-  const component = module.default;
-  const name = component.displayName || component.name;
-  if (name === componentName) {
-    ViewComponent = component;
-    break;
+
+// 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;
+    }
   }
 }
 
 if (!ViewComponent) {
-  throw new Error(`Component "${componentName}" not found in views directory. Available components: ${Object.values(modules).map(m => m.default.displayName || m.default.name).join(', ')}`);
+  const availableComponents = Object.entries(modules).map(([path, m]) => {
+    const filename = path.split('/').pop()?.replace('.tsx', '');
+    const name = m.default.displayName || m.default.name;
+    return `${filename} (${name})`;
+  }).join(', ');
+  throw new Error(`Component "${componentName}" not found in views directory. Available: ${availableComponents}`);
 }
 
 hydrateRoot(

package/src/templates/entry-server.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { renderToString } from 'react-dom/server';
 
 export function renderComponent(