Release: Patch 8.1.1

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 8.1.1
+
+- Docgen: Only add react-docgen info when a component is defined in the file - [#26967](https://github.com/storybookjs/storybook/pull/26967), thanks @glenjamin!
+- Docs: Fix MDX Stories block tag-filtering behavior - [#27144](https://github.com/storybookjs/storybook/pull/27144), thanks @shilman!
+- Docs: Fix Subtitle block when no `of` prop passed - [#27147](https://github.com/storybookjs/storybook/pull/27147), thanks @JReinhold!
+- Next.js: Add typing for NextImage to main framework options type - [#27105](https://github.com/storybookjs/storybook/pull/27105), thanks @valentinpalkovic!
+- Next.js: Avoid conflicts with the raw loader - [#27093](https://github.com/storybookjs/storybook/pull/27093), thanks @seanparmelee!
+- Types: Fix typing for main.framework/builder fields - [#27088](https://github.com/storybookjs/storybook/pull/27088), thanks @valentinpalkovic!
+
 ## 8.1.0
 
 Storybook 8.1 is here with a tone of new features and bug fixes:

code/addons/docs/src/preview.ts

@@ -22,9 +22,7 @@ export const parameters: any = {
       filter: (story: PreparedStory) => {
         const tags = story.tags || [];
         return (
-          tags.includes('autodocs') &&
-          tags.filter((tag) => excludeTags[tag]).length === 0 &&
-          !story.parameters.docs?.disable
+          tags.filter((tag) => excludeTags[tag]).length === 0 && !story.parameters.docs?.disable
         );
       },
     },

code/frameworks/angular/src/types.ts

@@ -7,9 +7,10 @@ import {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/angular';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/angular'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = AngularOptions & {
   builder?: BuilderOptions;

code/frameworks/ember/src/types.ts

@@ -7,9 +7,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/ember-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/ember-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

code/frameworks/html-vite/package.json

@@ -51,6 +51,7 @@
     "@storybook/core-server": "workspace:*",
     "@storybook/html": "workspace:*",
     "@storybook/node-logger": "workspace:*",
+    "@storybook/types": "workspace:*",
     "magic-string": "^0.30.0"
   },
   "devDependencies": {

code/frameworks/html-vite/src/types.ts

@@ -1,8 +1,8 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { StorybookConfig as StorybookConfigBase, CompatibleString } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
 
-type FrameworkName = '@storybook/html-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/html-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

code/frameworks/html-webpack5/package.json

@@ -52,6 +52,7 @@
     "@storybook/global": "^5.0.0",
     "@storybook/html": "workspace:*",
     "@storybook/preset-html-webpack": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@types/node": "^18.0.0"
   },
   "devDependencies": {

code/frameworks/html-webpack5/src/types.ts

@@ -7,9 +7,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/html-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/html-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

code/frameworks/nextjs/src/swc/loader.ts

@@ -4,9 +4,10 @@ import type { Options } from '@storybook/types';
 import type { NextConfig } from 'next';
 import path from 'path';
 import loadJsConfig from 'next/dist/build/load-jsconfig';
+import type { Configuration as WebpackConfig } from 'webpack';
 
 export const configureSWCLoader = async (
-  baseConfig: any,
+  baseConfig: WebpackConfig,
   options: Options,
   nextConfig: NextConfig
 ) => {
@@ -18,33 +19,38 @@ export const configureSWCLoader = async (
 
   const { jsConfig } = await loadJsConfig(dir, nextConfig as any);
 
-  baseConfig.module.rules = [
-    ...baseConfig.module.rules,
-    {
-      test: /\.((c|m)?(j|t)sx?)$/,
-      include: [getProjectRoot()],
-      exclude: [/(node_modules)/, ...Object.keys(virtualModules)],
-      enforce: 'post',
-      use: {
-        // we use our own patch because we need to remove tracing from the original code
-        // which is not possible otherwise
-        loader: require.resolve('./swc/next-swc-loader-patch.js'),
-        options: {
-          isServer: false,
-          rootDir: dir,
-          pagesDir: `${dir}/pages`,
-          appDir: `${dir}/apps`,
-          hasReactRefresh: isDevelopment,
-          jsConfig,
-          nextConfig,
-          supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers(
-            dir,
-            isDevelopment
-          ),
-          swcCacheDir: path.join(dir, nextConfig?.distDir ?? '.next', 'cache', 'swc'),
-          bundleTarget: 'default',
-        },
+  const rawRule = baseConfig.module?.rules?.find(
+    (rule) => typeof rule === 'object' && rule?.resourceQuery?.toString() === '/raw/'
+  );
+
+  if (rawRule && typeof rawRule === 'object') {
+    rawRule.test = /^(?!__barrel_optimize__)/;
+  }
+
+  baseConfig.module?.rules?.push({
+    test: /\.((c|m)?(j|t)sx?)$/,
+    include: [getProjectRoot()],
+    exclude: [/(node_modules)/, ...Object.keys(virtualModules)],
+    enforce: 'post',
+    use: {
+      // we use our own patch because we need to remove tracing from the original code
+      // which is not possible otherwise
+      loader: require.resolve('./swc/next-swc-loader-patch.js'),
+      options: {
+        isServer: false,
+        rootDir: dir,
+        pagesDir: `${dir}/pages`,
+        appDir: `${dir}/apps`,
+        hasReactRefresh: isDevelopment,
+        jsConfig,
+        nextConfig,
+        supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers(
+          dir,
+          isDevelopment
+        ),
+        swcCacheDir: path.join(dir, nextConfig?.distDir ?? '.next', 'cache', 'swc'),
+        bundleTarget: 'default',
       },
     },
-  ];
+  });
 };

code/frameworks/nextjs/src/types.ts

@@ -8,13 +8,15 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
+import type * as NextImage from 'next/image';
 
-type FrameworkName = '@storybook/nextjs';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/nextjs'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = ReactOptions & {
   nextConfigPath?: string;
-
+  image?: Partial<NextImage.ImageProps>;
   builder?: BuilderOptions;
 };
 

code/frameworks/preact-vite/package.json

@@ -48,7 +48,8 @@
   },
   "dependencies": {
     "@storybook/builder-vite": "workspace:*",
-    "@storybook/preact": "workspace:*"
+    "@storybook/preact": "workspace:*",
+    "@storybook/types": "workspace:*"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",

code/frameworks/preact-vite/src/types.ts

@@ -1,8 +1,8 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
 
-type FrameworkName = '@storybook/preact-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/preact-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

code/frameworks/preact-webpack5/package.json

@@ -51,6 +51,7 @@
     "@storybook/core-common": "workspace:*",
     "@storybook/preact": "workspace:*",
     "@storybook/preset-preact-webpack": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@types/node": "^18.0.0"
   },
   "devDependencies": {

code/frameworks/preact-webpack5/src/types.ts

@@ -7,9 +7,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/preact-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/preact-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

code/frameworks/react-vite/package.json

@@ -52,6 +52,7 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/react": "workspace:*",
+    "@storybook/types": "workspace:*",
     "find-up": "^5.0.0",
     "magic-string": "^0.30.0",
     "react-docgen": "^7.0.0",

code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts

@@ -15,6 +15,8 @@ import { utils } from 'react-docgen';
 const { getNameOrValue, isReactForwardRefCall } = utils;
 
 const actualNameHandler: Handler = function actualNameHandler(documentation, componentDefinition) {
+  documentation.set('definedInFile', componentDefinition.hub.file.opts.filename);
+
   if (
     (componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) &&
     componentDefinition.has('id')

code/frameworks/react-vite/src/plugins/react-docgen.ts

@@ -20,7 +20,7 @@ import {
 } from './docgen-resolver';
 import { logger } from '@storybook/node-logger';
 
-type DocObj = Documentation & { actualName: string };
+type DocObj = Documentation & { actualName: string; definedInFile: string };
 
 // TODO: None of these are able to be overridden, so `default` is aspirational here.
 const defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);
@@ -71,8 +71,8 @@ export async function reactDocgen({
         const s = new MagicString(src);
 
         docgenResults.forEach((info) => {
-          const { actualName, ...docgenInfo } = info;
-          if (actualName) {
+          const { actualName, definedInFile, ...docgenInfo } = info;
+          if (actualName && definedInFile == id) {
             const docNode = JSON.stringify(docgenInfo);
             s.append(`;${actualName}.__docgenInfo=${docNode}`);
           }

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

@@ -1,12 +1,13 @@
 import type {
+  CompatibleString,
   StorybookConfig as StorybookConfigBase,
   TypescriptOptions as TypescriptOptionsBase,
 } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
 import type docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript';
 
-type FrameworkName = '@storybook/react-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/react-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

code/frameworks/react-webpack5/package.json

@@ -50,6 +50,7 @@
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/preset-react-webpack": "workspace:*",
     "@storybook/react": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@types/node": "^18.0.0"
   },
   "peerDependencies": {

code/frameworks/react-webpack5/src/types.ts

@@ -8,9 +8,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/react-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/react-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = ReactOptions & {
   builder?: BuilderOptions;

code/frameworks/server-webpack5/package.json

@@ -51,6 +51,7 @@
     "@storybook/core-common": "workspace:*",
     "@storybook/preset-server-webpack": "workspace:*",
     "@storybook/server": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@types/node": "^18.0.0"
   },
   "devDependencies": {

code/frameworks/server-webpack5/src/types.ts

@@ -7,9 +7,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/server-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/server-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

code/frameworks/svelte-vite/package.json

@@ -50,6 +50,7 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/svelte": "workspace:*",
+    "@storybook/types": "workspace:*",
     "magic-string": "^0.30.0",
     "svelte-preprocess": "^5.1.1",
     "sveltedoc-parser": "^4.2.1",

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

@@ -1,8 +1,8 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
 
-type FrameworkName = '@storybook/svelte-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/svelte-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

code/frameworks/svelte-webpack5/package.json

@@ -50,7 +50,8 @@
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/preset-svelte-webpack": "workspace:*",
-    "@storybook/svelte": "workspace:*"
+    "@storybook/svelte": "workspace:*",
+    "@storybook/types": "workspace:*"
   },
   "devDependencies": {
     "svelte": "^4.0.0",

code/frameworks/svelte-webpack5/src/types.ts

@@ -8,9 +8,10 @@ import type {
   BuilderOptions,
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
 
-type FrameworkName = '@storybook/svelte-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/svelte-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
 
 export type FrameworkOptions = SvelteOptions & {
   builder?: BuilderOptions;

code/frameworks/sveltekit/package.json

@@ -56,7 +56,8 @@
     "@storybook/addon-actions": "workspace:*",
     "@storybook/builder-vite": "workspace:*",
     "@storybook/svelte": "workspace:*",
-    "@storybook/svelte-vite": "workspace:*"
+    "@storybook/svelte-vite": "workspace:*",
+    "@storybook/types": "workspace:*"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",

code/frameworks/sveltekit/src/types.ts

@@ -1,10 +1,10 @@
 import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { enhance } from './mocks/app/forms';
 import type { goto, invalidate, invalidateAll } from './mocks/app/navigation';
 
-type FrameworkName = '@storybook/sveltekit';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/sveltekit'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;