lit / lit/lit

[labs/gen-wrapper-angular] Improved @Input types for Angular wrappers

Open
#4,752 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
21.8k
Forks
1.1k
Avg merge
18h 25m
Merged PRs (30d)
2

Description

### Should this be an RFC?

- [X] This is not a substantial change

### Which package is this a feature request for?

Other/unknown (please mention in description)

### Description

The current Angular wrapper generator (`labs/gen-wrapper-angular`) cannot get complex types for `@Input` properties. There is an easy fix for this:

Current:

```js
${Array.from(reactiveProperties.entries()).map(
([propertyName, property]) => javascript`
@Input()
set ${propertyName}(v: ${property.type?.text ?? 'any'}) {
this._ngZone.runOutsideAngular(() => (this._el.${propertyName} = v));
}
```

Proposed:
```js
${Array.from(reactiveProperties.entries()).map(
([propertyName, property]) => javascript`
@Input()
set ${propertyName}(v: ${name}Element[${propertyName}]) {
this._ngZone.runOutsideAngular(() => (this._el.${propertyName} = v));
}
```

Notice the change: `${name}Element[${propertyName}]`

Something similar can be done for events as well. But in this issue I think we can simply fix the Input properties because events could change substantially: [Declarative event emitters #3277](https://github.com/lit/lit/issues/3277).

### Alternatives and Workarounds

Currently we maintain our own wrapper generation code in-house.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the labs/gen-wrapper-angular generator and inspect how it builds @Input setter types from reactiveProperties. Update the generated type expression so complex property types come from the corresponding element property, then verify generated Angular wrappers expose the intended @Input types without changing event generation.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, tooling
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.