Refactor getDataFromUrl (less specific to domains, add error logging)

Author: sjockers

sophora-components/src/lib/utils/getDataFromUrl.ts

@@ -1,21 +1,16 @@
 export default function getDataFromUrl(target: HTMLElement): Record<string, string> {
-	let url: URL;
-	if (
-		// SvelteKit DEV mode, preview server, or static hosting:
-		import.meta.env.DEV ||
-		window.location.origin === 'http://localhost:4173' ||
-		window.location.origin === 'https://static.datenhub.net' ||
-		window.location.href.includes('apidata.googleusercontent.com') ||
-		window.location.href.includes('storage.googleapis.com')
-	) {
+	const parent = target.parentNode?.parentNode as HTMLElement | null;
+
+	// Default: Embedded mode – use URL used to embed the component
+	// `data-url` is the embeds the grandparent element, provided by Sophora
+	let embedURL = parent?.dataset.url;
+
+	if (!embedURL) {
 		// Preview mode – use URL of current page
-		url = new URL(window.location.href);
-	} else {
-		// Embedded mode – use URL used to embed the component
-		// `data-url` is set on the grandparent element, provided by Sophora
-		const parent = target.parentNode?.parentNode as HTMLElement | null;
-		url = new URL(parent?.dataset.url || '');
+		embedURL = window?.location.href;
 	}
-	const params: Record<string, string> = Object.fromEntries(url.searchParams);
-	return params;
+
+	return URL.canParse(embedURL)
+		? Object.fromEntries(new URL(embedURL).searchParams.entries())
+		: (console.error('Could not parse Embed-URL:', embedURL), {});
 }

sophora-components/src/routes/datawrapper-switcher/DatawrapperSwitcher.svelte

@@ -10,19 +10,25 @@
 	let fixedHeight = $state(null);
 	let layout = $state('auto');
 
+	let url = $state('');
+
 	onMount(() => {
 		const entries = getDataFromUrl(root);
 		labels = entries.labels.split(',') || [];
 		ids = entries.ids.split(',') || [];
 		fixedHeight = entries.fixedHeight || null;
 		layout = entries.layout || 'auto';
+
+		url = window.location?.href;
 	});
 </script>
 
 <div class="datawrapper-switcher" bind:this={root}>
 	<DesignTokens theme="auto">
 		<h1>Datawrapper switcher to be rendered here:</h1>
 		<pre>{JSON.stringify({ labels, ids, fixedHeight, layout }, null, 2)}</pre>
+		<pre>dataset url: {root?.parentNode?.parentNode?.dataset.url || 'n/a'}</pre>
+		<pre>actual url: {url || 'n/a'}</pre>
 
 		<!-- <Switcher
 			options={labels}