@storybook/angular
Version:
Storybook for Angular: Develop, document, and test UI components in isolation
19 lines (15 loc) • 6.23 kB
JavaScript
var docsTools = require('storybook/internal/docs-tools');
var previewApi = require('storybook/preview-api');
var core = require('@angular/core');
require('rxjs');
require('@angular/compiler');
require('@angular/platform-browser');
require('telejson');
require('rxjs/operators');
require('@angular/common');
require('ts-dedent');
require('storybook/internal/core-events');
new core.InjectionToken("STORY_PROPS");var reflectionCapabilities=new core["ɵReflectionCapabilities"],getComponentInputsOutputs=component=>{let componentMetadata=getComponentDecoratorMetadata(component),componentPropsMetadata=getComponentPropsDecoratorMetadata(component),initialValue={inputs:[],outputs:[]};return componentMetadata&&componentMetadata.inputs&&initialValue.inputs.push(...componentMetadata.inputs.map(i=>({propName:typeof i=="string"?i:i.name,templateName:typeof i=="string"?i:i.alias}))),componentMetadata&&componentMetadata.outputs&&initialValue.outputs.push(...componentMetadata.outputs.map(i=>({propName:i,templateName:i}))),componentPropsMetadata?Object.entries(componentPropsMetadata).reduce((previousValue,[propertyName,values])=>{let value=values.find(v=>v instanceof core.Input||v instanceof core.Output);if(value instanceof core.Input){let inputToAdd={propName:propertyName,templateName:value.bindingPropertyName??value.alias??propertyName},previousInputsFiltered=previousValue.inputs.filter(i=>i.templateName!==propertyName);return {...previousValue,inputs:[...previousInputsFiltered,inputToAdd]}}if(value instanceof core.Output){let outputToAdd={propName:propertyName,templateName:value.bindingPropertyName??value.alias??propertyName},previousOutputsFiltered=previousValue.outputs.filter(i=>i.templateName!==propertyName);return {...previousValue,outputs:[...previousOutputsFiltered,outputToAdd]}}return previousValue},initialValue):initialValue};var getComponentPropsDecoratorMetadata=component=>reflectionCapabilities.propMetadata(component),getComponentDecoratorMetadata=component=>reflectionCapabilities.annotations(component).reverse().find(d=>d instanceof core.Component);var isValidIdentifier=name=>/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name),formatPropInTemplate=propertyName=>isValidIdentifier(propertyName)?propertyName:`this['${propertyName}']`,separateInputsOutputsAttributes=(ngComponentInputsOutputs,props={})=>{let inputs=ngComponentInputsOutputs.inputs.filter(i=>i.templateName in props).map(i=>i.templateName),outputs=ngComponentInputsOutputs.outputs.filter(o=>o.templateName in props).map(o=>o.templateName);return {inputs,outputs,otherProps:Object.keys(props).filter(k=>![...inputs,...outputs].includes(k))}};function stringifyCircular(obj){let seen=new Set;return JSON.stringify(obj,(key,value)=>{if(typeof value=="object"&&value!==null){if(seen.has(value))return "[Circular]";seen.add(value);}return value})}var createAngularInputProperty=({propertyName,value,argType})=>{let templateValue;switch(typeof value){case"string":templateValue=`'${value}'`;break;case"object":templateValue=stringifyCircular(value).replace(/'/g,"\u2019").replace(/\\"/g,"\u201D").replace(/"([^-"]+)":/g,"$1: ").replace(/"/g,"'").replace(/\u2019/g,"\\'").replace(/\u201D/g,"\\'").split(",").join(", ");break;default:templateValue=value;}return `[${propertyName}]="${templateValue}"`},computesTemplateSourceFromComponent=(component,initialProps,argTypes)=>{let ngComponentMetadata=getComponentDecoratorMetadata(component);if(!ngComponentMetadata)return null;if(!ngComponentMetadata.selector)return `<ng-container *ngComponentOutlet="${component.name}"></ng-container>`;let ngComponentInputsOutputs=getComponentInputsOutputs(component),{inputs:initialInputs,outputs:initialOutputs}=separateInputsOutputsAttributes(ngComponentInputsOutputs,initialProps),templateInputs=initialInputs.length>0?` ${initialInputs.map(propertyName=>createAngularInputProperty({propertyName,value:initialProps[propertyName],argType:argTypes?.[propertyName]})).join(" ")}`:"",templateOutputs=initialOutputs.length>0?` ${initialOutputs.map(i=>`(${i})="${formatPropInTemplate(i)}($event)"`).join(" ")}`:"";return buildTemplate(ngComponentMetadata.selector,"",templateInputs,templateOutputs)},buildTemplate=(selector,innerTemplate,inputs,outputs)=>{let voidElements=["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"],firstSelector=selector.split(",")[0];return [[/(^.*?)(?=[,])/,"$1"],[/(^\..+)/,"div$1"],[/(^\[.+?])/,"div$1"],[/([\w[\]]+)(\s*,[\w\s-[\],]+)+/,"$1"],[/#([\w-]+)/,' id="$1"'],[/((\.[\w-]+)+)/,(_,c)=>` class="${c.split`.`.join` `.trim()}"`],[/(\[.+?])/g,(_,a)=>` ${a.slice(1,-1)}`],[/([\S]+)(.*)/,(template,elementSelector)=>voidElements.some(element=>elementSelector===element)?template.replace(/([\S]+)(.*)/,`<$1$2${inputs}${outputs} />`):template.replace(/([\S]+)(.*)/,`<$1$2${inputs}${outputs}>${innerTemplate}</$1>`)]].reduce((prevSelector,[searchValue,replacer])=>prevSelector.replace(searchValue,replacer),firstSelector)};new core["ɵReflectionCapabilities"];new core["ɵReflectionCapabilities"];new core.InjectionToken("REMOVED_MODULES");var skipSourceRender=context=>{let sourceParams=context?.parameters.docs?.source;return sourceParams?.type===docsTools.SourceType.DYNAMIC?!1:sourceParams?.code||sourceParams?.type===docsTools.SourceType.CODE},sourceDecorator=(storyFn,context)=>{let story=storyFn(),source=previewApi.useRef(void 0);return previewApi.useEffect(()=>{if(skipSourceRender(context))return;let{props,userDefinedTemplate}=story,{component,argTypes,parameters:parameters2}=context,template=parameters2.docs?.source?.excludeDecorators?context.originalStoryFn(context.args,context).template:story.template;if(component&&!userDefinedTemplate){let newSource=computesTemplateSourceFromComponent(component,props,argTypes)||template;newSource&&newSource!==source.current&&(previewApi.emitTransformCode(newSource,context),source.current=newSource);}else template&&template!==source.current&&(previewApi.emitTransformCode(template,context),source.current=template);}),story};var parameters={docs:{source:{type:docsTools.SourceType.DYNAMIC,language:"html"}}},decorators=[sourceDecorator];
exports.decorators = decorators;
exports.parameters = parameters;
;