Attachment 172972 Details for Bug 37911 – Bug 37911: (follow-up) Move store initialisation into hydrate's idle callback

[patch] Bug 37911: (follow-up) Move store initialisation into hydrate's idle callback

Bug-37911-follow-up-Move-store-initialisation-into.patch (text/plain), 4.90 KB, created by Matt Blenkinsop on 2024-10-18 12:07:25 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Matt Blenkinsop

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

Size: 4.90 KB

patch

obsolete

>From 442054af1172e56a2d6dcf0b16be3b89c877c7d4 Mon Sep 17 00:00:00 2001
>From: Paul Derscheid <paul.derscheid@lmscloud.de>
>Date: Mon, 16 Sep 2024 12:17:55 +0000
>Subject: [PATCH] Bug 37911: (follow-up) Move store initialisation into
> hydrate's idle callback
>
>- Additionally:
>    - Use a type instead of an interface.
>        - Add JSDoc to it.
>    - Use optional chaining when checking for existence and length of config.
>
>Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
>---
> .../prog/js/vue/modules/islands.ts            | 93 ++++++++++---------
> 1 file changed, 48 insertions(+), 45 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 1571d2ced6c..c5e04a183a9 100644
>--- a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
>@@ -4,54 +4,51 @@ import { useMainStore } from "../stores/main";
> import { useNavigationStore } from "../stores/navigation";
> 
> /**
>- * A registry for Vue components.
>- * @type {Map<string, () => Promise<Component>>}
>+ * Represents a web component with an import function and optional configuration.
>+ * @typedef {Object} WebComponentDynamicImport
>+ * @property {function(): Promise<Component>} importFn - A function that imports the component dynamically.
>+ * @property {Object} [config] - An optional configuration object for the web component.
>+ * @property {Array<string>} [config.stores] - An optional array of strings representing store names associated with the component.
>  */
>-interface WebComponent {
>+type WebComponentDynamicImport = {
>     importFn: () => Promise<Component>;
>-    config?: {
>-        stores: string[];
>-    };
>-}
>-export const componentRegistry: Map<string, WebComponent> = new Map([
>-    [
>-        "hello-islands",
>-        {
>-            importFn: async () => {
>-                const module = await import(
>-                    /* webpackChunkName: "hello-islands" */
>-                    "../components/HelloIslands.vue"
>-                );
>-                return module.default;
>-            },
>-            config: {
>-                stores: ["mainStore", "navigationStore"],
>+    config?: Record<"stores", Array<string>>;
>+};
>+
>+/**
>+ * A registry for Vue components.
>+ * @type {Map<string, WebComponentDynamicImport>}
>+ */
>+export const componentRegistry: Map<string, WebComponentDynamicImport> =
>+    new Map([
>+        [
>+            "hello-islands",
>+            {
>+                importFn: async () => {
>+                    const module = await import(
>+                        /* webpackChunkName: "hello-islands" */
>+                        "../components/HelloIslands.vue"
>+                    );
>+                    return module.default;
>+                },
>+                config: {
>+                    stores: ["mainStore", "navigationStore"],
>+                },
>             },
>-        },
>-    ],
>-    [
>-        "hello-world",
>-        {
>-            importFn: async () => {
>-                const module = await import(
>-                    /* webpackChunkName: "hello-world" */
>-                    "../components/HelloWorld.vue"
>-                );
>-                return module.default;
>+        ],
>+        [
>+            "hello-world",
>+            {
>+                importFn: async () => {
>+                    const module = await import(
>+                        /* webpackChunkName: "hello-world" */
>+                        "../components/HelloWorld.vue"
>+                    );
>+                    return module.default;
>+                },
>             },
>-        },
>-    ],
>-]);
>-
>-const pinia = createPinia();
>-
>-const mainStore = useMainStore(pinia);
>-const navigationStore = useNavigationStore(pinia);
>-
>-const storesMatrix = {
>-    mainStore,
>-    navigationStore,
>-};
>+        ],
>+    ]);
> 
> /**
>  * Hydrates custom elements by scanning the document and loading only necessary components.
>@@ -59,6 +56,12 @@ const storesMatrix = {
>  */
> export function hydrate(): void {
>     window.requestIdleCallback(async () => {
>+        const pinia = createPinia();
>+        const storesMatrix = {
>+            mainStore: useMainStore(pinia),
>+            navigationStore: useNavigationStore(pinia),
>+        };
>+
>         const islandTagNames = Array.from(componentRegistry.keys()).join(", ");
>         const requestedIslands = new Set(
>             Array.from(document.querySelectorAll(islandTagNames)).map(element =>
>@@ -79,7 +82,7 @@ export function hydrate(): void {
>                     shadowRoot: false,
>                     ...(config && {
>                         configureApp(app) {
>-                            if (config.stores && config.stores.length > 0) {
>+                            if (config.stores?.length > 0) {
>                                 app.use(pinia);
>                                 config.stores.forEach(store => {
>                                     app.provide(store, storesMatrix[store]);
>-- 
>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