@divmain is the main author of this commit. I'm moving them from his repo this.
This PR introduces five new rules that check that browser APIs aren't used anywhere where SSR is done.
It will fail only if SSR-unfriendly code is found in specific methods. For example, you can use this.template.querySelector in renderedCallback but not in connectedCallback.
This is also true if your lifecycle method invokes another method on the LWC. For example, if connectedCallback calls this.foo() and foo tries to access document, the linter will complain.
This is also true for functions defined in module scope. For example, connectedCallback might call doSomething(), which is defined in the same module like so function doSomething() { document.write("<div/>") }. In this case, an error will be surfaced.
The linter cannot follow invocation patterns across module boundaries. For example, if doSomething is defined in a different module than your LWC, you're on your own and the linter can't help you.
Most browser APIs are locked down. You can't use this.template in SSR. You can't touch most browser global variables that aren't also available in Node.
Any if statements that have if(document !== undefined) are ignored. We don't check the else blocks as well.
@divmain is the main author of this commit. I'm moving them from his repo this.
This PR introduces five new rules that check that browser APIs aren't used anywhere where SSR is done.
this.template.querySelectorinrenderedCallbackbut not inconnectedCallback.connectedCallbackcallsthis.foo()andfootries to accessdocument, the linter will complain.connectedCallbackmight calldoSomething(), which is defined in the same module like sofunction doSomething() { document.write("<div/>") }. In this case, an error will be surfaced.doSomethingis defined in a different module than your LWC, you're on your own and the linter can't help you.this.templatein SSR. You can't touch most browser global variables that aren't also available in Node.if(document !== undefined)are ignored. We don't check the else blocks as well.