jszy-swagger-doc-generator 1.1.1 → 1.4.0

package/src/cli.ts

@@ -4,6 +4,7 @@ import { SwaggerDocGenerator, SwaggerDoc } from './index';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
 import * as fs from 'fs';
+import * as path from 'path';
 
 const argv = yargs(hideBin(process.argv))
   .usage('Usage: $0 [options]')
@@ -57,11 +58,11 @@ const argv = yargs(hideBin(process.argv))
 
 async function run(): Promise<void> {
   try {
-    // Create the generated directory if it doesn't exist
+    // Clean the entire generated directory before doing anything
     const generatedDir = './generated';
-    if (!fs.existsSync(generatedDir)) {
-      fs.mkdirSync(generatedDir, { recursive: true });
-      console.log(`Created directory: ${generatedDir}`);
+    if (fs.existsSync(generatedDir)) {
+      fs.rmSync(generatedDir, { recursive: true, force: true });
+      console.log(`Cleared generated directory: ${generatedDir}`);
     }
 
     const generator = new SwaggerDocGenerator();
@@ -85,6 +86,11 @@ async function run(): Promise<void> {
 
     // Check if we need to generate types
     if (argv.generateTypes) {
+      // Create the generated directory if it doesn't exist
+      if (!fs.existsSync(generatedDir)) {
+        fs.mkdirSync(generatedDir, { recursive: true });
+      }
+
       console.log('Generating TypeScript type definitions...');
       const types = generator.generateTypeDefinitions(swaggerDoc);
       const typesOutputPath = argv.typesOutput.endsWith('.ts') ? argv.typesOutput :
@@ -95,14 +101,24 @@ async function run(): Promise<void> {
 
     // Check if we need to generate hooks
     if (argv.generateHooks) {
+      // Create the generated directory if it doesn't exist
+      if (!fs.existsSync(generatedDir)) {
+        fs.mkdirSync(generatedDir, { recursive: true });
+      }
+
       console.log('Generating React hooks...');
       const hooksByTag = generator.generateReactHooks(swaggerDoc);
       generator.saveHooksByTag(hooksByTag, argv.hooksOutput);
-      console.log(`React hooks generated successfully in: ${argv.hooksOutput}/`);
+      console.log(`React hooks and types generated successfully in: ${argv.hooksOutput}/`);
     }
 
     // Generate documentation if not generating types or hooks (for backward compatibility)
     if (!argv.generateTypes && !argv.generateHooks) {
+      // Create the generated directory if it doesn't exist
+      if (!fs.existsSync(generatedDir)) {
+        fs.mkdirSync(generatedDir, { recursive: true });
+      }
+
       console.log('Generating documentation...');
       const documentation = generator.generateDocumentation(swaggerDoc);
       generator.saveDocumentationToFile(documentation, argv.output);

package/src/index.ts

@@ -345,10 +345,10 @@ export class SwaggerDocGenerator {
   }
 
   /**
-   * Generates React hooks from the paths in Swagger doc
+   * Generates React hooks from the paths in Swagger doc organized by tag
    */
-  generateReactHooks(swaggerDoc: SwaggerDoc): Map<string, string> {
-    const hooksByTag = new Map<string, string>();
+  generateReactHooks(swaggerDoc: SwaggerDoc): Map<string, { hooks: string, types: string }> {
+    const hooksByTag = new Map<string, { hooks: string, types: string }>();
     const schemas = swaggerDoc.components?.schemas || {};
 
     // Group endpoints by tag
@@ -366,11 +366,73 @@ export class SwaggerDocGenerator {
       });
     });
 
-    // Generate hooks for each tag
+    // Generate hooks and types for each tag
     Object.entries(endpointsByTag).forEach(([tag, endpoints]) => {
-      let tagContent = this.generateHeaderForTag(tag);
+      // Generate TypeScript types for schemas used in this tag
+      let typesContent = `// ${toPascalCase(tag)} API Types\n\n`;
+
+      // First, find all directly used schemas in endpoints for this tag
+      const directlyUsedSchemas = new Set<string>();
+      if (schemas) {
+        Object.entries(schemas).forEach(([typeName, schema]) => {
+          if (this.isSchemaUsedInEndpoints(typeName, endpoints, schemas)) {
+            directlyUsedSchemas.add(typeName);
+          }
+        });
+      }
+
+      // Then, find all referenced schemas (schemas that are referenced by the directly used ones)
+      const allNeededSchemas = this.findAllReferencedSchemas(directlyUsedSchemas, schemas);
+
+      // Generate types for all needed schemas
+      if (schemas) {
+        for (const typeName of allNeededSchemas) {
+          const schema = schemas[typeName];
+          if (schema) {
+            typesContent += this.generateSingleTypeDefinition(typeName, schema, schemas);
+            typesContent += '\n';
+          }
+        }
+      }
+
+      // Generate hooks content
+      let hooksContent = `// ${toPascalCase(tag)} API Hooks\n`;
+      hooksContent += `import { useQuery, useMutation, useQueryClient } from 'react-query';\n`;
+      hooksContent += `import axios from 'axios';\n`;
+
+      // Determine which types are actually used in this tag's endpoints and generate imports
+      const usedTypeNames = new Set<string>();
+
+      // First, find all types that are directly used in endpoints for this tag
+      if (schemas) {
+        for (const [typeName, schema] of Object.entries(schemas)) {
+          if (this.isSchemaUsedInEndpoints(typeName, endpoints, schemas)) {
+            usedTypeNames.add(typeName);
+          }
+        }
+      }
+
+      // Then, add all transitive dependencies of the directly used types
+      const finalTypeNames = new Set<string>();
+      for (const typeName of usedTypeNames) {
+        finalTypeNames.add(typeName);
+        // Find all types referenced by this type
+        const referencedTypes = this.findSchemaReferences(schemas[typeName], schemas);
+        for (const refName of referencedTypes) {
+          if (schemas[refName]) {
+            finalTypeNames.add(refName);
+          }
+        }
+      }
 
-      // Generate all parameter interfaces for this tag first to avoid duplicates
+      // Add import statement only if there are types to import
+      if (finalTypeNames.size > 0) {
+        hooksContent += `import type { ${Array.from(finalTypeNames).join(', ')} } from './${toCamelCase(tag)}.types';\n\n`;
+      } else {
+        hooksContent += `\n`;
+      }
+
+      // Generate parameter interfaces for this tag
       const allParamInterfaces: string[] = [];
       endpoints.forEach(({ path, method, endpointInfo }) => {
         const paramInterface = this.generateParamInterface(path, method, endpointInfo, schemas);
@@ -381,26 +443,201 @@ export class SwaggerDocGenerator {
 
       // Add all unique parameter interfaces
       allParamInterfaces.forEach(interfaceCode => {
-        tagContent += interfaceCode + '\n';
+        hooksContent += interfaceCode + '\n';
       });
 
-      // Generate individual hooks
+      // Generate individual hooks using react-query and axios
       endpoints.forEach(({ path, method, endpointInfo }) => {
-        const hookContent = this.generateSingleHookWithUniqueName(path, method, endpointInfo, schemas);
-        tagContent += hookContent + '\n';
+        const hookContent = this.generateReactQueryHook(path, method, endpointInfo, schemas);
+        hooksContent += hookContent + '\n';
       });
 
-      hooksByTag.set(tag, tagContent);
+      hooksByTag.set(tag, { hooks: hooksContent, types: typesContent });
     });
 
     return hooksByTag;
   }
 
   /**
-   * Generates header content for a specific tag
+   * Checks if a schema is used in any of the endpoints
+   */
+  isSchemaUsedInEndpoints(schemaName: string, endpoints: Array<{ path: string, method: string, endpointInfo: any }>, allSchemas: { [key: string]: any }): boolean {
+    for (const { endpointInfo } of endpoints) {
+      // Check if schema is used as response
+      if (endpointInfo.responses) {
+        for (const [, responseInfo] of Object.entries(endpointInfo.responses) as [string, any]) {
+          if (responseInfo.content) {
+            for (const [, contentInfo] of Object.entries(responseInfo.content) as [string, any]) {
+              if (contentInfo.schema) {
+                if (this.schemaContainsRef(contentInfo.schema, schemaName, allSchemas)) {
+                  return true;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      // Check if schema is used in parameters
+      if (endpointInfo.parameters) {
+        for (const param of endpointInfo.parameters) {
+          if (param.schema && this.schemaContainsRef(param.schema, schemaName, allSchemas)) {
+            return true;
+          }
+        }
+      }
+
+      // Check if schema is used in request body
+      if (endpointInfo.requestBody && endpointInfo.requestBody.content) {
+        for (const [, contentInfo] of Object.entries(endpointInfo.requestBody.content) as [string, any]) {
+          if (contentInfo.schema && this.schemaContainsRef(contentInfo.schema, schemaName, allSchemas)) {
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Checks if a schema contains a reference to another schema
+   */
+  schemaContainsRef(schema: any, targetSchemaName: string, allSchemas: { [key: string]: any }): boolean {
+    if (!schema) return false;
+
+    // Check if this schema directly references the target
+    if (schema.$ref) {
+      const refTypeName = schema.$ref.split('/').pop();
+      if (refTypeName === targetSchemaName) {
+        return true;
+      }
+    }
+
+    // Recursively check nested properties
+    if (schema.properties) {
+      for (const [, propSchema] of Object.entries(schema.properties)) {
+        if (this.schemaContainsRef(propSchema as any, targetSchemaName, allSchemas)) {
+          return true;
+        }
+      }
+    }
+
+    // Check if it's an array schema
+    if (schema.items) {
+      if (this.schemaContainsRef(schema.items, targetSchemaName, allSchemas)) {
+        return true;
+      }
+    }
+
+    // Check allOf, oneOf, anyOf
+    if (schema.allOf) {
+      for (const item of schema.allOf) {
+        if (this.schemaContainsRef(item, targetSchemaName, allSchemas)) {
+          return true;
+        }
+      }
+    }
+
+    if (schema.oneOf) {
+      for (const item of schema.oneOf) {
+        if (this.schemaContainsRef(item, targetSchemaName, allSchemas)) {
+          return true;
+        }
+      }
+    }
+
+    if (schema.anyOf) {
+      for (const item of schema.anyOf) {
+        if (this.schemaContainsRef(item, targetSchemaName, allSchemas)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * Find all referenced schemas from a set of directly used schemas
+   */
+  findAllReferencedSchemas(initialSchemas: Set<string>, allSchemas: { [key: string]: any }): Set<string> {
+    const result = new Set<string>([...initialSchemas]); // Start with initial schemas
+    let changed = true;
+
+    while (changed) {
+      changed = false;
+
+      for (const typeName of [...result]) { // Use spread to create a new array to avoid concurrent modification
+        const schema = allSchemas[typeName];
+        if (schema) {
+          // Check for references in the schema
+          const referencedSchemas = this.findSchemaReferences(schema, allSchemas);
+          for (const refName of referencedSchemas) {
+            if (!result.has(refName) && allSchemas[refName]) {
+              result.add(refName);
+              changed = true;
+            }
+          }
+        }
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Find schema references in a given schema
    */
-  generateHeaderForTag(tag: string): string {
-    return `// ${toPascalCase(tag)} API Hooks\n\n`;
+  findSchemaReferences(schema: any, allSchemas: { [key: string]: any }): Set<string> {
+    const references = new Set<string>();
+
+    if (!schema) return references;
+
+    // Check direct $ref
+    if (schema.$ref) {
+      const refTypeName = schema.$ref.split('/').pop();
+      if (refTypeName && allSchemas[refTypeName]) {
+        references.add(refTypeName);
+      }
+    }
+
+    // Check properties
+    if (schema.properties) {
+      Object.values(schema.properties).forEach((propSchema: any) => {
+        const nestedRefs = this.findSchemaReferences(propSchema, allSchemas);
+        nestedRefs.forEach(ref => references.add(ref));
+      });
+    }
+
+    // Check array items
+    if (schema.items) {
+      const itemRefs = this.findSchemaReferences(schema.items, allSchemas);
+      itemRefs.forEach(ref => references.add(ref));
+    }
+
+    // Check allOf, oneOf, anyOf
+    if (schema.allOf) {
+      schema.allOf.forEach((item: any) => {
+        const itemRefs = this.findSchemaReferences(item, allSchemas);
+        itemRefs.forEach(ref => references.add(ref));
+      });
+    }
+
+    if (schema.oneOf) {
+      schema.oneOf.forEach((item: any) => {
+        const itemRefs = this.findSchemaReferences(item, allSchemas);
+        itemRefs.forEach(ref => references.add(ref));
+      });
+    }
+
+    if (schema.anyOf) {
+      schema.anyOf.forEach((item: any) => {
+        const itemRefs = this.findSchemaReferences(item, allSchemas);
+        itemRefs.forEach(ref => references.add(ref));
+      });
+    }
+
+    return references;
   }
 
   /**
@@ -443,29 +680,17 @@ export class SwaggerDocGenerator {
   }
 
   /**
-   * Generates a single React hook for an API endpoint with unique parameter interface
+   * Generates a React Query hook using axios
    */
-  generateSingleHookWithUniqueName(path: string, method: string, endpointInfo: any, schemas: { [key: string]: any }): string {
+  generateReactQueryHook(path: string, method: string, endpointInfo: any, schemas: { [key: string]: any }): string {
     const operationId = endpointInfo.operationId || this.generateOperationId(path, method);
     const hookName = `use${toPascalCase(operationId)}`;
+    const hookType = method.toLowerCase() === 'get' ? 'useQuery' : 'useMutation';
 
     // Use unique parameter interface name
     const pathParams = endpointInfo.parameters?.filter((p: Parameter) => p.in === 'path') || [];
     const queryParams = endpointInfo.parameters?.filter((p: Parameter) => p.in === 'query') || [];
 
-    let paramsDeclaration = '';
-    let paramsUsage = '{}';
-    const hasParams = pathParams.length > 0 || queryParams.length > 0;
-
-    if (hasParams) {
-      const paramInterfaceName = `${toPascalCase(operationId)}Params`;
-      paramsDeclaration = `params: ${paramInterfaceName}`;
-      paramsUsage = 'params';
-    }
-
-    // Format the path for use in the code (handle path parameters)
-    const pathWithParams = path.replace(/{(\w+)}/g, (_, param) => `\${params.${toCamelCase(param)}}`);
-
     // Determine response type
     let responseType = 'any';
     if (endpointInfo.responses && endpointInfo.responses['200']) {
@@ -476,66 +701,155 @@ export class SwaggerDocGenerator {
     }
 
     // Generate request body parameter if needed
-    let requestBodyParam = '';
+    let requestBodyType = 'any';
+    let hasBody = false;
     if (method.toLowerCase() !== 'get' && method.toLowerCase() !== 'delete' && endpointInfo.requestBody) {
       const bodySchema = endpointInfo.requestBody.content?.['application/json']?.schema;
       if (bodySchema) {
-        const bodyType = convertTypeToTs(bodySchema, schemas);
-        requestBodyParam = `, body: ${bodyType}`;
+        requestBodyType = convertTypeToTs(bodySchema, schemas);
+        hasBody = true;
       }
     }
 
-    // Create the hook function
-    let hookCode = `export const ${hookName} = () => {\n`;
-    hookCode += `  const apiCall = async (${paramsDeclaration}${requestBodyParam ? requestBodyParam : ''}) => {\n`;
-    hookCode += `    const path = \`\${process.env.REACT_APP_API_BASE_URL || ''}${pathWithParams}\`;\n`;
-
-    // Add query parameters
-    if (endpointInfo.parameters && endpointInfo.parameters.some((p: Parameter) => p.in === 'query')) {
-      hookCode += `    const queryParams = new URLSearchParams();\n`;
-      endpointInfo.parameters.forEach((param: Parameter) => {
-        if (param.in === 'query') {
-          hookCode += `    if (params.${toCamelCase(param.name)}) queryParams.append('${param.name}', params.${toCamelCase(param.name)}.toString());\n`;
-        }
-      });
-      hookCode += `    const queryString = queryParams.toString();\n`;
-      hookCode += `    const url = \`\${path}\${queryString ? '?' + queryString : ''}\`;\n`;
+    // Format the path for use in the code (handle path parameters)
+    const pathWithParams = path.replace(/{(\w+)}/g, (_, param) => `\${params.${toCamelCase(param)}}`);
+    const axiosPath = `\`\${process.env.REACT_APP_API_BASE_URL || ''}${pathWithParams}\``;
+
+    // Generate the hook code
+    let hookCode = '';
+
+    if (method.toLowerCase() === 'get') {
+      // For GET requests, use useQuery
+      const hasParams = pathParams.length > 0 || queryParams.length > 0;
+      if (hasParams) {
+        const paramInterfaceName = `${toPascalCase(operationId)}Params`;
+        hookCode += `export const ${hookName} = (params: ${paramInterfaceName}) => {\n`;
+        hookCode += `  return useQuery({\n`;
+        hookCode += `    queryKey: ['${operationId}', params],\n`;
+        hookCode += `    queryFn: async () => {\n`;
+        hookCode += `      const response = await axios.get<${responseType}>(${axiosPath}, { params });\n`;
+        hookCode += `      return response.data;\n`;
+        hookCode += `    },\n`;
+        hookCode += `  });\n`;
+        hookCode += `};\n`;
+      } else {
+        hookCode += `export const ${hookName} = () => {\n`;
+        hookCode += `  return useQuery({\n`;
+        hookCode += `    queryKey: ['${operationId}'],\n`;
+        hookCode += `    queryFn: async () => {\n`;
+        hookCode += `      const response = await axios.get<${responseType}>(${axiosPath});\n`;
+        hookCode += `      return response.data;\n`;
+        hookCode += `    },\n`;
+        hookCode += `  });\n`;
+        hookCode += `};\n`;
+      }
     } else {
-      hookCode += `    const url = path;\n`;
+      // For non-GET requests, use useMutation
+      const hasPathParams = pathParams.length > 0;
+      if (hasPathParams) {
+        const paramInterfaceName = `${toPascalCase(operationId)}Params`;
+        hookCode += `export const ${hookName} = () => {\n`;
+        hookCode += `  const queryClient = useQueryClient();\n\n`;
+        hookCode += `  return useMutation({\n`;
+        hookCode += `    mutationFn: async ({ params, data }: { params: ${paramInterfaceName}; data: ${requestBodyType} }) => {\n`;
+        // Format the path for use in the code (handle path parameters)
+        let formattedPath = path.replace(/{(\w+)}/g, (_, param) => `\${params.${toCamelCase(param)}}`);
+        const pathWithParams = `\`\${process.env.REACT_APP_API_BASE_URL || ''}${formattedPath}\``;
+        hookCode += `      const response = await axios.${method.toLowerCase()}<${responseType}>(${pathWithParams}, data);\n`;
+        hookCode += `      return response.data;\n`;
+        hookCode += `    },\n`;
+        hookCode += `    onSuccess: () => {\n`;
+        hookCode += `      // Invalidate and refetch related queries\n`;
+        hookCode += `      queryClient.invalidateQueries({ queryKey: ['${operationId}'] });\n`;
+        hookCode += `    },\n`;
+        hookCode += `  });\n`;
+        hookCode += `};\n`;
+      } else {
+        hookCode += `export const ${hookName} = () => {\n`;
+        hookCode += `  const queryClient = useQueryClient();\n\n`;
+        hookCode += `  return useMutation({\n`;
+        hookCode += `    mutationFn: async (data: ${requestBodyType}) => {\n`;
+        hookCode += `      const response = await axios.${method.toLowerCase()}<${responseType}>(${axiosPath}, data);\n`;
+        hookCode += `      return response.data;\n`;
+        hookCode += `    },\n`;
+        hookCode += `    onSuccess: () => {\n`;
+        hookCode += `      // Invalidate and refetch related queries\n`;
+        hookCode += `      queryClient.invalidateQueries({ queryKey: ['${operationId}'] });\n`;
+        hookCode += `    },\n`;
+        hookCode += `  });\n`;
+        hookCode += `};\n`;
+      }
     }
 
-    // Add fetch options
-    hookCode += `    const options: RequestInit = {\n`;
-    hookCode += `      method: '${method.toUpperCase()}',\n`;
-
-    if (requestBodyParam) {
-      hookCode += `      headers: {\n        'Content-Type': 'application/json',\n      },\n`;
-      hookCode += `      body: JSON.stringify(body),\n`;
-    }
+    return hookCode;
+  }
 
-    hookCode += `    };\n\n`;
-    hookCode += `    const result = await fetch(url, options);\n`;
-    hookCode += `    return result.json() as Promise<${responseType}>;\n`;
-    hookCode += `  };\n\n`;
-    hookCode += `  return { ${toCamelCase(operationId)}: apiCall };\n`;
-    hookCode += `};\n`;
 
-    return hookCode;
+  /**
+   * Generate operation ID from path and method if not provided
+   */
+  generateOperationId(path: string, method: string): string {
+    return `${method.toLowerCase()}_${path.replace(/[\/{}]/g, '_')}`;
   }
 
   /**
-   * Generates a single React hook for an API endpoint
+   * Formats code using Prettier - sync version with child process
    */
-  generateSingleHook(path: string, method: string, endpointInfo: any, schemas: { [key: string]: any }): string {
-    // This method is kept for backward compatibility
-    return this.generateSingleHookWithUniqueName(path, method, endpointInfo, schemas);
+  private formatCode(code: string, filepath: string): string {
+    // Skip formatting in test environment to avoid ESM issues
+    if (process.env.NODE_ENV === 'test' || typeof jest !== 'undefined') {
+      return code;
+    }
+
+    try {
+      // Use execSync to run prettier as a separate process to avoid ESM issues
+      const { execSync } = require('child_process');
+      const { writeFileSync, readFileSync, unlinkSync } = require('fs');
+      const { join, extname } = require('path');
+      const { tmpdir } = require('os');
+
+      // Determine the file extension to use for the temp file
+      const fileExtension = extname(filepath) || '.txt';
+      const tempPath = join(tmpdir(), `prettier-tmp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}${fileExtension}`);
+      writeFileSync(tempPath, code, 'utf8');
+
+      // Format the file using prettier CLI
+      execSync(`npx prettier --write "${tempPath}" --single-quote --trailing-comma es5 --tab-width 2 --semi --print-width 80`, {
+        stdio: 'pipe'
+      });
+
+      // Read the formatted content back
+      const formattedCode = readFileSync(tempPath, 'utf8');
+
+      // Clean up the temporary file
+      unlinkSync(tempPath);
+
+      return formattedCode;
+    } catch (error) {
+      console.warn(`Failed to format ${filepath} with Prettier:`, error);
+      return code; // Return unformatted code if formatting fails
+    }
   }
 
   /**
-   * Generate operation ID from path and method if not provided
+   * Gets the parser based on file extension
    */
-  generateOperationId(path: string, method: string): string {
-    return `${method.toLowerCase()}_${path.replace(/[\/{}]/g, '_')}`;
+  private getParserForFile(filepath: string): string {
+    const ext = path.extname(filepath);
+    switch (ext) {
+      case '.ts':
+      case '.tsx':
+        return 'typescript';
+      case '.js':
+      case '.jsx':
+        return 'babel';
+      case '.json':
+        return 'json';
+      case '.md':
+        return 'markdown';
+      default:
+        return 'typescript';
+    }
   }
 
   /**
@@ -547,7 +861,8 @@ export class SwaggerDocGenerator {
       fs.mkdirSync(dir, { recursive: true });
     }
 
-    fs.writeFileSync(outputPath, documentation, 'utf8');
+    const formattedDocumentation = this.formatCode(documentation, outputPath);
+    fs.writeFileSync(outputPath, formattedDocumentation, 'utf8');
   }
 
   /**
@@ -559,26 +874,36 @@ export class SwaggerDocGenerator {
       fs.mkdirSync(dir, { recursive: true });
     }
 
-    fs.writeFileSync(outputPath, types, 'utf8');
+    const formattedTypes = this.formatCode(types, outputPath);
+    fs.writeFileSync(outputPath, formattedTypes, 'utf8');
   }
 
   /**
    * Saves the generated React hooks to files organized by tag
    */
-  saveHooksByTag(hooksByTag: Map<string, string>, outputDir: string): void {
+  saveHooksByTag(hooksByTag: Map<string, { hooks: string, types: string }>, outputDir: string): void {
     const dir = outputDir;
     if (!fs.existsSync(dir)) {
       fs.mkdirSync(dir, { recursive: true });
     }
 
-    for (const [tag, content] of hooksByTag) {
+    for (const [tag, { hooks, types }] of hooksByTag) {
       const tagDir = path.join(outputDir, toCamelCase(tag));
       if (!fs.existsSync(tagDir)) {
         fs.mkdirSync(tagDir, { recursive: true });
       }
 
-      const fileName = path.join(tagDir, `${toCamelCase(tag)}.hooks.ts`);
-      fs.writeFileSync(fileName, content, 'utf8');
+      // Save hooks to hooks file
+      const hooksFileName = path.join(tagDir, `${toCamelCase(tag)}.hooks.ts`);
+      const formattedHooks = this.formatCode(hooks, hooksFileName);
+      fs.writeFileSync(hooksFileName, formattedHooks, 'utf8');
+
+      // Save types to types file
+      if (types.trim()) { // Only save if there are types
+        const typesFileName = path.join(tagDir, `${toCamelCase(tag)}.types.ts`);
+        const formattedTypes = this.formatCode(types, typesFileName);
+        fs.writeFileSync(typesFileName, formattedTypes, 'utf8');
+      }
     }
   }
 }