@stencil/storybook-plugin 0.6.1 → 1.0.0-dev.1783525808.72954f8

package/README.md

@@ -1,175 +1,109 @@
-# StencilJS Storybook Plugin
+# @stencil/storybook-plugin
 
-> This is still early and work in progress, don't use it yet!
+Storybook framework plugin for StencilJS. Provides a zero-config integration with full HMR, automatic argTypes from component metadata, and controls out of the box.
 
 ## Setup
 
-In an existing StencilJS project, run:
+In your Stencil project, install Storybook and the plugin:
 
 ```sh
-npx storybook@next init
+npm install --save-dev storybook @stencil/storybook-plugin
 ```
 
-to setup a new Storybook project. Select any preset available, e.g. Lit and finish the setup process. After, install the StencilJS preset.
-
-```sh
-npm i --save-dev @stencil/storybook-plugin
-```
-
-Last, update the `.storybook/main.ts` file as following:
+Configure `.storybook/main.ts`:
 
 ```ts
-const config = {
-  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
+import type { StorybookConfig } from '@stencil/storybook-plugin';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
   framework: {
-    name: "@stencil/storybook-plugin"
-  }
+    name: '@stencil/storybook-plugin',
+  },
 };
 
 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
+That's it. The plugin automatically:
+- Transpiles Stencil components on the fly via `@stencil/unplugin`
+- Generates a Custom Elements Manifest from your component decorators
+- Populates argTypes (props, events, slots, CSS parts/properties) in the docs panel
+- Enables HMR for component changes
 
-## Usage
+## Writing Stories
 
-A basic story will look like this:
+Import your component class directly — no separate registration step needed:
 
 ```tsx
 import type { Meta, StoryObj } from '@stencil/storybook-plugin';
-import { h } from '@stencil/core';
-
 import { MyComponent } from './my-component';
 
-const meta = {
+const meta: Meta<MyComponent> = {
   title: 'MyComponent',
   component: MyComponent,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    first: { control: 'text' },
-    last: { control: 'text' },
-    middle: { control: 'text' },
-  },
-  args: { first: 'John', last: 'Doe', middle: 'Michael' },
-} satisfies Meta<MyComponent>;
+  parameters: { layout: 'centered' },
+};
 
 export default meta;
 type Story = StoryObj<MyComponent>;
 
 export const Primary: Story = {
-  args: {
-    first: 'John',
-    last: 'Doe',
-    middle: 'Michael',
-  },
-  render: (props) => {
-    return <my-component {...props} />;
-  }
+  args: { first: 'John', last: 'Doe' },
 };
 ```
 
-If you are using slots in your component, pass them as parameters to the story object like this:
-
-```tsx
-import type { Meta, StoryObj } from '@stencil/storybook-plugin';
-import { h } from '@stencil/core';
+### Slots
 
-import { MySlotted } from './my-slotted';
+Pass slot content via `parameters.slots`:
 
-const meta = {
-  title: 'MySlotted',
-  component: MySlotted,
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta<MySlotted>;
-
-export default meta;
-type Story = StoryObj<MySlotted>;
-
-export const Primary: Story = {
-  args: {},
+```tsx
+export const WithSlot: Story = {
   parameters: {
     slots: {
       default: 'Hello World',
-      another: <div>another</div>
+      footer: <span>Footer content</span>,
     },
-  }
+  },
 };
 ```
 
-## Source Code Display
+## Autodocs
+
+The docs panel is populated automatically from your `@Component`, `@Prop`, `@Event`, `@Method`, and `@Slot` decorators — including JSDoc comments and tags such as `@since`, `@see`, and `@deprecated`.
 
-The plugin supports displaying source code in multiple formats:
+No manual CEM setup required.
 
-### Language Options
+## Source Code Display
 
-Set the source language in your story parameters:
+Control the source snippet language via story parameters:
 
 ```tsx
 export default {
   parameters: {
     docs: {
-      source: {
-        language: 'html', // or 'jsx', 'tsx'
-      },
+      source: { language: 'html' }, // 'html' | 'jsx' | 'tsx'
     },
   },
 } satisfies Meta<MyComponent>;
 ```
 
-**HTML format:**
+**HTML** (default):
 ```html
-<my-component class="example" first="John"></my-component>
+<my-component 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
+**JSX/TSX**: custom element tag names are converted to PascalCase, HTML attributes to their JSX equivalents (`class` → `className`, etc.), and long attribute lists are wrapped automatically.
 
-You can add a toolbar control to switch between formats globally:
+### Global source format toolbar
 
-```tsx
-// .storybook/preview.tsx
+```ts
+// .storybook/preview.ts
 export const globalTypes = {
   source: {
     name: 'Source Format',
     defaultValue: 'html',
-    description: 'Select the source format',
     toolbar: {
       items: ['html', 'jsx', 'tsx'],
       icon: 'markup',
@@ -178,34 +112,4 @@ export const globalTypes = {
     },
   },
 };
-
-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:
-
-- If your `customElementsExportBehavior` is set to a value that lazy loads components, ensure that you are using `defineCustomElements()` in `preview.ts`. You should also define your component as a string in your story file: `component: 'my-component'` as it does not yet exist in the custom element registry.
-- If your `customElementsExportBehavior` is set to a value like `auto-define-custom-elements` or `default`, do not include `defineCustomElements()` in `preview.ts` and use the constructor as the component value in your story file: `component: MyComponent`.
-- Check the console for any error messages.
-
-## Limitations
-
-This is early development and we are still seeing some limitations we want to see fixed:
-
-- Story is completely reloaded when component is changed (no hot module replacement)
-- There is no automation yet for easily scaffolding storybook in a Stencil project.
-- Stories are run in dev mode - no SSR, or serialization happens
-
-Please get involved and support the project with code contributions. Thanks!

package/dist/docs/{index.d.ts → index.d.mts}

@@ -1,4 +1,4 @@
-import { StencilRenderer } from "../types-DqHtEV5w.js";
+import { a as StencilRenderer } from "../types-KTmT9_JX.mjs";
 import { VNode } from "@stencil/core";
 import { DecoratorFunction } from "storybook/internal/types";
 
@@ -8,8 +8,6 @@ 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 { renderVNode, sourceDecorator };
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/docs/render-vnode.ts","../../src/docs/source-decorator.ts"],"mappings":";;;;;KAEK,UAAA;AAAA,cAiHQ,WAAA,GAAe,KAAA,EAAO,KAAA,EAAO,IAAA,EAAM,UAAU;;;cClG7C,eAAA,EAAiB,iBAAiB,CAAC,eAAA"}

package/dist/{docs-DFb4MYCm.js → docs/index.mjs}

@@ -1,6 +1,5 @@
 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("");
@@ -14,14 +13,11 @@ function vnodeToString(node, options, indentLevel = 0) {
 	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 (mode === "jsx") attrName = {
+			class: "className",
+			for: "htmlFor",
+			tabindex: "tabIndex"
+		}[key] || key;
 		if (typeof value === "function") return "";
 		if (typeof value === "boolean") return value ? attrName : "";
 		if (typeof value === "string") return `${attrName}="${value}"`;
@@ -30,28 +26,21 @@ function vnodeToString(node, options, indentLevel = 0) {
 	}).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}>`;
+		const attrsStr = attrArray.length > 0 ? " " + attrArray.join(" ") : "";
+		const singleLine = mode === "jsx" ? `${indent}<${tag}${attrsStr} />` : `${indent}<${tag}${attrsStr}></${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 : "";
+		return mode === "jsx" ? `${indent}<${tag}${formattedAttrs}/>` : `${indent}<${tag}${formattedAttrs}></${tag}>`;
 	}
+	const openingTag = `${indent}<${tag}${attrArray.length > 0 ? " " + attrArray.join(" ") : ""}>`;
+	if (openingTag.length <= LINE_WIDTH) return `${openingTag}\n${children.map((child) => vnodeToString(child, options, indentLevel + 1)).join("\n")}\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}>`;
+	return `${indent}<${tag}${attrArray.length > 0 ? "\n" + attrArray.map((attr) => `${attrIndent}${attr}`).join("\n") + "\n" + indent : ""}>\n${children.map((child) => vnodeToString(child, options, indentLevel + 1)).join("\n")}\n${indent}</${tag}>`;
 }
 const renderVNode = (vnode, mode) => {
 	return vnodeToString(vnode, { mode });
 };
-
 //#endregion
 //#region src/docs/source-decorator.ts
 const skip = (context) => {
@@ -66,20 +55,18 @@ const sourceDecorator = (storyFn, context) => {
 		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": {
+			case "html":
 				emitTransformCode(renderVNode(renderedForSource, "html"), context);
 				break;
-			}
 			case "jsx":
-			case "tsx": {
+			case "tsx":
 				emitTransformCode(renderVNode(renderedForSource, "jsx"), context);
 				break;
-			}
 		}
 	});
 	return story;
 };
-
 //#endregion
 export { renderVNode, sourceDecorator };
-//# sourceMappingURL=docs-DFb4MYCm.js.map
+
+//# sourceMappingURL=index.mjs.map

package/dist/docs/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"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' ? `${indent}<${tag}${attrsStr} />` : `${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 =\n      attrArray.length > 0 ? '\\n' + attrArray.map((attr) => `${attrIndent}${attr}`).join('\\n') + '\\n' + indent : '';\n\n    return mode === 'jsx' ? `${indent}<${tag}${formattedAttrs}/>` : `${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.map((child) => vnodeToString(child, options, indentLevel + 1)).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 =\n    attrArray.length > 0 ? '\\n' + attrArray.map((attr) => `${attrIndent}${attr}`).join('\\n') + '\\n' + indent : '';\n  const childrenString = children.map((child) => vnodeToString(child, options, indentLevel + 1)).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-C1JSJAGq.js → entry-preview-6xYusSlJ.mjs}

@@ -1,25 +1,28 @@
-import { enhanceArgTypes } from "storybook/internal/docs-tools";
 import { simulatePageLoad } from "storybook/preview-api";
+import { enhanceArgTypes } from "storybook/internal/docs-tools";
 import { h, render } from "@stencil/core";
-
-//#region rolldown:runtime
+//#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
-var __export = (target, all) => {
+var __exportAll = (all, no_symbols) => {
+	let target = {};
 	for (var name in all) __defProp(target, name, {
 		get: all[name],
 		enumerable: true
 	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
 };
-
 //#endregion
 //#region src/render.ts
 const render$1 = (args, context) => {
-	const { component, parameters: parameters$1 } = context;
+	const { component, parameters } = context;
 	if (Array.isArray(component)) throw new Error("If your story does not contain a render function, you must provide a component property!");
-	if (typeof component === "string" && !customElements.get(component)) throw new Error(`Stencil component not found. If you are not lazy loading your components with \`defineCustomElements()\` in preview.ts, pass a constructor value for component in your story \`component: MyComponent\``);
-	else if (typeof component !== "string" && !customElements.getName(component)) throw new Error(`Stencil component not found. If you are lazy loading your components with \`defineCustomElements()\` in preview.ts, pass a string value for component in your story \`component: 'my-component'\``);
-	const cmpName = typeof component === "string" ? component : customElements.getName(component);
-	const children = Object.entries(parameters$1.slots || []).map(([key, value]) => {
+	if (typeof component === "string" && !customElements.get(component)) throw new Error(`Stencil component <${component}> is not registered. Make sure it is imported in your story file or in preview.ts.`);
+	else if (typeof component !== "string" && !customElements.getName(component)) {
+		if (!component.is || !customElements.get(component.is)) throw new Error(`Stencil component is not registered. Make sure the component class is imported in your story file.`);
+	}
+	const cmpName = typeof component === "string" ? component : customElements.getName(component) ?? component.is;
+	const children = Object.entries(parameters.slots || []).map(([key, value]) => {
 		const slot = key === "default" ? void 0 : key;
 		const child = typeof value === "string" ? h(void 0, { slot }, value) : {
 			...value,
@@ -31,27 +34,21 @@ const render$1 = (args, context) => {
 		child.$tag$ = child.$tag$ || (slot ? "span" : null);
 		return child.$tag$ ? child : child.$children$;
 	});
-	const Component = `${cmpName}`;
-	return h(Component, { ...args }, children);
+	return h(`${cmpName}`, { ...args }, children);
 };
 function renderToCanvas({ storyFn, showMain, storyContext }, canvasElement) {
 	const vdom = storyFn();
 	showMain();
-	/**
-	* If the component is not automatically registered after import, register it here
-	*/
-	if (storyContext.component && storyContext.component.is && !customElements.get(storyContext.component.is)) customElements.define(storyContext.component.is, storyContext.component);
+	if (storyContext.component?.is && !customElements.get(storyContext.component.is)) customElements.define(storyContext.component.is, storyContext.component);
 	if (canvasElement.firstChild) canvasElement.removeChild(canvasElement.firstChild);
 	const element = document.createElement("div");
 	canvasElement.appendChild(element);
 	render(vdom, element);
 	simulatePageLoad(element);
 }
-
 //#endregion
 //#region src/entry-preview.ts
-var entry_preview_exports = {};
-__export(entry_preview_exports, {
+var entry_preview_exports = /* @__PURE__ */ __exportAll({
 	argTypesEnhancers: () => argTypesEnhancers,
 	parameters: () => parameters,
 	render: () => render$1,
@@ -59,7 +56,7 @@ __export(entry_preview_exports, {
 });
 const parameters = { renderer: "stencil" };
 const argTypesEnhancers = [enhanceArgTypes];
-
 //#endregion
-export { argTypesEnhancers, entry_preview_exports, parameters, render$1 as render, renderToCanvas };
-//# sourceMappingURL=entry-preview-C1JSJAGq.js.map
+export { renderToCanvas as a, render$1 as i, entry_preview_exports as n, parameters as r, argTypesEnhancers as t };
+
+//# sourceMappingURL=entry-preview-6xYusSlJ.mjs.map

package/dist/entry-preview-6xYusSlJ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry-preview-6xYusSlJ.mjs","names":["render"],"sources":["../src/render.ts","../src/entry-preview.ts"],"sourcesContent":["import { h, render as renderStencil, VNode } from '@stencil/core';\nimport { ArgsStoryFn, RenderContext } from 'storybook/internal/types';\nimport { simulatePageLoad } from 'storybook/preview-api';\n\nimport type { StencilRenderer } from './types';\n\nexport const render: ArgsStoryFn<StencilRenderer<unknown>> = (args, context) => {\n  const { component, parameters } = context;\n\n  if (Array.isArray(component)) {\n    throw new Error('If your story does not contain a render function, you must provide a component property!');\n  }\n  if (typeof component === 'string' && !customElements.get(component)) {\n    throw new Error(\n      `Stencil component <${component}> is not registered. Make sure it is imported in your story file or in preview.ts.`,\n    );\n  } else if (typeof component !== 'string' && !customElements.getName(component)) {\n    // After HMR the module re-evaluates and produces a new class reference, so\n    // getName returns null even though the tag is still registered under component.is.\n    if (!(component as any).is || !customElements.get((component as any).is)) {\n      throw new Error(\n        `Stencil component is not registered. Make sure the component class is imported in your story file.`,\n      );\n    }\n  }\n  const cmpName =\n    typeof component === 'string' ? component : (customElements.getName(component) ?? (component as any).is);\n\n  const children: any[] = Object.entries<VNode>(parameters.slots || []).map(([key, value]) => {\n    // if the parameter key is 'default' don't give it a slot name so it renders just as a child\n    const slot = key === 'default' ? undefined : key;\n    // if the value it s a string, create a vnode with the string as the children\n    const child =\n      typeof value === 'string'\n        ? h(undefined, { slot }, value)\n        : {\n            ...value,\n            $attrs$: {\n              ...value.$attrs$,\n              slot,\n            },\n          };\n    // if the value is a fragment and it is a named slot, create a span element with the slot name\n    child.$tag$ = child.$tag$ || (slot ? 'span' : null);\n    return child.$tag$ ? child : child.$children$;\n  });\n\n  const Component = `${cmpName}`;\n  return h(Component, { ...args }, children);\n};\n\nexport function renderToCanvas(\n  { storyFn, showMain, storyContext }: RenderContext<StencilRenderer<unknown>>,\n  canvasElement: StencilRenderer<unknown>['canvasElement'],\n) {\n  const vdom = storyFn();\n  showMain();\n\n  if (storyContext.component?.is && !customElements.get(storyContext.component.is)) {\n    customElements.define(storyContext.component.is, storyContext.component);\n  }\n\n  if (canvasElement.firstChild) {\n    canvasElement.removeChild(canvasElement.firstChild);\n  }\n\n  const element = document.createElement('div');\n  canvasElement.appendChild(element);\n  renderStencil(vdom, element);\n  simulatePageLoad(element);\n}\n","import { enhanceArgTypes } from 'storybook/internal/docs-tools';\nimport type { ArgTypesEnhancer, Parameters } from 'storybook/internal/types';\n\nexport const parameters: Parameters = { renderer: 'stencil' };\nexport { render, renderToCanvas } from './render';\nexport const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];\n"],"mappings":";;;;;;;;;;;;;;;;AAMA,MAAaA,YAAiD,MAAM,YAAY;CAC9E,MAAM,EAAE,WAAW,eAAe;CAElC,IAAI,MAAM,QAAQ,SAAS,GACzB,MAAM,IAAI,MAAM,0FAA0F;CAE5G,IAAI,OAAO,cAAc,YAAY,CAAC,eAAe,IAAI,SAAS,GAChE,MAAM,IAAI,MACR,sBAAsB,UAAU,mFAClC;MACK,IAAI,OAAO,cAAc,YAAY,CAAC,eAAe,QAAQ,SAAS;MAGvE,CAAE,UAAkB,MAAM,CAAC,eAAe,IAAK,UAAkB,EAAE,GACrE,MAAM,IAAI,MACR,oGACF;CAAA;CAGJ,MAAM,UACJ,OAAO,cAAc,WAAW,YAAa,eAAe,QAAQ,SAAS,KAAM,UAAkB;CAEvG,MAAM,WAAkB,OAAO,QAAe,WAAW,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,WAAW;EAE1F,MAAM,OAAO,QAAQ,YAAY,KAAA,IAAY;EAE7C,MAAM,QACJ,OAAO,UAAU,WACb,EAAE,KAAA,GAAW,EAAE,KAAK,GAAG,KAAK,IAC5B;GACE,GAAG;GACH,SAAS;IACP,GAAG,MAAM;IACT;GACF;EACF;EAEN,MAAM,QAAQ,MAAM,UAAU,OAAO,SAAS;EAC9C,OAAO,MAAM,QAAQ,QAAQ,MAAM;CACrC,CAAC;CAGD,OAAO,EAAE,GADY,WACD,EAAE,GAAG,KAAK,GAAG,QAAQ;AAC3C;AAEA,SAAgB,eACd,EAAE,SAAS,UAAU,gBACrB,eACA;CACA,MAAM,OAAO,QAAQ;CACrB,SAAS;CAET,IAAI,aAAa,WAAW,MAAM,CAAC,eAAe,IAAI,aAAa,UAAU,EAAE,GAC7E,eAAe,OAAO,aAAa,UAAU,IAAI,aAAa,SAAS;CAGzE,IAAI,cAAc,YAChB,cAAc,YAAY,cAAc,UAAU;CAGpD,MAAM,UAAU,SAAS,cAAc,KAAK;CAC5C,cAAc,YAAY,OAAO;CACjC,OAAc,MAAM,OAAO;CAC3B,iBAAiB,OAAO;AAC1B;;;;;;;;;ACnEA,MAAa,aAAyB,EAAE,UAAU,UAAU;AAE5D,MAAa,oBAAwC,CAAC,eAAe"}

package/dist/entry-preview-argtypes.d.mts

@@ -0,0 +1,14 @@
+import { a as StencilRenderer } from "./types-KTmT9_JX.mjs";
+import { ArgTypesEnhancer } from "storybook/internal/types";
+
+//#region src/entry-preview-argtypes.d.ts
+declare const parameters: {
+  docs: {
+    extractArgTypes: (component: any) => import("storybook/internal/csf").ArgTypes | null;
+    extractComponentDescription: (component: any) => string | undefined;
+  };
+};
+declare const argTypesEnhancers: ArgTypesEnhancer<StencilRenderer<unknown>>[];
+//#endregion
+export { argTypesEnhancers, parameters };
+//# sourceMappingURL=entry-preview-argtypes.d.mts.map

package/dist/entry-preview-argtypes.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry-preview-argtypes.d.mts","names":[],"sources":["../src/entry-preview-argtypes.ts"],"mappings":";;;;cAMa,UAAA;;;;;;cAOA,iBAAA,EAAmB,gBAAgB,CAAC,eAAA"}

package/dist/entry-preview-argtypes.mjs

@@ -0,0 +1,165 @@
+import { n as isValidComponent, r as isValidMetaData, t as getCustomElements } from "./framework-api-oAIB4EMV.mjs";
+import "./index.mjs";
+import { enhanceArgTypes } from "storybook/internal/docs-tools";
+import { logger } from "storybook/internal/client-logger";
+//#region src/docs/infer-type.ts
+/** Extract string/number literal values from a union type string, e.g. `"'sm' | 'md' | 'lg'"`. */
+const parseLiteralValues = (typeText) => {
+	const values = [];
+	for (const m of typeText.matchAll(/'([^']*)'|"([^"]*)"/g)) values.push(m[1] ?? m[2] ?? "");
+	if (values.length === 0) for (const m of typeText.matchAll(/(?<![.\w])-?\d+(?:\.\d+)?(?![.\w])/g)) values.push(m[0]);
+	return values.filter(Boolean);
+};
+const inferSBType = (field) => {
+	const typeText = field.type?.text ?? "";
+	if ([
+		"string",
+		"number",
+		"boolean",
+		"symbol"
+	].includes(typeText.toLowerCase())) return {
+		name: typeText.toLowerCase(),
+		raw: typeText
+	};
+	if (/^\(.*\)\s*=>\s*.*$/.test(typeText)) return {
+		name: "function",
+		raw: typeText
+	};
+	return {
+		name: "other",
+		value: typeText,
+		raw: typeText
+	};
+};
+const inferControlType = (field) => {
+	const typeText = field.type?.text ?? "";
+	switch (typeText) {
+		case "string":
+		case "string | undefined": return { type: "text" };
+		case "number":
+		case "number | undefined": return { type: "number" };
+		case "boolean":
+		case "boolean | undefined": return { type: "boolean" };
+		case "Date":
+		case "Date | string": return { type: "date" };
+		case "function":
+		case "function | undefined":
+		case "void":
+		case "void | undefined": return false;
+		default: {
+			const values = parseLiteralValues(typeText);
+			if (values.length === 0) return { type: "object" };
+			return { type: values.length < 5 ? "radio" : "select" };
+		}
+	}
+};
+//#endregion
+//#region src/docs/custom-elements.ts
+const cleanTypeText = (text) => text?.replace(/undefined\s*\|\s*/g, "").replace(/\s*\|\s*undefined/g, "").trim() || void 0;
+const withTags = (description, tags, deprecated) => {
+	const sections = [];
+	if (deprecated !== void 0 && deprecated !== false) sections.push(typeof deprecated === "string" ? `**⚠️ Deprecated:** ${deprecated}` : "**⚠️ Deprecated**");
+	if (description) sections.push(description);
+	if (tags?.length) sections.push(tags.map(({ name, text }) => `**${name.charAt(0).toUpperCase() + name.slice(1)}:** ${text ?? ""}`.trimEnd()).join("\n\n"));
+	return sections.length > 0 ? sections.join("\n\n") : void 0;
+};
+const findDeclaration = (tagName, cem) => {
+	for (const mod of cem.modules) {
+		const found = (mod.declarations ?? []).find((d) => "customElement" in d && d.tagName === tagName);
+		if (found) return found;
+	}
+};
+const toEventActionName = (eventName) => {
+	const lowerFirst = eventName.replace(/(-|_|:|\.|\s)+(.)?/g, (_, _sep, chr) => chr ? chr.toUpperCase() : "").replace(/^([A-Z])/, (m) => m.toLowerCase());
+	return `on${lowerFirst.charAt(0).toUpperCase() + lowerFirst.slice(1)}`;
+};
+const mapNamedItems = (items, category) => items.reduce((acc, item) => {
+	acc[item.name] = {
+		name: item.name,
+		description: item.description,
+		control: false,
+		table: { category }
+	};
+	return acc;
+}, {});
+const mapFields = (members) => (members ?? []).filter((m) => m.kind === "field").reduce((acc, field) => {
+	acc[field.name] = {
+		name: field.attribute ?? field.name,
+		description: withTags(field.description, field.tags, field.deprecated),
+		control: inferControlType(field),
+		table: {
+			category: "properties",
+			type: { summary: cleanTypeText(field.type?.text) },
+			defaultValue: { summary: field.default }
+		},
+		options: parseLiteralValues(field.type?.text ?? ""),
+		type: inferSBType(field)
+	};
+	return acc;
+}, {});
+const mapMethods = (members) => (members ?? []).filter((m) => m.kind === "method").reduce((acc, method) => {
+	acc[method.name] = {
+		name: method.name,
+		description: withTags(method.description, method.tags, method.deprecated),
+		control: false,
+		type: { name: "function" },
+		table: {
+			category: "methods",
+			type: { summary: method.return?.type?.text ?? "void" }
+		}
+	};
+	return acc;
+}, {});
+const mapEvents = (events) => (events ?? []).reduce((acc, event) => {
+	const name = toEventActionName(event.name);
+	acc[name] = {
+		name,
+		description: withTags(event.description, event.tags, event.deprecated),
+		control: false,
+		table: {
+			category: "events",
+			type: { summary: cleanTypeText(event.type?.text) }
+		},
+		type: { name: "function" }
+	};
+	return acc;
+}, {});
+const extractArgTypesFromElements = (tagName, cem) => {
+	if (!isValidComponent(tagName) || !isValidMetaData(cem)) return null;
+	const decl = findDeclaration(tagName, cem);
+	if (!decl) {
+		logger.warn(`Component not found in Custom Elements Manifest: ${tagName}`);
+		return null;
+	}
+	return {
+		...mapFields(decl.members),
+		...mapEvents(decl.events),
+		...mapMethods(decl.members),
+		...mapNamedItems(decl.slots ?? [], "slots"),
+		...mapNamedItems(decl.cssParts ?? [], "parts"),
+		...mapNamedItems(decl.cssProperties ?? [], "styles")
+	};
+};
+const extractArgTypes = (component) => {
+	const cem = getCustomElements();
+	const tagName = typeof component === "string" ? component : component?.is;
+	return extractArgTypesFromElements(tagName, cem);
+};
+const extractComponentDescription = (component) => {
+	const cem = getCustomElements();
+	const tagName = typeof component === "string" ? component : component?.is;
+	if (!isValidComponent(tagName) || !isValidMetaData(cem)) return void 0;
+	const decl = findDeclaration(tagName, cem);
+	return withTags(decl?.description, decl?.tags, decl?.deprecated);
+};
+//#endregion
+//#region src/entry-preview-argtypes.ts
+const parameters = { docs: {
+	extractArgTypes,
+	extractComponentDescription
+} };
+const argTypesEnhancers = [enhanceArgTypes];
+//#endregion
+export { argTypesEnhancers, parameters };
+
+//# sourceMappingURL=entry-preview-argtypes.mjs.map