feat: generate Angular components from JSON schema #2
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a NestJS-powered CLI tool that generates Angular Material form components from JSON Schema definitions. The generator reads a schema file and produces TypeScript and HTML component files with Material form fields, validation, and reactive form controls.
Key Changes:
- Added a SchemaGeneratorService that transforms JSON Schema into Angular component code
- Created a NestJS module and CLI entry point for running the generator
- Added NestJS dependencies and an npm script to invoke the generator
Reviewed Changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/schema-generator/schema-generator.service.ts | Core service implementing JSON Schema parsing and Angular component generation logic |
| src/schema-generator/schema-generator.module.ts | NestJS module providing the generator service |
| src/schema-generator/main.ts | CLI entry point bootstrapping the NestJS application context |
| src/schema-generator/example.schema.json | Sample JSON Schema demonstrating supported field types and validation |
| package.json | Added NestJS dependencies and schema:generate npm script |
| README.md | Documentation for the generator usage and workflow |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| controlGetters ? ` | ||
| ${controlGetters} | ||
| ` : '', |
There was a problem hiding this comment.
The control getters are wrapped in a template literal with extra blank lines that will create inconsistent spacing in the generated code. Consider formatting this more cleanly by either including the getters directly in the lines array at the appropriate position or handling the newlines explicitly without the template literal.
| controlGetters ? ` | |
| ${controlGetters} | |
| ` : '', | |
| controlGetters ? '' : '', | |
| controlGetters, |
|
|
||
| if (property.enum && property.enum.length) { | ||
| const options = property.enum | ||
| .map((value) => ` <mat-option [value]="${JSON.stringify(value)}">${value}</mat-option>`) |
There was a problem hiding this comment.
The value variable is interpolated directly into HTML without escaping. If the enum value contains HTML special characters, it could lead to malformed markup or potential XSS issues. Use proper HTML escaping for the display text portion.
| } | ||
|
|
||
| private requiredErrorTemplate(key: string, label: string): string { | ||
| return ` <mat-error *ngIf="${this.toCamel(key)}Control?.hasError('required')">${label} is required</mat-error>`; |
There was a problem hiding this comment.
The label variable is interpolated directly into the error message without HTML escaping. If the label contains special characters like < or >, it could result in malformed HTML or XSS vulnerabilities in the generated component.
| schemaTitle ? ` <h2>${schemaTitle}</h2>` : '', | ||
| schemaDescription ? ` <p class="form-description">${schemaDescription}</p>` : '', |
There was a problem hiding this comment.
The schemaTitle and schemaDescription values are interpolated directly into HTML without escaping. If these contain HTML special characters or malicious content, it could lead to XSS vulnerabilities in the generated component. Apply HTML escaping to these values.
| private renderField(key: string, property: JsonSchemaProperty, required: Set<string>): string { | ||
| const type = this.resolvePropertyType(property); | ||
| const label = property.title ?? this.toTitle(key); | ||
| const description = property.description ? `\n <mat-hint>${property.description}</mat-hint>` : ''; |
There was a problem hiding this comment.
The property.description is interpolated directly into the HTML hint without escaping. If the description contains HTML special characters, it could lead to XSS vulnerabilities. Ensure proper HTML escaping is applied.
| description: string, | ||
| options: { hint?: string } = {}, | ||
| ): string { | ||
| const hint = options.hint ? `\n <mat-hint>${options.hint}</mat-hint>` : ''; |
There was a problem hiding this comment.
The options.hint is interpolated directly into HTML without escaping. Although currently only hard-coded strings are passed, this pattern could allow unescaped content if the function is reused. Apply HTML escaping for consistency and safety.
1 participant
Summary
Testing
https://chatgpt.com/codex/tasks/task_b_68f2100447a4832d9f7f76ca345a3db6