From 2484acea2624bb802f367ebf5bfcb94e6ff41612 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Thu, 4 Nov 2021 14:15:31 +0700
Subject: [PATCH] [docs] use svelte:header + event for link load  (#6903)

---
 .../16-context/00-context-api/Map.svelte      | 47 +++++++++---------
 .../01-context-api/app-a/Map.svelte           | 46 +++++++++---------
 .../01-context-api/app-b/Map.svelte           | 48 +++++++++----------
 3 files changed, 70 insertions(+), 71 deletions(-)

diff --git a/site/content/examples/16-context/00-context-api/Map.svelte b/site/content/examples/16-context/00-context-api/Map.svelte
index 059fcca45b..99aead054b 100644
--- a/site/content/examples/16-context/00-context-api/Map.svelte
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/site/content/tutorial/15-context/01-context-api/app-a/Map.svelte b/site/content/tutorial/15-context/01-context-api/app-a/Map.svelte
index c6a660a49f..e94bd3f0cd 100644
--- a/site/content/tutorial/15-context/01-context-api/app-a/Map.svelte
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/site/content/tutorial/15-context/01-context-api/app-b/Map.svelte b/site/content/tutorial/15-context/01-context-api/app-b/Map.svelte
index 059fcca45b..bd4010e765 100644
--- a/site/content/tutorial/15-context/01-context-api/app-b/Map.svelte
+++ b/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>
\ No newline at end of file
+</style>