[% Asset.js("js/vue/dist/islands.js") | $raw %]

        <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>

            <div id="hello-islands" data-component="HelloIslands" data-props='{"message": "Hello from props!"}'></div>

        </div> <!-- /.row -->

            setTimeout(() => {

                document.getElementById("hello-islands").dataset.props = JSON.stringify({ message: 'This is a delayed message! Props (data-props) reflect.' });

            }, 2000);

<template>

    <h2>Hello from Islands!</h2>

    <p>This component is rendered as an island in a static HTML page.</p>

    <!-- Display message prop -->

    <p v-if="message">{{ message }}</p>

    <!-- Reactive counter example -->

    <p>Counter: {{ count }}</p>

    <!-- Koha's bootstrap works in here! -->

    <button @click="incrementCounter" class="btn btn-primary">

        Increment Counter

    </button>

</template>

<script>

import { ref } from "vue"

export default {

    props: {

        message: {

            type: String,

            default: "",

        },

    },

    data() {

        return {

            count: 0,

        }

    },

    methods: {

        incrementCounter() {

            this.count++

        },

    },

}

</script>

import { createApp, Component, App } from "vue";

/**

 * A registry for Vue components.

 * @type {Map<string, Component>}

 */

export const componentRegistry: Map<string, Component> = new Map<

    string,

    Component

>();

/**

 * Registers a Vue component with a name.

 * @param {string} name - The name of the component.

 * @param {Component} component - The Vue component to register.

 * @returns {void}

 */

export function registerComponent(name: string, component: Component): void {

    componentRegistry.set(name, component);

}

/**

 * Mounts Vue components to DOM elements based on the `data-component` attribute.

 * Components are created with props parsed from the `data-props` attribute.

 * Watches for changes in props and updates the component accordingly.

 * @returns {void}

 */

export function mountComponents(): void {

    console.log("Mounting components");

    const elements: NodeListOf<Element> =

        document.querySelectorAll("[data-component]");

    elements.forEach((element: Element) => {

        const componentName: string | null =

            element.getAttribute("data-component");

        if (!componentName) {

            console.warn("No data-component attribute found.");

            return;

        }

        const component: Component | undefined =

            componentRegistry.get(componentName);

        if (!component) {

            console.warn(`Component ${componentName} not found.`);

            return;

        }

        const props: string | null = element.getAttribute("data-props");

        const parsedProps: Record<string, any> = props ? JSON.parse(props) : {};

        // Create and mount the Vue component

        const app: App = createApp(component, parsedProps);

        app.mount(element);

        // Watch for updates to props

        watchProps(element, app, component);

    });

}

/**

 * Watches for changes in props and updates the component accordingly.

 * @param {Element} element - The DOM element where the component is mounted.

 * @param {App} app - The Vue application instance.

 * @param {Component} component - The Vue component.

 * @returns {void}

 */

function watchProps(element: Element, app: App, component: Component): void {

    const propsAttr: string | null = element.getAttribute("data-props");

    let prevProps: Record<string, any> = propsAttr ? JSON.parse(propsAttr) : {};

    const observer = new MutationObserver(() => {

        const newPropsAttr: string | null = element.getAttribute("data-props");

        if (newPropsAttr) {

            const newProps: Record<string, any> = JSON.parse(newPropsAttr);

            if (JSON.stringify(newProps) !== JSON.stringify(prevProps)) {

                prevProps = newProps;

                app.unmount(); // Unmount existing component

                createApp(component, newProps).mount(element); // Mount with new props

            }

        }

    });

    observer.observe(element, {

        attributes: true,

        attributeFilter: ["data-props"],

    });

}

import HelloIslands from "../components/HelloIslands.vue";

registerComponent("HelloIslands", HelloIslands);

// Automatically mount components when the DOM is fully loaded

document.addEventListener("DOMContentLoaded", mountComponents);

        islands: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts",

    /**

    optimization: {

        splitChunks: {

            chunks: "all",

            cacheGroups: {

                default: false, // Disable default cache groups to avoid affecting existing bundles

                vendors: false, // Disable vendor caching

                vue: {

                    test: /[\\/]node_modules[\\/]vue[\\/]/,

                    name: "vue",

                    chunks: "all",

                    enforce: true,

                },

            },

        },

    },

    */