@storybook/preview 7.0.0-alpha.53

package/README.md

@@ -0,0 +1,94 @@
+# Preview (Web)
+
+This is the main API for the (web) version of the Storybook Preview.
+
+The preview's job is:
+
+1. Read and update the URL (via the URL Store)
+
+2. Listen to instructions on the channel and emit events as things occur.
+
+3. Render the current selection to the web view in either story or docs mode.
+
+## V7 Store vs Legacy (V6)
+
+The story store is designed to load stories 'on demand', and will operate in this fashion if the `storyStoreV7` feature is enabled.
+
+However, for back-compat reasons, in v6 mode, we need to load all stories, synchronously on bootup, emitting the `SET_STORIES` event.
+
+In V7 mode we do not emit that event, instead preferring the `STORY_PREPARED` event, with the data for the single story being rendered.
+
+## Initialization
+
+The preview is `initialized` in two ways.
+
+### V7 Mode:
+
+- `importFn` - is an async `import()` function
+
+- `getProjectAnnotations` - is a simple function that evaluations `preview.js` and addon config files and combines them. If it errors, the Preview will show the error.
+
+- No `getStoryIndex` function is passed, instead the preview creates a `StoryIndexClient` that pulls `stories.json` from node and watches the event stream for invalidation events.
+
+### V6 Mode
+
+- `importFn` - is a simulated `import()` function, that is synchronous, see `client-api` for details.
+- `getProjectAnnotations` - also evaluates `preview.js` et al, but watches for calls to `setStories`, and passes them to the `ClientApi`
+- `getStoryIndex` is a local function (that must be called _after_ `getProjectAnnotations`) that gets the list of stories added.
+
+See `client-api` for more details on this process.
+
+## Story Rendering and interruptions
+
+The Preview is split into three parts responsible for state management:
+
+- `PreviewWeb` - which story is rendered, receives events and (maybe) changes/re-renders stories
+- `StoryRender` - (imports +) prepares the story, renders it through the various phases
+- `DocsRender` - if a story renders in docs mode, it is "transformed" into a `DocsRender` once we know.
+
+A rendering story goes through these phases:
+
+- `preparing` - (maybe async) import the story file and prepare the story function.
+- `loading` - async loaders are running
+- `rendering` - the `renderToDOM` function for the framework is running
+- `playing` - the `play` function is running
+- `completed` - the story is done.
+
+It also has two error states:
+
+- `aborted` - the story was stopped midway (see below)
+- `errored` - there was an error thrown somewhere along the way.
+
+### Re-rendering and aborting
+
+A story may re-render due to various events, which can have implications if the story is not in the `completed` phase:
+
+- `UPDATE_STORY_ARGS` / `UPDATE_GLOBALS` -- change of inputs
+- `FORCE_RE_RENDER` - re-render unchanged
+
+If these events happen during a render:
+
+- if the story is `preparing` or `loading`, leave thing unchanged and let the new `args`/`globals` be picked up by the render phase
+- otherwise, use the result of the previous `loaders` run, and simply re-render over the top
+
+- `FORCE_REMOUNT` - remount (or equivalent) the component and re-render.
+
+If this happens during a render, treat `loading` similarly, but:
+
+- if the story is `rendering`, start a new render and abort the previous render immediately afterwards
+- if the story is `playing`, attempt to abort the previous play function, and start a new render.
+
+### Changing story
+
+Also the `SET_CURRENT_STORY` event may change the current story. We need to check:
+
+- If the `storyId` changed
+- If the `viewMode` changed
+- If the story implementation changed (i.e if HMR occurred).
+
+If the _previous_ story is still `preparing`, we cannot know if the implementation changed, so we
+abort the preparing immediately, and let the new story take over.
+
+Otherwise, if all of the above are the same, we do nothing.
+
+If they are different, and the old story is not `completed`, we try to abort it immediately. If that fails (e.g. the `play` function doesn't respond to the `abort` event), then we reload the window.

package/dist/chunk-IM5IP5SQ.mjs

@@ -0,0 +1 @@
+var r=Object.create;var e=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var b=(_=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(_,{get:(o,O)=>(typeof require!="undefined"?require:o)[O]}):_)(function(_){if(typeof require!="undefined")return require.apply(this,arguments);throw new Error('Dynamic require of "'+_+'" is not supported')});var i=(_,o)=>()=>(o||_((o={exports:{}}).exports,o),o.exports),k=(_,o)=>{for(var O in o)e(_,O,{get:o[O],enumerable:!0})},T=(_,o,O,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let E of R(o))!L.call(_,E)&&E!==O&&e(_,E,{get:()=>o[E],enumerable:!(t=n(o,E))||t.enumerable});return _};var s=(_,o,O)=>(O=_!=null?r(S(_)):{},T(o||!_||!_.__esModule?e(O,"default",{value:_,enumerable:!0}):O,_));var l=(_=>(_["@storybook/addons"]="__STORYBOOK_MODULE_ADDONS__",_["@storybook/channel-postmessage"]="__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__",_["@storybook/channel-websocket"]="__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__",_["@storybook/channels"]="__STORYBOOK_MODULE_CHANNELS__",_["@storybook/client-api"]="__STORYBOOK_MODULE_CLIENT_API__",_["@storybook/client-logger"]="__STORYBOOK_MODULE_CLIENT_LOGGER__",_["@storybook/core-client"]="__STORYBOOK_MODULE_CORE_CLIENT__",_["@storybook/core-events"]="__STORYBOOK_MODULE_CORE_EVENTS__",_["@storybook/preview-web"]="__STORYBOOK_MODULE_PREVIEW_WEB__",_["@storybook/store"]="__STORYBOOK_MODULE_STORE__",_))(l||{});export{b as a,i as b,k as c,s as d,l as e};

package/dist/globals.d.ts

@@ -0,0 +1,36 @@
+declare type ModuleType = "esm" | "cjs";
+
+/**
+ * Information that discribes a module to be imported.
+ */
+declare type ModuleInfo = {
+  /**
+   * Global variable name with which the import statements of the module
+   * should be replaced.
+   */
+  varName: string;
+
+  /**
+   * Type (either `"esm"` or `"cjs"`) that determines the internal behavior of
+   * this plugin. Defaults to `"esm"`.
+   */
+  type?: ModuleType;
+
+  /**
+   * Names of variables that are exported from the module and may be imported
+   * from another module.
+   * No effect if `type` is `"cjs"`.
+   */
+  namedExports?: readonly string[];
+
+  /**
+   * Set to `false` to prevent emitting code for default import/export
+   * (which you won't need to unless you are finicky).
+   * Defaults to `true`. No effect if `type` is `"cjs"`.
+   */
+  defaultExport?: boolean;
+};
+
+declare const definitions: Required<Record<"@storybook/addons" | "@storybook/channel-postmessage" | "@storybook/channel-websocket" | "@storybook/channels" | "@storybook/client-api" | "@storybook/client-logger" | "@storybook/core-client" | "@storybook/core-events" | "@storybook/preview-web" | "@storybook/store", Required<ModuleInfo>>>;
+
+export { definitions };

package/dist/globals.js

@@ -0,0 +1 @@
+"use strict";var n=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var l=(e,o)=>{for(var r in o)n(e,r,{get:o[r],enumerable:!0})},O=(e,o,r,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of S(o))!i.call(e,t)&&t!==r&&n(e,t,{get:()=>o[t],enumerable:!(a=E(o,t))||a.enumerable});return e};var T=e=>O(n({},"__esModule",{value:!0}),e);var u={};l(u,{definitions:()=>p});module.exports=T(u);var _={"@storybook/addons":["AddonStore","HooksContext","addons","applyHooks","isSupportedType","makeDecorator","mockChannel","types","useArgs","useCallback","useChannel","useEffect","useGlobals","useMemo","useParameter","useReducer","useRef","useState","useStoryContext"],"@storybook/channel-postmessage":["KEY","PostmsgTransport","createChannel"],"@storybook/channel-websocket":["WebsocketTransport","createChannel"],"@storybook/channels":["Channel"],"@storybook/client-api":["ClientApi","addArgTypes","addArgTypesEnhancer","addArgs","addArgsEnhancer","addDecorator","addLoader","addParameters","addStepRunner","getQueryParam","getQueryParams","setGlobalRender","DEEPLY_EQUAL","HooksContext","NO_TARGET_NAME","StoryStore","applyHooks","combineArgs","combineParameters","composeConfigs","composeStepRunners","composeStories","composeStory","decorateStory","deepDiff","defaultDecorateStory","filterArgTypes","getArrayField","getField","getObjectField","getSingletonField","getValuesFromArgTypes","groupArgsByTarget","inferControls","mapArgsToTypes","noTargetArgs","normalizeComponentAnnotations","normalizeInputType","normalizeInputTypes","normalizeProjectAnnotations","normalizeStory","prepareStory","processCSFFile","sanitizeStoryContextUpdate","setProjectAnnotations","sortStoriesV6","sortStoriesV7","useAddonState","useArgs","useCallback","useChannel","useEffect","useGlobals","useMemo","useParameter","useReducer","useRef","useSharedState","useState","useStoryContext","userOrAutoTitle","userOrAutoTitleFromSpecifier","validateOptions"],"@storybook/client-logger":["deprecate","logger","once","pretty"],"@storybook/core-client":["ClientApi","StoryStore","start"],"@storybook/core-events":["CHANNEL_CREATED","CONFIG_ERROR","CURRENT_STORY_WAS_SET","DOCS_RENDERED","FORCE_REMOUNT","FORCE_RE_RENDER","GLOBALS_UPDATED","IGNORED_EXCEPTION","NAVIGATE_URL","PLAY_FUNCTION_THREW_EXCEPTION","PRELOAD_ENTRIES","PREVIEW_BUILDER_PROGRESS","PREVIEW_KEYDOWN","REGISTER_SUBSCRIPTION","RESET_STORY_ARGS","SELECT_STORY","SET_CONFIG","SET_CURRENT_STORY","SET_GLOBALS","SET_INDEX","SET_STORIES","SHARED_STATE_CHANGED","SHARED_STATE_SET","STORIES_COLLAPSE_ALL","STORIES_EXPAND_ALL","STORY_ARGS_UPDATED","STORY_CHANGED","STORY_ERRORED","STORY_INDEX_INVALIDATED","STORY_MISSING","STORY_PREPARED","STORY_RENDERED","STORY_RENDER_PHASE_CHANGED","STORY_SPECIFIED","STORY_THREW_EXCEPTION","STORY_UNCHANGED","UPDATE_GLOBALS","UPDATE_QUERY_PARAMS","UPDATE_STORY_ARGS"],"@storybook/preview-web":["DocsContext","Preview","PreviewWeb","PreviewWithSelection","composeConfigs","simulateDOMContentLoaded","simulatePageLoad"],"@storybook/store":["DEEPLY_EQUAL","HooksContext","NO_TARGET_NAME","StoryStore","applyHooks","combineArgs","combineParameters","composeConfigs","composeStepRunners","composeStories","composeStory","decorateStory","deepDiff","defaultDecorateStory","filterArgTypes","getArrayField","getField","getObjectField","getSingletonField","getValuesFromArgTypes","groupArgsByTarget","inferControls","mapArgsToTypes","noTargetArgs","normalizeComponentAnnotations","normalizeInputType","normalizeInputTypes","normalizeProjectAnnotations","normalizeStory","prepareStory","processCSFFile","sanitizeStoryContextUpdate","setProjectAnnotations","sortStoriesV6","sortStoriesV7","useAddonState","useArgs","useCallback","useChannel","useEffect","useGlobals","useMemo","useParameter","useReducer","useRef","useSharedState","useState","useStoryContext","userOrAutoTitle","userOrAutoTitleFromSpecifier","validateOptions"]};var s=(e=>(e["@storybook/addons"]="__STORYBOOK_MODULE_ADDONS__",e["@storybook/channel-postmessage"]="__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__",e["@storybook/channel-websocket"]="__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__",e["@storybook/channels"]="__STORYBOOK_MODULE_CHANNELS__",e["@storybook/client-api"]="__STORYBOOK_MODULE_CLIENT_API__",e["@storybook/client-logger"]="__STORYBOOK_MODULE_CLIENT_LOGGER__",e["@storybook/core-client"]="__STORYBOOK_MODULE_CORE_CLIENT__",e["@storybook/core-events"]="__STORYBOOK_MODULE_CORE_EVENTS__",e["@storybook/preview-web"]="__STORYBOOK_MODULE_PREVIEW_WEB__",e["@storybook/store"]="__STORYBOOK_MODULE_STORE__",e))(s||{});var R=e=>({type:"esm",varName:s[e],namedExports:_[e],defaultExport:!0}),p=Object.keys(s).reduce((e,o)=>(e[o]=R(o),e),{});0&&(module.exports={definitions});

package/dist/globals.mjs

@@ -0,0 +1 @@
+import{e as o}from"./chunk-IM5IP5SQ.mjs";var r={"@storybook/addons":["AddonStore","HooksContext","addons","applyHooks","isSupportedType","makeDecorator","mockChannel","types","useArgs","useCallback","useChannel","useEffect","useGlobals","useMemo","useParameter","useReducer","useRef","useState","useStoryContext"],"@storybook/channel-postmessage":["KEY","PostmsgTransport","createChannel"],"@storybook/channel-websocket":["WebsocketTransport","createChannel"],"@storybook/channels":["Channel"],"@storybook/client-api":["ClientApi","addArgTypes","addArgTypesEnhancer","addArgs","addArgsEnhancer","addDecorator","addLoader","addParameters","addStepRunner","getQueryParam","getQueryParams","setGlobalRender","DEEPLY_EQUAL","HooksContext","NO_TARGET_NAME","StoryStore","applyHooks","combineArgs","combineParameters","composeConfigs","composeStepRunners","composeStories","composeStory","decorateStory","deepDiff","defaultDecorateStory","filterArgTypes","getArrayField","getField","getObjectField","getSingletonField","getValuesFromArgTypes","groupArgsByTarget","inferControls","mapArgsToTypes","noTargetArgs","normalizeComponentAnnotations","normalizeInputType","normalizeInputTypes","normalizeProjectAnnotations","normalizeStory","prepareStory","processCSFFile","sanitizeStoryContextUpdate","setProjectAnnotations","sortStoriesV6","sortStoriesV7","useAddonState","useArgs","useCallback","useChannel","useEffect","useGlobals","useMemo","useParameter","useReducer","useRef","useSharedState","useState","useStoryContext","userOrAutoTitle","userOrAutoTitleFromSpecifier","validateOptions"],"@storybook/client-logger":["deprecate","logger","once","pretty"],"@storybook/core-client":["ClientApi","StoryStore","start"],"@storybook/core-events":["CHANNEL_CREATED","CONFIG_ERROR","CURRENT_STORY_WAS_SET","DOCS_RENDERED","FORCE_REMOUNT","FORCE_RE_RENDER","GLOBALS_UPDATED","IGNORED_EXCEPTION","NAVIGATE_URL","PLAY_FUNCTION_THREW_EXCEPTION","PRELOAD_ENTRIES","PREVIEW_BUILDER_PROGRESS","PREVIEW_KEYDOWN","REGISTER_SUBSCRIPTION","RESET_STORY_ARGS","SELECT_STORY","SET_CONFIG","SET_CURRENT_STORY","SET_GLOBALS","SET_INDEX","SET_STORIES","SHARED_STATE_CHANGED","SHARED_STATE_SET","STORIES_COLLAPSE_ALL","STORIES_EXPAND_ALL","STORY_ARGS_UPDATED","STORY_CHANGED","STORY_ERRORED","STORY_INDEX_INVALIDATED","STORY_MISSING","STORY_PREPARED","STORY_RENDERED","STORY_RENDER_PHASE_CHANGED","STORY_SPECIFIED","STORY_THREW_EXCEPTION","STORY_UNCHANGED","UPDATE_GLOBALS","UPDATE_QUERY_PARAMS","UPDATE_STORY_ARGS"],"@storybook/preview-web":["DocsContext","Preview","PreviewWeb","PreviewWithSelection","composeConfigs","simulateDOMContentLoaded","simulatePageLoad"],"@storybook/store":["DEEPLY_EQUAL","HooksContext","NO_TARGET_NAME","StoryStore","applyHooks","combineArgs","combineParameters","composeConfigs","composeStepRunners","composeStories","composeStory","decorateStory","deepDiff","defaultDecorateStory","filterArgTypes","getArrayField","getField","getObjectField","getSingletonField","getValuesFromArgTypes","groupArgsByTarget","inferControls","mapArgsToTypes","noTargetArgs","normalizeComponentAnnotations","normalizeInputType","normalizeInputTypes","normalizeProjectAnnotations","normalizeStory","prepareStory","processCSFFile","sanitizeStoryContextUpdate","setProjectAnnotations","sortStoriesV6","sortStoriesV7","useAddonState","useArgs","useCallback","useChannel","useEffect","useGlobals","useMemo","useParameter","useReducer","useRef","useSharedState","useState","useStoryContext","userOrAutoTitle","userOrAutoTitleFromSpecifier","validateOptions"]};var s=e=>({type:"esm",varName:o[e],namedExports:r[e],defaultExport:!0}),E=Object.keys(o).reduce((e,t)=>(e[t]=s(t),e),{});export{E as definitions};

package/dist/runtime.d.ts

@@ -0,0 +1 @@
+