sdocs 0.0.39 → 0.0.41

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.41",
   "description": "A lightweight documentation tool for Svelte 5 components",
   "type": "module",
   "license": "MIT",
@@ -21,6 +21,11 @@
       "types": "./dist/vite.d.ts",
       "default": "./dist/vite.js"
     },
+    "./language": {
+      "types": "./dist/language/index.d.ts",
+      "default": "./dist/language/index.js"
+    },
+    "./grammar/sdoc.tmLanguage.json": "./dist/grammar/sdoc.tmLanguage.json",
     "./explorer": {
       "svelte": "./dist/explorer/Explorer.svelte"
     },