sdocs 0.0.39 → 0.0.40

package/CHANGELOG.md

@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.0.40] - 2026-07-04
+
+### Fixed
+
+- **Wrapped previews bind to the documented component.** When a preview
+  wraps the documented component in another one (a `<Tab>` shown inside
+  `<Tabs>`), method calls and live state used to attach to the outer
+  wrapper — the first capitalized tag in the snippet. The preview ref now
+  binds to the doc's own component wherever it appears in the snippet,
+  falling back to the first capitalized tag when it's absent.
+- **Usage-code patching matches the component name exactly.** Attribute
+  updates from the controls located the root tag with a prefix search, so
+  a component like `Tab` could patch a sibling `<Tabs>` tag instead of its
+  own. The tag search now requires a whole-name match.
+
 ## [0.0.39] - 2026-07-04
 
 ### Changed

package/dist/explorer/views/ComponentView.svelte

@@ -106,8 +106,11 @@
 		if (changes.length === 0) return snippetBody;
 
 		// Find the opening tag: <ComponentName ...> or <ComponentName ... />
-		const tagStart = snippetBody.indexOf(`<${name}`);
-		if (tagStart === -1) return snippetBody;
+		// (whole-name match, so <Tab doesn't hit <Tabs)
+		const escapedName = name.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+		const tagMatch = snippetBody.match(new RegExp(`<${escapedName}(?=[\\s/>])`));
+		if (!tagMatch || tagMatch.index === undefined) return snippetBody;
+		const tagStart = tagMatch.index;
 
 		// Find the end of the opening tag, respecting {} expressions
 		let braceDepth = 0;

package/dist/server/snippet-compiler.d.ts

@@ -11,7 +11,7 @@ export declare function resolveImportsToAbsolute(imports: string[], docFilePath:
 /** Generate a virtual Svelte iframe wrapper component for a snippet.
  * Includes $state for reactive prop updates via postMessage, invokes
  * component methods on request, and broadcasts exported state values. */
-export declare function generateIframeComponent(absoluteImports: string[], snippetBody: string, stateNames?: string[]): string;
+export declare function generateIframeComponent(absoluteImports: string[], snippetBody: string, stateNames?: string[], componentName?: string): string;
 /** The JS that boots a preview page: mount the wrapper + parent-frame messaging. */
 export declare function generateMountScript(iframeComponentId: string): string;
 /** Generate the HTML page served inside the iframe (dev / CLI-build inputs) */

package/dist/server/snippet-compiler.js

@@ -35,12 +35,21 @@ export function resolveImportsToAbsolute(imports, docFilePath) {
         return imp;
     });
 }
-/** Add bind:this to the snippet's root component so the wrapper can reach
- * its exported methods and state. Skipped when the author already binds. */
-function injectRootRef(snippetBody) {
+/** Add bind:this to the documented component in the snippet so the wrapper
+ * can reach its exported methods and state. Binds the first occurrence of
+ * the doc's component when named (so wrapped children like
+ * <Tabs><Tab/></Tabs> documenting Tab bind the right instance), otherwise
+ * the first capitalized tag. Skipped when the author already binds. */
+function injectRootRef(snippetBody, componentName) {
     if (snippetBody.includes('bind:this'))
         return snippetBody;
-    const match = snippetBody.match(/<([A-Z][A-Za-z0-9_]*)/);
+    let match = null;
+    if (componentName) {
+        const escaped = componentName.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+        match = snippetBody.match(new RegExp(`<${escaped}(?=[\\s/>])`));
+    }
+    if (!match)
+        match = snippetBody.match(/<[A-Z][A-Za-z0-9_]*(?=[\s/>])/);
     if (!match || match.index === undefined)
         return snippetBody;
     const insertAt = match.index + match[0].length;
@@ -49,7 +58,7 @@ function injectRootRef(snippetBody) {
 /** Generate a virtual Svelte iframe wrapper component for a snippet.
  * Includes $state for reactive prop updates via postMessage, invokes
  * component methods on request, and broadcasts exported state values. */
-export function generateIframeComponent(absoluteImports, snippetBody, stateNames = []) {
+export function generateIframeComponent(absoluteImports, snippetBody, stateNames = [], componentName) {
     const importBlock = absoluteImports.length > 0
         ? absoluteImports.join('\n') + '\n'
         : '';
@@ -118,7 +127,7 @@ ${stateBroadcast}
 
 <div id="sdocs-preview">
 	{#snippet SdocsPreview(args)}
-		${injectRootRef(snippetBody)}
+		${injectRootRef(snippetBody, componentName)}
 	{/snippet}
 	{@render SdocsPreview(args)}
 </div>`;

package/dist/server/snippet-compiler.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/server/snippet-compiler.test.js

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+import { generateIframeComponent } from './snippet-compiler.js';
+describe('root ref injection', () => {
+    it('binds the documented component, not the wrapper', () => {
+        const out = generateIframeComponent([], '<Tabs>\n\t<Tab {...args} />\n</Tabs>', [], 'Tab');
+        expect(out).toContain('<Tab bind:this={__sdocsRef} {...args} />');
+        expect(out).not.toContain('<Tabs bind:this');
+    });
+    it('binds the first capitalized tag when no component is named', () => {
+        const out = generateIframeComponent([], '<Card><Button /></Card>', []);
+        expect(out).toContain('<Card bind:this={__sdocsRef}>');
+    });
+    it('falls back to the first capitalized tag when the named component is absent', () => {
+        const out = generateIframeComponent([], '<Tabs active={0}>text</Tabs>', [], 'Tab');
+        expect(out).toContain('<Tabs bind:this={__sdocsRef} active={0}>');
+    });
+    it('leaves snippets with an author bind:this untouched', () => {
+        const body = '<Tab bind:this={mine} />';
+        const out = generateIframeComponent([], body, [], 'Tab');
+        expect(out).toContain(body);
+        expect(out).not.toContain('bind:this={__sdocsRef}');
+    });
+});

package/dist/vite.js

@@ -217,7 +217,8 @@ export function sdocsPlugin(userConfig) {
                     return null;
                 const absoluteImports = docImportsCache.get(parsed.docFilePath) ?? [];
                 const stateNames = (entry.componentData?.state ?? []).map((s) => s.name);
-                return generateIframeComponent(absoluteImports, snippet.body, stateNames);
+                const componentName = entry.componentPath?.split('/').pop()?.replace('.svelte', '');
+                return generateIframeComponent(absoluteImports, snippet.body, stateNames, componentName);
             }
             // Virtual mount script for an emitted preview page
             if (id.startsWith('\0' + MOUNT_PREFIX)) {

package/package.json

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