@storybook/web-components 7.0.0-beta.2 → 7.0.0-beta.20

package/dist/chunk-KDRLDMCT.mjs

@@ -0,0 +1,5 @@
+import{global as global4}from"@storybook/global";import{global}from"@storybook/global";var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="web-components";import{start}from"@storybook/preview-api";import{global as global2}from"@storybook/global";import{dedent}from"ts-dedent";import{render as litRender}from"lit-html";import{isTemplateResult}from"lit-html/directive-helpers.js";import{simulatePageLoad,simulateDOMContentLoaded}from"@storybook/preview-api";var{Node}=global2,render=(args,context)=>{let{id,component}=context;if(!component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);let element=document.createElement(component);return Object.entries(args).forEach(([key,val])=>{element[key]=val}),element};function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),isTemplateResult(element)){(forceRemount||!canvasElement.querySelector('[id="root-inner"]'))&&(canvasElement.innerHTML='<div id="root-inner"></div>');let renderTo=canvasElement.querySelector('[id="root-inner"]');litRender(element,renderTo),simulatePageLoad(canvasElement)}else if(typeof element=="string")canvasElement.innerHTML=element,simulatePageLoad(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&!forceRemount)return;canvasElement.innerHTML="",canvasElement.appendChild(element),simulateDOMContentLoaded()}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:dedent`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `})}var FRAMEWORK="web-components",api=start(renderToCanvas),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({framework:FRAMEWORK}),configure=(...args)=>api.configure(FRAMEWORK,...args),forceReRender=api.forceReRender,raw=api.clientApi.raw;import{global as global3}from"@storybook/global";function isValidComponent(tagName){if(!tagName)return!1;if(typeof tagName=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function isValidMetaData(customElements){if(!customElements)return!1;if(customElements.tags&&Array.isArray(customElements.tags)||customElements.modules&&Array.isArray(customElements.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 setCustomElements(customElements){global3.__STORYBOOK_CUSTOM_ELEMENTS__=customElements}function setCustomElementsManifest(customElements){global3.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=customElements}function getCustomElements(){return global3.__STORYBOOK_CUSTOM_ELEMENTS__||global3.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window,EventSource}=global4;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new EventSource("__webpack_hmr").addEventListener("message",function(event){try{let{action}=JSON.parse(event.data);action==="built"&&window.location.reload()}catch{}}));export{render,renderToCanvas,storiesOf,configure,forceReRender,raw,isValidComponent,isValidMetaData,setCustomElements,setCustomElementsManifest,getCustomElements};

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})},b=(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)):{},b(r||!e||!e.__esModule?f(t,"default",{value:e,enumerable:!0}):t,e)),j=e=>b(f({},"__esModule",{value:!0}),e);var se={};B(se,{argTypesEnhancers:()=>U,decorators:()=>N,parameters:()=>ne,render:()=>h,renderToCanvas:()=>u});module.exports=j(se);var l=require("@storybook/docs-tools");var S=require("@storybook/client-logger");var x=y(require("global"));var R=y(require("global")),{window:q}=R.default;q.STORYBOOK_ENV="web-components";var M=require("@storybook/preview-api");var w=y(require("global")),_=require("ts-dedent"),A=require("lit-html"),E=require("lit-html/directive-helpers.js"),d=require("@storybook/preview-api"),{Node:J}=w.default,h=(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(([i,s])=>{n[i]=s}),n};function u({storyFn:e,kind:r,name:t,showMain:o,showError:n,forceRemount:i},s){let a=e();if(o(),(0,E.isTemplateResult)(a)){(i||!s.querySelector('[id="root-inner"]'))&&(s.innerHTML='<div id="root-inner"></div>');let P=s.querySelector('[id="root-inner"]');(0,A.render)(a,P),(0,d.simulatePageLoad)(s)}else if(typeof a=="string")s.innerHTML=a,(0,d.simulatePageLoad)(s);else if(a instanceof J){if(s.firstChild===a&&!i)return;s.innerHTML="",s.appendChild(a),(0,d.simulateDOMContentLoaded)()}else n({title:`Expecting an HTML snippet or DOM node from the story: "${t}" of "${r}".`,description:_.dedent`
+var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var config_exports={};__export(config_exports,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters2,render:()=>render,renderToCanvas:()=>renderToCanvas});module.exports=__toCommonJS(config_exports);var import_docs_tools2=require("@storybook/docs-tools");var import_client_logger=require("@storybook/client-logger");var import_global4=require("@storybook/global");var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="web-components";var import_preview_api2=require("@storybook/preview-api");var import_global2=require("@storybook/global"),import_ts_dedent=require("ts-dedent"),import_lit_html=require("lit-html"),import_directive_helpers=require("lit-html/directive-helpers.js"),import_preview_api=require("@storybook/preview-api"),{Node}=import_global2.global,render=(args,context)=>{let{id,component}=context;if(!component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);let element=document.createElement(component);return Object.entries(args).forEach(([key,val])=>{element[key]=val}),element};function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),(0,import_directive_helpers.isTemplateResult)(element)){(forceRemount||!canvasElement.querySelector('[id="root-inner"]'))&&(canvasElement.innerHTML='<div id="root-inner"></div>');let renderTo=canvasElement.querySelector('[id="root-inner"]');(0,import_lit_html.render)(element,renderTo),(0,import_preview_api.simulatePageLoad)(canvasElement)}else if(typeof element=="string")canvasElement.innerHTML=element,(0,import_preview_api.simulatePageLoad)(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&!forceRemount)return;canvasElement.innerHTML="",canvasElement.appendChild(element),(0,import_preview_api.simulateDOMContentLoaded)()}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:import_ts_dedent.dedent`
         Did you forget to return the HTML snippet from the story?
         Use "() => <your snippet or node>" or when defining the story.
-      `})}var O=(0,M.start)(u);var de=O.forceReRender,me=O.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}=x.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 D(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}},D(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]=D(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||S.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 i;(i=n==null?void 0:n.declarations)==null||i.forEach(s=>{s.tagName===e&&(t=s)})}),t||S.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")}},L=e=>{let r=T();return ee(e,r)},W=e=>{let r=I(e,T());return r&&r.description};var v=require("lit-html"),c=require("@storybook/preview-api"),m=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)===m.SourceType.DYNAMIC?!1:!t||(r==null?void 0:r.code)||(r==null?void 0:r.type)===m.SourceType.CODE}function oe(e,r){let{transformSource:t}=r.parameters.docs??{};return typeof t!="function"?e:t(e,r)}function k(e,r){var n,i;let t=(i=(n=r==null?void 0:r.parameters.docs)==null?void 0:n.source)!=null&&i.excludeDecorators?r.originalStoryFn(r.args,r):e(),o;if((0,c.useEffect)(()=>{o&&c.addons.getChannel().emit(m.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 N=[k],F={docs:{extractArgTypes:L,extractComponentDescription:W,inlineStories:!0,source:{type:l.SourceType.DYNAMIC,language:"html"}}},U=[l.enhanceArgTypes];var ne={framework:"web-components",...F};0&&(module.exports={argTypesEnhancers,decorators,parameters,render,renderToCanvas});
+      `})}var api=(0,import_preview_api2.start)(renderToCanvas);var forceReRender=api.forceReRender,raw=api.clientApi.raw;var import_global3=require("@storybook/global");function isValidComponent(tagName){if(!tagName)return!1;if(typeof tagName=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function isValidMetaData(customElements){if(!customElements)return!1;if(customElements.tags&&Array.isArray(customElements.tags)||customElements.modules&&Array.isArray(customElements.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 getCustomElements(){return import_global3.global.__STORYBOOK_CUSTOM_ELEMENTS__||import_global3.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:window2,EventSource}=import_global4.global;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new EventSource("__webpack_hmr").addEventListener("message",function(event){try{let{action}=JSON.parse(event.data);action==="built"&&window2.location.reload()}catch{}}));function mapItem(item,category){var _a,_b;let type=category==="properties"?{name:((_a=item.type)==null?void 0:_a.text)||item.type}:{name:"void"};return{name:item.name,required:!1,description:item.description,type,table:{category,type:{summary:((_b=item.type)==null?void 0:_b.text)||item.type},defaultValue:{summary:item.default!==void 0?item.default:item.defaultValue}}}}function mapEvent(item){let name=item.name.replace(/(-|_|:|\.|\s)+(.)?/g,(_match,_separator,chr)=>chr?chr.toUpperCase():"").replace(/^([A-Z])/,match=>match.toLowerCase());return name=`on${name.charAt(0).toUpperCase()+name.substr(1)}`,[{name,action:{name:item.name},table:{disable:!0}},mapItem(item,"events")]}function mapData(data,category){return data&&data.filter(item=>item&&item.name).reduce((acc,item)=>{if(item.kind==="method")return acc;switch(category){case"events":mapEvent(item).forEach(argType=>{acc[argType.name]=argType});break;default:acc[item.name]=mapItem(item,category);break}return acc},{})}var getMetaDataExperimental=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metaData=customElements.tags.find(tag=>tag.name.toUpperCase()===tagName.toUpperCase());return metaData||import_client_logger.logger.warn(`Component not found in custom-elements.json: ${tagName}`),metaData},getMetaDataV1=(tagName,customElements)=>{var _a;if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metadata;return(_a=customElements==null?void 0:customElements.modules)==null||_a.forEach(_module=>{var _a2;(_a2=_module==null?void 0:_module.declarations)==null||_a2.forEach(declaration=>{declaration.tagName===tagName&&(metadata=declaration)})}),metadata||import_client_logger.logger.warn(`Component not found in custom-elements.json: ${tagName}`),metadata},getMetaData=(tagName,manifest)=>(manifest==null?void 0:manifest.version)==="experimental"?getMetaDataExperimental(tagName,manifest):getMetaDataV1(tagName,manifest),extractArgTypesFromElements=(tagName,customElements)=>{let metaData=getMetaData(tagName,customElements);return metaData&&{...mapData(metaData.attributes,"attributes"),...mapData(metaData.members,"properties"),...mapData(metaData.properties,"properties"),...mapData(metaData.events,"events"),...mapData(metaData.slots,"slots"),...mapData(metaData.cssProperties,"css custom properties"),...mapData(metaData.cssParts,"css shadow parts")}},extractArgTypes=tagName=>{let cem=getCustomElements();return extractArgTypesFromElements(tagName,cem)},extractComponentDescription=tagName=>{let metaData=getMetaData(tagName,getCustomElements());return metaData&&metaData.description};var import_lit_html2=require("lit-html"),import_preview_api3=require("@storybook/preview-api"),import_docs_tools=require("@storybook/docs-tools"),LIT_EXPRESSION_COMMENTS=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function skipSourceRender(context){var _a;let sourceParams=(_a=context==null?void 0:context.parameters.docs)==null?void 0:_a.source,isArgsStory=context==null?void 0:context.parameters.__isArgsStory;return(sourceParams==null?void 0:sourceParams.type)===import_docs_tools.SourceType.DYNAMIC?!1:!isArgsStory||(sourceParams==null?void 0:sourceParams.code)||(sourceParams==null?void 0:sourceParams.type)===import_docs_tools.SourceType.CODE}function applyTransformSource(source,context){let{transformSource}=context.parameters.docs??{};return typeof transformSource!="function"?source:transformSource(source,context)}function sourceDecorator(storyFn,context){var _a,_b;let story=(_b=(_a=context==null?void 0:context.parameters.docs)==null?void 0:_a.source)!=null&&_b.excludeDecorators?context.originalStoryFn(context.args,context):storyFn(),source;if((0,import_preview_api3.useEffect)(()=>{source&&import_preview_api3.addons.getChannel().emit(import_docs_tools.SNIPPET_RENDERED,context.id,source)}),!skipSourceRender(context)){let container=window.document.createElement("div");(0,import_lit_html2.render)(story,container),source=applyTransformSource(container.innerHTML.replace(LIT_EXPRESSION_COMMENTS,""),context)}return story}var decorators=[sourceDecorator],parameters={docs:{extractArgTypes,extractComponentDescription,inlineStories:!0,source:{type:import_docs_tools2.SourceType.DYNAMIC,language:"html"}}},argTypesEnhancers=[import_docs_tools2.enhanceArgTypes];var parameters2={framework:"web-components",...parameters};0&&(module.exports={argTypesEnhancers,decorators,parameters,render,renderToCanvas});

package/dist/config.mjs

@@ -1 +1 @@
-import{getCustomElements,isValidComponent,isValidMetaData,render,renderToCanvas}from"./chunk-UOPG23OB.mjs";import{SourceType as SourceType2,enhanceArgTypes}from"@storybook/docs-tools";import{logger}from"@storybook/client-logger";function mapItem(item,category){let type=category==="properties"?{name:item.type?.text||item.type}:{name:"void"};return{name:item.name,required:!1,description:item.description,type,table:{category,type:{summary:item.type?.text||item.type},defaultValue:{summary:item.default!==void 0?item.default:item.defaultValue}}}}function mapEvent(item){let name=item.name.replace(/(-|_|:|\.|\s)+(.)?/g,(_match,_separator,chr)=>chr?chr.toUpperCase():"").replace(/^([A-Z])/,match=>match.toLowerCase());return name=`on${name.charAt(0).toUpperCase()+name.substr(1)}`,[{name,action:{name:item.name},table:{disable:!0}},mapItem(item,"events")]}function mapData(data,category){return data&&data.filter(item=>item&&item.name).reduce((acc,item)=>{if(item.kind==="method")return acc;switch(category){case"events":mapEvent(item).forEach(argType=>{acc[argType.name]=argType});break;default:acc[item.name]=mapItem(item,category);break}return acc},{})}var getMetaDataExperimental=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metaData=customElements.tags.find(tag=>tag.name.toUpperCase()===tagName.toUpperCase());return metaData||logger.warn(`Component not found in custom-elements.json: ${tagName}`),metaData},getMetaDataV1=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metadata;return customElements?.modules?.forEach(_module=>{_module?.declarations?.forEach(declaration=>{declaration.tagName===tagName&&(metadata=declaration)})}),metadata||logger.warn(`Component not found in custom-elements.json: ${tagName}`),metadata},getMetaData=(tagName,manifest)=>manifest?.version==="experimental"?getMetaDataExperimental(tagName,manifest):getMetaDataV1(tagName,manifest),extractArgTypesFromElements=(tagName,customElements)=>{let metaData=getMetaData(tagName,customElements);return metaData&&{...mapData(metaData.attributes,"attributes"),...mapData(metaData.members,"properties"),...mapData(metaData.properties,"properties"),...mapData(metaData.events,"events"),...mapData(metaData.slots,"slots"),...mapData(metaData.cssProperties,"css custom properties"),...mapData(metaData.cssParts,"css shadow parts")}},extractArgTypes=tagName=>{let cem=getCustomElements();return extractArgTypesFromElements(tagName,cem)},extractComponentDescription=tagName=>{let metaData=getMetaData(tagName,getCustomElements());return metaData&&metaData.description};import{render as render2}from"lit-html";import{addons,useEffect}from"@storybook/preview-api";import{SNIPPET_RENDERED,SourceType}from"@storybook/docs-tools";var LIT_EXPRESSION_COMMENTS=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function skipSourceRender(context){let sourceParams=context?.parameters.docs?.source,isArgsStory=context?.parameters.__isArgsStory;return sourceParams?.type===SourceType.DYNAMIC?!1:!isArgsStory||sourceParams?.code||sourceParams?.type===SourceType.CODE}function applyTransformSource(source,context){let{transformSource}=context.parameters.docs??{};return typeof transformSource!="function"?source:transformSource(source,context)}function sourceDecorator(storyFn,context){let story=context?.parameters.docs?.source?.excludeDecorators?context.originalStoryFn(context.args,context):storyFn(),source;if(useEffect(()=>{source&&addons.getChannel().emit(SNIPPET_RENDERED,context.id,source)}),!skipSourceRender(context)){let container=window.document.createElement("div");render2(story,container),source=applyTransformSource(container.innerHTML.replace(LIT_EXPRESSION_COMMENTS,""),context)}return story}var decorators=[sourceDecorator],parameters={docs:{extractArgTypes,extractComponentDescription,inlineStories:!0,source:{type:SourceType2.DYNAMIC,language:"html"}}},argTypesEnhancers=[enhanceArgTypes];var parameters2={framework:"web-components",...parameters};export{argTypesEnhancers,decorators,parameters2 as parameters,render,renderToCanvas};
+import{getCustomElements,isValidComponent,isValidMetaData,render,renderToCanvas}from"./chunk-KDRLDMCT.mjs";import{SourceType as SourceType2,enhanceArgTypes}from"@storybook/docs-tools";import{logger}from"@storybook/client-logger";function mapItem(item,category){let type=category==="properties"?{name:item.type?.text||item.type}:{name:"void"};return{name:item.name,required:!1,description:item.description,type,table:{category,type:{summary:item.type?.text||item.type},defaultValue:{summary:item.default!==void 0?item.default:item.defaultValue}}}}function mapEvent(item){let name=item.name.replace(/(-|_|:|\.|\s)+(.)?/g,(_match,_separator,chr)=>chr?chr.toUpperCase():"").replace(/^([A-Z])/,match=>match.toLowerCase());return name=`on${name.charAt(0).toUpperCase()+name.substr(1)}`,[{name,action:{name:item.name},table:{disable:!0}},mapItem(item,"events")]}function mapData(data,category){return data&&data.filter(item=>item&&item.name).reduce((acc,item)=>{if(item.kind==="method")return acc;switch(category){case"events":mapEvent(item).forEach(argType=>{acc[argType.name]=argType});break;default:acc[item.name]=mapItem(item,category);break}return acc},{})}var getMetaDataExperimental=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metaData=customElements.tags.find(tag=>tag.name.toUpperCase()===tagName.toUpperCase());return metaData||logger.warn(`Component not found in custom-elements.json: ${tagName}`),metaData},getMetaDataV1=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metadata;return customElements?.modules?.forEach(_module=>{_module?.declarations?.forEach(declaration=>{declaration.tagName===tagName&&(metadata=declaration)})}),metadata||logger.warn(`Component not found in custom-elements.json: ${tagName}`),metadata},getMetaData=(tagName,manifest)=>manifest?.version==="experimental"?getMetaDataExperimental(tagName,manifest):getMetaDataV1(tagName,manifest),extractArgTypesFromElements=(tagName,customElements)=>{let metaData=getMetaData(tagName,customElements);return metaData&&{...mapData(metaData.attributes,"attributes"),...mapData(metaData.members,"properties"),...mapData(metaData.properties,"properties"),...mapData(metaData.events,"events"),...mapData(metaData.slots,"slots"),...mapData(metaData.cssProperties,"css custom properties"),...mapData(metaData.cssParts,"css shadow parts")}},extractArgTypes=tagName=>{let cem=getCustomElements();return extractArgTypesFromElements(tagName,cem)},extractComponentDescription=tagName=>{let metaData=getMetaData(tagName,getCustomElements());return metaData&&metaData.description};import{render as render2}from"lit-html";import{addons,useEffect}from"@storybook/preview-api";import{SNIPPET_RENDERED,SourceType}from"@storybook/docs-tools";var LIT_EXPRESSION_COMMENTS=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function skipSourceRender(context){let sourceParams=context?.parameters.docs?.source,isArgsStory=context?.parameters.__isArgsStory;return sourceParams?.type===SourceType.DYNAMIC?!1:!isArgsStory||sourceParams?.code||sourceParams?.type===SourceType.CODE}function applyTransformSource(source,context){let{transformSource}=context.parameters.docs??{};return typeof transformSource!="function"?source:transformSource(source,context)}function sourceDecorator(storyFn,context){let story=context?.parameters.docs?.source?.excludeDecorators?context.originalStoryFn(context.args,context):storyFn(),source;if(useEffect(()=>{source&&addons.getChannel().emit(SNIPPET_RENDERED,context.id,source)}),!skipSourceRender(context)){let container=window.document.createElement("div");render2(story,container),source=applyTransformSource(container.innerHTML.replace(LIT_EXPRESSION_COMMENTS,""),context)}return story}var decorators=[sourceDecorator],parameters={docs:{extractArgTypes,extractComponentDescription,inlineStories:!0,source:{type:SourceType2.DYNAMIC,language:"html"}}},argTypesEnhancers=[enhanceArgTypes];var parameters2={framework:"web-components",...parameters};export{argTypesEnhancers,decorators,parameters2 as parameters,render,renderToCanvas};

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import { Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
 import { W as WebComponentsRenderer } from './types-cbbc479a.js';
-export { W as WebComponentsRenderer } from './types-cbbc479a.js';
 import 'lit-html';
 
 /**
@@ -55,4 +54,4 @@ declare function setCustomElements(customElements: any): void;
 declare function setCustomElementsManifest(customElements: any): void;
 declare function getCustomElements(): any;
 
-export { Decorator, Loader, Meta, Story, StoryContext, StoryFn, StoryObj, configure, forceReRender, getCustomElements, isValidComponent, isValidMetaData, raw, setCustomElements, setCustomElementsManifest, storiesOf };
+export { Decorator, Loader, Meta, Story, StoryContext, StoryFn, StoryObj, WebComponentsRenderer, configure, forceReRender, getCustomElements, isValidComponent, isValidMetaData, raw, setCustomElements, setCustomElementsManifest, storiesOf };

package/dist/index.js

@@ -1,5 +1,5 @@
-var S=Object.create;var p=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,h=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 A(o))!h.call(e,i)&&i!==r&&p(e,i,{get:()=>o[i],enumerable:!(n=b(o,i))||n.enumerable});return e};var a=(e,o,r)=>(r=e!=null?S(M(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:()=>H,forceReRender:()=>K,getCustomElements:()=>v,isValidComponent:()=>Y,isValidMetaData:()=>B,raw:()=>U,setCustomElements:()=>F,setCustomElementsManifest:()=>k,storiesOf:()=>W});module.exports=E(V);var g=a(require("global"));var c=a(require("global")),{window:L}=c.default;L.STORYBOOK_ENV="web-components";var O=require("@storybook/preview-api");var u=a(require("global")),y=require("ts-dedent"),_=require("lit-html"),C=require("lit-html/directive-helpers.js"),s=require("@storybook/preview-api"),{Node:N}=u.default;function w({storyFn:e,kind:o,name:r,showMain:n,showError:i,forceRemount:m},t){let d=e();if(n(),(0,C.isTemplateResult)(d)){(m||!t.querySelector('[id="root-inner"]'))&&(t.innerHTML='<div id="root-inner"></div>');let T=t.querySelector('[id="root-inner"]');(0,_.render)(d,T),(0,s.simulatePageLoad)(t)}else if(typeof d=="string")t.innerHTML=d,(0,s.simulatePageLoad)(t);else if(d instanceof N){if(t.firstChild===d&&!m)return;t.innerHTML="",t.appendChild(d),(0,s.simulateDOMContentLoaded)()}else i({title:`Expecting an HTML snippet or DOM node from the story: "${r}" of "${o}".`,description:y.dedent`
+var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{configure:()=>configure,forceReRender:()=>forceReRender,getCustomElements:()=>getCustomElements,isValidComponent:()=>isValidComponent,isValidMetaData:()=>isValidMetaData,raw:()=>raw,setCustomElements:()=>setCustomElements,setCustomElementsManifest:()=>setCustomElementsManifest,storiesOf:()=>storiesOf});module.exports=__toCommonJS(src_exports);var import_global4=require("@storybook/global");var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="web-components";var import_preview_api2=require("@storybook/preview-api");var import_global2=require("@storybook/global"),import_ts_dedent=require("ts-dedent"),import_lit_html=require("lit-html"),import_directive_helpers=require("lit-html/directive-helpers.js"),import_preview_api=require("@storybook/preview-api"),{Node}=import_global2.global;function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),(0,import_directive_helpers.isTemplateResult)(element)){(forceRemount||!canvasElement.querySelector('[id="root-inner"]'))&&(canvasElement.innerHTML='<div id="root-inner"></div>');let renderTo=canvasElement.querySelector('[id="root-inner"]');(0,import_lit_html.render)(element,renderTo),(0,import_preview_api.simulatePageLoad)(canvasElement)}else if(typeof element=="string")canvasElement.innerHTML=element,(0,import_preview_api.simulatePageLoad)(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&!forceRemount)return;canvasElement.innerHTML="",canvasElement.appendChild(element),(0,import_preview_api.simulateDOMContentLoaded)()}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:import_ts_dedent.dedent`
         Did you forget to return the HTML snippet from the story?
         Use "() => <your snippet or node>" or when defining the story.
-      `})}var R="web-components",f=(0,O.start)(w),W=(e,o)=>f.clientApi.storiesOf(e,o).addParameters({framework:R}),H=(...e)=>f.configure(R,...e),K=f.forceReRender,U=f.clientApi.raw;function Y(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 B(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 F(e){window.__STORYBOOK_CUSTOM_ELEMENTS__=e}function k(e){window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=e}function v(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:D,EventSource:P}=g.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});
+      `})}var FRAMEWORK="web-components",api=(0,import_preview_api2.start)(renderToCanvas),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({framework:FRAMEWORK}),configure=(...args)=>api.configure(FRAMEWORK,...args),forceReRender=api.forceReRender,raw=api.clientApi.raw;var import_global3=require("@storybook/global");function isValidComponent(tagName){if(!tagName)return!1;if(typeof tagName=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function isValidMetaData(customElements){if(!customElements)return!1;if(customElements.tags&&Array.isArray(customElements.tags)||customElements.modules&&Array.isArray(customElements.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 setCustomElements(customElements){import_global3.global.__STORYBOOK_CUSTOM_ELEMENTS__=customElements}function setCustomElementsManifest(customElements){import_global3.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=customElements}function getCustomElements(){return import_global3.global.__STORYBOOK_CUSTOM_ELEMENTS__||import_global3.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window,EventSource}=import_global4.global;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new EventSource("__webpack_hmr").addEventListener("message",function(event){try{let{action}=JSON.parse(event.data);action==="built"&&window.location.reload()}catch{}}));0&&(module.exports={configure,forceReRender,getCustomElements,isValidComponent,isValidMetaData,raw,setCustomElements,setCustomElementsManifest,storiesOf});

package/dist/index.mjs

@@ -1 +1 @@
-import{configure,forceReRender,getCustomElements,isValidComponent,isValidMetaData,raw,setCustomElements,setCustomElementsManifest,storiesOf}from"./chunk-UOPG23OB.mjs";export{configure,forceReRender,getCustomElements,isValidComponent,isValidMetaData,raw,setCustomElements,setCustomElementsManifest,storiesOf};
+import{configure,forceReRender,getCustomElements,isValidComponent,isValidMetaData,raw,setCustomElements,setCustomElementsManifest,storiesOf}from"./chunk-KDRLDMCT.mjs";export{configure,forceReRender,getCustomElements,isValidComponent,isValidMetaData,raw,setCustomElements,setCustomElementsManifest,storiesOf};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "7.0.0-beta.2",
+  "version": "7.0.0-beta.20",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit-html",
@@ -23,6 +23,7 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "node": "./dist/index.js",
       "require": "./dist/index.js",
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
@@ -32,11 +33,7 @@
       "import": "./dist/config.mjs",
       "types": "./dist/config.d.ts"
     },
-    "./package.json": {
-      "require": "./package.json",
-      "import": "./package.json",
-      "types": "./package.json"
-    }
+    "./package.json": "./package.json"
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -53,13 +50,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.0-beta.2",
-    "@storybook/core-client": "7.0.0-beta.2",
-    "@storybook/docs-tools": "7.0.0-beta.2",
-    "@storybook/manager-api": "7.0.0-beta.2",
-    "@storybook/preview-api": "7.0.0-beta.2",
-    "@storybook/types": "7.0.0-beta.2",
-    "global": "^4.4.0",
+    "@storybook/client-logger": "7.0.0-beta.20",
+    "@storybook/core-client": "7.0.0-beta.20",
+    "@storybook/docs-tools": "7.0.0-beta.20",
+    "@storybook/global": "^5.0.0",
+    "@storybook/manager-api": "7.0.0-beta.20",
+    "@storybook/preview-api": "7.0.0-beta.20",
+    "@storybook/types": "7.0.0-beta.20",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
@@ -71,7 +68,7 @@
     "lit-html": "^1.4.1 || ^2.0.0"
   },
   "engines": {
-    "node": ">=10.13.0"
+    "node": ">=16.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -83,5 +80,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "66a0d588184add900c48d49f3a62743fa9cc5185"
+  "gitHead": "22701aedf564e467511887eb041f32ae0c96bcde"
 }

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

@@ -3,7 +3,7 @@ import { Button } from './Button';
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/web-components/writing-stories/introduction
 export default {
   title: 'Example/Button',
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   render: (args) => Button(args),
   argTypes: {
     backgroundColor: { control: 'color' },

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

@@ -2,8 +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'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/web-components/vue/writing-docs/docs-page
+  tags: ['autodocs'],
   render: (args) => Header(args),
 };
 

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

@@ -5,7 +5,7 @@ import { Button } from './Button';
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/web-components/writing-stories/introduction
 const meta: Meta<ButtonProps> = {
   title: 'Example/Button',
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   render: (args) => Button(args),
   argTypes: {
     backgroundColor: { control: 'color' },

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

@@ -4,8 +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/7.0/web-components/writing-docs/docs-page
-  tags: ['docsPage'],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/web-components/writing-docs/docs-page
+  tags: ['autodocs'],
   render: (args: HeaderProps) => Header(args),
 };
 

package/template/components/Button.js

@@ -1,5 +1,4 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import globalThis from 'global';
+import { global as globalThis } from '@storybook/global';
 import { html, LitElement } from 'lit';
 
 const { CustomEvent, customElements } = globalThis;

package/template/components/Form.js

@@ -1,5 +1,4 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import globalThis from 'global';
+import { global as globalThis } from '@storybook/global';
 import { html, LitElement } from 'lit';
 
 const { CustomEvent, customElements } = globalThis;

package/template/components/Html.js

@@ -1,5 +1,4 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import globalThis from 'global';
+import { global as globalThis } from '@storybook/global';
 import { LitElement } from 'lit';
 
 const { customElements } = globalThis;

package/template/components/Pre.js

@@ -1,6 +1,6 @@
-/* eslint-disable import/extensions, import/no-extraneous-dependencies */
-import globalThis from 'global';
+import { global as globalThis } from '@storybook/global';
 import { html, LitElement } from 'lit';
+
 import { styleMap } from 'lit-html/directives/style-map.js';
 
 const { customElements } = globalThis;

package/template/components/index.js

@@ -1,4 +1,4 @@
-import globalThis from 'global';
+import { global as globalThis } from '@storybook/global';
 
 import { ButtonTag } from './Button';
 import { FormTag } from './Form';

package/template/stories/demo-wc-card/DemoWcCard.js

@@ -1,6 +1,6 @@
-import global from 'global';
+import { global } from '@storybook/global';
 import { LitElement, html } from 'lit';
-// eslint-disable-next-line import/extensions
+
 import { demoWcCardStyle } from './demoWcCardStyle.css.js';
 
 const { CustomEvent } = global;

package/template/stories/demo-wc-card/index.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/extensions
 import { DemoWcCard } from './DemoWcCard.js';
 
 // eslint-disable-next-line no-undef

package/template/stories/script.stories.js

@@ -0,0 +1,17 @@
+import { html } from 'lit';
+
+export default {
+  component: undefined,
+};
+
+export const InTemplate = () => html`
+  <div>JS alert</div>
+  <script>
+    alert('hello');
+  </script>
+`;
+
+export const InString = () => '<div>JS alert</div><script>alert("hello")</script>';
+
+export const TypeModule = () =>
+  '<div>JS alert from module</div><script type="module">alert("hello from module"); export const a = 1;</script>';

package/dist/chunk-UOPG23OB.mjs

@@ -1,5 +0,0 @@
-import global3 from"global";import global from"global";var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="web-components";import{start}from"@storybook/preview-api";import global2 from"global";import{dedent}from"ts-dedent";import{render as litRender}from"lit-html";import{isTemplateResult}from"lit-html/directive-helpers.js";import{simulatePageLoad,simulateDOMContentLoaded}from"@storybook/preview-api";var{Node}=global2,render=(args,context)=>{let{id,component}=context;if(!component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);let element=document.createElement(component);return Object.entries(args).forEach(([key,val])=>{element[key]=val}),element};function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),isTemplateResult(element)){(forceRemount||!canvasElement.querySelector('[id="root-inner"]'))&&(canvasElement.innerHTML='<div id="root-inner"></div>');let renderTo=canvasElement.querySelector('[id="root-inner"]');litRender(element,renderTo),simulatePageLoad(canvasElement)}else if(typeof element=="string")canvasElement.innerHTML=element,simulatePageLoad(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&!forceRemount)return;canvasElement.innerHTML="",canvasElement.appendChild(element),simulateDOMContentLoaded()}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:dedent`
-        Did you forget to return the HTML snippet from the story?
-        Use "() => <your snippet or node>" or when defining the story.
-      `})}var FRAMEWORK="web-components",api=start(renderToCanvas),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({framework:FRAMEWORK}),configure=(...args)=>api.configure(FRAMEWORK,...args),forceReRender=api.forceReRender,raw=api.clientApi.raw;function isValidComponent(tagName){if(!tagName)return!1;if(typeof tagName=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function isValidMetaData(customElements){if(!customElements)return!1;if(customElements.tags&&Array.isArray(customElements.tags)||customElements.modules&&Array.isArray(customElements.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 setCustomElements(customElements){window.__STORYBOOK_CUSTOM_ELEMENTS__=customElements}function setCustomElementsManifest(customElements){window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=customElements}function getCustomElements(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:window2,EventSource}=global3;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new EventSource("__webpack_hmr").addEventListener("message",function(event){try{let{action}=JSON.parse(event.data);action==="built"&&window2.location.reload()}catch{}}));export{render,renderToCanvas,storiesOf,configure,forceReRender,raw,isValidComponent,isValidMetaData,setCustomElements,setCustomElementsManifest,getCustomElements};