From 6a4efcf3e3eec42bea6307165b54a814db0bc28f Mon Sep 17 00:00:00 2001
From: Paul Derscheid <paul.derscheid@lmscloud.de>
Date: Fri, 13 Sep 2024 10:39:00 +0200
Subject: [PATCH] Bug 37911: (follow-up) Experimental introduction of dynamic
 imports for code splitting

Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
---
 .../prog/js/vue/modules/islands.ts             | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

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 db8dcb5d928..862a19df4b1 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
@@ -1,17 +1,25 @@
 import { Component, defineCustomElement } from "vue";
-import HelloIslands from "../components/HelloIslands.vue";
 
 /**
  * A registry for Vue components.
- * @type {Map<string, string>}
+ * @type {Map<string, () => Promise<Component>>}
  */
 export const componentRegistry: Map<string, () => Promise<Component>> = new Map(
-    [["hello-islands", HelloIslands]]
+    [
+        [
+            "hello-islands",
+            async () => {
+                const module = await import("../components/HelloIslands.vue");
+                return module.default;
+            },
+        ],
+    ]
 );
 
 // Register and define custom elements
-window.requestIdleCallback(() => {
-    componentRegistry.forEach((component, name) => {
+window.requestIdleCallback(async () => {
+    componentRegistry.forEach(async (importFn, name) => {
+        const component = await importFn();
         customElements.define(
             name,
             defineCustomElement(component as any, { shadowRoot: false })
-- 
2.39.3 (Apple Git-146)