fixes

code/lib/builder-webpack5/src/index.ts

@@ -8,6 +8,7 @@ import { checkWebpackVersion } from '@storybook/core-webpack';
 import { dirname, join, parse } from 'path';
 import express from 'express';
 import fs from 'fs-extra';
+import { PREVIEW_BUILDER_PROGRESS } from '@storybook/core-events';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import prettyTime from 'pretty-hrtime';
@@ -161,7 +162,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
         }
       }
 
-      channel.emit('preview_builder_progress', [progress]);
+      channel.emit(PREVIEW_BUILDER_PROGRESS, [progress]);
     },
     modulesCount,
   }).apply(compiler);

code/lib/core-events/src/index.ts

@@ -51,6 +51,8 @@ enum events {
   REGISTER_SUBSCRIPTION = 'registerSubscription',
   // Tell the manager that the user pressed a key in the preview
   PREVIEW_KEYDOWN = 'previewKeydown',
+  // Tell the preview that the builder is in progress
+  PREVIEW_BUILDER_PROGRESS = 'preview_builder_progress',
   // Used in the manager to change the story selection
   SELECT_STORY = 'selectStory',
   STORIES_COLLAPSE_ALL = 'storiesCollapseAll',
@@ -70,41 +72,42 @@ export default events;
 export const {
   CHANNEL_CREATED,
   CONFIG_ERROR,
-  STORY_INDEX_INVALIDATED,
-  STORY_SPECIFIED,
-  SET_STORIES,
-  SET_INDEX,
-  SET_CONFIG,
-  SET_CURRENT_STORY,
   CURRENT_STORY_WAS_SET,
+  DOCS_RENDERED,
   FORCE_RE_RENDER,
   FORCE_REMOUNT,
-  STORY_PREPARED,
-  STORY_CHANGED,
-  STORY_UNCHANGED,
-  PRELOAD_ENTRIES,
-  STORY_RENDERED,
-  STORY_MISSING,
-  STORY_ERRORED,
-  STORY_THREW_EXCEPTION,
-  STORY_RENDER_PHASE_CHANGED,
-  PLAY_FUNCTION_THREW_EXCEPTION,
-  UPDATE_STORY_ARGS,
-  STORY_ARGS_UPDATED,
-  RESET_STORY_ARGS,
-  SET_GLOBALS,
-  UPDATE_GLOBALS,
   GLOBALS_UPDATED,
-  REGISTER_SUBSCRIPTION,
+  NAVIGATE_URL,
+  PLAY_FUNCTION_THREW_EXCEPTION,
+  PRELOAD_ENTRIES,
+  PREVIEW_BUILDER_PROGRESS,
   PREVIEW_KEYDOWN,
+  REGISTER_SUBSCRIPTION,
+  RESET_STORY_ARGS,
   SELECT_STORY,
-  STORIES_COLLAPSE_ALL,
+  SET_CONFIG,
-  STORIES_EXPAND_ALL,
+  SET_CURRENT_STORY,
-  DOCS_RENDERED,
+  SET_GLOBALS,
+  SET_INDEX,
+  SET_STORIES,
   SHARED_STATE_CHANGED,
   SHARED_STATE_SET,
-  NAVIGATE_URL,
+  STORIES_COLLAPSE_ALL,
+  STORIES_EXPAND_ALL,
+  STORY_ARGS_UPDATED,
+  STORY_CHANGED,
+  STORY_ERRORED,
+  STORY_INDEX_INVALIDATED,
+  STORY_MISSING,
+  STORY_PREPARED,
+  STORY_RENDER_PHASE_CHANGED,
+  STORY_RENDERED,
+  STORY_SPECIFIED,
+  STORY_THREW_EXCEPTION,
+  STORY_UNCHANGED,
+  UPDATE_GLOBALS,
   UPDATE_QUERY_PARAMS,
+  UPDATE_STORY_ARGS,
 } = events;
 
 // Used to break out of the current render without showing a redbox

code/lib/preview/package.json

@@ -33,9 +33,9 @@
     },
     "./package.json": "./package.json"
   },
-  "main": "dist/index.js",
+  "main": "dist/runtime.js",
-  "module": "dist/index.mjs",
+  "module": "dist/runtime.mjs",
-  "types": "dist/index.d.ts",
+  "types": "dist/runtime.d.ts",
   "typesVersions": {
     "*": {
       "*": [

code/lib/preview/src/globals/definitions.ts

@@ -18,8 +18,8 @@ import type { Definitions } from './types';
  *
  * If you forget to do either, TypeScript will complain.
  *
- * This `definitions.ts` file is consumed by the `builder-manager` package,
+ * This `definitions.ts` file is consumed by the `builder-*` package,
- * The `runtime.ts` file is used inside the manager's browser code runtime.
+ * The `runtime.ts` file is used inside the preview's browser code runtime.
  */
 
 const createModuleInfo = (m: keyof typeof Keys): Required<ModuleInfo> => ({

code/lib/preview/src/globals/exports.ts

@@ -106,6 +106,7 @@ export default {
     'NAVIGATE_URL',
     'PLAY_FUNCTION_THREW_EXCEPTION',
     'PRELOAD_ENTRIES',
+    'PREVIEW_BUILDER_PROGRESS',
     'PREVIEW_KEYDOWN',
     'REGISTER_SUBSCRIPTION',
     'RESET_STORY_ARGS',

code/ui/components/src/Loader/Loader.tsx

@@ -104,7 +104,7 @@ interface LoaderProps {
   size?: number;
 }
 
-export const PureLoader: FC<LoaderProps & ComponentProps<typeof ProgressWrapper>> = ({
+export const Loader: FC<LoaderProps & ComponentProps<typeof ProgressWrapper>> = ({
   progress,
   error,
   size,
@@ -155,5 +155,3 @@ export const PureLoader: FC<LoaderProps & ComponentProps<typeof ProgressWrapper>
     />
   );
 };
-
-export const Loader = PureLoader;

code/ui/manager/src/components/preview/preview.tsx

@@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet-async';
 import global from 'global';
 
 import { type API, Consumer, type Combo, merge } from '@storybook/api';
-import { SET_CURRENT_STORY } from '@storybook/core-events';
+import { PREVIEW_BUILDER_PROGRESS, SET_CURRENT_STORY } from '@storybook/core-events';
 import { addons, types, type Addon } from '@storybook/addons';
 
 import { PureLoader } from '@storybook/components';
@@ -66,7 +66,7 @@ const createCanvas = (id: string, baseUrl = 'iframe.html', withLoader = true): A
             if (global.CONFIG_TYPE === 'DEVELOPMENT') {
               const channel = addons.getServerChannel();
 
-              channel.on('preview_builder_progress', (options) => {
+              channel.on(PREVIEW_BUILDER_PROGRESS, (options) => {
                 setProgress(options);
               });
             }

code/ui/manager/src/globals/exports.ts

@@ -124,6 +124,7 @@ export default {
     'NAVIGATE_URL',
     'PLAY_FUNCTION_THREW_EXCEPTION',
     'PRELOAD_ENTRIES',
+    'PREVIEW_BUILDER_PROGRESS',
     'PREVIEW_KEYDOWN',
     'REGISTER_SUBSCRIPTION',
     'RESET_STORY_ARGS',