Attachment #172967 for bug #37911

View | Details | Raw Unified | Return to bug 37911
Collapse All | Expand All




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


        <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> <!-- /.row -->

[% MACRO jsinclude BLOCK %]

            });

            setTimeout(() => {
                const [firstHelloIslandsElement] = document.getElementsByTagName("hello-islands");
                firstHelloIslandsElement.message = 'This is a delayed update to the message attribute of the web commponent.'
            }, 2000);
        });
    </script>

Lines 1-5 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/HelloIslands.vue (-2 / +6 lines)
1	<template>	1	<template>
2	<h2>Hello from Islands!</h2>	2	<h2 :style="{ color }">Hello from Islands!</h2>
3	<p>This component is rendered as an island in a static HTML page.</p>	3	<p>This component is rendered as an island in a static HTML page.</p>
4		4
5	<!-- Display message prop -->	5	<!-- Display message prop -->
Lines 20-26 export default { Link Here
20	props: {	20	props: {
21	message: {	21	message: {
22	type: String,	22	type: String,
23	default: "",	23	default: "No content",
		24	},
		25	color: {
		26	type: String,
		27	default: "crimson",
24	},	28	},
25	},	29	},
26	data() {	30	data() {




import { Component, defineCustomElement } from "vue";
import HelloIslands from "../components/HelloIslands.vue";

/**
 * A registry for Vue components.
 * @type {Map<string, string>}
 */
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}
 */
export const componentRegistry: Map<string, () => Promise<Component>> = new Map(
    [["hello-islands", HelloIslands]]
);

// Register and define custom elements
window.requestIdleCallback(() => {
    componentRegistry.forEach((component, name) => {
        customElements.define(
            name,
            defineCustomElement(component as any, { shadowRoot: false })
        );
                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);

Lines 40-46 Link Here

(-)a/package.json (-1 / +1 lines)
40	"po2json": "^0.4.5",	40	"po2json": "^0.4.5",
41	"sass": "^1.58.1",	41	"sass": "^1.58.1",
42	"style-loader": "^3.3.1",	42	"style-loader": "^3.3.1",
43	"vue": "^3.2.31",	43	"vue": "^3.5.4",
44	"vue-flatpickr-component": "^9",	44	"vue-flatpickr-component": "^9",
45	"vue-router": "^4.0.14",	45	"vue-router": "^4.0.14",
46	"vue-select": "4.0.0-beta.3"	46	"vue-select": "4.0.0-beta.3"

Lines 80-85 module.exports = { Link Here

(-)a/rspack.config.js (+1 lines)
80	new rspack.DefinePlugin({	80	new rspack.DefinePlugin({
81	__VUE_OPTIONS_API__: true,	81	__VUE_OPTIONS_API__: true,
82	__VUE_PROD_DEVTOOLS__: false,	82	__VUE_PROD_DEVTOOLS__: false,
		83	__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
83	}),	84	}),
84	],	85	],
85	externals: {	86	externals: {

Lines 275-280 Link Here

(-)a/yarn.lock (-52 / +151 lines)
275	resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"	275	resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
276	integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==	276	integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
277		277
		278	"@babel/helper-string-parser@^7.24.8":
		279	version "7.24.8"
		280	resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
		281	integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
		282
278	"@babel/helper-validator-identifier@^7.18.6":	283	"@babel/helper-validator-identifier@^7.18.6":
279	version "7.18.6"	284	version "7.18.6"
280	resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"	285	resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
Lines 285-290 Link Here
285	resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"	290	resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
286	integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==	291	integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
287		292
		293	"@babel/helper-validator-identifier@^7.24.7":
		294	version "7.24.7"
		295	resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
		296	integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
		297
288	"@babel/helper-validator-option@^7.18.6":	298	"@babel/helper-validator-option@^7.18.6":
289	version "7.18.6"	299	version "7.18.6"
290	resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"	300	resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
Lines 318-324 Link Here
318	chalk "^2.0.0"	328	chalk "^2.0.0"
319	js-tokens "^4.0.0"	329	js-tokens "^4.0.0"
320		330
321	"@babel/parser@^7.16.4", "@babel/parser@^7.18.10", "@babel/parser@^7.19.3", "@babel/parser@^7.19.4":	331	"@babel/parser@^7.16.4", "@babel/parser@^7.25.3":
		332	version "7.25.6"
		333	resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f"
		334	integrity sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==
		335	dependencies:
		336	"@babel/types" "^7.25.6"
		337
		338	"@babel/parser@^7.18.10", "@babel/parser@^7.19.3", "@babel/parser@^7.19.4":
322	version "7.19.4"	339	version "7.19.4"
323	resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.4.tgz#03c4339d2b8971eb3beca5252bafd9b9f79db3dc"	340	resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.4.tgz#03c4339d2b8971eb3beca5252bafd9b9f79db3dc"
324	integrity sha512-qpVT7gtuOLjWeDTKLkJ6sryqLliBaFpAtGeqw5cs5giLldvh+Ch0plqnUMKoVAUS6ZEueQQiZV+p5pxtPitEsA==	341	integrity sha512-qpVT7gtuOLjWeDTKLkJ6sryqLliBaFpAtGeqw5cs5giLldvh+Ch0plqnUMKoVAUS6ZEueQQiZV+p5pxtPitEsA==
Lines 966-971 Link Here
966	"@babel/helper-validator-identifier" "^7.19.1"	983	"@babel/helper-validator-identifier" "^7.19.1"
967	to-fast-properties "^2.0.0"	984	to-fast-properties "^2.0.0"
968		985
		986	"@babel/types@^7.25.6":
		987	version "7.25.6"
		988	resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6"
		989	integrity sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==
		990	dependencies:
		991	"@babel/helper-string-parser" "^7.24.8"
		992	"@babel/helper-validator-identifier" "^7.24.7"
		993	to-fast-properties "^2.0.0"
		994
969	"@choojs/findup@^0.2.1":	995	"@choojs/findup@^0.2.1":
970	version "0.2.1"	996	version "0.2.1"
971	resolved "https://registry.yarnpkg.com/@choojs/findup/-/findup-0.2.1.tgz#ac13c59ae7be6e1da64de0779a0a7f03d75615a3"	997	resolved "https://registry.yarnpkg.com/@choojs/findup/-/findup-0.2.1.tgz#ac13c59ae7be6e1da64de0779a0a7f03d75615a3"
Lines 1172-1177 Link Here
1172	resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"	1198	resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
1173	integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==	1199	integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
1174		1200
		1201	"@jridgewell/sourcemap-codec@^1.5.0":
		1202	version "1.5.0"
		1203	resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
		1204	integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
		1205
1175	"@jridgewell/trace-mapping@^0.3.14", "@jridgewell/trace-mapping@^0.3.9":	1206	"@jridgewell/trace-mapping@^0.3.14", "@jridgewell/trace-mapping@^0.3.9":
1176	version "0.3.17"	1207	version "0.3.17"
1177	resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"	1208	resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
Lines 1889-1894 Link Here
1889	estree-walker "^2.0.2"	1920	estree-walker "^2.0.2"
1890	source-map "^0.6.1"	1921	source-map "^0.6.1"
1891		1922
		1923	"@vue/compiler-core@3.5.4":
		1924	version "3.5.4"
		1925	resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.4.tgz#b8b5805e767b94d84af01f5527dbb4896326c478"
		1926	integrity sha512-oNwn+BAt3n9dK9uAYvI+XGlutwuTq/wfj4xCBaZCqwwVIGtD7D6ViihEbyYZrDHIHTDE3Q6oL3/hqmAyFEy9DQ==
		1927	dependencies:
		1928	"@babel/parser" "^7.25.3"
		1929	"@vue/shared" "3.5.4"
		1930	entities "^4.5.0"
		1931	estree-walker "^2.0.2"
		1932	source-map-js "^1.2.0"
		1933
1892	"@vue/compiler-dom@3.2.41":	1934	"@vue/compiler-dom@3.2.41":
1893	version "3.2.41"	1935	version "3.2.41"
1894	resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz#dc63dcd3ce8ca8a8721f14009d498a7a54380299"	1936	resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz#dc63dcd3ce8ca8a8721f14009d498a7a54380299"
Lines 1897-1903 Link Here
1897	"@vue/compiler-core" "3.2.41"	1939	"@vue/compiler-core" "3.2.41"
1898	"@vue/shared" "3.2.41"	1940	"@vue/shared" "3.2.41"
1899		1941
1900	"@vue/compiler-sfc@3.2.41", "@vue/compiler-sfc@^3.2.31":	1942	"@vue/compiler-dom@3.5.4":
		1943	version "3.5.4"
		1944	resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.4.tgz#3f98e6ca76abab73630dad055b3ef6e2e6c2b006"
		1945	integrity sha512-yP9RRs4BDLOLfldn6ah+AGCNovGjMbL9uHvhDHf5wan4dAHLnFGOkqtfE7PPe4HTXIqE7l/NILdYw53bo1C8jw==
		1946	dependencies:
		1947	"@vue/compiler-core" "3.5.4"
		1948	"@vue/shared" "3.5.4"
		1949
		1950	"@vue/compiler-sfc@3.5.4":
		1951	version "3.5.4"
		1952	resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.4.tgz#a530accc9afed38506b14ce7ac6fb237eb09ff2d"
		1953	integrity sha512-P+yiPhL+NYH7m0ZgCq7AQR2q7OIE+mpAEgtkqEeH9oHSdIRvUO+4X6MPvblJIWcoe4YC5a2Gdf/RsoyP8FFiPQ==
		1954	dependencies:
		1955	"@babel/parser" "^7.25.3"
		1956	"@vue/compiler-core" "3.5.4"
		1957	"@vue/compiler-dom" "3.5.4"
		1958	"@vue/compiler-ssr" "3.5.4"
		1959	"@vue/shared" "3.5.4"
		1960	estree-walker "^2.0.2"
		1961	magic-string "^0.30.11"
		1962	postcss "^8.4.44"
		1963	source-map-js "^1.2.0"
		1964
		1965	"@vue/compiler-sfc@^3.2.31":
1901	version "3.2.41"	1966	version "3.2.41"
1902	resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz#238fb8c48318408c856748f4116aff8cc1dc2a73"	1967	resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz#238fb8c48318408c856748f4116aff8cc1dc2a73"
1903	integrity sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==	1968	integrity sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==
Lines 1921-1926 Link Here
1921	"@vue/compiler-dom" "3.2.41"	1986	"@vue/compiler-dom" "3.2.41"
1922	"@vue/shared" "3.2.41"	1987	"@vue/shared" "3.2.41"
1923		1988
		1989	"@vue/compiler-ssr@3.5.4":
		1990	version "3.5.4"
		1991	resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.4.tgz#b6d011adaca367e7cc364cb09dfb6a5c12ad974a"
		1992	integrity sha512-acESdTXsxPnYr2C4Blv0ggx5zIFMgOzZmYU2UgvIff9POdRGbRNBHRyzHAnizcItvpgerSKQbllUc9USp3V7eg==
		1993	dependencies:
		1994	"@vue/compiler-dom" "3.5.4"
		1995	"@vue/shared" "3.5.4"
		1996
1924	"@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.3.0":	1997	"@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.3.0":
1925	version "3.3.0"	1998	version "3.3.0"
1926	resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"	1999	resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
Lines 1953-1995 Link Here
1953	estree-walker "^2.0.2"	2026	estree-walker "^2.0.2"
1954	magic-string "^0.25.7"	2027	magic-string "^0.25.7"
1955		2028
1956	"@vue/reactivity@3.2.41":	2029	"@vue/reactivity@3.5.4":
1957	version "3.2.41"	2030	version "3.5.4"
1958	resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.41.tgz#0ad3bdf76d76822da1502dc9f394dafd02642963"	2031	resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.4.tgz#f1c771612e0612443583bac6ce52b8cef0ac5c40"
1959	integrity sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==	2032	integrity sha512-HKKbEuP7tYSGCq4e4nK6ZW6l5hyG66OUetefBp4budUyjvAYsnQDf+bgFzg2RAgnH0CInyqXwD9y47jwJEHrQw==
1960	dependencies:	2033	dependencies:
1961	"@vue/shared" "3.2.41"	2034	"@vue/shared" "3.5.4"
1962		2035
1963	"@vue/runtime-core@3.2.41":	2036	"@vue/runtime-core@3.5.4":
1964	version "3.2.41"	2037	version "3.5.4"
1965	resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.41.tgz#775bfc00b3fadbaddab77138f23322aee3517a76"	2038	resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.4.tgz#411e4f6d445d44354bbc242dfb168379c3bec5c3"
1966	integrity sha512-0LBBRwqnI0p4FgIkO9q2aJBBTKDSjzhnxrxHYengkAF6dMOjeAIZFDADAlcf2h3GDALWnblbeprYYpItiulSVQ==	2039	integrity sha512-f3ek2sTA0AFu0n+w+kCtz567Euqqa3eHewvo4klwS7mWfSj/A+UmYTwsnUFo35KeyAFY60JgrCGvEBsu1n/3LA==
1967	dependencies:	2040	dependencies:
1968	"@vue/reactivity" "3.2.41"	2041	"@vue/reactivity" "3.5.4"
1969	"@vue/shared" "3.2.41"	2042	"@vue/shared" "3.5.4"
1970		2043
1971	"@vue/runtime-dom@3.2.41":	2044	"@vue/runtime-dom@3.5.4":
1972	version "3.2.41"	2045	version "3.5.4"
1973	resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.41.tgz#cdf86be7410f7b15c29632a96ce879e5b4c9ab92"	2046	resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.4.tgz#68242033e648a6d1400f27d923d5788362fbefb8"
1974	integrity sha512-U7zYuR1NVIP8BL6jmOqmapRAHovEFp7CSw4pR2FacqewXNGqZaRfHoNLQsqQvVQ8yuZNZtxSZy0FFyC70YXPpA==	2047	integrity sha512-ofyc0w6rbD5KtjhP1i9hGOKdxGpvmuB1jprP7Djlj0X7R5J/oLwuNuE98GJ8WW31Hu2VxQHtk/LYTAlW8xrJdw==
1975	dependencies:	2048	dependencies:
1976	"@vue/runtime-core" "3.2.41"	2049	"@vue/reactivity" "3.5.4"
1977	"@vue/shared" "3.2.41"	2050	"@vue/runtime-core" "3.5.4"
1978	csstype "^2.6.8"	2051	"@vue/shared" "3.5.4"
		2052	csstype "^3.1.3"
1979		2053
1980	"@vue/server-renderer@3.2.41":	2054	"@vue/server-renderer@3.5.4":
1981	version "3.2.41"	2055	version "3.5.4"
1982	resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.41.tgz#ca64552c05878f94e8d191ac439141c06c0fb2ad"	2056	resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.4.tgz#8b9a102474922156c881c8ed1442907512d5435b"
1983	integrity sha512-7YHLkfJdTlsZTV0ae5sPwl9Gn/EGr2hrlbcS/8naXm2CDpnKUwC68i1wGlrYAfIgYWL7vUZwk2GkYLQH5CvFig==	2057	integrity sha512-FbjV6DJLgKRetMYFBA1UXCroCiED/Ckr53/ba9wivyd7D/Xw9fpo0T6zXzCnxQwyvkyrL7y6plgYhWhNjGxY5g==
1984	dependencies:	2058	dependencies:
1985	"@vue/compiler-ssr" "3.2.41"	2059	"@vue/compiler-ssr" "3.5.4"
1986	"@vue/shared" "3.2.41"	2060	"@vue/shared" "3.5.4"
1987		2061
1988	"@vue/shared@3.2.41":	2062	"@vue/shared@3.2.41":
1989	version "3.2.41"	2063	version "3.2.41"
1990	resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.41.tgz#fbc95422df654ea64e8428eced96ba6ad555d2bb"	2064	resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.41.tgz#fbc95422df654ea64e8428eced96ba6ad555d2bb"
1991	integrity sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==	2065	integrity sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==
1992		2066
		2067	"@vue/shared@3.5.4":
		2068	version "3.5.4"
		2069	resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.4.tgz#d4768ddf13aded2774162298a3b5658cc999e1ee"
		2070	integrity sha512-L2MCDD8l7yC62Te5UUyPVpmexhL9ipVnYRw9CsWfm/BGRL5FwDX4a25bcJ/OJSD3+Hx+k/a8LDKcG2AFdJV3BA==
		2071
1993	"@vue/test-utils@^2.0.0-rc.10":	2072	"@vue/test-utils@^2.0.0-rc.10":
1994	version "2.1.0"	2073	version "2.1.0"
1995	resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.1.0.tgz#c2f646aa2d6ac779f79a83f18c5b82fc40952bfd"	2074	resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.1.0.tgz#c2f646aa2d6ac779f79a83f18c5b82fc40952bfd"
Lines 4036-4045 csstype@3.1.2: Link Here
4036	resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"	4115	resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
4037	integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==	4116	integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
4038		4117
4039	csstype@^2.6.8:	4118	csstype@^3.1.3:
4040	version "2.6.21"	4119	version "3.1.3"
4041	resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"	4120	resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
4042	integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==	4121	integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
4043		4122
4044	cypress-mysql@^1.0.0:	4123	cypress-mysql@^1.0.0:
4045	version "1.0.0"	4124	version "1.0.0"
Lines 4597-4602 entities@^2.0.0: Link Here
4597	resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"	4676	resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
4598	integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==	4677	integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
4599		4678
		4679	entities@^4.5.0:
		4680	version "4.5.0"
		4681	resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
		4682	integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
		4683
4600	envinfo@^7.7.3:	4684	envinfo@^7.7.3:
4601	version "7.8.1"	4685	version "7.8.1"
4602	resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"	4686	resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
Lines 7337-7342 magic-string@^0.25.7: Link Here
7337	dependencies:	7421	dependencies:
7338	sourcemap-codec "^1.4.8"	7422	sourcemap-codec "^1.4.8"
7339		7423
		7424	magic-string@^0.30.11:
		7425	version "0.30.11"
		7426	resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.11.tgz#301a6f93b3e8c2cb13ac1a7a673492c0dfd12954"
		7427	integrity sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==
		7428	dependencies:
		7429	"@jridgewell/sourcemap-codec" "^1.5.0"
		7430
7340	make-dir@^3.0.2, make-dir@^3.1.0:	7431	make-dir@^3.0.2, make-dir@^3.1.0:
7341	version "3.1.0"	7432	version "3.1.0"
7342	resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"	7433	resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
Lines 7780-7791 nan@^2.12.1: Link Here
7780	resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"	7871	resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
7781	integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==	7872	integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
7782		7873
7783	nanoid@^3.3.4:	7874	nanoid@^3.3.4, nanoid@^3.3.6, nanoid@^3.3.7:
7784	version "3.3.4"
7785	resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
7786	integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
7787
7788	nanoid@^3.3.6:
7789	version "3.3.7"	7875	version "3.3.7"
7790	resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"	7876	resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
7791	integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==	7877	integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
Lines 8513-8522 picocolors@^0.2.1: Link Here
8513	resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"	8599	resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
8514	integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==	8600	integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
8515		8601
8516	picocolors@^1.0.0:	8602	picocolors@^1.0.0, picocolors@^1.0.1:
8517	version "1.0.0"	8603	version "1.1.0"
8518	resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"	8604	resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
8519	integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==	8605	integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
8520		8606
8521	picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:	8607	picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
8522	version "2.3.1"	8608	version "2.3.1"
Lines 8923-8929 postcss@^7.0.36: Link Here
8923	picocolors "^0.2.1"	9009	picocolors "^0.2.1"
8924	source-map "^0.6.1"	9010	source-map "^0.6.1"
8925		9011
8926	postcss@^8.1.10, postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.7:	9012	postcss@^8.1.10, postcss@^8.4.44:
		9013	version "8.4.45"
		9014	resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.45.tgz#538d13d89a16ef71edbf75d895284ae06b79e603"
		9015	integrity sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==
		9016	dependencies:
		9017	nanoid "^3.3.7"
		9018	picocolors "^1.0.1"
		9019	source-map-js "^1.2.0"
		9020
		9021	postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.7:
8927	version "8.4.18"	9022	version "8.4.18"
8928	resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.18.tgz#6d50046ea7d3d66a85e0e782074e7203bc7fbca2"	9023	resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.18.tgz#6d50046ea7d3d66a85e0e782074e7203bc7fbca2"
8929	integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==	9024	integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==
Lines 10120-10130 sockjs@^0.3.24: Link Here
10120	uuid "^8.3.2"	10215	uuid "^8.3.2"
10121	websocket-driver "^0.7.4"	10216	websocket-driver "^0.7.4"
10122		10217
10123	"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:	10218	"source-map-js@>=0.6.2 <2.0.0":
10124	version "1.0.2"	10219	version "1.0.2"
10125	resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"	10220	resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
10126	integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==	10221	integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
10127		10222
		10223	source-map-js@^1.0.2, source-map-js@^1.2.0:
		10224	version "1.2.1"
		10225	resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
		10226	integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
		10227
10128	source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:	10228	source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
10129	version "0.5.3"	10229	version "0.5.3"
10130	resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"	10230	resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
Lines 11444-11458 vue-template-es2015-compiler@^1.9.0: Link Here
11444	integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==	11544	integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
11445		11545
11446	vue@^3.2.31:	11546	vue@^3.2.31:
11447	version "3.2.41"	11547	version "3.5.4"
11448	resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.41.tgz#ed452b8a0f7f2b962f055c8955139c28b1c06806"	11548	resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.4.tgz#0e5935e8b1e5505d484aee732b72c6e77c7567fd"
11449	integrity sha512-uuuvnrDXEeZ9VUPljgHkqB5IaVO8SxhPpqF2eWOukVrBnRBx2THPSGQBnVRt0GrIG1gvCmFXMGbd7FqcT1ixNQ==	11549	integrity sha512-3yAj2gkmiY+i7+22A1PWM+kjOVXjU74UPINcTiN7grIVPyFFI0lpGwHlV/4xydDmobaBn7/xmi+YG8HeSlCTcg==
11450	dependencies:	11550	dependencies:
11451	"@vue/compiler-dom" "3.2.41"	11551	"@vue/compiler-dom" "3.5.4"
11452	"@vue/compiler-sfc" "3.2.41"	11552	"@vue/compiler-sfc" "3.5.4"
11453	"@vue/runtime-dom" "3.2.41"	11553	"@vue/runtime-dom" "3.5.4"
11454	"@vue/server-renderer" "3.2.41"	11554	"@vue/server-renderer" "3.5.4"
11455	"@vue/shared" "3.2.41"	11555	"@vue/shared" "3.5.4"
11456		11556
11457	watchify@^4.0.0:	11557	watchify@^4.0.0:
11458	version "4.0.0"	11558	version "4.0.0"
11459	-

Return to bug 37911

Lines 11-17 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt (-3 / +4 lines)
11	[% t("Koha staff interface") \| html %]	11	[% t("Koha staff interface") \| html %]
12	[% END %]</title>	12	[% END %]</title>
13	[% Asset.css("css/mainpage.css") \| $raw %]	13	[% Asset.css("css/mainpage.css") \| $raw %]
14	[% Asset.js("js/vue/dist/islands.js") \| $raw %]	14	[% Asset.js("js/vue/dist/islands.js", "defer" => 1, async => "1") \| $raw %]
15	[% INCLUDE 'doc-head-close.inc' %]	15	[% INCLUDE 'doc-head-close.inc' %]
16	</head>	16	</head>
17		17
Lines 305-311 Link Here
305	<div class="row w-25 m-auto p-4 border border-4 border-warning br-4 rounded text-center">	305	<div class="row w-25 m-auto p-4 border border-4 border-warning br-4 rounded text-center">
306	<h1>🚧 Static Page with Vue Components 🚧</h1>	306	<h1>🚧 Static Page with Vue Components 🚧</h1>
307		307
308	<div id="hello-islands" data-component="HelloIslands" data-props='{"message": "Hello from props!"}'></div>	308	<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>
309	</div> <!-- /.row -->	309	</div> <!-- /.row -->
310		310
311	[% MACRO jsinclude BLOCK %]	311	[% MACRO jsinclude BLOCK %]
Lines 317-323 Link Here
317	});	317	});
318		318
319	setTimeout(() => {	319	setTimeout(() => {
320	document.getElementById("hello-islands").dataset.props = JSON.stringify({ message: 'This is a delayed message! Changes to data-props currently unfortunately reset the internal state.' });	320	const [firstHelloIslandsElement] = document.getElementsByTagName("hello-islands");
		321	firstHelloIslandsElement.message = 'This is a delayed update to the message attribute of the web commponent.'
321	}, 2000);	322	}, 2000);
322	});	323	});
323	</script>	324	</script>

Lines 1-93 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts (-88 / +15 lines)
1	import { createApp, Component, App } from "vue";	1	import { Component, defineCustomElement } from "vue";
		2	import HelloIslands from "../components/HelloIslands.vue";
2		3
3	/**	4	/**
4	* A registry for Vue components.	5	* A registry for Vue components.
5	* @type {Map<string, Component>}	6	* @type {Map<string, string>}
6	*/
7	export const componentRegistry: Map<string, Component> = new Map<
8	string,
9	Component
10	>();
11
12	/**
13	* Registers a Vue component with a name.
14	* @param {string} name - The name of the component.
15	* @param {Component} component - The Vue component to register.
16	* @returns {void}
17	*/
18	export function registerComponent(name: string, component: Component): void {
19	componentRegistry.set(name, component);
20	}
21
22	/**
23	* Mounts Vue components to DOM elements based on the `data-component` attribute.
24	* Components are created with props parsed from the `data-props` attribute.
25	* Watches for changes in props and updates the component accordingly.
26	* @returns {void}
27	*/
28	export function mountComponents(): void {
29	console.log("Mounting components");
30
31	const elements: NodeListOf<Element> =
32	document.querySelectorAll("[data-component]");
33	elements.forEach((element: Element) => {
34	const componentName: string \| null =
35	element.getAttribute("data-component");
36	if (!componentName) {
37	console.warn("No data-component attribute found.");
38	return;
39	}
40
41	const component: Component \| undefined =
42	componentRegistry.get(componentName);
43	if (!component) {
44	console.warn(`Component ${componentName} not found.`);
45	return;
46	}
47
48	const props: string \| null = element.getAttribute("data-props");
49	const parsedProps: Record<string, any> = props ? JSON.parse(props) : {};
50
51	// Create and mount the Vue component
52	const app: App = createApp(component, parsedProps);
53	app.mount(element);
54
55	// Watch for updates to props
56	watchProps(element, app, component);
57	});
58	}
59
60	/**
61	* Watches for changes in props and updates the component accordingly.
62	* @param {Element} element - The DOM element where the component is mounted.
63	* @param {App} app - The Vue application instance.
64	* @param {Component} component - The Vue component.
65	* @returns {void}
66	*/	7	*/
67	function watchProps(element: Element, app: App, component: Component): void {	8	export const componentRegistry: Map<string, () => Promise<Component>> = new Map(
68	const propsAttr: string \| null = element.getAttribute("data-props");	9	[["hello-islands", HelloIslands]]
69	let prevProps: Record<string, any> = propsAttr ? JSON.parse(propsAttr) : {};	10	);
70		11
71	const observer = new MutationObserver(() => {	12	// Register and define custom elements
72	const newPropsAttr: string \| null = element.getAttribute("data-props");	13	window.requestIdleCallback(() => {
73	if (newPropsAttr) {	14	componentRegistry.forEach((component, name) => {
74	const newProps: Record<string, any> = JSON.parse(newPropsAttr);	15	customElements.define(
75	if (JSON.stringify(newProps) !== JSON.stringify(prevProps)) {	16	name,
76	prevProps = newProps;	17	defineCustomElement(component as any, { shadowRoot: false })
77	app.unmount(); // Unmount existing component	18	);
78	createApp(component, newProps).mount(element); // Mount with new props
79	}
80	}
81	});	19	});
82		20	});
83	observer.observe(element, {
84	attributes: true,
85	attributeFilter: ["data-props"],
86	});
87	}
88
89	import HelloIslands from "../components/HelloIslands.vue";
90	registerComponent("HelloIslands", HelloIslands);
91
92	// Automatically mount components when the DOM is fully loaded
93	document.addEventListener("DOMContentLoaded", mountComponents);