Attachment 172970 Details for Bug 37911 – Bug 37911: (follow-up) Scan for requested components in caller and lazy load

[patch] Bug 37911: (follow-up) Scan for requested components in caller and lazy load

Bug-37911-follow-up-Scan-for-requested-components-.patch (text/plain), 5.34 KB, created by Matt Blenkinsop on 2024-10-18 12:07:19 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Matt Blenkinsop

Created: 2024-10-18 12:07:19 UTC

Size: 5.34 KB

patch

obsolete

>From 7628706d265c4f0ec983f04f79307d8402c86bf2 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
>
>Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
>---
> .../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 b4f1dfe59e9..378cff5a553 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> 
>+        <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>
>+            
>+        </div> 
> 
> [% 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 00000000000..51b5fbc732d
>--- /dev/null
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/HelloWorld.vue
>@@ -0,0 +1,18 @@
>+
>+
>+<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 9f0798ecb62..e5e8ae76b9d 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.39.3 (Apple Git-146)

Actions: View | Diff | Splinter Review

Attachments on bug 37911: 171425 | 171426 | 171432 | 171439 | 171440 | 171445 | 171459 | 171517 | 171538 | 171608 | 171685 | 172962 | 172963 | 172965 | 172966 | 172967 | 172968 | 172969 | 172970 | 172971 | 172972 | 172973 | 172974 | 172975