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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,5 @@
1
+ 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`
2
+ Did you forget to return the HTML snippet from the story?
3
+ Use "() => <your snippet or node>" or when defining the story.
4
+ `})}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().
5
+ 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.js CHANGED
@@ -1,5 +1,5 @@
1
- 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`
1
+ 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`
2
2
  Did you forget to return the HTML snippet from the story?
3
3
  Use "() => <your snippet or node>" or when defining the story.
4
- `})}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().
5
- 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});
4
+ `})}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().
5
+ 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 CHANGED
@@ -1 +1 @@
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};
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.js CHANGED
@@ -1,5 +1,5 @@
1
- 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`
1
+ 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`
2
2
  Did you forget to return the HTML snippet from the story?
3
3
  Use "() => <your snippet or node>" or when defining the story.
4
- `})}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().
5
- 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});
4
+ `})}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().
5
+ 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 CHANGED
@@ -1 +1 @@
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};
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/web-components",
3
- "version": "7.0.0-alpha.10",
3
+ "version": "7.0.0-alpha.11",
4
4
  "description": "Storybook web-components renderer",
5
5
  "keywords": [
6
6
  "lit-html",
@@ -48,17 +48,18 @@
48
48
  "*.d.ts"
49
49
  ],
50
50
  "scripts": {
51
+ "check": "tsc --noEmit",
51
52
  "prepare": "esrun ../../scripts/prepare/bundle.ts"
52
53
  },
53
54
  "dependencies": {
54
- "@storybook/addons": "7.0.0-alpha.10",
55
- "@storybook/api": "7.0.0-alpha.10",
56
- "@storybook/client-logger": "7.0.0-alpha.10",
57
- "@storybook/core-client": "7.0.0-alpha.10",
55
+ "@storybook/addons": "7.0.0-alpha.11",
56
+ "@storybook/api": "7.0.0-alpha.11",
57
+ "@storybook/client-logger": "7.0.0-alpha.11",
58
+ "@storybook/core-client": "7.0.0-alpha.11",
58
59
  "@storybook/csf": "0.0.2--canary.4566f4d.1",
59
- "@storybook/docs-tools": "7.0.0-alpha.10",
60
- "@storybook/preview-web": "7.0.0-alpha.10",
61
- "@storybook/store": "7.0.0-alpha.10",
60
+ "@storybook/docs-tools": "7.0.0-alpha.11",
61
+ "@storybook/preview-web": "7.0.0-alpha.11",
62
+ "@storybook/store": "7.0.0-alpha.11",
62
63
  "core-js": "^3.8.2",
63
64
  "global": "^4.4.0",
64
65
  "react": "16.14.0",
@@ -67,7 +68,8 @@
67
68
  },
68
69
  "devDependencies": {
69
70
  "@digitak/esrun": "^3.2.2",
70
- "lit-html": "2.0.2"
71
+ "lit-html": "2.0.2",
72
+ "typescript": "~4.6.3"
71
73
  },
72
74
  "peerDependencies": {
73
75
  "lit-html": "^1.4.1 || ^2.0.0"
@@ -78,9 +80,12 @@
78
80
  "publishConfig": {
79
81
  "access": "public"
80
82
  },
81
- "bundlerEntrypoint": [
82
- "./src/index.ts",
83
- "./src/config.ts"
84
- ],
85
- "gitHead": "b13dd8fb52819d73d4983148af8ffc5d683e8b75"
83
+ "bundler": {
84
+ "entries": [
85
+ "./src/index.ts",
86
+ "./src/config.ts"
87
+ ],
88
+ "platform": "browser"
89
+ },
90
+ "gitHead": "688d338903e84a7e83cb104472e868e734399f65"
86
91
  }
@@ -1,5 +0,0 @@
1
- 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`
2
- Did you forget to return the HTML snippet from the story?
3
- Use "() => <your snippet or node>" or when defining the story.
4
- `})}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().
5
- 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};