Use previous sibling as target, no more initialization loop

sjockers · sjockers · commit 6ccf03f8e3cb · 2026-04-02T00:30:48.000+02:00
diff --git a/sophora-components/datawrapper-switcher.html b/sophora-components/datawrapper-switcher.html
@@ -24,14 +24,24 @@
 	</head>
 	<body>
 		<div data-lab-components-embed="datawrapper-switcher"></div>
+		<script>
+			const target = document.currentScript.previousElementSibling;
+			if (window.__mountDatawrapperSwitcher) {
+				window.__mountDatawrapperSwitcher(target);
+			} else {
+				document.addEventListener('DOMContentLoaded', () => {
+					window.__mountDatawrapperSwitcher(target);
+				});
+			}
+		</script>
 		<script type="module">
-			import { mountEmbed } from '/src/lib/utils/mountEmbed';
+			import mountEmbed from '/src/lib/utils/mountEmbed';
 			import Embed from '/src/components/datawrapper-switcher/embed.svelte';
-			window.__mountDatawrapperSwitcher = () => mountEmbed('datawrapper-switcher', Embed);
-			window.__mountDatawrapperSwitcher();
-		</script>
-		<script>
-			window.__mountDatawrapperSwitcher && window.__mountDatawrapperSwitcher();
+
+			window.__mountDatawrapperSwitcher = (target) => {
+				console.log('Mounting Datawrapper Switcher component on', target);
+				mountEmbed(target, Embed);
+			};
 		</script>
 	</body>
 </html>
diff --git a/sophora-components/highlight-cards.html b/sophora-components/highlight-cards.html
@@ -24,15 +24,24 @@
 	</head>
 	<body>
 		<div data-lab-components-embed="highlight-cards"></div>
+		<script>
+			const target = document.currentScript.previousElementSibling;
+			if (window.__mountHighlightCards) {
+				window.__mountHighlightCards(target);
+			} else {
+				document.addEventListener('DOMContentLoaded', () => {
+					window.__mountHighlightCards(target);
+				});
+			}
+		</script>
 		<script type="module">
-			import { mountEmbed } from '/src/lib/utils/mountEmbed';
+			import mountEmbed from '/src/lib/utils/mountEmbed';
 			import Embed from '/src/components/highlight-cards/embed.svelte';
 
-			window.__mountHighlightCards = () => mountEmbed('highlight-cards', Embed);
-			window.__mountHighlightCards();
-		</script>
-		<script>
-			window.__mountHighlightCards && window.__mountHighlightCards();
+			window.__mountHighlightCards = (target) => {
+				console.log('Mounting Highlight Cards component on', target);
+				mountEmbed(target, Embed);
+			};
 		</script>
 	</body>
 </html>
diff --git a/sophora-components/src/lib/utils/mountEmbed.ts b/sophora-components/src/lib/utils/mountEmbed.ts
@@ -2,12 +2,9 @@ import { mount } from 'svelte';
 
 type ComponentConstructor = new (...args: any[]) => any;
 
-export async function mountEmbed(
-	componentName: string,
+export default async function mountEmbed(
+	target: Element,
 	Component: ComponentConstructor
 ): Promise<void> {
-	const selector = `[data-lab-components-embed="${componentName}"]`;
-	document.querySelectorAll(selector).forEach((target) => {
-		mount(Component, { target });
-	});
+	mount(Component, { target });
 }
