Bug 36674 - Lazy load api-client JS files
Summary: Lazy load api-client JS files
Status: Passed QA
Alias: None
Product: Koha
Classification: Unclassified
Component: Architecture, internals, and plumbing (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low enhancement
Assignee: Paul Derscheid
QA Contact: Lisette Scheer
URL:
Keywords: release-notes-needed
Depends on:
Blocks:
 
Reported: 2024-04-23 09:52 UTC by Jonathan Druart
Modified: 2025-10-13 10:17 UTC (History)
3 users (show)

See Also:
GIT URL:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Bug 36674: Lazy-load intranet API clients via proxy (11.51 KB, patch)
2025-09-18 10:09 UTC, Paul Derscheid
Details | Diff | Splinter Review
Bug 36674: Lazy-load intranet API clients via proxy (11.58 KB, patch)
2025-09-19 10:33 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 36674: Remove duplication (2.88 KB, patch)
2025-09-19 10:33 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 36674: Remove duplication (2.94 KB, patch)
2025-09-26 17:15 UTC, Lisette Scheer
Details | Diff | Splinter Review
Bug 36674: Lazy-load intranet API clients via proxy (11.64 KB, patch)
2025-09-26 17:16 UTC, Lisette Scheer
Details | Diff | Splinter Review
Bug 36674: Remove duplication (2.94 KB, patch)
2025-10-13 10:16 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Jonathan Druart 2024-04-23 09:52:08 UTC
js/fetch/api-client.js is fetching all the api-client.js files every time a page is hit in Koha.
We should lazy-load instead. Certainly using import()?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import
Comment 1 Paul Derscheid 2025-09-18 10:09:27 UTC
Created attachment 186551 [details] [review]
Bug 36674: Lazy-load intranet API clients via proxy

Replaced the eager imports in the intranet APIClient aggregator with
lazy proxies so individual client modules are only fetched the first
time they are actually used.

Documented the pattern in the createClientProxy JSDoc, and kept the legacy
synchronous API intact by forwarding property access, method calls, and
promise chaining. The Vue aggregator remains on static imports for now
because the rspack bundles already would handle chunking (which we need to configure)
and would require broader consumer changes.

This is a bit hacky, but only touches the api-client itself, which I like.
Otherwise we would have to adjust all consumers.

Test plan:
1. Log in to the staff interface and visit Admin → System preferences.
2. Open DevTools, Network tab, and enable “Disable cache”.
3. Trigger an API call (e.g. edit a preference and click “Save”, or run
await APIClient.sysprefs.sysprefs.update_all({}).catch(()=>{}); from
the console).
4. Confirm a new request for js/fetch/system-preferences-api-client.js
appears and the page still behaves as before.
5. Theoretically we would need to test all call sites..
6. Sign-off
Comment 2 Jonathan Druart 2025-09-19 10:33:18 UTC
Created attachment 186616 [details] [review]
Bug 36674: Lazy-load intranet API clients via proxy

Replaced the eager imports in the intranet APIClient aggregator with
lazy proxies so individual client modules are only fetched the first
time they are actually used.

Documented the pattern in the createClientProxy JSDoc, and kept the legacy
synchronous API intact by forwarding property access, method calls, and
promise chaining. The Vue aggregator remains on static imports for now
because the rspack bundles already would handle chunking (which we need to configure)
and would require broader consumer changes.

This is a bit hacky, but only touches the api-client itself, which I like.
Otherwise we would have to adjust all consumers.

Test plan:
1. Log in to the staff interface and visit Admin → System preferences.
2. Open DevTools, Network tab, and enable “Disable cache”.
3. Trigger an API call (e.g. edit a preference and click “Save”, or run
await APIClient.sysprefs.sysprefs.update_all({}).catch(()=>{}); from
the console).
4. Confirm a new request for js/fetch/system-preferences-api-client.js
appears and the page still behaves as before.
5. Theoretically we would need to test all call sites..
6. Sign-off

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 3 Jonathan Druart 2025-09-19 10:33:20 UTC
Created attachment 186617 [details] [review]
Bug 36674: Remove duplication

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 4 Jonathan Druart 2025-09-19 10:33:33 UTC
I have to admit I don't understand all what is doing the first patch but it's working very well!
Comment 5 Lisette Scheer 2025-09-26 17:15:50 UTC
Created attachment 186994 [details] [review]
Bug 36674: Remove duplication

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Lisette Scheer <lisette@bywatersolutions.com>
Comment 6 Lisette Scheer 2025-09-26 17:16:25 UTC
Created attachment 186995 [details] [review]
Bug 36674: Lazy-load intranet API clients via proxy

Replaced the eager imports in the intranet APIClient aggregator with
lazy proxies so individual client modules are only fetched the first
time they are actually used.

Documented the pattern in the createClientProxy JSDoc, and kept the legacy
synchronous API intact by forwarding property access, method calls, and
promise chaining. The Vue aggregator remains on static imports for now
because the rspack bundles already would handle chunking (which we need to configure)
and would require broader consumer changes.

This is a bit hacky, but only touches the api-client itself, which I like.
Otherwise we would have to adjust all consumers.

Test plan:
1. Log in to the staff interface and visit Admin → System preferences.
2. Open DevTools, Network tab, and enable “Disable cache”.
3. Trigger an API call (e.g. edit a preference and click “Save”, or run
await APIClient.sysprefs.sysprefs.update_all({}).catch(()=>{}); from
the console).
4. Confirm a new request for js/fetch/system-preferences-api-client.js
appears and the page still behaves as before.
5. Theoretically we would need to test all call sites..
6. Sign-off

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Lisette Scheer <lisette@bywatersolutions.com>
Comment 7 Lisette Scheer 2025-09-26 17:17:19 UTC
Thanks for all the notes in /koha-tmpl/intranet-tmpl/prog/js/fetch/api-client.js that'll be really helpful for future developers.
Comment 8 Lucas Gass (lukeg) 2025-10-10 18:20:03 UTC
We need a rebase here now.
Comment 9 Jonathan Druart 2025-10-13 10:16:07 UTC
Created attachment 187826 [details] [review]
Bug 36674: Remove duplication

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Lisette Scheer <lisette@bywatersolutions.com>
Comment 10 Jonathan Druart 2025-10-13 10:16:50 UTC Comment hidden (obsolete)
Comment 11 Jonathan Druart 2025-10-13 10:17:11 UTC
(In reply to Lucas Gass (lukeg) from comment #8)
> We need a rebase here now.

Patches were attached in reserve order.