@storybook/web-components 7.0.0-alpha.4 → 7.0.0-alpha.7

package/dist/chunk-LW7MJT4D.mjs

@@ -0,0 +1,5 @@
+var u=Object.defineProperty;var f=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var l=(e,o,r)=>o in e?u(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,v=(e,o)=>{for(var r in o||(o={}))M.call(o,r)&&l(e,r,o[r]);if(f)for(var r of f(o))S.call(o,r)&&l(e,r,o[r]);return e};var t=(e,o)=>u(e,"name",{value:o,configurable:!0});import R from"global";import g from"global";var{window:x}=g;x.STORYBOOK_ENV="web-components";import{start as L}from"@storybook/core-client";import y from"global";import h from"ts-dedent";import{render as A}from"lit-html";import{isTemplateResult as E}from"lit-html/directive-helpers.js";import{simulatePageLoad as m,simulateDOMContentLoaded as b}from"@storybook/preview-web";var{Node:C}=y;function _({storyFn:e,kind:o,name:r,showMain:p,showError:w,forceRemount:c},n){let s=e();if(p(),E(s)){(c||!n.querySelector('[id="root-inner"]'))&&(n.innerHTML='<div id="root-inner"></div>');let T=n.querySelector('[id="root-inner"]');A(s,T),m(n)}else if(typeof s=="string")n.innerHTML=s,m(n);else if(s instanceof C){if(n.firstChild===s&&!c)return;n.innerHTML="",n.appendChild(s),b()}else w({title:`Expecting an HTML snippet or DOM node from the story: "${r}" of "${o}".`,description:h`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `})}t(_,"renderToDOM");var O="web-components",i=L(_),I=t((e,o)=>i.clientApi.storiesOf(e,o).addParameters({framework:O}),"storiesOf"),W=t((...e)=>i.configure(O,...e),"configure"),$=i.clientApi.addDecorator,j=i.clientApi.addParameters,J=i.clientApi.clearDecorators,z=i.clientApi.setAddon,G=i.forceReRender,Q=i.clientApi.getStorybook,X=i.clientApi.raw;function ee(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"')}t(ee,"isValidComponent");function oe(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.`)}t(oe,"isValidMetaData");function re(e){window.__STORYBOOK_CUSTOM_ELEMENTS__=e}t(re,"setCustomElements");function te(e){window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=e}t(te,"setCustomElementsManifest");function ne(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}t(ne,"getCustomElements");var{window:D,EventSource:N}=R;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new N("__webpack_hmr").addEventListener("message",t(function(r){try{let{action:p}=JSON.parse(r.data);p==="built"&&D.location.reload()}catch{}},"fullPageReload")));export{v as a,t as b,_ as c,I as d,W as e,$ as f,j as g,J as h,z as i,G as j,Q as k,X as l,ee as m,oe as n,re as o,te as p,ne as q};

package/dist/config.d.ts

@@ -0,0 +1,32 @@
+import * as lib_docs_tools_dist_types from 'lib/docs-tools/dist/types';
+import * as lib_api_dist_types from 'lib/api/dist/types';
+import * as lib_addons_dist_types from 'lib/addons/dist/types';
+import * as _storybook_csf from '@storybook/csf';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+import { W as WebComponentsFramework } from './types-7ab3c005.js';
+import { RenderContext } from '@storybook/store';
+import 'lit-html';
+
+declare function sourceDecorator(storyFn: PartialStoryFn<WebComponentsFramework>, context: StoryContext<WebComponentsFramework>): WebComponentsFramework['storyResult'];
+
+declare const decorators: (typeof sourceDecorator)[];
+declare const argTypesEnhancers: (<TFramework extends _storybook_csf.AnyFramework>(context: _storybook_csf.StoryContextForEnhancers<TFramework, _storybook_csf.Args>) => _storybook_csf.StrictArgTypes<_storybook_csf.Args> | lib_addons_dist_types.Parameters)[];
+
+declare function renderToDOM({ storyFn, kind, name, showMain, showError, forceRemount }: RenderContext<WebComponentsFramework>, domElement: Element): void;
+
+declare const parameters: {
+    docs: {
+        extractArgTypes: (tagName: string) => {
+            [x: string]: lib_api_dist_types.ArgType;
+        };
+        extractComponentDescription: (tagName: string) => string;
+        inlineStories: boolean;
+        source: {
+            type: lib_docs_tools_dist_types.SourceType;
+            language: string;
+        };
+    };
+    framework: "web-components";
+};
+
+export { argTypesEnhancers, decorators, parameters, renderToDOM };

package/dist/config.js

@@ -0,0 +1,5 @@
+var j=Object.create;var l=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames,D=Object.getOwnPropertySymbols,J=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable;var C=(e,r,o)=>r in e?l(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,i=(e,r)=>{for(var o in r||(r={}))A.call(r,o)&&C(e,o,r[o]);if(D)for(var o of D(r))X.call(r,o)&&C(e,o,r[o]);return e};var s=(e,r)=>l(e,"name",{value:r,configurable:!0});var Z=(e,r)=>{for(var o in r)l(e,o,{get:r[o],enumerable:!0})},E=(e,r,o,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of W(r))!A.call(e,n)&&n!==o&&l(e,n,{get:()=>r[n],enumerable:!(t=q(r,n))||t.enumerable});return e};var T=(e,r,o)=>(o=e!=null?j(J(e)):{},E(r||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),z=e=>E(l({},"__esModule",{value:!0}),e);var de={};Z(de,{argTypesEnhancers:()=>B,decorators:()=>H,parameters:()=>ce,renderToDOM:()=>g});module.exports=z(de);var S=require("@storybook/docs-tools");var h=require("@storybook/client-logger");var k=T(require("global"));var b=T(require("global")),{window:G}=b.default;G.STORYBOOK_ENV="web-components";var N=require("@storybook/core-client");var x=T(require("global")),R=T(require("ts-dedent")),v=require("lit-html"),L=require("lit-html/directive-helpers.js"),m=require("@storybook/preview-web"),{Node:Q}=x.default;function g({storyFn:e,kind:r,name:o,showMain:t,showError:n,forceRemount:c},a){let d=e();if(t(),(0,L.isTemplateResult)(d)){(c||!a.querySelector('[id="root-inner"]'))&&(a.innerHTML='<div id="root-inner"></div>');let F=a.querySelector('[id="root-inner"]');(0,v.render)(d,F),(0,m.simulatePageLoad)(a)}else if(typeof d=="string")a.innerHTML=d,(0,m.simulatePageLoad)(a);else if(d instanceof Q){if(a.firstChild===d&&!c)return;a.innerHTML="",a.appendChild(d),(0,m.simulateDOMContentLoaded)()}else n({title:`Expecting an HTML snippet or DOM node from the story: "${o}" of "${r}".`,description:R.default`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `})}s(g,"renderToDOM");var f=(0,N.start)(g);var me=f.clientApi.addDecorator,ye=f.clientApi.addParameters,Te=f.clientApi.clearDecorators,ge=f.clientApi.setAddon,we=f.forceReRender,Se=f.clientApi.getStorybook,_e=f.clientApi.raw;function _(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"')}s(_,"isValidComponent");function M(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.`)}s(M,"isValidMetaData");function O(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}s(O,"getCustomElements");var{window:ee,EventSource:re}=k.default;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new re("__webpack_hmr").addEventListener("message",s(function(o){try{let{action:t}=JSON.parse(o.data);t==="built"&&ee.location.reload()}catch{}},"fullPageReload")));function U(e,r){var t,n;let o=r==="properties"?{name:((t=e.type)==null?void 0:t.text)||e.type}:{name:"void"};return{name:e.name,required:!1,description:e.description,type:o,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}}}}s(U,"mapItem");function oe(e){let r=e.name.replace(/(-|_|:|\.|\s)+(.)?/g,(o,t,n)=>n?n.toUpperCase():"").replace(/^([A-Z])/,o=>o.toLowerCase());return r=`on${r.charAt(0).toUpperCase()+r.substr(1)}`,[{name:r,action:{name:e.name},table:{disable:!0}},U(e,"events")]}s(oe,"mapEvent");function u(e,r){return e&&e.filter(o=>o&&o.name).reduce((o,t)=>{if(t.kind==="method")return o;switch(r){case"events":oe(t).forEach(n=>{o[n.name]=n});break;default:o[t.name]=U(t,r);break}return o},{})}s(u,"mapData");var te=s((e,r)=>{if(!_(e)||!M(r))return null;let o=r.tags.find(t=>t.name.toUpperCase()===e.toUpperCase());return o||h.logger.warn(`Component not found in custom-elements.json: ${e}`),o},"getMetaDataExperimental"),ne=s((e,r)=>{var t;if(!_(e)||!M(r))return null;let o;return(t=r==null?void 0:r.modules)==null||t.forEach(n=>{var c;(c=n==null?void 0:n.declarations)==null||c.forEach(a=>{a.tagName===e&&(o=a)})}),o||h.logger.warn(`Component not found in custom-elements.json: ${e}`),o},"getMetaDataV1"),I=s((e,r)=>(r==null?void 0:r.version)==="experimental"?te(e,r):ne(e,r),"getMetaData"),se=s((e,r)=>{let o=I(e,r);return o&&i(i(i(i(i(i(i({},u(o.attributes,"attributes")),u(o.members,"properties")),u(o.properties,"properties")),u(o.events,"events")),u(o.slots,"slots")),u(o.cssProperties,"css custom properties")),u(o.cssParts,"css shadow parts"))},"extractArgTypesFromElements"),V=s(e=>{let r=O();return se(e,r)},"extractArgTypes"),Y=s(e=>{let r=I(e,O());return r&&r.description},"extractComponentDescription");var P=require("lit-html"),w=require("@storybook/addons"),y=require("@storybook/docs-tools"),ae=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function ie(e){var t;let r=(t=e==null?void 0:e.parameters.docs)==null?void 0:t.source,o=e==null?void 0:e.parameters.__isArgsStory;return(r==null?void 0:r.type)===y.SourceType.DYNAMIC?!1:!o||(r==null?void 0:r.code)||(r==null?void 0:r.type)===y.SourceType.CODE}s(ie,"skipSourceRender");function pe(e,r){let{transformSource:o}=r.parameters.docs??{};return typeof o!="function"?e:o(e,r)}s(pe,"applyTransformSource");function $(e,r){var n,c;let o=(c=(n=r==null?void 0:r.parameters.docs)==null?void 0:n.source)!=null&&c.excludeDecorators?r.originalStoryFn(r.args,r):e(),t;if((0,w.useEffect)(()=>{t&&w.addons.getChannel().emit(y.SNIPPET_RENDERED,r.id,t)}),!ie(r)){let a=window.document.createElement("div");(0,P.render)(o,a),t=pe(a.innerHTML.replace(ae,""),r)}return o}s($,"sourceDecorator");var H=[$],K={docs:{extractArgTypes:V,extractComponentDescription:Y,inlineStories:!0,source:{type:S.SourceType.DYNAMIC,language:"html"}}},B=[S.enhanceArgTypes];var ce=i({framework:"web-components"},K);0&&(module.exports={argTypesEnhancers,decorators,parameters,renderToDOM});

package/dist/config.mjs

@@ -0,0 +1 @@
+import{a,b as s,c as b,m as c,n as f,q as d}from"./chunk-LW7MJT4D.mjs";import{SourceType as _,enhanceArgTypes as L}from"@storybook/docs-tools";import{logger as y}from"@storybook/client-logger";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}}}}s(D,"mapItem");function A(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")]}s(A,"mapEvent");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":A(o).forEach(n=>{t[n.name]=n});break;default:t[o.name]=D(o,r);break}return t},{})}s(p,"mapData");var M=s((e,r)=>{if(!c(e)||!f(r))return null;let t=r.tags.find(o=>o.name.toUpperCase()===e.toUpperCase());return t||y.warn(`Component not found in custom-elements.json: ${e}`),t},"getMetaDataExperimental"),w=s((e,r)=>{var o;if(!c(e)||!f(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(u=>{u.tagName===e&&(t=u)})}),t||y.warn(`Component not found in custom-elements.json: ${e}`),t},"getMetaDataV1"),C=s((e,r)=>(r==null?void 0:r.version)==="experimental"?M(e,r):w(e,r),"getMetaData"),v=s((e,r)=>{let t=C(e,r);return t&&a(a(a(a(a(a(a({},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"))},"extractArgTypesFromElements"),g=s(e=>{let r=d();return v(e,r)},"extractArgTypes"),E=s(e=>{let r=C(e,d());return r&&r.description},"extractComponentDescription");import{render as I}from"lit-html";import{addons as k,useEffect as V}from"@storybook/addons";import{SNIPPET_RENDERED as $,SourceType as S}from"@storybook/docs-tools";var O=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function R(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)===S.DYNAMIC?!1:!t||(r==null?void 0:r.code)||(r==null?void 0:r.type)===S.CODE}s(R,"skipSourceRender");function U(e,r){let{transformSource:t}=r.parameters.docs??{};return typeof t!="function"?e:t(e,r)}s(U,"applyTransformSource");function T(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(V(()=>{o&&k.getChannel().emit($,r.id,o)}),!R(r)){let u=window.document.createElement("div");I(t,u),o=U(u.innerHTML.replace(O,""),r)}return t}s(T,"sourceDecorator");var j=[T],h={docs:{extractArgTypes:g,extractComponentDescription:E,inlineStories:!0,source:{type:_.DYNAMIC,language:"html"}}},F=[L];var K=a({framework:"web-components"},h);export{F as argTypesEnhancers,j as decorators,K as parameters,b as renderToDOM};

package/dist/index.d.ts

@@ -0,0 +1,58 @@
+import { Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations } from '@storybook/csf';
+import { W as WebComponentsFramework, I as IStorybookSection } from './types-7ab3c005.js';
+import { ClientStoryApi, Loadable } from '@storybook/addons';
+import 'lit-html';
+
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+declare type Meta<TArgs = Args> = ComponentAnnotations<WebComponentsFramework, TArgs>;
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+declare type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsFramework, TArgs>;
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+declare type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsFramework, TArgs>;
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+declare type Story<TArgs = Args> = StoryObj<TArgs>;
+
+interface ClientApi extends ClientStoryApi<WebComponentsFramework['storyResult']> {
+    setAddon(addon: any): void;
+    configure(loader: Loadable, module: NodeModule): void;
+    getStorybook(): IStorybookSection[];
+    clearDecorators(): void;
+    forceReRender(): void;
+    raw: () => any;
+}
+declare const storiesOf: ClientApi['storiesOf'];
+declare const configure: ClientApi['configure'];
+declare const addDecorator: ClientApi['addDecorator'];
+declare const addParameters: ClientApi['addParameters'];
+declare const clearDecorators: ClientApi['clearDecorators'];
+declare const setAddon: ClientApi['setAddon'];
+declare const forceReRender: ClientApi['forceReRender'];
+declare const getStorybook: ClientApi['getStorybook'];
+declare const raw: ClientApi['raw'];
+
+declare function isValidComponent(tagName: string): boolean;
+declare function isValidMetaData(customElements: any): boolean;
+/**
+ * @param customElements any for now as spec is not super stable yet
+ */
+declare function setCustomElements(customElements: any): void;
+declare function setCustomElementsManifest(customElements: any): void;
+declare function getCustomElements(): any;
+
+export { Meta, Story, StoryFn, StoryObj, addDecorator, addParameters, clearDecorators, configure, forceReRender, getCustomElements, getStorybook, isValidComponent, isValidMetaData, raw, setAddon, setCustomElements, setCustomElementsManifest, storiesOf };

package/dist/index.js

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

package/dist/index.mjs

@@ -0,0 +1 @@
+import{d as a,e as b,f as c,g as d,h as e,i as f,j as g,k as h,l as i,m as j,n as k,o as l,p as m,q as n}from"./chunk-LW7MJT4D.mjs";export{c as addDecorator,d as addParameters,e as clearDecorators,b as configure,g as forceReRender,n as getCustomElements,h as getStorybook,j as isValidComponent,k as isValidMetaData,i as raw,f as setAddon,l as setCustomElements,m as setCustomElementsManifest,a as storiesOf};

package/dist/types-7ab3c005.d.ts

@@ -0,0 +1,17 @@
+import { TemplateResult, SVGTemplateResult } from 'lit-html';
+
+declare type StoryFnHtmlReturnType = string | Node | TemplateResult | SVGTemplateResult;
+declare type WebComponentsFramework = {
+    component: string;
+    storyResult: StoryFnHtmlReturnType;
+};
+interface IStorybookStory {
+    name: string;
+    render: (context: any) => any;
+}
+interface IStorybookSection {
+    kind: string;
+    stories: IStorybookStory[];
+}
+
+export { IStorybookSection as I, WebComponentsFramework as W };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "7.0.0-alpha.4",
+  "version": "7.0.0-alpha.7",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit-html",
@@ -21,9 +21,26 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/config.js",
+      "import": "./dist/config.mjs",
+      "types": "./dist/config.d.ts"
+    },
+    "./package.json": {
+      "require": "./package.json",
+      "import": "./package.json",
+      "types": "./package.json"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -31,17 +48,17 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "prepare": "esrun ../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.4",
-    "@storybook/api": "7.0.0-alpha.4",
-    "@storybook/client-logger": "7.0.0-alpha.4",
-    "@storybook/core-client": "7.0.0-alpha.4",
+    "@storybook/addons": "7.0.0-alpha.7",
+    "@storybook/api": "7.0.0-alpha.7",
+    "@storybook/client-logger": "7.0.0-alpha.7",
+    "@storybook/core-client": "7.0.0-alpha.7",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "7.0.0-alpha.4",
-    "@storybook/preview-web": "7.0.0-alpha.4",
-    "@storybook/store": "7.0.0-alpha.4",
+    "@storybook/docs-tools": "7.0.0-alpha.7",
+    "@storybook/preview-web": "7.0.0-alpha.7",
+    "@storybook/store": "7.0.0-alpha.7",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "react": "16.14.0",
@@ -49,6 +66,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@digitak/esrun": "^3.2.2",
     "lit-html": "2.0.2"
   },
   "peerDependencies": {
@@ -60,5 +78,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "006ed54452dd7c37a8cbe91a84f5312182f7ca00"
+  "bundlerEntrypoint": [
+    "./src/index.ts",
+    "./src/config.ts"
+  ],
+  "gitHead": "d334cabd251cd0ed8b845a87707dc84f007d4074"
 }

package/preview.js

@@ -1 +1 @@
-export * from './dist/esm/config';
+export * from './dist/config';

package/dist/cjs/config.js

@@ -1,43 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  parameters: true,
-  decorators: true,
-  argTypesEnhancers: true
-};
-Object.defineProperty(exports, "argTypesEnhancers", {
-  enumerable: true,
-  get: function () {
-    return _config.argTypesEnhancers;
-  }
-});
-Object.defineProperty(exports, "decorators", {
-  enumerable: true,
-  get: function () {
-    return _config.decorators;
-  }
-});
-exports.parameters = void 0;
-
-var _config = require("./docs/config");
-
-var _config2 = require("./preview/config");
-
-Object.keys(_config2).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _config2[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _config2[key];
-    }
-  });
-});
-const parameters = Object.assign({
-  framework: 'web-components'
-}, _config.parameters);
-exports.parameters = parameters;

package/dist/cjs/customElements.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getCustomElements = getCustomElements;
-exports.isValidComponent = isValidComponent;
-exports.isValidMetaData = isValidMetaData;
-exports.setCustomElements = setCustomElements;
-exports.setCustomElementsManifest = setCustomElementsManifest;
-
-/* eslint-disable no-underscore-dangle */
-
-/* global window */
-function isValidComponent(tagName) {
-  if (!tagName) {
-    return false;
-  }
-
-  if (typeof tagName === 'string') {
-    return true;
-  }
-
-  throw new Error('Provided component needs to be a string. e.g. component: "my-element"');
-}
-
-function isValidMetaData(customElements) {
-  if (!customElements) {
-    return false;
-  }
-
-  if (customElements.tags && Array.isArray(customElements.tags) || customElements.modules && Array.isArray(customElements.modules)) {
-    return true;
-  }
-
-  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.`);
-}
-/**
- * @param customElements any for now as spec is not super stable yet
- */
-
-
-function setCustomElements(customElements) {
-  // @ts-ignore
-  window.__STORYBOOK_CUSTOM_ELEMENTS__ = customElements;
-}
-
-function setCustomElementsManifest(customElements) {
-  // @ts-ignore
-  window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__ = customElements;
-}
-
-function getCustomElements() {
-  // @ts-ignore
-  return window.__STORYBOOK_CUSTOM_ELEMENTS__ || window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__;
-}

package/dist/cjs/docs/config.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.parameters = exports.decorators = exports.argTypesEnhancers = void 0;
-
-var _docsTools = require("@storybook/docs-tools");
-
-var _customElements = require("./custom-elements");
-
-var _sourceDecorator = require("./sourceDecorator");
-
-const decorators = [_sourceDecorator.sourceDecorator];
-exports.decorators = decorators;
-const parameters = {
-  docs: {
-    extractArgTypes: _customElements.extractArgTypes,
-    extractComponentDescription: _customElements.extractComponentDescription,
-    inlineStories: true,
-    source: {
-      type: _docsTools.SourceType.DYNAMIC,
-      language: 'html'
-    }
-  }
-};
-exports.parameters = parameters;
-const argTypesEnhancers = [_docsTools.enhanceArgTypes];
-exports.argTypesEnhancers = argTypesEnhancers;

package/dist/cjs/docs/custom-elements.js

@@ -1,139 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.extractComponentDescription = exports.extractArgTypesFromElements = exports.extractArgTypes = void 0;
-
-var _clientLogger = require("@storybook/client-logger");
-
-var _ = require("..");
-
-function mapItem(item, category) {
-  var _item$type, _item$type2;
-
-  const type = category === 'properties' ? {
-    name: ((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.text) || item.type
-  } : {
-    name: 'void'
-  };
-  return {
-    name: item.name,
-    required: false,
-    description: item.description,
-    type,
-    table: {
-      category,
-      type: {
-        summary: ((_item$type2 = item.type) === null || _item$type2 === void 0 ? void 0 : _item$type2.text) || item.type
-      },
-      defaultValue: {
-        summary: item.default !== undefined ? item.default : item.defaultValue
-      }
-    }
-  };
-}
-
-function mapEvent(item) {
-  let name = item.name.replace(/(-|_|:|\.|\s)+(.)?/g, (_match, _separator, chr) => {
-    return chr ? chr.toUpperCase() : '';
-  }).replace(/^([A-Z])/, match => match.toLowerCase());
-  name = `on${name.charAt(0).toUpperCase() + name.substr(1)}`;
-  return [{
-    name,
-    action: {
-      name: item.name
-    },
-    table: {
-      disable: true
-    }
-  }, 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;
-  }, {});
-}
-
-const getMetaDataExperimental = (tagName, customElements) => {
-  if (!(0, _.isValidComponent)(tagName) || !(0, _.isValidMetaData)(customElements)) {
-    return null;
-  }
-
-  const metaData = customElements.tags.find(tag => tag.name.toUpperCase() === tagName.toUpperCase());
-
-  if (!metaData) {
-    _clientLogger.logger.warn(`Component not found in custom-elements.json: ${tagName}`);
-  }
-
-  return metaData;
-};
-
-const getMetaDataV1 = (tagName, customElements) => {
-  var _customElements$modul;
-
-  if (!(0, _.isValidComponent)(tagName) || !(0, _.isValidMetaData)(customElements)) {
-    return null;
-  }
-
-  let metadata;
-  customElements === null || customElements === void 0 ? void 0 : (_customElements$modul = customElements.modules) === null || _customElements$modul === void 0 ? void 0 : _customElements$modul.forEach(_module => {
-    var _module$declarations;
-
-    _module === null || _module === void 0 ? void 0 : (_module$declarations = _module.declarations) === null || _module$declarations === void 0 ? void 0 : _module$declarations.forEach(declaration => {
-      if (declaration.tagName === tagName) {
-        metadata = declaration;
-      }
-    });
-  });
-
-  if (!metadata) {
-    _clientLogger.logger.warn(`Component not found in custom-elements.json: ${tagName}`);
-  }
-
-  return metadata;
-};
-
-const getMetaData = (tagName, manifest) => {
-  if ((manifest === null || manifest === void 0 ? void 0 : manifest.version) === 'experimental') {
-    return getMetaDataExperimental(tagName, manifest);
-  }
-
-  return getMetaDataV1(tagName, manifest);
-};
-
-const extractArgTypesFromElements = (tagName, customElements) => {
-  const metaData = getMetaData(tagName, customElements);
-  return metaData && Object.assign({}, 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'));
-};
-
-exports.extractArgTypesFromElements = extractArgTypesFromElements;
-
-const extractArgTypes = tagName => {
-  const cem = (0, _.getCustomElements)();
-  return extractArgTypesFromElements(tagName, cem);
-};
-
-exports.extractArgTypes = extractArgTypes;
-
-const extractComponentDescription = tagName => {
-  const metaData = getMetaData(tagName, (0, _.getCustomElements)());
-  return metaData && metaData.description;
-};
-
-exports.extractComponentDescription = extractComponentDescription;

package/dist/cjs/docs/sourceDecorator.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sourceDecorator = sourceDecorator;
-
-var _litHtml = require("lit-html");
-
-var _addons = require("@storybook/addons");
-
-var _docsTools = require("@storybook/docs-tools");
-
-/* eslint-disable no-underscore-dangle */
-
-/* global window */
-// Taken from https://github.com/lit/lit/blob/main/packages/lit-html/src/test/test-utils/strip-markers.ts
-const LIT_EXPRESSION_COMMENTS = /<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;
-
-function skipSourceRender(context) {
-  var _context$parameters$d;
-
-  const sourceParams = context === null || context === void 0 ? void 0 : (_context$parameters$d = context.parameters.docs) === null || _context$parameters$d === void 0 ? void 0 : _context$parameters$d.source;
-  const isArgsStory = context === null || context === void 0 ? void 0 : context.parameters.__isArgsStory; // always render if the user forces it
-
-  if ((sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === _docsTools.SourceType.DYNAMIC) {
-    return false;
-  } // never render if the user is forcing the block to render code, or
-  // if the user provides code, or if it's not an args story.
-
-
-  return !isArgsStory || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.code) || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === _docsTools.SourceType.CODE;
-}
-
-function applyTransformSource(source, context) {
-  const {
-    transformSource
-  } = context.parameters.docs ?? {};
-  if (typeof transformSource !== 'function') return source;
-  return transformSource(source, context);
-}
-
-function sourceDecorator(storyFn, context) {
-  var _context$parameters$d2, _context$parameters$d3;
-
-  const story = context !== null && context !== void 0 && (_context$parameters$d2 = context.parameters.docs) !== null && _context$parameters$d2 !== void 0 && (_context$parameters$d3 = _context$parameters$d2.source) !== null && _context$parameters$d3 !== void 0 && _context$parameters$d3.excludeDecorators ? context.originalStoryFn(context.args, context) : storyFn();
-  let source;
-  (0, _addons.useEffect)(() => {
-    if (source) _addons.addons.getChannel().emit(_docsTools.SNIPPET_RENDERED, context.id, source);
-  });
-
-  if (!skipSourceRender(context)) {
-    const container = window.document.createElement('div');
-    (0, _litHtml.render)(story, container);
-    source = applyTransformSource(container.innerHTML.replace(LIT_EXPRESSION_COMMENTS, ''), context);
-  }
-
-  return story;
-}