@stencil/storybook-plugin 0.0.16 → 0.1.0

package/README.md

@@ -75,6 +75,36 @@ export const Primary: Story = {
 };
 ```
 
+If you are using slots in your component, pass them as parameters to the story object like this:
+
+```tsx
+import type { Meta, StoryObj } from '@stencil/storybook-plugin';
+import { h } from '@stencil/core';
+
+import { MySlotted } from './my-slotted';
+
+const meta = {
+  title: 'MySlotted',
+  component: MySlotted,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<MySlotted>;
+
+export default meta;
+type Story = StoryObj<MySlotted>;
+
+export const Primary: Story = {
+  args: {},
+  parameters: {
+    slots: {
+      default: 'Hello World',
+      another: <div>another</div>
+    },
+  }
+};
+```
+
 ## Limitations
 
 This is early development and we are still seeing some limitations we want to see fixed:

package/dist/index.cjs

@@ -1,5 +1,5 @@
 const require_chunk = require('./chunk-CsX-DzYB.cjs');
-const require_preview = require('./preview-Nz-UTIbe.cjs');
+const require_preview = require('./preview-CQxvr_qp.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 { preview_exports } from "./preview-B75wzZrU.js";
+import { preview_exports } from "./preview-8QXanM3z.js";
 import "./rollup-parseAst-t-4tfMPG.d.ts";
 import { setDefaultProjectAnnotations, setProjectAnnotations as setProjectAnnotations$1 } from "@storybook/preview-api";
 

package/dist/{preview-B75wzZrU.js → preview-8QXanM3z.js}

@@ -13,12 +13,19 @@ var __export = (target, all) => {
 //#endregion
 //#region src/render.ts
 const render$1 = (args, context) => {
-	const { component } = 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!");
+	const children = Object.entries(parameters$1.slots || []).map(([key, value]) => {
+		const slot = key === "default" ? void 0 : key;
+		return typeof value === "string" ? h(null, { slot }, value) : {
+			...value,
+			$attrs$: { slot }
+		};
+	});
 	const Component = `${cmpName}`;
-	return h(Component, { ...args });
+	return h(Component, { ...args }, children);
 };
 function renderToCanvas({ storyFn, showMain, storyContext }, canvasElement) {
 	const vdom = storyFn();
@@ -46,4 +53,4 @@ const parameters = { renderer: "stencil" };
 
 //#endregion
 export { parameters, preview_exports, render$1 as render, renderToCanvas };
-//# sourceMappingURL=preview-B75wzZrU.js.map
+//# sourceMappingURL=preview-8QXanM3z.js.map

package/dist/preview-8QXanM3z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-8QXanM3z.js","names":["render: ArgsStoryFn<StencilRenderer<unknown>>","children: VNode[]","parameters","canvasElement: StencilRenderer<unknown>['canvasElement']","parameters: { renderer: 'stencil' }"],"sources":["../src/render.ts","../src/preview.ts"],"sourcesContent":["import { ArgsStoryFn, RenderContext } from '@storybook/types'\nimport { simulatePageLoad } from '@storybook/preview-api'\nimport { render as renderStencil, h, VNode } 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: VNode[] = Object.entries<VNode>(parameters.slots || []).map(\n      ([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          return typeof value === \"string\"\n            ? h(null, { slot }, value)\n            : {\n                ...value,\n                $attrs$: {\n                  slot,\n                },\n              };\n      },\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","export const parameters: { renderer: 'stencil' } = { renderer: 'stencil' };\nexport { render, renderToCanvas } from './render.js';\n"],"mappings":";;;;;;;;;;;;;;AAMA,MAAaA,WAAgD,CAAC,MAAM,YAAY;CAC5E,MAAM,EAAE,WAAW,0BAAY,GAAG;AAElC,KAAI,MAAM,QAAQ,UAAU,CACxB,OAAM,IAAI,MAAM;CAGpB,MAAM,UAAU,eAAe,QAAQ,UAAU;AACjD,MAAK,QACD,OAAM,IAAI,MAAM;CAGpB,MAAMC,WAAoB,OAAO,QAAeC,aAAW,SAAS,CAAE,EAAC,CAAC,IACtE,CAAC,CAAC,KAAK,MAAM,KAAK;EAEd,MAAM,OAAO,QAAQ,qBAAwB;AAE7C,gBAAc,UAAU,WACpB,EAAE,MAAM,EAAE,KAAM,GAAE,MAAM,GACxB;GACE,GAAG;GACH,SAAS,EACP,KACD;EACF;CACR,EACF;CAED,MAAM,aAAa,EAAE,QAAQ;AAC7B,QAAO,EAAE,WAAW,EAAE,GAAG,KAAM,GAAE,SAAS;AAC7C;AAED,SAAgB,eACZ,EAAE,SAAS,UAAU,cAAuD,EAC5EC,eACF;CACE,MAAM,OAAO,SAAS;AACtB,WAAU;;;;AAKV,KAAI,aAAa,aAAa,aAAa,UAAU,OAAO,eAAe,IAAI,aAAa,UAAU,GAAG,CACrG,gBAAe,OAAO,aAAa,UAAU,IAAI,aAAa,UAAU;AAG5E,KAAI,cAAc,WACd,eAAc,YAAY,cAAc,WAAW;CAGvD,MAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,eAAc,YAAY,QAAQ;AAClC,QAAc,MAAM,QAAQ;AAC5B,kBAAiB,QAAQ;AAC5B;;;;;;;;;;AC5DD,MAAaC,aAAsC,EAAE,UAAU,UAAW"}

package/dist/{preview-Nz-UTIbe.cjs → preview-CQxvr_qp.cjs}

@@ -4,12 +4,19 @@ const __stencil_core = require_chunk.__toESM(require("@stencil/core"));
 
 //#region src/render.ts
 const render = (args, context) => {
-	const { component } = 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!");
+	const children = Object.entries(parameters$1.slots || []).map(([key, value]) => {
+		const slot = key === "default" ? void 0 : key;
+		return typeof value === "string" ? (0, __stencil_core.h)(null, { slot }, value) : {
+			...value,
+			$attrs$: { slot }
+		};
+	});
 	const Component = `${cmpName}`;
-	return (0, __stencil_core.h)(Component, { ...args });
+	return (0, __stencil_core.h)(Component, { ...args }, children);
 };
 function renderToCanvas({ storyFn, showMain, storyContext }, canvasElement) {
 	const vdom = storyFn();
@@ -60,4 +67,4 @@ Object.defineProperty(exports, 'renderToCanvas', {
     return renderToCanvas;
   }
 });
-//# sourceMappingURL=preview-Nz-UTIbe.cjs.map
+//# sourceMappingURL=preview-CQxvr_qp.cjs.map

package/dist/preview-CQxvr_qp.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-CQxvr_qp.cjs","names":["render: ArgsStoryFn<StencilRenderer<unknown>>","children: VNode[]","parameters","canvasElement: StencilRenderer<unknown>['canvasElement']","parameters: { renderer: 'stencil' }"],"sources":["../src/render.ts","../src/preview.ts"],"sourcesContent":["import { ArgsStoryFn, RenderContext } from '@storybook/types'\nimport { simulatePageLoad } from '@storybook/preview-api'\nimport { render as renderStencil, h, VNode } 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: VNode[] = Object.entries<VNode>(parameters.slots || []).map(\n      ([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          return typeof value === \"string\"\n            ? h(null, { slot }, value)\n            : {\n                ...value,\n                $attrs$: {\n                  slot,\n                },\n              };\n      },\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","export const parameters: { renderer: 'stencil' } = { renderer: 'stencil' };\nexport { render, renderToCanvas } from './render.js';\n"],"mappings":";;;;;AAMA,MAAaA,SAAgD,CAAC,MAAM,YAAY;CAC5E,MAAM,EAAE,WAAW,0BAAY,GAAG;AAElC,KAAI,MAAM,QAAQ,UAAU,CACxB,OAAM,IAAI,MAAM;CAGpB,MAAM,UAAU,eAAe,QAAQ,UAAU;AACjD,MAAK,QACD,OAAM,IAAI,MAAM;CAGpB,MAAMC,WAAoB,OAAO,QAAeC,aAAW,SAAS,CAAE,EAAC,CAAC,IACtE,CAAC,CAAC,KAAK,MAAM,KAAK;EAEd,MAAM,OAAO,QAAQ,qBAAwB;AAE7C,gBAAc,UAAU,WACpB,sBAAE,MAAM,EAAE,KAAM,GAAE,MAAM,GACxB;GACE,GAAG;GACH,SAAS,EACP,KACD;EACF;CACR,EACF;CAED,MAAM,aAAa,EAAE,QAAQ;AAC7B,QAAO,sBAAE,WAAW,EAAE,GAAG,KAAM,GAAE,SAAS;AAC7C;AAED,SAAgB,eACZ,EAAE,SAAS,UAAU,cAAuD,EAC5EC,eACF;CACE,MAAM,OAAO,SAAS;AACtB,WAAU;;;;AAKV,KAAI,aAAa,aAAa,aAAa,UAAU,OAAO,eAAe,IAAI,aAAa,UAAU,GAAG,CACrG,gBAAe,OAAO,aAAa,UAAU,IAAI,aAAa,UAAU;AAG5E,KAAI,cAAc,WACd,eAAc,YAAY,cAAc,WAAW;CAGvD,MAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,eAAc,YAAY,QAAQ;AAClC,4BAAc,MAAM,QAAQ;AAC5B,+CAAiB,QAAQ;AAC5B;;;;;;;;;;AC5DD,MAAaC,aAAsC,EAAE,UAAU,UAAW"}

package/dist/preview.cjs

@@ -1,4 +1,4 @@
-const require_preview = require('./preview-Nz-UTIbe.cjs');
+const require_preview = require('./preview-CQxvr_qp.cjs');
 
 exports.parameters = require_preview.parameters;
 exports.render = require_preview.render;

package/dist/preview.js

@@ -1,3 +1,3 @@
-import { parameters, render, renderToCanvas } from "./preview-B75wzZrU.js";
+import { parameters, render, renderToCanvas } from "./preview-8QXanM3z.js";
 
 export { parameters, render, renderToCanvas };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/storybook-plugin",
-  "version": "0.0.16",
+  "version": "0.1.0",
   "description": "Storybook plugin for Stencil",
   "license": "MIT",
   "homepage": "https://github.com/stenciljs/storybook",

package/dist/preview-B75wzZrU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview-B75wzZrU.js","names":["render: ArgsStoryFn<StencilRenderer<unknown>>","canvasElement: StencilRenderer<unknown>['canvasElement']","parameters: { renderer: 'stencil' }"],"sources":["../src/render.ts","../src/preview.ts"],"sourcesContent":["import { ArgsStoryFn, RenderContext } from '@storybook/types'\nimport { simulatePageLoad } from '@storybook/preview-api'\nimport { render as renderStencil, h } from '@stencil/core'\n\nimport type { StencilRenderer } from './types'\n\nexport const render: ArgsStoryFn<StencilRenderer<unknown>> = (args, context) => {\n    const { component } = 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 Component = `${cmpName}`;\n    return h(Component, { ...args })\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","export const parameters: { renderer: 'stencil' } = { renderer: 'stencil' };\nexport { render, renderToCanvas } from './render.js';\n"],"mappings":";;;;;;;;;;;;;;AAMA,MAAaA,WAAgD,CAAC,MAAM,YAAY;CAC5E,MAAM,EAAE,WAAW,GAAG;AAEtB,KAAI,MAAM,QAAQ,UAAU,CACxB,OAAM,IAAI,MAAM;CAGpB,MAAM,UAAU,eAAe,QAAQ,UAAU;AACjD,MAAK,QACD,OAAM,IAAI,MAAM;CAGpB,MAAM,aAAa,EAAE,QAAQ;AAC7B,QAAO,EAAE,WAAW,EAAE,GAAG,KAAM,EAAC;AACnC;AAED,SAAgB,eACZ,EAAE,SAAS,UAAU,cAAuD,EAC5EC,eACF;CACE,MAAM,OAAO,SAAS;AACtB,WAAU;;;;AAKV,KAAI,aAAa,aAAa,aAAa,UAAU,OAAO,eAAe,IAAI,aAAa,UAAU,GAAG,CACrG,gBAAe,OAAO,aAAa,UAAU,IAAI,aAAa,UAAU;AAG5E,KAAI,cAAc,WACd,eAAc,YAAY,cAAc,WAAW;CAGvD,MAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,eAAc,YAAY,QAAQ;AAClC,QAAc,MAAM,QAAQ;AAC5B,kBAAiB,QAAQ;AAC5B;;;;;;;;;;AC5CD,MAAaC,aAAsC,EAAE,UAAU,UAAW"}

package/dist/preview-Nz-UTIbe.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview-Nz-UTIbe.cjs","names":["render: ArgsStoryFn<StencilRenderer<unknown>>","canvasElement: StencilRenderer<unknown>['canvasElement']","parameters: { renderer: 'stencil' }"],"sources":["../src/render.ts","../src/preview.ts"],"sourcesContent":["import { ArgsStoryFn, RenderContext } from '@storybook/types'\nimport { simulatePageLoad } from '@storybook/preview-api'\nimport { render as renderStencil, h } from '@stencil/core'\n\nimport type { StencilRenderer } from './types'\n\nexport const render: ArgsStoryFn<StencilRenderer<unknown>> = (args, context) => {\n    const { component } = 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 Component = `${cmpName}`;\n    return h(Component, { ...args })\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","export const parameters: { renderer: 'stencil' } = { renderer: 'stencil' };\nexport { render, renderToCanvas } from './render.js';\n"],"mappings":";;;;;AAMA,MAAaA,SAAgD,CAAC,MAAM,YAAY;CAC5E,MAAM,EAAE,WAAW,GAAG;AAEtB,KAAI,MAAM,QAAQ,UAAU,CACxB,OAAM,IAAI,MAAM;CAGpB,MAAM,UAAU,eAAe,QAAQ,UAAU;AACjD,MAAK,QACD,OAAM,IAAI,MAAM;CAGpB,MAAM,aAAa,EAAE,QAAQ;AAC7B,QAAO,sBAAE,WAAW,EAAE,GAAG,KAAM,EAAC;AACnC;AAED,SAAgB,eACZ,EAAE,SAAS,UAAU,cAAuD,EAC5EC,eACF;CACE,MAAM,OAAO,SAAS;AACtB,WAAU;;;;AAKV,KAAI,aAAa,aAAa,aAAa,UAAU,OAAO,eAAe,IAAI,aAAa,UAAU,GAAG,CACrG,gBAAe,OAAO,aAAa,UAAU,IAAI,aAAa,UAAU;AAG5E,KAAI,cAAc,WACd,eAAc,YAAY,cAAc,WAAW;CAGvD,MAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,eAAc,YAAY,QAAQ;AAClC,4BAAc,MAAM,QAAQ;AAC5B,+CAAiB,QAAQ;AAC5B;;;;;;;;;;AC5CD,MAAaC,aAAsC,EAAE,UAAU,UAAW"}