SWRdata · sjockers · Apr 2, 2026 · Feb 23, 2026 · Feb 25, 2026 · Mar 25, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/sophora-components/datawrapper-switcher.html b/sophora-components/datawrapper-switcher.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+	</head>
+	<body>
+		<div data-lab-components-embed="datawrapper-switcher"></div>
+		<script type="module">
+			import mountEmbeds from '/src/lib/utils/mountEmbeds';
+			import Embed from '/src/components/datawrapper-switcher/embed.svelte';
+
+			mountEmbeds(Embed, '[data-lab-components-embed="datawrapper-switcher"]');
+		</script>
+	</body>
+</html>
diff --git a/sophora-components/highlight-cards.html b/sophora-components/highlight-cards.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+	</head>
+	<body>
+		<div data-lab-components-embed="highlight-cards"></div>
+		<script type="module">
+			import mountEmbeds from '/src/lib/utils/mountEmbeds';
+			import Embed from '/src/components/highlight-cards/embed.svelte';
+
+			mountEmbeds(Embed, '[data-lab-components-embed="highlight-cards"]');
+		</script>
+	</body>
+</html>
diff --git a/sophora-components/src/app.html → sophora-components/index.html b/sophora-components/src/app.html → sophora-components/index.html
@@ -2,11 +2,8 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 
-		%sveltekit.head%
-
 		<style>
 			@font-face {
 				font-family: 'SWR-VAR-Sans';
@@ -25,7 +22,15 @@
 			}
 		</style>
 	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div id="data-lab-components-embed">%sveltekit.body%</div>
+	<body>
+		<div data-lab-components-embed="swr-sophora-components"></div>
+		<script type="module">
+			import { mount } from 'svelte';
+			import IndexPage from '/src/index.svelte';
+
+			mount(IndexPage, {
+				target: document.querySelector('[data-lab-components-embed="swr-sophora-components"]')
+			});
+		</script>
 	</body>
 </html>
diff --git a/sophora-components/package.json b/sophora-components/package.json
@@ -4,21 +4,20 @@
 	"version": "0.0.1",
 	"type": "module",
 	"scripts": {
-		"dev": "vite dev",
-		"build": "svelte-kit sync && vite build",
+		"dev": "vite",
+		"build": "vite build",
 		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint ."
 	},
 	"devDependencies": {
 		"@eslint/compat": "^2.0.2",
 		"@eslint/js": "^9.39.2",
-		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/kit": "^2.53.4",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@swr-data-lab/components": "^2.43.0",
+		"@types/jquery": "^4.0.0",
 		"@types/node": "^22",
 		"eslint": "^9.39.2",
 		"eslint-config-prettier": "^10.1.8",

diff --git a/sophora-components/src/app.d.ts b/sophora-components/src/app.d.ts
diff --git a/...apper-switcher/DatawrapperSwitcher.svelte → ...apper-switcher/DatawrapperSwitcher.svelte b/...apper-switcher/DatawrapperSwitcher.svelte → ...apper-switcher/DatawrapperSwitcher.svelte
@@ -1,6 +1,7 @@
 <script>
 	import getDataFromUrl from '$lib/utils/getDataFromUrl';
-	import { Switcher, DesignTokens } from '@swr-data-lab/components';
+	import Switcher from '@swr-data-lab/components/dist/Switcher/Switcher.svelte';
+	import DesignTokens from '@swr-data-lab/components/dist/DesignTokens/DesignTokens.svelte';
 	import { onMount } from 'svelte';
 
 	let activeIndex = $state(0);
@@ -11,11 +12,15 @@
 	let layout = $state('auto');
 
 	onMount(() => {
-		const entries = getDataFromUrl(root);
-		labels = entries.labels.split(',') || [];
-		ids = entries.ids.split(',') || [];
-		fixedHeight = entries.fixedHeight || null;
-		layout = entries.layout || 'auto';
+		try {
+			const entries = getDataFromUrl(root);
+			labels = entries.labels?.split(',') || [];
+			ids = entries.ids?.split(',') || [];
+			fixedHeight = entries.fixedHeight || null;
+			layout = entries.layout || 'auto';
+		} catch (e) {
+			console.error(e);
+		}
 	});
 </script>
 
@@ -33,7 +38,7 @@
 		/>
 
 		<div class="datawrapper-chart-container">
-			{#each ids as id, index}
+			{#each ids as id, index (id)}
 				<div
 					class="datawrapper-chart"
 					class:datawrapper-chart-active={index === activeIndex}

diff --git a/.../routes/datawrapper-switcher/+page.svelte → ...ponents/datawrapper-switcher/embed.svelte b/.../routes/datawrapper-switcher/+page.svelte → ...ponents/datawrapper-switcher/embed.svelte
@@ -1,7 +1,8 @@
 <script>
-	import { DevContainer } from '@swr-data-lab/components';
+	import DevContainer from '@swr-data-lab/components/dist/DevContainer/DevContainer.svelte';
 	import DatawrapperSwitcher from './DatawrapperSwitcher.svelte';
-	import { dev } from '$app/environment';
+
+	const dev = import.meta.env.DEV;
 </script>
 
 {#if dev}

diff --git a/...tes/highlight-cards/HighlightCards.svelte → ...nts/highlight-cards/HighlightCards.svelte b/...tes/highlight-cards/HighlightCards.svelte → ...nts/highlight-cards/HighlightCards.svelte
@@ -1,6 +1,7 @@
 <script>
 	import getDataFromUrl from '$lib/utils/getDataFromUrl';
-	import { DesignTokens, HighlightCard } from '@swr-data-lab/components';
+	import DesignTokens from '@swr-data-lab/components/dist/DesignTokens/DesignTokens.svelte';
+	import HighlightCard from '@swr-data-lab/components/dist/HighlightCard/HighlightCard.svelte';
 	import { onMount } from 'svelte';
 
 	let root;
@@ -14,7 +15,7 @@
 
 <div class="highlight-cards" bind:this={root}>
 	<DesignTokens>
-		{#each entries as entry}
+		{#each entries as entry, index (index)}
 			<HighlightCard
 				topline={entry.topline}
 				value={entry.value}
@@ -35,5 +36,10 @@
 		@media (min-width: 1200px) {
 			grid-template-columns: repeat(2, minmax(0, 1fr));
 		}
+
+		/* Explicitly set background color for dark mode, workaround for SWR Aktuell App */
+		@media (prefers-color-scheme: dark) {
+			background-color: #0c0c0c;
+		}
 	}
 </style>
diff --git a/...s/src/routes/highlight-cards/+page.svelte → ...c/components/highlight-cards/embed.svelte b/...s/src/routes/highlight-cards/+page.svelte → ...c/components/highlight-cards/embed.svelte
@@ -1,7 +1,8 @@
 <script>
+	import DevContainer from '@swr-data-lab/components/dist/DevContainer/DevContainer.svelte';
 	import HighlightCards from './HighlightCards.svelte';
-	import { dev } from '$app/environment';
-	import { DevContainer } from '@swr-data-lab/components';
+
+	const dev = import.meta.env.DEV;
 </script>
 
 {#if dev}

diff --git a/sophora-components/src/hooks.server.js b/sophora-components/src/hooks.server.js
diff --git a/sophora-components/src/routes/+page.svelte → sophora-components/src/index.svelte b/sophora-components/src/routes/+page.svelte → sophora-components/src/index.svelte
@@ -1,7 +1,4 @@
 <script>
-	import { ChartList, DesignTokens } from '@swr-data-lab/components';
-	import { dev } from '$app/environment';
-
 	// Example parameters for the charts, can be used in development to prefill the charts with data
 	// TODO: Find a better way to manage example parameters, e.g. using Storybook or a list of example URLs
 	const EXAMPLE_PARAMS = {
@@ -14,19 +11,20 @@
 	const charts = [
 		{
 			title: 'Highlight Cards',
-			slug: `highlight-cards${dev ? EXAMPLE_PARAMS.HIGHLIGHT_CARDS : ''}`
+			slug: `highlight-cards${EXAMPLE_PARAMS.HIGHLIGHT_CARDS}`
 		},
 		{
 			title: 'Datawrapper Switcher',
-			slug: `datawrapper-switcher${dev ? EXAMPLE_PARAMS.DATAWRAPPER_SWITCHER : ''}`
+			slug: `datawrapper-switcher${EXAMPLE_PARAMS.DATAWRAPPER_SWITCHER}`
 		}
 	];
 </script>
 
-<DesignTokens theme="auto">
-	<ChartList
-		baseUrl="https://static.datenhub.net/apps/sophora-components/main"
-		project="Sophora-Components"
-		{charts}
-	/>
-</DesignTokens>
+<h1>Demo Embeds</h1>
+{#each charts as chart}
+	<div class="chart-link">
+		<a href={`./${chart.slug}`}>
+			{chart.title}
+		</a>
+	</div>
+{/each}
diff --git a/sophora-components/src/lib/shims/app-environment.ts b/sophora-components/src/lib/shims/app-environment.ts
@@ -0,0 +1,6 @@
+// Shim for $app/environment used by @swr-data-lab/components
+// Replaces SvelteKit's built-in module in this pure Vite setup
+export const browser = typeof window !== 'undefined';
+export const dev = import.meta.env.DEV;
+export const building = false;
+export const version = '';
diff --git a/sophora-components/src/lib/utils/getDataFromUrl.ts b/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), {});
 }
diff --git a/sophora-components/src/lib/utils/mountEmbeds.ts b/sophora-components/src/lib/utils/mountEmbeds.ts
@@ -0,0 +1,46 @@
+import { mount } from 'svelte';
+import type { SvelteComponent } from 'svelte';
+
+declare global {
+	interface Window {
+		$?: unknown;
+	}
+}
+
+export default async function mountEmbeds(
+	Component: typeof SvelteComponent,
+	targetSelector: string
+): Promise<void> {
+	const _mountEmbeds = (embedTargets: NodeListOf<Element>) => {
+		embedTargets.forEach((target) => {
+			target.innerHTML = ''; // Clear any existing content before mounting
+			mount(Component, { target });
+		});
+	};
+
+	// Mount the embeds on initial page load
+	_mountEmbeds(document.querySelectorAll(targetSelector));
+
+	// SWR.dev uses PJAX and jQuery for client-side navigation, which replaces page content without a full reload.
+	// This means we need to re-mount the Svelte components after PJAX updates the DOM during client-side navigation.
+	// https://github.com/defunkt/jquery-pjax?tab=readme-ov-file#reinitializing-pluginswidget-on-new-page-content
+	if (window.$) {
+		$(document).on('pjax:end', () => {
+			const maxPolls = 10;
+			const pollDelay = 300; // ms
+			let pollCount = 0;
+
+			// Delay to ensure new DOM is ready for mounting.
+			// PJAX triggers 'pjax:end' before the mounting targets are actually available in the DOM.
+			const interval = window.setInterval(() => {
+				const embedTargets = document.querySelectorAll(targetSelector);
+				if (embedTargets.length > 0) {
+					_mountEmbeds(embedTargets);
+					window.clearInterval(interval);
+				} else if (++pollCount >= maxPolls) {
+					window.clearInterval(interval);
+				}
+			}, pollDelay);
+		});
+	}
+}
diff --git a/sophora-components/src/routes/+layout.js b/sophora-components/src/routes/+layout.js
diff --git a/sophora-components/svelte.config.js b/sophora-components/svelte.config.js
@@ -1,23 +1,6 @@
-import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
-const dev = process.argv.includes('dev');
-
-/** @type {import('@sveltejs/kit').Config} */
 const config = {
-	kit: {
-		paths: {
-			base: dev ? '' : process.env.BASE_PATH,
-			assets: dev ? '' : process.env.ASSETS_PATH
-		},
-		adapter: adapter({
-			pages: 'build',
-			assets: 'build',
-			fallback: undefined,
-			precompress: false,
-			strict: true
-		})
-	},
 	preprocess: [vitePreprocess()]
 };
 

diff --git a/sophora-components/tsconfig.json b/sophora-components/tsconfig.json
@@ -1,14 +1,19 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
 		"allowJs": true,
 		"checkJs": true,
 		"target": "es2022",
+		"module": "es2022",
+		"moduleResolution": "bundler",
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
-		"strict": true
-	}
+		"strict": true,
+		"paths": {
+			"$lib/*": ["./src/lib/*"]
+		}
+	},
+	"include": ["src/**/*", "vite.config.ts"]
 }