update frontend code generator for fully generate

Author: ZHallen122

backend/src/build-system/handlers/frontend-code-generate/index.ts

@@ -2,6 +2,14 @@
 import { BuildHandler, BuildResult } from 'src/build-system/types';
 import { BuilderContext } from 'src/build-system/context';
 import { Logger } from '@nestjs/common';
+import {
+  generateFilesDependency,
+  createFile,
+} from '../../utils/file_generator_util';
+import { VirtualDirectory } from '../../virtual-dir';
+import normalizePath from 'normalize-path';
+import * as path from 'path';
+import { readFile } from 'fs/promises';
 
 // Utility functions (similar to your parseGenerateTag, removeCodeBlockFences)
 import {
@@ -20,6 +28,7 @@ import { generateFrontEndCodePrompt } from './prompt';
 export class FrontendCodeHandler implements BuildHandler<string> {
   readonly id = 'op:FRONTEND:CODE';
   readonly logger: Logger = new Logger('FrontendCodeHandler');
+  private virtualDir: VirtualDirectory;
 
   /**
    * Executes the handler to generate frontend code.
@@ -34,56 +43,95 @@ export class FrontendCodeHandler implements BuildHandler<string> {
     const sitemapDoc = context.getNodeData('op:UX:SMD');
     const uxDataMapDoc = context.getNodeData('op:UX:DATAMAP:DOC');
     const backendRequirementDoc = context.getNodeData('op:BACKEND:REQ');
+    const fileArchDoc = context.getNodeData('op:FILE:ARCH');
 
     // 2. Grab any globally stored context as needed
-    const currentFilePath =
-      context.getGlobalContext('currentFrontendFile') ||
-      'src/pages/Home/index.tsx';
-    const dependencyFilePath =
-      context.getGlobalContext('frontendDependencyFile') || 'dependencies.json';
-    const dependenciesContext =
-      context.getGlobalContext('frontendDependenciesContext') || '';
-
-    // 3. Generate the prompt
-    const frontendCodePrompt = generateFrontEndCodePrompt(
-      sitemapDoc,
-      uxDataMapDoc,
-      backendRequirementDoc.overview,
-      currentFilePath,
-      dependencyFilePath,
-      dependenciesContext,
-    );
+    this.virtualDir = context.virtualDirectory;
+    const frontendPath = context.getGlobalContext('frontendPath');
 
-    this.logger.debug('Generated frontend code prompt.');
+    // Dependency
+    const { sortedFiles, fileInfos } = await generateFilesDependency(
+      fileArchDoc,
+      this.virtualDir,
+    );
 
-    try {
-      // 4. Call the model
-      const modelResponse = await context.model.chatSync(
-        {
-          content: frontendCodePrompt,
-        },
-        'gpt-4o-mini', // or whichever model you need
+    // Iterate the sortedFiles
+    for (const file of sortedFiles) {
+      const currentFullFilePath = normalizePath(
+        path.resolve(frontendPath, file),
+      );
+      this.logger.log(
+        `Generating file in dependency order: ${currentFullFilePath}`,
       );
 
-      // 5. Parse the output
-      const generatedCode = removeCodeBlockFences(
-        parseGenerateTag(modelResponse),
+      // Retrieve the direct dependencies for this file
+      const directDepsArray = fileInfos[file]?.dependsOn || [];
+
+      //gather the contents of each dependency into a single string.
+      let dependenciesContext = '';
+      for (const dep of directDepsArray) {
+        try {
+          // Resolve against frontendPath to get the absolute path
+          const resolvedDepPath = normalizePath(
+            path.resolve(frontendPath, dep),
+          );
+
+          // Read the file. (may want to guard so only read certain file types.)
+          const fileContent = await readFile(resolvedDepPath, 'utf-8');
+
+          //just append a code:
+          dependenciesContext += `\n\n[Dependency: ${dep}]\n\`\`\`\n${fileContent}\n\`\`\`\n`;
+        } catch (readError) {
+          // If the file doesn't exist or can't be read, log a warning.
+          this.logger.warn(
+            `Failed to read dependency "${dep}" for file "${file}": ${readError}`,
+          );
+        }
+      }
+
+      // Format for the prompt
+      const directDependencies = directDepsArray.join('\n');
+
+      // Generate the prompt
+      const frontendCodePrompt = generateFrontEndCodePrompt(
+        sitemapDoc,
+        uxDataMapDoc,
+        backendRequirementDoc.overview,
+        currentFullFilePath,
+        directDependencies,
+        dependenciesContext,
       );
+      this.logger.debug('Generated frontend code prompt.');
+
+      let generatedCode = '';
+      try {
+        // Call the model
+        const modelResponse = await context.model.chatSync(
+          {
+            content: frontendCodePrompt,
+          },
+          'gpt-4o-mini', // or whichever model you need
+        );
 
-      this.logger.debug('Frontend code generated and parsed successfully.');
-
-      // 6. Return success
-      return {
-        success: true,
-        data: generatedCode,
-      };
-    } catch (error) {
-      // 7. Return error
-      this.logger.error('Error during frontend code generation:', error);
-      return {
-        success: false,
-        error: new Error('Failed to generate frontend code.'),
-      };
+        // Parse the output
+        generatedCode = removeCodeBlockFences(parseGenerateTag(modelResponse));
+
+        this.logger.debug('Frontend code generated and parsed successfully.');
+      } catch (error) {
+        // Return error
+        this.logger.error('Error during frontend code generation:', error);
+        return {
+          success: false,
+          error: new Error('Failed to generate frontend code.'),
+        };
+      }
+
+      await createFile(currentFullFilePath, generatedCode);
     }
+
+    return {
+      success: true,
+      error: new Error('Frontend code generated and parsed successfully.'),
+    };
   }
 }

backend/src/build-system/utils/file_generator_util.ts

@@ -6,34 +6,42 @@ import { extractJsonFromMarkdown } from 'src/build-system/utils/strings';
 import normalizePath from 'normalize-path';
 import toposort from 'toposort';
 
+interface FileDependencyInfo {
+  filePath: string;
+  dependsOn: string[];
+}
+
+interface GenerateFilesDependencyResult {
+  sortedFiles: string[];
+  fileInfos: Record<string, FileDependencyInfo>;
+}
+
 const logger = new Logger('FileGeneratorUtil');
 let virtualDir: VirtualDirectory;
 
 /**
  * Generates files based on JSON extracted from a Markdown document.
  * Ensures dependency order is maintained during file creation.
  */
-export async function generateFiles(
+export async function generateFilesDependency(
   markdownContent: string,
-  projectSrcPath: string,
   virtualDirectory: VirtualDirectory,
-): Promise<void> {
+): Promise<GenerateFilesDependencyResult> {
   virtualDir = virtualDirectory;
   const jsonData = extractJsonFromMarkdown(markdownContent);
 
-  const { graph, nodes } = buildDependencyGraph(jsonData);
+  const { graph, nodes, fileInfos } = buildDependencyGraph(jsonData);
   detectCycles(graph);
   validateAgainstVirtualDirectory(nodes);
 
   const sortedFiles = getSortedFiles(graph, nodes);
 
-  for (const file of sortedFiles) {
-    const fullPath = normalizePath(path.resolve(projectSrcPath, file));
-    logger.log(`Generating file in dependency order: ${fullPath}`);
-    await createFile(fullPath);
-  }
+  logger.log('All files dependency generated successfully.');
 
-  logger.log('All files generated successfully.');
+  return {
+    sortedFiles,
+    fileInfos,
+  };
 }
 
 /**
@@ -42,22 +50,38 @@ export async function generateFiles(
  */
 export function buildDependencyGraph(jsonData: {
   files: Record<string, { dependsOn: string[] }>;
-}): { graph: [string, string][]; nodes: Set<string> } {
+}): {
+  graph: [string, string][];
+  nodes: Set<string>;
+  fileInfos: Record<string, { filePath: string; dependsOn: string[] }>;
+} {
   const graph: [string, string][] = [];
   const nodes = new Set<string>();
+  const fileInfos: Record<string, { filePath: string; dependsOn: string[] }> =
+    {};
 
   logger.log('Parsing JSON data to build dependency graph');
 
   Object.entries(jsonData.files).forEach(([fileName, details]) => {
     nodes.add(fileName);
+
+    // store file info
+    fileInfos[fileName] = {
+      filePath: fileName,
+      dependsOn: [],
+    };
+
     details.dependsOn.forEach((dep) => {
       const resolvedDep = resolveDependency(fileName, dep);
       graph.push([resolvedDep, fileName]);
       nodes.add(resolvedDep);
+
+      // store dependsOn
+      fileInfos[fileName].dependsOn.push(resolvedDep);
     });
   });
 
-  return { graph, nodes };
+  return { graph, nodes, fileInfos };
 }
 
 /**
@@ -137,12 +161,14 @@ export function validateAgainstVirtualDirectory(nodes: Set<string>): void {
  * Creates a file at the specified path, ensuring required directories exist first.
  * The file is created with a simple placeholder comment.
  */
-export async function createFile(filePath: string): Promise<void> {
+export async function createFile(
+  filePath: string,
+  generatedCode: string,
+): Promise<void> {
   const dir = path.dirname(filePath);
   await fs.mkdir(dir, { recursive: true });
 
-  const content = `// Generated file: ${path.basename(filePath)}`;
-  await fs.writeFile(filePath, content, 'utf8');
+  await fs.writeFile(filePath, generatedCode, 'utf8');
 
   logger.log(`File created: ${filePath}`);
 }