Attachment #171445 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>



            <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">-&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>
            <!-- <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(){




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




                return module.default;
            },
        ],
        [
            "hello-world",
            async () => {
                const module = await import(
                    /* webpackChunkName: "hello-world" */ "../components/HelloWorld.vue"
                );
                return module.default;
            },
        ],
    ]
);

/**
 * 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();
- 

Return to bug 37911

Lines 11-17 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt (-1 / +9 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", "defer" => 1, async => "1") \| $raw %]
15	[% INCLUDE 'doc-head-close.inc' %]	14	[% INCLUDE 'doc-head-close.inc' %]
16	</head>	15	</head>
17		16
Lines 307-314 Link Here
307		306
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>	307	<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 -->	308	</div> <!-- /.row -->
		309	<div class="row w-25 m-auto p-4 border border-4 border-warning br-5 rounded text-center mt-4">
		310	<p>
		311	<span>Uncomment me in <span class="font-monospace">intranet-main.tt</span> 👇</span><br>
		312	<span class="font-monospace text-danger">-<!-- <hello-world></hello-world> --></span><br>
		313	<span class="font-monospace text-success">+<hello-world></hello-world></span>
		314	</p>
		315	<!-- <hello-world></hello-world> -->
		316	</div> <!-- /.row -->
310		317
311	[% MACRO jsinclude BLOCK %]	318	[% MACRO jsinclude BLOCK %]
		319	[% Asset.js("js/vue/dist/islands.js", "type" => "module") \| $raw %]
312	<script>	320	<script>
313	var MSG_CONFIRM_DELETE = _("Are you sure you want to delete this news item? This cannot be undone.");	321	var MSG_CONFIRM_DELETE = _("Are you sure you want to delete this news item? This cannot be undone.");
314	$(document).ready(function(){	322	$(document).ready(function(){

Lines 16-31 export const componentRegistry: Map<string, () => Promise<Component>> = new Map( Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts (-9 / +38 lines)
16	return module.default;	16	return module.default;
17	},	17	},
18	],	18	],
		19	[
		20	"hello-world",
		21	async () => {
		22	const module = await import(
		23	/* webpackChunkName: "hello-world" */ "../components/HelloWorld.vue"
		24	);
		25	return module.default;
		26	},
		27	],
19	]	28	]
20	);	29	);
21		30
22	// Register and define custom elements	31	/**
23	window.requestIdleCallback(async () => {	32	* Hydrates custom elements by scanning the document and loading only necessary components.
24	componentRegistry.forEach(async (importFn, name) => {	33	* @returns {void}
25	const component = await importFn();	34	*/
26	customElements.define(	35	export function hydrate(): void {
27	name,	36	window.requestIdleCallback(async () => {
28	defineCustomElement(component as any, { shadowRoot: false })	37	const islandTagNames = Array.from(componentRegistry.keys()).join(", ");
		38	const requestedIslands = new Set(
		39	Array.from(document.querySelectorAll(islandTagNames)).map(element =>
		40	element.tagName.toLowerCase()
		41	)
29	);	42	);
		43
		44	requestedIslands.forEach(async name => {
		45	const importFn = componentRegistry.get(name);
		46	if (!importFn) {
		47	return;
		48	}
		49
		50	const component = await importFn();
		51	customElements.define(
		52	name,
		53	defineCustomElement(component as any, {
		54	shadowRoot: false,
		55	})
		56	);
		57	});
30	});	58	});
31	});	59	}
		60
		61	hydrate();
32	-

Line 0 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/HelloWorld.vue (+18 lines)
	1	<!--
	2	Say Hello World with Vue!
	3	-->
	4
	5	<script setup>
	6	import { ref } from "vue"
	7
	8	// A "ref" is a reactive data source that stores a value.
	9	// Technically, we don't need to wrap the string with ref()
	10	// in order to display it, but we will see in the next
	11	// example why it is needed if we ever intend to change
	12	// the value.
	13	const message = ref("Hello World!")
	14	</script>
	15
	16	<template>
	17	<h1>{{ message }}</h1>
	18	</template>