Component Build Verification Tool

Build a tool that compiles a web component written in TypeScript with decorators and verifies that the compilation produces valid JavaScript output.

Requirements

Your tool should:

1. Accept a TypeScript source file path containing a web component with decorators (e.g., @Component, @Prop, @State)
2. Compile the TypeScript file to JavaScript
3. Verify that the compiled output:
   • Is valid JavaScript (no TypeScript syntax remains)
   • Contains the transformed decorator metadata
   • Includes the compiled JSX/TSX render function
4. Return a verification result indicating success or failure with details about what was found

The tool should handle compilation errors gracefully and report them clearly.

Input Format

Your tool should accept a configuration object with:

• sourceFile: Path to the TypeScript component file to compile
• outputDir: Directory where compiled output should be written

Output Format

Return an object with:

• success: Boolean indicating if compilation and verification succeeded
• outputFile: Path to the compiled JavaScript file (if successful)
• errors: Array of error messages (if any)
• metadata: Object containing information about detected decorators and transformations

Test Cases

• Given a TypeScript file with a basic @Component decorator and a simple render method, compilation succeeds and produces a .js file with decorator metadata and no TypeScript syntax @test

• Given a TypeScript file with @Component and @Prop decorators, compilation succeeds and the prop metadata is properly transformed in the output @test

• Given a TypeScript file with JSX in the render method, compilation succeeds and JSX is transformed to function calls with no JSX syntax remaining @test

• Given a TypeScript file with syntax errors, compilation fails gracefully with error details captured and no output file created @test

Implementation Notes

• Write your implementation in src/compiler-tool.ts
• Write your tests in test/compiler-tool.test.ts
• Use TypeScript for your implementation
• Make sure your tool can handle both successful and error scenarios

@generates

API

/**
 * Configuration for the compiler tool
 */
export interface CompilerConfig {
  sourceFile: string;
  outputDir: string;
}

/**
 * Result of compilation and verification
 */
export interface VerificationResult {
  success: boolean;
  outputFile?: string;
  errors: string[];
  metadata: {
    decorators: string[];
    hasJSXTransform: boolean;
  };
}

/**
 * Compiles a TypeScript component file and verifies the output
 *
 * @param config - Configuration specifying source file and output directory
 * @returns Verification result with compilation status and metadata
 */
export function compileAndVerify(config: CompilerConfig): Promise<VerificationResult>;

Dependencies { .dependencies }

@stencil/core { .dependency }

Provides the TypeScript compilation and transformation capabilities for web components.

@satisfied-by