[swc-plugin-angular] Functional APIs (e.g. input()) are broken if a property is declared in the constructor

[yjaaidi]

This doesn't work because the input is not decorated:

class MyCmp {
  title = input();
  constructor(private myService: MyService) {}
}

This happens because this is parsed by SWC as:

class MyCmp {
  title;
  private myService;
  constructor(myService) {
    this.myService = myService;
    this.title = input();
  }
}

We have to detect functional APIs in the constructor.

Meanwhile, the workaround is to use the inject() function which is the approach I'd recommend in general.

[pumano]

got this also: looks like problem in ts config "useDefineClassFields" where by default is true, but need false for proper working (in my case). I got some issue about that swc-project/swc#6985 but when I try to set

.swcrc

{
  "$schema": "https://swc.rs/schema.json",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false,
      "decorators": true
    },
    "transform": {
      "useDefineForClassFields": false,
      "legacyDecorator": true,
      "decoratorMetadata": true
    },
    "target": "es2022"
  },
  "module": {
    "type": "commonjs"
  }
}

Also I try to add that in swcAngularPreset inside npm package "@swc-angular" but it's not working.

console.error
      NG0303: Can't set value of the 'addresses' input on the 'AddressComponent' component. Make sure that the 'addresses' property is annotated with @Input() or a mapped @Input('addresses') exists.

[pumano]

I prepare unit test (but have to luck to run it due to failed build of lib):

Need to add it to "tests/swc-angular-wide/src/swc-plugin-angular-input.spec.ts" and run.

  it('should bind inputs via setInput', () => {
    @Component({
      standalone: true,
      selector: 'jsc-title',
      template: ` <h1>Hello {{ title() }}!</h1> `,
    })
    class Title {
      title = input<string>();
    }

    const { fixture } = createComponent(Title);
    fixture.componentRef.setInput('title', 'title')
    expect((fixture.componentInstance as Title).title).toBe('title');
  });