Merge pull request #22907 from storybookjs/main-prerelease

7.0.19 release

CHANGELOG.md

@@ -1,3 +1,22 @@
+## 7.0.19 (June 8, 2023)
+
+#### Bug Fixes
+
+-   Server: Fix .stories.yml support [#22906](https://github.com/storybooks/storybook/pull/22906)
+-   Docs: Fix Source block snippet updates [#22835](https://github.com/storybooks/storybook/pull/22835)
+-   Core: Fix indexing errors by excluding node_modules stories [#22873](https://github.com/storybooks/storybook/pull/22873)
+-   CLI: Fix upgrade notification message [#22933](https://github.com/storybooks/storybook/pull/22933)
+-   Angular: Add --open/--no-open flag to dev command [#22964](https://github.com/storybooks/storybook/pull/22964)
+-   Angular: Silence compodoc when running storybook with --quiet [#22957](https://github.com/storybooks/storybook/pull/22957)
+
+#### Maintenance
+
+-   Core: Improve MDX of error in story index [#22782](https://github.com/storybooks/storybook/pull/22782)
+
+#### Build
+
+-   Build: Fix the theme output during development [#22841](https://github.com/storybooks/storybook/pull/22841)
+-   Revert "Docs: E2E tests for Source block update fix" [#22934](https://github.com/storybookjs/storybook/pull/22934)
 ## 7.0.18 (May 26, 2023)
 
 #### Bug Fixes

MIGRATION.md

@@ -28,6 +28,7 @@
     - [Deploying build artifacts](#deploying-build-artifacts)
       - [Dropped support for file URLs](#dropped-support-for-file-urls)
       - [Serving with nginx](#serving-with-nginx)
+      - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
   - [7.0 Core changes](#70-core-changes)
     - [7.0 feature flags removed](#70-feature-flags-removed)
     - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
@@ -87,7 +88,6 @@
     - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
     - [Autoplay in docs](#autoplay-in-docs)
     - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
-    - [parameters.docs.source.excludeDecorators defaults to true](#parametersdocssourceexcludedecorators-defaults-to-true)
   - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
     - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
     - [`Story` type deprecated](#story-type-deprecated)
@@ -938,6 +938,28 @@ With [nginx](https://www.nginx.com/), you need to extend [the MIME type handling
 
 It would otherwise default to serving the `.mjs` files as `application/octet-stream`.
 
+##### Ignore story files from node_modules
+
+In 6.x Storybook literally followed the glob patterns specified in your `.storybook/main.js` `stories` field. Storybook 7.0 ignores files from `node_modules` unless your glob pattern includes the string `"node_modules"`.
+
+Given the following `main.js`:
+
+```js
+export default {
+  stories: ['../**/*.stories.*']
+}
+```
+
+If you want to restore the previous behavior to include `node_modules`, you can update it to:
+
+```js
+export default {
+  stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*']
+}
+```
+
+The first glob would have node_modules automatically excluded by Storybook, and the second glob would include all stories that are under a nested `node_modules` directory.
+
 ### 7.0 Core changes
 
 #### 7.0 feature flags removed
@@ -1215,7 +1237,7 @@ In v6.x `@storybook/web-components` had a peer dependency on `lit-html` v1 or v2
 
 #### Create React App: dropped CRA4 support
 
-Since v7 [drops webpack4 support](#webpack4-support-discontinued), it longer supports Create React App < 5.0. If you're using an earlier version of CRA, please upgrade or stay on Storybook 6.x.
+Since v7 [drops webpack4 support](#webpack4-support-discontinued), it no longer supports Create React App < 5.0. If you're using an earlier version of CRA, please upgrade or stay on Storybook 6.x.
 
 #### HTML: No longer auto-dedents source code
 

code/frameworks/angular/src/builders/start-storybook/index.ts

@@ -30,7 +30,6 @@ addToGlobalContext('cliVersion', versions.storybook);
 export type StorybookBuilderOptions = JsonObject & {
   browserTarget?: string | null;
   tsConfig?: string;
-  docs: boolean;
   compodoc: boolean;
   compodocArgs: string[];
   styles?: StyleElement[];
@@ -50,6 +49,8 @@ export type StorybookBuilderOptions = JsonObject & {
     | 'ci'
     | 'quiet'
     | 'disableTelemetry'
+    | 'open'
+    | 'docs'
   >;
 
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
@@ -58,9 +59,13 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
   const builder = from(setup(options, context)).pipe(
     switchMap(({ tsConfig }) => {
       const runCompodoc$ = options.compodoc
-        ? runCompodoc({ compodocArgs: options.compodocArgs, tsconfig: tsConfig }, context).pipe(
-            mapTo({ tsConfig })
-          )
+        ? runCompodoc(
+            {
+              compodocArgs: [...options.compodocArgs, ...(options.quiet ? ['--silent'] : [])],
+              tsconfig: tsConfig,
+            },
+            context
+          ).pipe(mapTo({ tsConfig }))
         : of({});
 
       return runCompodoc$.pipe(mapTo({ tsConfig }));
@@ -93,6 +98,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
         sslKey,
         disableTelemetry,
         assets,
+        open,
       } = options;
 
       const standaloneOptions: StandaloneOptions = {
@@ -117,6 +123,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
           ...(assets ? { assets } : {}),
         },
         tsConfig,
+        open,
       };
 
       return standaloneOptions;

code/frameworks/angular/src/builders/start-storybook/schema.json

@@ -56,6 +56,11 @@
       "description": "CI mode (skip interactive prompts, don't open browser).",
       "default": false
     },
+    "open": {
+      "type": "boolean",
+      "description": "Whether to open Storybook automatically in the browser.",
+      "default": true
+    },
     "quiet": {
       "type": "boolean",
       "description": "Suppress verbose build output.",

code/lib/builder-vite/src/list-stories.ts

@@ -1,7 +1,7 @@
 import * as path from 'path';
 import slash from 'slash';
 import { promise as glob } from 'glob-promise';
-import { normalizeStories } from '@storybook/core-common';
+import { normalizeStories, commonGlobOptions } from '@storybook/core-common';
 
 import type { Options } from '@storybook/types';
 
@@ -17,7 +17,10 @@ export async function listStories(options: Options) {
           ? pattern
           : path.join(options.configDir, pattern);
 
-        return glob(slash(absolutePattern), { follow: true });
+        return glob(slash(absolutePattern), {
+          ...commonGlobOptions(absolutePattern),
+          follow: true,
+        });
       })
     )
   ).reduce((carry, stories) => carry.concat(stories), []);

code/lib/cli/src/automigrate/fixes/mdx-gfm.ts

@@ -3,6 +3,7 @@ import semver from 'semver';
 import { join } from 'path';
 import slash from 'slash';
 import glob from 'globby';
+import { commonGlobOptions } from '@storybook/core-common';
 import { getStorybookData, updateMainConfig } from '../helpers/mainConfigFile';
 import type { Fix } from '../types';
 import { getStorybookVersionSpecifier } from '../../helpers';
@@ -37,7 +38,7 @@ export const mdxgfm: Fix<Options> = {
           ? slash(join(configDir, item))
           : slash(join(configDir, item.directory, item.files));
 
-      const files = await glob(pattern);
+      const files = await glob(pattern, commonGlobOptions(pattern));
 
       return files.some((f) => f.endsWith('.mdx'));
     }, Promise.resolve(false));

code/lib/cli/src/sandbox-templates.ts

@@ -469,7 +469,6 @@ const internalTemplates = {
       builder: '@storybook/builder-webpack5',
     },
     isInternal: true,
-    inDevelopment: true,
   },
   // 'internal/pnp': {
   //   ...baseTemplates['cra/default-ts'],

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

@@ -6,6 +6,7 @@ export * from './utils/cache';
 export * from './utils/check-addon-order';
 export * from './utils/envs';
 export * from './utils/findDistEsm';
+export * from './utils/common-glob-options';
 export * from './utils/get-builder-options';
 export * from './utils/get-framework-name';
 export * from './utils/get-renderer-name';

code/lib/core-common/src/utils/common-glob-options.ts

@@ -0,0 +1,5 @@
+const NODE_MODULES_RE = /node_modules/;
+
+// Exclude node_modules stories everywhere we call `glob`
+export const commonGlobOptions = (glob: string) =>
+  NODE_MODULES_RE.test(glob) ? {} : { ignore: ['**/node_modules/**'] };

code/lib/core-server/src/utils/StoryIndexGenerator.ts

@@ -20,7 +20,7 @@ import type {
   StoryName,
 } from '@storybook/types';
 import { userOrAutoTitleFromSpecifier, sortStoriesV7 } from '@storybook/preview-api';
-import { normalizeStoryPath } from '@storybook/core-common';
+import { commonGlobOptions, normalizeStoryPath } from '@storybook/core-common';
 import { logger, once } from '@storybook/node-logger';
 import { getStorySortParameter } from '@storybook/csf-tools';
 import { toId } from '@storybook/csf';
@@ -121,7 +121,7 @@ export class StoryIndexGenerator {
         const fullGlob = slash(
           path.join(this.options.workingDir, specifier.directory, specifier.files)
         );
-        const files = await glob(fullGlob);
+        const files = await glob(fullGlob, commonGlobOptions(fullGlob));
 
         if (files.length === 0) {
           once.warn(
@@ -352,11 +352,12 @@ export class StoryIndexGenerator {
 
         if (!csfEntry)
           throw new Error(
-            dedent`Could not find CSF file at path "${result.of}" referenced by \`of={}\` in docs file "${relativePath}".
+            dedent`Could not find or load CSF file at path "${result.of}" referenced by \`of={}\` in docs file "${relativePath}".
             
               - Does that file exist?
               - If so, is it a CSF file (\`.stories.*\`)?
-              - If so, is it matched by the \`stories\` glob in \`main.js\`?`
+              - If so, is it matched by the \`stories\` glob in \`main.js\`?
+              - If so, has the file successfully loaded in Storybook and are its stories visible?`
           );
       }
 

code/lib/core-server/src/utils/update-check.ts

@@ -37,8 +37,9 @@ export function createUpdateMessage(updateInfo: VersionCheck, version: string):
   let updateMessage;
 
   try {
-    const suffix = semver.prerelease(updateInfo.data.latest.version) ? '--prerelease' : '';
-    const upgradeCommand = `npx storybook@latest upgrade ${suffix}`.trim();
+    const isPrerelease = semver.prerelease(updateInfo.data.latest.version);
+    const suffix = isPrerelease ? '@next upgrade --prerelease' : '@latest upgrade';
+    const upgradeCommand = `npx storybook${suffix}`;
     updateMessage =
       updateInfo.success && semver.lt(version, updateInfo.data.latest.version)
         ? dedent`

code/lib/core-server/src/utils/watch-story-specifiers.ts

@@ -6,6 +6,7 @@ import glob from 'globby';
 import uniq from 'lodash/uniq.js';
 
 import type { NormalizedStoriesSpecifier, Path } from '@storybook/types';
+import { commonGlobOptions } from '@storybook/core-common';
 
 const isDirectory = (directory: Path) => {
   try {
@@ -74,7 +75,7 @@ export function watchStorySpecifiers(
               path.basename(specifier.files)
             );
             // glob only supports forward slashes
-            const files = await glob(slash(dirGlob));
+            const files = await glob(slash(dirGlob), commonGlobOptions(dirGlob));
 
             files.forEach((filePath) => {
               const fileImportPath = toImportPath(

code/lib/theming/scripts/fix-theme-type-export.ts

@@ -7,7 +7,7 @@ const run = async () => {
   const target = join(process.cwd(), 'dist', 'index.d.ts');
   const contents = await readFile(target, 'utf8');
 
-  const footer = contents.includes('// devmode')
+  const footer = contents.includes('// dev-mode')
     ? `export { StorybookTheme as Theme } from '../src/index';`
     : dedent`
         interface Theme extends StorybookTheme {}

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

@@ -162,7 +162,11 @@ export type Addon_BaseDecorators<StoryFnReturnType> = Array<
   (story: () => StoryFnReturnType, context: Addon_StoryContext) => StoryFnReturnType
 >;
 
-export interface Addon_BaseAnnotations<TArgs, StoryFnReturnType> {
+export interface Addon_BaseAnnotations<
+  TArgs,
+  StoryFnReturnType,
+  TRenderer extends Renderer = Renderer
+> {
   /**
    * Dynamic data that are provided (and possibly updated by) Storybook and its addons.
    * @see [Arg story inputs](https://storybook.js.org/docs/react/api/csf#args-story-inputs)
@@ -192,12 +196,12 @@ export interface Addon_BaseAnnotations<TArgs, StoryFnReturnType> {
   /**
    * Define a custom render function for the story(ies). If not passed, a default render function by the framework will be used.
    */
-  render?: (args: TArgs, context: Addon_StoryContext) => StoryFnReturnType;
+  render?: (args: TArgs, context: Addon_StoryContext<TRenderer>) => StoryFnReturnType;
 
   /**
    * Function that is executed after the story is rendered.
    */
-  play?: (context: Addon_StoryContext) => Promise<void> | void;
+  play?: (context: Addon_StoryContext<TRenderer>) => Promise<void> | void;
 }
 
 export interface Addon_Annotations<TArgs, StoryFnReturnType>

code/presets/server-webpack/src/index.ts

@@ -16,7 +16,10 @@ export const webpack: StorybookConfig['webpack'] = (config) => {
       test: /\.stories\.ya?ml/,
       use: [
         require.resolve('@storybook/preset-server-webpack/dist/loader'),
-        require.resolve('yaml-loader'),
+        {
+          loader: require.resolve('yaml-loader'),
+          options: { asJSON: true },
+        },
       ],
     },
   ];

code/presets/server-webpack/src/loader.ts

@@ -5,7 +5,8 @@ export default (content: string) => {
     const after = compileCsfModule(JSON.parse(content));
     return after;
   } catch (e) {
-    //
+    // for debugging
+    console.log(content, e);
   }
   return content;
 };

code/renderers/server/package.json

@@ -60,7 +60,8 @@
     "@storybook/types": "7.0.18",
     "@types/fs-extra": "^11.0.1",
     "fs-extra": "^11.1.0",
-    "ts-dedent": "^2.0.0"
+    "ts-dedent": "^2.0.0",
+    "yaml": "^2.3.1"
   },
   "devDependencies": {
     "typescript": "~4.9.3"

code/renderers/server/src/preset.ts

@@ -1,11 +1,14 @@
 import fs from 'fs-extra';
+import yaml from 'yaml';
 import { toId } from '@storybook/csf';
 import type { StaticMeta } from '@storybook/csf-tools';
 import type { IndexerOptions, IndexedStory, StoryIndexer } from '@storybook/types';
 
 export const storyIndexers = (indexers: StoryIndexer[] | null) => {
-  const jsonIndexer = async (fileName: string, opts: IndexerOptions) => {
-    const json = await fs.readJson(fileName, 'utf-8');
+  const serverIndexer = async (fileName: string, opts: IndexerOptions) => {
+    const json = fileName.endsWith('.json')
+      ? await fs.readJson(fileName, 'utf-8')
+      : yaml.parse((await fs.readFile(fileName, 'utf-8')).toString());
     const meta: StaticMeta = {
       title: json.title,
     };
@@ -25,8 +28,8 @@ export const storyIndexers = (indexers: StoryIndexer[] | null) => {
   };
   return [
     {
-      test: /(stories|story)\.json$/,
-      indexer: jsonIndexer,
+      test: /(stories|story)\.(json|ya?ml)$/,
+      indexer: serverIndexer,
     },
     ...(indexers || []),
   ];

code/ui/blocks/src/blocks/SourceContainer.tsx

@@ -1,7 +1,6 @@
 import type { FC, Context, PropsWithChildren } from 'react';
 import React, { createContext, useEffect, useState } from 'react';
 
-import { dequal as deepEqual } from 'dequal';
 import type { Channel } from '@storybook/channels';
 
 import { SNIPPET_RENDERED } from '@storybook/docs-tools';
@@ -64,11 +63,14 @@ export const SourceContainer: FC<PropsWithChildren<{ channel: Channel }>> = ({
         : idOrEvent;
 
       const hash = args ? argsHash(args) : UNKNOWN_ARGS_HASH;
-
-      // optimization: if the source is the same, ignore the incoming event
-      if (sources[id] && sources[id][hash] && sources[id][hash].code === source) {
-        return;
-      }
+      // FIXME: In SB8.0 when we remove the Source block deprecations,
+      // we should restore this optimizationand make the Source block
+      // smarter about understanding when its args change.
+      //
+      // See https://github.com/storybookjs/storybook/pull/22807
+      //
+      // optimization: don't update if the source is the same
+      // if (deepEqual(currentSource, { code: source, format })) return;
 
       setSources((current) => {
         const newSources = {
@@ -79,10 +81,7 @@ export const SourceContainer: FC<PropsWithChildren<{ channel: Channel }>> = ({
           },
         };
 
-        if (!deepEqual(current, newSources)) {
-          return newSources;
-        }
-        return current;
+        return newSources;
       });
     };