[Proposal] Resolve injections in properties

[makamekm]

Hi. I have a proposal. There is an example:

export class Config {
    public url = "https://google.com";
}

export class SubService {
    @inject public configModel: ConfigModel;
}

export class MainService {
    public prop = new SubService();
    public props = [new SubService(), new SubService()];
}

@provider(
    Config,
    MainService,
)
export class Html extends React.Component {
    @inject private service: MainService;
}

[gnaeus]

Your example already works with inject() function syntax (without decorators):

class Config {
  url = "https://google.com";
}

class SubService {
  configModel = inject(this, Config)
}

class MainService {
  prop = new SubService();
  props = [new SubService(), new SubService()];
}

class Html extends React.Component {
  static contextType = InjectorContext;

  service = inject(this, MainService);

  render() {
    html = this;
    return <div />;
  }
}
let html: Html;

const App = provider(Config, MainService)(Html);

render(<App />, document.createElement("div"));
expect(html.service.prop.configModel.url).toBe("https://google.com");
expect(html.service.props[0].configModel).toBe(html.service.prop.configModel);
expect(html.service.props[1].configModel).toBe(html.service.prop.configModel);

But with decorators it can't work. Because @inject doesn't immediately write dependency to decorated property, but rather it define a lazy property getter that resolves dependency on demand. And it is conceptual limitation of TypeScript decorators.