Merge remote-tracking branch 'origin/tom/sb-721-ul-flashes-when-editing-a-csf-file' into vite-autoconfig

code/lib/api/src/lib/stories.ts

@@ -519,6 +519,21 @@ export const transformStoryIndexToStoriesHash = (
     .reduce(addItem, orphanHash);
 };
 
+export const addPreparedStories = (newHash: StoriesHash, oldHash?: StoriesHash) => {
+  if (!oldHash) return newHash;
+
+  return Object.fromEntries(
+    Object.entries(newHash).map(([id, newEntry]) => {
+      const oldEntry = oldHash[id];
+      if (newEntry.type === 'story' && oldEntry?.type === 'story' && oldEntry.prepared) {
+        return [id, { ...oldEntry, ...newEntry, prepared: true }];
+      }
+
+      return [id, newEntry];
+    })
+  );
+};
+
 export const getComponentLookupList = memoize(1)((hash: StoriesHash) => {
   return Object.entries(hash).reduce((acc, i) => {
     const value = i[1];

code/lib/api/src/modules/stories.ts

@@ -25,6 +25,7 @@ import {
   getStoriesLookupList,
   HashEntry,
   LeafEntry,
+  addPreparedStories,
 } from '../lib/stories';
 
 import type {
@@ -351,13 +352,16 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
       }
     },
     setStoryList: async (storyIndex: StoryIndex) => {
-      const hash = transformStoryIndexToStoriesHash(storyIndex, {
+      const newHash = transformStoryIndexToStoriesHash(storyIndex, {
         provider,
         docsOptions,
       });
 
+      // Now we need to patch in the existing prepared stories
+      const oldHash = store.getState().storiesHash;
+
       await store.setState({
-        storiesHash: hash,
+        storiesHash: addPreparedStories(newHash, oldHash),
         storiesConfigured: true,
         storiesFailed: null,
       });

code/lib/api/src/tests/stories.test.ts

@@ -1,4 +1,6 @@
-/// <reference types="jest" />;
+/// <reference types="@types/jest" />;
+// Need to import jest as mockJest for annoying jest reasons. Is there a better way?
+import { jest, jest as mockJest, it, describe, expect, beforeEach } from '@jest/globals';
 
 import {
   STORY_ARGS_UPDATED,
@@ -21,17 +23,17 @@ import { StoryEntry, SetStoriesStoryData, SetStoriesStory, StoryIndex } from '..
 import type Store from '../store';
 import { ModuleArgs } from '..';
 
-const mockStories: jest.MockedFunction<() => StoryIndex['entries']> = jest.fn();
+const mockStories = jest.fn<StoryIndex['entries'], []>();
 
 jest.mock('../lib/events');
 jest.mock('global', () => ({
-  ...(jest.requireActual('global') as Record<string, any>),
-  fetch: jest.fn(() => ({ json: () => ({ v: 4, entries: mockStories() }) })),
+  ...(mockJest.requireActual('global') as Record<string, any>),
+  fetch: mockJest.fn(() => ({ json: () => ({ v: 4, entries: mockStories() }) })),
   FEATURES: { storyStoreV7: true },
   CONFIG_TYPE: 'DEVELOPMENT',
 }));
 
-const getEventMetadataMock = getEventMetadata as jest.MockedFunction<typeof getEventMetadata>;
+const getEventMetadataMock = getEventMetadata as ReturnType<typeof jest.fn>;
 
 const mockIndex = {
   'component-a--story-1': {
@@ -58,7 +60,7 @@ function createMockStore(initialState = {}) {
   let state = initialState;
   return {
     getState: jest.fn(() => state),
-    setState: jest.fn((s) => {
+    setState: jest.fn((s: typeof state) => {
       state = { ...state, ...s };
       return Promise.resolve(state);
     }),
@@ -1195,6 +1197,47 @@ describe('stories API', () => {
       expect(Object.keys(storedStoriesHash)).toEqual(['component-a', 'component-a--story-1']);
     });
 
+    it('retains prepared-ness of stories', async () => {
+      const navigate = jest.fn();
+      const store = createMockStore();
+      const fullAPI = Object.assign(new EventEmitter(), {
+        setStories: jest.fn(),
+        setOptions: jest.fn(),
+      });
+
+      const { api, init } = initStories({ store, navigate, provider, fullAPI } as any);
+      Object.assign(fullAPI, api);
+
+      global.fetch.mockClear();
+      await init();
+      expect(global.fetch).toHaveBeenCalledTimes(1);
+
+      fullAPI.emit(STORY_PREPARED, {
+        id: 'component-a--story-1',
+        parameters: { a: 'b' },
+        args: { c: 'd' },
+      });
+      // Let the promise/await chain resolve
+      await new Promise((r) => setTimeout(r, 0));
+      expect(store.getState().storiesHash['component-a--story-1'] as StoryEntry).toMatchObject({
+        prepared: true,
+        parameters: { a: 'b' },
+        args: { c: 'd' },
+      });
+
+      global.fetch.mockClear();
+      provider.serverChannel.emit(STORY_INDEX_INVALIDATED);
+      expect(global.fetch).toHaveBeenCalledTimes(1);
+
+      // Let the promise/await chain resolve
+      await new Promise((r) => setTimeout(r, 0));
+      expect(store.getState().storiesHash['component-a--story-1'] as StoryEntry).toMatchObject({
+        prepared: true,
+        parameters: { a: 'b' },
+        args: { c: 'd' },
+      });
+    });
+
     it('handles docs entries', async () => {
       mockStories.mockReset().mockReturnValue({
         'component-a--page': {

code/lib/preview-web/src/PreviewWeb.test.ts

@@ -1,3 +1,5 @@
+/// <reference types="@types/jest" />;
+
 import global from 'global';
 import merge from 'lodash/merge';
 import {

scripts/sandbox.ts

@@ -205,9 +205,14 @@ async function readMainConfig({ cwd }: { cwd: string }) {
   return readConfig(mainConfigPath);
 }
 
-// NOTE: the test regexp here will apply whether the path is symlink-preserved or otherwise
-const loaderPath = require.resolve('../code/node_modules/esbuild-loader');
-const webpackFinalCode = `
+// Ensure that sandboxes can refer to story files defined in `code/`.
+// Most WP-based build systems will not compile files outside of the project root or 'src/` or
+// similar. Plus they aren't guaranteed to handle TS files. So we need to patch in esbuild
+// loader for such files. NOTE this isn't necessary for Vite, as far as we know.
+function addEsbuildLoaderToStories(mainConfig: ConfigFile) {
+  // NOTE: the test regexp here will apply whether the path is symlink-preserved or otherwise
+  const loaderPath = require.resolve('../code/node_modules/esbuild-loader');
+  const webpackFinalCode = `
   (config) => ({
     ...config,
     module: {
@@ -225,6 +230,30 @@ const webpackFinalCode = `
       ],
     },
   })`;
+  mainConfig.setFieldNode(
+    ['webpackFinal'],
+    // @ts-ignore (not sure why TS complains here, it does exist)
+    babelParse(webpackFinalCode).program.body[0].expression
+  );
+}
+
+// Recompile optimized deps on each startup, so you can change @storybook/* packages and not
+// have to clear caches.
+function forceViteRebuilds(mainConfig: ConfigFile) {
+  const viteFinalCode = `
+  (config) => ({
+    ...config,
+    optimizeDeps: {
+      ...config.optimizeDeps,
+      force: true,
+    },
+  })`;
+  mainConfig.setFieldNode(
+    ['viteFinal'],
+    // @ts-ignore (not sure why TS complains here, it does exist)
+    babelParse(viteFinalCode).program.body[0].expression
+  );
+}
 
 // paths are of the form 'renderers/react', 'addons/actions'
 async function addStories(paths: string[], { mainConfig }: { mainConfig: ConfigFile }) {
@@ -240,12 +269,6 @@ async function addStories(paths: string[], { mainConfig }: { mainConfig: ConfigF
     .filter(([, exists]) => exists)
     .map(([p]) => path.join(relativeCodeDir, p, '*.stories.@(js|jsx|ts|tsx)'));
   mainConfig.setFieldValue(['stories'], [...stories, ...extraStories]);
-
-  mainConfig.setFieldNode(
-    ['webpackFinal'],
-    // @ts-ignore (not sure why TS complains here, it does exist)
-    babelParse(webpackFinalCode).program.body[0].expression
-  );
 }
 
 export async function sandbox(optionValues: OptionValues<typeof options>) {
@@ -313,7 +336,7 @@ export async function sandbox(optionValues: OptionValues<typeof options>) {
     const workspaces = JSON.parse(`[${stdout.split('\n').join(',')}]`) as [
       { name: string; location: string }
     ];
-    const { renderer } = templateConfig.expected;
+    const { renderer, builder } = templateConfig.expected;
     const rendererWorkspace = workspaces.find((workspace) => workspace.name === renderer);
     if (!rendererWorkspace) {
       throw new Error(`Unknown renderer '${renderer}', not in yarn workspace!`);
@@ -329,6 +352,9 @@ export async function sandbox(optionValues: OptionValues<typeof options>) {
     );
     mainConfig.setFieldValue(['core', 'disableTelemetry'], true);
 
+    if (builder === '@storybook/builder-webpack5') addEsbuildLoaderToStories(mainConfig);
+    if (builder === '@storybook/builder-vite') forceViteRebuilds(mainConfig);
+
     const storiesToAdd = [] as string[];
     storiesToAdd.push(rendererPath);