@storybook/preview-api 8.1.0-alpha.4 → 8.1.0-alpha.5
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.ts +1 -1
- package/dist/index.js +4 -2
- package/dist/index.mjs +4 -2
- package/package.json +6 -6
package/dist/index.d.ts
CHANGED
|
@@ -442,7 +442,7 @@ type RenderType = 'story' | 'docs';
|
|
|
442
442
|
/**
|
|
443
443
|
* A "Render" represents the rendering of a single entry to a single location
|
|
444
444
|
*
|
|
445
|
-
* The
|
|
445
|
+
* The implementations of render are used for two key purposes:
|
|
446
446
|
* - Tracking the state of the rendering as it moves between preparing, rendering and tearing down.
|
|
447
447
|
* - Tracking what is rendered to know if a change requires re-rendering or teardown + recreation.
|
|
448
448
|
*/
|
package/dist/index.js
CHANGED
|
@@ -52,7 +52,9 @@ See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-
|
|
|
52
52
|
Omitted potentially unsafe URL args.
|
|
53
53
|
|
|
54
54
|
More info: https://storybook.js.org/docs/react/writing-stories/args#setting-args-through-the-url
|
|
55
|
-
`),acc),{})};var{history,document:document2}=import_global6.global;function pathToId(path){let match=(path||"").match(/^\/story\/(.+)/);if(!match)throw new Error(`Invalid path '${path}', must start with '/story/'`);return match[1]}var getQueryString=({selection,extraParams})=>{let
|
|
56
|
-
|
|
55
|
+
`),acc),{})};var{history,document:document2}=import_global6.global;function pathToId(path){let match=(path||"").match(/^\/story\/(.+)/);if(!match)throw new Error(`Invalid path '${path}', must start with '/story/'`);return match[1]}var getQueryString=({selection,extraParams})=>{let search=typeof document2<"u"?document2.location.search:"",{path,selectedKind,selectedStory,...rest}=import_qs2.default.parse(search,{ignoreQueryPrefix:!0});return import_qs2.default.stringify({...rest,...extraParams,...selection&&{id:selection.storyId,viewMode:selection.viewMode}},{encode:!1,addQueryPrefix:!0})},setPath=selection=>{if(!selection)return;let query=getQueryString({selection}),{hash=""}=document2.location;document2.title=selection.storyId,history.replaceState({},"",`${document2.location.pathname}${query}${hash}`)},isObject=val=>val!=null&&typeof val=="object"&&Array.isArray(val)===!1,getFirstString=v=>{if(v!==void 0){if(typeof v=="string")return v;if(Array.isArray(v))return getFirstString(v[0]);if(isObject(v))return getFirstString(Object.values(v).filter(Boolean))}},getSelectionSpecifierFromPath=()=>{if(typeof document2<"u"){let query=import_qs2.default.parse(document2.location.search,{ignoreQueryPrefix:!0}),args=typeof query.args=="string"?parseArgsParam(query.args):void 0,globals=typeof query.globals=="string"?parseArgsParam(query.globals):void 0,viewMode=getFirstString(query.viewMode);(typeof viewMode!="string"||!viewMode.match(/docs|story/))&&(viewMode="story");let path=getFirstString(query.path),storyId=path?pathToId(path):getFirstString(query.id);if(storyId)return{storySpecifier:storyId,args,globals,viewMode}}return null},UrlStore=class{constructor(){this.selectionSpecifier=getSelectionSpecifierFromPath()}setSelection(selection){this.selection=selection,setPath(this.selection)}setQueryParams(queryParams){let query=getQueryString({extraParams:queryParams}),{hash=""}=document2.location;history.replaceState({},"",`${document2.location.pathname}${query}${hash}`)}};var import_global7=require("@storybook/global"),import_client_logger13=require("@storybook/client-logger"),import_ansi_to_html=__toESM(require_ansi_to_html()),import_ts_dedent9=require("ts-dedent"),import_qs3=__toESM(require("qs")),{document:document3}=import_global7.global,PREPARING_DELAY=100,Mode=(Mode2=>(Mode2.MAIN="MAIN",Mode2.NOPREVIEW="NOPREVIEW",Mode2.PREPARING_STORY="PREPARING_STORY",Mode2.PREPARING_DOCS="PREPARING_DOCS",Mode2.ERROR="ERROR",Mode2))(Mode||{}),classes={PREPARING_STORY:"sb-show-preparing-story",PREPARING_DOCS:"sb-show-preparing-docs",MAIN:"sb-show-main",NOPREVIEW:"sb-show-nopreview",ERROR:"sb-show-errordisplay"},layoutClassMap={centered:"sb-main-centered",fullscreen:"sb-main-fullscreen",padded:"sb-main-padded"},ansiConverter=new import_ansi_to_html.default({escapeXML:!0}),WebView=class{constructor(){this.testing=!1;if(typeof document3<"u"){let{__SPECIAL_TEST_PARAMETER__}=import_qs3.default.parse(document3.location.search,{ignoreQueryPrefix:!0});switch(__SPECIAL_TEST_PARAMETER__){case"preparing-story":{this.showPreparingStory(),this.testing=!0;break}case"preparing-docs":{this.showPreparingDocs(),this.testing=!0;break}default:}}}prepareForStory(story){return this.showStory(),this.applyLayout(story.parameters.layout),document3.documentElement.scrollTop=0,document3.documentElement.scrollLeft=0,this.storyRoot()}storyRoot(){return document3.getElementById("storybook-root")}prepareForDocs(){return this.showMain(),this.showDocs(),this.applyLayout("fullscreen"),document3.documentElement.scrollTop=0,document3.documentElement.scrollLeft=0,this.docsRoot()}docsRoot(){return document3.getElementById("storybook-docs")}applyLayout(layout="padded"){if(layout==="none"){document3.body.classList.remove(this.currentLayoutClass),this.currentLayoutClass=null;return}this.checkIfLayoutExists(layout);let layoutClass=layoutClassMap[layout];document3.body.classList.remove(this.currentLayoutClass),document3.body.classList.add(layoutClass),this.currentLayoutClass=layoutClass}checkIfLayoutExists(layout){layoutClassMap[layout]||import_client_logger13.logger.warn(import_ts_dedent9.dedent`
|
|
56
|
+
The desired layout: ${layout} is not a valid option.
|
|
57
|
+
The possible options are: ${Object.keys(layoutClassMap).join(", ")}, none.
|
|
58
|
+
`)}showMode(mode){clearTimeout(this.preparingTimeout),Object.keys(Mode).forEach(otherMode=>{otherMode===mode?document3.body.classList.add(classes[otherMode]):document3.body.classList.remove(classes[otherMode])})}showErrorDisplay({message="",stack=""}){let header=message,detail=stack,parts=message.split(`
|
|
57
59
|
`);parts.length>1&&([header]=parts,detail=parts.slice(1).join(`
|
|
58
60
|
`).replace(/^\n/,"")),document3.getElementById("error-message").innerHTML=ansiConverter.toHtml(header),document3.getElementById("error-stack").innerHTML=ansiConverter.toHtml(detail),this.showMode("ERROR")}showNoPreview(){this.testing||(this.showMode("NOPREVIEW"),this.storyRoot()?.setAttribute("hidden","true"),this.docsRoot()?.setAttribute("hidden","true"))}showPreparingStory({immediate=!1}={}){clearTimeout(this.preparingTimeout),immediate?this.showMode("PREPARING_STORY"):this.preparingTimeout=setTimeout(()=>this.showMode("PREPARING_STORY"),PREPARING_DELAY)}showPreparingDocs({immediate=!1}={}){clearTimeout(this.preparingTimeout),immediate?this.showMode("PREPARING_DOCS"):this.preparingTimeout=setTimeout(()=>this.showMode("PREPARING_DOCS"),PREPARING_DELAY)}showMain(){this.showMode("MAIN")}showDocs(){this.storyRoot().setAttribute("hidden","true"),this.docsRoot().removeAttribute("hidden")}showStory(){this.docsRoot().setAttribute("hidden","true"),this.storyRoot().removeAttribute("hidden")}showStoryDuringRender(){document3.body.classList.add(classes.MAIN)}};var PreviewWeb=class extends PreviewWithSelection{constructor(importFn,getProjectAnnotations){super(importFn,getProjectAnnotations,new UrlStore,new WebView);this.importFn=importFn;this.getProjectAnnotations=getProjectAnnotations;import_global8.global.__STORYBOOK_PREVIEW__=this}};var import_global9=require("@storybook/global"),{document:document4}=import_global9.global,runScriptTypes=["application/javascript","application/ecmascript","application/x-ecmascript","application/x-javascript","text/ecmascript","text/javascript","text/javascript1.0","text/javascript1.1","text/javascript1.2","text/javascript1.3","text/javascript1.4","text/javascript1.5","text/jscript","text/livescript","text/x-ecmascript","text/x-javascript","module"],SCRIPT="script",SCRIPTS_ROOT_ID="scripts-root";function simulateDOMContentLoaded(){let DOMContentLoadedEvent=document4.createEvent("Event");DOMContentLoadedEvent.initEvent("DOMContentLoaded",!0,!0),document4.dispatchEvent(DOMContentLoadedEvent)}function insertScript($script,callback,$scriptRoot){let scriptEl=document4.createElement("script");scriptEl.type=$script.type==="module"?"module":"text/javascript",$script.src?(scriptEl.onload=callback,scriptEl.onerror=callback,scriptEl.src=$script.src):scriptEl.textContent=$script.innerText,$scriptRoot?$scriptRoot.appendChild(scriptEl):document4.head.appendChild(scriptEl),$script.parentNode.removeChild($script),$script.src||callback()}function insertScriptsSequentially(scriptsToExecute,callback,index=0){scriptsToExecute[index](()=>{index++,index===scriptsToExecute.length?callback():insertScriptsSequentially(scriptsToExecute,callback,index)})}function simulatePageLoad($container){let $scriptsRoot=document4.getElementById(SCRIPTS_ROOT_ID);$scriptsRoot?$scriptsRoot.innerHTML="":($scriptsRoot=document4.createElement("div"),$scriptsRoot.id=SCRIPTS_ROOT_ID,document4.body.appendChild($scriptsRoot));let $scripts=Array.from($container.querySelectorAll(SCRIPT));if($scripts.length){let scriptsToExecute=[];$scripts.forEach($script=>{let typeAttr=$script.getAttribute("type");(!typeAttr||runScriptTypes.includes(typeAttr))&&scriptsToExecute.push(callback=>insertScript($script,callback,$scriptsRoot))}),scriptsToExecute.length&&insertScriptsSequentially(scriptsToExecute,simulateDOMContentLoaded,void 0)}else simulateDOMContentLoaded()}0&&(module.exports={DocsContext,HooksContext,Preview,PreviewWeb,PreviewWithSelection,StoryStore,UrlStore,WebView,addons,applyHooks,combineArgs,combineParameters,composeConfigs,composeStepRunners,composeStories,composeStory,createPlaywrightTest,decorateStory,defaultDecorateStory,filterArgTypes,inferControls,makeDecorator,mockChannel,normalizeStory,prepareMeta,prepareStory,sanitizeStoryContextUpdate,setProjectAnnotations,simulateDOMContentLoaded,simulatePageLoad,sortStoriesV7,useArgs,useCallback,useChannel,useEffect,useGlobals,useMemo,useParameter,useReducer,useRef,useState,useStoryContext,userOrAutoTitle,userOrAutoTitleFromSpecifier});
|
package/dist/index.mjs
CHANGED
|
@@ -69,8 +69,10 @@ See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-
|
|
|
69
69
|
Omitted potentially unsafe URL args.
|
|
70
70
|
|
|
71
71
|
More info: https://storybook.js.org/docs/react/writing-stories/args#setting-args-through-the-url
|
|
72
|
-
`),acc),{})};var{history,document:document2}=global;function pathToId(path){let match=(path||"").match(/^\/story\/(.+)/);if(!match)throw new Error(`Invalid path '${path}', must start with '/story/'`);return match[1]}var getQueryString=({selection,extraParams})=>{let
|
|
73
|
-
|
|
72
|
+
`),acc),{})};var{history,document:document2}=global;function pathToId(path){let match=(path||"").match(/^\/story\/(.+)/);if(!match)throw new Error(`Invalid path '${path}', must start with '/story/'`);return match[1]}var getQueryString=({selection,extraParams})=>{let search=typeof document2<"u"?document2.location.search:"",{path,selectedKind,selectedStory,...rest}=qs2.parse(search,{ignoreQueryPrefix:!0});return qs2.stringify({...rest,...extraParams,...selection&&{id:selection.storyId,viewMode:selection.viewMode}},{encode:!1,addQueryPrefix:!0})},setPath=selection=>{if(!selection)return;let query=getQueryString({selection}),{hash=""}=document2.location;document2.title=selection.storyId,history.replaceState({},"",`${document2.location.pathname}${query}${hash}`);},isObject=val=>val!=null&&typeof val=="object"&&Array.isArray(val)===!1,getFirstString=v=>{if(v!==void 0){if(typeof v=="string")return v;if(Array.isArray(v))return getFirstString(v[0]);if(isObject(v))return getFirstString(Object.values(v).filter(Boolean))}},getSelectionSpecifierFromPath=()=>{if(typeof document2<"u"){let query=qs2.parse(document2.location.search,{ignoreQueryPrefix:!0}),args=typeof query.args=="string"?parseArgsParam(query.args):void 0,globals=typeof query.globals=="string"?parseArgsParam(query.globals):void 0,viewMode=getFirstString(query.viewMode);(typeof viewMode!="string"||!viewMode.match(/docs|story/))&&(viewMode="story");let path=getFirstString(query.path),storyId=path?pathToId(path):getFirstString(query.id);if(storyId)return {storySpecifier:storyId,args,globals,viewMode}}return null},UrlStore=class{constructor(){this.selectionSpecifier=getSelectionSpecifierFromPath();}setSelection(selection){this.selection=selection,setPath(this.selection);}setQueryParams(queryParams){let query=getQueryString({extraParams:queryParams}),{hash=""}=document2.location;history.replaceState({},"",`${document2.location.pathname}${query}${hash}`);}};var import_ansi_to_html=__toESM(require_ansi_to_html());var {document:document3}=global,PREPARING_DELAY=100,Mode=(Mode2=>(Mode2.MAIN="MAIN",Mode2.NOPREVIEW="NOPREVIEW",Mode2.PREPARING_STORY="PREPARING_STORY",Mode2.PREPARING_DOCS="PREPARING_DOCS",Mode2.ERROR="ERROR",Mode2))(Mode||{}),classes={PREPARING_STORY:"sb-show-preparing-story",PREPARING_DOCS:"sb-show-preparing-docs",MAIN:"sb-show-main",NOPREVIEW:"sb-show-nopreview",ERROR:"sb-show-errordisplay"},layoutClassMap={centered:"sb-main-centered",fullscreen:"sb-main-fullscreen",padded:"sb-main-padded"},ansiConverter=new import_ansi_to_html.default({escapeXML:!0}),WebView=class{constructor(){this.testing=!1;if(typeof document3<"u"){let{__SPECIAL_TEST_PARAMETER__}=qs2.parse(document3.location.search,{ignoreQueryPrefix:!0});switch(__SPECIAL_TEST_PARAMETER__){case"preparing-story":{this.showPreparingStory(),this.testing=!0;break}case"preparing-docs":{this.showPreparingDocs(),this.testing=!0;break}}}}prepareForStory(story){return this.showStory(),this.applyLayout(story.parameters.layout),document3.documentElement.scrollTop=0,document3.documentElement.scrollLeft=0,this.storyRoot()}storyRoot(){return document3.getElementById("storybook-root")}prepareForDocs(){return this.showMain(),this.showDocs(),this.applyLayout("fullscreen"),document3.documentElement.scrollTop=0,document3.documentElement.scrollLeft=0,this.docsRoot()}docsRoot(){return document3.getElementById("storybook-docs")}applyLayout(layout="padded"){if(layout==="none"){document3.body.classList.remove(this.currentLayoutClass),this.currentLayoutClass=null;return}this.checkIfLayoutExists(layout);let layoutClass=layoutClassMap[layout];document3.body.classList.remove(this.currentLayoutClass),document3.body.classList.add(layoutClass),this.currentLayoutClass=layoutClass;}checkIfLayoutExists(layout){layoutClassMap[layout]||logger.warn(dedent`
|
|
73
|
+
The desired layout: ${layout} is not a valid option.
|
|
74
|
+
The possible options are: ${Object.keys(layoutClassMap).join(", ")}, none.
|
|
75
|
+
`);}showMode(mode){clearTimeout(this.preparingTimeout),Object.keys(Mode).forEach(otherMode=>{otherMode===mode?document3.body.classList.add(classes[otherMode]):document3.body.classList.remove(classes[otherMode]);});}showErrorDisplay({message="",stack=""}){let header=message,detail=stack,parts=message.split(`
|
|
74
76
|
`);parts.length>1&&([header]=parts,detail=parts.slice(1).join(`
|
|
75
77
|
`).replace(/^\n/,"")),document3.getElementById("error-message").innerHTML=ansiConverter.toHtml(header),document3.getElementById("error-stack").innerHTML=ansiConverter.toHtml(detail),this.showMode("ERROR");}showNoPreview(){this.testing||(this.showMode("NOPREVIEW"),this.storyRoot()?.setAttribute("hidden","true"),this.docsRoot()?.setAttribute("hidden","true"));}showPreparingStory({immediate=!1}={}){clearTimeout(this.preparingTimeout),immediate?this.showMode("PREPARING_STORY"):this.preparingTimeout=setTimeout(()=>this.showMode("PREPARING_STORY"),PREPARING_DELAY);}showPreparingDocs({immediate=!1}={}){clearTimeout(this.preparingTimeout),immediate?this.showMode("PREPARING_DOCS"):this.preparingTimeout=setTimeout(()=>this.showMode("PREPARING_DOCS"),PREPARING_DELAY);}showMain(){this.showMode("MAIN");}showDocs(){this.storyRoot().setAttribute("hidden","true"),this.docsRoot().removeAttribute("hidden");}showStory(){this.docsRoot().setAttribute("hidden","true"),this.storyRoot().removeAttribute("hidden");}showStoryDuringRender(){document3.body.classList.add(classes.MAIN);}};var PreviewWeb=class extends PreviewWithSelection{constructor(importFn,getProjectAnnotations){super(importFn,getProjectAnnotations,new UrlStore,new WebView);this.importFn=importFn;this.getProjectAnnotations=getProjectAnnotations;global.__STORYBOOK_PREVIEW__=this;}};var{document:document4}=global,runScriptTypes=["application/javascript","application/ecmascript","application/x-ecmascript","application/x-javascript","text/ecmascript","text/javascript","text/javascript1.0","text/javascript1.1","text/javascript1.2","text/javascript1.3","text/javascript1.4","text/javascript1.5","text/jscript","text/livescript","text/x-ecmascript","text/x-javascript","module"],SCRIPT="script",SCRIPTS_ROOT_ID="scripts-root";function simulateDOMContentLoaded(){let DOMContentLoadedEvent=document4.createEvent("Event");DOMContentLoadedEvent.initEvent("DOMContentLoaded",!0,!0),document4.dispatchEvent(DOMContentLoadedEvent);}function insertScript($script,callback,$scriptRoot){let scriptEl=document4.createElement("script");scriptEl.type=$script.type==="module"?"module":"text/javascript",$script.src?(scriptEl.onload=callback,scriptEl.onerror=callback,scriptEl.src=$script.src):scriptEl.textContent=$script.innerText,$scriptRoot?$scriptRoot.appendChild(scriptEl):document4.head.appendChild(scriptEl),$script.parentNode.removeChild($script),$script.src||callback();}function insertScriptsSequentially(scriptsToExecute,callback,index=0){scriptsToExecute[index](()=>{index++,index===scriptsToExecute.length?callback():insertScriptsSequentially(scriptsToExecute,callback,index);});}function simulatePageLoad($container){let $scriptsRoot=document4.getElementById(SCRIPTS_ROOT_ID);$scriptsRoot?$scriptsRoot.innerHTML="":($scriptsRoot=document4.createElement("div"),$scriptsRoot.id=SCRIPTS_ROOT_ID,document4.body.appendChild($scriptsRoot));let $scripts=Array.from($container.querySelectorAll(SCRIPT));if($scripts.length){let scriptsToExecute=[];$scripts.forEach($script=>{let typeAttr=$script.getAttribute("type");(!typeAttr||runScriptTypes.includes(typeAttr))&&scriptsToExecute.push(callback=>insertScript($script,callback,$scriptsRoot));}),scriptsToExecute.length&&insertScriptsSequentially(scriptsToExecute,simulateDOMContentLoaded,void 0);}else simulateDOMContentLoaded();}
|
|
76
78
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/preview-api",
|
|
3
|
-
"version": "8.1.0-alpha.
|
|
3
|
+
"version": "8.1.0-alpha.5",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook"
|
|
@@ -44,12 +44,12 @@
|
|
|
44
44
|
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@storybook/channels": "8.1.0-alpha.
|
|
48
|
-
"@storybook/client-logger": "8.1.0-alpha.
|
|
49
|
-
"@storybook/core-events": "8.1.0-alpha.
|
|
47
|
+
"@storybook/channels": "8.1.0-alpha.5",
|
|
48
|
+
"@storybook/client-logger": "8.1.0-alpha.5",
|
|
49
|
+
"@storybook/core-events": "8.1.0-alpha.5",
|
|
50
50
|
"@storybook/csf": "^0.1.2",
|
|
51
51
|
"@storybook/global": "^5.0.0",
|
|
52
|
-
"@storybook/types": "8.1.0-alpha.
|
|
52
|
+
"@storybook/types": "8.1.0-alpha.5",
|
|
53
53
|
"@types/qs": "^6.9.5",
|
|
54
54
|
"dequal": "^2.0.2",
|
|
55
55
|
"lodash": "^4.17.21",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"util-deprecate": "^1.0.2"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
|
-
"@storybook/core-common": "8.1.0-alpha.
|
|
63
|
+
"@storybook/core-common": "8.1.0-alpha.5",
|
|
64
64
|
"ansi-to-html": "^0.6.11",
|
|
65
65
|
"slash": "^5.0.0"
|
|
66
66
|
},
|