From 1c5ece3becf3ad070c0667ecacab177452e62de4 Mon Sep 17 00:00:00 2001 From: Paul Derscheid Date: Tue, 19 Aug 2025 12:14:33 +0000 Subject: [PATCH] [24.11.x] Bug 37911: Prototype vue islands within static pages (squashed) This backport introduces Vue islands to 24.11.x, allowing Vue components to be embedded as web components within static HTML pages in Koha. In my opinion this is necessary as it is a base for potential future bugfixes. Summary: - Vue islands TypeScript module with component registry - Dual rspack configuration for regular and ESM module builds - Support for dynamic imports and code splitting - Integration with Pinia stores for state management - Updates to Makefile.PL to handle generated vue/dist files - Removal of deprecated webpack.config.js in favor of rspack Before pushing: - Verify yarn build (in all varieties) works as it is supposed to - That the Vue app bundles, e.g. ERM work exactly as before All 20 patches were squashed for a clean backport to 24.11.x. --- Makefile.PL | 14 +- .../prog/en/modules/intranet-main.tt | 1 - .../prog/js/vue/modules/islands.ts | 95 + package.json | 3 +- rspack.config.js | 204 +- webpack.config.js | 45 - yarn.lock | 1910 ++++++++++++++++- 7 files changed, 2089 insertions(+), 183 deletions(-) create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts delete mode 100644 webpack.config.js diff --git a/Makefile.PL b/Makefile.PL index b11bfe1518e..ff7006ead19 100644 --- a/Makefile.PL +++ b/Makefile.PL @@ -673,9 +673,7 @@ $file_map->{'koha-tmpl/intranet-tmpl/prog/css/holds.css'} = 'blib/INTRANET_TMPL_ $file_map->{'koha-tmpl/intranet-tmpl/prog/css/installer.css'} = 'blib/INTRANET_TMPL_DIR/prog/css/installer.css'; $file_map->{'koha-tmpl/intranet-tmpl/prog/css/mainpage.css'} = 'blib/INTRANET_TMPL_DIR/prog/css/mainpage.css'; $file_map->{'koha-tmpl/intranet-tmpl/prog/css/staff-global.css'} = 'blib/INTRANET_TMPL_DIR/prog/css/staff-global.css'; -$file_map->{'koha-tmpl/intranet-tmpl/prog/js/vue/dist/erm.js'} = 'blib/INTRANET_TMPL_DIR/prog/js/vue/dist/erm.js'; -$file_map->{'koha-tmpl/intranet-tmpl/prog/js/vue/dist/preservation.js'} = 'blib/INTRANET_TMPL_DIR/prog/js/vue/dist/preservation.js'; -$file_map->{'koha-tmpl/intranet-tmpl/prog/js/vue/dist/admin/record_sources.js'} = 'blib/INTRANET_TMPL_DIR/prog/js/vue/dist/admin/record_sources.js'; +#NOTE: The 'koha-tmpl/intranet-tmpl/prog/js/vue/dist' directory is now handled in the "top_targets" function #OPAC_TMPL_DIR $file_map->{'koha-tmpl/opac-tmpl/bootstrap/css/opac.css'} = 'blib/OPAC_TMPL_DIR/bootstrap/css/opac.css'; $file_map->{'koha-tmpl/opac-tmpl/bootstrap/css/opac-rtl.css'} = 'blib/OPAC_TMPL_DIR/bootstrap/css/opac-rtl.css'; @@ -1821,11 +1819,19 @@ sub postamble { sub top_targets { my $inherited = shift->SUPER::top_targets(@_); my $compile_step; + + #NOTE: Make "all" depend on "compile_css_js" $compile_step .= "all :: compile_css_js\n"; $compile_step .= "\t" . '$(NOECHO) $(NOOP)' . "\n"; $compile_step .= "\n"; - $compile_step .= "compile_css_js:\n"; + + #NOTE: Make compile_css_js depend on pm_to_blib, so we have access to the blib directory + $compile_step .= "compile_css_js: pm_to_blib\n"; $compile_step .= "\t" . '$(PERLRUN) build-resources.PL' . "\n"; + + #NOTE: Copy the generated vue dist files into the relevant blib + $compile_step .= "\t" . 'cp -r koha-tmpl/intranet-tmpl/prog/js/vue/dist blib/INTRANET_TMPL_DIR/prog/js/vue/' . "\n"; + my $top_targets = $compile_step . "\n" . $inherited; return $top_targets; } diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt index c32de6ab9bf..2c1e98715c5 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt @@ -307,7 +307,6 @@ - [% MACRO jsinclude BLOCK %]