@storybook/web-components 7.0.0-alpha.47 → 7.0.0-alpha.49

package/dist/chunk-QXWJMXH7.mjs

@@ -0,0 +1,5 @@
+import T from"global";import c from"global";var{window:u}=c;u.STORYBOOK_ENV="web-components";import{start as S}from"@storybook/core-client";import y from"global";import{dedent as w}from"ts-dedent";import{render as _}from"lit-html";import{isTemplateResult as C}from"lit-html/directive-helpers.js";import{simulatePageLoad as a,simulateDOMContentLoaded as O}from"@storybook/preview-web";var{Node:g}=y,F=(e,n)=>{let{id:i,component:r}=n;if(!r)throw new Error(`Unable to render story ${i} as the component annotation is missing from the default export`);let s=document.createElement(r);return Object.entries(e).forEach(([d,o])=>{s[d]=o}),s};function m({storyFn:e,kind:n,name:i,showMain:r,showError:s,forceRemount:d},o){let t=e();if(r(),C(t)){(d||!o.querySelector('[id="root-inner"]'))&&(o.innerHTML='<div id="root-inner"></div>');let l=o.querySelector('[id="root-inner"]');_(t,l),a(o)}else if(typeof t=="string")o.innerHTML=t,a(o);else if(t instanceof g){if(o.firstChild===t&&!d)return;o.innerHTML="",o.appendChild(t),O()}else s({title:`Expecting an HTML snippet or DOM node from the story: "${i}" of "${n}".`,description:w`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `})}var f="web-components",p=S(m),H=(e,n)=>p.clientApi.storiesOf(e,n).addParameters({framework:f}),K=(...e)=>p.configure(f,...e),U=p.forceReRender,Y=p.clientApi.raw;function v(e){if(!e)return!1;if(typeof e=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function D(e){if(!e)return!1;if(e.tags&&Array.isArray(e.tags)||e.modules&&Array.isArray(e.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
+    See the readme of addon-docs for web components for more details.`)}function P(e){window.__STORYBOOK_CUSTOM_ELEMENTS__=e}function V(e){window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=e}function $(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:A,EventSource:b}=T;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new b("__webpack_hmr").addEventListener("message",function(i){try{let{action:r}=JSON.parse(i.data);r==="built"&&A.location.reload()}catch{}}));export{F as a,m as b,H as c,K as d,U as e,Y as f,v as g,D as h,P as i,V as j,$ as k};

package/dist/config.d.ts

@@ -1,16 +1,16 @@
 import * as lib_docs_tools_dist from 'lib/docs-tools/dist';
 import * as lib_types_dist from 'lib/types/dist';
 import { PartialStoryFn, StoryContext, ArgsStoryFn, Store_RenderContext } from '@storybook/types';
-import { W as WebComponentsFramework } from './types-ad9cebe0.js';
+import { W as WebComponentsFramework } from './types-641e5934.js';
 import 'lit-html';
 
 declare function sourceDecorator(storyFn: PartialStoryFn<WebComponentsFramework>, context: StoryContext<WebComponentsFramework>): WebComponentsFramework['storyResult'];
 
 declare const decorators: (typeof sourceDecorator)[];
-declare const argTypesEnhancers: (<TFramework extends lib_types_dist.AnyFramework>(context: lib_types_dist.StoryContextForEnhancers<TFramework, lib_types_dist.Args>) => lib_types_dist.StrictArgTypes<lib_types_dist.Args>)[];
+declare const argTypesEnhancers: (<TFramework extends lib_types_dist.Framework>(context: lib_types_dist.StoryContextForEnhancers<TFramework, lib_types_dist.Args>) => lib_types_dist.StrictArgTypes<lib_types_dist.Args>)[];
 
 declare const render: ArgsStoryFn<WebComponentsFramework>;
-declare function renderToDOM({ storyFn, kind, name, showMain, showError, forceRemount, }: Store_RenderContext<WebComponentsFramework>, domElement: Element): void;
+declare function renderToCanvas({ storyFn, kind, name, showMain, showError, forceRemount, }: Store_RenderContext<WebComponentsFramework>, canvasElement: WebComponentsFramework['canvasElement']): void;
 
 declare const parameters: {
     docs: {
@@ -27,4 +27,4 @@ declare const parameters: {
     framework: "web-components";
 };
 
-export { argTypesEnhancers, decorators, parameters, render, renderToDOM };
+export { argTypesEnhancers, decorators, parameters, render, renderToCanvas };

package/dist/config.js

@@ -1,5 +1,5 @@
-var V=Object.create;var f=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var B=(e,r)=>{for(var t in r)f(e,t,{get:r[t],enumerable:!0})},S=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of $(r))!K.call(e,n)&&n!==t&&f(e,n,{get:()=>r[n],enumerable:!(o=Y(r,n))||o.enumerable});return e};var y=(e,r,t)=>(t=e!=null?V(H(e)):{},S(r||!e||!e.__esModule?f(t,"default",{value:e,enumerable:!0}):t,e)),j=e=>S(f({},"__esModule",{value:!0}),e);var se={};B(se,{argTypesEnhancers:()=>N,decorators:()=>P,parameters:()=>ne,render:()=>E,renderToDOM:()=>c});module.exports=j(se);var l=require("@storybook/docs-tools");var w=require("@storybook/client-logger");var R=y(require("global"));var A=y(require("global")),{window:q}=A.default;q.STORYBOOK_ENV="web-components";var O=require("@storybook/core-client");var _=y(require("global")),b=require("ts-dedent"),M=require("lit-html"),h=require("lit-html/directive-helpers.js"),m=require("@storybook/preview-web"),{Node:J}=_.default,E=(e,r)=>{let{id:t,component:o}=r;if(!o)throw new Error(`Unable to render story ${t} as the component annotation is missing from the default export`);let n=document.createElement(o);return Object.entries(e).forEach(([a,s])=>{n[a]=s}),n};function c({storyFn:e,kind:r,name:t,showMain:o,showError:n,forceRemount:a},s){let i=e();if(o(),(0,h.isTemplateResult)(i)){(a||!s.querySelector('[id="root-inner"]'))&&(s.innerHTML='<div id="root-inner"></div>');let U=s.querySelector('[id="root-inner"]');(0,M.render)(i,U),(0,m.simulatePageLoad)(s)}else if(typeof i=="string")s.innerHTML=i,(0,m.simulatePageLoad)(s);else if(i instanceof J){if(s.firstChild===i&&!a)return;s.innerHTML="",s.appendChild(i),(0,m.simulateDOMContentLoaded)()}else n({title:`Expecting an HTML snippet or DOM node from the story: "${t}" of "${r}".`,description:b.dedent`
+var V=Object.create;var f=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var B=(e,r)=>{for(var t in r)f(e,t,{get:r[t],enumerable:!0})},S=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of $(r))!K.call(e,n)&&n!==t&&f(e,n,{get:()=>r[n],enumerable:!(o=Y(r,n))||o.enumerable});return e};var y=(e,r,t)=>(t=e!=null?V(H(e)):{},S(r||!e||!e.__esModule?f(t,"default",{value:e,enumerable:!0}):t,e)),j=e=>S(f({},"__esModule",{value:!0}),e);var se={};B(se,{argTypesEnhancers:()=>N,decorators:()=>v,parameters:()=>ne,render:()=>M,renderToCanvas:()=>c});module.exports=j(se);var l=require("@storybook/docs-tools");var w=require("@storybook/client-logger");var R=y(require("global"));var A=y(require("global")),{window:q}=A.default;q.STORYBOOK_ENV="web-components";var O=require("@storybook/core-client");var _=y(require("global")),b=require("ts-dedent"),h=require("lit-html"),E=require("lit-html/directive-helpers.js"),m=require("@storybook/preview-web"),{Node:J}=_.default,M=(e,r)=>{let{id:t,component:o}=r;if(!o)throw new Error(`Unable to render story ${t} as the component annotation is missing from the default export`);let n=document.createElement(o);return Object.entries(e).forEach(([a,s])=>{n[a]=s}),n};function c({storyFn:e,kind:r,name:t,showMain:o,showError:n,forceRemount:a},s){let i=e();if(o(),(0,E.isTemplateResult)(i)){(a||!s.querySelector('[id="root-inner"]'))&&(s.innerHTML='<div id="root-inner"></div>');let U=s.querySelector('[id="root-inner"]');(0,h.render)(i,U),(0,m.simulatePageLoad)(s)}else if(typeof i=="string")s.innerHTML=i,(0,m.simulatePageLoad)(s);else if(i instanceof J){if(s.firstChild===i&&!a)return;s.innerHTML="",s.appendChild(i),(0,m.simulateDOMContentLoaded)()}else n({title:`Expecting an HTML snippet or DOM node from the story: "${t}" of "${r}".`,description:b.dedent`
         Did you forget to return the HTML snippet from the story?
         Use "() => <your snippet or node>" or when defining the story.
-      `})}var D=(0,O.start)(c);var me=D.forceReRender,de=D.clientApi.raw;function g(e){if(!e)return!1;if(typeof e=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function C(e){if(!e)return!1;if(e.tags&&Array.isArray(e.tags)||e.modules&&Array.isArray(e.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
-    See the readme of addon-docs for web components for more details.`)}function T(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:X,EventSource:Z}=R.default;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new Z("__webpack_hmr").addEventListener("message",function(t){try{let{action:o}=JSON.parse(t.data);o==="built"&&X.location.reload()}catch{}}));function k(e,r){var o,n;let t=r==="properties"?{name:((o=e.type)==null?void 0:o.text)||e.type}:{name:"void"};return{name:e.name,required:!1,description:e.description,type:t,table:{category:r,type:{summary:((n=e.type)==null?void 0:n.text)||e.type},defaultValue:{summary:e.default!==void 0?e.default:e.defaultValue}}}}function z(e){let r=e.name.replace(/(-|_|:|\.|\s)+(.)?/g,(t,o,n)=>n?n.toUpperCase():"").replace(/^([A-Z])/,t=>t.toLowerCase());return r=`on${r.charAt(0).toUpperCase()+r.substr(1)}`,[{name:r,action:{name:e.name},table:{disable:!0}},k(e,"events")]}function p(e,r){return e&&e.filter(t=>t&&t.name).reduce((t,o)=>{if(o.kind==="method")return t;switch(r){case"events":z(o).forEach(n=>{t[n.name]=n});break;default:t[o.name]=k(o,r);break}return t},{})}var G=(e,r)=>{if(!g(e)||!C(r))return null;let t=r.tags.find(o=>o.name.toUpperCase()===e.toUpperCase());return t||w.logger.warn(`Component not found in custom-elements.json: ${e}`),t},Q=(e,r)=>{var o;if(!g(e)||!C(r))return null;let t;return(o=r==null?void 0:r.modules)==null||o.forEach(n=>{var a;(a=n==null?void 0:n.declarations)==null||a.forEach(s=>{s.tagName===e&&(t=s)})}),t||w.logger.warn(`Component not found in custom-elements.json: ${e}`),t},I=(e,r)=>(r==null?void 0:r.version)==="experimental"?G(e,r):Q(e,r),ee=(e,r)=>{let t=I(e,r);return t&&{...p(t.attributes,"attributes"),...p(t.members,"properties"),...p(t.properties,"properties"),...p(t.events,"events"),...p(t.slots,"slots"),...p(t.cssProperties,"css custom properties"),...p(t.cssParts,"css shadow parts")}},x=e=>{let r=T();return ee(e,r)},F=e=>{let r=I(e,T());return r&&r.description};var v=require("lit-html"),u=require("@storybook/addons"),d=require("@storybook/docs-tools"),re=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function te(e){var o;let r=(o=e==null?void 0:e.parameters.docs)==null?void 0:o.source,t=e==null?void 0:e.parameters.__isArgsStory;return(r==null?void 0:r.type)===d.SourceType.DYNAMIC?!1:!t||(r==null?void 0:r.code)||(r==null?void 0:r.type)===d.SourceType.CODE}function oe(e,r){let{transformSource:t}=r.parameters.docs??{};return typeof t!="function"?e:t(e,r)}function L(e,r){var n,a;let t=(a=(n=r==null?void 0:r.parameters.docs)==null?void 0:n.source)!=null&&a.excludeDecorators?r.originalStoryFn(r.args,r):e(),o;if((0,u.useEffect)(()=>{o&&u.addons.getChannel().emit(d.SNIPPET_RENDERED,r.id,o)}),!te(r)){let s=window.document.createElement("div");(0,v.render)(t,s),o=oe(s.innerHTML.replace(re,""),r)}return t}var P=[L],W={docs:{extractArgTypes:x,extractComponentDescription:F,inlineStories:!0,source:{type:l.SourceType.DYNAMIC,language:"html"}}},N=[l.enhanceArgTypes];var ne={framework:"web-components",...W};0&&(module.exports={argTypesEnhancers,decorators,parameters,render,renderToDOM});
+      `})}var k=(0,O.start)(c);var me=k.forceReRender,de=k.clientApi.raw;function g(e){if(!e)return!1;if(typeof e=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function C(e){if(!e)return!1;if(e.tags&&Array.isArray(e.tags)||e.modules&&Array.isArray(e.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
+    See the readme of addon-docs for web components for more details.`)}function T(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:X,EventSource:Z}=R.default;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new Z("__webpack_hmr").addEventListener("message",function(t){try{let{action:o}=JSON.parse(t.data);o==="built"&&X.location.reload()}catch{}}));function I(e,r){var o,n;let t=r==="properties"?{name:((o=e.type)==null?void 0:o.text)||e.type}:{name:"void"};return{name:e.name,required:!1,description:e.description,type:t,table:{category:r,type:{summary:((n=e.type)==null?void 0:n.text)||e.type},defaultValue:{summary:e.default!==void 0?e.default:e.defaultValue}}}}function z(e){let r=e.name.replace(/(-|_|:|\.|\s)+(.)?/g,(t,o,n)=>n?n.toUpperCase():"").replace(/^([A-Z])/,t=>t.toLowerCase());return r=`on${r.charAt(0).toUpperCase()+r.substr(1)}`,[{name:r,action:{name:e.name},table:{disable:!0}},I(e,"events")]}function p(e,r){return e&&e.filter(t=>t&&t.name).reduce((t,o)=>{if(o.kind==="method")return t;switch(r){case"events":z(o).forEach(n=>{t[n.name]=n});break;default:t[o.name]=I(o,r);break}return t},{})}var G=(e,r)=>{if(!g(e)||!C(r))return null;let t=r.tags.find(o=>o.name.toUpperCase()===e.toUpperCase());return t||w.logger.warn(`Component not found in custom-elements.json: ${e}`),t},Q=(e,r)=>{var o;if(!g(e)||!C(r))return null;let t;return(o=r==null?void 0:r.modules)==null||o.forEach(n=>{var a;(a=n==null?void 0:n.declarations)==null||a.forEach(s=>{s.tagName===e&&(t=s)})}),t||w.logger.warn(`Component not found in custom-elements.json: ${e}`),t},x=(e,r)=>(r==null?void 0:r.version)==="experimental"?G(e,r):Q(e,r),ee=(e,r)=>{let t=x(e,r);return t&&{...p(t.attributes,"attributes"),...p(t.members,"properties"),...p(t.properties,"properties"),...p(t.events,"events"),...p(t.slots,"slots"),...p(t.cssProperties,"css custom properties"),...p(t.cssParts,"css shadow parts")}},D=e=>{let r=T();return ee(e,r)},F=e=>{let r=x(e,T());return r&&r.description};var L=require("lit-html"),u=require("@storybook/addons"),d=require("@storybook/docs-tools"),re=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function te(e){var o;let r=(o=e==null?void 0:e.parameters.docs)==null?void 0:o.source,t=e==null?void 0:e.parameters.__isArgsStory;return(r==null?void 0:r.type)===d.SourceType.DYNAMIC?!1:!t||(r==null?void 0:r.code)||(r==null?void 0:r.type)===d.SourceType.CODE}function oe(e,r){let{transformSource:t}=r.parameters.docs??{};return typeof t!="function"?e:t(e,r)}function P(e,r){var n,a;let t=(a=(n=r==null?void 0:r.parameters.docs)==null?void 0:n.source)!=null&&a.excludeDecorators?r.originalStoryFn(r.args,r):e(),o;if((0,u.useEffect)(()=>{o&&u.addons.getChannel().emit(d.SNIPPET_RENDERED,r.id,o)}),!te(r)){let s=window.document.createElement("div");(0,L.render)(t,s),o=oe(s.innerHTML.replace(re,""),r)}return t}var v=[P],W={docs:{extractArgTypes:D,extractComponentDescription:F,inlineStories:!0,source:{type:l.SourceType.DYNAMIC,language:"html"}}},N=[l.enhanceArgTypes];var ne={framework:"web-components",...W};0&&(module.exports={argTypesEnhancers,decorators,parameters,render,renderToCanvas});

package/dist/config.mjs

@@ -1 +1 @@
-import{a as T,b as I,g as a,h as p,k as i}from"./chunk-ODE5LYZC.mjs";import{SourceType as _,enhanceArgTypes as M}from"@storybook/docs-tools";import{logger as c}from"@storybook/client-logger";function u(t,e){let r=e==="properties"?{name:t.type?.text||t.type}:{name:"void"};return{name:t.name,required:!1,description:t.description,type:r,table:{category:e,type:{summary:t.type?.text||t.type},defaultValue:{summary:t.default!==void 0?t.default:t.defaultValue}}}}function S(t){let e=t.name.replace(/(-|_|:|\.|\s)+(.)?/g,(r,o,s)=>s?s.toUpperCase():"").replace(/^([A-Z])/,r=>r.toLowerCase());return e=`on${e.charAt(0).toUpperCase()+e.substr(1)}`,[{name:e,action:{name:t.name},table:{disable:!0}},u(t,"events")]}function n(t,e){return t&&t.filter(r=>r&&r.name).reduce((r,o)=>{if(o.kind==="method")return r;switch(e){case"events":S(o).forEach(s=>{r[s.name]=s});break;default:r[o.name]=u(o,e);break}return r},{})}var b=(t,e)=>{if(!a(t)||!p(e))return null;let r=e.tags.find(o=>o.name.toUpperCase()===t.toUpperCase());return r||c.warn(`Component not found in custom-elements.json: ${t}`),r},A=(t,e)=>{if(!a(t)||!p(e))return null;let r;return e?.modules?.forEach(o=>{o?.declarations?.forEach(s=>{s.tagName===t&&(r=s)})}),r||c.warn(`Component not found in custom-elements.json: ${t}`),r},l=(t,e)=>e?.version==="experimental"?b(t,e):A(t,e),D=(t,e)=>{let r=l(t,e);return r&&{...n(r.attributes,"attributes"),...n(r.members,"properties"),...n(r.properties,"properties"),...n(r.events,"events"),...n(r.slots,"slots"),...n(r.cssProperties,"css custom properties"),...n(r.cssParts,"css shadow parts")}},f=t=>{let e=i();return D(t,e)},g=t=>{let e=l(t,i());return e&&e.description};import{render as E}from"lit-html";import{addons as P,useEffect as w}from"@storybook/addons";import{SNIPPET_RENDERED as x,SourceType as y}from"@storybook/docs-tools";var k=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function h(t){let e=t?.parameters.docs?.source,r=t?.parameters.__isArgsStory;return e?.type===y.DYNAMIC?!1:!r||e?.code||e?.type===y.CODE}function F(t,e){let{transformSource:r}=e.parameters.docs??{};return typeof r!="function"?t:r(t,e)}function d(t,e){let r=e?.parameters.docs?.source?.excludeDecorators?e.originalStoryFn(e.args,e):t(),o;if(w(()=>{o&&P.getChannel().emit(x,e.id,o)}),!h(e)){let s=window.document.createElement("div");E(r,s),o=F(s.innerHTML.replace(k,""),e)}return r}var v=[d],C={docs:{extractArgTypes:f,extractComponentDescription:g,inlineStories:!0,source:{type:_.DYNAMIC,language:"html"}}},W=[M];var Z={framework:"web-components",...C};export{W as argTypesEnhancers,v as decorators,Z as parameters,T as render,I as renderToDOM};
+import{a as C,b as T,g as a,h as p,k as i}from"./chunk-QXWJMXH7.mjs";import{SourceType as F,enhanceArgTypes as _}from"@storybook/docs-tools";import{logger as m}from"@storybook/client-logger";function c(t,e){let r=e==="properties"?{name:t.type?.text||t.type}:{name:"void"};return{name:t.name,required:!1,description:t.description,type:r,table:{category:e,type:{summary:t.type?.text||t.type},defaultValue:{summary:t.default!==void 0?t.default:t.defaultValue}}}}function I(t){let e=t.name.replace(/(-|_|:|\.|\s)+(.)?/g,(r,o,s)=>s?s.toUpperCase():"").replace(/^([A-Z])/,r=>r.toLowerCase());return e=`on${e.charAt(0).toUpperCase()+e.substr(1)}`,[{name:e,action:{name:t.name},table:{disable:!0}},c(t,"events")]}function n(t,e){return t&&t.filter(r=>r&&r.name).reduce((r,o)=>{if(o.kind==="method")return r;switch(e){case"events":I(o).forEach(s=>{r[s.name]=s});break;default:r[o.name]=c(o,e);break}return r},{})}var S=(t,e)=>{if(!a(t)||!p(e))return null;let r=e.tags.find(o=>o.name.toUpperCase()===t.toUpperCase());return r||m.warn(`Component not found in custom-elements.json: ${t}`),r},b=(t,e)=>{if(!a(t)||!p(e))return null;let r;return e?.modules?.forEach(o=>{o?.declarations?.forEach(s=>{s.tagName===t&&(r=s)})}),r||m.warn(`Component not found in custom-elements.json: ${t}`),r},u=(t,e)=>e?.version==="experimental"?S(t,e):b(t,e),A=(t,e)=>{let r=u(t,e);return r&&{...n(r.attributes,"attributes"),...n(r.members,"properties"),...n(r.properties,"properties"),...n(r.events,"events"),...n(r.slots,"slots"),...n(r.cssProperties,"css custom properties"),...n(r.cssParts,"css shadow parts")}},l=t=>{let e=i();return A(t,e)},f=t=>{let e=u(t,i());return e&&e.description};import{render as E}from"lit-html";import{addons as D,useEffect as P}from"@storybook/addons";import{SNIPPET_RENDERED as w,SourceType as g}from"@storybook/docs-tools";var x=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function k(t){let e=t?.parameters.docs?.source,r=t?.parameters.__isArgsStory;return e?.type===g.DYNAMIC?!1:!r||e?.code||e?.type===g.CODE}function h(t,e){let{transformSource:r}=e.parameters.docs??{};return typeof r!="function"?t:r(t,e)}function y(t,e){let r=e?.parameters.docs?.source?.excludeDecorators?e.originalStoryFn(e.args,e):t(),o;if(P(()=>{o&&D.getChannel().emit(w,e.id,o)}),!k(e)){let s=window.document.createElement("div");E(r,s),o=h(s.innerHTML.replace(x,""),e)}return r}var v=[y],d={docs:{extractArgTypes:l,extractComponentDescription:f,inlineStories:!0,source:{type:F.DYNAMIC,language:"html"}}},M=[_];var X={framework:"web-components",...d};export{M as argTypesEnhancers,v as decorators,X as parameters,C as render,T as renderToCanvas};

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations, Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
-import { W as WebComponentsFramework } from './types-ad9cebe0.js';
+import { W as WebComponentsFramework } from './types-641e5934.js';
 import 'lit-html';
 
 /**

package/dist/index.js

@@ -1,5 +1,5 @@
-var M=Object.create;var d=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var x=(e,o)=>{for(var r in o)d(e,r,{get:o[r],enumerable:!0})},l=(e,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of b(o))!R.call(e,i)&&i!==r&&d(e,i,{get:()=>o[i],enumerable:!(n=A(o,i))||n.enumerable});return e};var f=(e,o,r)=>(r=e!=null?M(h(e)):{},l(o||!e||!e.__esModule?d(r,"default",{value:e,enumerable:!0}):r,e)),E=e=>l(d({},"__esModule",{value:!0}),e);var V={};x(V,{configure:()=>v,forceReRender:()=>N,getCustomElements:()=>Y,isValidComponent:()=>D,isValidMetaData:()=>H,raw:()=>W,setCustomElements:()=>K,setCustomElementsManifest:()=>U,storiesOf:()=>k});module.exports=E(V);var S=f(require("global"));var c=f(require("global")),{window:L}=c.default;L.STORYBOOK_ENV="web-components";var C=require("@storybook/core-client");var u=f(require("global")),y=require("ts-dedent"),_=require("lit-html"),w=require("lit-html/directive-helpers.js"),a=require("@storybook/preview-web"),{Node:F}=u.default;function O({storyFn:e,kind:o,name:r,showMain:n,showError:i,forceRemount:m},t){let s=e();if(n(),(0,w.isTemplateResult)(s)){(m||!t.querySelector('[id="root-inner"]'))&&(t.innerHTML='<div id="root-inner"></div>');let T=t.querySelector('[id="root-inner"]');(0,_.render)(s,T),(0,a.simulatePageLoad)(t)}else if(typeof s=="string")t.innerHTML=s,(0,a.simulatePageLoad)(t);else if(s instanceof F){if(t.firstChild===s&&!m)return;t.innerHTML="",t.appendChild(s),(0,a.simulateDOMContentLoaded)()}else i({title:`Expecting an HTML snippet or DOM node from the story: "${r}" of "${o}".`,description:y.dedent`
+var A=Object.create;var p=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var x=(e,o)=>{for(var r in o)p(e,r,{get:o[r],enumerable:!0})},l=(e,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of M(o))!R.call(e,i)&&i!==r&&p(e,i,{get:()=>o[i],enumerable:!(n=b(o,i))||n.enumerable});return e};var m=(e,o,r)=>(r=e!=null?A(h(e)):{},l(o||!e||!e.__esModule?p(r,"default",{value:e,enumerable:!0}):r,e)),E=e=>l(p({},"__esModule",{value:!0}),e);var V={};x(V,{configure:()=>N,forceReRender:()=>W,getCustomElements:()=>v,isValidComponent:()=>K,isValidMetaData:()=>U,raw:()=>H,setCustomElements:()=>Y,setCustomElementsManifest:()=>B,storiesOf:()=>k});module.exports=E(V);var S=m(require("global"));var c=m(require("global")),{window:L}=c.default;L.STORYBOOK_ENV="web-components";var O=require("@storybook/core-client");var u=m(require("global")),y=require("ts-dedent"),w=require("lit-html"),_=require("lit-html/directive-helpers.js"),d=require("@storybook/preview-web"),{Node:F}=u.default;function C({storyFn:e,kind:o,name:r,showMain:n,showError:i,forceRemount:f},t){let s=e();if(n(),(0,_.isTemplateResult)(s)){(f||!t.querySelector('[id="root-inner"]'))&&(t.innerHTML='<div id="root-inner"></div>');let T=t.querySelector('[id="root-inner"]');(0,w.render)(s,T),(0,d.simulatePageLoad)(t)}else if(typeof s=="string")t.innerHTML=s,(0,d.simulatePageLoad)(t);else if(s instanceof F){if(t.firstChild===s&&!f)return;t.innerHTML="",t.appendChild(s),(0,d.simulateDOMContentLoaded)()}else i({title:`Expecting an HTML snippet or DOM node from the story: "${r}" of "${o}".`,description:y.dedent`
         Did you forget to return the HTML snippet from the story?
         Use "() => <your snippet or node>" or when defining the story.
-      `})}var g="web-components",p=(0,C.start)(O),k=(e,o)=>p.clientApi.storiesOf(e,o).addParameters({framework:g}),v=(...e)=>p.configure(g,...e),N=p.forceReRender,W=p.clientApi.raw;function D(e){if(!e)return!1;if(typeof e=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function H(e){if(!e)return!1;if(e.tags&&Array.isArray(e.tags)||e.modules&&Array.isArray(e.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
-    See the readme of addon-docs for web components for more details.`)}function K(e){window.__STORYBOOK_CUSTOM_ELEMENTS__=e}function U(e){window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=e}function Y(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:B,EventSource:P}=S.default;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new P("__webpack_hmr").addEventListener("message",function(r){try{let{action:n}=JSON.parse(r.data);n==="built"&&B.location.reload()}catch{}}));0&&(module.exports={configure,forceReRender,getCustomElements,isValidComponent,isValidMetaData,raw,setCustomElements,setCustomElementsManifest,storiesOf});
+      `})}var g="web-components",a=(0,O.start)(C),k=(e,o)=>a.clientApi.storiesOf(e,o).addParameters({framework:g}),N=(...e)=>a.configure(g,...e),W=a.forceReRender,H=a.clientApi.raw;function K(e){if(!e)return!1;if(typeof e=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function U(e){if(!e)return!1;if(e.tags&&Array.isArray(e.tags)||e.modules&&Array.isArray(e.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
+    See the readme of addon-docs for web components for more details.`)}function Y(e){window.__STORYBOOK_CUSTOM_ELEMENTS__=e}function B(e){window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=e}function v(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:D,EventSource:P}=S.default;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new P("__webpack_hmr").addEventListener("message",function(r){try{let{action:n}=JSON.parse(r.data);n==="built"&&D.location.reload()}catch{}}));0&&(module.exports={configure,forceReRender,getCustomElements,isValidComponent,isValidMetaData,raw,setCustomElements,setCustomElementsManifest,storiesOf});

package/dist/index.mjs

@@ -1 +1 @@
-import{c as a,d as b,e as c,f as d,g as e,h as f,i as g,j as h,k as i}from"./chunk-ODE5LYZC.mjs";export{b as configure,c as forceReRender,i as getCustomElements,e as isValidComponent,f as isValidMetaData,d as raw,g as setCustomElements,h as setCustomElementsManifest,a as storiesOf};
+import{c as a,d as b,e as c,f as d,g as e,h as f,i as g,j as h,k as i}from"./chunk-QXWJMXH7.mjs";export{b as configure,c as forceReRender,i as getCustomElements,e as isValidComponent,f as isValidMetaData,d as raw,g as setCustomElements,h as setCustomElementsManifest,a as storiesOf};

package/dist/{types-ad9cebe0.d.ts → types-641e5934.d.ts}

@@ -1,9 +1,10 @@
+import { WebFramework } from '@storybook/types';
 import { TemplateResult, SVGTemplateResult } from 'lit-html';
 
 declare type StoryFnHtmlReturnType = string | Node | TemplateResult | SVGTemplateResult;
-declare type WebComponentsFramework = {
+interface WebComponentsFramework extends WebFramework {
     component: string;
     storyResult: StoryFnHtmlReturnType;
-};
+}
 
 export { WebComponentsFramework as W };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "7.0.0-alpha.47",
+  "version": "7.0.0-alpha.49",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit-html",
@@ -53,14 +53,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.47",
-    "@storybook/api": "7.0.0-alpha.47",
-    "@storybook/client-logger": "7.0.0-alpha.47",
-    "@storybook/core-client": "7.0.0-alpha.47",
-    "@storybook/docs-tools": "7.0.0-alpha.47",
-    "@storybook/preview-web": "7.0.0-alpha.47",
-    "@storybook/store": "7.0.0-alpha.47",
-    "@storybook/types": "7.0.0-alpha.47",
+    "@storybook/addons": "7.0.0-alpha.49",
+    "@storybook/api": "7.0.0-alpha.49",
+    "@storybook/client-logger": "7.0.0-alpha.49",
+    "@storybook/core-client": "7.0.0-alpha.49",
+    "@storybook/docs-tools": "7.0.0-alpha.49",
+    "@storybook/preview-web": "7.0.0-alpha.49",
+    "@storybook/store": "7.0.0-alpha.49",
+    "@storybook/types": "7.0.0-alpha.49",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -87,5 +87,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "1c706a4a778831e012343c905f86225fa71491a7"
+  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
 }

package/template/cli/js/Button.stories.js

@@ -3,6 +3,8 @@ import { Button } from './Button';
 // More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
 export default {
   title: 'Example/Button',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/web-components/vue/writing-docs/docs-page
+  tags: ['docsPage'],
   // More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
   render: (args) => Button(args),
   // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes

package/template/cli/js/Header.stories.js

@@ -2,6 +2,8 @@ import { Header } from './Header';
 
 export default {
   title: 'Example/Header',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/web-components/vue/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args) => Header(args),
 };
 

package/template/cli/ts/Button.stories.ts

@@ -5,6 +5,8 @@ import { Button } from './Button';
 // More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
 const meta: Meta<ButtonProps> = {
   title: 'Example/Button',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/web-components/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args) => Button(args),
   // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes
   argTypes: {

package/template/cli/ts/Header.stories.ts

@@ -4,6 +4,8 @@ import { Header } from './Header';
 
 const meta: Meta<HeaderProps> = {
   title: 'Example/Header',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/web-components/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args) => Header(args),
 };
 

package/dist/chunk-ODE5LYZC.mjs

@@ -1,5 +0,0 @@
-import O from"global";import y from"global";var{window:u}=y;u.STORYBOOK_ENV="web-components";import{start as C}from"@storybook/core-client";import A from"global";import{dedent as g}from"ts-dedent";import{render as w}from"lit-html";import{isTemplateResult as _}from"lit-html/directive-helpers.js";import{simulatePageLoad as m,simulateDOMContentLoaded as S}from"@storybook/preview-web";var{Node:T}=A,k=(e,n)=>{let{id:i,component:r}=n;if(!r)throw new Error(`Unable to render story ${i} as the component annotation is missing from the default export`);let p=document.createElement(r);return Object.entries(e).forEach(([a,o])=>{p[a]=o}),p};function f({storyFn:e,kind:n,name:i,showMain:r,showError:p,forceRemount:a},o){let t=e();if(r(),_(t)){(a||!o.querySelector('[id="root-inner"]'))&&(o.innerHTML='<div id="root-inner"></div>');let c=o.querySelector('[id="root-inner"]');w(t,c),m(o)}else if(typeof t=="string")o.innerHTML=t,m(o);else if(t instanceof T){if(o.firstChild===t&&!a)return;o.innerHTML="",o.appendChild(t),S()}else p({title:`Expecting an HTML snippet or DOM node from the story: "${i}" of "${n}".`,description:g`
-        Did you forget to return the HTML snippet from the story?
-        Use "() => <your snippet or node>" or when defining the story.
-      `})}var l="web-components",d=C(f),D=(e,n)=>d.clientApi.storiesOf(e,n).addParameters({framework:l}),H=(...e)=>d.configure(l,...e),K=d.forceReRender,U=d.clientApi.raw;function B(e){if(!e)return!1;if(typeof e=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function P(e){if(!e)return!1;if(e.tags&&Array.isArray(e.tags)||e.modules&&Array.isArray(e.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
-    See the readme of addon-docs for web components for more details.`)}function j(e){window.__STORYBOOK_CUSTOM_ELEMENTS__=e}function V(e){window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=e}function $(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:b,EventSource:M}=O;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new M("__webpack_hmr").addEventListener("message",function(i){try{let{action:r}=JSON.parse(i.data);r==="built"&&b.location.reload()}catch{}}));export{k as a,f as b,D as c,H as d,K as e,U as f,B as g,P as h,j as i,V as j,$ as k};