From 5e5df69af48bec2ccd7c0f48c36c77eeb929938b Mon Sep 17 00:00:00 2001 From: Paul Derscheid Date: Fri, 13 Sep 2024 01:38:35 +0200 Subject: [PATCH] Bug 37911: (follow-up) Update to vue ^3.5.4, use vue's web component implementation instead - This would require us to update vue to a new minor version. - We could then use the defineCustomElement function with the shadowRoot option set to false (this is important). - The current implementation in islands.ts is naive and would result in an intolerable bundle size. - The right way to do code splitting here is to use dynamic imports. Signed-off-by: Matt Blenkinsop --- .../prog/en/modules/intranet-main.tt | 7 +- .../prog/js/vue/components/HelloIslands.vue | 8 +- .../prog/js/vue/modules/islands.ts | 103 +++--------------- package.json | 6 +- rspack.config.js | 1 + 5 files changed, 28 insertions(+), 97 deletions(-) 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 85ba090b50d..a597af79640 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt @@ -13,7 +13,7 @@ [% END %] [% Asset.css("css/mainpage.css") | $raw %] -[% Asset.js("js/vue/dist/islands.js") | $raw %] +[% Asset.js("js/vue/dist/islands.js", "defer" => 1, async => "1") | $raw %] [% INCLUDE 'doc-head-close.inc' %] @@ -335,7 +335,7 @@

🚧 Static Page with Vue Components 🚧

-
+
@@ -348,7 +348,8 @@ }); setTimeout(() => { - document.getElementById("hello-islands").dataset.props = JSON.stringify({ message: "This is a delayed message! Changes to data-props currently unfortunately reset the internal state." }); + const [firstHelloIslandsElement] = document.getElementsByTagName("hello-islands"); + firstHelloIslandsElement.message = "This is a delayed update to the message attribute of the web commponent."; }, 2000); }); diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/HelloIslands.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/HelloIslands.vue index 685e9f23d56..6890ece7265 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/HelloIslands.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/HelloIslands.vue @@ -1,5 +1,5 @@