RFC: Enhancing TreatyJs with Implicit Import Resolution and Optional Selectors

[Jordan-Hall]

RFC: Enhancing TreatyJs with Implicit Import Resolution and Optional Selectors

Introduction

In a continuous effort to streamline the development experience within the TreatyJs framework, a significant area for enhancement has been identified: the redundancy and complexity introduced by explicit import declarations in standalone components. This RFC proposes a series of advancements aimed at eliminating the need for such declarations, leveraging custom decorators for implicit import resolution and integrating the functionality of optional selectors, as detailed in RFC #2.

Objective

The primary goal of this RFC is to simplify the class-based authoring process in TreatyJs by removing the requirement for explicit imports in component metadata. This will be achieved through the introduction of custom decorators capable of automatically resolving necessary imports for components, directives, and pipes, thereby reducing boilerplate and enhancing code maintainability.

Problem Statement

The current TreatyJs and Angular frameworks require developers to manually specify imports for each standalone component:

@Component({
  template: '',
  standalone: true,
  imports: [CommonModule, CustomComponent, CustomDirective, CustomPipe]
})
export class ExampleComponent {}

This explicit import declaration, especially in large projects, leads to duplicated effort and increased potential for errors.

Proposed Solution

Custom Decorators for Implicit Imports

Introduce a @TreatyComponent decorator to automate the resolution of imports based on usage within the component's template and class file. This decorator will analyze the component's dependencies and implicitly include them, negating the need for the imports array:

@TreatyComponent({
  templateUrl: './user-profile.component.html',
  standalone: true
})
export class UserProfileComponent {}

Integration with Optional Selectors

Building on the foundational work of RFC #2, which introduces optional selectors for components and directives, this proposal further streamlines component usage within templates. The automatic selector generation (kebab-case and PascalCase) complements the implicit import mechanism, allowing for intuitive and concise template syntax.

Example HTML Template Usage:

---
import { AvatarComponent } from './avatar.component';
import { FullNamePipe } from './full-name.pipe';
---

<div class="user-profile">
  <avatar-component [imageUrl]="user.avatarUrl"></avatar-component>
  <h1>{{ user | fullName }}</h1>
</div>

This example highlights how components and pipes can be seamlessly used in templates without manual import declarations in the component metadata, thanks to the proposed enhancements.

Implementation Considerations

• Compatibility: Ensure that the custom decorators and optional selectors are fully compatible with Angular's Ivy compilation system.
• Developer Overrides: Allow for manual overrides or specifications to accommodate edge cases or specific customization needs.
• Performance: Optimize the inference engine for minimal impact on build times and runtime performance.

Summary

This RFC introduces a significant improvement to the TreatyJs development workflow by proposing the elimination of explicit imports through custom decorators and the integration of optional selectors. By reducing manual configuration and streamlining the authoring process, TreatyJs aims to offer a more intuitive and efficient framework for developers, focusing on convention over configuration and enhancing overall productivity.