Bugzilla – Attachment 176964 Details for
Bug 37911
Prototype vue islands within static pages
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[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.32 KB, created by
Matt Blenkinsop
on 2025-01-23 14:30:49 UTC
(
hide
)
Description:
Bug 37911: (follow-up) Scan for requested components in caller and lazy load
Filename:
MIME Type:
Creator:
Matt Blenkinsop
Created:
2025-01-23 14:30:49 UTC
Size:
5.32 KB
patch
obsolete
>From f596209c4146bb655ec661865b205432972587e4 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 fd9d2ffb3f9..62c6f7284b7 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> > >@@ -313,8 +312,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">-<!-- <hello-world></hello-world> --></span><br> >+ <span class="font-monospace text-success">+<hello-world></hello-world></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 00000000000..51b5fbc732d >--- /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 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.48.1
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
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
|
176959
|
176960
|
176961
|
176962
|
176963
| 176964 |
176965
|
176966
|
176967
|
176968
|
176969
|
176970
|
176972