step 5

code/addons/docs/src/DocsRenderer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import type { AnyFramework, Parameters } from '@storybook/types';
-import type { DocsContextProps, DocsRenderFunction } from '@storybook/preview-web';
+import type { DocsContextProps, DocsRenderFunction } from '@storybook/preview-api';
 import { components as htmlComponents } from '@storybook/components';
 import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks';
 import { MDXProvider } from '@mdx-js/react';

code/frameworks/react-vite/src/index.ts

@@ -2,7 +2,7 @@
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
 export { addons } from '@storybook/preview-api';
-export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+export { composeConfigs, PreviewWeb } from '@storybook/preview-api';
 export { ClientApi } from '@storybook/preview-api';
 
 export type { StorybookConfig } from '@storybook/builder-vite';

code/frameworks/svelte-vite/src/index.ts

@@ -2,7 +2,7 @@
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
 export { addons } from '@storybook/preview-api';
-export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+export { composeConfigs, PreviewWeb } from '@storybook/preview-api';
 export { ClientApi } from '@storybook/preview-api';
 
 export type { StorybookConfig } from '@storybook/builder-vite';

code/frameworks/vue-vite/src/index.ts

@@ -2,7 +2,7 @@
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
 export { addons } from '@storybook/preview-api';
-export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+export { composeConfigs, PreviewWeb } from '@storybook/preview-api';
 export { ClientApi } from '@storybook/preview-api';
 
 export type { StorybookConfig } from '@storybook/builder-vite';

code/frameworks/vue3-vite/src/index.ts

@@ -2,7 +2,7 @@
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
 export { addons } from '@storybook/preview-api';
-export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+export { composeConfigs, PreviewWeb } from '@storybook/preview-api';
 export { ClientApi } from '@storybook/preview-api';
 
 export type { StorybookConfig } from '@storybook/builder-vite';

code/frameworks/web-components-vite/src/index.ts

@@ -2,7 +2,7 @@
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
 export { addons } from '@storybook/preview-api';
-export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+export { composeConfigs, PreviewWeb } from '@storybook/preview-api';
 export { ClientApi } from '@storybook/preview-api';
 
 export type { StorybookConfig } from '@storybook/builder-vite';

code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars

@@ -1,9 +1,7 @@
 import global from 'global';
 
-import { PreviewWeb } from '@storybook/preview-web';
 import { composeConfigs } from '@storybook/store';
-import { ClientApi } from '@storybook/preview-api';
+import { ClientApi, PreviewWeb, addons } from '@storybook/preview-api';
-import { addons } from '@storybook/preview-api';
 import { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 import { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
 

code/lib/preview-api/src/index.ts

@@ -34,6 +34,16 @@ export const { makeDecorator } = ADDONS;
  */
 export const { addons } = ADDONS;
 
+/**
+ * DOCS API
+ */
+export const { DocsContext } = PREVIEW_WEB;
+
+/**
+ * SIMULATION API
+ */
+export const { simulatePageLoad, simulateDOMContentLoaded } = PREVIEW_WEB;
+
 /**
  * STORIES API
  */

code/lib/preview-web/src/docs-context/DocsContextProps.ts

@@ -1,64 +1,3 @@
-import type {
+import type { DocsContextProps } from '@storybook/types';
-  AnyFramework,
-  Store_ModuleExport,
-  Store_ModuleExports,
-  Store_Story,
-  StoryContextForLoaders,
-  StoryId,
-  StoryName,
-} from '@storybook/types';
-import type { Channel } from '@storybook/channels';
 
-export interface DocsContextProps<TFramework extends AnyFramework = AnyFramework> {
+export { DocsContextProps };
-  /**
-   * Register the CSF file that this docs entry represents.
-   * Used by the `<Meta of={} />` block.
-   */
-  setMeta: (metaExports: Store_ModuleExports) => void;
-
-  /**
-   * Find a story's id from the direct export from the CSF file.
-   * This is primarily used by the `<Story of={} /> block.
-   */
-  storyIdByModuleExport: (
-    storyExport: Store_ModuleExport,
-    metaExports?: Store_ModuleExports
-  ) => StoryId;
-  /**
-   * Find a story's id from the name of the story.
-   * This is primarily used by the `<Story name={} /> block.
-   * Note that the story must be part of the primary CSF file of the docs entry.
-   */
-  storyIdByName: (storyName: StoryName) => StoryId;
-  /**
-   * Syncronously find a story by id (if the id is not provided, this will look up the primary
-   * story in the CSF file, if such a file exists).
-   */
-  storyById: (id?: StoryId) => Store_Story<TFramework>;
-  /**
-   * Syncronously find all stories of the component referenced by the CSF file.
-   */
-  componentStories: () => Store_Story<TFramework>[];
-
-  /**
-   * Get the story context of the referenced story.
-   */
-  getStoryContext: (story: Store_Story<TFramework>) => StoryContextForLoaders<TFramework>;
-  /**
-   * Asyncronously load an arbitrary story by id.
-   */
-  loadStory: (id: StoryId) => Promise<Store_Story<TFramework>>;
-
-  /**
-   * Render a story to a given HTML element and keep it up to date across context changes
-   */
-  renderStoryToElement: (
-    story: Store_Story<TFramework>,
-    element: HTMLElement
-  ) => () => Promise<void>;
-
-  /**
-   * Storybook channel -- use for low level event watching/emitting
-   */
-  channel: Channel;
-}

code/lib/types/src/index.ts

@@ -9,4 +9,5 @@ export * from './modules/core-client';
 export * from './modules/core-common';
 export * from './modules/builder';
 export * from './modules/api';
+export * from './modules/docs';
 export * from './modules/api-stories';

code/lib/types/src/modules/docs.ts

@@ -0,0 +1,57 @@
+import type { Channel } from '@storybook/channels';
+import type { AnyFramework, StoryContextForLoaders, StoryId, StoryName } from './csf';
+import type { Store_ModuleExport, Store_ModuleExports, Store_Story } from './store';
+
+export interface DocsContextProps<TFramework extends AnyFramework = AnyFramework> {
+  /**
+   * Register the CSF file that this docs entry represents.
+   * Used by the `<Meta of={} />` block.
+   */
+  setMeta: (metaExports: Store_ModuleExports) => void;
+
+  /**
+   * Find a story's id from the direct export from the CSF file.
+   * This is primarily used by the `<Story of={} /> block.
+   */
+  storyIdByModuleExport: (
+    storyExport: Store_ModuleExport,
+    metaExports?: Store_ModuleExports
+  ) => StoryId;
+  /**
+   * Find a story's id from the name of the story.
+   * This is primarily used by the `<Story name={} /> block.
+   * Note that the story must be part of the primary CSF file of the docs entry.
+   */
+  storyIdByName: (storyName: StoryName) => StoryId;
+  /**
+   * Syncronously find a story by id (if the id is not provided, this will look up the primary
+   * story in the CSF file, if such a file exists).
+   */
+  storyById: (id?: StoryId) => Store_Story<TFramework>;
+  /**
+   * Syncronously find all stories of the component referenced by the CSF file.
+   */
+  componentStories: () => Store_Story<TFramework>[];
+
+  /**
+   * Get the story context of the referenced story.
+   */
+  getStoryContext: (story: Store_Story<TFramework>) => StoryContextForLoaders<TFramework>;
+  /**
+   * Asyncronously load an arbitrary story by id.
+   */
+  loadStory: (id: StoryId) => Promise<Store_Story<TFramework>>;
+
+  /**
+   * Render a story to a given HTML element and keep it up to date across context changes
+   */
+  renderStoryToElement: (
+    story: Store_Story<TFramework>,
+    element: HTMLElement
+  ) => () => Promise<void>;
+
+  /**
+   * Storybook channel -- use for low level event watching/emitting
+   */
+  channel: Channel;
+}

code/renderers/html/src/render.ts

@@ -3,7 +3,7 @@
 import global from 'global';
 
 import { dedent } from 'ts-dedent';
-import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
+import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-api';
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 import type { HtmlFramework } from './types';
 

code/renderers/server/src/render.ts

@@ -4,7 +4,7 @@ import global from 'global';
 
 import { dedent } from 'ts-dedent';
 import type { Store_RenderContext } from '@storybook/types';
-import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
+import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-api';
 import type { StoryFn, Args, ArgTypes } from './public-types';
 import type { FetchStoryHtmlType, ServerFramework } from './types';
 

code/renderers/web-components/src/render.ts

@@ -7,7 +7,7 @@ import { render as litRender } from 'lit-html';
 // Keep `.js` extension to avoid issue with Webpack (related to export map?)
 // eslint-disable-next-line import/extensions
 import { isTemplateResult } from 'lit-html/directive-helpers.js';
-import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
+import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-api';
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 import type { WebComponentsFramework } from './types';
 

code/ui/blocks/package.json

@@ -48,6 +48,7 @@
     "@storybook/core-events": "7.0.0-alpha.47",
     "@storybook/csf": "next",
     "@storybook/docs-tools": "7.0.0-alpha.47",
+    "@storybook/preview-api": "7.0.0-alpha.47",
     "@storybook/preview-web": "7.0.0-alpha.47",
     "@storybook/store": "7.0.0-alpha.47",
     "@storybook/theming": "7.0.0-alpha.47",

code/ui/blocks/src/blocks/DocsContext.ts

@@ -3,8 +3,7 @@ import type { Context } from 'react';
 import { createContext } from 'react';
 import { window as globalWindow } from 'global';
 
-import type { DocsContextProps } from '@storybook/preview-web';
+import type { DocsContextProps, AnyFramework } from '@storybook/types';
-import type { AnyFramework } from '@storybook/types';
 
 export type { DocsContextProps };
 

code/ui/blocks/src/blocks/external/ExternalDocsContext.ts

@@ -3,10 +3,10 @@ import type {
   Store_CSFFile,
   Store_ModuleExport,
   Store_ModuleExports,
+  DocsContextProps,
 } from '@storybook/types';
-import { DocsContext } from '@storybook/preview-web';
+import { DocsContext } from '@storybook/preview-api';
 import type { StoryStore } from '@storybook/store';
-import type { DocsContextProps } from '@storybook/preview-web';
 import type { Channel } from '@storybook/channels';
 
 export class ExternalDocsContext<TFramework extends AnyFramework> extends DocsContext<TFramework> {

code/ui/blocks/src/blocks/external/ExternalPreview.ts

@@ -1,4 +1,4 @@
-import { Preview } from '@storybook/preview-web';
+import { Preview } from '@storybook/preview-api';
 import type {
   AnyFramework,
   ComponentTitle,