sdocs 0.0.15 → 0.0.17

package/dist/vite.js

@@ -1,12 +1,11 @@
 import { readFile } from 'node:fs/promises';
-import { loadConfig, resolveConfig } from './config.js';
+import { loadConfig, resolveConfig } from './server/config.js';
 import { discoverDocFiles, getSdocKind } from './server/discovery.js';
 import { parseDocSource } from './server/meta-parser.js';
 import { parseComponent } from './server/prop-parser.js';
 import { extractSnippets, extractMarkupBody, hasDefaultSnippet, generateAutoDefault, } from './server/snippet-extractor.js';
 import { highlight, disposeHighlighter } from './server/highlighter.js';
 import { extractTocFromHtml } from './server/toc-extractor.js';
-import { parseSdocx } from './server/sdocx-parser.js';
 import { parseIframeId, parsePreviewUrl, resolveImportsToAbsolute, generateIframeComponent, generatePreviewHtml, iframeVirtualId, previewUrl, buildPreviewUrl, } from './server/snippet-compiler.js';
 const VIRTUAL_MODULE_ID = 'virtual:sdocs';
 const RESOLVED_VIRTUAL_ID = '\0virtual:sdocs';
@@ -68,7 +67,7 @@ export function sdocsPlugin(userConfig) {
                 if (isDocFile(filePath)) {
                     console.log(`[sdocs] New doc file: ${filePath}`);
                     await processDocFile(filePath);
-                    invalidateVirtualModule();
+                    invalidateVirtualModule(filePath);
                 }
             });
             server.watcher.on('unlink', (filePath) => {
@@ -83,12 +82,12 @@ export function sdocsPlugin(userConfig) {
                 if (isDocFile(filePath)) {
                     console.log(`[sdocs] Doc file changed: ${filePath}`);
                     await processDocFile(filePath);
-                    invalidateVirtualModule();
+                    invalidateVirtualModule(filePath);
                 }
                 else if (isComponentReferencedByDoc(filePath)) {
                     console.log(`[sdocs] Component changed: ${filePath}`);
                     await reprocessComponentEntries(filePath);
-                    invalidateVirtualModule();
+                    invalidateVirtualModule(filePath);
                 }
             });
         },
@@ -99,6 +98,17 @@ export function sdocsPlugin(userConfig) {
                 console.log(`  - ${file}`);
                 await processDocFile(file);
             }
+            // Explicitly watch doc files and their directories (outside Vite root)
+            if (server) {
+                const dirs = new Set();
+                for (const file of files) {
+                    server.watcher.add(file);
+                    dirs.add(file.substring(0, file.lastIndexOf('/')));
+                }
+                for (const dir of dirs) {
+                    server.watcher.add(dir);
+                }
+            }
         },
         resolveId(id) {
             if (id === VIRTUAL_MODULE_ID)
@@ -134,54 +144,27 @@ export function sdocsPlugin(userConfig) {
     async function processDocFile(filePath) {
         const source = await readFile(filePath, 'utf-8');
         const kind = getSdocKind(filePath);
-        const isSdocx = filePath.endsWith('.sdocx');
-        let meta;
-        let componentPath = null;
-        let imports = [];
+        const parsed = parseDocSource(source, filePath);
+        const meta = parsed.meta;
+        const componentPath = parsed.componentPath;
+        const imports = parsed.imports;
         let snippets;
         let toc;
-        if (isSdocx) {
-            // Markdown format: parse with mdsvex
-            const result = await parseSdocx(source, filePath, kind);
-            meta = result.meta;
-            componentPath = result.componentPath;
-            imports = result.imports;
-            snippets = result.snippets;
-            toc = result.toc;
-            // For component kind, auto-generate Default if missing
-            if (kind === 'component') {
-                const hasDefault = snippets.some((s) => s.name === 'Default');
-                if (!hasDefault && componentPath) {
-                    const componentName = componentPath.split('/').pop()?.replace('.svelte', '') ?? 'Component';
-                    snippets.unshift({
-                        name: 'Default',
-                        body: generateAutoDefault(componentName),
-                    });
-                }
+        if (kind === 'page' || kind === 'layout') {
+            const body = extractMarkupBody(source);
+            snippets = [{ name: 'Content', body }];
+            if (kind === 'page') {
+                toc = extractTocFromHtml(body);
             }
         }
         else {
-            // Svelte format: existing pipeline
-            const parsed = parseDocSource(source, filePath);
-            meta = parsed.meta;
-            componentPath = parsed.componentPath;
-            imports = parsed.imports;
-            if (kind === 'page' || kind === 'layout') {
-                const body = extractMarkupBody(source);
-                snippets = [{ name: 'Content', body }];
-                if (kind === 'page') {
-                    toc = extractTocFromHtml(body);
-                }
-            }
-            else {
-                snippets = extractSnippets(source);
-                if (!hasDefaultSnippet(snippets)) {
-                    const componentName = componentPath?.split('/').pop()?.replace('.svelte', '') ?? 'Component';
-                    snippets.unshift({
-                        name: 'Default',
-                        body: generateAutoDefault(componentName),
-                    });
-                }
+            snippets = extractSnippets(source);
+            if (!hasDefaultSnippet(snippets)) {
+                const componentName = componentPath?.split('/').pop()?.replace('.svelte', '') ?? 'Component';
+                snippets.unshift({
+                    name: 'Default',
+                    body: generateAutoDefault(componentName),
+                });
             }
         }
         // If component is specified as a path but not imported, auto-add the import
@@ -245,17 +228,30 @@ export function sdocsPlugin(userConfig) {
         return `export const docs = ${JSON.stringify(data)};\nexport const cssNames = ${JSON.stringify(cssNames)};\nexport default docs;`;
     }
     // ─── HMR helpers ───
-    function invalidateVirtualModule() {
+    function invalidateVirtualModule(docFilePath) {
         if (!server)
             return;
         const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ID);
         if (mod) {
             server.moduleGraph.invalidateModule(mod);
-            server.ws.send({ type: 'full-reload' });
         }
+        // Also invalidate iframe virtual modules for the changed doc file
+        if (docFilePath) {
+            const entry = docEntries.get(docFilePath);
+            if (entry) {
+                for (const snippet of entry.snippets) {
+                    const iframeId = '\0' + iframeVirtualId(docFilePath, snippet.name);
+                    const iframeMod = server.moduleGraph.getModuleById(iframeId);
+                    if (iframeMod) {
+                        server.moduleGraph.invalidateModule(iframeMod);
+                    }
+                }
+            }
+        }
+        server.ws.send({ type: 'full-reload' });
     }
     function isDocFile(filePath) {
-        return filePath.endsWith('.sdoc') || filePath.endsWith('.sdocx');
+        return filePath.endsWith('.sdoc');
     }
     function isComponentReferencedByDoc(filePath) {
         for (const entry of docEntries.values()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdocs",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "A lightweight documentation tool for Svelte 5 components",
   "type": "module",
   "license": "MIT",
@@ -18,6 +18,10 @@
     },
     "./client": {
       "svelte": "./dist/client/App.svelte"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "svelte": "./dist/ui/index.js"
     }
   },
   "files": [
@@ -45,7 +49,6 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "mdsvex": "^0.12.6",
     "shiki": "^3.22.0",
     "tinyglobby": "^0.2.15",
     "typescript": "^5.7.0"

package/dist/client/Sidebar.svelte

@@ -1,329 +0,0 @@
-<script lang="ts">
-	import { SvelteSet } from 'svelte/reactivity';
-	import type { TreeNode } from './tree-builder.js';
-	import { pathToHash } from './router.svelte.js';
-
-	type ThemeMode = 'light' | 'dark' | 'system';
-
-	interface Props {
-		tree: TreeNode[];
-		currentPath: string[];
-		logo: string;
-		cssNames?: string[];
-		activeStylesheet?: string;
-		theme?: ThemeMode;
-		onToggleFullscreen?: () => void;
-		onStylesheetChange?: (name: string) => void;
-		onThemeChange?: (theme: ThemeMode) => void;
-	}
-
-	let { tree, currentPath, logo, cssNames = [], activeStylesheet, theme = 'system', onToggleFullscreen, onStylesheetChange, onThemeChange }: Props = $props();
-
-	const themeIcons: Record<ThemeMode, string> = { light: '\u2600', dark: '\u263D', system: '\u25D1' };
-	const themeLabels: Record<ThemeMode, string> = { light: 'Light', dark: 'Dark', system: 'System' };
-	const themeCycle: Record<ThemeMode, ThemeMode> = { light: 'dark', dark: 'system', system: 'light' };
-
-	function cycleTheme() {
-		onThemeChange?.(themeCycle[theme]);
-	}
-	let searchQuery = $state('');
-
-	// Track expanded state by path key (SvelteSet for reactivity)
-	let expandedSet = new SvelteSet<string>();
-	let initialized = false;
-
-	// Initialize expanded state from tree defaults
-	$effect(() => {
-		if (!initialized && tree.length > 0) {
-			collectDefaults(tree, expandedSet);
-			initialized = true;
-		}
-	});
-
-	function collectDefaults(nodes: TreeNode[], set: SvelteSet<string>) {
-		for (const node of nodes) {
-			if (node.defaultExpanded || node.type === 'group') {
-				set.add(node.path.join('/'));
-			}
-			if (node.children.length > 0) {
-				collectDefaults(node.children, set);
-			}
-		}
-	}
-
-	function toggleExpanded(pathKey: string) {
-		if (expandedSet.has(pathKey)) {
-			expandedSet.delete(pathKey);
-		} else {
-			expandedSet.add(pathKey);
-		}
-	}
-
-	function isExpanded(pathKey: string): boolean {
-		if (searchQuery.trim()) return true; // Auto-expand when searching
-		return expandedSet.has(pathKey);
-	}
-
-	const filteredTree = $derived(
-		searchQuery.trim() ? filterTree(tree, searchQuery.trim().toLowerCase()) : tree,
-	);
-
-	function filterTree(nodes: TreeNode[], query: string): TreeNode[] {
-		const result: TreeNode[] = [];
-		for (const node of nodes) {
-			if (node.name.toLowerCase().includes(query)) {
-				result.push(node);
-			} else if (node.children.length > 0) {
-				const filtered = filterTree(node.children, query);
-				if (filtered.length > 0) {
-					result.push({ ...node, children: filtered });
-				}
-			}
-		}
-		return result;
-	}
-
-	function isActive(nodePath: string[]): boolean {
-		if (nodePath.length > currentPath.length) return false;
-		return nodePath.every((seg, i) => seg === currentPath[i]);
-	}
-
-	function isExactActive(nodePath: string[]): boolean {
-		return nodePath.length === currentPath.length && nodePath.every((seg, i) => seg === currentPath[i]);
-	}
-
-	function nodeIcon(node: TreeNode): string {
-		switch (node.type) {
-			case 'component': return '◆';
-			case 'page': return '◇';
-			case 'layout': return '▣';
-			case 'folder': return '▸';
-			default: return '';
-		}
-	}
-</script>
-
-<aside class="sdocs-sidebar">
-	<div class="sdocs-sidebar-header">
-		<span class="sdocs-logo">{logo}</span>
-		<div class="sdocs-header-actions">
-			{#if cssNames.length > 1}
-				<select
-					class="sdocs-css-picker"
-					value={activeStylesheet}
-					onchange={(e) => onStylesheetChange?.(e.currentTarget.value)}
-				>
-					{#each cssNames as name (name)}
-						<option value={name}>{name}</option>
-					{/each}
-				</select>
-			{/if}
-			<button class="sdocs-theme-btn" onclick={cycleTheme} title="{themeLabels[theme]} theme">
-				{themeIcons[theme]}
-			</button>
-			<button class="sdocs-fullscreen-btn" onclick={() => onToggleFullscreen?.()} title="Fullscreen">
-				&#x26F6;
-			</button>
-		</div>
-	</div>
-
-	<div class="sdocs-sidebar-search">
-		<input
-			type="text"
-			placeholder="Search..."
-			bind:value={searchQuery}
-			class="sdocs-search-input"
-		/>
-	</div>
-
-	<nav class="sdocs-sidebar-tree">
-		{#each filteredTree as node (node.path.join('/'))}
-			{@render treeItem(node, 0)}
-		{/each}
-	</nav>
-</aside>
-
-{#snippet treeItem(node: TreeNode, depth: number)}
-	{@const pathKey = node.path.join('/')}
-	{@const isExpandable = node.type === 'folder' || node.type === 'group' || (node.type === 'component' && node.children.length > 0)}
-	{@const isGroup = node.type === 'group'}
-	{@const isSelectable = node.type === 'page' || node.type === 'layout' || (node.type === 'component' && node.children.length === 0)}
-	{@const activeExact = isExactActive(node.path)}
-	{@const activeContains = isActive(node.path)}
-
-	<div class="sdocs-tree-item" style:--depth={depth}>
-		{#if isGroup}
-			<div class="sdocs-group-label">{node.name.toUpperCase()}</div>
-		{:else if isExpandable}
-			<button
-				class="sdocs-tree-btn"
-				class:sdocs-active={activeContains}
-				onclick={() => toggleExpanded(pathKey)}
-			>
-				<span class="sdocs-tree-arrow" class:expanded={isExpanded(pathKey)}>&#9654;</span>
-				<span class="sdocs-tree-icon">{nodeIcon(node)}</span>
-				<span>{node.name}</span>
-			</button>
-		{:else if isSelectable}
-			<a
-				href={pathToHash(node.path)}
-				class="sdocs-tree-link"
-				class:sdocs-active={activeExact}
-			>
-				<span class="sdocs-tree-icon">{nodeIcon(node)}</span>
-				<span>{node.name}</span>
-			</a>
-		{:else}
-			<a
-				href={pathToHash(node.path)}
-				class="sdocs-tree-link"
-				class:sdocs-active={activeExact}
-			>
-				<span>{node.name}</span>
-			</a>
-		{/if}
-
-		{#if (isExpandable || isGroup) && isExpanded(pathKey)}
-			<div class="sdocs-tree-children">
-				{#each node.children as child (child.path.join('/'))}
-					{@render treeItem(child, depth + 1)}
-				{/each}
-			</div>
-		{/if}
-	</div>
-{/snippet}
-
-<style>
-	.sdocs-sidebar {
-		width: 260px;
-		height: 100vh;
-		overflow-y: auto;
-		border-right: 1px solid var(--sdocs-border);
-		background: var(--sdocs-bg-subtle);
-		display: flex;
-		flex-direction: column;
-		font-family: var(--sdocs-font-sans);
-		font-size: 13px;
-	}
-	.sdocs-sidebar-header {
-		padding: 12px 16px;
-		border-bottom: 1px solid var(--sdocs-border);
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-	.sdocs-logo {
-		font-weight: 700;
-		font-size: 16px;
-		color: var(--sdocs-text-heading);
-	}
-	.sdocs-header-actions {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-	}
-	.sdocs-css-picker {
-		font-size: 12px;
-		padding: 2px 4px;
-		border: 1px solid var(--sdocs-border);
-		border-radius: 4px;
-		background: var(--sdocs-bg);
-		color: var(--sdocs-text);
-	}
-	.sdocs-theme-btn {
-		padding: 2px 6px;
-		border: 1px solid var(--sdocs-border);
-		border-radius: 4px;
-		background: var(--sdocs-bg);
-		color: var(--sdocs-text);
-		cursor: pointer;
-		font-size: 14px;
-		line-height: 1;
-	}
-	.sdocs-theme-btn:hover {
-		background: var(--sdocs-bg-hover);
-	}
-	.sdocs-fullscreen-btn {
-		padding: 2px 6px;
-		border: 1px solid var(--sdocs-border);
-		border-radius: 4px;
-		background: var(--sdocs-bg);
-		color: var(--sdocs-text);
-		cursor: pointer;
-		font-size: 14px;
-		line-height: 1;
-	}
-	.sdocs-fullscreen-btn:hover {
-		background: var(--sdocs-bg-hover);
-	}
-	.sdocs-sidebar-search {
-		padding: 8px 16px;
-	}
-	.sdocs-search-input {
-		width: 100%;
-		padding: 6px 10px;
-		border: 1px solid var(--sdocs-border);
-		border-radius: 6px;
-		font-size: 13px;
-		outline: none;
-		box-sizing: border-box;
-		background: var(--sdocs-bg);
-		color: var(--sdocs-text);
-	}
-	.sdocs-search-input:focus {
-		border-color: var(--sdocs-primary);
-		box-shadow: 0 0 0 2px var(--sdocs-primary-bg);
-	}
-	.sdocs-sidebar-tree {
-		flex: 1;
-		overflow-y: auto;
-		padding: 8px 0;
-	}
-	.sdocs-tree-item {
-		padding-left: calc(var(--depth, 0) * 16px);
-	}
-	.sdocs-group-label {
-		padding: 12px 16px 4px;
-		font-size: 11px;
-		font-weight: 600;
-		color: var(--sdocs-text-muted);
-		letter-spacing: 0.05em;
-	}
-	.sdocs-tree-btn,
-	.sdocs-tree-link {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		width: 100%;
-		padding: 4px 16px;
-		border: none;
-		background: none;
-		font: inherit;
-		color: var(--sdocs-text);
-		text-decoration: none;
-		cursor: pointer;
-		text-align: left;
-	}
-	.sdocs-tree-btn:hover,
-	.sdocs-tree-link:hover {
-		background: var(--sdocs-border);
-	}
-	.sdocs-active {
-		color: var(--sdocs-primary);
-		font-weight: 500;
-	}
-	.sdocs-tree-arrow {
-		font-size: 8px;
-		transition: transform 0.15s;
-		display: inline-block;
-		width: 10px;
-	}
-	.sdocs-tree-arrow.expanded {
-		transform: rotate(90deg);
-	}
-	.sdocs-tree-icon {
-		font-size: 10px;
-		width: 14px;
-		text-align: center;
-	}
-</style>

package/dist/client/controls/CheckboxControl.svelte.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    label: string;
-    value: boolean;
-    onchange: (value: boolean) => void;
-}
-declare const CheckboxControl: import("svelte").Component<Props, {}, "">;
-type CheckboxControl = ReturnType<typeof CheckboxControl>;
-export default CheckboxControl;

package/dist/client/controls/ColorControl.svelte.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    label: string;
-    value: string;
-    onchange: (value: string) => void;
-}
-declare const ColorControl: import("svelte").Component<Props, {}, "">;
-type ColorControl = ReturnType<typeof ColorControl>;
-export default ColorControl;

package/dist/client/controls/DimensionControl.svelte.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    label: string;
-    value: string;
-    onchange: (value: string) => void;
-}
-declare const DimensionControl: import("svelte").Component<Props, {}, "">;
-type DimensionControl = ReturnType<typeof DimensionControl>;
-export default DimensionControl;

package/dist/client/controls/NumberControl.svelte.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    label: string;
-    value: number;
-    onchange: (value: number) => void;
-}
-declare const NumberControl: import("svelte").Component<Props, {}, "">;
-type NumberControl = ReturnType<typeof NumberControl>;
-export default NumberControl;

package/dist/client/controls/SelectControl.svelte.d.ts

@@ -1,9 +0,0 @@
-interface Props {
-    label: string;
-    value: string;
-    options: string[];
-    onchange: (value: string) => void;
-}
-declare const SelectControl: import("svelte").Component<Props, {}, "">;
-type SelectControl = ReturnType<typeof SelectControl>;
-export default SelectControl;

package/dist/client/controls/TextControl.svelte.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    label: string;
-    value: string;
-    onchange: (value: string) => void;
-}
-declare const TextControl: import("svelte").Component<Props, {}, "">;
-type TextControl = ReturnType<typeof TextControl>;
-export default TextControl;

package/dist/server/sdocx-parser.d.ts

@@ -1,11 +0,0 @@
-import type { SdocMeta, ExtractedSnippet, TocHeading } from '../types.js';
-interface SdocxParseResult {
-    meta: SdocMeta;
-    componentPath: string | null;
-    imports: string[];
-    snippets: ExtractedSnippet[];
-    toc?: TocHeading[];
-}
-/** Parse a .sdocx file (markdown format) */
-export declare function parseSdocx(source: string, filePath: string, kind: 'component' | 'page' | 'layout'): Promise<SdocxParseResult>;
-export {};