Merge branch 'next' into docs_stories_of_updates

MIGRATION.md

@@ -28,6 +28,7 @@
     - [Removed stories.json](#removed-storiesjson)
     - [Removed `sb babelrc` command](#removed-sb-babelrc-command)
     - [Changed interfaces for `@storybook/router` components](#changed-interfaces-for-storybookrouter-components)
+    - [Extract no longer batches](#extract-no-longer-batches)
   - [Framework-specific changes](#framework-specific-changes)
     - [React](#react)
       - [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default)
@@ -712,6 +713,10 @@ The reasoning behind is to condense and provide some clarity to what's happened
 
 The `hideOnly` prop has been removed from the `<Route />` component in `@storybook/router`. If needed this can be implemented manually with the `<Match />` component.
 
+#### Extract no longer batches
+
+`Preview.extract()` no longer loads CSF files in batches. This was a workaround for resource limitations that slowed down extract. This shouldn't affect behaviour.
+
 ### Framework-specific changes
 
 #### React

code/frameworks/nextjs/src/preset.ts

@@ -110,10 +110,7 @@ export const babel: PresetProperty<'babel'> = async (baseConfig: TransformOption
 };
 
 export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, options) => {
-  const frameworkOptions = await options.presets.apply<{ options: FrameworkOptions }>(
-    'frameworkOptions'
-  );
-  const { options: { nextConfigPath } = {} } = frameworkOptions;
+  const { nextConfigPath } = await options.presets.apply<FrameworkOptions>('frameworkOptions');
   const nextConfig = await configureConfig({
     baseConfig,
     nextConfigPath,

code/lib/cli/src/generators/REACT_NATIVE/index.ts

@@ -14,12 +14,15 @@ const generator = async (
 
   const reactVersion = packageJson.dependencies.react;
 
-  const packagesToResolve = [
-    // addon-ondevice-controls peer deps
+  const controlsPeerDependencies = [
     'react-native-safe-area-context',
     '@react-native-async-storage/async-storage',
     '@react-native-community/datetimepicker',
     '@react-native-community/slider',
+  ].filter((dep) => !packageJson.dependencies[dep] && !packageJson.devDependencies[dep]);
+
+  const packagesToResolve = [
+    ...controlsPeerDependencies,
     '@storybook/addon-ondevice-controls',
     '@storybook/addon-ondevice-actions',
     '@storybook/react-native',
@@ -47,7 +50,6 @@ const generator = async (
 
   packageManager.addScripts({
     'storybook-generate': 'sb-rn-get-stories',
-    'storybook-watch': 'sb-rn-watcher',
   });
 
   const storybookConfigFolder = '.storybook';

code/lib/cli/src/generators/baseGenerator.ts

@@ -224,8 +224,8 @@ export async function baseGenerator(
 
   extraAddonsToInstall.push(
     '@storybook/addon-links',
-    '@storybook/addon-essentials'
-    // '@chromatic-com/storybook@^1'
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook@^1'
   );
 
   // added to main.js

code/lib/preview-api/src/modules/store/StoryStore.test.ts

@@ -28,14 +28,6 @@ vi.mock('@storybook/global', async (importOriginal) => ({
 
 vi.mock('@storybook/client-logger');
 
-const createGate = (): [Promise<any | undefined>, (_?: any) => void] => {
-  let openGate = (_?: any) => {};
-  const gate = new Promise<any | undefined>((resolve) => {
-    openGate = resolve;
-  });
-  return [gate, openGate];
-};
-
 const componentOneExports = {
   default: { title: 'Component One' },
   a: { args: { foo: 'a' } },
@@ -435,22 +427,6 @@ describe('StoryStore', () => {
         './src/ComponentTwo.stories.js',
       ]);
     });
-
-    it('imports in batches', async () => {
-      const [gate, openGate] = createGate();
-      const blockedImportFn = vi.fn(async (file) => {
-        await gate;
-        return importFn(file);
-      });
-      const store = new StoryStore(storyIndex, blockedImportFn, projectAnnotations);
-
-      const promise = store.loadAllCSFFiles({ batchSize: 1 });
-      expect(blockedImportFn).toHaveBeenCalledTimes(1);
-
-      openGate();
-      await promise;
-      expect(blockedImportFn).toHaveBeenCalledTimes(3);
-    });
   });
 
   describe('extract', () => {

code/lib/preview-api/src/modules/store/StoryStore.ts

@@ -41,9 +41,9 @@ import {
   prepareContext,
 } from './csf';
 
+// TODO -- what are reasonable values for these?
 const CSF_CACHE_SIZE = 1000;
 const STORY_CACHE_SIZE = 10000;
-const EXTRACT_BATCH_SIZE = 20;
 
 export class StoryStore<TRenderer extends Renderer> {
   public storyIndex: StoryIndexStore;
@@ -127,32 +127,19 @@ export class StoryStore<TRenderer extends Renderer> {
     return this.processCSFFileWithCache(moduleExports, importPath, title);
   }
 
-  async loadAllCSFFiles({ batchSize = EXTRACT_BATCH_SIZE } = {}): Promise<
-    StoryStore<TRenderer>['cachedCSFFiles']
-  > {
-    const importPaths = Object.entries(this.storyIndex.entries).map(([storyId, { importPath }]) => [
-      importPath,
-      storyId,
-    ]);
-
-    const loadInBatches = async (
-      remainingImportPaths: typeof importPaths
-    ): Promise<{ importPath: Path; csfFile: CSFFile<TRenderer> }[]> => {
-      if (remainingImportPaths.length === 0) return Promise.resolve([]);
-
-      const csfFilePromiseList = remainingImportPaths
-        .slice(0, batchSize)
-        .map(async ([importPath, storyId]) => ({
-          importPath,
-          csfFile: await this.loadCSFFileByStoryId(storyId),
-        }));
-
-      const firstResults = await Promise.all(csfFilePromiseList);
-      const restResults = await loadInBatches(remainingImportPaths.slice(batchSize));
-      return firstResults.concat(restResults);
-    };
+  async loadAllCSFFiles(): Promise<StoryStore<TRenderer>['cachedCSFFiles']> {
+    const importPaths: Record<Path, StoryId> = {};
+    Object.entries(this.storyIndex.entries).forEach(([storyId, { importPath }]) => {
+      importPaths[importPath] = storyId;
+    });
+
+    const list = await Promise.all(
+      Object.entries(importPaths).map(async ([importPath, storyId]) => ({
+        importPath,
+        csfFile: await this.loadCSFFileByStoryId(storyId),
+      }))
+    );
 
-    const list = await loadInBatches(importPaths);
     return list.reduce(
       (acc, { importPath, csfFile }) => {
         acc[importPath] = csfFile;

docs/api/doc-block-canvas.md

@@ -203,51 +203,3 @@ Type: `boolean`
 Default: `parameters.docs.canvas.withToolbar`
 
 Determines whether to render a toolbar containing tools to interact with the story.
-
-### `children`
-
-(⛔️ **Deprecated**)
-
-Type: `React.ReactNode`
-
-Expects only [Story](./doc-block-story.md) children. Reference the story with the `of` prop instead.
-
-### `columns`
-
-(⛔️ **Deprecated**)
-
-Type: `number`
-
-Splits the stories based on the number of defined columns. Multiple stories are not supported.
-
-### `isColumn`
-
-(⛔️ **Deprecated**)
-
-Type: `boolean`
-
-Displays the stories one above the other. Multiple stories are not supported.
-
-### `mdxSource`
-
-(⛔️ **Deprecated**)
-
-Type: `string`
-
-Provides source to display. Use [`source.code`](#source) instead.
-
-### `withSource`
-
-(⛔️ **Deprecated**)
-
-Type: `'open' | 'closed' | 'none'`
-
-Controls the source code block visibility. Use [`sourceState`](#sourcestate) instead.
-
-### `withToolbar`
-
-(⛔️ **Deprecated**)
-
-Type: `boolean`
-
-Sets the Canvas toolbar visibility. Use [`story.withToolbar`](#story) instead.