- 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;
{#if dev}
diff --git a/sophora-components/src/routes/highlight-cards/HighlightCards.svelte b/sophora-components/src/components/highlight-cards/HighlightCards.svelte
similarity index 63%
rename from sophora-components/src/routes/highlight-cards/HighlightCards.svelte
rename to sophora-components/src/components/highlight-cards/HighlightCards.svelte
index bc6657d..461a132 100644
--- a/sophora-components/src/routes/highlight-cards/HighlightCards.svelte
+++ b/sophora-components/src/components/highlight-cards/HighlightCards.svelte
@@ -1,6 +1,7 @@
{#if dev}
diff --git a/sophora-components/src/hooks.server.js b/sophora-components/src/hooks.server.js
deleted file mode 100644
index 925195d..0000000
--- a/sophora-components/src/hooks.server.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/** @type {import('@sveltejs/kit').Handle} */
-export async function handle({ event, resolve }) {
- const routeID = event.route.id ? event.route.id.replace('/', '') : false;
- const containerID = `swr-sophora-components${routeID ? '-' + routeID : ''}`;
- const response = await resolve(event, {
- transformPageChunk: ({ html }) =>
- html
- .replace(`id="data-lab-components-embed"`, `data-lab-components-embed="${containerID}"`)
- .replace(
- 'document.currentScript.parentElement',
- `document.querySelector("[data-lab-components-embed='${containerID}']")`
- )
- });
- return response;
-}
diff --git a/sophora-components/src/routes/+page.svelte b/sophora-components/src/index.svelte
similarity index 71%
rename from sophora-components/src/routes/+page.svelte
rename to sophora-components/src/index.svelte
index dba12f7..1c77185 100644
--- a/sophora-components/src/routes/+page.svelte
+++ b/sophora-components/src/index.svelte
@@ -1,7 +1,4 @@
-
-
-
+
Demo Embeds
+{#each charts as chart}
+
+{/each}
diff --git a/sophora-components/src/lib/shims/app-environment.ts b/sophora-components/src/lib/shims/app-environment.ts
new file mode 100644
index 0000000..d8e1ee6
--- /dev/null
+++ 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
index 9448278..ac1fe0f 100644
--- 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
{
- 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 = 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
new file mode 100644
index 0000000..fe803ef
--- /dev/null
+++ 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 {
+ const _mountEmbeds = (embedTargets: NodeListOf) => {
+ 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
deleted file mode 100644
index 189f71e..0000000
--- a/sophora-components/src/routes/+layout.js
+++ /dev/null
@@ -1 +0,0 @@
-export const prerender = true;
diff --git a/sophora-components/svelte.config.js b/sophora-components/svelte.config.js
index cf5067f..48941f5 100644
--- 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
index c5a0883..e692a50 100644
--- 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"]
}
diff --git a/sophora-components/vite.config.ts b/sophora-components/vite.config.ts
index bbf8c7d..f31cf2c 100644
--- a/sophora-components/vite.config.ts
+++ b/sophora-components/vite.config.ts
@@ -1,6 +1,91 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { defineConfig, loadEnv, type HtmlTagDescriptor } from 'vite';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
-export default defineConfig({
- plugins: [sveltekit()]
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig(({ mode }) => {
+ const env = loadEnv(mode, __dirname, '');
+ return {
+ base: env.ASSETS_PATH || '/',
+ plugins: [
+ {
+ name: 'resolve-custom-imports',
+ enforce: 'pre',
+ resolveId(id) {
+ if (id === '$app/environment') {
+ return resolve(__dirname, 'src/lib/shims/app-environment.ts');
+ }
+ if (id.startsWith('@swr-data-lab/components/dist/')) {
+ return resolve(__dirname, 'node_modules', id);
+ }
+ }
+ },
+ {
+ name: 'inject-to-body',
+ enforce: 'post',
+ transformIndexHtml: {
+ order: 'post',
+ handler(html) {
+ // Vite injects