@stencil/storybook-plugin 0.3.0 → 0.4.1

package/README.md

@@ -105,6 +105,14 @@ export const Primary: Story = {
 };
 ```
 
+### 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:

package/dist/docs/index.cjs

@@ -1,4 +1,4 @@
-const require_docs = require('../docs-0uSy55NI.cjs');
+const require_docs = require('../docs-DJjy-dqq.cjs');
 
 exports.renderHTML = require_docs.renderHTML;
 exports.sourceDecorator = require_docs.sourceDecorator;

package/dist/docs/index.js

@@ -1,3 +1,3 @@
-import { renderHTML, sourceDecorator } from "../docs-BTql9Bpv.js";
+import { renderHTML, sourceDecorator } from "../docs-C9E8OhSN.js";
 
 export { renderHTML, sourceDecorator };

package/dist/{docs-BTql9Bpv.js → docs-C9E8OhSN.js}

@@ -7,7 +7,10 @@ function vnodeToHtml(node, indentLevel = 0) {
 	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]) => ` ${key}="${value}"`).join("") : "";
+	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");
@@ -39,4 +42,4 @@ const sourceDecorator = (storyFn, context) => {
 
 //#endregion
 export { renderHTML, sourceDecorator };
-//# sourceMappingURL=docs-BTql9Bpv.js.map
+//# sourceMappingURL=docs-C9E8OhSN.js.map

package/dist/docs-C9E8OhSN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"docs-C9E8OhSN.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"}

package/dist/{docs-0uSy55NI.cjs → docs-DJjy-dqq.cjs}

@@ -8,7 +8,10 @@ function vnodeToHtml(node, indentLevel = 0) {
 	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]) => ` ${key}="${value}"`).join("") : "";
+	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");
@@ -51,4 +54,4 @@ Object.defineProperty(exports, 'sourceDecorator', {
     return sourceDecorator;
   }
 });
-//# sourceMappingURL=docs-0uSy55NI.cjs.map
+//# sourceMappingURL=docs-DJjy-dqq.cjs.map

package/dist/docs-DJjy-dqq.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"docs-DJjy-dqq.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/{entry-preview-nRsKfRZP.cjs → entry-preview-B91w5aFH.cjs}

@@ -1,19 +1,23 @@
 const require_chunk = require('./chunk-CsX-DzYB.cjs');
 const storybook_internal_docs_tools = require_chunk.__toESM(require("storybook/internal/docs-tools"));
-const storybook_preview_api = require_chunk.__toESM(require("storybook/preview-api"));
 const __stencil_core = require_chunk.__toESM(require("@stencil/core"));
+const storybook_preview_api = require_chunk.__toESM(require("storybook/preview-api"));
 
 //#region src/render.ts
 const render = (args, context) => {
 	const { component, parameters: parameters$1 } = context;
 	if (Array.isArray(component)) throw new Error("If your story does not contain a render function, you must provide a component property!");
-	const cmpName = customElements.getName(component);
-	if (!cmpName) throw new Error("Component is not registered!");
+	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]) => {
 		const slot = key === "default" ? void 0 : key;
 		const child = typeof value === "string" ? (0, __stencil_core.h)(void 0, { slot }, value) : {
 			...value,
-			$attrs$: { slot }
+			$attrs$: {
+				...value.$attrs$,
+				slot
+			}
 		};
 		child.$tag$ = child.$tag$ || (slot ? "span" : null);
 		return child.$tag$ ? child : child.$children$;
@@ -78,4 +82,4 @@ Object.defineProperty(exports, 'renderToCanvas', {
     return renderToCanvas;
   }
 });
-//# sourceMappingURL=entry-preview-nRsKfRZP.cjs.map
+//# sourceMappingURL=entry-preview-B91w5aFH.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"entry-preview-B91w5aFH.cjs","names":["render: ArgsStoryFn<StencilRenderer<unknown>>","children: any[]","parameters","canvasElement: StencilRenderer<unknown>['canvasElement']","parameters: Parameters","argTypesEnhancers: ArgTypesEnhancer[]","enhanceArgTypes"],"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 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\\``,\n    );\n  } else if (typeof component !== 'string' && !customElements.getName(component)) {\n    throw new Error(\n      `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'\\``,\n    );\n  }\n  const cmpName = typeof component === 'string' ? component : customElements.getName(component);\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  /**\n   * If the component is not automatically registered after import, register it here\n   */\n  if (storyContext.component && 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 } from 'storybook/internal/types';\nimport type { Parameters } from './types';\n\nexport const parameters: Parameters = { renderer: 'stencil' };\n\nexport { render, renderToCanvas } from './render';\n\nexport const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];\n"],"mappings":";;;;;;AAMA,MAAaA,SAAgD,CAAC,MAAM,YAAY;CAC9E,MAAM,EAAE,WAAW,0BAAY,GAAG;AAElC,KAAI,MAAM,QAAQ,UAAU,CAC1B,OAAM,IAAI,MAAM;AAElB,YAAW,cAAc,aAAa,eAAe,IAAI,UAAU,CACjE,OAAM,IAAI,OACP;iBAEa,cAAc,aAAa,eAAe,QAAQ,UAAU,CAC5E,OAAM,IAAI,OACP;CAGL,MAAM,iBAAiB,cAAc,WAAW,YAAY,eAAe,QAAQ,UAAU;CAE7F,MAAMC,WAAkB,OAAO,QAAeC,aAAW,SAAS,CAAE,EAAC,CAAC,IAAI,CAAC,CAAC,KAAK,MAAM,KAAK;EAE1F,MAAM,OAAO,QAAQ,qBAAwB;EAE7C,MAAM,eACG,UAAU,WACb,8BAAa,EAAE,KAAM,GAAE,MAAM,GAC7B;GACE,GAAG;GACH,SAAS;IACP,GAAG,MAAM;IACT;GACD;EACF;AAEP,QAAM,QAAQ,MAAM,UAAU,OAAO,SAAS;AAC9C,SAAO,MAAM,QAAQ,QAAQ,MAAM;CACpC,EAAC;CAEF,MAAM,aAAa,EAAE,QAAQ;AAC7B,QAAO,sBAAE,WAAW,EAAE,GAAG,KAAM,GAAE,SAAS;AAC3C;AAED,SAAgB,eACd,EAAE,SAAS,UAAU,cAAuD,EAC5EC,eACA;CACA,MAAM,OAAO,SAAS;AACtB,WAAU;;;;AAKV,KAAI,aAAa,aAAa,aAAa,UAAU,OAAO,eAAe,IAAI,aAAa,UAAU,GAAG,CACvG,gBAAe,OAAO,aAAa,UAAU,IAAI,aAAa,UAAU;AAG1E,KAAI,cAAc,WAChB,eAAc,YAAY,cAAc,WAAW;CAGrD,MAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,eAAc,YAAY,QAAQ;AAClC,4BAAc,MAAM,QAAQ;AAC5B,6CAAiB,QAAQ;AAC1B;;;;;;;;;;;AChED,MAAaC,aAAyB,EAAE,UAAU,UAAW;AAI7D,MAAaC,oBAAwC,CAACC,6CAAgB"}

package/dist/{entry-preview-3TGf5TzC.js → entry-preview-DWaghsKM.js}

@@ -1,6 +1,6 @@
 import { enhanceArgTypes } from "storybook/internal/docs-tools";
-import { simulatePageLoad } from "storybook/preview-api";
 import { h, render } from "@stencil/core";
+import { simulatePageLoad } from "storybook/preview-api";
 
 //#region rolldown:runtime
 var __defProp = Object.defineProperty;
@@ -16,13 +16,17 @@ var __export = (target, all) => {
 const render$1 = (args, context) => {
 	const { component, parameters: parameters$1 } = context;
 	if (Array.isArray(component)) throw new Error("If your story does not contain a render function, you must provide a component property!");
-	const cmpName = customElements.getName(component);
-	if (!cmpName) throw new Error("Component is not registered!");
+	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]) => {
 		const slot = key === "default" ? void 0 : key;
 		const child = typeof value === "string" ? h(void 0, { slot }, value) : {
 			...value,
-			$attrs$: { slot }
+			$attrs$: {
+				...value.$attrs$,
+				slot
+			}
 		};
 		child.$tag$ = child.$tag$ || (slot ? "span" : null);
 		return child.$tag$ ? child : child.$children$;
@@ -58,4 +62,4 @@ const argTypesEnhancers = [enhanceArgTypes];
 
 //#endregion
 export { argTypesEnhancers, entry_preview_exports, parameters, render$1 as render, renderToCanvas };
-//# sourceMappingURL=entry-preview-3TGf5TzC.js.map
+//# sourceMappingURL=entry-preview-DWaghsKM.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"entry-preview-DWaghsKM.js","names":["render: ArgsStoryFn<StencilRenderer<unknown>>","children: any[]","parameters","canvasElement: StencilRenderer<unknown>['canvasElement']","parameters: Parameters","argTypesEnhancers: ArgTypesEnhancer[]"],"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 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\\``,\n    );\n  } else if (typeof component !== 'string' && !customElements.getName(component)) {\n    throw new Error(\n      `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'\\``,\n    );\n  }\n  const cmpName = typeof component === 'string' ? component : customElements.getName(component);\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  /**\n   * If the component is not automatically registered after import, register it here\n   */\n  if (storyContext.component && 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 } from 'storybook/internal/types';\nimport type { Parameters } from './types';\n\nexport const parameters: Parameters = { renderer: 'stencil' };\n\nexport { render, renderToCanvas } from './render';\n\nexport const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];\n"],"mappings":";;;;;;;;;;;;;;;AAMA,MAAaA,WAAgD,CAAC,MAAM,YAAY;CAC9E,MAAM,EAAE,WAAW,0BAAY,GAAG;AAElC,KAAI,MAAM,QAAQ,UAAU,CAC1B,OAAM,IAAI,MAAM;AAElB,YAAW,cAAc,aAAa,eAAe,IAAI,UAAU,CACjE,OAAM,IAAI,OACP;iBAEa,cAAc,aAAa,eAAe,QAAQ,UAAU,CAC5E,OAAM,IAAI,OACP;CAGL,MAAM,iBAAiB,cAAc,WAAW,YAAY,eAAe,QAAQ,UAAU;CAE7F,MAAMC,WAAkB,OAAO,QAAeC,aAAW,SAAS,CAAE,EAAC,CAAC,IAAI,CAAC,CAAC,KAAK,MAAM,KAAK;EAE1F,MAAM,OAAO,QAAQ,qBAAwB;EAE7C,MAAM,eACG,UAAU,WACb,UAAa,EAAE,KAAM,GAAE,MAAM,GAC7B;GACE,GAAG;GACH,SAAS;IACP,GAAG,MAAM;IACT;GACD;EACF;AAEP,QAAM,QAAQ,MAAM,UAAU,OAAO,SAAS;AAC9C,SAAO,MAAM,QAAQ,QAAQ,MAAM;CACpC,EAAC;CAEF,MAAM,aAAa,EAAE,QAAQ;AAC7B,QAAO,EAAE,WAAW,EAAE,GAAG,KAAM,GAAE,SAAS;AAC3C;AAED,SAAgB,eACd,EAAE,SAAS,UAAU,cAAuD,EAC5EC,eACA;CACA,MAAM,OAAO,SAAS;AACtB,WAAU;;;;AAKV,KAAI,aAAa,aAAa,aAAa,UAAU,OAAO,eAAe,IAAI,aAAa,UAAU,GAAG,CACvG,gBAAe,OAAO,aAAa,UAAU,IAAI,aAAa,UAAU;AAG1E,KAAI,cAAc,WAChB,eAAc,YAAY,cAAc,WAAW;CAGrD,MAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,eAAc,YAAY,QAAQ;AAClC,QAAc,MAAM,QAAQ;AAC5B,kBAAiB,QAAQ;AAC1B;;;;;;;;;;;AChED,MAAaC,aAAyB,EAAE,UAAU,UAAW;AAI7D,MAAaC,oBAAwC,CAAC,eAAgB"}

package/dist/entry-preview-docs.cjs

@@ -1,5 +1,5 @@
 const require_chunk = require('./chunk-CsX-DzYB.cjs');
-const require_docs = require('./docs-0uSy55NI.cjs');
+const require_docs = require('./docs-DJjy-dqq.cjs');
 const storybook_internal_docs_tools = require_chunk.__toESM(require("storybook/internal/docs-tools"));
 
 //#region src/entry-preview-docs.ts

package/dist/entry-preview-docs.js

@@ -1,4 +1,4 @@
-import { sourceDecorator } from "./docs-BTql9Bpv.js";
+import { sourceDecorator } from "./docs-C9E8OhSN.js";
 import { SourceType } from "storybook/internal/docs-tools";
 
 //#region src/entry-preview-docs.ts

package/dist/entry-preview.cjs

@@ -1,4 +1,4 @@
-const require_entry_preview = require('./entry-preview-nRsKfRZP.cjs');
+const require_entry_preview = require('./entry-preview-B91w5aFH.cjs');
 
 exports.argTypesEnhancers = require_entry_preview.argTypesEnhancers;
 exports.parameters = require_entry_preview.parameters;

package/dist/entry-preview.js

@@ -1,3 +1,3 @@
-import { argTypesEnhancers, parameters, render, renderToCanvas } from "./entry-preview-3TGf5TzC.js";
+import { argTypesEnhancers, parameters, render, renderToCanvas } from "./entry-preview-DWaghsKM.js";
 
 export { argTypesEnhancers, parameters, render, renderToCanvas };

package/dist/index.cjs

@@ -1,5 +1,5 @@
 const require_chunk = require('./chunk-CsX-DzYB.cjs');
-const require_entry_preview = require('./entry-preview-nRsKfRZP.cjs');
+const require_entry_preview = require('./entry-preview-B91w5aFH.cjs');
 const storybook_preview_api = require_chunk.__toESM(require("storybook/preview-api"));
 
 //#region src/portable-stories.tsx

package/dist/index.js

@@ -1,4 +1,4 @@
-import { entry_preview_exports } from "./entry-preview-3TGf5TzC.js";
+import { entry_preview_exports } from "./entry-preview-DWaghsKM.js";
 import "./rollup-parseAst-DXE9IfcK.d.ts";
 import { setDefaultProjectAnnotations, setProjectAnnotations as setProjectAnnotations$1 } from "storybook/preview-api";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/storybook-plugin",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Storybook plugin for Stencil",
   "license": "MIT",
   "homepage": "https://github.com/stenciljs/storybook",
@@ -64,24 +64,24 @@
     "build": "tsdown"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^9.0.5",
-    "@storybook/builder-vite": "^9.0.5",
+    "@storybook/addon-actions": "^9.0.8",
+    "@storybook/builder-vite": "^9.0.8",
     "@storybook/global": "^5.0.0",
-    "@storybook/html": "^9.0.5",
+    "@storybook/html": "^9.0.8",
     "preact-render-to-string": "^6.5.13",
-    "react-docgen-typescript": "^2.2.2",
-    "unplugin-stencil": "^0.3.2"
+    "react-docgen-typescript": "^2.4.0",
+    "unplugin-stencil": "^0.3.4"
   },
   "peerDependencies": {
     "@stencil/core": "^4.30.0",
     "storybook": "^9.0.5"
   },
   "devDependencies": {
-    "@stencil/core": "^4.30.0",
+    "@stencil/core": "^4.33.1",
     "@types/node": "^22.15.3",
-    "tsdown": "^0.12.4",
+    "tsdown": "^0.12.7",
     "typescript": "~5.8.3",
-    "vite": "^6.3.3"
+    "vite": "^6.3.5"
   },
   "engines": {
     "node": ">=20"

package/preset.js

@@ -1,2 +1,2 @@
 // This file seems to only be necessary for Windows
-export * from "./dist/preset.js";
+export * from './dist/preset.js';

package/dist/docs-0uSy55NI.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"docs-0uSy55NI.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\n  const attrs = node.$attrs$\n    ? Object.entries(node.$attrs$)\n        .filter(([_, value]) => value !== undefined)\n        .map(([key, value]) => ` ${key}=\"${value}\"`)\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;CAEjB,MAAM,QAAQ,KAAK,UACf,OAAO,QAAQ,KAAK,QAAQ,CACzB,OAAO,CAAC,CAAC,GAAG,MAAM,KAAK,iBAAoB,CAC3C,IAAI,CAAC,CAAC,KAAK,MAAM,MAAM,GAAG,IAAI,IAAI,MAAM,GAAG,CAC3C,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;;;;AC3BD,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-BTql9Bpv.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"docs-BTql9Bpv.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\n  const attrs = node.$attrs$\n    ? Object.entries(node.$attrs$)\n        .filter(([_, value]) => value !== undefined)\n        .map(([key, value]) => ` ${key}=\"${value}\"`)\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;CAEjB,MAAM,QAAQ,KAAK,UACf,OAAO,QAAQ,KAAK,QAAQ,CACzB,OAAO,CAAC,CAAC,GAAG,MAAM,KAAK,iBAAoB,CAC3C,IAAI,CAAC,CAAC,KAAK,MAAM,MAAM,GAAG,IAAI,IAAI,MAAM,GAAG,CAC3C,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;;;;AC3BD,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"}

package/dist/entry-preview-3TGf5TzC.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"entry-preview-3TGf5TzC.js","names":["render: ArgsStoryFn<StencilRenderer<unknown>>","children: any[]","parameters","canvasElement: StencilRenderer<unknown>['canvasElement']","parameters: Parameters","argTypesEnhancers: ArgTypesEnhancer[]"],"sources":["../src/render.ts","../src/entry-preview.ts"],"sourcesContent":["import { ArgsStoryFn, RenderContext } from 'storybook/internal/types';\nimport { simulatePageLoad } from 'storybook/preview-api';\nimport { render as renderStencil, h, VNode, Fragment } from '@stencil/core';\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\n  const cmpName = customElements.getName(component);\n  if (!cmpName) {\n    throw new Error('Component is not registered!');\n  }\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              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  /**\n   * If the component is not automatically registered after import, register it here\n   */\n  if (storyContext.component && 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 } from 'storybook/internal/types';\nimport type { Parameters } from './types';\n\nexport const parameters: Parameters = { renderer: 'stencil' };\n\nexport { render, renderToCanvas } from './render';\n\nexport const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];\n"],"mappings":";;;;;;;;;;;;;;;AAMA,MAAaA,WAAgD,CAAC,MAAM,YAAY;CAC9E,MAAM,EAAE,WAAW,0BAAY,GAAG;AAElC,KAAI,MAAM,QAAQ,UAAU,CAC1B,OAAM,IAAI,MAAM;CAGlB,MAAM,UAAU,eAAe,QAAQ,UAAU;AACjD,MAAK,QACH,OAAM,IAAI,MAAM;CAGlB,MAAMC,WAAkB,OAAO,QAAeC,aAAW,SAAS,CAAE,EAAC,CAAC,IAAI,CAAC,CAAC,KAAK,MAAM,KAAK;EAE1F,MAAM,OAAO,QAAQ,qBAAwB;EAE7C,MAAM,eACG,UAAU,WACb,UAAa,EAAE,KAAM,GAAE,MAAM,GAC7B;GACE,GAAG;GACH,SAAS,EACP,KACD;EACF;AAEP,QAAM,QAAQ,MAAM,UAAU,OAAO,SAAS;AAC9C,SAAO,MAAM,QAAQ,QAAQ,MAAM;CACpC,EAAC;CAEF,MAAM,aAAa,EAAE,QAAQ;AAC7B,QAAO,EAAE,WAAW,EAAE,GAAG,KAAM,GAAE,SAAS;AAC3C;AAED,SAAgB,eACd,EAAE,SAAS,UAAU,cAAuD,EAC5EC,eACA;CACA,MAAM,OAAO,SAAS;AACtB,WAAU;;;;AAKV,KAAI,aAAa,aAAa,aAAa,UAAU,OAAO,eAAe,IAAI,aAAa,UAAU,GAAG,CACvG,gBAAe,OAAO,aAAa,UAAU,IAAI,aAAa,UAAU;AAG1E,KAAI,cAAc,WAChB,eAAc,YAAY,cAAc,WAAW;CAGrD,MAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,eAAc,YAAY,QAAQ;AAClC,QAAc,MAAM,QAAQ;AAC5B,kBAAiB,QAAQ;AAC1B;;;;;;;;;;;AC1DD,MAAaC,aAAyB,EAAE,UAAU,UAAW;AAI7D,MAAaC,oBAAwC,CAAC,eAAgB"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"entry-preview-nRsKfRZP.cjs","names":["render: ArgsStoryFn<StencilRenderer<unknown>>","children: any[]","parameters","canvasElement: StencilRenderer<unknown>['canvasElement']","parameters: Parameters","argTypesEnhancers: ArgTypesEnhancer[]","enhanceArgTypes"],"sources":["../src/render.ts","../src/entry-preview.ts"],"sourcesContent":["import { ArgsStoryFn, RenderContext } from 'storybook/internal/types';\nimport { simulatePageLoad } from 'storybook/preview-api';\nimport { render as renderStencil, h, VNode, Fragment } from '@stencil/core';\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\n  const cmpName = customElements.getName(component);\n  if (!cmpName) {\n    throw new Error('Component is not registered!');\n  }\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              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  /**\n   * If the component is not automatically registered after import, register it here\n   */\n  if (storyContext.component && 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 } from 'storybook/internal/types';\nimport type { Parameters } from './types';\n\nexport const parameters: Parameters = { renderer: 'stencil' };\n\nexport { render, renderToCanvas } from './render';\n\nexport const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];\n"],"mappings":";;;;;;AAMA,MAAaA,SAAgD,CAAC,MAAM,YAAY;CAC9E,MAAM,EAAE,WAAW,0BAAY,GAAG;AAElC,KAAI,MAAM,QAAQ,UAAU,CAC1B,OAAM,IAAI,MAAM;CAGlB,MAAM,UAAU,eAAe,QAAQ,UAAU;AACjD,MAAK,QACH,OAAM,IAAI,MAAM;CAGlB,MAAMC,WAAkB,OAAO,QAAeC,aAAW,SAAS,CAAE,EAAC,CAAC,IAAI,CAAC,CAAC,KAAK,MAAM,KAAK;EAE1F,MAAM,OAAO,QAAQ,qBAAwB;EAE7C,MAAM,eACG,UAAU,WACb,8BAAa,EAAE,KAAM,GAAE,MAAM,GAC7B;GACE,GAAG;GACH,SAAS,EACP,KACD;EACF;AAEP,QAAM,QAAQ,MAAM,UAAU,OAAO,SAAS;AAC9C,SAAO,MAAM,QAAQ,QAAQ,MAAM;CACpC,EAAC;CAEF,MAAM,aAAa,EAAE,QAAQ;AAC7B,QAAO,sBAAE,WAAW,EAAE,GAAG,KAAM,GAAE,SAAS;AAC3C;AAED,SAAgB,eACd,EAAE,SAAS,UAAU,cAAuD,EAC5EC,eACA;CACA,MAAM,OAAO,SAAS;AACtB,WAAU;;;;AAKV,KAAI,aAAa,aAAa,aAAa,UAAU,OAAO,eAAe,IAAI,aAAa,UAAU,GAAG,CACvG,gBAAe,OAAO,aAAa,UAAU,IAAI,aAAa,UAAU;AAG1E,KAAI,cAAc,WAChB,eAAc,YAAY,cAAc,WAAW;CAGrD,MAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,eAAc,YAAY,QAAQ;AAClC,4BAAc,MAAM,QAAQ;AAC5B,6CAAiB,QAAQ;AAC1B;;;;;;;;;;;AC1DD,MAAaC,aAAyB,EAAE,UAAU,UAAW;AAI7D,MAAaC,oBAAwC,CAACC,6CAAgB"}