@stencil/storybook-plugin 0.3.0 → 0.4.0

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/{entry-preview-3TGf5TzC.js → entry-preview-CajE0iDc.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,8 +16,9 @@ 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) : {
@@ -58,4 +59,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-CajE0iDc.js.map

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

@@ -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"}

package/dist/{entry-preview-nRsKfRZP.cjs → entry-preview-DIDFrQZ9.cjs}

@@ -1,14 +1,15 @@
 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) : {
@@ -78,4 +79,4 @@ Object.defineProperty(exports, 'renderToCanvas', {
     return renderToCanvas;
   }
 });
-//# sourceMappingURL=entry-preview-nRsKfRZP.cjs.map
+//# sourceMappingURL=entry-preview-DIDFrQZ9.cjs.map

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

@@ -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"}

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-DIDFrQZ9.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-CajE0iDc.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-DIDFrQZ9.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-CajE0iDc.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.0",
   "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/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"}