@stencil/storybook-plugin 0.5.4 → 0.5.5

package/README.md

@@ -36,6 +36,24 @@ export default config;
 
 See the [Storybook Docs](https://storybook.js.org/docs/7.0/qwik/get-started/introduction) for the best documentation on getting started with Storybook.
 
+## Autodocs
+
+The plugin can automatically generate documentation and argTypes from your Stencil component metadata. In your `.storybook/preview.ts`, import and call `setCustomElementsManifest`:
+
+```tsx
+import { setCustomElementsManifest } from '@stencil/storybook-plugin';
+import customElements from '../dist/custom-elements.json';
+
+setCustomElementsManifest(customElements);
+```
+
+This will automatically populate:
+- Component props documentation
+- ArgTypes with proper controls
+- Events documentation
+- Slots documentation
+- CSS custom properties
+
 ## Usage
 
 A basic story will look like this:
@@ -105,6 +123,75 @@ export const Primary: Story = {
 };
 ```
 
+## Source Code Display
+
+The plugin supports displaying source code in multiple formats:
+
+### Language Options
+
+Set the source language in your story parameters:
+
+```tsx
+export default {
+  parameters: {
+    docs: {
+      source: {
+        language: 'html', // or 'jsx', 'tsx'
+      },
+    },
+  },
+} satisfies Meta<MyComponent>;
+```
+
+**HTML format:**
+```html
+<my-component class="example" first="John"></my-component>
+```
+
+**JSX/TSX format:**
+```jsx
+<MyComponent className="example" first="John" />
+```
+
+When using `jsx` or `tsx`:
+- Custom elements (with hyphens) are converted to PascalCase: `<my-component>` → `<MyComponent>`
+- Standard HTML elements remain lowercase: `<div>`, `<span>`
+- HTML attributes are converted to JSX equivalents: `class` → `className`, `for` → `htmlFor`, `tabindex` → `tabIndex`
+- Long attribute lists automatically wrap to multiple lines (80 character threshold)
+
+### Global Source Format Control
+
+You can add a toolbar control to switch between formats globally:
+
+```tsx
+// .storybook/preview.tsx
+export const globalTypes = {
+  source: {
+    name: 'Source Format',
+    defaultValue: 'html',
+    description: 'Select the source format',
+    toolbar: {
+      items: ['html', 'jsx', 'tsx'],
+      icon: 'markup',
+      showName: true,
+      dynamicTitle: true,
+    },
+  },
+};
+
+export const decorators = [
+  (story, context) => {
+    const sourceLanguage = context.globals.source || 'html';
+    context.parameters.docs = context.parameters.docs || {};
+    context.parameters.docs.source = context.parameters.docs.source || {};
+    context.parameters.docs.source.language = sourceLanguage;
+    return story();
+  },
+];
+```
+
+This adds a "Source Format" dropdown to the Storybook toolbar, allowing you to switch between HTML and JSX/TSX display on the fly.
+
 ### Troubleshooting
 
 If you encounter any issues with the story rendering, please check the following:

package/dist/docs/index.cjs

@@ -1,4 +1,4 @@
-const require_docs = require('../docs-C41e1jpq.cjs');
+const require_docs = require('../docs-ONVKsKI9.cjs');
 
-exports.renderHTML = require_docs.renderHTML;
+exports.renderVNode = require_docs.renderVNode;
 exports.sourceDecorator = require_docs.sourceDecorator;

package/dist/docs/index.d.cts

@@ -2,14 +2,14 @@ import { StencilRenderer } from "../types-BZP9npQ9.cjs";
 import { VNode } from "@stencil/core";
 import { DecoratorFunction } from "storybook/internal/types";
 
-//#region src/docs/render-html.d.ts
-declare const renderHTML: (vnode: VNode) => string;
-//# sourceMappingURL=render-html.d.ts.map
+//#region src/docs/render-vnode.d.ts
+type RenderMode = 'html' | 'jsx';
+declare const renderVNode: (vnode: VNode, mode: RenderMode) => string;
 //#endregion
 //#region src/docs/source-decorator.d.ts
 declare const sourceDecorator: DecoratorFunction<StencilRenderer<unknown>>;
 //# sourceMappingURL=source-decorator.d.ts.map
 
 //#endregion
-export { renderHTML, sourceDecorator };
+export { renderVNode, sourceDecorator };
 //# sourceMappingURL=index.d.cts.map

package/dist/docs/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/docs/render-html.ts","../../src/docs/source-decorator.ts"],"sourcesContent":[],"mappings":";;;;;cAqCa,oBAAqB;;;;cCpBrB,iBAAiB,kBAAkB"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/docs/render-vnode.ts","../../src/docs/source-decorator.ts"],"sourcesContent":[],"mappings":";;;;;KAEK,UAAA;cA2HQ,qBAAsB,aAAa;;;cC5GnC,iBAAiB,kBAAkB"}

package/dist/docs/index.d.ts

@@ -2,14 +2,14 @@ import { StencilRenderer } from "../types-DqHtEV5w.js";
 import { VNode } from "@stencil/core";
 import { DecoratorFunction } from "storybook/internal/types";
 
-//#region src/docs/render-html.d.ts
-declare const renderHTML: (vnode: VNode) => string;
-//# sourceMappingURL=render-html.d.ts.map
+//#region src/docs/render-vnode.d.ts
+type RenderMode = 'html' | 'jsx';
+declare const renderVNode: (vnode: VNode, mode: RenderMode) => string;
 //#endregion
 //#region src/docs/source-decorator.d.ts
 declare const sourceDecorator: DecoratorFunction<StencilRenderer<unknown>>;
 //# sourceMappingURL=source-decorator.d.ts.map
 
 //#endregion
-export { renderHTML, sourceDecorator };
+export { renderVNode, sourceDecorator };
 //# sourceMappingURL=index.d.ts.map

package/dist/docs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/docs/render-html.ts","../../src/docs/source-decorator.ts"],"sourcesContent":[],"mappings":";;;;;cAqCa,oBAAqB;;;;cCpBrB,iBAAiB,kBAAkB"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/docs/render-vnode.ts","../../src/docs/source-decorator.ts"],"sourcesContent":[],"mappings":";;;;;KAEK,UAAA;cA2HQ,qBAAsB,aAAa;;;cC5GnC,iBAAiB,kBAAkB"}

package/dist/docs/index.js

@@ -1,3 +1,3 @@
-import { renderHTML, sourceDecorator } from "../docs-ObZ8znBB.js";
+import { renderVNode, sourceDecorator } from "../docs-DFb4MYCm.js";
 
-export { renderHTML, sourceDecorator };
+export { renderVNode, sourceDecorator };

package/dist/docs-DFb4MYCm.js

@@ -0,0 +1,85 @@
+import { SourceType } from "storybook/internal/docs-tools";
+import { emitTransformCode, useEffect } from "storybook/internal/preview-api";
+
+//#region src/docs/render-vnode.ts
+function kebabToPascal(str) {
+	return str.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function vnodeToString(node, options, indentLevel = 0) {
+	const LINE_WIDTH = 80;
+	const indent = "  ".repeat(indentLevel);
+	const { mode } = options;
+	if (node.$text$ !== null) return indent + node.$text$;
+	if (node.$tag$ === null) return "";
+	const tag = mode === "jsx" && typeof node.$tag$ === "string" && node.$tag$.includes("-") ? kebabToPascal(node.$tag$) : String(node.$tag$);
+	const attrArray = node.$attrs$ ? Object.entries(node.$attrs$).filter(([_, value]) => value !== void 0).map(([key, value]) => {
+		let attrName = key;
+		if (mode === "jsx") {
+			const htmlToJsx = {
+				class: "className",
+				for: "htmlFor",
+				tabindex: "tabIndex"
+			};
+			attrName = htmlToJsx[key] || key;
+		}
+		if (typeof value === "function") return "";
+		if (typeof value === "boolean") return value ? attrName : "";
+		if (typeof value === "string") return `${attrName}="${value}"`;
+		if (mode === "jsx") return `${attrName}={${JSON.stringify(value)}}`;
+		return `${attrName}="${value}"`;
+	}).filter((attr) => attr.trim()) : [];
+	const children = node.$children$ ?? [];
+	if (children.length === 0) {
+		const attrsStr$1 = attrArray.length > 0 ? " " + attrArray.join(" ") : "";
+		const singleLine = mode === "jsx" ? `${indent}<${tag}${attrsStr$1} />` : `${indent}<${tag}${attrsStr$1}></${tag}>`;
+		if (singleLine.length <= LINE_WIDTH) return singleLine;
+		const attrIndent$1 = indent + "  ";
+		const formattedAttrs$1 = attrArray.length > 0 ? "\n" + attrArray.map((attr) => `${attrIndent$1}${attr}`).join("\n") + "\n" + indent : "";
+		return mode === "jsx" ? `${indent}<${tag}${formattedAttrs$1}/>` : `${indent}<${tag}${formattedAttrs$1}></${tag}>`;
+	}
+	const attrsStr = attrArray.length > 0 ? " " + attrArray.join(" ") : "";
+	const openingTag = `${indent}<${tag}${attrsStr}>`;
+	if (openingTag.length <= LINE_WIDTH) {
+		const childrenString$1 = children.map((child) => vnodeToString(child, options, indentLevel + 1)).join("\n");
+		return `${openingTag}\n${childrenString$1}\n${indent}</${tag}>`;
+	}
+	const attrIndent = indent + "  ";
+	const formattedAttrs = attrArray.length > 0 ? "\n" + attrArray.map((attr) => `${attrIndent}${attr}`).join("\n") + "\n" + indent : "";
+	const childrenString = children.map((child) => vnodeToString(child, options, indentLevel + 1)).join("\n");
+	return `${indent}<${tag}${formattedAttrs}>\n${childrenString}\n${indent}</${tag}>`;
+}
+const renderVNode = (vnode, mode) => {
+	return vnodeToString(vnode, { mode });
+};
+
+//#endregion
+//#region src/docs/source-decorator.ts
+const skip = (context) => {
+	const sourceParams = context?.parameters.docs?.source;
+	const isArgsStory = context?.parameters.__isArgsStory;
+	if (sourceParams.type === SourceType.DYNAMIC) return false;
+	return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
+};
+const sourceDecorator = (storyFn, context) => {
+	const story = storyFn();
+	useEffect(() => {
+		const renderedForSource = context?.parameters.docs?.source?.excludeDecorators ? context.originalStoryFn(context.args, context) : story;
+		if (skip(context)) return;
+		switch (context.parameters.docs.source.language) {
+			case "html": {
+				emitTransformCode(renderVNode(renderedForSource, "html"), context);
+				break;
+			}
+			case "jsx":
+			case "tsx": {
+				emitTransformCode(renderVNode(renderedForSource, "jsx"), context);
+				break;
+			}
+		}
+	});
+	return story;
+};
+
+//#endregion
+export { renderVNode, sourceDecorator };
+//# sourceMappingURL=docs-DFb4MYCm.js.map

package/dist/docs-DFb4MYCm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"docs-DFb4MYCm.js","names":["str: string","node: VNode","options: RenderOptions","htmlToJsx: Record<string, string>","attrsStr","attrIndent","formattedAttrs","childrenString","vnode: VNode","mode: RenderMode","context: Parameters<DecoratorFunction<StencilRenderer<unknown>>>[1]","sourceDecorator: DecoratorFunction<StencilRenderer<unknown>>"],"sources":["../src/docs/render-vnode.ts","../src/docs/source-decorator.ts"],"sourcesContent":["import { type VNode } from '@stencil/core';\n\ntype RenderMode = 'html' | 'jsx';\n\ninterface RenderOptions {\n  mode: RenderMode;\n}\n\nfunction kebabToPascal(str: string): string {\n  return str\n    .split('-')\n    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join('');\n}\n\nfunction vnodeToString(node: VNode, options: RenderOptions, indentLevel = 0): string {\n  const LINE_WIDTH = 80;\n  const indent = '  '.repeat(indentLevel);\n  const { mode } = options;\n\n  if (node.$text$ !== null) {\n    return indent + node.$text$;\n  }\n\n  if (node.$tag$ === null) {\n    return '';\n  }\n\n  // Convert tag name based on mode\n  // Only convert to PascalCase if it's a custom element (has a dash)\n  const tag =\n    mode === 'jsx' && typeof node.$tag$ === 'string' && node.$tag$.includes('-')\n      ? kebabToPascal(node.$tag$)\n      : String(node.$tag$);\n\n  // Process attributes as array (without leading spaces)\n  const attrArray = node.$attrs$\n    ? Object.entries(node.$attrs$)\n        .filter(([_, value]) => value !== undefined)\n        .map(([key, value]) => {\n          // Convert HTML attributes to JSX equivalents\n          let attrName = key;\n          if (mode === 'jsx') {\n            // Common HTML to JSX attribute conversions\n            const htmlToJsx: Record<string, string> = {\n              class: 'className',\n              for: 'htmlFor',\n              tabindex: 'tabIndex',\n            };\n            attrName = htmlToJsx[key] || key;\n          }\n\n          if (typeof value === 'function') {\n            // Hide event handlers from source code\n            return '';\n          }\n\n          if (typeof value === 'boolean') {\n            return value ? attrName : '';\n          }\n\n          if (typeof value === 'string') {\n            return `${attrName}=\"${value}\"`;\n          }\n\n          // For JSX, use curly braces for non-string values\n          if (mode === 'jsx') {\n            return `${attrName}={${JSON.stringify(value)}}`;\n          }\n\n          // For HTML, convert to string\n          return `${attrName}=\"${value}\"`;\n        })\n        .filter((attr) => attr.trim())\n    : [];\n\n  const children = node.$children$ ?? [];\n\n  // Self-closing tags for JSX when no children\n  if (children.length === 0) {\n    const attrsStr = attrArray.length > 0 ? ' ' + attrArray.join(' ') : '';\n    const singleLine = mode === 'jsx'\n      ? `${indent}<${tag}${attrsStr} />`\n      : `${indent}<${tag}${attrsStr}></${tag}>`;\n\n    // If single line fits within LINE_WIDTH, use it\n    if (singleLine.length <= LINE_WIDTH) {\n      return singleLine;\n    }\n\n    // Otherwise, break attributes to multiple lines\n    const attrIndent = indent + '  ';\n    const formattedAttrs = attrArray.length > 0\n      ? '\\n' + attrArray.map((attr) => `${attrIndent}${attr}`).join('\\n') + '\\n' + indent\n      : '';\n\n    return mode === 'jsx'\n      ? `${indent}<${tag}${formattedAttrs}/>`\n      : `${indent}<${tag}${formattedAttrs}></${tag}>`;\n  }\n\n  // Tags with children\n  const attrsStr = attrArray.length > 0 ? ' ' + attrArray.join(' ') : '';\n  const openingTag = `${indent}<${tag}${attrsStr}>`;\n\n  // Check if opening tag fits on one line\n  if (openingTag.length <= LINE_WIDTH) {\n    const childrenString = children\n      .map((child) => vnodeToString(child, options, indentLevel + 1))\n      .join('\\n');\n    return `${openingTag}\\n${childrenString}\\n${indent}</${tag}>`;\n  }\n\n  // Break opening tag to multiple lines\n  const attrIndent = indent + '  ';\n  const formattedAttrs = attrArray.length > 0\n    ? '\\n' + attrArray.map((attr) => `${attrIndent}${attr}`).join('\\n') + '\\n' + indent\n    : '';\n  const childrenString = children\n    .map((child) => vnodeToString(child, options, indentLevel + 1))\n    .join('\\n');\n\n  return `${indent}<${tag}${formattedAttrs}>\\n${childrenString}\\n${indent}</${tag}>`;\n}\n\nexport const renderVNode = (vnode: VNode, mode: RenderMode) => {\n  return vnodeToString(vnode, { mode });\n};\n","import { SourceType } from 'storybook/internal/docs-tools';\nimport { emitTransformCode, useEffect } from 'storybook/internal/preview-api';\nimport type { AnnotatedStoryFn, Args, DecoratorFunction } from 'storybook/internal/types';\nimport type { StencilRenderer } from '../types';\nimport { renderVNode } from './render-vnode';\n\ntype StoryFn<TArgs = Args> = AnnotatedStoryFn<StencilRenderer<unknown>, TArgs>;\n\nconst skip = (context: Parameters<DecoratorFunction<StencilRenderer<unknown>>>[1]) => {\n  const sourceParams = context?.parameters.docs?.source;\n  const isArgsStory = context?.parameters.__isArgsStory;\n\n  if (sourceParams.type === SourceType.DYNAMIC) return false;\n\n  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;\n};\n\nexport const sourceDecorator: DecoratorFunction<StencilRenderer<unknown>> = (storyFn, context) => {\n  const story = storyFn();\n\n  useEffect(() => {\n    const renderedForSource = context?.parameters.docs?.source?.excludeDecorators\n      ? (context.originalStoryFn as StoryFn)(context.args, context)\n      : story;\n\n    if (skip(context)) return;\n\n    switch (context.parameters.docs.source.language) {\n      case 'html': {\n        emitTransformCode(renderVNode(renderedForSource, 'html'), context);\n        break;\n      }\n      case 'jsx':\n      case 'tsx': {\n        emitTransformCode(renderVNode(renderedForSource, 'jsx'), context);\n        break;\n      }\n    }\n  });\n\n  return story;\n};\n"],"mappings":"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"}

package/dist/docs-ONVKsKI9.cjs

@@ -0,0 +1,97 @@
+const require_chunk = require('./chunk-CsX-DzYB.cjs');
+const storybook_internal_docs_tools = require_chunk.__toESM(require("storybook/internal/docs-tools"));
+const storybook_internal_preview_api = require_chunk.__toESM(require("storybook/internal/preview-api"));
+
+//#region src/docs/render-vnode.ts
+function kebabToPascal(str) {
+	return str.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function vnodeToString(node, options, indentLevel = 0) {
+	const LINE_WIDTH = 80;
+	const indent = "  ".repeat(indentLevel);
+	const { mode } = options;
+	if (node.$text$ !== null) return indent + node.$text$;
+	if (node.$tag$ === null) return "";
+	const tag = mode === "jsx" && typeof node.$tag$ === "string" && node.$tag$.includes("-") ? kebabToPascal(node.$tag$) : String(node.$tag$);
+	const attrArray = node.$attrs$ ? Object.entries(node.$attrs$).filter(([_, value]) => value !== void 0).map(([key, value]) => {
+		let attrName = key;
+		if (mode === "jsx") {
+			const htmlToJsx = {
+				class: "className",
+				for: "htmlFor",
+				tabindex: "tabIndex"
+			};
+			attrName = htmlToJsx[key] || key;
+		}
+		if (typeof value === "function") return "";
+		if (typeof value === "boolean") return value ? attrName : "";
+		if (typeof value === "string") return `${attrName}="${value}"`;
+		if (mode === "jsx") return `${attrName}={${JSON.stringify(value)}}`;
+		return `${attrName}="${value}"`;
+	}).filter((attr) => attr.trim()) : [];
+	const children = node.$children$ ?? [];
+	if (children.length === 0) {
+		const attrsStr$1 = attrArray.length > 0 ? " " + attrArray.join(" ") : "";
+		const singleLine = mode === "jsx" ? `${indent}<${tag}${attrsStr$1} />` : `${indent}<${tag}${attrsStr$1}></${tag}>`;
+		if (singleLine.length <= LINE_WIDTH) return singleLine;
+		const attrIndent$1 = indent + "  ";
+		const formattedAttrs$1 = attrArray.length > 0 ? "\n" + attrArray.map((attr) => `${attrIndent$1}${attr}`).join("\n") + "\n" + indent : "";
+		return mode === "jsx" ? `${indent}<${tag}${formattedAttrs$1}/>` : `${indent}<${tag}${formattedAttrs$1}></${tag}>`;
+	}
+	const attrsStr = attrArray.length > 0 ? " " + attrArray.join(" ") : "";
+	const openingTag = `${indent}<${tag}${attrsStr}>`;
+	if (openingTag.length <= LINE_WIDTH) {
+		const childrenString$1 = children.map((child) => vnodeToString(child, options, indentLevel + 1)).join("\n");
+		return `${openingTag}\n${childrenString$1}\n${indent}</${tag}>`;
+	}
+	const attrIndent = indent + "  ";
+	const formattedAttrs = attrArray.length > 0 ? "\n" + attrArray.map((attr) => `${attrIndent}${attr}`).join("\n") + "\n" + indent : "";
+	const childrenString = children.map((child) => vnodeToString(child, options, indentLevel + 1)).join("\n");
+	return `${indent}<${tag}${formattedAttrs}>\n${childrenString}\n${indent}</${tag}>`;
+}
+const renderVNode = (vnode, mode) => {
+	return vnodeToString(vnode, { mode });
+};
+
+//#endregion
+//#region src/docs/source-decorator.ts
+const skip = (context) => {
+	const sourceParams = context?.parameters.docs?.source;
+	const isArgsStory = context?.parameters.__isArgsStory;
+	if (sourceParams.type === storybook_internal_docs_tools.SourceType.DYNAMIC) return false;
+	return !isArgsStory || sourceParams?.code || sourceParams?.type === storybook_internal_docs_tools.SourceType.CODE;
+};
+const sourceDecorator = (storyFn, context) => {
+	const story = storyFn();
+	(0, storybook_internal_preview_api.useEffect)(() => {
+		const renderedForSource = context?.parameters.docs?.source?.excludeDecorators ? context.originalStoryFn(context.args, context) : story;
+		if (skip(context)) return;
+		switch (context.parameters.docs.source.language) {
+			case "html": {
+				(0, storybook_internal_preview_api.emitTransformCode)(renderVNode(renderedForSource, "html"), context);
+				break;
+			}
+			case "jsx":
+			case "tsx": {
+				(0, storybook_internal_preview_api.emitTransformCode)(renderVNode(renderedForSource, "jsx"), context);
+				break;
+			}
+		}
+	});
+	return story;
+};
+
+//#endregion
+Object.defineProperty(exports, 'renderVNode', {
+  enumerable: true,
+  get: function () {
+    return renderVNode;
+  }
+});
+Object.defineProperty(exports, 'sourceDecorator', {
+  enumerable: true,
+  get: function () {
+    return sourceDecorator;
+  }
+});
+//# sourceMappingURL=docs-ONVKsKI9.cjs.map

package/dist/docs-ONVKsKI9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"docs-ONVKsKI9.cjs","names":["str: string","node: VNode","options: RenderOptions","htmlToJsx: Record<string, string>","attrsStr","attrIndent","formattedAttrs","childrenString","vnode: VNode","mode: RenderMode","context: Parameters<DecoratorFunction<StencilRenderer<unknown>>>[1]","SourceType","sourceDecorator: DecoratorFunction<StencilRenderer<unknown>>"],"sources":["../src/docs/render-vnode.ts","../src/docs/source-decorator.ts"],"sourcesContent":["import { type VNode } from '@stencil/core';\n\ntype RenderMode = 'html' | 'jsx';\n\ninterface RenderOptions {\n  mode: RenderMode;\n}\n\nfunction kebabToPascal(str: string): string {\n  return str\n    .split('-')\n    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join('');\n}\n\nfunction vnodeToString(node: VNode, options: RenderOptions, indentLevel = 0): string {\n  const LINE_WIDTH = 80;\n  const indent = '  '.repeat(indentLevel);\n  const { mode } = options;\n\n  if (node.$text$ !== null) {\n    return indent + node.$text$;\n  }\n\n  if (node.$tag$ === null) {\n    return '';\n  }\n\n  // Convert tag name based on mode\n  // Only convert to PascalCase if it's a custom element (has a dash)\n  const tag =\n    mode === 'jsx' && typeof node.$tag$ === 'string' && node.$tag$.includes('-')\n      ? kebabToPascal(node.$tag$)\n      : String(node.$tag$);\n\n  // Process attributes as array (without leading spaces)\n  const attrArray = node.$attrs$\n    ? Object.entries(node.$attrs$)\n        .filter(([_, value]) => value !== undefined)\n        .map(([key, value]) => {\n          // Convert HTML attributes to JSX equivalents\n          let attrName = key;\n          if (mode === 'jsx') {\n            // Common HTML to JSX attribute conversions\n            const htmlToJsx: Record<string, string> = {\n              class: 'className',\n              for: 'htmlFor',\n              tabindex: 'tabIndex',\n            };\n            attrName = htmlToJsx[key] || key;\n          }\n\n          if (typeof value === 'function') {\n            // Hide event handlers from source code\n            return '';\n          }\n\n          if (typeof value === 'boolean') {\n            return value ? attrName : '';\n          }\n\n          if (typeof value === 'string') {\n            return `${attrName}=\"${value}\"`;\n          }\n\n          // For JSX, use curly braces for non-string values\n          if (mode === 'jsx') {\n            return `${attrName}={${JSON.stringify(value)}}`;\n          }\n\n          // For HTML, convert to string\n          return `${attrName}=\"${value}\"`;\n        })\n        .filter((attr) => attr.trim())\n    : [];\n\n  const children = node.$children$ ?? [];\n\n  // Self-closing tags for JSX when no children\n  if (children.length === 0) {\n    const attrsStr = attrArray.length > 0 ? ' ' + attrArray.join(' ') : '';\n    const singleLine = mode === 'jsx'\n      ? `${indent}<${tag}${attrsStr} />`\n      : `${indent}<${tag}${attrsStr}></${tag}>`;\n\n    // If single line fits within LINE_WIDTH, use it\n    if (singleLine.length <= LINE_WIDTH) {\n      return singleLine;\n    }\n\n    // Otherwise, break attributes to multiple lines\n    const attrIndent = indent + '  ';\n    const formattedAttrs = attrArray.length > 0\n      ? '\\n' + attrArray.map((attr) => `${attrIndent}${attr}`).join('\\n') + '\\n' + indent\n      : '';\n\n    return mode === 'jsx'\n      ? `${indent}<${tag}${formattedAttrs}/>`\n      : `${indent}<${tag}${formattedAttrs}></${tag}>`;\n  }\n\n  // Tags with children\n  const attrsStr = attrArray.length > 0 ? ' ' + attrArray.join(' ') : '';\n  const openingTag = `${indent}<${tag}${attrsStr}>`;\n\n  // Check if opening tag fits on one line\n  if (openingTag.length <= LINE_WIDTH) {\n    const childrenString = children\n      .map((child) => vnodeToString(child, options, indentLevel + 1))\n      .join('\\n');\n    return `${openingTag}\\n${childrenString}\\n${indent}</${tag}>`;\n  }\n\n  // Break opening tag to multiple lines\n  const attrIndent = indent + '  ';\n  const formattedAttrs = attrArray.length > 0\n    ? '\\n' + attrArray.map((attr) => `${attrIndent}${attr}`).join('\\n') + '\\n' + indent\n    : '';\n  const childrenString = children\n    .map((child) => vnodeToString(child, options, indentLevel + 1))\n    .join('\\n');\n\n  return `${indent}<${tag}${formattedAttrs}>\\n${childrenString}\\n${indent}</${tag}>`;\n}\n\nexport const renderVNode = (vnode: VNode, mode: RenderMode) => {\n  return vnodeToString(vnode, { mode });\n};\n","import { SourceType } from 'storybook/internal/docs-tools';\nimport { emitTransformCode, useEffect } from 'storybook/internal/preview-api';\nimport type { AnnotatedStoryFn, Args, DecoratorFunction } from 'storybook/internal/types';\nimport type { StencilRenderer } from '../types';\nimport { renderVNode } from './render-vnode';\n\ntype StoryFn<TArgs = Args> = AnnotatedStoryFn<StencilRenderer<unknown>, TArgs>;\n\nconst skip = (context: Parameters<DecoratorFunction<StencilRenderer<unknown>>>[1]) => {\n  const sourceParams = context?.parameters.docs?.source;\n  const isArgsStory = context?.parameters.__isArgsStory;\n\n  if (sourceParams.type === SourceType.DYNAMIC) return false;\n\n  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;\n};\n\nexport const sourceDecorator: DecoratorFunction<StencilRenderer<unknown>> = (storyFn, context) => {\n  const story = storyFn();\n\n  useEffect(() => {\n    const renderedForSource = context?.parameters.docs?.source?.excludeDecorators\n      ? (context.originalStoryFn as StoryFn)(context.args, context)\n      : story;\n\n    if (skip(context)) return;\n\n    switch (context.parameters.docs.source.language) {\n      case 'html': {\n        emitTransformCode(renderVNode(renderedForSource, 'html'), context);\n        break;\n      }\n      case 'jsx':\n      case 'tsx': {\n        emitTransformCode(renderVNode(renderedForSource, 'jsx'), context);\n        break;\n      }\n    }\n  });\n\n  return story;\n};\n"],"mappings":"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"}

package/dist/entry-preview-docs.cjs

@@ -1,5 +1,5 @@
 const require_chunk = require('./chunk-CsX-DzYB.cjs');
-const require_docs = require('./docs-C41e1jpq.cjs');
+const require_docs = require('./docs-ONVKsKI9.cjs');
 const storybook_internal_docs_tools = require_chunk.__toESM(require("storybook/internal/docs-tools"));
 
 //#region src/entry-preview-docs.ts
@@ -8,7 +8,8 @@ const parameters = { docs: {
 	story: { inline: true },
 	source: {
 		type: storybook_internal_docs_tools.SourceType.DYNAMIC,
-		language: "html"
+		language: "html",
+		format: "dedent"
 	}
 } };
 

package/dist/entry-preview-docs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"entry-preview-docs.cjs","names":["decorators: DecoratorFunction<StencilRenderer<unknown>>[]","sourceDecorator","parameters: Parameters","SourceType"],"sources":["../src/entry-preview-docs.ts"],"sourcesContent":["import { SourceType } from 'storybook/internal/docs-tools';\nimport type { DecoratorFunction, Parameters } from 'storybook/internal/types';\nimport { sourceDecorator } from './docs';\nimport type { StencilRenderer } from './types';\n\nexport const decorators: DecoratorFunction<StencilRenderer<unknown>>[] = [sourceDecorator];\n\nexport const parameters: Parameters = {\n  docs: {\n    story: { inline: true },\n    source: {\n      type: SourceType.DYNAMIC,\n      language: 'html',\n    },\n  },\n};\n"],"mappings":";;;;;AAKA,MAAaA,aAA4D,CAACC,4BAAgB;AAE1F,MAAaC,aAAyB,EACpC,MAAM;CACJ,OAAO,EAAE,QAAQ,KAAM;CACvB,QAAQ;EACN,MAAMC,yCAAW;EACjB,UAAU;CACX;AACF,EACF"}
+{"version":3,"file":"entry-preview-docs.cjs","names":["decorators: DecoratorFunction<StencilRenderer<unknown>>[]","sourceDecorator","parameters: Parameters","SourceType"],"sources":["../src/entry-preview-docs.ts"],"sourcesContent":["import { SourceType } from 'storybook/internal/docs-tools';\nimport type { DecoratorFunction, Parameters } from 'storybook/internal/types';\nimport { sourceDecorator } from './docs';\nimport type { StencilRenderer } from './types';\n\nexport const decorators: DecoratorFunction<StencilRenderer<unknown>>[] = [sourceDecorator];\n\nexport const parameters: Parameters = {\n  docs: {\n    story: { inline: true },\n    source: {\n      type: SourceType.DYNAMIC,\n      language: 'html',\n      format: 'dedent',\n    },\n  },\n};\n"],"mappings":";;;;;AAKA,MAAaA,aAA4D,CAACC,4BAAgB;AAE1F,MAAaC,aAAyB,EACpC,MAAM;CACJ,OAAO,EAAE,QAAQ,KAAM;CACvB,QAAQ;EACN,MAAMC,yCAAW;EACjB,UAAU;EACV,QAAQ;CACT;AACF,EACF"}

package/dist/entry-preview-docs.js

@@ -1,4 +1,4 @@
-import { sourceDecorator } from "./docs-ObZ8znBB.js";
+import { sourceDecorator } from "./docs-DFb4MYCm.js";
 import { SourceType } from "storybook/internal/docs-tools";
 
 //#region src/entry-preview-docs.ts
@@ -7,7 +7,8 @@ const parameters = { docs: {
 	story: { inline: true },
 	source: {
 		type: SourceType.DYNAMIC,
-		language: "html"
+		language: "html",
+		format: "dedent"
 	}
 } };
 

package/dist/entry-preview-docs.js.map

@@ -1 +1 @@
-{"version":3,"file":"entry-preview-docs.js","names":["decorators: DecoratorFunction<StencilRenderer<unknown>>[]","parameters: Parameters"],"sources":["../src/entry-preview-docs.ts"],"sourcesContent":["import { SourceType } from 'storybook/internal/docs-tools';\nimport type { DecoratorFunction, Parameters } from 'storybook/internal/types';\nimport { sourceDecorator } from './docs';\nimport type { StencilRenderer } from './types';\n\nexport const decorators: DecoratorFunction<StencilRenderer<unknown>>[] = [sourceDecorator];\n\nexport const parameters: Parameters = {\n  docs: {\n    story: { inline: true },\n    source: {\n      type: SourceType.DYNAMIC,\n      language: 'html',\n    },\n  },\n};\n"],"mappings":";;;;AAKA,MAAaA,aAA4D,CAAC,eAAgB;AAE1F,MAAaC,aAAyB,EACpC,MAAM;CACJ,OAAO,EAAE,QAAQ,KAAM;CACvB,QAAQ;EACN,MAAM,WAAW;EACjB,UAAU;CACX;AACF,EACF"}
+{"version":3,"file":"entry-preview-docs.js","names":["decorators: DecoratorFunction<StencilRenderer<unknown>>[]","parameters: Parameters"],"sources":["../src/entry-preview-docs.ts"],"sourcesContent":["import { SourceType } from 'storybook/internal/docs-tools';\nimport type { DecoratorFunction, Parameters } from 'storybook/internal/types';\nimport { sourceDecorator } from './docs';\nimport type { StencilRenderer } from './types';\n\nexport const decorators: DecoratorFunction<StencilRenderer<unknown>>[] = [sourceDecorator];\n\nexport const parameters: Parameters = {\n  docs: {\n    story: { inline: true },\n    source: {\n      type: SourceType.DYNAMIC,\n      language: 'html',\n      format: 'dedent',\n    },\n  },\n};\n"],"mappings":";;;;AAKA,MAAaA,aAA4D,CAAC,eAAgB;AAE1F,MAAaC,aAAyB,EACpC,MAAM;CACJ,OAAO,EAAE,QAAQ,KAAM;CACvB,QAAQ;EACN,MAAM,WAAW;EACjB,UAAU;EACV,QAAQ;CACT;AACF,EACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/storybook-plugin",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "Storybook plugin for Stencil",
   "license": "MIT",
   "homepage": "https://github.com/stenciljs/storybook",

package/dist/docs-C41e1jpq.cjs

@@ -1,57 +0,0 @@
-const require_chunk = require('./chunk-CsX-DzYB.cjs');
-const storybook_internal_docs_tools = require_chunk.__toESM(require("storybook/internal/docs-tools"));
-const storybook_internal_preview_api = require_chunk.__toESM(require("storybook/internal/preview-api"));
-
-//#region src/docs/render-html.ts
-function vnodeToHtml(node, indentLevel = 0) {
-	const indent = "  ".repeat(indentLevel);
-	if (node.$text$ !== null) return indent + node.$text$;
-	if (node.$tag$ === null) return "";
-	const tag = node.$tag$;
-	const attrs = node.$attrs$ ? Object.entries(node.$attrs$).filter(([_, value]) => value !== void 0).map(([key, value]) => {
-		if (typeof value === "boolean") return value ? ` ${key}` : "";
-		return ` ${key}="${value}"`;
-	}).join("") : "";
-	const children = node.$children$ ?? [];
-	if (children.length === 0) return `${indent}<${tag}${attrs}></${tag}>`;
-	const childrenHtml = children.map((child) => vnodeToHtml(child, indentLevel + 1)).join("\n");
-	return `${indent}<${tag}${attrs}>\n${childrenHtml}\n${indent}</${tag}>`;
-}
-const renderHTML = (vnode) => {
-	return vnodeToHtml(vnode);
-};
-
-//#endregion
-//#region src/docs/source-decorator.ts
-const skip = (context) => {
-	const sourceParams = context?.parameters.docs?.source;
-	const isArgsStory = context?.parameters.__isArgsStory;
-	if (sourceParams.type === storybook_internal_docs_tools.SourceType.DYNAMIC) return false;
-	return !isArgsStory || sourceParams?.code || sourceParams?.type === storybook_internal_docs_tools.SourceType.CODE;
-};
-const sourceDecorator = (storyFn, context) => {
-	const story = storyFn();
-	(0, storybook_internal_preview_api.useEffect)(() => {
-		const renderedForSource = context?.parameters.docs?.source?.excludeDecorators ? context.originalStoryFn(context.args, context) : story;
-		if (skip(context)) return;
-		switch (context.parameters.docs.source.language) {
-			case "html": (0, storybook_internal_preview_api.emitTransformCode)(renderHTML(renderedForSource), context);
-		}
-	});
-	return story;
-};
-
-//#endregion
-Object.defineProperty(exports, 'renderHTML', {
-  enumerable: true,
-  get: function () {
-    return renderHTML;
-  }
-});
-Object.defineProperty(exports, 'sourceDecorator', {
-  enumerable: true,
-  get: function () {
-    return sourceDecorator;
-  }
-});
-//# sourceMappingURL=docs-C41e1jpq.cjs.map

package/dist/docs-C41e1jpq.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"docs-C41e1jpq.cjs","names":["node: VNode","vnode: VNode","context: Parameters<DecoratorFunction<StencilRenderer<unknown>>>[1]","SourceType","sourceDecorator: DecoratorFunction<StencilRenderer<unknown>>"],"sources":["../src/docs/render-html.ts","../src/docs/source-decorator.ts"],"sourcesContent":["import { type VNode } from '@stencil/core';\n\nfunction vnodeToHtml(node: VNode, indentLevel = 0): string {\n  const indent = '  '.repeat(indentLevel);\n\n  if (node.$text$ !== null) {\n    return indent + node.$text$;\n  }\n\n  if (node.$tag$ === null) {\n    return '';\n  }\n\n  const tag = node.$tag$;\n  const attrs = node.$attrs$\n    ? Object.entries(node.$attrs$)\n        .filter(([_, value]) => value !== undefined)\n        .map(([key, value]) => {\n          if (typeof value === 'boolean') {\n            return value ? ` ${key}` : '';\n          }\n          return ` ${key}=\"${value}\"`;\n        })\n        .join('')\n    : '';\n\n  const children = node.$children$ ?? [];\n\n  if (children.length === 0) {\n    return `${indent}<${tag}${attrs}></${tag}>`;\n  }\n\n  const childrenHtml = children.map((child) => vnodeToHtml(child, indentLevel + 1)).join('\\n');\n\n  return `${indent}<${tag}${attrs}>\\n${childrenHtml}\\n${indent}</${tag}>`;\n}\n\nexport const renderHTML = (vnode: VNode) => {\n  return vnodeToHtml(vnode);\n};\n","import { SourceType } from 'storybook/internal/docs-tools';\nimport { emitTransformCode, useEffect } from 'storybook/internal/preview-api';\nimport type { AnnotatedStoryFn, Args, DecoratorFunction } from 'storybook/internal/types';\nimport type { StencilRenderer } from '../types';\nimport { renderHTML } from './render-html';\n\ntype StoryFn<TArgs = Args> = AnnotatedStoryFn<StencilRenderer<unknown>, TArgs>;\n\nconst skip = (context: Parameters<DecoratorFunction<StencilRenderer<unknown>>>[1]) => {\n  const sourceParams = context?.parameters.docs?.source;\n  const isArgsStory = context?.parameters.__isArgsStory;\n\n  if (sourceParams.type === SourceType.DYNAMIC) return false;\n\n  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;\n};\n\nexport const sourceDecorator: DecoratorFunction<StencilRenderer<unknown>> = (storyFn, context) => {\n  const story = storyFn();\n\n  useEffect(() => {\n    const renderedForSource = context?.parameters.docs?.source?.excludeDecorators\n      ? (context.originalStoryFn as StoryFn)(context.args, context)\n      : story;\n\n    if (skip(context)) return;\n\n    switch (context.parameters.docs.source.language) {\n      case 'html': {\n        emitTransformCode(renderHTML(renderedForSource), context);\n      }\n    }\n  });\n\n  return story;\n};\n"],"mappings":";;;;;AAEA,SAAS,YAAYA,MAAa,cAAc,GAAW;CACzD,MAAM,SAAS,KAAK,OAAO,YAAY;AAEvC,KAAI,KAAK,WAAW,KAClB,QAAO,SAAS,KAAK;AAGvB,KAAI,KAAK,UAAU,KACjB,QAAO;CAGT,MAAM,MAAM,KAAK;CACjB,MAAM,QAAQ,KAAK,UACf,OAAO,QAAQ,KAAK,QAAQ,CACzB,OAAO,CAAC,CAAC,GAAG,MAAM,KAAK,iBAAoB,CAC3C,IAAI,CAAC,CAAC,KAAK,MAAM,KAAK;AACrB,aAAW,UAAU,UACnB,QAAO,SAAS,GAAG,IAAI,IAAI;AAE7B,UAAQ,GAAG,IAAI,IAAI,MAAM;CAC1B,EAAC,CACD,KAAK,GAAG,GACX;CAEJ,MAAM,WAAW,KAAK,cAAc,CAAE;AAEtC,KAAI,SAAS,WAAW,EACtB,SAAQ,EAAE,OAAO,GAAG,IAAI,EAAE,MAAM,KAAK,IAAI;CAG3C,MAAM,eAAe,SAAS,IAAI,CAAC,UAAU,YAAY,OAAO,cAAc,EAAE,CAAC,CAAC,KAAK,KAAK;AAE5F,SAAQ,EAAE,OAAO,GAAG,IAAI,EAAE,MAAM,KAAK,aAAa,IAAI,OAAO,IAAI,IAAI;AACtE;AAED,MAAa,aAAa,CAACC,UAAiB;AAC1C,QAAO,YAAY,MAAM;AAC1B;;;;AC/BD,MAAM,OAAO,CAACC,YAAwE;CACpF,MAAM,eAAe,SAAS,WAAW,MAAM;CAC/C,MAAM,cAAc,SAAS,WAAW;AAExC,KAAI,aAAa,SAASC,yCAAW,QAAS,QAAO;AAErD,SAAQ,eAAe,cAAc,QAAQ,cAAc,SAASA,yCAAW;AAChF;AAED,MAAaC,kBAA+D,CAAC,SAAS,YAAY;CAChG,MAAM,QAAQ,SAAS;AAEvB,+CAAU,MAAM;EACd,MAAM,oBAAoB,SAAS,WAAW,MAAM,QAAQ,oBACxD,AAAC,QAAQ,gBAA4B,QAAQ,MAAM,QAAQ,GAC3D;AAEJ,MAAI,KAAK,QAAQ,CAAE;AAEnB,UAAQ,QAAQ,WAAW,KAAK,OAAO,UAAvC;GACE,KAAK,OACH,uDAAkB,WAAW,kBAAkB,EAAE,QAAQ;EAE5D;CACF,EAAC;AAEF,QAAO;AACR"}

package/dist/docs-ObZ8znBB.js

@@ -1,45 +0,0 @@
-import { SourceType } from "storybook/internal/docs-tools";
-import { emitTransformCode, useEffect } from "storybook/internal/preview-api";
-
-//#region src/docs/render-html.ts
-function vnodeToHtml(node, indentLevel = 0) {
-	const indent = "  ".repeat(indentLevel);
-	if (node.$text$ !== null) return indent + node.$text$;
-	if (node.$tag$ === null) return "";
-	const tag = node.$tag$;
-	const attrs = node.$attrs$ ? Object.entries(node.$attrs$).filter(([_, value]) => value !== void 0).map(([key, value]) => {
-		if (typeof value === "boolean") return value ? ` ${key}` : "";
-		return ` ${key}="${value}"`;
-	}).join("") : "";
-	const children = node.$children$ ?? [];
-	if (children.length === 0) return `${indent}<${tag}${attrs}></${tag}>`;
-	const childrenHtml = children.map((child) => vnodeToHtml(child, indentLevel + 1)).join("\n");
-	return `${indent}<${tag}${attrs}>\n${childrenHtml}\n${indent}</${tag}>`;
-}
-const renderHTML = (vnode) => {
-	return vnodeToHtml(vnode);
-};
-
-//#endregion
-//#region src/docs/source-decorator.ts
-const skip = (context) => {
-	const sourceParams = context?.parameters.docs?.source;
-	const isArgsStory = context?.parameters.__isArgsStory;
-	if (sourceParams.type === SourceType.DYNAMIC) return false;
-	return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
-};
-const sourceDecorator = (storyFn, context) => {
-	const story = storyFn();
-	useEffect(() => {
-		const renderedForSource = context?.parameters.docs?.source?.excludeDecorators ? context.originalStoryFn(context.args, context) : story;
-		if (skip(context)) return;
-		switch (context.parameters.docs.source.language) {
-			case "html": emitTransformCode(renderHTML(renderedForSource), context);
-		}
-	});
-	return story;
-};
-
-//#endregion
-export { renderHTML, sourceDecorator };
-//# sourceMappingURL=docs-ObZ8znBB.js.map

package/dist/docs-ObZ8znBB.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"docs-ObZ8znBB.js","names":["node: VNode","vnode: VNode","context: Parameters<DecoratorFunction<StencilRenderer<unknown>>>[1]","sourceDecorator: DecoratorFunction<StencilRenderer<unknown>>"],"sources":["../src/docs/render-html.ts","../src/docs/source-decorator.ts"],"sourcesContent":["import { type VNode } from '@stencil/core';\n\nfunction vnodeToHtml(node: VNode, indentLevel = 0): string {\n  const indent = '  '.repeat(indentLevel);\n\n  if (node.$text$ !== null) {\n    return indent + node.$text$;\n  }\n\n  if (node.$tag$ === null) {\n    return '';\n  }\n\n  const tag = node.$tag$;\n  const attrs = node.$attrs$\n    ? Object.entries(node.$attrs$)\n        .filter(([_, value]) => value !== undefined)\n        .map(([key, value]) => {\n          if (typeof value === 'boolean') {\n            return value ? ` ${key}` : '';\n          }\n          return ` ${key}=\"${value}\"`;\n        })\n        .join('')\n    : '';\n\n  const children = node.$children$ ?? [];\n\n  if (children.length === 0) {\n    return `${indent}<${tag}${attrs}></${tag}>`;\n  }\n\n  const childrenHtml = children.map((child) => vnodeToHtml(child, indentLevel + 1)).join('\\n');\n\n  return `${indent}<${tag}${attrs}>\\n${childrenHtml}\\n${indent}</${tag}>`;\n}\n\nexport const renderHTML = (vnode: VNode) => {\n  return vnodeToHtml(vnode);\n};\n","import { SourceType } from 'storybook/internal/docs-tools';\nimport { emitTransformCode, useEffect } from 'storybook/internal/preview-api';\nimport type { AnnotatedStoryFn, Args, DecoratorFunction } from 'storybook/internal/types';\nimport type { StencilRenderer } from '../types';\nimport { renderHTML } from './render-html';\n\ntype StoryFn<TArgs = Args> = AnnotatedStoryFn<StencilRenderer<unknown>, TArgs>;\n\nconst skip = (context: Parameters<DecoratorFunction<StencilRenderer<unknown>>>[1]) => {\n  const sourceParams = context?.parameters.docs?.source;\n  const isArgsStory = context?.parameters.__isArgsStory;\n\n  if (sourceParams.type === SourceType.DYNAMIC) return false;\n\n  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;\n};\n\nexport const sourceDecorator: DecoratorFunction<StencilRenderer<unknown>> = (storyFn, context) => {\n  const story = storyFn();\n\n  useEffect(() => {\n    const renderedForSource = context?.parameters.docs?.source?.excludeDecorators\n      ? (context.originalStoryFn as StoryFn)(context.args, context)\n      : story;\n\n    if (skip(context)) return;\n\n    switch (context.parameters.docs.source.language) {\n      case 'html': {\n        emitTransformCode(renderHTML(renderedForSource), context);\n      }\n    }\n  });\n\n  return story;\n};\n"],"mappings":";;;;AAEA,SAAS,YAAYA,MAAa,cAAc,GAAW;CACzD,MAAM,SAAS,KAAK,OAAO,YAAY;AAEvC,KAAI,KAAK,WAAW,KAClB,QAAO,SAAS,KAAK;AAGvB,KAAI,KAAK,UAAU,KACjB,QAAO;CAGT,MAAM,MAAM,KAAK;CACjB,MAAM,QAAQ,KAAK,UACf,OAAO,QAAQ,KAAK,QAAQ,CACzB,OAAO,CAAC,CAAC,GAAG,MAAM,KAAK,iBAAoB,CAC3C,IAAI,CAAC,CAAC,KAAK,MAAM,KAAK;AACrB,aAAW,UAAU,UACnB,QAAO,SAAS,GAAG,IAAI,IAAI;AAE7B,UAAQ,GAAG,IAAI,IAAI,MAAM;CAC1B,EAAC,CACD,KAAK,GAAG,GACX;CAEJ,MAAM,WAAW,KAAK,cAAc,CAAE;AAEtC,KAAI,SAAS,WAAW,EACtB,SAAQ,EAAE,OAAO,GAAG,IAAI,EAAE,MAAM,KAAK,IAAI;CAG3C,MAAM,eAAe,SAAS,IAAI,CAAC,UAAU,YAAY,OAAO,cAAc,EAAE,CAAC,CAAC,KAAK,KAAK;AAE5F,SAAQ,EAAE,OAAO,GAAG,IAAI,EAAE,MAAM,KAAK,aAAa,IAAI,OAAO,IAAI,IAAI;AACtE;AAED,MAAa,aAAa,CAACC,UAAiB;AAC1C,QAAO,YAAY,MAAM;AAC1B;;;;AC/BD,MAAM,OAAO,CAACC,YAAwE;CACpF,MAAM,eAAe,SAAS,WAAW,MAAM;CAC/C,MAAM,cAAc,SAAS,WAAW;AAExC,KAAI,aAAa,SAAS,WAAW,QAAS,QAAO;AAErD,SAAQ,eAAe,cAAc,QAAQ,cAAc,SAAS,WAAW;AAChF;AAED,MAAaC,kBAA+D,CAAC,SAAS,YAAY;CAChG,MAAM,QAAQ,SAAS;AAEvB,WAAU,MAAM;EACd,MAAM,oBAAoB,SAAS,WAAW,MAAM,QAAQ,oBACxD,AAAC,QAAQ,gBAA4B,QAAQ,MAAM,QAAQ,GAC3D;AAEJ,MAAI,KAAK,QAAQ,CAAE;AAEnB,UAAQ,QAAQ,WAAW,KAAK,OAAO,UAAvC;GACE,KAAK,OACH,mBAAkB,WAAW,kBAAkB,EAAE,QAAQ;EAE5D;CACF,EAAC;AAEF,QAAO;AACR"}