sdocs 0.0.32 → 0.0.33

package/CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.0.33] - 2026-07-03
+
+### Added
+
+- **Embedded apps can deploy under a sub-path.** Preview URLs pick up the
+  host Vite `base` automatically; SvelteKit apps (whose base Vite doesn't
+  see) pass it explicitly via the new `previewBase` prop on `Explorer` —
+  e.g. `previewBase={base}` with `base` from `$app/paths`.
+
 ## [0.0.32] - 2026-07-03
 
 ### Changed

package/dist/explorer/Explorer.svelte

@@ -7,7 +7,7 @@
 	import PageView from './views/PageView.svelte';
 	import LayoutView from './views/LayoutView.svelte';
 	import HomePage from './views/HomePage.svelte';
-	import { onMount } from 'svelte';
+	import { onMount, setContext } from 'svelte';
 	import '../ui/styles/sdocs.css';
 
 	type ThemeMode = 'light' | 'dark';
@@ -17,13 +17,24 @@
 		logo?: string;
 		icon?: string | false;
 		cssNames?: string[];
+		/** URL prefix for preview pages when the host app is served under a sub-path (e.g. SvelteKit's base). */
+		previewBase?: string;
 		sidebarConfig?: {
 			order?: Record<string, string[]>;
 			open?: string[];
 		};
 	}
 
-	let { docs, logo = 'sdocs', icon = 'sdocs', cssNames = [], sidebarConfig }: Props = $props();
+	let {
+		docs,
+		logo = 'sdocs',
+		icon = 'sdocs',
+		cssNames = [],
+		previewBase = '',
+		sidebarConfig
+	}: Props = $props();
+
+	setContext('sdocs-preview-base', previewBase);
 
 	let sidebarHidden = $state(false);
 	let activeStylesheet = $state<string | undefined>(undefined);

package/dist/explorer/views/PreviewFrame.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, untrack } from 'svelte';
+	import { getContext, onMount, untrack } from 'svelte';
 
 	interface Props {
 		src: string;
@@ -10,6 +10,11 @@
 	}
 
 	let { src, props = {}, cssVars = {}, activeStylesheet, fullHeight = false }: Props = $props();
+
+	// Preview URLs are root-absolute; hosts serving under a sub-path pass the
+	// prefix via the Explorer's previewBase prop (see Explorer.svelte).
+	const previewBase = (getContext('sdocs-preview-base') as string | undefined) ?? '';
+	const resolvedSrc = $derived(previewBase.replace(/\/$/, '') + src);
 	let iframe: HTMLIFrameElement;
 	let ready = $state(false);
 	let contentHeight = $state(0);
@@ -73,7 +78,7 @@
 <div class="sdocs-preview-frame" class:full-height={fullHeight}>
 	<iframe
 		bind:this={iframe}
-		{src}
+		src={resolvedSrc}
 		title="Component preview"
 		class="sdocs-iframe"
 		scrolling="no"

package/dist/vite.js

@@ -21,6 +21,9 @@ export function sdocsPlugin(userConfig) {
     const buildMode = userConfig?._buildMode ?? false;
     let isBuild = false;
     let isSsrBuild = false;
+    // Host app's base path ('/' when served at the domain root); preview URLs
+    // are root-absolute and must carry it so embedding works under a sub-path.
+    let base = '/';
     // Previews planned for emission into a host app's build (embedded mode)
     let plannedPreviews = [];
     let emittedCssLinks = [];
@@ -30,6 +33,7 @@ export function sdocsPlugin(userConfig) {
             root = resolvedConfig.root;
             isBuild = resolvedConfig.command === 'build';
             isSsrBuild = !!resolvedConfig.build?.ssr;
+            base = resolvedConfig.base || '/';
             const fileConfig = await loadRawConfig(root);
             const merged = { ...fileConfig, ...userConfig };
             config = resolveAndFinalize(merged, root);
@@ -320,9 +324,13 @@ export function sdocsPlugin(userConfig) {
                 name: s.name,
                 body: s.body,
                 highlightedHtml: s.highlightedHtml,
-                previewUrl: buildMode || isBuild
-                    ? buildPreviewUrl(e.filePath, s.name)
-                    : previewUrl(e.filePath, s.name),
+                previewUrl: 
+                // Only absolute bases prefix here; SvelteKit builds with a relative
+                // base ('./') and passes its real path via the Explorer's previewBase.
+                (base.startsWith('/') && base !== '/' ? base.replace(/\/$/, '') : '') +
+                    (buildMode || isBuild
+                        ? buildPreviewUrl(e.filePath, s.name)
+                        : previewUrl(e.filePath, s.name)),
             })),
             highlightedSource: e.highlightedSource,
             toc: e.toc,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdocs",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "description": "A lightweight documentation tool for Svelte 5 components",
   "type": "module",
   "license": "MIT",