[docs] use svelte:header + event for link load (#6903)

site/content/examples/16-context/00-context-api/Map.svelte

@@ -1,9 +1,9 @@
 <script>
-	import { onMount, setContext } from 'svelte';
+	import { onDestroy, setContext } from 'svelte';
 	import { mapbox, key } from './mapbox.js';
 
 	setContext(key, {
-		getMap: () => map
+		getMap: () => map,
 	});
 
 	export let lat;
@@ -13,32 +13,31 @@
 	let container;
 	let map;
 
-	onMount(() => {
-		const link = document.createElement('link');
-		link.rel = 'stylesheet';
-		link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css';
-
-		link.onload = () => {
-			map = new mapbox.Map({
-				container,
-				style: 'mapbox://styles/mapbox/streets-v9',
-				center: [lon, lat],
-				zoom
-			});
-		};
-
-		document.head.appendChild(link);
-
-		return () => {
-			map.remove();
-			link.parentNode.removeChild(link);
-		};
+	function load() {
+		map = new mapbox.Map({
+			container,
+			style: 'mapbox://styles/mapbox/streets-v9',
+			center: [lon, lat],
+			zoom,
+		});
+	}
+
+	onDestroy(() => {
+		if (map) map.remove();
 	});
 </script>
 
+<svelte:head>
+	<link
+		rel="stylesheet"
+		href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
+		on:load={load}
+	/>
+</svelte:head>
+
 <div bind:this={container}>
 	{#if map}
-		<slot></slot>
+		<slot />
 	{/if}
 </div>
 
@@ -47,4 +46,4 @@
 		width: 100%;
 		height: 100%;
 	}
-</style>
+</style>

site/content/tutorial/15-context/01-context-api/app-a/Map.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount } from 'svelte';
+	import { onDestroy } from 'svelte';
 	import { mapbox } from './mapbox.js';
 
 	// set the context here...
@@ -11,32 +11,32 @@
 	let container;
 	let map;
 
-	onMount(() => {
-		const link = document.createElement('link');
-		link.rel = 'stylesheet';
-		link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css';
-
-		link.onload = () => {
-			map = new mapbox.Map({
-				container,
-				style: 'mapbox://styles/mapbox/streets-v9',
-				center: [lon, lat],
-				zoom
-			});
-		};
-
-		document.head.appendChild(link);
-
-		return () => {
-			map.remove();
-			link.parentNode.removeChild(link);
-		};
+	function load() {
+		map = new mapbox.Map({
+			container,
+			style: 'mapbox://styles/mapbox/streets-v9',
+			center: [lon, lat],
+			zoom,
+		});
+	}
+
+	onDestroy(() => {
+		if (map) map.remove();
 	});
 </script>
 
+<!-- this special element will be explained in a later section -->
+<svelte:head>
+	<link
+		rel="stylesheet"
+		href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
+		on:load={load}
+	/>
+</svelte:head>
+
 <div bind:this={container}>
 	{#if map}
-		<slot></slot>
+		<slot />
 	{/if}
 </div>
 
@@ -45,4 +45,4 @@
 		width: 100%;
 		height: 100%;
 	}
-</style>
+</style>

site/content/tutorial/15-context/01-context-api/app-b/Map.svelte

@@ -1,9 +1,9 @@
 <script>
-	import { onMount, setContext } from 'svelte';
+	import { onDestroy, setContext } from 'svelte';
 	import { mapbox, key } from './mapbox.js';
 
 	setContext(key, {
-		getMap: () => map
+		getMap: () => map,
 	});
 
 	export let lat;
@@ -13,32 +13,32 @@
 	let container;
 	let map;
 
-	onMount(() => {
-		const link = document.createElement('link');
-		link.rel = 'stylesheet';
-		link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css';
-
-		link.onload = () => {
-			map = new mapbox.Map({
-				container,
-				style: 'mapbox://styles/mapbox/streets-v9',
-				center: [lon, lat],
-				zoom
-			});
-		};
-
-		document.head.appendChild(link);
-
-		return () => {
-			map.remove();
-			link.parentNode.removeChild(link);
-		};
+	function load() {
+		map = new mapbox.Map({
+			container,
+			style: 'mapbox://styles/mapbox/streets-v9',
+			center: [lon, lat],
+			zoom,
+		});
+	}
+
+	onDestroy(() => {
+		if (map) map.remove();
 	});
 </script>
 
+<!-- this special element will be explained in a later section -->
+<svelte:head>
+	<link
+		rel="stylesheet"
+		href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
+		on:load={load}
+	/>
+</svelte:head>
+
 <div bind:this={container}>
 	{#if map}
-		<slot></slot>
+		<slot />
 	{/if}
 </div>
 
@@ -47,4 +47,4 @@
 		width: 100%;
 		height: 100%;
 	}
-</style>
+</style>