@stencil/storybook-plugin 0.5.4 → 0.5.6

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-argtypes.cjs

@@ -54,10 +54,42 @@ const inferControlType = (prop) => {
 
 //#endregion
 //#region src/docs/custom-elements.ts
+/**
+* Formats docsTags (@deprecated, @see, @since) and appends them to the description
+*/
+const formatDocsTags = (docs, docsTags) => {
+	if (!docsTags || docsTags.length === 0) return docs;
+	const tagSections = [];
+	const deprecationSections = [];
+	const deprecatedTags = docsTags.filter((tag) => tag.name === "deprecated");
+	if (deprecatedTags.length > 0) deprecatedTags.forEach((tag) => {
+		if (tag.text) deprecationSections.push(`**⚠️ DEPRECATED:** ${tag.text}`);
+		else deprecationSections.push(`**⚠️ DEPRECATED**`);
+	});
+	const seeTags = docsTags.filter((tag) => tag.name === "see");
+	if (seeTags.length > 0) {
+		const seeLinks = seeTags.map((tag) => {
+			const url = tag.text?.trim();
+			return url ? `[${url}](${url})` : "";
+		}).filter(Boolean).join(", ");
+		if (seeLinks) tagSections.push(`**See:** ${seeLinks}`);
+	}
+	const sinceTags = docsTags.filter((tag) => tag.name === "since");
+	if (sinceTags.length > 0) {
+		const sinceText = sinceTags.map((tag) => tag.text).filter(Boolean).join(", ");
+		if (sinceText) tagSections.push(`**Since:** ${sinceText}`);
+	}
+	const allSections = [
+		...deprecationSections,
+		docs,
+		...tagSections
+	].filter(Boolean);
+	return allSections.join("\n\n");
+};
 const mapData = (data, category) => data.reduce((acc, item) => {
 	acc[item.name] = {
 		name: item.name,
-		description: item.docs,
+		description: formatDocsTags(item.docs, item.docsTags),
 		control: false,
 		table: { category }
 	};
@@ -66,7 +98,7 @@ const mapData = (data, category) => data.reduce((acc, item) => {
 const mapMethods = (methods) => methods.reduce((acc, method) => {
 	acc[method.name] = {
 		name: method.name,
-		description: method.docs,
+		description: formatDocsTags(method.docs, method.docsTags),
 		control: null,
 		type: { name: "function" },
 		table: {
@@ -83,7 +115,7 @@ const mapEvent = (events) => events.reduce((acc, event) => {
 	name = `on${name.charAt(0).toUpperCase() + name.slice(1)}`;
 	acc[name] = {
 		name,
-		description: event.docs,
+		description: formatDocsTags(event.docs, event.docsTags),
 		control: null,
 		table: {
 			category: "events",
@@ -96,7 +128,7 @@ const mapEvent = (events) => events.reduce((acc, event) => {
 const mapProps = (props) => props.reduce((acc, prop) => {
 	acc[prop.name] = {
 		name: prop.attr || prop.name,
-		description: prop.docs,
+		description: formatDocsTags(prop.docs, prop.docsTags),
 		control: inferControlType(prop),
 		table: {
 			category: "properties",

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

@@ -1 +1 @@
-{"version":3,"file":"entry-preview-argtypes.cjs","names":["prop: JsonDocsProp","scalarTypes: SBScalarType['name'][]","data: T[]","category: string","methods: JsonDocsMethod[]","events: JsonDocsEvent[]","chr: string","props: JsonDocsProp[]","tagName: string","manifest: JsonDocs","customElements: JsonDocs","component: any","argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[]","enhanceArgTypes"],"sources":["../src/docs/infer-type.ts","../src/docs/custom-elements.ts","../src/entry-preview-argtypes.ts"],"sourcesContent":["import type { JsonDocsProp } from '@stencil/core/internal';\nimport type { InputType, SBScalarType, SBType } from 'storybook/internal/types';\n\nexport const inferSBType = (prop: JsonDocsProp): SBType => {\n  const scalarTypes: SBScalarType['name'][] = ['string', 'number', 'boolean', 'symbol'];\n  if (prop.type.toLowerCase() in scalarTypes) {\n    return { name: prop.type.toLowerCase(), raw: prop.type, required: prop.required } as SBScalarType;\n  }\n\n  if (/^\\(.*\\)\\s*=>\\s*.*$/.test(prop.type)) {\n    return { name: 'function', raw: prop.type, required: prop.required };\n  }\n\n  return { name: 'other', value: prop.type, raw: prop.type, required: prop.required };\n};\n\nexport const mapPropOptions = (prop: JsonDocsProp) =>\n  prop.values.filter((value) => ['string', 'number'].includes(value.type)).map(({ value }) => value);\n\nexport const inferControlType = (prop: JsonDocsProp): InputType['control'] => {\n  switch (prop.type) {\n    case 'string':\n    case 'string | undefined':\n      return { type: 'text' };\n    case 'number':\n    case 'number | undefined':\n      return { type: 'number' };\n    case 'boolean':\n    case 'boolean | undefined':\n      return { type: 'boolean' };\n    case 'Date':\n    case 'Date | string':\n      return { type: 'date' };\n    case 'function':\n    case 'function | undefined':\n    case 'void':\n    case 'void | undefined':\n      return null;\n    default:\n      const values = mapPropOptions(prop);\n\n      if (values.length === 0) {\n        return { type: 'object' };\n      }\n      if (values.length < 5) {\n        return { type: 'radio' };\n      }\n      return { type: 'select' };\n  }\n};\n","import type {\n  JsonDocs,\n  JsonDocsEvent,\n  JsonDocsMethod,\n  JsonDocsPart,\n  JsonDocsProp,\n  JsonDocsSlot,\n  JsonDocsStyle,\n} from '@stencil/core/internal';\nimport { logger } from 'storybook/internal/client-logger';\nimport type { ArgTypes } from 'storybook/internal/types';\n\nimport { getCustomElements, isValidComponent, isValidMetaData } from '..';\nimport { inferControlType, inferSBType, mapPropOptions } from './infer-type';\n\nconst mapData = <T extends JsonDocsPart>(data: T[], category: string): ArgTypes =>\n  data.reduce<ArgTypes>((acc, item) => {\n    acc[item.name] = {\n      name: item.name,\n      description: item.docs,\n      control: false,\n      table: {\n        category,\n      },\n    };\n    return acc;\n  }, {});\n\nconst mapMethods = (methods: JsonDocsMethod[]): ArgTypes =>\n  methods.reduce<ArgTypes>((acc, method) => {\n    acc[method.name] = {\n      name: method.name,\n      description: method.docs,\n      control: null,\n      type: { name: 'function' },\n      table: {\n        category: 'methods',\n        type: { summary: method.signature },\n      },\n    };\n    return acc;\n  }, {});\n\nconst mapEvent = (events: JsonDocsEvent[]): ArgTypes =>\n  events.reduce<ArgTypes>((acc, event) => {\n    let name = event.event\n      .replace(/(-|_|:|\\.|\\s)+(.)?/g, (_match, _separator, chr: string) => {\n        return chr ? chr.toUpperCase() : '';\n      })\n      .replace(/^([A-Z])/, (match) => match.toLowerCase());\n\n    name = `on${name.charAt(0).toUpperCase() + name.slice(1)}`;\n\n    acc[name] = {\n      name,\n      description: event.docs,\n      control: null,\n      table: {\n        category: 'events',\n        type: { summary: event.detail },\n      },\n      type: { name: 'function' },\n    };\n\n    return acc;\n  }, {});\n\nconst mapProps = (props: JsonDocsProp[]): ArgTypes =>\n  props.reduce<ArgTypes>((acc, prop) => {\n    acc[prop.name] = {\n      name: prop.attr || prop.name,\n      description: prop.docs,\n      control: inferControlType(prop),\n      table: {\n        category: 'properties',\n        type: { summary: prop.complexType?.original },\n        defaultValue: { summary: prop.default },\n      },\n      options: mapPropOptions(prop),\n      type: inferSBType(prop),\n    };\n\n    return acc;\n  }, {});\n\nconst getMetaData = (tagName: string, manifest: JsonDocs) => {\n  if (!isValidComponent(tagName) || !isValidMetaData(manifest)) {\n    return null;\n  }\n  const metaData = manifest.components.find((component) => component.tag.toUpperCase() === tagName.toUpperCase());\n  if (!metaData) {\n    logger.warn(`Component not found in custom-elements.json: ${tagName}`);\n  }\n  return metaData;\n};\n\nexport const extractArgTypesFromElements = (tagName: string, customElements: JsonDocs) => {\n  const metaData = getMetaData(tagName, customElements);\n  return (\n    metaData && {\n      ...mapProps(metaData.props),\n      ...mapEvent(metaData.events),\n      ...mapMethods(metaData.methods),\n      ...mapData<JsonDocsSlot>(metaData.slots, 'slots'),\n      ...mapData<JsonDocsPart>(metaData.parts, 'parts'),\n      ...mapData<JsonDocsStyle>(metaData.styles, 'styles'),\n    }\n  );\n};\n\nexport const extractArgTypes = (component: any) => {\n  const cem = getCustomElements();\n  // Handle both string references (lazy loading) and class references (auto-define)\n  const tagName = typeof component === 'string' ? component : component?.is;\n  return extractArgTypesFromElements(tagName, cem);\n};\n\nexport const extractComponentDescription = (component: any) => {\n  // Handle both string references (lazy loading) and class references (auto-define)\n  const tagName = typeof component === 'string' ? component : component?.is;\n  const metaData = getMetaData(tagName, getCustomElements());\n  return metaData && metaData.docs;\n};\n","import { enhanceArgTypes } from 'storybook/internal/docs-tools';\nimport type { ArgTypesEnhancer } from 'storybook/internal/types';\n\nimport { extractArgTypes, extractComponentDescription } from './docs/custom-elements';\nimport type { StencilRenderer } from './types';\n\nexport const parameters = {\n  docs: {\n    extractArgTypes,\n    extractComponentDescription,\n  },\n};\n\nexport const argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[] = [enhanceArgTypes];"],"mappings":"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"}
+{"version":3,"file":"entry-preview-argtypes.cjs","names":["prop: JsonDocsProp","scalarTypes: SBScalarType['name'][]","docs: string","docsTags?: DocsTag[]","tagSections: string[]","deprecationSections: string[]","data: T[]","category: string","methods: JsonDocsMethod[]","events: JsonDocsEvent[]","chr: string","props: JsonDocsProp[]","tagName: string","manifest: JsonDocs","customElements: JsonDocs","component: any","argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[]","enhanceArgTypes"],"sources":["../src/docs/infer-type.ts","../src/docs/custom-elements.ts","../src/entry-preview-argtypes.ts"],"sourcesContent":["import type { JsonDocsProp } from '@stencil/core/internal';\nimport type { InputType, SBScalarType, SBType } from 'storybook/internal/types';\n\nexport const inferSBType = (prop: JsonDocsProp): SBType => {\n  const scalarTypes: SBScalarType['name'][] = ['string', 'number', 'boolean', 'symbol'];\n  if (prop.type.toLowerCase() in scalarTypes) {\n    return { name: prop.type.toLowerCase(), raw: prop.type, required: prop.required } as SBScalarType;\n  }\n\n  if (/^\\(.*\\)\\s*=>\\s*.*$/.test(prop.type)) {\n    return { name: 'function', raw: prop.type, required: prop.required };\n  }\n\n  return { name: 'other', value: prop.type, raw: prop.type, required: prop.required };\n};\n\nexport const mapPropOptions = (prop: JsonDocsProp) =>\n  prop.values.filter((value) => ['string', 'number'].includes(value.type)).map(({ value }) => value);\n\nexport const inferControlType = (prop: JsonDocsProp): InputType['control'] => {\n  switch (prop.type) {\n    case 'string':\n    case 'string | undefined':\n      return { type: 'text' };\n    case 'number':\n    case 'number | undefined':\n      return { type: 'number' };\n    case 'boolean':\n    case 'boolean | undefined':\n      return { type: 'boolean' };\n    case 'Date':\n    case 'Date | string':\n      return { type: 'date' };\n    case 'function':\n    case 'function | undefined':\n    case 'void':\n    case 'void | undefined':\n      return null;\n    default:\n      const values = mapPropOptions(prop);\n\n      if (values.length === 0) {\n        return { type: 'object' };\n      }\n      if (values.length < 5) {\n        return { type: 'radio' };\n      }\n      return { type: 'select' };\n  }\n};\n","import type {\n  JsonDocs,\n  JsonDocsEvent,\n  JsonDocsMethod,\n  JsonDocsPart,\n  JsonDocsProp,\n  JsonDocsSlot,\n  JsonDocsStyle,\n} from '@stencil/core/internal';\nimport { logger } from 'storybook/internal/client-logger';\nimport type { ArgTypes } from 'storybook/internal/types';\n\nimport { getCustomElements, isValidComponent, isValidMetaData } from '..';\nimport { inferControlType, inferSBType, mapPropOptions } from './infer-type';\n\ninterface DocsTag {\n  name: string;\n  text?: string;\n}\n\n/**\n * Formats docsTags (@deprecated, @see, @since) and appends them to the description\n */\nconst formatDocsTags = (docs: string, docsTags?: DocsTag[]): string => {\n  if (!docsTags || docsTags.length === 0) {\n    return docs;\n  }\n\n  const tagSections: string[] = [];\n  const deprecationSections: string[] = [];\n\n  // Handle @deprecated tags - show at the top with emphasis\n  const deprecatedTags = docsTags.filter((tag) => tag.name === 'deprecated');\n  if (deprecatedTags.length > 0) {\n    deprecatedTags.forEach((tag) => {\n      if (tag.text) {\n        deprecationSections.push(`**⚠️ DEPRECATED:** ${tag.text}`);\n      } else {\n        deprecationSections.push(`**⚠️ DEPRECATED**`);\n      }\n    });\n  }\n\n  // Handle @see tags - create links\n  const seeTags = docsTags.filter((tag) => tag.name === 'see');\n  if (seeTags.length > 0) {\n    const seeLinks = seeTags\n      .map((tag) => {\n        const url = tag.text?.trim();\n        return url ? `[${url}](${url})` : '';\n      })\n      .filter(Boolean)\n      .join(', ');\n    if (seeLinks) {\n      tagSections.push(`**See:** ${seeLinks}`);\n    }\n  }\n\n  // Handle @since tags\n  const sinceTags = docsTags.filter((tag) => tag.name === 'since');\n  if (sinceTags.length > 0) {\n    const sinceText = sinceTags\n      .map((tag) => tag.text)\n      .filter(Boolean)\n      .join(', ');\n    if (sinceText) {\n      tagSections.push(`**Since:** ${sinceText}`);\n    }\n  }\n\n  // Combine all sections - deprecation first, then docs, then other tags\n  const allSections = [...deprecationSections, docs, ...tagSections].filter(Boolean);\n\n  return allSections.join('\\n\\n');\n};\n\nconst mapData = <T extends JsonDocsPart>(data: T[], category: string): ArgTypes =>\n  data.reduce<ArgTypes>((acc, item) => {\n    acc[item.name] = {\n      name: item.name,\n      description: formatDocsTags(item.docs, (item as any).docsTags as DocsTag[]),\n      control: false,\n      table: {\n        category,\n      },\n    };\n    return acc;\n  }, {});\n\nconst mapMethods = (methods: JsonDocsMethod[]): ArgTypes =>\n  methods.reduce<ArgTypes>((acc, method) => {\n    acc[method.name] = {\n      name: method.name,\n      description: formatDocsTags(method.docs, method.docsTags as DocsTag[]),\n      control: null,\n      type: { name: 'function' },\n      table: {\n        category: 'methods',\n        type: { summary: method.signature },\n      },\n    };\n    return acc;\n  }, {});\n\nconst mapEvent = (events: JsonDocsEvent[]): ArgTypes =>\n  events.reduce<ArgTypes>((acc, event) => {\n    let name = event.event\n      .replace(/(-|_|:|\\.|\\s)+(.)?/g, (_match, _separator, chr: string) => {\n        return chr ? chr.toUpperCase() : '';\n      })\n      .replace(/^([A-Z])/, (match) => match.toLowerCase());\n\n    name = `on${name.charAt(0).toUpperCase() + name.slice(1)}`;\n\n    acc[name] = {\n      name,\n      description: formatDocsTags(event.docs, event.docsTags as DocsTag[]),\n      control: null,\n      table: {\n        category: 'events',\n        type: { summary: event.detail },\n      },\n      type: { name: 'function' },\n    };\n\n    return acc;\n  }, {});\n\nconst mapProps = (props: JsonDocsProp[]): ArgTypes =>\n  props.reduce<ArgTypes>((acc, prop) => {\n    acc[prop.name] = {\n      name: prop.attr || prop.name,\n      description: formatDocsTags(prop.docs, prop.docsTags as DocsTag[]),\n      control: inferControlType(prop),\n      table: {\n        category: 'properties',\n        type: { summary: prop.complexType?.original },\n        defaultValue: { summary: prop.default },\n      },\n      options: mapPropOptions(prop),\n      type: inferSBType(prop),\n    };\n\n    return acc;\n  }, {});\n\nconst getMetaData = (tagName: string, manifest: JsonDocs) => {\n  if (!isValidComponent(tagName) || !isValidMetaData(manifest)) {\n    return null;\n  }\n  const metaData = manifest.components.find((component) => component.tag.toUpperCase() === tagName.toUpperCase());\n  if (!metaData) {\n    logger.warn(`Component not found in custom-elements.json: ${tagName}`);\n  }\n  return metaData;\n};\n\nexport const extractArgTypesFromElements = (tagName: string, customElements: JsonDocs) => {\n  const metaData = getMetaData(tagName, customElements);\n  return (\n    metaData && {\n      ...mapProps(metaData.props),\n      ...mapEvent(metaData.events),\n      ...mapMethods(metaData.methods),\n      ...mapData<JsonDocsSlot>(metaData.slots, 'slots'),\n      ...mapData<JsonDocsPart>(metaData.parts, 'parts'),\n      ...mapData<JsonDocsStyle>(metaData.styles, 'styles'),\n    }\n  );\n};\n\nexport const extractArgTypes = (component: any) => {\n  const cem = getCustomElements();\n  // Handle both string references (lazy loading) and class references (auto-define)\n  const tagName = typeof component === 'string' ? component : component?.is;\n  return extractArgTypesFromElements(tagName, cem);\n};\n\nexport const extractComponentDescription = (component: any) => {\n  // Handle both string references (lazy loading) and class references (auto-define)\n  const tagName = typeof component === 'string' ? component : component?.is;\n  const metaData = getMetaData(tagName, getCustomElements());\n  return metaData && metaData.docs;\n};\n","import { enhanceArgTypes } from 'storybook/internal/docs-tools';\nimport type { ArgTypesEnhancer } from 'storybook/internal/types';\n\nimport { extractArgTypes, extractComponentDescription } from './docs/custom-elements';\nimport type { StencilRenderer } from './types';\n\nexport const parameters = {\n  docs: {\n    extractArgTypes,\n    extractComponentDescription,\n  },\n};\n\nexport const argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[] = [enhanceArgTypes];"],"mappings":"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"}

package/dist/entry-preview-argtypes.js

@@ -54,10 +54,42 @@ const inferControlType = (prop) => {
 
 //#endregion
 //#region src/docs/custom-elements.ts
+/**
+* Formats docsTags (@deprecated, @see, @since) and appends them to the description
+*/
+const formatDocsTags = (docs, docsTags) => {
+	if (!docsTags || docsTags.length === 0) return docs;
+	const tagSections = [];
+	const deprecationSections = [];
+	const deprecatedTags = docsTags.filter((tag) => tag.name === "deprecated");
+	if (deprecatedTags.length > 0) deprecatedTags.forEach((tag) => {
+		if (tag.text) deprecationSections.push(`**⚠️ DEPRECATED:** ${tag.text}`);
+		else deprecationSections.push(`**⚠️ DEPRECATED**`);
+	});
+	const seeTags = docsTags.filter((tag) => tag.name === "see");
+	if (seeTags.length > 0) {
+		const seeLinks = seeTags.map((tag) => {
+			const url = tag.text?.trim();
+			return url ? `[${url}](${url})` : "";
+		}).filter(Boolean).join(", ");
+		if (seeLinks) tagSections.push(`**See:** ${seeLinks}`);
+	}
+	const sinceTags = docsTags.filter((tag) => tag.name === "since");
+	if (sinceTags.length > 0) {
+		const sinceText = sinceTags.map((tag) => tag.text).filter(Boolean).join(", ");
+		if (sinceText) tagSections.push(`**Since:** ${sinceText}`);
+	}
+	const allSections = [
+		...deprecationSections,
+		docs,
+		...tagSections
+	].filter(Boolean);
+	return allSections.join("\n\n");
+};
 const mapData = (data, category) => data.reduce((acc, item) => {
 	acc[item.name] = {
 		name: item.name,
-		description: item.docs,
+		description: formatDocsTags(item.docs, item.docsTags),
 		control: false,
 		table: { category }
 	};
@@ -66,7 +98,7 @@ const mapData = (data, category) => data.reduce((acc, item) => {
 const mapMethods = (methods) => methods.reduce((acc, method) => {
 	acc[method.name] = {
 		name: method.name,
-		description: method.docs,
+		description: formatDocsTags(method.docs, method.docsTags),
 		control: null,
 		type: { name: "function" },
 		table: {
@@ -83,7 +115,7 @@ const mapEvent = (events) => events.reduce((acc, event) => {
 	name = `on${name.charAt(0).toUpperCase() + name.slice(1)}`;
 	acc[name] = {
 		name,
-		description: event.docs,
+		description: formatDocsTags(event.docs, event.docsTags),
 		control: null,
 		table: {
 			category: "events",
@@ -96,7 +128,7 @@ const mapEvent = (events) => events.reduce((acc, event) => {
 const mapProps = (props) => props.reduce((acc, prop) => {
 	acc[prop.name] = {
 		name: prop.attr || prop.name,
-		description: prop.docs,
+		description: formatDocsTags(prop.docs, prop.docsTags),
 		control: inferControlType(prop),
 		table: {
 			category: "properties",

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

@@ -1 +1 @@
-{"version":3,"file":"entry-preview-argtypes.js","names":["prop: JsonDocsProp","scalarTypes: SBScalarType['name'][]","data: T[]","category: string","methods: JsonDocsMethod[]","events: JsonDocsEvent[]","chr: string","props: JsonDocsProp[]","tagName: string","manifest: JsonDocs","customElements: JsonDocs","component: any","argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[]"],"sources":["../src/docs/infer-type.ts","../src/docs/custom-elements.ts","../src/entry-preview-argtypes.ts"],"sourcesContent":["import type { JsonDocsProp } from '@stencil/core/internal';\nimport type { InputType, SBScalarType, SBType } from 'storybook/internal/types';\n\nexport const inferSBType = (prop: JsonDocsProp): SBType => {\n  const scalarTypes: SBScalarType['name'][] = ['string', 'number', 'boolean', 'symbol'];\n  if (prop.type.toLowerCase() in scalarTypes) {\n    return { name: prop.type.toLowerCase(), raw: prop.type, required: prop.required } as SBScalarType;\n  }\n\n  if (/^\\(.*\\)\\s*=>\\s*.*$/.test(prop.type)) {\n    return { name: 'function', raw: prop.type, required: prop.required };\n  }\n\n  return { name: 'other', value: prop.type, raw: prop.type, required: prop.required };\n};\n\nexport const mapPropOptions = (prop: JsonDocsProp) =>\n  prop.values.filter((value) => ['string', 'number'].includes(value.type)).map(({ value }) => value);\n\nexport const inferControlType = (prop: JsonDocsProp): InputType['control'] => {\n  switch (prop.type) {\n    case 'string':\n    case 'string | undefined':\n      return { type: 'text' };\n    case 'number':\n    case 'number | undefined':\n      return { type: 'number' };\n    case 'boolean':\n    case 'boolean | undefined':\n      return { type: 'boolean' };\n    case 'Date':\n    case 'Date | string':\n      return { type: 'date' };\n    case 'function':\n    case 'function | undefined':\n    case 'void':\n    case 'void | undefined':\n      return null;\n    default:\n      const values = mapPropOptions(prop);\n\n      if (values.length === 0) {\n        return { type: 'object' };\n      }\n      if (values.length < 5) {\n        return { type: 'radio' };\n      }\n      return { type: 'select' };\n  }\n};\n","import type {\n  JsonDocs,\n  JsonDocsEvent,\n  JsonDocsMethod,\n  JsonDocsPart,\n  JsonDocsProp,\n  JsonDocsSlot,\n  JsonDocsStyle,\n} from '@stencil/core/internal';\nimport { logger } from 'storybook/internal/client-logger';\nimport type { ArgTypes } from 'storybook/internal/types';\n\nimport { getCustomElements, isValidComponent, isValidMetaData } from '..';\nimport { inferControlType, inferSBType, mapPropOptions } from './infer-type';\n\nconst mapData = <T extends JsonDocsPart>(data: T[], category: string): ArgTypes =>\n  data.reduce<ArgTypes>((acc, item) => {\n    acc[item.name] = {\n      name: item.name,\n      description: item.docs,\n      control: false,\n      table: {\n        category,\n      },\n    };\n    return acc;\n  }, {});\n\nconst mapMethods = (methods: JsonDocsMethod[]): ArgTypes =>\n  methods.reduce<ArgTypes>((acc, method) => {\n    acc[method.name] = {\n      name: method.name,\n      description: method.docs,\n      control: null,\n      type: { name: 'function' },\n      table: {\n        category: 'methods',\n        type: { summary: method.signature },\n      },\n    };\n    return acc;\n  }, {});\n\nconst mapEvent = (events: JsonDocsEvent[]): ArgTypes =>\n  events.reduce<ArgTypes>((acc, event) => {\n    let name = event.event\n      .replace(/(-|_|:|\\.|\\s)+(.)?/g, (_match, _separator, chr: string) => {\n        return chr ? chr.toUpperCase() : '';\n      })\n      .replace(/^([A-Z])/, (match) => match.toLowerCase());\n\n    name = `on${name.charAt(0).toUpperCase() + name.slice(1)}`;\n\n    acc[name] = {\n      name,\n      description: event.docs,\n      control: null,\n      table: {\n        category: 'events',\n        type: { summary: event.detail },\n      },\n      type: { name: 'function' },\n    };\n\n    return acc;\n  }, {});\n\nconst mapProps = (props: JsonDocsProp[]): ArgTypes =>\n  props.reduce<ArgTypes>((acc, prop) => {\n    acc[prop.name] = {\n      name: prop.attr || prop.name,\n      description: prop.docs,\n      control: inferControlType(prop),\n      table: {\n        category: 'properties',\n        type: { summary: prop.complexType?.original },\n        defaultValue: { summary: prop.default },\n      },\n      options: mapPropOptions(prop),\n      type: inferSBType(prop),\n    };\n\n    return acc;\n  }, {});\n\nconst getMetaData = (tagName: string, manifest: JsonDocs) => {\n  if (!isValidComponent(tagName) || !isValidMetaData(manifest)) {\n    return null;\n  }\n  const metaData = manifest.components.find((component) => component.tag.toUpperCase() === tagName.toUpperCase());\n  if (!metaData) {\n    logger.warn(`Component not found in custom-elements.json: ${tagName}`);\n  }\n  return metaData;\n};\n\nexport const extractArgTypesFromElements = (tagName: string, customElements: JsonDocs) => {\n  const metaData = getMetaData(tagName, customElements);\n  return (\n    metaData && {\n      ...mapProps(metaData.props),\n      ...mapEvent(metaData.events),\n      ...mapMethods(metaData.methods),\n      ...mapData<JsonDocsSlot>(metaData.slots, 'slots'),\n      ...mapData<JsonDocsPart>(metaData.parts, 'parts'),\n      ...mapData<JsonDocsStyle>(metaData.styles, 'styles'),\n    }\n  );\n};\n\nexport const extractArgTypes = (component: any) => {\n  const cem = getCustomElements();\n  // Handle both string references (lazy loading) and class references (auto-define)\n  const tagName = typeof component === 'string' ? component : component?.is;\n  return extractArgTypesFromElements(tagName, cem);\n};\n\nexport const extractComponentDescription = (component: any) => {\n  // Handle both string references (lazy loading) and class references (auto-define)\n  const tagName = typeof component === 'string' ? component : component?.is;\n  const metaData = getMetaData(tagName, getCustomElements());\n  return metaData && metaData.docs;\n};\n","import { enhanceArgTypes } from 'storybook/internal/docs-tools';\nimport type { ArgTypesEnhancer } from 'storybook/internal/types';\n\nimport { extractArgTypes, extractComponentDescription } from './docs/custom-elements';\nimport type { StencilRenderer } from './types';\n\nexport const parameters = {\n  docs: {\n    extractArgTypes,\n    extractComponentDescription,\n  },\n};\n\nexport const argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[] = [enhanceArgTypes];"],"mappings":"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"}
+{"version":3,"file":"entry-preview-argtypes.js","names":["prop: JsonDocsProp","scalarTypes: SBScalarType['name'][]","docs: string","docsTags?: DocsTag[]","tagSections: string[]","deprecationSections: string[]","data: T[]","category: string","methods: JsonDocsMethod[]","events: JsonDocsEvent[]","chr: string","props: JsonDocsProp[]","tagName: string","manifest: JsonDocs","customElements: JsonDocs","component: any","argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[]"],"sources":["../src/docs/infer-type.ts","../src/docs/custom-elements.ts","../src/entry-preview-argtypes.ts"],"sourcesContent":["import type { JsonDocsProp } from '@stencil/core/internal';\nimport type { InputType, SBScalarType, SBType } from 'storybook/internal/types';\n\nexport const inferSBType = (prop: JsonDocsProp): SBType => {\n  const scalarTypes: SBScalarType['name'][] = ['string', 'number', 'boolean', 'symbol'];\n  if (prop.type.toLowerCase() in scalarTypes) {\n    return { name: prop.type.toLowerCase(), raw: prop.type, required: prop.required } as SBScalarType;\n  }\n\n  if (/^\\(.*\\)\\s*=>\\s*.*$/.test(prop.type)) {\n    return { name: 'function', raw: prop.type, required: prop.required };\n  }\n\n  return { name: 'other', value: prop.type, raw: prop.type, required: prop.required };\n};\n\nexport const mapPropOptions = (prop: JsonDocsProp) =>\n  prop.values.filter((value) => ['string', 'number'].includes(value.type)).map(({ value }) => value);\n\nexport const inferControlType = (prop: JsonDocsProp): InputType['control'] => {\n  switch (prop.type) {\n    case 'string':\n    case 'string | undefined':\n      return { type: 'text' };\n    case 'number':\n    case 'number | undefined':\n      return { type: 'number' };\n    case 'boolean':\n    case 'boolean | undefined':\n      return { type: 'boolean' };\n    case 'Date':\n    case 'Date | string':\n      return { type: 'date' };\n    case 'function':\n    case 'function | undefined':\n    case 'void':\n    case 'void | undefined':\n      return null;\n    default:\n      const values = mapPropOptions(prop);\n\n      if (values.length === 0) {\n        return { type: 'object' };\n      }\n      if (values.length < 5) {\n        return { type: 'radio' };\n      }\n      return { type: 'select' };\n  }\n};\n","import type {\n  JsonDocs,\n  JsonDocsEvent,\n  JsonDocsMethod,\n  JsonDocsPart,\n  JsonDocsProp,\n  JsonDocsSlot,\n  JsonDocsStyle,\n} from '@stencil/core/internal';\nimport { logger } from 'storybook/internal/client-logger';\nimport type { ArgTypes } from 'storybook/internal/types';\n\nimport { getCustomElements, isValidComponent, isValidMetaData } from '..';\nimport { inferControlType, inferSBType, mapPropOptions } from './infer-type';\n\ninterface DocsTag {\n  name: string;\n  text?: string;\n}\n\n/**\n * Formats docsTags (@deprecated, @see, @since) and appends them to the description\n */\nconst formatDocsTags = (docs: string, docsTags?: DocsTag[]): string => {\n  if (!docsTags || docsTags.length === 0) {\n    return docs;\n  }\n\n  const tagSections: string[] = [];\n  const deprecationSections: string[] = [];\n\n  // Handle @deprecated tags - show at the top with emphasis\n  const deprecatedTags = docsTags.filter((tag) => tag.name === 'deprecated');\n  if (deprecatedTags.length > 0) {\n    deprecatedTags.forEach((tag) => {\n      if (tag.text) {\n        deprecationSections.push(`**⚠️ DEPRECATED:** ${tag.text}`);\n      } else {\n        deprecationSections.push(`**⚠️ DEPRECATED**`);\n      }\n    });\n  }\n\n  // Handle @see tags - create links\n  const seeTags = docsTags.filter((tag) => tag.name === 'see');\n  if (seeTags.length > 0) {\n    const seeLinks = seeTags\n      .map((tag) => {\n        const url = tag.text?.trim();\n        return url ? `[${url}](${url})` : '';\n      })\n      .filter(Boolean)\n      .join(', ');\n    if (seeLinks) {\n      tagSections.push(`**See:** ${seeLinks}`);\n    }\n  }\n\n  // Handle @since tags\n  const sinceTags = docsTags.filter((tag) => tag.name === 'since');\n  if (sinceTags.length > 0) {\n    const sinceText = sinceTags\n      .map((tag) => tag.text)\n      .filter(Boolean)\n      .join(', ');\n    if (sinceText) {\n      tagSections.push(`**Since:** ${sinceText}`);\n    }\n  }\n\n  // Combine all sections - deprecation first, then docs, then other tags\n  const allSections = [...deprecationSections, docs, ...tagSections].filter(Boolean);\n\n  return allSections.join('\\n\\n');\n};\n\nconst mapData = <T extends JsonDocsPart>(data: T[], category: string): ArgTypes =>\n  data.reduce<ArgTypes>((acc, item) => {\n    acc[item.name] = {\n      name: item.name,\n      description: formatDocsTags(item.docs, (item as any).docsTags as DocsTag[]),\n      control: false,\n      table: {\n        category,\n      },\n    };\n    return acc;\n  }, {});\n\nconst mapMethods = (methods: JsonDocsMethod[]): ArgTypes =>\n  methods.reduce<ArgTypes>((acc, method) => {\n    acc[method.name] = {\n      name: method.name,\n      description: formatDocsTags(method.docs, method.docsTags as DocsTag[]),\n      control: null,\n      type: { name: 'function' },\n      table: {\n        category: 'methods',\n        type: { summary: method.signature },\n      },\n    };\n    return acc;\n  }, {});\n\nconst mapEvent = (events: JsonDocsEvent[]): ArgTypes =>\n  events.reduce<ArgTypes>((acc, event) => {\n    let name = event.event\n      .replace(/(-|_|:|\\.|\\s)+(.)?/g, (_match, _separator, chr: string) => {\n        return chr ? chr.toUpperCase() : '';\n      })\n      .replace(/^([A-Z])/, (match) => match.toLowerCase());\n\n    name = `on${name.charAt(0).toUpperCase() + name.slice(1)}`;\n\n    acc[name] = {\n      name,\n      description: formatDocsTags(event.docs, event.docsTags as DocsTag[]),\n      control: null,\n      table: {\n        category: 'events',\n        type: { summary: event.detail },\n      },\n      type: { name: 'function' },\n    };\n\n    return acc;\n  }, {});\n\nconst mapProps = (props: JsonDocsProp[]): ArgTypes =>\n  props.reduce<ArgTypes>((acc, prop) => {\n    acc[prop.name] = {\n      name: prop.attr || prop.name,\n      description: formatDocsTags(prop.docs, prop.docsTags as DocsTag[]),\n      control: inferControlType(prop),\n      table: {\n        category: 'properties',\n        type: { summary: prop.complexType?.original },\n        defaultValue: { summary: prop.default },\n      },\n      options: mapPropOptions(prop),\n      type: inferSBType(prop),\n    };\n\n    return acc;\n  }, {});\n\nconst getMetaData = (tagName: string, manifest: JsonDocs) => {\n  if (!isValidComponent(tagName) || !isValidMetaData(manifest)) {\n    return null;\n  }\n  const metaData = manifest.components.find((component) => component.tag.toUpperCase() === tagName.toUpperCase());\n  if (!metaData) {\n    logger.warn(`Component not found in custom-elements.json: ${tagName}`);\n  }\n  return metaData;\n};\n\nexport const extractArgTypesFromElements = (tagName: string, customElements: JsonDocs) => {\n  const metaData = getMetaData(tagName, customElements);\n  return (\n    metaData && {\n      ...mapProps(metaData.props),\n      ...mapEvent(metaData.events),\n      ...mapMethods(metaData.methods),\n      ...mapData<JsonDocsSlot>(metaData.slots, 'slots'),\n      ...mapData<JsonDocsPart>(metaData.parts, 'parts'),\n      ...mapData<JsonDocsStyle>(metaData.styles, 'styles'),\n    }\n  );\n};\n\nexport const extractArgTypes = (component: any) => {\n  const cem = getCustomElements();\n  // Handle both string references (lazy loading) and class references (auto-define)\n  const tagName = typeof component === 'string' ? component : component?.is;\n  return extractArgTypesFromElements(tagName, cem);\n};\n\nexport const extractComponentDescription = (component: any) => {\n  // Handle both string references (lazy loading) and class references (auto-define)\n  const tagName = typeof component === 'string' ? component : component?.is;\n  const metaData = getMetaData(tagName, getCustomElements());\n  return metaData && metaData.docs;\n};\n","import { enhanceArgTypes } from 'storybook/internal/docs-tools';\nimport type { ArgTypesEnhancer } from 'storybook/internal/types';\n\nimport { extractArgTypes, extractComponentDescription } from './docs/custom-elements';\nimport type { StencilRenderer } from './types';\n\nexport const parameters = {\n  docs: {\n    extractArgTypes,\n    extractComponentDescription,\n  },\n};\n\nexport const argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[] = [enhanceArgTypes];"],"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.6",
   "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"}