RFC: Destructuring Assignment in Treaty Meta-framework

[Jordan-Hall]

Area: Authoring

Status: Draft

Introduction

Treaty introduces a novel feature: Destructuring Assignment for component properties, directly within .treaty files. This RFC proposes the syntax and mechanics for this feature, allowing developers to pass an object's properties as inputs to a component in a concise and readable manner.

Proposal

This proposal outlines the implementation of Destructuring Assignment in Treaty, enabling developers to destructure an object's properties and pass them as inputs to a component. The feature requires the assignment to be at the top level for seamless compiler support.

Syntax

Given an object with signals:

const obj = { firstName: signal('Treaty'), messageTo: signal('World') };

A component can be invoked with the destructured properties as follows:

<my-component {...obj} />

Compiler Behavior

The Treaty compiler automatically translates the destructured assignment into individual property bindings for the component, effectively rendering as:

<my-component [firstName]="obj.firstName" [messageTo]="obj.messageTo" />

Support for Outputs

If a property key ends in Change, it is recognized as an output event. For instance, firstNameChange in the object would bind to the firstNameChange event of <my-component>.

Note: We can also support two way binding with model rather than the change convention. That convention is used just to help when its no two way binding

Examples

Basic Usage

Given a component <user-profile> expecting firstName and lastName inputs:

Using in .treaty file:

RFC-5.mp4

const userProfileData = { firstName: signal('Jane'), lastName: signal('Doe') };

<user-profile {...userProfileData} />

Translates to:

<user-profile [firstName]="userProfileData.firstName" [lastName]="userProfileData.lastName" />

Handling Outputs

If userProfileData includes an output property:

const userProfileData = { firstName: signal('Jane'), lastNameChange: signal() };

Using in .treaty file:

<user-profile {...userProfileData} />

Automatically binds lastNameChange as an output event.

Discussion Points

• Tooling Support: Enhancements to editor tooling for syntax highlighting and autocompletion of destructured assignments.
• Limitations: Exploring the limitations of top-level assignments and potential workarounds for nested structures or dynamic property bindings.
• Community Feedback: Soliciting feedback from the developer community on the utility and ergonomics of the proposed destructuring assignment syntax.

Conclusion

Destructuring Assignment in Treaty significantly simplifies the syntax for passing data into components, aligning with modern JavaScript practices and improving DX. By automating the translation of destructured properties into component inputs (and outputs where applicable), Treaty enables more readable and maintainable code, fostering a developer-friendly environment within the Angular ecosystem.