sdocs 0.0.3 → 0.0.5

package/dist/vite.js

@@ -1,2 +1,266 @@
-// Separate entry for vite plugin (no Svelte imports)
-export { sdocsPlugin, default } from './vite-plugin.js';
+import { readFile } from 'node:fs/promises';
+import { loadConfig, resolveConfig } from './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';
+const IFRAME_PREFIX = '/@sdocs/iframe/';
+const PREVIEW_PREFIX = '/@sdocs/preview/';
+export function sdocsPlugin(userConfig) {
+    let config;
+    let root;
+    let server;
+    let docEntries = new Map();
+    let docImportsCache = new Map();
+    const buildMode = userConfig?._buildMode ?? false;
+    return {
+        name: 'sdocs',
+        async configResolved(resolvedConfig) {
+            root = resolvedConfig.root;
+            if (userConfig) {
+                config = resolveConfig(userConfig);
+            }
+            else {
+                config = await loadConfig(root);
+            }
+        },
+        configureServer(devServer) {
+            server = devServer;
+            // Middleware: serve iframe preview HTML pages
+            server.middlewares.use((req, res, next) => {
+                if (!req.url?.startsWith(PREVIEW_PREFIX))
+                    return next();
+                const parsed = parsePreviewUrl(req.url);
+                if (!parsed)
+                    return next();
+                const entry = docEntries.get(parsed.docFilePath);
+                if (!entry) {
+                    res.statusCode = 404;
+                    res.end('Doc not found');
+                    return;
+                }
+                const snippet = entry.snippets.find((s) => s.name === parsed.snippetName);
+                if (!snippet) {
+                    res.statusCode = 404;
+                    res.end('Snippet not found');
+                    return;
+                }
+                const iframeId = iframeVirtualId(parsed.docFilePath, parsed.snippetName);
+                const html = generatePreviewHtml(iframeId, config.css);
+                res.setHeader('Content-Type', 'text/html');
+                // Let Vite transform the HTML (resolves imports, injects HMR client)
+                server.transformIndexHtml(req.url, html).then((transformed) => {
+                    res.end(transformed);
+                }).catch((err) => {
+                    console.error('[sdocs] Preview HTML transform error:', err);
+                    res.statusCode = 500;
+                    res.end('Internal error');
+                });
+            });
+            // Watch for .sdoc file add/unlink/change
+            server.watcher.on('add', async (filePath) => {
+                if (isDocFile(filePath)) {
+                    console.log(`[sdocs] New doc file: ${filePath}`);
+                    await processDocFile(filePath);
+                    invalidateVirtualModule();
+                }
+            });
+            server.watcher.on('unlink', (filePath) => {
+                if (isDocFile(filePath)) {
+                    console.log(`[sdocs] Removed doc file: ${filePath}`);
+                    docEntries.delete(filePath);
+                    docImportsCache.delete(filePath);
+                    invalidateVirtualModule();
+                }
+            });
+            server.watcher.on('change', async (filePath) => {
+                if (isDocFile(filePath)) {
+                    console.log(`[sdocs] Doc file changed: ${filePath}`);
+                    await processDocFile(filePath);
+                    invalidateVirtualModule();
+                }
+                else if (isComponentReferencedByDoc(filePath)) {
+                    console.log(`[sdocs] Component changed: ${filePath}`);
+                    await reprocessComponentEntries(filePath);
+                    invalidateVirtualModule();
+                }
+            });
+        },
+        async buildStart() {
+            const files = await discoverDocFiles(config.include, root);
+            console.log(`[sdocs] Discovered ${files.length} doc file(s):`);
+            for (const file of files) {
+                console.log(`  - ${file}`);
+                await processDocFile(file);
+            }
+        },
+        resolveId(id) {
+            if (id === VIRTUAL_MODULE_ID)
+                return RESOLVED_VIRTUAL_ID;
+            if (id.startsWith(IFRAME_PREFIX))
+                return '\0' + id;
+        },
+        load(id) {
+            if (id === RESOLVED_VIRTUAL_ID) {
+                return generateVirtualModule();
+            }
+            // Virtual iframe wrapper component
+            if (id.startsWith('\0' + IFRAME_PREFIX)) {
+                const realId = id.slice(1);
+                const parsed = parseIframeId(realId);
+                if (!parsed)
+                    return null;
+                const entry = docEntries.get(parsed.docFilePath);
+                if (!entry)
+                    return null;
+                const snippet = entry.snippets.find((s) => s.name === parsed.snippetName);
+                if (!snippet)
+                    return null;
+                const absoluteImports = docImportsCache.get(parsed.docFilePath) ?? [];
+                return generateIframeComponent(absoluteImports, snippet.body);
+            }
+        },
+        async buildEnd() {
+            await disposeHighlighter();
+        },
+    };
+    // ─── Process a single doc file ───
+    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 = [];
+        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),
+                    });
+                }
+            }
+        }
+        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),
+                    });
+                }
+            }
+        }
+        // Cache resolved imports for iframe component generation
+        docImportsCache.set(filePath, resolveImportsToAbsolute(imports, filePath));
+        let componentData = null;
+        let highlightedSource = null;
+        if (kind === 'component' && componentPath) {
+            try {
+                componentData = await parseComponent(componentPath);
+                const componentSource = await readFile(componentPath, 'utf-8');
+                highlightedSource = await highlight(componentSource);
+            }
+            catch (err) {
+                console.warn(`[sdocs] Failed to parse component: ${componentPath}`, err);
+            }
+        }
+        for (const snippet of snippets) {
+            snippet.highlightedHtml = await highlight(snippet.body);
+        }
+        docEntries.set(filePath, {
+            kind,
+            filePath,
+            componentPath,
+            meta,
+            componentData,
+            snippets,
+            highlightedSource,
+            toc,
+        });
+    }
+    // ─── Generate the virtual module ───
+    function generateVirtualModule() {
+        const entries = Array.from(docEntries.values());
+        const data = entries.map((e) => ({
+            kind: e.kind,
+            filePath: e.filePath,
+            componentPath: e.componentPath,
+            meta: e.meta,
+            componentData: e.componentData,
+            snippets: e.snippets.map((s) => ({
+                name: s.name,
+                body: s.body,
+                highlightedHtml: s.highlightedHtml,
+                previewUrl: buildMode ? buildPreviewUrl(e.filePath, s.name) : previewUrl(e.filePath, s.name),
+            })),
+            highlightedSource: e.highlightedSource,
+            toc: e.toc,
+        }));
+        // Extract named CSS stylesheet names (empty array if single string or null)
+        const cssNames = config.css && typeof config.css === 'object'
+            ? Object.keys(config.css)
+            : [];
+        return `export const docs = ${JSON.stringify(data)};\nexport const cssNames = ${JSON.stringify(cssNames)};\nexport default docs;`;
+    }
+    // ─── HMR helpers ───
+    function invalidateVirtualModule() {
+        if (!server)
+            return;
+        const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ID);
+        if (mod) {
+            server.moduleGraph.invalidateModule(mod);
+            server.ws.send({ type: 'full-reload' });
+        }
+    }
+    function isDocFile(filePath) {
+        return filePath.endsWith('.sdoc') || filePath.endsWith('.sdocx');
+    }
+    function isComponentReferencedByDoc(filePath) {
+        for (const entry of docEntries.values()) {
+            if (entry.componentPath === filePath)
+                return true;
+        }
+        return false;
+    }
+    async function reprocessComponentEntries(componentPath) {
+        for (const [docPath, entry] of docEntries) {
+            if (entry.componentPath === componentPath) {
+                await processDocFile(docPath);
+            }
+        }
+    }
+}

package/package.json

@@ -1,76 +1,52 @@
 {
-	"name": "sdocs",
-	"version": "0.0.3",
-	"bin": {
-		"sdocs": "./bin/sdocs.js"
-	},
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run prepack",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
-	},
-	"files": [
-		"dist",
-		"bin",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js",
-			"default": "./dist/index.js"
-		},
-		"./vite": {
-			"types": "./dist/vite.d.ts",
-			"default": "./dist/vite.js"
-		},
-		"./virtual": {
-			"types": "./dist/virtual-sdocs.d.ts"
-		},
-		"./Sdocs.svelte": {
-			"svelte": "./dist/Sdocs.svelte",
-			"default": "./dist/Sdocs.svelte"
-		},
-		"./ui/css/global.css": "./dist/ui/css/global.css"
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0",
-		"vite": "^6.0.0 || ^7.0.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0 || ^6.0.0"
-	},
-	"peerDependenciesMeta": {
-		"vite": { "optional": true },
-		"@sveltejs/vite-plugin-svelte": { "optional": true }
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/kit": "^2.50.1",
-		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"mdsvex": "^0.12.6",
-		"publint": "^0.3.17",
-		"svelte": "^5.48.2",
-		"svelte-check": "^4.3.5",
-		"typescript": "^5.9.3",
-		"vite": "^7.3.1"
-	},
-	"keywords": [
-		"svelte",
-		"documentation",
-		"components"
-	],
-	"dependencies": {
-		"lucide-svelte": "^0.563.0"
-	}
+  "name": "sdocs",
+  "version": "0.0.5",
+  "description": "A lightweight documentation tool for Svelte 5 components",
+  "type": "module",
+  "license": "MIT",
+  "bin": {
+    "sdocs": "./bin/sdocs.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "default": "./dist/vite.js"
+    },
+    "./client": {
+      "svelte": "./dist/client/App.svelte"
+    }
+  },
+  "files": [
+    "dist",
+    "bin"
+  ],
+  "peerDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^5.0.0 || ^6.0.0",
+    "svelte": "^5.0.0",
+    "vite": "^6.0.0 || ^7.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "svelte": "^5.50.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^7.3.1",
+    "vitest": "^3.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "svelte-package -i src/lib -o dist",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "mdsvex": "^0.12.6",
+    "shiki": "^3.22.0",
+    "tinyglobby": "^0.2.15"
+  }
 }

package/README.md

@@ -1,43 +0,0 @@
-# sdocs
-
-A lightweight documentation tool for Svelte 5 components.
-
-Drop `.docs.svelte` files next to your components and get auto-generated interactive documentation with live previews, prop controls, CSS custom property editors, and method listings — all extracted from your source code.
-
-## Features
-
-- Auto-detected props with interactive controls
-- CSS custom properties via `@cssvar` JSDoc tags
-- Exported function detection (methods panel)
-- Snippet-based examples with source code display
-- Vite plugin with HMR support
-- Zero config — works out of the box
-
-## Quick start
-
-```bash
-npm install sdocs
-```
-
-```js
-// vite.config.ts
-import { sdocsPlugin } from 'sdocs/vite';
-
-export default defineConfig({
-  plugins: [sveltekit(), sdocsPlugin()]
-});
-```
-
-```svelte
-<!-- +page.svelte -->
-<script>
-  import { Sdocs } from 'sdocs';
-  import { docs } from 'virtual:sdocs';
-</script>
-
-<Sdocs {docs} />
-```
-
-## License
-
-MIT