From e6a5b7fee2c9dabfb827ab1e87c4352ccb166d2b Mon Sep 17 00:00:00 2001
From: Paul Derscheid <paul.derscheid@lmscloud.de>
Date: Fri, 13 Sep 2024 11:32:26 +0000
Subject: [PATCH] Bug 37911: (follow-up) Scan for requested components in
 caller and lazy load

This should ensure that we only load what's requested.
Maybe we can also find a way to call the exported hydrate function on demand.
To test:
1) Apply the patch
2) Run yarn js:watch and wait for the first build if necessary
3) Load mainpage.pl and note that only hello-islands.ts is imported.
4) Uncomment <hello-world></hello-world> in intranet-main.tt
5) Reload the page
6) Note that now both component chunks are imported on demand
7) Discuss
---
 .../prog/en/modules/intranet-main.tt          | 10 +++-
 .../prog/js/vue/components/HelloWorld.vue     | 18 ++++++++
 .../prog/js/vue/modules/islands.ts            | 46 +++++++++++++++----
 3 files changed, 65 insertions(+), 9 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/HelloWorld.vue

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 d1c83f7e18..d5ac78f8da 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
@@ -11,7 +11,6 @@
     [% t("Koha staff interface") | html %]
 [% END %]</title>
 [% Asset.css("css/mainpage.css") | $raw %]
-[% Asset.js("js/vue/dist/islands.js", "defer" => 1, async => "1") | $raw %]
 [% INCLUDE 'doc-head-close.inc' %]
 </head>
 
@@ -307,8 +306,17 @@
 
             <hello-islands message="This is an attribute on the web component, that's bound to a prop in the Vue component. Cool, right?" color="dodgerblue"></hello-islands>
         </div> <!-- /.row -->
+        <div class="row w-25 m-auto p-4 border border-4 border-warning br-5 rounded text-center mt-4">
+            <p>
+                <span>Uncomment me in <span class="font-monospace">intranet-main.tt</span> 👇</span><br>
+                <span class="font-monospace text-danger">-&lt;!-- &lt;hello-world&gt;&lt;/hello-world&gt; --&gt;</span><br>
+                <span class="font-monospace text-success">+&lt;hello-world&gt;&lt;/hello-world&gt;</span>
+            </p>
+            <!-- <hello-world></hello-world> -->
+        </div> <!-- /.row -->
 
 [% MACRO jsinclude BLOCK %]
+    [% Asset.js("js/vue/dist/islands.js", "type" => "module") | $raw %]
     <script>
         var MSG_CONFIRM_DELETE = _("Are you sure you want to delete this news item? This cannot be undone.");
         $(document).ready(function(){
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/HelloWorld.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/HelloWorld.vue
new file mode 100644
index 0000000000..51b5fbc732
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/HelloWorld.vue
@@ -0,0 +1,18 @@
+<!--
+Say Hello World with Vue!
+-->
+
+<script setup>
+import { ref } from "vue"
+
+// A "ref" is a reactive data source that stores a value.
+// Technically, we don't need to wrap the string with ref()
+// in order to display it, but we will see in the next
+// example why it is needed if we ever intend to change
+// the value.
+const message = ref("Hello World!")
+</script>
+
+<template>
+    <h1>{{ message }}</h1>
+</template>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
index 9f0798ecb6..e5e8ae76b9 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
@@ -16,16 +16,46 @@ export const componentRegistry: Map<string, () => Promise<Component>> = new Map(
                 return module.default;
             },
         ],
+        [
+            "hello-world",
+            async () => {
+                const module = await import(
+                    /* webpackChunkName: "hello-world" */ "../components/HelloWorld.vue"
+                );
+                return module.default;
+            },
+        ],
     ]
 );
 
-// Register and define custom elements
-window.requestIdleCallback(async () => {
-    componentRegistry.forEach(async (importFn, name) => {
-        const component = await importFn();
-        customElements.define(
-            name,
-            defineCustomElement(component as any, { shadowRoot: false })
+/**
+ * Hydrates custom elements by scanning the document and loading only necessary components.
+ * @returns {void}
+ */
+export function hydrate(): void {
+    window.requestIdleCallback(async () => {
+        const islandTagNames = Array.from(componentRegistry.keys()).join(", ");
+        const requestedIslands = new Set(
+            Array.from(document.querySelectorAll(islandTagNames)).map(element =>
+                element.tagName.toLowerCase()
+            )
         );
+
+        requestedIslands.forEach(async name => {
+            const importFn = componentRegistry.get(name);
+            if (!importFn) {
+                return;
+            }
+
+            const component = await importFn();
+            customElements.define(
+                name,
+                defineCustomElement(component as any, {
+                    shadowRoot: false,
+                })
+            );
+        });
     });
-});
+}
+
+hydrate();
-- 
2.46.0