@stencil/storybook-plugin 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- const require_docs = require('../docs-0uSy55NI.cjs');
1
+ const require_docs = require('../docs-DJjy-dqq.cjs');
2
2
 
3
3
  exports.renderHTML = require_docs.renderHTML;
4
4
  exports.sourceDecorator = require_docs.sourceDecorator;
@@ -1,3 +1,3 @@
1
- import { renderHTML, sourceDecorator } from "../docs-BTql9Bpv.js";
1
+ import { renderHTML, sourceDecorator } from "../docs-C9E8OhSN.js";
2
2
 
3
3
  export { renderHTML, sourceDecorator };
@@ -7,7 +7,10 @@ function vnodeToHtml(node, indentLevel = 0) {
7
7
  if (node.$text$ !== null) return indent + node.$text$;
8
8
  if (node.$tag$ === null) return "";
9
9
  const tag = node.$tag$;
10
- const attrs = node.$attrs$ ? Object.entries(node.$attrs$).filter(([_, value]) => value !== void 0).map(([key, value]) => ` ${key}="${value}"`).join("") : "";
10
+ const attrs = node.$attrs$ ? Object.entries(node.$attrs$).filter(([_, value]) => value !== void 0).map(([key, value]) => {
11
+ if (typeof value === "boolean") return value ? ` ${key}` : "";
12
+ return ` ${key}="${value}"`;
13
+ }).join("") : "";
11
14
  const children = node.$children$ ?? [];
12
15
  if (children.length === 0) return `${indent}<${tag}${attrs}></${tag}>`;
13
16
  const childrenHtml = children.map((child) => vnodeToHtml(child, indentLevel + 1)).join("\n");
@@ -39,4 +42,4 @@ const sourceDecorator = (storyFn, context) => {
39
42
 
40
43
  //#endregion
41
44
  export { renderHTML, sourceDecorator };
42
- //# sourceMappingURL=docs-BTql9Bpv.js.map
45
+ //# sourceMappingURL=docs-C9E8OhSN.js.map
@@ -0,0 +1 @@
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"}
@@ -8,7 +8,10 @@ function vnodeToHtml(node, indentLevel = 0) {
8
8
  if (node.$text$ !== null) return indent + node.$text$;
9
9
  if (node.$tag$ === null) return "";
10
10
  const tag = node.$tag$;
11
- const attrs = node.$attrs$ ? Object.entries(node.$attrs$).filter(([_, value]) => value !== void 0).map(([key, value]) => ` ${key}="${value}"`).join("") : "";
11
+ const attrs = node.$attrs$ ? Object.entries(node.$attrs$).filter(([_, value]) => value !== void 0).map(([key, value]) => {
12
+ if (typeof value === "boolean") return value ? ` ${key}` : "";
13
+ return ` ${key}="${value}"`;
14
+ }).join("") : "";
12
15
  const children = node.$children$ ?? [];
13
16
  if (children.length === 0) return `${indent}<${tag}${attrs}></${tag}>`;
14
17
  const childrenHtml = children.map((child) => vnodeToHtml(child, indentLevel + 1)).join("\n");
@@ -51,4 +54,4 @@ Object.defineProperty(exports, 'sourceDecorator', {
51
54
  return sourceDecorator;
52
55
  }
53
56
  });
54
- //# sourceMappingURL=docs-0uSy55NI.cjs.map
57
+ //# sourceMappingURL=docs-DJjy-dqq.cjs.map
@@ -0,0 +1 @@
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"}
@@ -14,7 +14,10 @@ const render = (args, context) => {
14
14
  const slot = key === "default" ? void 0 : key;
15
15
  const child = typeof value === "string" ? (0, __stencil_core.h)(void 0, { slot }, value) : {
16
16
  ...value,
17
- $attrs$: { slot }
17
+ $attrs$: {
18
+ ...value.$attrs$,
19
+ slot
20
+ }
18
21
  };
19
22
  child.$tag$ = child.$tag$ || (slot ? "span" : null);
20
23
  return child.$tag$ ? child : child.$children$;
@@ -79,4 +82,4 @@ Object.defineProperty(exports, 'renderToCanvas', {
79
82
  return renderToCanvas;
80
83
  }
81
84
  });
82
- //# sourceMappingURL=entry-preview-DIDFrQZ9.cjs.map
85
+ //# sourceMappingURL=entry-preview-B91w5aFH.cjs.map
@@ -0,0 +1 @@
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"}
@@ -23,7 +23,10 @@ const render$1 = (args, context) => {
23
23
  const slot = key === "default" ? void 0 : key;
24
24
  const child = typeof value === "string" ? h(void 0, { slot }, value) : {
25
25
  ...value,
26
- $attrs$: { slot }
26
+ $attrs$: {
27
+ ...value.$attrs$,
28
+ slot
29
+ }
27
30
  };
28
31
  child.$tag$ = child.$tag$ || (slot ? "span" : null);
29
32
  return child.$tag$ ? child : child.$children$;
@@ -59,4 +62,4 @@ const argTypesEnhancers = [enhanceArgTypes];
59
62
 
60
63
  //#endregion
61
64
  export { argTypesEnhancers, entry_preview_exports, parameters, render$1 as render, renderToCanvas };
62
- //# sourceMappingURL=entry-preview-CajE0iDc.js.map
65
+ //# sourceMappingURL=entry-preview-DWaghsKM.js.map
@@ -0,0 +1 @@
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"}
@@ -1,5 +1,5 @@
1
1
  const require_chunk = require('./chunk-CsX-DzYB.cjs');
2
- const require_docs = require('./docs-0uSy55NI.cjs');
2
+ const require_docs = require('./docs-DJjy-dqq.cjs');
3
3
  const storybook_internal_docs_tools = require_chunk.__toESM(require("storybook/internal/docs-tools"));
4
4
 
5
5
  //#region src/entry-preview-docs.ts
@@ -1,4 +1,4 @@
1
- import { sourceDecorator } from "./docs-BTql9Bpv.js";
1
+ import { sourceDecorator } from "./docs-C9E8OhSN.js";
2
2
  import { SourceType } from "storybook/internal/docs-tools";
3
3
 
4
4
  //#region src/entry-preview-docs.ts
@@ -1,4 +1,4 @@
1
- const require_entry_preview = require('./entry-preview-DIDFrQZ9.cjs');
1
+ const require_entry_preview = require('./entry-preview-B91w5aFH.cjs');
2
2
 
3
3
  exports.argTypesEnhancers = require_entry_preview.argTypesEnhancers;
4
4
  exports.parameters = require_entry_preview.parameters;
@@ -1,3 +1,3 @@
1
- import { argTypesEnhancers, parameters, render, renderToCanvas } from "./entry-preview-CajE0iDc.js";
1
+ import { argTypesEnhancers, parameters, render, renderToCanvas } from "./entry-preview-DWaghsKM.js";
2
2
 
3
3
  export { argTypesEnhancers, parameters, render, renderToCanvas };
package/dist/index.cjs CHANGED
@@ -1,5 +1,5 @@
1
1
  const require_chunk = require('./chunk-CsX-DzYB.cjs');
2
- const require_entry_preview = require('./entry-preview-DIDFrQZ9.cjs');
2
+ const require_entry_preview = require('./entry-preview-B91w5aFH.cjs');
3
3
  const storybook_preview_api = require_chunk.__toESM(require("storybook/preview-api"));
4
4
 
5
5
  //#region src/portable-stories.tsx
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { entry_preview_exports } from "./entry-preview-CajE0iDc.js";
1
+ import { entry_preview_exports } from "./entry-preview-DWaghsKM.js";
2
2
  import "./rollup-parseAst-DXE9IfcK.d.ts";
3
3
  import { setDefaultProjectAnnotations, setProjectAnnotations as setProjectAnnotations$1 } from "storybook/preview-api";
4
4
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stencil/storybook-plugin",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "Storybook plugin for Stencil",
5
5
  "license": "MIT",
6
6
  "homepage": "https://github.com/stenciljs/storybook",
package/preset.js CHANGED
@@ -1,2 +1,2 @@
1
1
  // This file seems to only be necessary for Windows
2
- export * from "./dist/preset.js";
2
+ export * from './dist/preset.js';
@@ -1 +0,0 @@
1
- {"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"}
@@ -1 +0,0 @@
1
- {"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"entry-preview-CajE0iDc.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 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,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;;;;;;;;;;;AC/DD,MAAaC,aAAyB,EAAE,UAAU,UAAW;AAI7D,MAAaC,oBAAwC,CAAC,eAAgB"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"entry-preview-DIDFrQZ9.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 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,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;;;;;;;;;;;AC/DD,MAAaC,aAAyB,EAAE,UAAU,UAAW;AAI7D,MAAaC,oBAAwC,CAACC,6CAAgB"}