Attachment 172962 Details for Bug 37911 – Bug 37911: (follow-up) Remove example islands for core submission

[patch] Bug 37911: (follow-up) Remove example islands for core submission

Bug-37911-follow-up-Remove-example-islands-for-cor.patch (text/plain), 12.42 KB, created by Matt Blenkinsop on 2024-10-18 11:15:11 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Matt Blenkinsop

Created: 2024-10-18 11:15:11 UTC

Size: 12.42 KB

patch

obsolete

>From 12a0d07d1f282e9e224ae77898de6d93f2540dca Mon Sep 17 00:00:00 2001
>From: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
>Date: Fri, 18 Oct 2024 11:14:29 +0000
>Subject: [PATCH] Bug 37911: (follow-up) Remove example islands for core
> submission
>
>---
> .../prog/en/modules/intranet-main.tt          |  37 +-----
> .../vue/components/Islands/DialogIsland.vue   | 107 ------------------
> .../vue/components/Islands/HelloIslands.vue   |  56 ---------
> .../js/vue/components/Islands/HelloWorld.vue  |  18 ---
> .../prog/js/vue/modules/islands.ts            |  64 ++++-------
> .../intranet-tmpl/prog/js/vue/stores/main.js  |   1 -
> .../prog/js/vue/stores/navigation.js          |   1 -
> 7 files changed, 21 insertions(+), 263 deletions(-)
> delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue
> delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue
> delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/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 9d1b6592799..fff114fb1f9 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
>+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
>@@ -301,51 +301,16 @@
>             </div> 
> 
>         </div> 
>-        <div class="row w-25 m-auto p-4 border border-4 border-warning br-4 rounded text-center">
>-            <h1>ð§ Static Page with Vue Components ð§</h1>
>-
>-            <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> 
>-
>-        <div class="row w-25 m-auto p-4 border border-4 border-warning br-5 rounded text-center mt-4">
>-            <dialog-island id="surprise"></dialog-island>
>-            <button id="surprise-button" class="btn btn-primary">Click me for a surprise!</button>
>-        </div>
> 
> [% MACRO jsinclude BLOCK %]
>     [% INCLUDE 'calendar.inc' %]
>-    [% Asset.js("js/vue/dist/islands.js", "init" => "1") | $raw %]
>-    
>+
>     <script>
>         var MSG_CONFIRM_DELETE = _("Are you sure you want to delete this news item? This cannot be undone.");
>         $(document).ready(function(){
>             $(".news_delete").on("click", function(){
>                 return confirmDelete(MSG_CONFIRM_DELETE);
>             });
>-
>-            setTimeout(() => {
>-                const [firstHelloIslandsElement] = document.getElementsByTagName("hello-islands");
>-                firstHelloIslandsElement.message = 'This is a delayed update to the message attribute of the web commponent.'
>-            }, 2000);
>-
>-            $("#surprise-button").on("click", () => {
>-                $("#surprise").attr("warning", `<span>Yes, this is <span class="font-monospace">Dialog.vue</span> (in a wrapper component)!</span><span class="d-none">${Math.random()}</span>`);
>-            });
>         });
>     </script>
> [% END %]
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue
>deleted file mode 100644
>index 35986463037..00000000000
>--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue
>+++ /dev/null
>@@ -1,107 +0,0 @@
>-<template>
>-    <Dialog />
>-</template>
>-
>-<script>
>-import { inject, watch } from "vue"
>-import Dialog from "../Dialog.vue"
>-
>-export default {
>-    props: {
>-        message: {
>-            type: String,
>-            default: null,
>-        },
>-        error: {
>-            type: String,
>-            default: null,
>-        },
>-        warning: {
>-            type: String,
>-            default: null,
>-        },
>-        confirmation: {
>-            type: Object,
>-            default: () => null,
>-        },
>-        isSubmitting: {
>-            type: Boolean,
>-            default: false,
>-        },
>-        isLoading: {
>-            type: Boolean,
>-            default: false,
>-        },
>-        acceptCallback: {
>-            type: Function,
>-            default: null,
>-        },
>-    },
>-    setup(props) {
>-        const mainStore = inject("mainStore")
>-        const {
>-            setMessage,
>-            setError,
>-            setWarning,
>-            setConfirmation,
>-            setSubmitting,
>-            setLoading,
>-            setAcceptCallback,
>-        } = mainStore
>-
>-        watch(
>-            () => props.message,
>-            newVal => {
>-                setMessage(newVal)
>-            }
>-        )
>-
>-        watch(
>-            () => props.error,
>-            newVal => {
>-                setError(newVal)
>-            }
>-        )
>-
>-        watch(
>-            () => props.warning,
>-            newVal => {
>-                setWarning(newVal)
>-            }
>-        )
>-
>-        watch(
>-            () => props.confirmation,
>-            newVal => {
>-                setConfirmation(newVal)
>-            }
>-        )
>-
>-        watch(
>-            () => props.isSubmitting,
>-            newVal => {
>-                setSubmitting(newVal)
>-            }
>-        )
>-
>-        watch(
>-            () => props.isLoading,
>-            newVal => {
>-                setLoading(newVal)
>-            }
>-        )
>-
>-        watch(
>-            () => props.acceptCallback,
>-            newVal => {
>-                setAcceptCallback(newVal)
>-            }
>-        )
>-
>-        return {}
>-    },
>-    components: {
>-        Dialog,
>-    },
>-}
>-</script>
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue
>deleted file mode 100644
>index ef83b0dbe07..00000000000
>--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue
>+++ /dev/null
>@@ -1,56 +0,0 @@
>-<template>
>-    <h2 :style="{ color }">Hello from Islands!</h2>
>-    <p>This component is rendered as an island in a static HTML page.</p>
>-
>-    
>-    <p v-if="message">{{ message }}</p>
>-
>-    
>-    <p v-if="stringFromStore">{{ stringFromStore }}</p>
>-    <p v-if="anotherStoreString">{{ anotherStoreString }}</p>
>-
>-    
>-    <p>Counter: {{ count }}</p>
>-    
>-    <button @click="incrementCounter" class="btn btn-primary">
>-        Increment Counter
>-    </button>
>-</template>
>-
>-<script>
>-import { ref } from "vue"
>-import { inject } from "vue"
>-
>-export default {
>-    props: {
>-        message: {
>-            type: String,
>-            default: "No content",
>-        },
>-        color: {
>-            type: String,
>-            default: "crimson",
>-        },
>-    },
>-    setup() {
>-        const mainStore = inject("mainStore")
>-        const { stringFromStore } = mainStore
>-        const navigationStore = inject("navigationStore")
>-        const { anotherStoreString } = navigationStore
>-        return {
>-            stringFromStore,
>-            anotherStoreString,
>-        }
>-    },
>-    data() {
>-        return {
>-            count: 0,
>-        }
>-    },
>-    methods: {
>-        incrementCounter() {
>-            this.count++
>-        },
>-    },
>-}
>-</script>
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue
>deleted file mode 100644
>index 51b5fbc732d..00000000000
>--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue
>+++ /dev/null
>@@ -1,18 +0,0 @@
>-
>-
>-<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 9a96915af84..af004592a29 100644
>--- a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
>@@ -19,52 +19,28 @@ type WebComponentDynamicImport = {
> /**
>  * A registry for Vue components.
>  * @type {Map<string, WebComponentDynamicImport>}
>+ * @property {string} key - The name of the component.
>+ * @property {WebComponentDynamicImport} value - The configuration for the component. Includes the import function and optional configuration.
>+ * @example
>+ * //
>+ * [
>+ *     "hello-islands",
>+ *     {
>+ *         importFn: async () => {
>+ *             const module = await import(
>+ *                 /* webpackChunkName: "hello-islands" */
>+/**                "../components/Islands/HelloIslands.vue"
>+ *             );
>+ *             return module.default;
>+ *         },
>+ *         config: {
>+ *             stores: ["mainStore", "navigationStore"],
>+ *         },
>+ *     },
>+ * ],
>  */
> export const componentRegistry: Map<string, WebComponentDynamicImport> =
>-    new Map([
>-        [
>-            "hello-islands",
>-            {
>-                importFn: async () => {
>-                    const module = await import(
>-                        /* webpackChunkName: "hello-islands" */
>-                        "../components/Islands/HelloIslands.vue"
>-                    );
>-                    return module.default;
>-                },
>-                config: {
>-                    stores: ["mainStore", "navigationStore"],
>-                },
>-            },
>-        ],
>-        [
>-            "hello-world",
>-            {
>-                importFn: async () => {
>-                    const module = await import(
>-                        /* webpackChunkName: "hello-world" */
>-                        "../components/Islands/HelloWorld.vue"
>-                    );
>-                    return module.default;
>-                },
>-            },
>-        ],
>-        [
>-            "dialog-island",
>-            {
>-                importFn: async () => {
>-                    const module = await import(
>-                        /* webpackChunkName: "vue-dialog" */
>-                        "../components/Islands/DialogIsland.vue"
>-                    );
>-                    return module.default;
>-                },
>-                config: {
>-                    stores: ["mainStore"],
>-                },
>-            },
>-        ],
>-    ]);
>+    new Map([]);
> 
> /**
>  * Hydrates custom elements by scanning the document and loading only necessary components.
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
>index b9317d79721..7a0c9e65166 100644
>--- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
>@@ -12,7 +12,6 @@ export const useMainStore = defineStore("main", {
>         displayed_already: false,
>         _is_submitting: false,
>         _is_loading: false,
>-        stringFromStore: "Hello from main store",
>     }),
>     actions: {
>         setMessage(message, displayed = false) {
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js
>index e76802b7e2e..1e3ecb58b36 100644
>--- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js
>@@ -11,7 +11,6 @@ export const useNavigationStore = defineStore("navigation", {
>         },
>         current: null,
>         params: {},
>-        anotherStoreString: "Hello from nav store",
>     }),
>     actions: {
>         setRoutes(routesDef) {
>-- 
>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