@storybook/web-components 0.0.0-pr-23609-sha-f47ef339

package/README.md

@@ -0,0 +1 @@
+# Storybook web-components renderer

package/dist/chunk-757FFUVQ.mjs

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

package/dist/config.d.ts

@@ -0,0 +1,13 @@
+import { Addon_DecoratorFunction, ArgTypesEnhancer, ArgsStoryFn, RenderContext } from '@storybook/types';
+import { S as StoryFnHtmlReturnType, W as WebComponentsRenderer } from './types-089d0f09.js';
+import 'lit';
+
+declare const decorators: Addon_DecoratorFunction<StoryFnHtmlReturnType>[];
+declare const argTypesEnhancers: ArgTypesEnhancer[];
+
+declare const render: ArgsStoryFn<WebComponentsRenderer>;
+declare function renderToCanvas({ storyFn, kind, name, showMain, showError, forceRemount }: RenderContext<WebComponentsRenderer>, canvasElement: WebComponentsRenderer['canvasElement']): void;
+
+declare const parameters: {};
+
+export { argTypesEnhancers, decorators, parameters, render, renderToCanvas };

package/dist/config.js

@@ -0,0 +1,5 @@
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var config_exports={};__export(config_exports,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters2,render:()=>render,renderToCanvas:()=>renderToCanvas});module.exports=__toCommonJS(config_exports);var import_docs_tools2=require("@storybook/docs-tools");var import_tiny_invariant=__toESM(require("tiny-invariant")),import_client_logger=require("@storybook/client-logger");var import_global4=require("@storybook/global");var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="web-components";var import_preview_api2=require("@storybook/preview-api");var import_global2=require("@storybook/global"),import_ts_dedent=require("ts-dedent"),import_lit=require("lit"),import_directive_helpers=require("lit/directive-helpers.js"),import_preview_api=require("@storybook/preview-api"),{Node}=import_global2.global,render=(args,context)=>{let{id,component}=context;if(!component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);let element=document.createElement(component);return Object.entries(args).forEach(([key,val])=>{element[key]=val}),element};function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),(0,import_directive_helpers.isTemplateResult)(element)){(forceRemount||!canvasElement.querySelector('[id="root-inner"]'))&&(canvasElement.innerHTML='<div id="root-inner"></div>');let renderTo=canvasElement.querySelector('[id="root-inner"]');(0,import_lit.render)(element,renderTo),(0,import_preview_api.simulatePageLoad)(canvasElement)}else if(typeof element=="string")canvasElement.innerHTML=element,(0,import_preview_api.simulatePageLoad)(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&!forceRemount)return;canvasElement.innerHTML="",canvasElement.appendChild(element),(0,import_preview_api.simulateDOMContentLoaded)()}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:import_ts_dedent.dedent`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `})}var api=(0,import_preview_api2.start)(renderToCanvas);var forceReRender=api.forceReRender,raw=api.clientApi.raw;var import_global3=require("@storybook/global");function isValidComponent(tagName){if(!tagName)return!1;if(typeof tagName=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function isValidMetaData(customElements){if(!customElements)return!1;if(customElements.tags&&Array.isArray(customElements.tags)||customElements.modules&&Array.isArray(customElements.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
+    See the readme of addon-docs for web components for more details.`)}function getCustomElements(){return import_global3.global.__STORYBOOK_CUSTOM_ELEMENTS__||import_global3.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:window2,EventSource}=import_global4.global,_a;typeof module<"u"&&((_a=module==null?void 0:module.hot)!=null&&_a.decline)&&(module.hot.decline(),new EventSource("__webpack_hmr").addEventListener("message",function(event){try{let{action}=JSON.parse(event.data);action==="built"&&window2.location.reload()}catch{}}));function mapItem(item,category){var _a2,_b;let type;switch(category){case"attributes":case"properties":type={name:((_a2=item.type)==null?void 0:_a2.text)||item.type};break;case"slots":type={name:"string"};break;default:type={name:"void"};break}return{name:item.name,required:!1,description:item.description,type,table:{category,type:{summary:((_b=item.type)==null?void 0:_b.text)||item.type},defaultValue:{summary:item.default!==void 0?item.default:item.defaultValue}}}}function mapEvent(item){let name=item.name.replace(/(-|_|:|\.|\s)+(.)?/g,(_match,_separator,chr)=>chr?chr.toUpperCase():"").replace(/^([A-Z])/,match=>match.toLowerCase());return name=`on${name.charAt(0).toUpperCase()+name.substr(1)}`,[{name,action:{name:item.name},table:{disable:!0}},mapItem(item,"events")]}function mapData(data,category){return data&&data.filter(item=>item&&item.name).reduce((acc,item)=>{if(item.kind==="method")return acc;switch(category){case"events":mapEvent(item).forEach(argType=>{(0,import_tiny_invariant.default)(argType.name,`${argType} should have a name property.`),acc[argType.name]=argType});break;default:acc[item.name]=mapItem(item,category);break}return acc},{})}var getMetaDataExperimental=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metaData=customElements.tags.find(tag=>tag.name.toUpperCase()===tagName.toUpperCase());return metaData||import_client_logger.logger.warn(`Component not found in custom-elements.json: ${tagName}`),metaData},getMetaDataV1=(tagName,customElements)=>{var _a2;if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metadata;return(_a2=customElements==null?void 0:customElements.modules)==null||_a2.forEach(_module=>{var _a3;(_a3=_module==null?void 0:_module.declarations)==null||_a3.forEach(declaration=>{declaration.tagName===tagName&&(metadata=declaration)})}),metadata||import_client_logger.logger.warn(`Component not found in custom-elements.json: ${tagName}`),metadata},getMetaData=(tagName,manifest)=>(manifest==null?void 0:manifest.version)==="experimental"?getMetaDataExperimental(tagName,manifest):getMetaDataV1(tagName,manifest),extractArgTypesFromElements=(tagName,customElements)=>{let metaData=getMetaData(tagName,customElements);return metaData&&{...mapData(metaData.members??[],"properties"),...mapData(metaData.properties??[],"properties"),...mapData(metaData.attributes??[],"attributes"),...mapData(metaData.events??[],"events"),...mapData(metaData.slots??[],"slots"),...mapData(metaData.cssProperties??[],"css custom properties"),...mapData(metaData.cssParts??[],"css shadow parts")}},extractArgTypes=tagName=>{let cem=getCustomElements();return extractArgTypesFromElements(tagName,cem)},extractComponentDescription=tagName=>{let metaData=getMetaData(tagName,getCustomElements());return metaData&&metaData.description};var import_lit2=require("lit"),import_preview_api3=require("@storybook/preview-api"),import_docs_tools=require("@storybook/docs-tools"),LIT_EXPRESSION_COMMENTS=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function skipSourceRender(context){var _a2;let sourceParams=(_a2=context==null?void 0:context.parameters.docs)==null?void 0:_a2.source,isArgsStory=context==null?void 0:context.parameters.__isArgsStory;return(sourceParams==null?void 0:sourceParams.type)===import_docs_tools.SourceType.DYNAMIC?!1:!isArgsStory||(sourceParams==null?void 0:sourceParams.code)||(sourceParams==null?void 0:sourceParams.type)===import_docs_tools.SourceType.CODE}function sourceDecorator(storyFn,context){var _a2,_b;let story=storyFn(),renderedForSource=(_b=(_a2=context==null?void 0:context.parameters.docs)==null?void 0:_a2.source)!=null&&_b.excludeDecorators?context.originalStoryFn(context.args,context):story,source;if((0,import_preview_api3.useEffect)(()=>{let{id,unmappedArgs}=context;source&&import_preview_api3.addons.getChannel().emit(import_docs_tools.SNIPPET_RENDERED,{id,source,args:unmappedArgs})}),!skipSourceRender(context)){let container=window.document.createElement("div");renderedForSource instanceof DocumentFragment?(0,import_lit2.render)(renderedForSource.cloneNode(!0),container):(0,import_lit2.render)(renderedForSource,container),source=container.innerHTML.replace(LIT_EXPRESSION_COMMENTS,"")}return story}var decorators=[sourceDecorator],parameters={docs:{extractArgTypes,extractComponentDescription,story:{inline:!0},source:{type:import_docs_tools2.SourceType.DYNAMIC,language:"html"}}},argTypesEnhancers=[import_docs_tools2.enhanceArgTypes];var parameters2={renderer:"web-components",...parameters};0&&(module.exports={argTypesEnhancers,decorators,parameters,render,renderToCanvas});

package/dist/config.mjs

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

package/dist/index.d.ts

@@ -0,0 +1,58 @@
+import { Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
+export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
+import { W as WebComponentsRenderer } from './types-089d0f09.js';
+import 'lit';
+
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+type Meta<TArgs = Args> = ComponentAnnotations<WebComponentsRenderer, 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)
+ */
+type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsRenderer, 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)
+ */
+type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsRenderer, TArgs>;
+/**
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+type Story<TArgs = Args> = StoryFn<TArgs>;
+type Decorator<TArgs = StrictArgs> = DecoratorFunction<WebComponentsRenderer, TArgs>;
+type Loader<TArgs = StrictArgs> = LoaderFunction<WebComponentsRenderer, TArgs>;
+type StoryContext<TArgs = StrictArgs> = StoryContext$1<WebComponentsRenderer, TArgs>;
+type Preview = ProjectAnnotations<WebComponentsRenderer>;
+
+interface ClientApi extends Addon_ClientStoryApi<WebComponentsRenderer['storyResult']> {
+    configure(loader: Addon_Loadable, module: NodeModule): void;
+    forceReRender(): void;
+    raw: () => any;
+}
+declare const storiesOf: ClientApi['storiesOf'];
+declare const configure: ClientApi['configure'];
+declare const forceReRender: ClientApi['forceReRender'];
+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 { Decorator, Loader, Meta, Preview, Story, StoryContext, StoryFn, StoryObj, WebComponentsRenderer, configure, forceReRender, getCustomElements, isValidComponent, isValidMetaData, raw, setCustomElements, setCustomElementsManifest, storiesOf };

package/dist/index.js

@@ -0,0 +1,5 @@
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{configure:()=>configure,forceReRender:()=>forceReRender,getCustomElements:()=>getCustomElements,isValidComponent:()=>isValidComponent,isValidMetaData:()=>isValidMetaData,raw:()=>raw,setCustomElements:()=>setCustomElements,setCustomElementsManifest:()=>setCustomElementsManifest,storiesOf:()=>storiesOf});module.exports=__toCommonJS(src_exports);var import_global4=require("@storybook/global");var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="web-components";var import_preview_api2=require("@storybook/preview-api");var import_global2=require("@storybook/global"),import_ts_dedent=require("ts-dedent"),import_lit=require("lit"),import_directive_helpers=require("lit/directive-helpers.js"),import_preview_api=require("@storybook/preview-api"),{Node}=import_global2.global;function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),(0,import_directive_helpers.isTemplateResult)(element)){(forceRemount||!canvasElement.querySelector('[id="root-inner"]'))&&(canvasElement.innerHTML='<div id="root-inner"></div>');let renderTo=canvasElement.querySelector('[id="root-inner"]');(0,import_lit.render)(element,renderTo),(0,import_preview_api.simulatePageLoad)(canvasElement)}else if(typeof element=="string")canvasElement.innerHTML=element,(0,import_preview_api.simulatePageLoad)(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&!forceRemount)return;canvasElement.innerHTML="",canvasElement.appendChild(element),(0,import_preview_api.simulateDOMContentLoaded)()}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:import_ts_dedent.dedent`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `})}var RENDERER="web-components",api=(0,import_preview_api2.start)(renderToCanvas),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:RENDERER}),configure=(...args)=>api.configure(RENDERER,...args),forceReRender=api.forceReRender,raw=api.clientApi.raw;var import_global3=require("@storybook/global");function isValidComponent(tagName){if(!tagName)return!1;if(typeof tagName=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function isValidMetaData(customElements){if(!customElements)return!1;if(customElements.tags&&Array.isArray(customElements.tags)||customElements.modules&&Array.isArray(customElements.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
+    See the readme of addon-docs for web components for more details.`)}function setCustomElements(customElements){import_global3.global.__STORYBOOK_CUSTOM_ELEMENTS__=customElements}function setCustomElementsManifest(customElements){import_global3.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=customElements}function getCustomElements(){return import_global3.global.__STORYBOOK_CUSTOM_ELEMENTS__||import_global3.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window,EventSource}=import_global4.global,_a;typeof module<"u"&&((_a=module==null?void 0:module.hot)!=null&&_a.decline)&&(module.hot.decline(),new EventSource("__webpack_hmr").addEventListener("message",function(event){try{let{action}=JSON.parse(event.data);action==="built"&&window.location.reload()}catch{}}));0&&(module.exports={configure,forceReRender,getCustomElements,isValidComponent,isValidMetaData,raw,setCustomElements,setCustomElementsManifest,storiesOf});

package/dist/index.mjs

@@ -0,0 +1 @@
+export { configure, forceReRender, getCustomElements, isValidComponent, isValidMetaData, raw, setCustomElements, setCustomElementsManifest, storiesOf } from './chunk-757FFUVQ.mjs';

package/dist/types-089d0f09.d.ts

@@ -0,0 +1,10 @@
+import { WebRenderer } from '@storybook/types';
+import { TemplateResult, SVGTemplateResult } from 'lit';
+
+type StoryFnHtmlReturnType = string | Node | DocumentFragment | TemplateResult | SVGTemplateResult;
+interface WebComponentsRenderer extends WebRenderer {
+    component: string;
+    storyResult: StoryFnHtmlReturnType;
+}
+
+export { StoryFnHtmlReturnType as S, WebComponentsRenderer as W };

package/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@storybook/web-components",
+  "version": "0.0.0-pr-23609-sha-f47ef339",
+  "description": "Storybook web-components renderer",
+  "keywords": [
+    "lit",
+    "lit-html",
+    "storybook",
+    "web-components"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/renderers/web-components",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/renderers/web-components"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./dist/index.js",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./preview": {
+      "types": "./dist/config.d.ts",
+      "require": "./dist/config.js",
+      "import": "./dist/config.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "template/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "../../../scripts/prepare/check.ts",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@storybook/client-logger": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/core-client": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/docs-tools": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/global": "^5.0.0",
+    "@storybook/manager-api": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/preview-api": "0.0.0-pr-23609-sha-f47ef339",
+    "@storybook/types": "0.0.0-pr-23609-sha-f47ef339",
+    "tiny-invariant": "^1.3.1",
+    "ts-dedent": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/cross-spawn": "^6.0.2",
+    "@types/node": "^16.0.0",
+    "cross-spawn": "^7.0.3",
+    "lit": "2.3.1",
+    "typescript": "~4.9.3",
+    "web-component-analyzer": "^1.1.6"
+  },
+  "peerDependencies": {
+    "lit": "^2.0.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/config.ts"
+    ],
+    "platform": "browser"
+  },
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
+}

package/preview.js

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

package/src/docs/__testfixtures__/lit-element-demo-card/input.js

@@ -0,0 +1,199 @@
+import { global } from '@storybook/global';
+
+import { LitElement, html, css } from 'lit-element';
+
+const { CustomEvent } = global;
+
+const demoWcCardStyle = css`
+  :host {
+    display: block;
+    position: relative;
+    width: 250px;
+    height: 200px;
+    border-radius: 10px;
+    transform-style: preserve-3d;
+    transition: all 0.8s ease;
+  }
+
+  .header {
+    font-weight: bold;
+    font-size: var(--demo-wc-card-header-font-size, 16px);
+    text-align: center;
+  }
+
+  .content {
+    padding: 20px 10px 0 10px;
+    flex-grow: 1;
+  }
+
+  .footer {
+    display: flex;
+  }
+
+  dl {
+    margin: 0;
+    text-align: left;
+  }
+
+  dd {
+    margin-left: 15px;
+  }
+
+  button {
+    border-radius: 15px;
+    width: 30px;
+    height: 30px;
+    background: #fff;
+    border: 1px solid #ccc;
+    color: #000;
+    font-size: 21px;
+    line-height: 27px;
+    font-weight: bold;
+    cursor: pointer;
+    margin: 5px;
+  }
+
+  .note {
+    flex-grow: 1;
+    color: #666;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: left;
+    padding-top: 15px;
+  }
+
+  :host([back-side]) {
+    transform: rotateY(180deg);
+  }
+
+  #front,
+  #back {
+    position: absolute;
+    width: 250px;
+    box-sizing: border-box;
+    box-shadow: #ccc 3px 3px 2px 1px;
+    padding: 10px;
+    display: flex;
+    flex-flow: column;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: 10px;
+    backface-visibility: hidden;
+    overflow: hidden;
+  }
+
+  #front {
+    background: linear-gradient(141deg, #aaa 25%, #eee 40%, #ddd 55%);
+    color: var(--demo-wc-card-front-color, #000);
+  }
+
+  #back {
+    background: linear-gradient(141deg, #333 25%, #aaa 40%, #666 55%);
+    color: var(--demo-wc-card-back-color, #fff);
+    text-align: center;
+    transform: rotateY(180deg) translate3d(0px, 0, 1px);
+  }
+
+  #back .note {
+    color: #fff;
+  }
+`;
+
+/**
+ * This is a container looking like a card with a back and front side you can switch
+ *
+ * @slot - This is an unnamed slot (the default slot)
+ * @fires side-changed - Fires whenever it switches between front/back
+ * @cssprop --demo-wc-card-header-font-size - Header font size
+ * @cssprop --demo-wc-card-front-color - Font color for front
+ * @cssprop --demo-wc-card-back-color - Font color for back
+ * @csspart front - Front of the card
+ * @csspart back - Back of the card
+ */
+export class DemoWcCard extends LitElement {
+  static get properties() {
+    return {
+      backSide: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'back-side',
+      },
+      header: { type: String },
+      rows: { type: Object },
+    };
+  }
+
+  static get styles() {
+    return demoWcCardStyle;
+  }
+
+  constructor() {
+    super();
+
+    /**
+     * Indicates that the back of the card is shown
+     */
+    this.backSide = false;
+
+    /**
+     * Header message
+     */
+    this.header = 'Your Message';
+
+    /**
+     * Data rows
+     */
+    this.rows = [];
+  }
+
+  toggle() {
+    this.backSide = !this.backSide;
+  }
+
+  render() {
+    return html`
+      <div id="front" part="front">
+        <div class="header">${this.header}</div>
+        <div class="content">
+          <slot></slot>
+        </div>
+        <div class="footer">
+          <div class="note">A</div>
+          <button @click=${this.toggle}>></button>
+        </div>
+      </div>
+      <div id="back" part="back">
+        <div class="header">${this.header}</div>
+
+        <div class="content">
+          ${this.rows.length === 0
+            ? html``
+            : html`
+                <dl>
+                  ${this.rows.map(
+                    (row) => html`
+                      <dt>${row.header}</dt>
+                      <dd>${row.value}</dd>
+                    `
+                  )}
+                </dl>
+              `}
+        </div>
+        <div class="footer">
+          <div class="note">B</div>
+          <button @click=${this.toggle}>></button>
+        </div>
+      </div>
+    `;
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('backSide') && changedProperties.get('backSide') !== undefined) {
+      this.dispatchEvent(new CustomEvent('side-changed'));
+    }
+  }
+}
+
+// eslint-disable-next-line no-undef
+customElements.define('input', DemoWcCard);

package/src/docs/__testfixtures__/lit-html-welcome/input.js

@@ -0,0 +1,61 @@
+import { html } from 'lit';
+
+export const Welcome = () => html`
+  <div class="main">
+    <h1>Welcome to Storybook for Web Components</h1>
+    <p>This is a UI component dev environment for your plain HTML snippets.</p>
+    <p>
+      We've added some basic stories inside the <code class="code">stories</code> directory.
+      <br />
+      A story is a single state of one or more UI components. You can have as many stories as you
+      want.
+      <br />
+      (Basically a story is like a visual test case.)
+    </p>
+    <p>
+      See these sample
+      <a class="link" href="#" data-sb-kind="Demo Card" data-sb-story="Front">stories</a>
+    </p>
+    <p>
+      Just like that, you can add your own snippets as stories.
+      <br />
+      You can also edit those snippets and see changes right away.
+      <br />
+    </p>
+    <p>
+      Usually we create stories with smaller UI components in the app.<br />
+      Have a look at the
+      <a class="link" href="https://storybook.js.org/basics/writing-stories" target="_blank">
+        Writing Stories
+      </a>
+      section in our documentation.
+    </p>
+  </div>
+
+  <style>
+    .main {
+      padding: 15px;
+      line-height: 1.4;
+      font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+      background-color: #ffffff;
+    }
+
+    .logo {
+      width: 256px;
+      margin: 15px;
+    }
+
+    .code {
+      font-size: 15px;
+      font-weight: 600;
+      padding: 2px 5px;
+      border: 1px solid #eae9e9;
+      border-radius: 4px;
+      background-color: #f3f2f2;
+      color: #3a3a3a;
+    }
+  </style>
+`;
+
+// eslint-disable-next-line no-undef
+customElements.define('input', Welcome);

package/src/typings.d.ts

@@ -0,0 +1,5 @@
+/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */
+declare var STORYBOOK_ENV: 'web-components';
+declare var __STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__: any;
+declare var __STORYBOOK_CUSTOM_ELEMENTS__: any;
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

package/template/cli/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "import/extensions": "off"
+  }
+}

package/template/cli/js/Button.js

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import './button.css';
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+  return html`
+    <button
+      type="button"
+      class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}
+      style=${styleMap({ backgroundColor })}
+      @click=${onClick}
+    >
+      ${label}
+    </button>
+  `;
+};

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

@@ -0,0 +1,44 @@
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
+export default {
+  title: 'Example/Button',
+  tags: ['autodocs'],
+  render: (args) => Button(args),
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    onClick: { action: 'onClick' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/web-components/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/template/cli/js/Header.js

@@ -0,0 +1,45 @@
+import { html } from 'lit';
+
+import { Button } from './Button';
+import './header.css';
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html`
+  <header>
+    <div class="storybook-header">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        ${user
+          ? Button({ size: 'small', onClick: onLogout, label: 'Log out' })
+          : html`${Button({
+              size: 'small',
+              onClick: onLogin,
+              label: 'Log in',
+            })}
+            ${Button({
+              primary: true,
+              size: 'small',
+              onClick: onCreateAccount,
+              label: 'Sign up',
+            })}`}
+      </div>
+    </div>
+  </header>
+`;