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
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
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>
Created attachment 186617 [details] [review] Bug 36674: Remove duplication Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
I have to admit I don't understand all what is doing the first patch but it's working very well!
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>
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>
Thanks for all the notes in /koha-tmpl/intranet-tmpl/prog/js/fetch/api-client.js that'll be really helpful for future developers.
We need a rebase here now.
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>
(In reply to Lucas Gass (lukeg) from comment #8) > We need a rebase here now. Patches were applied in reserve order.
(In reply to Lucas Gass (lukeg) from comment #8) > We need a rebase here now. Patches were attached in reserve order.
Nice work everyone! Pushed to main for 25.11
This appears to be causing the following warning when doing yarn js:watch WARNING in ./koha-tmpl/intranet-tmpl/prog/js/fetch/api-client.js ⚠ Module parse warning: ╰─▶ ⚠ Critical dependency: the request of a dependency is an expression ╭─[226:26] 224 │ key, 225 │ createClientProxy(function() { 226 │ return import(path); · ───── 227 │ }) 228 │ ]; ╰──── Rspack compiled with 1 warning in 1.01 s
Created attachment 188316 [details] [review] Bug 36674: Fix warning WARNING in ./koha-tmpl/intranet-tmpl/prog/js/fetch/api-client.js ⚠ Module parse warning: ╰─▶ ⚠ Critical dependency: the request of a dependency is an expression ╭─[226:26] 224 │ key, 225 │ createClientProxy(function() { 226 │ return import(path); · ───── 227 │ }) 228 │ ]; ╰────
Is this patch correct, Paul? https://webpack.js.org/guides/dependency-management/#requirecontext Seems a bit useless but it removes the warning.
Looking.
The problem was actually introduced by > Bug 36674: Remove duplication The commit tried to DRY up the code by extracting paths into variables, using import(path) instead of import("./patron-api-client.js"). The problem is that webpack/rspack needs to see those literal strings at build time to know which files to bundle - when you use a variable, it can't figure that out until runtime. The fix is just to revert 3a6fe57c269367a3dfedee0720b0857314c77dbf.
I think this was just a problem for the cypress entry point that actually bundles the thing.
Created attachment 188326 [details] [review] Bug 36674: Revert "Bug 36674: Remove duplication" This reverts commit 3a6fe57c269367a3dfedee0720b0857314c77dbf.
3a6fe57c269367a3dfedee0720b0857314c77dbf is reverted from main now
We broke api-client.ts Oops...we found an error preparing this test file: > t/cypress/integration/t/api-client.ts The error was: Error: Webpack Compilation Error Module parse failed: Unexpected token (1:10) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
Taking a look.
Created attachment 189012 [details] [review] Bug 36674: (follow-up) Stop emitting Cypress API client source maps - Use devtool: false to prevent emitting source maps for cypress. - Add package script to clean built assets, artifacts.
Joubu, try the last patch, run yarn js:clean then rebuild, the error should be gone.
+ "js:clean": "find koha-tmpl/intranet-tmpl/prog/js/vue/dist -type f -name '*.js*' -delete && find t/cypress/plugins/dist -type f -name '*.js*' -delete", Why not `rm -rf koha-tmpl/intranet-tmpl/prog/js/vue/dist/* t/cypress/plugins/dist/*` ? The reason I am asking is that there is a subdir koha-tmpl/intranet-tmpl/prog/js/vue/dist/admin that will be left empty with the command you suggested.
Oh, sorry. I overlooked that.
Created attachment 189153 [details] [review] Bug 36674: (follow-up) Stop emitting Cypress API client source maps - Use devtool: false to prevent emitting source maps for cypress. - Add package script to clean built assets, artifacts.
I often use find since I think it's more flexible if you want to keep some stuff but in this case it doesn't provide any benefit.
Created attachment 189551 [details] [review] Bug 36674: (follow-up) Stop emitting Cypress API client source maps - Use devtool: false to prevent emitting source maps for cypress. - Add package script to clean built assets, artifacts. Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>