@storybook/web-components 6.5.9 → 7.0.0-alpha.10

package/README.md

@@ -1,71 +1 @@
-# Storybook for web-components
-
----
-
-Storybook for web-components is a UI development environment for your plain web-component snippets.
-With it, you can visualize different states of your UI components and develop them interactively.
-
-![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)
-
-Storybook runs outside of your app.
-So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
-
-## Getting Started
-
-```sh
-cd my-app
-npx sb init -t web_components
-```
-
-For more information visit: [storybook.js.org](https://storybook.js.org)
-
----
-
-Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
-You can also build a [static version](https://storybook.js.org/docs/web-components/sharing/publish-storybook) of your storybook and deploy it anywhere you want.
-
-# Hot Module Reloading (HMR)
-
-As web components register on a global registry which only accepts a certain name/class once it can lead to errors when using classical HMR. There are ideas on how to archive HMR with a static registry but there is no proven solution yet. Therefore the best approach for now is to do full page reloads. If you keep your stories to specific states of components (which we would recommend anyways) this usually means it is fast.
-
-# Setup es6/7 dependencies
-
-By default storybook only works with precompiled ES5 code but as most web components themselves and their libs are distributed as ES2017 you will need to manually mark those packages as "needs transpilation".
-
-For example if you have a library called `my-library` which is in ES2017 then you can add it like so
-
-```js
-// .storybook/main.js
-
-module.exports = {
-  webpackFinal: async (config) => {
-    // find web-components rule for extra transpilation
-    const webComponentsRule = config.module.rules.find(
-      (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false
-    );
-    // add your own `my-library`
-    webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));
-
-    return config;
-  },
-};
-```
-
-By default the following folders are included
-
-- `src/*.js`
-- `packages/*/src/*.js`
-- `node_modules/lit-html/*.js`
-- `node_modules/lit-element/*.js`
-- `node_modules/@open-wc/*.js`
-- `node_modules/@polymer/*.js`
-- `node_modules/@vaadin/*.js`
-
-As you can see the `src` folder is also included.
-The reason for that is as it has some extra configuration to allow for example `import.meta`.
-If you use a different folder you will need to make sure webpack/babel can handle it.
-
-# FAQ
-
-- While working on my component I get the error `Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry`
-  => please see <a href="#user-content-setup-page-reload-via-hmr">Setup page reload via HMR</a>
+# Storybook web-components renderer

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,76 +1,72 @@
 {
   "name": "@storybook/web-components",
-  "version": "6.5.9",
-  "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
+  "version": "7.0.0-alpha.10",
+  "description": "Storybook web-components renderer",
   "keywords": [
     "lit-html",
     "storybook",
     "web-components"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/web-components",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/renderers/web-components",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "app/web-components"
+    "directory": "renderers/web-components"
   },
   "funding": {
     "type": "opencollective",
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/client/index.js",
-  "module": "dist/esm/client/index.js",
-  "types": "dist/ts3.9/client/index.d.ts",
-  "typesVersions": {
-    "<3.8": {
-      "dist/ts3.9/*": [
-        "dist/ts3.4/*"
-      ]
+  "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"
     }
   },
-  "bin": {
-    "build-storybook": "./bin/build.js",
-    "start-storybook": "./bin/index.js",
-    "storybook-server": "./bin/index.js"
-  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
-    "bin/**/*",
     "dist/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "prepare": "esrun ../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/preset-env": "^7.12.11",
-    "@storybook/addons": "6.5.9",
-    "@storybook/client-api": "6.5.9",
-    "@storybook/client-logger": "6.5.9",
-    "@storybook/core": "6.5.9",
-    "@storybook/core-common": "6.5.9",
+    "@storybook/addons": "7.0.0-alpha.10",
+    "@storybook/api": "7.0.0-alpha.10",
+    "@storybook/client-logger": "7.0.0-alpha.10",
+    "@storybook/core-client": "7.0.0-alpha.10",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "6.5.9",
-    "@storybook/preview-web": "6.5.9",
-    "@storybook/store": "6.5.9",
-    "@types/node": "^14.14.20 || ^16.0.0",
-    "@types/webpack-env": "^1.16.0",
-    "babel-plugin-bundled-import-meta": "^0.3.1",
+    "@storybook/docs-tools": "7.0.0-alpha.10",
+    "@storybook/preview-web": "7.0.0-alpha.10",
+    "@storybook/store": "7.0.0-alpha.10",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "read-pkg-up": "^7.0.1",
-    "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@digitak/esrun": "^3.2.2",
     "lit-html": "2.0.2"
   },
   "peerDependencies": {
@@ -82,6 +78,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e2673f765722cbb542ef1b5cf8d533c8e746a127",
-  "sbmodern": "dist/modern/client/index.js"
+  "bundlerEntrypoint": [
+    "./src/index.ts",
+    "./src/config.ts"
+  ],
+  "gitHead": "b13dd8fb52819d73d4983148af8ffc5d683e8b75"
 }

package/preview.js

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

package/bin/build.js

@@ -1,4 +0,0 @@
-#!/usr/bin/env node
-
-process.env.NODE_ENV = process.env.NODE_ENV || 'production';
-require('../dist/cjs/server/build');

package/bin/index.js

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-require('../dist/cjs/server');

package/dist/cjs/client/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/client/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/client/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.object.to-string.js");
-
-require("core-js/modules/es.array.filter.js");
-
-require("core-js/modules/es.function.name.js");
-
-require("core-js/modules/web.dom-collections.for-each.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.array.find.js");
-
-require("core-js/modules/es.object.assign.js");
-
-var _clientLogger = require("@storybook/client-logger");
-
-var _ = require("..");
-
-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;
-  }, {});
-}
-
-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')];
-}
-
-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 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 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 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;