Create ESLint rule

[Odonno]

Is it possible to create a ESlint rule for the untilDestroyed operator? Which means that we check that every Observable in a Component should contain a untilDestroyed(this) and at the last position in the pipe chain.

[NetanelBasal]

You're welcome to create a PR. It'll be nice to validate that the decorator exists.

[NetanelBasal]

You can use this as a reference.

[Odonno]

@NetanelBasal I believe that the @UntilDestroy() decorator is already checked at compilation. We could do it but what I really want to is detect Observable in every component and detect those who doesn't have the operator.

I already seen the work of @cartant but I have a hard time trying to understand how this thing works.

[NetanelBasal]

You are right, I forgot that we have protection.

[cartant]

FWIW, the rule linked above can be configured to use an alias - in addition to takeUntil - so you ought to be able to configure it to do what you want (if I understand you correctly). See the docs for the rule.

Also, something to be aware of is that ESLint rules are composable - see eslint-rule-composer and this post of mine. So if what you want to do can be represented by feeding configuration into an existing rule - i.e. to reduce boilerplate from more general, verbose config - that's possible.

[NetanelBasal]

Thanks, @cartant.

@Odonno I think that you want the following:

{
  "rxjs/no-unsafe-takeuntil": [
    "error",
    {
      "alias": ["untilDestroyed"]
    }
  ]
}

Is that right?

[Odonno]

Well, kinda. The only missing part would be to also check Observable without pipe. @cartant Can you confirm you also check Observable without pipe?

[NetanelBasal]

@Odonno I think that the rule only works if you are using the operator. It doesn't check if you have it.

[cartant]

This rule is probably what you are looking for. The other just makes sure that the takeUntil - or alias - is in the right place. You probably want both, TBH. If prefer-takeUntil doesn't effect a failure if subscribe is called without pipe being used, that would be a bug.

[NetanelBasal]

Awesome rules. @Odonno you can use it. It'll be great if you can create a PR that adds this information to our README.

Closing the issue. Thanks.

[mattdsteele]

@Odonno @NetanelBasal @cartant Are you successfully using this rule? I've attempted to install it in a project, but I'm unable to get the rule to fire as documented.

We've configured the plugin as such:

"rxjs-angular/prefer-takeuntil": [
    "error", {
​​​     "alias": ["untilDestroyed"],
     "checkComplete": true,
     "checkDecorators": ["Component"],
     "checkDestroy": true
}​​​​ ]

And using code similar to this in our components:

this.xyzService
  .pipe(untilDestroyed(this))
  .subscribe(data => {	
  });

But the plugin throws errors for `Forbids calling 'subscribe' without an accompanying 'takeUntil'.

Any idea what might be going on? I'm happy to open a new ticket (here or in the rxjs-angular repo) if you'd prefer.

[brunano21]

Hi @mattdsteele I'm facing the same issue, despite following the readme step-by-step. Have you got any progress eventually?