@stencil/storybook-plugin 0.5.9 → 0.7.0

package/dist/{entry-preview-C0ipNwpw.cjs → entry-preview-BmNVHtoL.cjs}

@@ -8,8 +8,10 @@ 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!");
 	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);
+	else if (typeof component !== "string" && !customElements.getName(component)) {
+		if (!component.is || !customElements.get(component.is)) 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) ?? component.is;
 	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) : {
@@ -82,4 +84,4 @@ Object.defineProperty(exports, 'renderToCanvas', {
     return renderToCanvas;
   }
 });
-//# sourceMappingURL=entry-preview-C0ipNwpw.cjs.map
+//# sourceMappingURL=entry-preview-BmNVHtoL.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"entry-preview-BmNVHtoL.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    // After HMR the module re-evaluates and produces a new class reference, so\n    // getName returns null even though the tag is still registered under component.is.\n    if (!(component as any).is || !customElements.get((component as any).is)) {\n      throw new Error(\n        `Stencil component 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  }\n  const cmpName =\n    typeof component === 'string' ? component : (customElements.getName(component) ?? (component as any).is);\n\n  const children: any[] = Object.entries<VNode>(parameters.slots || []).map(([key, value]) => {\n    // if the parameter key is 'default' don't give it a slot name so it renders just as a child\n    const slot = key === 'default' ? undefined : key;\n    // if the value it s a string, create a vnode with the string as the children\n    const child =\n      typeof value === 'string'\n        ? h(undefined, { slot }, value)\n        : {\n            ...value,\n            $attrs$: {\n              ...value.$attrs$,\n              slot,\n            },\n          };\n    // if the value is a fragment and it is a named slot, create a span element with the slot name\n    child.$tag$ = child.$tag$ || (slot ? 'span' : null);\n    return child.$tag$ ? child : child.$children$;\n  });\n\n  const Component = `${cmpName}`;\n  return h(Component, { ...args }, children);\n};\n\nexport function renderToCanvas(\n  { storyFn, showMain, storyContext }: RenderContext<StencilRenderer<unknown>>,\n  canvasElement: StencilRenderer<unknown>['canvasElement'],\n) {\n  const vdom = storyFn();\n  showMain();\n\n  /**\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, Parameters } from 'storybook/internal/types';\n\nexport const parameters: Parameters = { renderer: 'stencil' };\n\nexport { render, renderToCanvas } from './render';\n\nexport const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];\n\n// Reload the iframe when a Stencil component .tsx is rebuilt — see preset.ts.\nif (import.meta.hot) {\n  import.meta.hot.on('stencil:reload', () => {\n    location.reload();\n  });\n}\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,EAG5E;OAAM,UAAkB,OAAO,eAAe,IAAK,UAAkB,GAAG,CACtE,OAAM,IAAI,OACP;CAEJ;CAEH,MAAM,iBACG,cAAc,WAAW,YAAa,eAAe,QAAQ,UAAU,IAAK,UAAkB;CAEvG,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;;;;;;;;;;;ACtED,MAAaC,aAAyB,EAAE,UAAU,UAAW;AAI7D,MAAaC,oBAAwC,CAACC,6CAAgB"}

package/dist/{entry-preview-C1JSJAGq.js → entry-preview-Oaye2Q3u.js}

@@ -17,8 +17,10 @@ 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!");
 	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);
+	else if (typeof component !== "string" && !customElements.getName(component)) {
+		if (!component.is || !customElements.get(component.is)) 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) ?? component.is;
 	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) : {
@@ -59,7 +61,10 @@ __export(entry_preview_exports, {
 });
 const parameters = { renderer: "stencil" };
 const argTypesEnhancers = [enhanceArgTypes];
+if (import.meta.hot) import.meta.hot.on("stencil:reload", () => {
+	location.reload();
+});
 
 //#endregion
 export { argTypesEnhancers, entry_preview_exports, parameters, render$1 as render, renderToCanvas };
-//# sourceMappingURL=entry-preview-C1JSJAGq.js.map
+//# sourceMappingURL=entry-preview-Oaye2Q3u.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"entry-preview-Oaye2Q3u.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    // After HMR the module re-evaluates and produces a new class reference, so\n    // getName returns null even though the tag is still registered under component.is.\n    if (!(component as any).is || !customElements.get((component as any).is)) {\n      throw new Error(\n        `Stencil component 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  }\n  const cmpName =\n    typeof component === 'string' ? component : (customElements.getName(component) ?? (component as any).is);\n\n  const children: any[] = Object.entries<VNode>(parameters.slots || []).map(([key, value]) => {\n    // if the parameter key is 'default' don't give it a slot name so it renders just as a child\n    const slot = key === 'default' ? undefined : key;\n    // if the value it s a string, create a vnode with the string as the children\n    const child =\n      typeof value === 'string'\n        ? h(undefined, { slot }, value)\n        : {\n            ...value,\n            $attrs$: {\n              ...value.$attrs$,\n              slot,\n            },\n          };\n    // if the value is a fragment and it is a named slot, create a span element with the slot name\n    child.$tag$ = child.$tag$ || (slot ? 'span' : null);\n    return child.$tag$ ? child : child.$children$;\n  });\n\n  const Component = `${cmpName}`;\n  return h(Component, { ...args }, children);\n};\n\nexport function renderToCanvas(\n  { storyFn, showMain, storyContext }: RenderContext<StencilRenderer<unknown>>,\n  canvasElement: StencilRenderer<unknown>['canvasElement'],\n) {\n  const vdom = storyFn();\n  showMain();\n\n  /**\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, Parameters } from 'storybook/internal/types';\n\nexport const parameters: Parameters = { renderer: 'stencil' };\n\nexport { render, renderToCanvas } from './render';\n\nexport const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];\n\n// Reload the iframe when a Stencil component .tsx is rebuilt — see preset.ts.\nif (import.meta.hot) {\n  import.meta.hot.on('stencil:reload', () => {\n    location.reload();\n  });\n}\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,EAG5E;OAAM,UAAkB,OAAO,eAAe,IAAK,UAAkB,GAAG,CACtE,OAAM,IAAI,OACP;CAEJ;CAEH,MAAM,iBACG,cAAc,WAAW,YAAa,eAAe,QAAQ,UAAU,IAAK,UAAkB;CAEvG,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;;;;;;;;;;;ACtED,MAAaC,aAAyB,EAAE,UAAU,UAAW;AAI7D,MAAaC,oBAAwC,CAAC,eAAgB;AAGtE,IAAI,OAAO,KAAK,IACd,QAAO,KAAK,IAAI,GAAG,kBAAkB,MAAM;AACzC,UAAS,QAAQ;AAClB,EAAC"}

package/dist/entry-preview-argtypes.cjs

@@ -1,6 +1,6 @@
 const require_chunk = require('./chunk-CsX-DzYB.cjs');
-const require_src = require('./src-D0dJRYm2.cjs');
-require('./entry-preview-C0ipNwpw.cjs');
+const require_src = require('./src-C4ce9Ps1.cjs');
+require('./entry-preview-BmNVHtoL.cjs');
 const storybook_internal_docs_tools = require_chunk.__toESM(require("storybook/internal/docs-tools"));
 const storybook_internal_client_logger = require_chunk.__toESM(require("storybook/internal/client-logger"));
 

package/dist/entry-preview-argtypes.js

@@ -1,6 +1,6 @@
-import "./entry-preview-C1JSJAGq.js";
+import "./entry-preview-Oaye2Q3u.js";
 import "./rollup-parseAst-t-4tfMPG.d.ts";
-import { getCustomElements, isValidComponent, isValidMetaData } from "./src-BBcTbcCa.js";
+import { getCustomElements, isValidComponent, isValidMetaData } from "./src-DWOWXEPY.js";
 import { enhanceArgTypes } from "storybook/internal/docs-tools";
 import { logger } from "storybook/internal/client-logger";
 

package/dist/entry-preview.cjs

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

package/dist/entry-preview.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"entry-preview.d.cts","names":[],"sources":["../src/render.ts","../src/entry-preview.ts"],"sourcesContent":[],"mappings":";;;;cAMa,QAAQ,YAAY;iBAwCjB,cAAA;;;;GACuB,cAAc,0CACpC;AA1CjB;;;cCHa,YAAY;cAIZ,mBAAmB;ADDhC"}
+{"version":3,"file":"entry-preview.d.cts","names":[],"sources":["../src/render.ts","../src/entry-preview.ts"],"sourcesContent":[],"mappings":";;;;cAMa,QAAQ,YAAY;iBA6CjB,cAAA;;;;GACuB,cAAc,0CACpC;AA/CjB;;;cCHa,YAAY;cAIZ,mBAAmB;ADDhC"}

package/dist/entry-preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entry-preview.d.ts","names":[],"sources":["../src/render.ts","../src/entry-preview.ts"],"sourcesContent":[],"mappings":";;;;cAMa,QAAQ,YAAY;iBAwCjB,cAAA;;;;GACuB,cAAc,0CACpC;AA1CjB;;;cCHa,YAAY;cAIZ,mBAAmB;ADDhC"}
+{"version":3,"file":"entry-preview.d.ts","names":[],"sources":["../src/render.ts","../src/entry-preview.ts"],"sourcesContent":[],"mappings":";;;;cAMa,QAAQ,YAAY;iBA6CjB,cAAA;;;;GACuB,cAAc,0CACpC;AA/CjB;;;cCHa,YAAY;cAIZ,mBAAmB;ADDhC"}

package/dist/entry-preview.js

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

package/dist/index.cjs

@@ -1,5 +1,5 @@
-const require_src = require('./src-D0dJRYm2.cjs');
-require('./entry-preview-C0ipNwpw.cjs');
+const require_src = require('./src-C4ce9Ps1.cjs');
+require('./entry-preview-BmNVHtoL.cjs');
 
 exports.getCustomElements = require_src.getCustomElements;
 exports.isValidComponent = require_src.isValidComponent;

package/dist/index.js

@@ -1,5 +1,5 @@
-import "./entry-preview-C1JSJAGq.js";
+import "./entry-preview-Oaye2Q3u.js";
 import "./rollup-parseAst-t-4tfMPG.d.ts";
-import { getCustomElements, isValidComponent, isValidMetaData, setCustomElements, setCustomElementsManifest, setProjectAnnotations } from "./src-BBcTbcCa.js";
+import { getCustomElements, isValidComponent, isValidMetaData, setCustomElements, setCustomElementsManifest, setProjectAnnotations } from "./src-DWOWXEPY.js";
 
 export { getCustomElements, isValidComponent, isValidMetaData, setCustomElements, setCustomElementsManifest, setProjectAnnotations };

package/dist/preset.cjs

@@ -1,7 +1,9 @@
 const require_chunk = require('./chunk-CsX-DzYB.cjs');
+const fs = require_chunk.__toESM(require("fs"));
 const module$1 = require_chunk.__toESM(require("module"));
 const path = require_chunk.__toESM(require("path"));
-const unplugin_stencil_vite = require_chunk.__toESM(require("unplugin-stencil/vite"));
+const __stencil_community_unplugin_stencil = require_chunk.__toESM(require("@stencil-community/unplugin-stencil"));
+const __stencil_community_unplugin_stencil_vite = require_chunk.__toESM(require("@stencil-community/unplugin-stencil/vite"));
 const url = require_chunk.__toESM(require("url"));
 const vite = require_chunk.__toESM(require("vite"));
 
@@ -10,18 +12,116 @@ const require$1 = (0, module$1.createRequire)(require("url").pathToFileURL(__fil
 const getAbsolutePath = (input) => (0, path.dirname)(require$1.resolve((0, path.join)(input, "package.json")));
 const __dirname$1 = (0, path.dirname)((0, url.fileURLToPath)(require("url").pathToFileURL(__filename).href));
 const renderer = (0, path.join)(__dirname$1, "entry-preview.js");
+const UNPLUGIN_STENCIL_NAME = "@stencil-community/unplugin-stencil";
 const core = {
-	builder: getAbsolutePath("@storybook/builder-vite"),
+	builder: (0, path.join)(getAbsolutePath("@storybook/builder-vite"), "dist", "index.js"),
 	renderer
 };
 const viteFinal = async (defaultConfig, { configType }) => {
 	const config = (0, vite.mergeConfig)(defaultConfig, {
 		build: { target: "es2020" },
-		plugins: [(0, unplugin_stencil_vite.default)({ rootPath: defaultConfig.root })]
+		plugins: [(0, __stencil_community_unplugin_stencil_vite.default)({ rootPath: defaultConfig.root })]
+	});
+	if (configType === "DEVELOPMENT") return (0, vite.mergeConfig)(config, {
+		build: { rollupOptions: { external: ["@stencil/core"] } },
+		server: { watch: { ignored: [(0, path.join)(__dirname$1, "**")] } },
+		plugins: [stencilPreviewReloadPlugin()]
 	});
-	if (configType === "DEVELOPMENT") return (0, vite.mergeConfig)(config, { build: { rollupOptions: { external: ["@stencil/core"] } } });
 	return config;
 };
+/**
+* Forces a full preview reload when a Stencil component changes.
+*
+* `customElements.define()` is permanent, so HMR can't swap the new class in —
+* the iframe must reload. We use a custom HMR event (instead of Vite's
+* `full-reload`) because Storybook's story-index watcher races us with its own
+* `vite-app.js` HMR update and cancels plain reloads.
+*
+* - Eager: the .tsx is in Vite's graph; our `transform` hook fires after
+*   unplugin-stencil and emits the reload.
+* - Lazy: the .tsx isn't imported, so we run unplugin-stencil ourselves, then
+*   reload once `@stencil-community/unplugin-stencil` reports the build
+*   finished (its `stencilBuildEvents` emitter, instead of polling dist/esm).
+* - Styles: `@stencil-community/unplugin-stencil` exposes a `style → component`
+*   map built from each component's `@Component` decorator (AST-parsed, covers
+*   `styleUrl`, `styleUrls` array, and `styleUrls` mode object). When a tracked
+*   style file changes we touch every dependent `.tsx` so the eager/lazy paths
+*   above pick up the rebuild.
+* - Global style: the same package resolves `stencil.config#globalStyle`; when
+*   it changes we touch every known component `.tsx`.
+*/
+function stencilPreviewReloadPlugin() {
+	let devServer;
+	let lazyBuildPending = false;
+	const sendReload = (server) => {
+		server.ws.send({
+			type: "custom",
+			event: "stencil:reload"
+		});
+	};
+	const distEsmFragment = `${path.sep}dist${path.sep}esm${path.sep}`;
+	const isComponentSource = (id) => id.endsWith(".tsx") && !id.endsWith(".stories.tsx") && !id.includes(`${path.sep}node_modules${path.sep}`) && !id.includes(`${path.sep}.storybook${path.sep}`);
+	const invalidateDistEsm = (server) => {
+		for (const cached of server.moduleGraph.idToModuleMap.values()) if (cached.id && cached.id.includes(distEsmFragment) && cached.id.endsWith(".js")) server.moduleGraph.invalidateModule(cached);
+	};
+	const touch = (file) => {
+		try {
+			const now = /* @__PURE__ */ new Date();
+			(0, fs.utimesSync)(file, now, now);
+		} catch {}
+	};
+	return {
+		name: "stencil-preview-reload",
+		configureServer(server) {
+			devServer = server;
+			__stencil_community_unplugin_stencil.stencilBuildEvents.on("buildFinished", () => {
+				if (!lazyBuildPending || !devServer) return;
+				lazyBuildPending = false;
+				invalidateDistEsm(devServer);
+				sendReload(devServer);
+			});
+			server.watcher.on("change", async (file) => {
+				const { byStyle, byComponent, globalStyle } = (0, __stencil_community_unplugin_stencil.getComponentStyleDependencies)();
+				const resolved = (0, path.resolve)(file);
+				if (globalStyle && resolved === globalStyle) {
+					for (const componentId of byComponent.keys()) touch(componentId);
+					return;
+				}
+				const dependents = byStyle.get(resolved);
+				if (dependents && dependents.size > 0) {
+					for (const componentId of dependents) touch(componentId);
+					return;
+				}
+				if (!file.endsWith(".tsx") || file.endsWith(".stories.tsx")) return;
+				const mod = server.moduleGraph.getModuleById(file);
+				if (mod && mod.importers.size > 0) return;
+				const stencilPlugin = server.config.plugins.find((p) => p.name === UNPLUGIN_STENCIL_NAME);
+				if (!stencilPlugin || typeof stencilPlugin.transform !== "function") return;
+				lazyBuildPending = true;
+				try {
+					const code = (0, fs.readFileSync)(file, "utf-8");
+					await stencilPlugin.transform.call({ resolve: () => null }, code, file);
+				} catch {
+					lazyBuildPending = false;
+				}
+			});
+		},
+		handleHotUpdate(ctx) {
+			const { file, modules } = ctx;
+			if (!file.endsWith(".tsx") || file.endsWith(".stories.tsx")) return;
+			const mod = modules[0];
+			if (mod && mod.importers?.size > 0) return;
+			return [];
+		},
+		async transform(_code, id) {
+			if (!devServer) return;
+			const cleanId = id.split("?")[0];
+			if (!isComponentSource(cleanId)) return;
+			if (lazyBuildPending) return;
+			sendReload(devServer);
+		}
+	};
+}
 const previewAnnotations = async (input = [], options) => {
 	const docsEnabled = Object.keys(await options.presets.apply("docs", {}, options)).length > 0;
 	const result = [];

package/dist/preset.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"preset.cjs","names":["require","input: I","__dirname","core: StorybookConfig['core']","viteFinal: StorybookConfig['viteFinal']","previewAnnotations: StorybookConfig['previewAnnotations']","result: string[]"],"sources":["../src/preset.ts"],"sourcesContent":["/**\n * we can't prefix the Node.js imports with `node:` because it will break\n * within Storybook due to its Vite setup.\n */\nimport { createRequire } from 'module';\nimport { dirname, join } from 'path';\nimport stencil from 'unplugin-stencil/vite';\nimport { fileURLToPath } from 'url';\nimport { mergeConfig } from 'vite';\nimport { StorybookConfig } from './types';\n\nconst require = createRequire(import.meta.url);\nconst getAbsolutePath = <I extends string>(input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any;\n\nconst __dirname = dirname(fileURLToPath(import.meta.url));\n\nconst renderer = join(__dirname, 'entry-preview.js');\n\nexport const core: StorybookConfig['core'] = {\n  builder: getAbsolutePath('@storybook/builder-vite'),\n  renderer,\n};\n\nexport const viteFinal: StorybookConfig['viteFinal'] = async (defaultConfig, { configType }) => {\n  const config = mergeConfig(defaultConfig, {\n    build: {\n      target: 'es2020',\n    },\n    plugins: [\n      stencil({\n        rootPath: defaultConfig.root,\n      }),\n    ],\n  });\n  if (configType === 'DEVELOPMENT') {\n    return mergeConfig(config, {\n      build: {\n        rollupOptions: {\n          external: ['@stencil/core'],\n        },\n      },\n    });\n  }\n\n  return config;\n};\n\nexport const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input = [], options) => {\n  const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;\n  const result: string[] = [];\n\n  return result\n    .concat(input)\n    .concat([renderer, join(__dirname, 'entry-preview-argtypes.js')])\n    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.js')] : []);\n};\n"],"mappings":";;;;;;;;AAWA,MAAMA,YAAU,0EAA8B;AAC9C,MAAM,kBAAkB,CAAmBC,UAAgB,kBAAQ,UAAQ,QAAQ,eAAK,OAAO,eAAe,CAAC,CAAC;AAEhH,MAAMC,cAAY,kBAAQ,qEAA8B,CAAC;AAEzD,MAAM,WAAW,eAAKA,aAAW,mBAAmB;AAEpD,MAAaC,OAAgC;CAC3C,SAAS,gBAAgB,0BAA0B;CACnD;AACD;AAED,MAAaC,YAA0C,OAAO,eAAe,EAAE,YAAY,KAAK;CAC9F,MAAM,SAAS,sBAAY,eAAe;EACxC,OAAO,EACL,QAAQ,SACT;EACD,SAAS,CACP,mCAAQ,EACN,UAAU,cAAc,KACzB,EAAC,AACH;CACF,EAAC;AACF,KAAI,eAAe,cACjB,QAAO,sBAAY,QAAQ,EACzB,OAAO,EACL,eAAe,EACb,UAAU,CAAC,eAAgB,EAC5B,EACF,EACF,EAAC;AAGJ,QAAO;AACR;AAED,MAAaC,qBAA4D,OAAO,QAAQ,CAAE,GAAE,YAAY;CACtG,MAAM,cAAc,OAAO,KAAK,MAAM,QAAQ,QAAQ,MAAM,QAAQ,CAAE,GAAE,QAAQ,CAAC,CAAC,SAAS;CAC3F,MAAMC,SAAmB,CAAE;AAE3B,QAAO,OACJ,OAAO,MAAM,CACb,OAAO,CAAC,UAAU,eAAKJ,aAAW,4BAA4B,AAAC,EAAC,CAChE,OAAO,cAAc,CAAC,eAAKA,aAAW,wBAAwB,AAAC,IAAG,CAAE,EAAC;AACzE"}
+{"version":3,"file":"preset.cjs","names":["require","input: I","__dirname","core: StorybookConfig['core']","viteFinal: StorybookConfig['viteFinal']","devServer: ViteDevServer | undefined","server: ViteDevServer","sep","id: string","file: string","ctx: HmrContext","previewAnnotations: StorybookConfig['previewAnnotations']","result: string[]"],"sources":["../src/preset.ts"],"sourcesContent":["/**\n * we can't prefix the Node.js imports with `node:` because it will break\n * within Storybook due to its Vite setup.\n */\nimport { readFileSync, utimesSync } from 'fs';\nimport { createRequire } from 'module';\nimport { dirname, join, resolve, sep } from 'path';\nimport { getComponentStyleDependencies, stencilBuildEvents } from '@stencil-community/unplugin-stencil';\nimport stencil from '@stencil-community/unplugin-stencil/vite';\nimport { fileURLToPath } from 'url';\nimport type { HmrContext, Plugin, ViteDevServer } from 'vite';\nimport { mergeConfig } from 'vite';\nimport { StorybookConfig } from './types';\n\nconst require = createRequire(import.meta.url);\nconst getAbsolutePath = <I extends string>(input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any;\n\nconst __dirname = dirname(fileURLToPath(import.meta.url));\n\nconst renderer = join(__dirname, 'entry-preview.js');\n\nconst UNPLUGIN_STENCIL_NAME = '@stencil-community/unplugin-stencil';\n\nexport const core: StorybookConfig['core'] = {\n  builder: join(getAbsolutePath('@storybook/builder-vite'), 'dist', 'index.js'),\n  renderer,\n};\n\nexport const viteFinal: StorybookConfig['viteFinal'] = async (defaultConfig, { configType }) => {\n  const config = mergeConfig(defaultConfig, {\n    build: {\n      target: 'es2020',\n    },\n    plugins: [\n      stencil({\n        rootPath: defaultConfig.root,\n      }),\n    ],\n  });\n  if (configType === 'DEVELOPMENT') {\n    return mergeConfig(config, {\n      build: {\n        rollupOptions: {\n          external: ['@stencil/core'],\n        },\n      },\n      // Don't let Vite watch this plugin's own `dist/`. `tsdown --watch`\n      // rewrites those files during plugin development; if Vite picks the\n      // change up it re-optimizes deps, bumping the React chunk hash and\n      // leaving previously-imported chunks pointing at a torn-down React\n      // (`useEffect` becomes null in <DocsContainer>).\n      server: {\n        watch: {\n          ignored: [join(__dirname, '**')],\n        },\n      },\n      plugins: [stencilPreviewReloadPlugin()],\n    });\n  }\n\n  return config;\n};\n\n/**\n * Forces a full preview reload when a Stencil component changes.\n *\n * `customElements.define()` is permanent, so HMR can't swap the new class in —\n * the iframe must reload. We use a custom HMR event (instead of Vite's\n * `full-reload`) because Storybook's story-index watcher races us with its own\n * `vite-app.js` HMR update and cancels plain reloads.\n *\n * - Eager: the .tsx is in Vite's graph; our `transform` hook fires after\n *   unplugin-stencil and emits the reload.\n * - Lazy: the .tsx isn't imported, so we run unplugin-stencil ourselves, then\n *   reload once `@stencil-community/unplugin-stencil` reports the build\n *   finished (its `stencilBuildEvents` emitter, instead of polling dist/esm).\n * - Styles: `@stencil-community/unplugin-stencil` exposes a `style → component`\n *   map built from each component's `@Component` decorator (AST-parsed, covers\n *   `styleUrl`, `styleUrls` array, and `styleUrls` mode object). When a tracked\n *   style file changes we touch every dependent `.tsx` so the eager/lazy paths\n *   above pick up the rebuild.\n * - Global style: the same package resolves `stencil.config#globalStyle`; when\n *   it changes we touch every known component `.tsx`.\n */\nfunction stencilPreviewReloadPlugin(): Plugin {\n  let devServer: ViteDevServer | undefined;\n  let lazyBuildPending = false;\n\n  const sendReload = (server: ViteDevServer) => {\n    server.ws.send({ type: 'custom', event: 'stencil:reload' });\n  };\n\n  // Match dist/esm module ids on both POSIX and Windows.\n  const distEsmFragment = `${sep}dist${sep}esm${sep}`;\n\n  const isComponentSource = (id: string): boolean =>\n    id.endsWith('.tsx') &&\n    !id.endsWith('.stories.tsx') &&\n    !id.includes(`${sep}node_modules${sep}`) &&\n    !id.includes(`${sep}.storybook${sep}`);\n\n  // dist/esm lives outside Vite's watched root, so its module cache never\n  // invalidates on its own. Drop it before reloading.\n  const invalidateDistEsm = (server: ViteDevServer): void => {\n    for (const cached of server.moduleGraph.idToModuleMap.values()) {\n      if (cached.id && cached.id.includes(distEsmFragment) && cached.id.endsWith('.js')) {\n        server.moduleGraph.invalidateModule(cached);\n      }\n    }\n  };\n\n  // Touch a file's mtime so unplugin-stencil recompiles it. The resulting\n  // `change` event re-enters the watcher handler and rides the eager/lazy path.\n  const touch = (file: string): void => {\n    try {\n      const now = new Date();\n      utimesSync(file, now, now);\n    } catch {\n      // ignore: best-effort touch\n    }\n  };\n\n  return {\n    name: 'stencil-preview-reload',\n\n    configureServer(server) {\n      devServer = server;\n\n      // When unplugin-stencil finishes a (project-wide) Stencil build, the\n      // fresh dist/esm chunks are on disk but Vite still has the old versions\n      // cached. If we kicked a lazy rebuild, invalidate + reload now.\n      stencilBuildEvents.on('buildFinished', () => {\n        if (!lazyBuildPending || !devServer) return;\n        lazyBuildPending = false;\n        invalidateDistEsm(devServer);\n        sendReload(devServer);\n      });\n\n      server.watcher.on('change', async (file: string) => {\n        // unplugin-stencil seeds this map at buildStart, so it's populated from\n        // the first watcher event for eager, lazy, and globalStyle alike.\n        const { byStyle, byComponent, globalStyle } = getComponentStyleDependencies();\n        const resolved = resolve(file);\n\n        // Global style: baked into every component, so touch every component\n        // we know about and let the eager/lazy paths reload.\n        if (globalStyle && resolved === globalStyle) {\n          for (const componentId of byComponent.keys()) touch(componentId);\n          return;\n        }\n\n        // Component-style change: re-route to every dependent .tsx. Each touch\n        // produces a fresh `change` event that flows through the logic below.\n        const dependents = byStyle.get(resolved);\n        if (dependents && dependents.size > 0) {\n          for (const componentId of dependents) touch(componentId);\n          return;\n        }\n\n        if (!file.endsWith('.tsx') || file.endsWith('.stories.tsx')) return;\n\n        const mod = server.moduleGraph.getModuleById(file);\n        // Eager components are handled by the `transform` hook below.\n        if (mod && mod.importers.size > 0) return;\n\n        // Lazy: trigger Stencil's build manually. unplugin-stencil's transform\n        // resolves before the build flushes to disk, so we set a flag and wait\n        // for `stencilBuildEvents.buildFinished` (above) to do the reload.\n        const stencilPlugin = server.config.plugins.find((p) => p.name === UNPLUGIN_STENCIL_NAME);\n        if (!stencilPlugin || typeof stencilPlugin.transform !== 'function') return;\n\n        lazyBuildPending = true;\n        try {\n          const code = readFileSync(file, 'utf-8');\n          await (stencilPlugin.transform as any).call({ resolve: (): null => null }, code, file);\n        } catch {\n          lazyBuildPending = false;\n        }\n      });\n    },\n\n    // Always reload (never HMR) for component .tsx files. Eager modules still\n    // need to flow through Vite so unplugin-stencil rebuilds dist.\n    handleHotUpdate(ctx: HmrContext) {\n      const { file, modules } = ctx;\n      if (!file.endsWith('.tsx') || file.endsWith('.stories.tsx')) return;\n      const mod = modules[0];\n      if (mod && mod.importers?.size > 0) return;\n      return [];\n    },\n\n    async transform(_code, id) {\n      if (!devServer) return;\n      const cleanId = id.split('?')[0];\n      if (!isComponentSource(cleanId)) return;\n      if (lazyBuildPending) return;\n      sendReload(devServer);\n    },\n  };\n}\n\nexport const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input = [], options) => {\n  const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;\n  const result: string[] = [];\n\n  return result\n    .concat(input)\n    .concat([renderer, join(__dirname, 'entry-preview-argtypes.js')])\n    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.js')] : []);\n};\n"],"mappings":"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"}

package/dist/preset.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.cts","names":[],"sources":["../src/preset.ts"],"sourcesContent":[],"mappings":";;;cAkBa,MAAM;cAKN,WAAW;AALX,cA6BA,kBA7BqB,EA6BD,eA7BC,CAAA,oBAAA,CAAA;AAKlC"}
+{"version":3,"file":"preset.d.cts","names":[],"sources":["../src/preset.ts"],"sourcesContent":[],"mappings":";;;cAuBa,MAAM;cAKN,WAAW;AALX,cAkLA,kBAlLqB,EAkLD,eAlLC,CAAA,oBAAA,CAAA;AAKlC"}

package/dist/preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","names":[],"sources":["../src/preset.ts"],"sourcesContent":[],"mappings":";;;cAkBa,MAAM;cAKN,WAAW;AALX,cA6BA,kBA7BqB,EA6BD,eA7BC,CAAA,oBAAA,CAAA;AAKlC"}
+{"version":3,"file":"preset.d.ts","names":[],"sources":["../src/preset.ts"],"sourcesContent":[],"mappings":";;;cAuBa,MAAM;cAKN,WAAW;AALX,cAkLA,kBAlLqB,EAkLD,eAlLC,CAAA,oBAAA,CAAA;AAKlC"}

package/dist/preset.js

@@ -1,6 +1,8 @@
+import { readFileSync, utimesSync } from "fs";
 import { createRequire } from "module";
-import { dirname, join } from "path";
-import stencil from "unplugin-stencil/vite";
+import { dirname, join, resolve, sep } from "path";
+import { getComponentStyleDependencies, stencilBuildEvents } from "@stencil-community/unplugin-stencil";
+import stencil from "@stencil-community/unplugin-stencil/vite";
 import { fileURLToPath } from "url";
 import { mergeConfig } from "vite";
 
@@ -9,8 +11,9 @@ const require = createRequire(import.meta.url);
 const getAbsolutePath = (input) => dirname(require.resolve(join(input, "package.json")));
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const renderer = join(__dirname, "entry-preview.js");
+const UNPLUGIN_STENCIL_NAME = "@stencil-community/unplugin-stencil";
 const core = {
-	builder: getAbsolutePath("@storybook/builder-vite"),
+	builder: join(getAbsolutePath("@storybook/builder-vite"), "dist", "index.js"),
 	renderer
 };
 const viteFinal = async (defaultConfig, { configType }) => {
@@ -18,9 +21,106 @@ const viteFinal = async (defaultConfig, { configType }) => {
 		build: { target: "es2020" },
 		plugins: [stencil({ rootPath: defaultConfig.root })]
 	});
-	if (configType === "DEVELOPMENT") return mergeConfig(config, { build: { rollupOptions: { external: ["@stencil/core"] } } });
+	if (configType === "DEVELOPMENT") return mergeConfig(config, {
+		build: { rollupOptions: { external: ["@stencil/core"] } },
+		server: { watch: { ignored: [join(__dirname, "**")] } },
+		plugins: [stencilPreviewReloadPlugin()]
+	});
 	return config;
 };
+/**
+* Forces a full preview reload when a Stencil component changes.
+*
+* `customElements.define()` is permanent, so HMR can't swap the new class in —
+* the iframe must reload. We use a custom HMR event (instead of Vite's
+* `full-reload`) because Storybook's story-index watcher races us with its own
+* `vite-app.js` HMR update and cancels plain reloads.
+*
+* - Eager: the .tsx is in Vite's graph; our `transform` hook fires after
+*   unplugin-stencil and emits the reload.
+* - Lazy: the .tsx isn't imported, so we run unplugin-stencil ourselves, then
+*   reload once `@stencil-community/unplugin-stencil` reports the build
+*   finished (its `stencilBuildEvents` emitter, instead of polling dist/esm).
+* - Styles: `@stencil-community/unplugin-stencil` exposes a `style → component`
+*   map built from each component's `@Component` decorator (AST-parsed, covers
+*   `styleUrl`, `styleUrls` array, and `styleUrls` mode object). When a tracked
+*   style file changes we touch every dependent `.tsx` so the eager/lazy paths
+*   above pick up the rebuild.
+* - Global style: the same package resolves `stencil.config#globalStyle`; when
+*   it changes we touch every known component `.tsx`.
+*/
+function stencilPreviewReloadPlugin() {
+	let devServer;
+	let lazyBuildPending = false;
+	const sendReload = (server) => {
+		server.ws.send({
+			type: "custom",
+			event: "stencil:reload"
+		});
+	};
+	const distEsmFragment = `${sep}dist${sep}esm${sep}`;
+	const isComponentSource = (id) => id.endsWith(".tsx") && !id.endsWith(".stories.tsx") && !id.includes(`${sep}node_modules${sep}`) && !id.includes(`${sep}.storybook${sep}`);
+	const invalidateDistEsm = (server) => {
+		for (const cached of server.moduleGraph.idToModuleMap.values()) if (cached.id && cached.id.includes(distEsmFragment) && cached.id.endsWith(".js")) server.moduleGraph.invalidateModule(cached);
+	};
+	const touch = (file) => {
+		try {
+			const now = /* @__PURE__ */ new Date();
+			utimesSync(file, now, now);
+		} catch {}
+	};
+	return {
+		name: "stencil-preview-reload",
+		configureServer(server) {
+			devServer = server;
+			stencilBuildEvents.on("buildFinished", () => {
+				if (!lazyBuildPending || !devServer) return;
+				lazyBuildPending = false;
+				invalidateDistEsm(devServer);
+				sendReload(devServer);
+			});
+			server.watcher.on("change", async (file) => {
+				const { byStyle, byComponent, globalStyle } = getComponentStyleDependencies();
+				const resolved = resolve(file);
+				if (globalStyle && resolved === globalStyle) {
+					for (const componentId of byComponent.keys()) touch(componentId);
+					return;
+				}
+				const dependents = byStyle.get(resolved);
+				if (dependents && dependents.size > 0) {
+					for (const componentId of dependents) touch(componentId);
+					return;
+				}
+				if (!file.endsWith(".tsx") || file.endsWith(".stories.tsx")) return;
+				const mod = server.moduleGraph.getModuleById(file);
+				if (mod && mod.importers.size > 0) return;
+				const stencilPlugin = server.config.plugins.find((p) => p.name === UNPLUGIN_STENCIL_NAME);
+				if (!stencilPlugin || typeof stencilPlugin.transform !== "function") return;
+				lazyBuildPending = true;
+				try {
+					const code = readFileSync(file, "utf-8");
+					await stencilPlugin.transform.call({ resolve: () => null }, code, file);
+				} catch {
+					lazyBuildPending = false;
+				}
+			});
+		},
+		handleHotUpdate(ctx) {
+			const { file, modules } = ctx;
+			if (!file.endsWith(".tsx") || file.endsWith(".stories.tsx")) return;
+			const mod = modules[0];
+			if (mod && mod.importers?.size > 0) return;
+			return [];
+		},
+		async transform(_code, id) {
+			if (!devServer) return;
+			const cleanId = id.split("?")[0];
+			if (!isComponentSource(cleanId)) return;
+			if (lazyBuildPending) return;
+			sendReload(devServer);
+		}
+	};
+}
 const previewAnnotations = async (input = [], options) => {
 	const docsEnabled = Object.keys(await options.presets.apply("docs", {}, options)).length > 0;
 	const result = [];

package/dist/preset.js.map

@@ -1 +1 @@
-{"version":3,"file":"preset.js","names":["input: I","core: StorybookConfig['core']","viteFinal: StorybookConfig['viteFinal']","previewAnnotations: StorybookConfig['previewAnnotations']","result: string[]"],"sources":["../src/preset.ts"],"sourcesContent":["/**\n * we can't prefix the Node.js imports with `node:` because it will break\n * within Storybook due to its Vite setup.\n */\nimport { createRequire } from 'module';\nimport { dirname, join } from 'path';\nimport stencil from 'unplugin-stencil/vite';\nimport { fileURLToPath } from 'url';\nimport { mergeConfig } from 'vite';\nimport { StorybookConfig } from './types';\n\nconst require = createRequire(import.meta.url);\nconst getAbsolutePath = <I extends string>(input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any;\n\nconst __dirname = dirname(fileURLToPath(import.meta.url));\n\nconst renderer = join(__dirname, 'entry-preview.js');\n\nexport const core: StorybookConfig['core'] = {\n  builder: getAbsolutePath('@storybook/builder-vite'),\n  renderer,\n};\n\nexport const viteFinal: StorybookConfig['viteFinal'] = async (defaultConfig, { configType }) => {\n  const config = mergeConfig(defaultConfig, {\n    build: {\n      target: 'es2020',\n    },\n    plugins: [\n      stencil({\n        rootPath: defaultConfig.root,\n      }),\n    ],\n  });\n  if (configType === 'DEVELOPMENT') {\n    return mergeConfig(config, {\n      build: {\n        rollupOptions: {\n          external: ['@stencil/core'],\n        },\n      },\n    });\n  }\n\n  return config;\n};\n\nexport const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input = [], options) => {\n  const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;\n  const result: string[] = [];\n\n  return result\n    .concat(input)\n    .concat([renderer, join(__dirname, 'entry-preview-argtypes.js')])\n    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.js')] : []);\n};\n"],"mappings":";;;;;;;AAWA,MAAM,UAAU,cAAc,OAAO,KAAK,IAAI;AAC9C,MAAM,kBAAkB,CAAmBA,UAAgB,QAAQ,QAAQ,QAAQ,KAAK,OAAO,eAAe,CAAC,CAAC;AAEhH,MAAM,YAAY,QAAQ,cAAc,OAAO,KAAK,IAAI,CAAC;AAEzD,MAAM,WAAW,KAAK,WAAW,mBAAmB;AAEpD,MAAaC,OAAgC;CAC3C,SAAS,gBAAgB,0BAA0B;CACnD;AACD;AAED,MAAaC,YAA0C,OAAO,eAAe,EAAE,YAAY,KAAK;CAC9F,MAAM,SAAS,YAAY,eAAe;EACxC,OAAO,EACL,QAAQ,SACT;EACD,SAAS,CACP,QAAQ,EACN,UAAU,cAAc,KACzB,EAAC,AACH;CACF,EAAC;AACF,KAAI,eAAe,cACjB,QAAO,YAAY,QAAQ,EACzB,OAAO,EACL,eAAe,EACb,UAAU,CAAC,eAAgB,EAC5B,EACF,EACF,EAAC;AAGJ,QAAO;AACR;AAED,MAAaC,qBAA4D,OAAO,QAAQ,CAAE,GAAE,YAAY;CACtG,MAAM,cAAc,OAAO,KAAK,MAAM,QAAQ,QAAQ,MAAM,QAAQ,CAAE,GAAE,QAAQ,CAAC,CAAC,SAAS;CAC3F,MAAMC,SAAmB,CAAE;AAE3B,QAAO,OACJ,OAAO,MAAM,CACb,OAAO,CAAC,UAAU,KAAK,WAAW,4BAA4B,AAAC,EAAC,CAChE,OAAO,cAAc,CAAC,KAAK,WAAW,wBAAwB,AAAC,IAAG,CAAE,EAAC;AACzE"}
+{"version":3,"file":"preset.js","names":["input: I","core: StorybookConfig['core']","viteFinal: StorybookConfig['viteFinal']","devServer: ViteDevServer | undefined","server: ViteDevServer","id: string","file: string","ctx: HmrContext","previewAnnotations: StorybookConfig['previewAnnotations']","result: string[]"],"sources":["../src/preset.ts"],"sourcesContent":["/**\n * we can't prefix the Node.js imports with `node:` because it will break\n * within Storybook due to its Vite setup.\n */\nimport { readFileSync, utimesSync } from 'fs';\nimport { createRequire } from 'module';\nimport { dirname, join, resolve, sep } from 'path';\nimport { getComponentStyleDependencies, stencilBuildEvents } from '@stencil-community/unplugin-stencil';\nimport stencil from '@stencil-community/unplugin-stencil/vite';\nimport { fileURLToPath } from 'url';\nimport type { HmrContext, Plugin, ViteDevServer } from 'vite';\nimport { mergeConfig } from 'vite';\nimport { StorybookConfig } from './types';\n\nconst require = createRequire(import.meta.url);\nconst getAbsolutePath = <I extends string>(input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any;\n\nconst __dirname = dirname(fileURLToPath(import.meta.url));\n\nconst renderer = join(__dirname, 'entry-preview.js');\n\nconst UNPLUGIN_STENCIL_NAME = '@stencil-community/unplugin-stencil';\n\nexport const core: StorybookConfig['core'] = {\n  builder: join(getAbsolutePath('@storybook/builder-vite'), 'dist', 'index.js'),\n  renderer,\n};\n\nexport const viteFinal: StorybookConfig['viteFinal'] = async (defaultConfig, { configType }) => {\n  const config = mergeConfig(defaultConfig, {\n    build: {\n      target: 'es2020',\n    },\n    plugins: [\n      stencil({\n        rootPath: defaultConfig.root,\n      }),\n    ],\n  });\n  if (configType === 'DEVELOPMENT') {\n    return mergeConfig(config, {\n      build: {\n        rollupOptions: {\n          external: ['@stencil/core'],\n        },\n      },\n      // Don't let Vite watch this plugin's own `dist/`. `tsdown --watch`\n      // rewrites those files during plugin development; if Vite picks the\n      // change up it re-optimizes deps, bumping the React chunk hash and\n      // leaving previously-imported chunks pointing at a torn-down React\n      // (`useEffect` becomes null in <DocsContainer>).\n      server: {\n        watch: {\n          ignored: [join(__dirname, '**')],\n        },\n      },\n      plugins: [stencilPreviewReloadPlugin()],\n    });\n  }\n\n  return config;\n};\n\n/**\n * Forces a full preview reload when a Stencil component changes.\n *\n * `customElements.define()` is permanent, so HMR can't swap the new class in —\n * the iframe must reload. We use a custom HMR event (instead of Vite's\n * `full-reload`) because Storybook's story-index watcher races us with its own\n * `vite-app.js` HMR update and cancels plain reloads.\n *\n * - Eager: the .tsx is in Vite's graph; our `transform` hook fires after\n *   unplugin-stencil and emits the reload.\n * - Lazy: the .tsx isn't imported, so we run unplugin-stencil ourselves, then\n *   reload once `@stencil-community/unplugin-stencil` reports the build\n *   finished (its `stencilBuildEvents` emitter, instead of polling dist/esm).\n * - Styles: `@stencil-community/unplugin-stencil` exposes a `style → component`\n *   map built from each component's `@Component` decorator (AST-parsed, covers\n *   `styleUrl`, `styleUrls` array, and `styleUrls` mode object). When a tracked\n *   style file changes we touch every dependent `.tsx` so the eager/lazy paths\n *   above pick up the rebuild.\n * - Global style: the same package resolves `stencil.config#globalStyle`; when\n *   it changes we touch every known component `.tsx`.\n */\nfunction stencilPreviewReloadPlugin(): Plugin {\n  let devServer: ViteDevServer | undefined;\n  let lazyBuildPending = false;\n\n  const sendReload = (server: ViteDevServer) => {\n    server.ws.send({ type: 'custom', event: 'stencil:reload' });\n  };\n\n  // Match dist/esm module ids on both POSIX and Windows.\n  const distEsmFragment = `${sep}dist${sep}esm${sep}`;\n\n  const isComponentSource = (id: string): boolean =>\n    id.endsWith('.tsx') &&\n    !id.endsWith('.stories.tsx') &&\n    !id.includes(`${sep}node_modules${sep}`) &&\n    !id.includes(`${sep}.storybook${sep}`);\n\n  // dist/esm lives outside Vite's watched root, so its module cache never\n  // invalidates on its own. Drop it before reloading.\n  const invalidateDistEsm = (server: ViteDevServer): void => {\n    for (const cached of server.moduleGraph.idToModuleMap.values()) {\n      if (cached.id && cached.id.includes(distEsmFragment) && cached.id.endsWith('.js')) {\n        server.moduleGraph.invalidateModule(cached);\n      }\n    }\n  };\n\n  // Touch a file's mtime so unplugin-stencil recompiles it. The resulting\n  // `change` event re-enters the watcher handler and rides the eager/lazy path.\n  const touch = (file: string): void => {\n    try {\n      const now = new Date();\n      utimesSync(file, now, now);\n    } catch {\n      // ignore: best-effort touch\n    }\n  };\n\n  return {\n    name: 'stencil-preview-reload',\n\n    configureServer(server) {\n      devServer = server;\n\n      // When unplugin-stencil finishes a (project-wide) Stencil build, the\n      // fresh dist/esm chunks are on disk but Vite still has the old versions\n      // cached. If we kicked a lazy rebuild, invalidate + reload now.\n      stencilBuildEvents.on('buildFinished', () => {\n        if (!lazyBuildPending || !devServer) return;\n        lazyBuildPending = false;\n        invalidateDistEsm(devServer);\n        sendReload(devServer);\n      });\n\n      server.watcher.on('change', async (file: string) => {\n        // unplugin-stencil seeds this map at buildStart, so it's populated from\n        // the first watcher event for eager, lazy, and globalStyle alike.\n        const { byStyle, byComponent, globalStyle } = getComponentStyleDependencies();\n        const resolved = resolve(file);\n\n        // Global style: baked into every component, so touch every component\n        // we know about and let the eager/lazy paths reload.\n        if (globalStyle && resolved === globalStyle) {\n          for (const componentId of byComponent.keys()) touch(componentId);\n          return;\n        }\n\n        // Component-style change: re-route to every dependent .tsx. Each touch\n        // produces a fresh `change` event that flows through the logic below.\n        const dependents = byStyle.get(resolved);\n        if (dependents && dependents.size > 0) {\n          for (const componentId of dependents) touch(componentId);\n          return;\n        }\n\n        if (!file.endsWith('.tsx') || file.endsWith('.stories.tsx')) return;\n\n        const mod = server.moduleGraph.getModuleById(file);\n        // Eager components are handled by the `transform` hook below.\n        if (mod && mod.importers.size > 0) return;\n\n        // Lazy: trigger Stencil's build manually. unplugin-stencil's transform\n        // resolves before the build flushes to disk, so we set a flag and wait\n        // for `stencilBuildEvents.buildFinished` (above) to do the reload.\n        const stencilPlugin = server.config.plugins.find((p) => p.name === UNPLUGIN_STENCIL_NAME);\n        if (!stencilPlugin || typeof stencilPlugin.transform !== 'function') return;\n\n        lazyBuildPending = true;\n        try {\n          const code = readFileSync(file, 'utf-8');\n          await (stencilPlugin.transform as any).call({ resolve: (): null => null }, code, file);\n        } catch {\n          lazyBuildPending = false;\n        }\n      });\n    },\n\n    // Always reload (never HMR) for component .tsx files. Eager modules still\n    // need to flow through Vite so unplugin-stencil rebuilds dist.\n    handleHotUpdate(ctx: HmrContext) {\n      const { file, modules } = ctx;\n      if (!file.endsWith('.tsx') || file.endsWith('.stories.tsx')) return;\n      const mod = modules[0];\n      if (mod && mod.importers?.size > 0) return;\n      return [];\n    },\n\n    async transform(_code, id) {\n      if (!devServer) return;\n      const cleanId = id.split('?')[0];\n      if (!isComponentSource(cleanId)) return;\n      if (lazyBuildPending) return;\n      sendReload(devServer);\n    },\n  };\n}\n\nexport const previewAnnotations: StorybookConfig['previewAnnotations'] = async (input = [], options) => {\n  const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;\n  const result: string[] = [];\n\n  return result\n    .concat(input)\n    .concat([renderer, join(__dirname, 'entry-preview-argtypes.js')])\n    .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.js')] : []);\n};\n"],"mappings":"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"}

package/dist/{src-D0dJRYm2.cjs → src-C4ce9Ps1.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require('./chunk-CsX-DzYB.cjs');
-const require_entry_preview = require('./entry-preview-C0ipNwpw.cjs');
+const require_entry_preview = require('./entry-preview-BmNVHtoL.cjs');
 const __storybook_global = require_chunk.__toESM(require("@storybook/global"));
 const storybook_preview_api = require_chunk.__toESM(require("storybook/preview-api"));
 
@@ -88,4 +88,4 @@ Object.defineProperty(exports, 'setProjectAnnotations', {
     return setProjectAnnotations;
   }
 });
-//# sourceMappingURL=src-D0dJRYm2.cjs.map
+//# sourceMappingURL=src-C4ce9Ps1.cjs.map

package/dist/{src-D0dJRYm2.cjs.map → src-C4ce9Ps1.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"src-D0dJRYm2.cjs","names":["tagName: string","customElements: JsonDocs","customElements: any","global","projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]","stencilAnnotations"],"sources":["../src/framework-api.ts","../src/portable-stories.tsx"],"sourcesContent":["import { global } from '@storybook/global';\nimport type { JsonDocs } from '@stencil/core/internal';\n\nexport function isValidComponent(tagName: string) {\n  if (!tagName) {\n    return false;\n  }\n  if (typeof tagName === 'string') {\n    return true;\n  }\n  throw new Error('Provided component needs to be a string. e.g. component: \"my-element\"');\n}\n\nexport function isValidMetaData(customElements: JsonDocs) {\n  if (!customElements) {\n    return false;\n  }\n\n  if (customElements.components && Array.isArray(customElements.components)) {\n    return true;\n  }\n  \n  throw new Error(`You need to setup valid meta data in your stencil.config.js via docs-json output target.`);\n}\n\n/** @param customElements `any` for now as spec is not super stable yet */\nexport function setCustomElements(customElements: any) {\n  global.__STORYBOOK_CUSTOM_ELEMENTS__ = customElements;\n}\n\nexport function setCustomElementsManifest(customElements: any) {\n  global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__ = customElements;\n}\n\nexport function getCustomElements() {\n  return global.__STORYBOOK_CUSTOM_ELEMENTS__ || global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__;\n}\n","import type { NamedOrDefaultProjectAnnotations, NormalizedProjectAnnotations } from 'storybook/internal/types';\n\nimport {\n  setProjectAnnotations as originalSetProjectAnnotations,\n  setDefaultProjectAnnotations,\n} from 'storybook/preview-api';\n\nimport * as stencilAnnotations from './entry-preview';\nimport type { StencilRenderer } from './types';\n\n/**\n * Function that sets the globalConfig of your storybook. The global config is the preview module of\n * your .storybook folder.\n *\n * It should be run a single time, so that your global config (e.g. decorators) is applied to your\n * stories when using `composeStories` or `composeStory`.\n *\n * Example:\n *\n * ```jsx\n * // setup-file.js\n * import { setProjectAnnotations } from '@storybook/web-components';\n * import projectAnnotations from './.storybook/preview';\n *\n * setProjectAnnotations(projectAnnotations);\n * ```\n *\n * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')\n */\nexport function setProjectAnnotations(\n  projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[],\n): NormalizedProjectAnnotations<StencilRenderer<unknown>> {\n  setDefaultProjectAnnotations(stencilAnnotations);\n  return originalSetProjectAnnotations(projectAnnotations) as NormalizedProjectAnnotations<StencilRenderer<unknown>>;\n}\n"],"mappings":";;;;;;AAGA,SAAgB,iBAAiBA,SAAiB;AAChD,MAAK,QACH,QAAO;AAET,YAAW,YAAY,SACrB,QAAO;AAET,OAAM,IAAI,MAAM;AACjB;AAED,SAAgB,gBAAgBC,gBAA0B;AACxD,MAAK,eACH,QAAO;AAGT,KAAI,eAAe,cAAc,MAAM,QAAQ,eAAe,WAAW,CACvE,QAAO;AAGT,OAAM,IAAI,OAAO;AAClB;;AAGD,SAAgB,kBAAkBC,gBAAqB;AACrD,2BAAO,gCAAgC;AACxC;AAED,SAAgB,0BAA0BA,gBAAqB;AAC7D,2BAAO,yCAAyC;AACjD;AAED,SAAgB,oBAAoB;AAClC,QAAOC,0BAAO,iCAAiCA,0BAAO;AACvD;;;;;;;;;;;;;;;;;;;;;;;ACPD,SAAgB,sBACdC,oBACwD;AACxD,yDAA6BC,4CAAmB;AAChD,QAAO,iDAA8B,mBAAmB;AACzD"}
+{"version":3,"file":"src-C4ce9Ps1.cjs","names":["tagName: string","customElements: JsonDocs","customElements: any","global","projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]","stencilAnnotations"],"sources":["../src/framework-api.ts","../src/portable-stories.tsx"],"sourcesContent":["import { global } from '@storybook/global';\nimport type { JsonDocs } from '@stencil/core/internal';\n\nexport function isValidComponent(tagName: string) {\n  if (!tagName) {\n    return false;\n  }\n  if (typeof tagName === 'string') {\n    return true;\n  }\n  throw new Error('Provided component needs to be a string. e.g. component: \"my-element\"');\n}\n\nexport function isValidMetaData(customElements: JsonDocs) {\n  if (!customElements) {\n    return false;\n  }\n\n  if (customElements.components && Array.isArray(customElements.components)) {\n    return true;\n  }\n  \n  throw new Error(`You need to setup valid meta data in your stencil.config.js via docs-json output target.`);\n}\n\n/** @param customElements `any` for now as spec is not super stable yet */\nexport function setCustomElements(customElements: any) {\n  global.__STORYBOOK_CUSTOM_ELEMENTS__ = customElements;\n}\n\nexport function setCustomElementsManifest(customElements: any) {\n  global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__ = customElements;\n}\n\nexport function getCustomElements() {\n  return global.__STORYBOOK_CUSTOM_ELEMENTS__ || global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__;\n}\n","import type { NamedOrDefaultProjectAnnotations, NormalizedProjectAnnotations } from 'storybook/internal/types';\n\nimport {\n  setProjectAnnotations as originalSetProjectAnnotations,\n  setDefaultProjectAnnotations,\n} from 'storybook/preview-api';\n\nimport * as stencilAnnotations from './entry-preview';\nimport type { StencilRenderer } from './types';\n\n/**\n * Function that sets the globalConfig of your storybook. The global config is the preview module of\n * your .storybook folder.\n *\n * It should be run a single time, so that your global config (e.g. decorators) is applied to your\n * stories when using `composeStories` or `composeStory`.\n *\n * Example:\n *\n * ```jsx\n * // setup-file.js\n * import { setProjectAnnotations } from '@storybook/web-components';\n * import projectAnnotations from './.storybook/preview';\n *\n * setProjectAnnotations(projectAnnotations);\n * ```\n *\n * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')\n */\nexport function setProjectAnnotations(\n  projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[],\n): NormalizedProjectAnnotations<StencilRenderer<unknown>> {\n  setDefaultProjectAnnotations(stencilAnnotations);\n  return originalSetProjectAnnotations(projectAnnotations) as NormalizedProjectAnnotations<StencilRenderer<unknown>>;\n}\n"],"mappings":";;;;;;AAGA,SAAgB,iBAAiBA,SAAiB;AAChD,MAAK,QACH,QAAO;AAET,YAAW,YAAY,SACrB,QAAO;AAET,OAAM,IAAI,MAAM;AACjB;AAED,SAAgB,gBAAgBC,gBAA0B;AACxD,MAAK,eACH,QAAO;AAGT,KAAI,eAAe,cAAc,MAAM,QAAQ,eAAe,WAAW,CACvE,QAAO;AAGT,OAAM,IAAI,OAAO;AAClB;;AAGD,SAAgB,kBAAkBC,gBAAqB;AACrD,2BAAO,gCAAgC;AACxC;AAED,SAAgB,0BAA0BA,gBAAqB;AAC7D,2BAAO,yCAAyC;AACjD;AAED,SAAgB,oBAAoB;AAClC,QAAOC,0BAAO,iCAAiCA,0BAAO;AACvD;;;;;;;;;;;;;;;;;;;;;;;ACPD,SAAgB,sBACdC,oBACwD;AACxD,yDAA6BC,4CAAmB;AAChD,QAAO,iDAA8B,mBAAmB;AACzD"}

package/dist/{src-BBcTbcCa.js → src-DWOWXEPY.js}

@@ -1,4 +1,4 @@
-import { entry_preview_exports } from "./entry-preview-C1JSJAGq.js";
+import { entry_preview_exports } from "./entry-preview-Oaye2Q3u.js";
 import { global } from "@storybook/global";
 import { setDefaultProjectAnnotations, setProjectAnnotations } from "storybook/preview-api";
 
@@ -52,4 +52,4 @@ function setProjectAnnotations$1(projectAnnotations) {
 
 //#endregion
 export { getCustomElements, isValidComponent, isValidMetaData, setCustomElements, setCustomElementsManifest, setProjectAnnotations$1 as setProjectAnnotations };
-//# sourceMappingURL=src-BBcTbcCa.js.map
+//# sourceMappingURL=src-DWOWXEPY.js.map

package/dist/{src-BBcTbcCa.js.map → src-DWOWXEPY.js.map}

@@ -1 +1 @@
-{"version":3,"file":"src-BBcTbcCa.js","names":["tagName: string","customElements: JsonDocs","customElements: any","setProjectAnnotations","projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]","stencilAnnotations"],"sources":["../src/framework-api.ts","../src/portable-stories.tsx"],"sourcesContent":["import { global } from '@storybook/global';\nimport type { JsonDocs } from '@stencil/core/internal';\n\nexport function isValidComponent(tagName: string) {\n  if (!tagName) {\n    return false;\n  }\n  if (typeof tagName === 'string') {\n    return true;\n  }\n  throw new Error('Provided component needs to be a string. e.g. component: \"my-element\"');\n}\n\nexport function isValidMetaData(customElements: JsonDocs) {\n  if (!customElements) {\n    return false;\n  }\n\n  if (customElements.components && Array.isArray(customElements.components)) {\n    return true;\n  }\n  \n  throw new Error(`You need to setup valid meta data in your stencil.config.js via docs-json output target.`);\n}\n\n/** @param customElements `any` for now as spec is not super stable yet */\nexport function setCustomElements(customElements: any) {\n  global.__STORYBOOK_CUSTOM_ELEMENTS__ = customElements;\n}\n\nexport function setCustomElementsManifest(customElements: any) {\n  global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__ = customElements;\n}\n\nexport function getCustomElements() {\n  return global.__STORYBOOK_CUSTOM_ELEMENTS__ || global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__;\n}\n","import type { NamedOrDefaultProjectAnnotations, NormalizedProjectAnnotations } from 'storybook/internal/types';\n\nimport {\n  setProjectAnnotations as originalSetProjectAnnotations,\n  setDefaultProjectAnnotations,\n} from 'storybook/preview-api';\n\nimport * as stencilAnnotations from './entry-preview';\nimport type { StencilRenderer } from './types';\n\n/**\n * Function that sets the globalConfig of your storybook. The global config is the preview module of\n * your .storybook folder.\n *\n * It should be run a single time, so that your global config (e.g. decorators) is applied to your\n * stories when using `composeStories` or `composeStory`.\n *\n * Example:\n *\n * ```jsx\n * // setup-file.js\n * import { setProjectAnnotations } from '@storybook/web-components';\n * import projectAnnotations from './.storybook/preview';\n *\n * setProjectAnnotations(projectAnnotations);\n * ```\n *\n * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')\n */\nexport function setProjectAnnotations(\n  projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[],\n): NormalizedProjectAnnotations<StencilRenderer<unknown>> {\n  setDefaultProjectAnnotations(stencilAnnotations);\n  return originalSetProjectAnnotations(projectAnnotations) as NormalizedProjectAnnotations<StencilRenderer<unknown>>;\n}\n"],"mappings":";;;;;AAGA,SAAgB,iBAAiBA,SAAiB;AAChD,MAAK,QACH,QAAO;AAET,YAAW,YAAY,SACrB,QAAO;AAET,OAAM,IAAI,MAAM;AACjB;AAED,SAAgB,gBAAgBC,gBAA0B;AACxD,MAAK,eACH,QAAO;AAGT,KAAI,eAAe,cAAc,MAAM,QAAQ,eAAe,WAAW,CACvE,QAAO;AAGT,OAAM,IAAI,OAAO;AAClB;;AAGD,SAAgB,kBAAkBC,gBAAqB;AACrD,QAAO,gCAAgC;AACxC;AAED,SAAgB,0BAA0BA,gBAAqB;AAC7D,QAAO,yCAAyC;AACjD;AAED,SAAgB,oBAAoB;AAClC,QAAO,OAAO,iCAAiC,OAAO;AACvD;;;;;;;;;;;;;;;;;;;;;;;ACPD,SAAgBC,wBACdC,oBACwD;AACxD,8BAA6BC,sBAAmB;AAChD,QAAO,sBAA8B,mBAAmB;AACzD"}
+{"version":3,"file":"src-DWOWXEPY.js","names":["tagName: string","customElements: JsonDocs","customElements: any","setProjectAnnotations","projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]","stencilAnnotations"],"sources":["../src/framework-api.ts","../src/portable-stories.tsx"],"sourcesContent":["import { global } from '@storybook/global';\nimport type { JsonDocs } from '@stencil/core/internal';\n\nexport function isValidComponent(tagName: string) {\n  if (!tagName) {\n    return false;\n  }\n  if (typeof tagName === 'string') {\n    return true;\n  }\n  throw new Error('Provided component needs to be a string. e.g. component: \"my-element\"');\n}\n\nexport function isValidMetaData(customElements: JsonDocs) {\n  if (!customElements) {\n    return false;\n  }\n\n  if (customElements.components && Array.isArray(customElements.components)) {\n    return true;\n  }\n  \n  throw new Error(`You need to setup valid meta data in your stencil.config.js via docs-json output target.`);\n}\n\n/** @param customElements `any` for now as spec is not super stable yet */\nexport function setCustomElements(customElements: any) {\n  global.__STORYBOOK_CUSTOM_ELEMENTS__ = customElements;\n}\n\nexport function setCustomElementsManifest(customElements: any) {\n  global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__ = customElements;\n}\n\nexport function getCustomElements() {\n  return global.__STORYBOOK_CUSTOM_ELEMENTS__ || global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__;\n}\n","import type { NamedOrDefaultProjectAnnotations, NormalizedProjectAnnotations } from 'storybook/internal/types';\n\nimport {\n  setProjectAnnotations as originalSetProjectAnnotations,\n  setDefaultProjectAnnotations,\n} from 'storybook/preview-api';\n\nimport * as stencilAnnotations from './entry-preview';\nimport type { StencilRenderer } from './types';\n\n/**\n * Function that sets the globalConfig of your storybook. The global config is the preview module of\n * your .storybook folder.\n *\n * It should be run a single time, so that your global config (e.g. decorators) is applied to your\n * stories when using `composeStories` or `composeStory`.\n *\n * Example:\n *\n * ```jsx\n * // setup-file.js\n * import { setProjectAnnotations } from '@storybook/web-components';\n * import projectAnnotations from './.storybook/preview';\n *\n * setProjectAnnotations(projectAnnotations);\n * ```\n *\n * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')\n */\nexport function setProjectAnnotations(\n  projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[],\n): NormalizedProjectAnnotations<StencilRenderer<unknown>> {\n  setDefaultProjectAnnotations(stencilAnnotations);\n  return originalSetProjectAnnotations(projectAnnotations) as NormalizedProjectAnnotations<StencilRenderer<unknown>>;\n}\n"],"mappings":";;;;;AAGA,SAAgB,iBAAiBA,SAAiB;AAChD,MAAK,QACH,QAAO;AAET,YAAW,YAAY,SACrB,QAAO;AAET,OAAM,IAAI,MAAM;AACjB;AAED,SAAgB,gBAAgBC,gBAA0B;AACxD,MAAK,eACH,QAAO;AAGT,KAAI,eAAe,cAAc,MAAM,QAAQ,eAAe,WAAW,CACvE,QAAO;AAGT,OAAM,IAAI,OAAO;AAClB;;AAGD,SAAgB,kBAAkBC,gBAAqB;AACrD,QAAO,gCAAgC;AACxC;AAED,SAAgB,0BAA0BA,gBAAqB;AAC7D,QAAO,yCAAyC;AACjD;AAED,SAAgB,oBAAoB;AAClC,QAAO,OAAO,iCAAiC,OAAO;AACvD;;;;;;;;;;;;;;;;;;;;;;;ACPD,SAAgBC,wBACdC,oBACwD;AACxD,8BAA6BC,sBAAmB;AAChD,QAAO,sBAA8B,mBAAmB;AACzD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/storybook-plugin",
-  "version": "0.5.9",
+  "version": "0.7.0",
   "description": "Storybook plugin for Stencil",
   "license": "MIT",
   "homepage": "https://github.com/stenciljs/storybook",
@@ -64,17 +64,16 @@
     "build": "tsdown"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^9.0.8",
-    "@storybook/builder-vite": "^9.0.8",
+    "@stencil-community/unplugin-stencil": "^0.5.2",
+    "@storybook/builder-vite": "^10.0.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/html": "^9.0.8",
+    "@storybook/html": "^10.0.0",
     "preact-render-to-string": "^6.5.13",
-    "react-docgen-typescript": "^2.4.0",
-    "unplugin-stencil": "^0.4.1"
+    "react-docgen-typescript": "^2.4.0"
   },
   "peerDependencies": {
     "@stencil/core": "^4.30.0",
-    "storybook": "^9.0.5 || ^10.0.0"
+    "storybook": "^10.0.0"
   },
   "devDependencies": {
     "@stencil/core": "^4.33.1",

package/preset.js

@@ -1,2 +1,2 @@
 // This file seems to only be necessary for Windows
-export * from './dist/preset.js';
+export { core, viteFinal, previewAnnotations } from './dist/preset.cjs';

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

@@ -1 +0,0 @@
-{"version":3,"file":"entry-preview-C0ipNwpw.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, Parameters } from 'storybook/internal/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;;;;;;;;;;;ACjED,MAAaC,aAAyB,EAAE,UAAU,UAAW;AAI7D,MAAaC,oBAAwC,CAACC,6CAAgB"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"entry-preview-C1JSJAGq.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, Parameters } from 'storybook/internal/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;;;;;;;;;;;ACjED,MAAaC,aAAyB,EAAE,UAAU,UAAW;AAI7D,MAAaC,oBAAwC,CAAC,eAAgB"}