Hone logo
Hone
Problems

Angular Compiler Plugin for Custom Directive Decorator Validation

This challenge asks you to implement a simple Angular compiler plugin that validates a custom directive decorator. The plugin will check if a directive decorated with @ValidateDirective(validationString) has a non-empty validationString argument. This is a common scenario when building reusable component libraries or enforcing specific coding standards within an Angular project. Successfully completing this challenge demonstrates understanding of Angular's compiler plugin architecture and how to extend it to perform custom validations.

Problem Description

You need to create an Angular compiler plugin that intercepts the processing of directives decorated with a custom decorator named @ValidateDirective. This decorator takes a single string argument, representing a validation string. The plugin's responsibility is to ensure that the validationString argument passed to @ValidateDirective is not an empty string. If it is, the plugin should throw a compilation error with a descriptive message.

What needs to be achieved:

  1. Create a compiler plugin that registers a schema for the @ValidateDirective decorator.
  2. Implement a validation logic within the plugin that checks if the validationString argument is empty.
  3. If the validationString is empty, throw a compilation error with a clear message indicating the issue.
  4. The plugin should not interfere with the compilation process if the validationString is not empty.

Key Requirements:

  • The plugin must be written in TypeScript.
  • The plugin must correctly register the @ValidateDirective decorator schema.
  • The validation logic must be accurate and efficient.
  • The error message should be informative and guide the developer to fix the problem.
  • The plugin should not introduce any unnecessary dependencies.

Expected Behavior:

  • When a directive is decorated with @ValidateDirective(''), the compilation should fail with an error message like: "Validation string cannot be empty for @ValidateDirective."
  • When a directive is decorated with @ValidateDirective('someValue'), the compilation should proceed without errors.
  • Directives decorated with other decorators should not be affected by the plugin.

Edge Cases to Consider:

  • validationString being null or undefined. Treat these as empty strings for validation purposes.
  • validationString being a whitespace-only string (e.g., " "). Treat this as an empty string.
  • The plugin should handle multiple @ValidateDirective decorators on the same directive. (The first error found should be reported).

Examples

Example 1:

// Directive with empty validation string
@ValidateDirective('')
class MyDirective {}
Output: Error: Validation string cannot be empty for @ValidateDirective.

Explanation: The plugin detects the empty validationString and throws a compilation error.

Example 2:

// Directive with a valid validation string
@ValidateDirective('validString')
class MyDirective {}
Output: Compilation succeeds without errors.

Explanation: The plugin does not detect any issues and allows the compilation to proceed.

Example 3:

// Directive with a whitespace-only validation string
@ValidateDirective('   ')
class MyDirective {}
Output: Error: Validation string cannot be empty for @ValidateDirective.

Explanation: The plugin treats the whitespace-only string as empty and throws an error.

Constraints

  • The plugin must be compatible with Angular 16 or later.
  • The plugin should be designed to be lightweight and have minimal impact on compilation performance. Avoid complex or unnecessary computations.
  • The error message should be concise and easy to understand.
  • The plugin should not introduce any breaking changes to existing Angular projects.

Notes

  • You'll need to leverage Angular's CompilerPlugin and MetadataValidator interfaces.
  • Consider using the StaticSymbol to access the decorator arguments.
  • The plugin should be designed to be reusable and easily adaptable to other validation scenarios.
  • Think about how to handle potential errors during schema registration.
  • Remember to export the plugin as a default export.
  • You will need to create a schema for the @ValidateDirective decorator. This schema defines the expected arguments for the decorator.
Loading editor...
typescript