Intercept network resource requests / defining resource loader

[SebJansen]

Is your feature request related to a problem? Please describe.
JSDOM has the ability to define custom resource loaders, to avoid the need for network requests, by going through the filesystem instead. This saves precious milliseconds.

JSDOM resource loaders also have access to the requesting HTML element; eg if a style element is requesting a CSS file, the loader can get it from the filesystem instead and then replace the element with a <style> element with the CSS inlined to prevent the client needing to make an additional network request for the CSS file upon first page being served.

Describe the solution you'd like
Some way to intercept network requests and instead serve them from the filesystem. Perhaps this is already possible with HappyDOM but merely undocumented.

Describe alternatives you've considered
Overriding window.fetch requires some properties like browser frame, which are not exposed during eg new Window(). Perhaps with a little guidance it is possible to document a way to override fetch.

[Doeke]

I've also just run into this issue, the code I need to test at some point adds a <link> tag to load a webfont which results in AbortErrors (in Fetch.onAsyncTaskManagerAbort) while running tests.

Edit: All I have found is the setting disableCSSFileLoading, but no way to intercept or mock it. This setting also annoyingly still prints errors to stdout (NotSupportedError) every time a CSS file is requested

[mariusrak]

Hi, i also very much need this. I do requests only inside my own server and do not need to go through network. So this intercepting fetch request would greatly increase performance and security.

[OlaviSau]

Hi :) We also would greatly appreciate this, again currently using patch-package to get around this.

[OlaviSau]

#1556 Just an example of something that could work.

[SebJansen]

Maybe it's simpler to build this feature if we see it as overriding (some part of) Happy's caching behavior, that is executed in addition to preexisting behavior, only if this 'Cache 'Interceptor' is defined during initialization

[SebJansen]

#1556 Just an example of something that could work.

Looks like a clean and simple solution! :)

I hope capricorn86 see this so that he can steer us into a certain direction

There's the happy-dom-without-node package that might be polluted if we go a little crazy here with nodejs specific code

[OlaviSau]

@SebJansen I discussed it with a colleague and although file urls would work, the caching would be a bit tricky as files can change at any moment. It is probably wiser to implement a full interceptor instead.

[capricorn86]

Hi! 👋
I agree that something is needed, but I'm not sure what the best solution would be yet 😅 Another feature I would like is to make it possible to simulate a local web-server that is served from a "public" directory. It should also be easy to add transformers for resources loaded.

If you feel that this should be prioritized, I recommend adding a 👍 to the ticket. There are a lot of feature requests to sort between and the thumb indicate that several has voted for it.

[mariusrak]

Hi, I'm trying to replace JSDOM with happy-dom. I think, JSDOM solves this problem just right. You can define ResourceLoader in options an provide a class that implements fetch() method it should return Buffer with result. It would be nice if it would process not only buffer but also http.response, but that's just minor detail. Anyways, this mechanism works great for me, I implement custom simulation of a local server as you mention and it works together very well. What do you think about this approach?

[capricorn86]

@mariusrak I will have to look into it in more detail. I think that the downside of using a class is that it is not very declarative. It could be nice to be able to send in some settings with the rules. Perhaps both and easy and an advanced option can be supported.

[mariusrak]

@capricorn86 there are some stuff you cannot achieve by declarative approach and rules. I'm using JSDOM inside worker, I need to send custom message to main thread on fetch. Even if you made some config options for this particular case, somebody will for sure come up with something that is not implemented. Can we go for start with the imperative way and maybe later introduce some declarative API?

[OlaviSau]

@capricorn86 We also use happy-dom inside an worker and the interceptor (implemented using patch-package) is used to provide assets directly from the file system. To me - an user defined interceptor seems to be the best solution as only the user knows when the files are supposed to update, doing that with a declarative approach is hard to imagine, but I am looking forward to seeing / hearing your ideas :)

[SebJansen]

@capricorn86 We also use happy-dom inside an worker and the interceptor (implemented using patch-package) is used to provide assets directly from the file system. To me - an user defined interceptor seems to be the best solution as only the user knows when the files are supposed to update, doing that with a declarative approach is hard to imagine, but I am looking forward to seeing / hearing your ideas :)

Agreed. I think something as trivial as authorization often requires complicated and special logic that is more suitable to an imperative flow.