@storybook/web-components 7.0.0-alpha.0 → 7.0.0-alpha.11

package/dist/chunk-ZJUYDTMP.mjs

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

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

package/dist/config.mjs

@@ -0,0 +1 @@
+import{a as o,b as g,l as p,m as c,p as u}from"./chunk-ZJUYDTMP.mjs";import{SourceType as I,enhanceArgTypes as k}from"@storybook/docs-tools";import{logger as m}from"@storybook/client-logger";function f(r,e){let t=e==="properties"?{name:r.type?.text||r.type}:{name:"void"};return{name:r.name,required:!1,description:r.description,type:t,table:{category:e,type:{summary:r.type?.text||r.type},defaultValue:{summary:r.default!==void 0?r.default:r.defaultValue}}}}o(f,"mapItem");function S(r){let e=r.name.replace(/(-|_|:|\.|\s)+(.)?/g,(t,n,s)=>s?s.toUpperCase():"").replace(/^([A-Z])/,t=>t.toLowerCase());return e=`on${e.charAt(0).toUpperCase()+e.substr(1)}`,[{name:e,action:{name:r.name},table:{disable:!0}},f(r,"events")]}o(S,"mapEvent");function a(r,e){return r&&r.filter(t=>t&&t.name).reduce((t,n)=>{if(n.kind==="method")return t;switch(e){case"events":S(n).forEach(s=>{t[s.name]=s});break;default:t[n.name]=f(n,e);break}return t},{})}o(a,"mapData");var T=o((r,e)=>{if(!p(r)||!c(e))return null;let t=e.tags.find(n=>n.name.toUpperCase()===r.toUpperCase());return t||m.warn(`Component not found in custom-elements.json: ${r}`),t},"getMetaDataExperimental"),h=o((r,e)=>{if(!p(r)||!c(e))return null;let t;return e?.modules?.forEach(n=>{n?.declarations?.forEach(s=>{s.tagName===r&&(t=s)})}),t||m.warn(`Component not found in custom-elements.json: ${r}`),t},"getMetaDataV1"),l=o((r,e)=>e?.version==="experimental"?T(r,e):h(r,e),"getMetaData"),x=o((r,e)=>{let t=l(r,e);return t&&{...a(t.attributes,"attributes"),...a(t.members,"properties"),...a(t.properties,"properties"),...a(t.events,"events"),...a(t.slots,"slots"),...a(t.cssProperties,"css custom properties"),...a(t.cssParts,"css shadow parts")}},"extractArgTypesFromElements"),d=o(r=>{let e=u();return x(r,e)},"extractArgTypes"),y=o(r=>{let e=l(r,u());return e&&e.description},"extractComponentDescription");import{render as b}from"lit-html";import{addons as A,useEffect as M}from"@storybook/addons";import{SNIPPET_RENDERED as w,SourceType as D}from"@storybook/docs-tools";var v=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function _(r){let e=r?.parameters.docs?.source,t=r?.parameters.__isArgsStory;return e?.type===D.DYNAMIC?!1:!t||e?.code||e?.type===D.CODE}o(_,"skipSourceRender");function P(r,e){let{transformSource:t}=e.parameters.docs??{};return typeof t!="function"?r:t(r,e)}o(P,"applyTransformSource");function E(r,e){let t=e?.parameters.docs?.source?.excludeDecorators?e.originalStoryFn(e.args,e):r(),n;if(M(()=>{n&&A.getChannel().emit(w,e.id,n)}),!_(e)){let s=window.document.createElement("div");b(t,s),n=P(s.innerHTML.replace(v,""),e)}return t}o(E,"sourceDecorator");var V=[E],C={docs:{extractArgTypes:d,extractComponentDescription:y,inlineStories:!0,source:{type:I.DYNAMIC,language:"html"}}},$=[k];var z={framework:"web-components",...C};export{$ as argTypesEnhancers,V as decorators,z as parameters,g 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 h=Object.create;var p=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var r=(e,o)=>p(e,"name",{value:o,configurable:!0});var L=(e,o)=>{for(var t in o)p(e,t,{get:o[t],enumerable:!0})},u=(e,o,t,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of E(o))!C.call(e,a)&&a!==t&&p(e,a,{get:()=>o[a],enumerable:!(s=A(o,a))||s.enumerable});return e};var f=(e,o,t)=>(t=e!=null?h(b(e)):{},u(o||!e||!e.__esModule?p(t,"default",{value:e,enumerable:!0}):t,e)),R=e=>u(p({},"__esModule",{value:!0}),e);var z={};L(z,{addDecorator:()=>P,addParameters:()=>Y,clearDecorators:()=>B,configure:()=>K,forceReRender:()=>U,getCustomElements:()=>$,getStorybook:()=>k,isValidComponent:()=>V,isValidMetaData:()=>q,raw:()=>F,setAddon:()=>H,setCustomElements:()=>I,setCustomElementsManifest:()=>W,storiesOf:()=>v});module.exports=R(z);var x=f(require("global"));var m=f(require("global")),{window:D}=m.default;D.STORYBOOK_ENV="web-components";var S=require("@storybook/core-client");var _=f(require("global")),O=require("ts-dedent"),w=require("lit-html"),T=require("lit-html/directive-helpers.js"),c=require("@storybook/preview-web"),{Node:N}=_.default;function M({storyFn:e,kind:o,name:t,showMain:s,showError:a,forceRemount:l},n){let d=e();if(s(),(0,T.isTemplateResult)(d)){(l||!n.querySelector('[id="root-inner"]'))&&(n.innerHTML='<div id="root-inner"></div>');let y=n.querySelector('[id="root-inner"]');(0,w.render)(d,y),(0,c.simulatePageLoad)(n)}else if(typeof d=="string")n.innerHTML=d,(0,c.simulatePageLoad)(n);else if(d instanceof N){if(n.firstChild===d&&!l)return;n.innerHTML="",n.appendChild(d),(0,c.simulateDOMContentLoaded)()}else a({title:`Expecting an HTML snippet or DOM node from the story: "${t}" of "${o}".`,description:O.dedent`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `})}r(M,"renderToDOM");var g="web-components",i=(0,S.start)(M),v=r((e,o)=>i.clientApi.storiesOf(e,o).addParameters({framework:g}),"storiesOf"),K=r((...e)=>i.configure(g,...e),"configure"),P=i.clientApi.addDecorator,Y=i.clientApi.addParameters,B=i.clientApi.clearDecorators,H=i.clientApi.setAddon,U=i.forceReRender,k=i.clientApi.getStorybook,F=i.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"')}r(V,"isValidComponent");function q(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(q,"isValidMetaData");function I(e){window.__STORYBOOK_CUSTOM_ELEMENTS__=e}r(I,"setCustomElements");function W(e){window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=e}r(W,"setCustomElementsManifest");function $(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}r($,"getCustomElements");var{window:j,EventSource:J}=x.default;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new J("__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{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,l as j,m as k,n as l,o as m,p as n}from"./chunk-ZJUYDTMP.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.0",
+  "version": "7.0.0-alpha.11",
   "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,26 +48,28 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "check": "tsc --noEmit",
+    "prepare": "esrun ../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.0",
-    "@storybook/api": "7.0.0-alpha.0",
-    "@storybook/client-logger": "7.0.0-alpha.0",
-    "@storybook/core-client": "7.0.0-alpha.0",
+    "@storybook/addons": "7.0.0-alpha.11",
+    "@storybook/api": "7.0.0-alpha.11",
+    "@storybook/client-logger": "7.0.0-alpha.11",
+    "@storybook/core-client": "7.0.0-alpha.11",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "7.0.0-alpha.0",
-    "@storybook/preview-web": "7.0.0-alpha.0",
-    "@storybook/store": "7.0.0-alpha.0",
+    "@storybook/docs-tools": "7.0.0-alpha.11",
+    "@storybook/preview-web": "7.0.0-alpha.11",
+    "@storybook/store": "7.0.0-alpha.11",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "lit-html": "2.0.2"
+    "@digitak/esrun": "^3.2.2",
+    "lit-html": "2.0.2",
+    "typescript": "~4.6.3"
   },
   "peerDependencies": {
     "lit-html": "^1.4.1 || ^2.0.0"
@@ -61,5 +80,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c82d897ea765da8cf4fbbcc2af1f28c808a93e23"
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/config.ts"
+    ],
+    "platform": "browser"
+  },
+  "gitHead": "688d338903e84a7e83cb104472e868e734399f65"
 }

package/preview.js

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

package/dist/cjs/config.js

@@ -1,51 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/web.dom-collections.for-each.js");
-
-require("core-js/modules/es.object.keys.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  parameters: true,
-  decorators: true,
-  argTypesEnhancers: true
-};
-Object.defineProperty(exports, "argTypesEnhancers", {
-  enumerable: true,
-  get: function get() {
-    return _config.argTypesEnhancers;
-  }
-});
-Object.defineProperty(exports, "decorators", {
-  enumerable: true,
-  get: function get() {
-    return _config.decorators;
-  }
-});
-exports.parameters = void 0;
-
-require("core-js/modules/es.object.assign.js");
-
-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 get() {
-      return _config2[key];
-    }
-  });
-});
-var parameters = Object.assign({
-  framework: 'web-components'
-}, _config.parameters);
-exports.parameters = parameters;

package/dist/cjs/customElements.js

@@ -1,56 +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().\n    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,32 +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");
-
-var _prepareForInline = require("./prepareForInline");
-
-var decorators = [_sourceDecorator.sourceDecorator];
-exports.decorators = decorators;
-var parameters = {
-  docs: {
-    extractArgTypes: _customElements.extractArgTypes,
-    extractComponentDescription: _customElements.extractComponentDescription,
-    inlineStories: true,
-    prepareForInline: _prepareForInline.prepareForInline,
-    source: {
-      type: _docsTools.SourceType.DYNAMIC,
-      language: 'html'
-    }
-  }
-};
-exports.parameters = parameters;
-var argTypesEnhancers = [_docsTools.enhanceArgTypes];
-exports.argTypesEnhancers = argTypesEnhancers;

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

@@ -1,165 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.extractComponentDescription = exports.extractArgTypesFromElements = exports.extractArgTypes = void 0;
-
-require("core-js/modules/es.function.name.js");
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.symbol.description.js");
-
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.string.replace.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.array.filter.js");
-
-require("core-js/modules/web.dom-collections.for-each.js");
-
-require("core-js/modules/es.array.find.js");
-
-require("core-js/modules/es.object.assign.js");
-
-var _clientLogger = require("@storybook/client-logger");
-
-var _ = require("..");
-
-function mapItem(item, category) {
-  var _item$type, _item$type2;
-
-  var 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: type,
-    table: {
-      category: 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) {
-  var name = item.name.replace(/(-|_|:|\.|\s)+(.)?/g, function (_match, _separator, chr) {
-    return chr ? chr.toUpperCase() : '';
-  }).replace(/^([A-Z])/, function (match) {
-    return match.toLowerCase();
-  });
-  name = "on".concat(name.charAt(0).toUpperCase() + name.substr(1));
-  return [{
-    name: name,
-    action: {
-      name: item.name
-    },
-    table: {
-      disable: true
-    }
-  }, mapItem(item, 'events')];
-}
-
-function mapData(data, category) {
-  return data && data.filter(function (item) {
-    return item && item.name;
-  }).reduce(function (acc, item) {
-    if (item.kind === 'method') return acc;
-
-    switch (category) {
-      case 'events':
-        mapEvent(item).forEach(function (argType) {
-          acc[argType.name] = argType;
-        });
-        break;
-
-      default:
-        acc[item.name] = mapItem(item, category);
-        break;
-    }
-
-    return acc;
-  }, {});
-}
-
-var getMetaDataExperimental = function getMetaDataExperimental(tagName, customElements) {
-  if (!(0, _.isValidComponent)(tagName) || !(0, _.isValidMetaData)(customElements)) {
-    return null;
-  }
-
-  var metaData = customElements.tags.find(function (tag) {
-    return tag.name.toUpperCase() === tagName.toUpperCase();
-  });
-
-  if (!metaData) {
-    _clientLogger.logger.warn("Component not found in custom-elements.json: ".concat(tagName));
-  }
-
-  return metaData;
-};
-
-var getMetaDataV1 = function getMetaDataV1(tagName, customElements) {
-  var _customElements$modul;
-
-  if (!(0, _.isValidComponent)(tagName) || !(0, _.isValidMetaData)(customElements)) {
-    return null;
-  }
-
-  var metadata;
-  customElements === null || customElements === void 0 ? void 0 : (_customElements$modul = customElements.modules) === null || _customElements$modul === void 0 ? void 0 : _customElements$modul.forEach(function (_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(function (declaration) {
-      if (declaration.tagName === tagName) {
-        metadata = declaration;
-      }
-    });
-  });
-
-  if (!metadata) {
-    _clientLogger.logger.warn("Component not found in custom-elements.json: ".concat(tagName));
-  }
-
-  return metadata;
-};
-
-var getMetaData = function getMetaData(tagName, manifest) {
-  if ((manifest === null || manifest === void 0 ? void 0 : manifest.version) === 'experimental') {
-    return getMetaDataExperimental(tagName, manifest);
-  }
-
-  return getMetaDataV1(tagName, manifest);
-};
-
-var extractArgTypesFromElements = function extractArgTypesFromElements(tagName, customElements) {
-  var 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;
-
-var extractArgTypes = function extractArgTypes(tagName) {
-  var cem = (0, _.getCustomElements)();
-  return extractArgTypesFromElements(tagName, cem);
-};
-
-exports.extractArgTypes = extractArgTypes;
-
-var extractComponentDescription = function extractComponentDescription(tagName) {
-  var metaData = getMetaData(tagName, (0, _.getCustomElements)());
-  return metaData && metaData.description;
-};
-
-exports.extractComponentDescription = extractComponentDescription;