From 6b00ed9263ed94ca79146bf3ce56c4a0276b1def Mon Sep 17 00:00:00 2001 From: Martin Nabhan <7613182+martinnabhan@users.noreply.github.com> Date: Sun, 20 Aug 2023 11:30:42 +0900 Subject: [PATCH 1/4] Make sure the Next.js Image Context is reused instead of recreated when imported --- code/frameworks/nextjs/package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 14ec26a04924..3d1f45e1718a 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -141,12 +141,15 @@ "./src/preview.tsx", "./src/next-image-loader-stub.ts", "./src/images/context.ts", + "./src/images/decorator.tsx", "./src/images/next-future-image.tsx", "./src/images/next-legacy-image.tsx", "./src/images/next-image.tsx", "./src/font/webpack/loader/storybook-nextjs-font-loader.ts" ], "externals": [ + "./context", + "./images/decorator", "sb-original/next/image", "sb-original/next/future/image", "sb-original/next/legacy/image" From f4a1021902b903d2a1c425da3bb089e336b1ab53 Mon Sep 17 00:00:00 2001 From: Martin Nabhan <7613182+martinnabhan@users.noreply.github.com> Date: Tue, 29 Aug 2023 18:13:39 +0900 Subject: [PATCH 2/4] Make sure the Next.js Image Context is reused instead of recreated when imported --- code/frameworks/nextjs/package.json | 8 +++++++- .../src/{images/context.ts => image-context.ts} | 0 code/frameworks/nextjs/src/images/decorator.tsx | 3 ++- .../nextjs/src/images/next-future-image.tsx | 11 ++++------- code/frameworks/nextjs/src/images/next-image.tsx | 9 ++++----- .../nextjs/src/images/next-legacy-image.tsx | 11 ++++------- 6 files changed, 21 insertions(+), 21 deletions(-) rename code/frameworks/nextjs/src/{images/context.ts => image-context.ts} (100%) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index acdeb7177946..00afe2a336e5 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -27,6 +27,11 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, + "./image-context": { + "types": "./dist/image-context.d.ts", + "require": "./dist/image-context.js", + "import": "./dist/image-context.mjs" + }, "./preset": { "types": "./dist/preset.d.ts", "require": "./dist/preset.js" @@ -136,11 +141,12 @@ }, "bundler": { "entries": [ + "./src/image-context.ts", "./src/index.ts", "./src/preset.ts", "./src/preview.tsx", "./src/next-image-loader-stub.ts", - "./src/images/context.ts", + "./src/images/decorator.tsx", "./src/images/next-future-image.tsx", "./src/images/next-legacy-image.tsx", "./src/images/next-image.tsx", diff --git a/code/frameworks/nextjs/src/images/context.ts b/code/frameworks/nextjs/src/image-context.ts similarity index 100% rename from code/frameworks/nextjs/src/images/context.ts rename to code/frameworks/nextjs/src/image-context.ts diff --git a/code/frameworks/nextjs/src/images/decorator.tsx b/code/frameworks/nextjs/src/images/decorator.tsx index f0917b3a3b50..0ee445f8707b 100644 --- a/code/frameworks/nextjs/src/images/decorator.tsx +++ b/code/frameworks/nextjs/src/images/decorator.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import type { Addon_StoryContext } from '@storybook/types'; -import { ImageContext } from './context'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ImageContext } from '@storybook/nextjs/dist/image-context'; export const ImageDecorator = ( Story: React.FC, diff --git a/code/frameworks/nextjs/src/images/next-future-image.tsx b/code/frameworks/nextjs/src/images/next-future-image.tsx index 559d2e857d39..0b841452d1fc 100644 --- a/code/frameworks/nextjs/src/images/next-future-image.tsx +++ b/code/frameworks/nextjs/src/images/next-future-image.tsx @@ -3,18 +3,15 @@ import type * as _NextImage from 'next/image'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore import is aliased in webpack config import OriginalNextFutureImage from 'sb-original/next/future/image'; -import { ImageContext } from './context'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ImageContext } from '@storybook/nextjs/dist/image-context'; import { defaultLoader } from './next-image-default-loader'; -function NextFutureImage(props: _NextImage.ImageProps) { +function NextFutureImage({ loader, ...props }: _NextImage.ImageProps) { const imageParameters = React.useContext(ImageContext); return ( - + ); } diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index 74e252d93a7d..34cf6d242bc4 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -3,15 +3,14 @@ import OriginalNextImage from 'sb-original/next/image'; import type * as _NextImage from 'next/image'; import React from 'react'; -import { ImageContext } from './context'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ImageContext } from '@storybook/nextjs/dist/image-context'; import { defaultLoader } from './next-image-default-loader'; -const MockedNextImage = (props: _NextImage.ImageProps) => { +const MockedNextImage = ({ loader, ...props }: _NextImage.ImageProps) => { const imageParameters = React.useContext(ImageContext); - return ( - - ); + return ; }; export default MockedNextImage; diff --git a/code/frameworks/nextjs/src/images/next-legacy-image.tsx b/code/frameworks/nextjs/src/images/next-legacy-image.tsx index 8d899cc341a5..1e2f8d9df20c 100644 --- a/code/frameworks/nextjs/src/images/next-legacy-image.tsx +++ b/code/frameworks/nextjs/src/images/next-legacy-image.tsx @@ -3,18 +3,15 @@ import OriginalNextLegacyImage from 'sb-original/next/legacy/image'; import type * as _NextLegacyImage from 'next/legacy/image'; import React from 'react'; -import { ImageContext } from './context'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ImageContext } from '@storybook/nextjs/dist/image-context'; import { defaultLoader } from './next-image-default-loader'; -function NextLegacyImage(props: _NextLegacyImage.ImageProps) { +function NextLegacyImage({ loader, ...props }: _NextLegacyImage.ImageProps) { const imageParameters = React.useContext(ImageContext); return ( - + ); } From 6947671ef5d368a39e159323da0e6d09054707df Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 4 Sep 2023 09:29:15 +0200 Subject: [PATCH 3/4] fix types and ignore linting problem --- code/frameworks/nextjs/package.json | 17 +++++++++++++++-- code/frameworks/nextjs/src/images/decorator.tsx | 1 + .../nextjs/src/images/next-future-image.tsx | 1 + .../frameworks/nextjs/src/images/next-image.tsx | 1 + .../nextjs/src/images/next-legacy-image.tsx | 1 + 5 files changed, 19 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 3f29369e1617..a459eab4607a 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -32,6 +32,11 @@ "require": "./dist/image-context.js", "import": "./dist/image-context.mjs" }, + "./dist/image-context": { + "types": "./dist/image-context.d.ts", + "require": "./dist/image-context.js", + "import": "./dist/image-context.mjs" + }, "./preset": { "types": "./dist/preset.d.ts", "require": "./dist/preset.js" @@ -51,6 +56,16 @@ "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", + "typesVersions": { + "*": { + "*": [ + "dist/index.d.ts" + ], + "dist/image-context": [ + "dist/image-context.d.ts" + ] + } + }, "files": [ "dist/**/*", "template/cli/**/*", @@ -153,8 +168,6 @@ "./src/font/webpack/loader/storybook-nextjs-font-loader.ts" ], "externals": [ - "./context", - "./images/decorator", "sb-original/next/image", "sb-original/next/future/image", "sb-original/next/legacy/image" diff --git a/code/frameworks/nextjs/src/images/decorator.tsx b/code/frameworks/nextjs/src/images/decorator.tsx index bfed3d281e1d..c3ca76aecc49 100644 --- a/code/frameworks/nextjs/src/images/decorator.tsx +++ b/code/frameworks/nextjs/src/images/decorator.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import type { Addon_StoryContext } from '@storybook/types'; +// eslint-disable-next-line import/no-extraneous-dependencies import { ImageContext } from '@storybook/nextjs/dist/image-context'; export const ImageDecorator = ( diff --git a/code/frameworks/nextjs/src/images/next-future-image.tsx b/code/frameworks/nextjs/src/images/next-future-image.tsx index 46ea6445e689..20f260b0335d 100644 --- a/code/frameworks/nextjs/src/images/next-future-image.tsx +++ b/code/frameworks/nextjs/src/images/next-future-image.tsx @@ -4,6 +4,7 @@ import type * as _NextImage from 'next/image'; // @ts-ignore import is aliased in webpack config import OriginalNextFutureImage from 'sb-original/next/future/image'; +// eslint-disable-next-line import/no-extraneous-dependencies import { ImageContext } from '@storybook/nextjs/dist/image-context'; import { defaultLoader } from './next-image-default-loader'; diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index 557790f3d924..8f4e9a7957e3 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -4,6 +4,7 @@ import OriginalNextImage from 'sb-original/next/image'; import type * as _NextImage from 'next/image'; import React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies import { ImageContext } from '@storybook/nextjs/dist/image-context'; import { defaultLoader } from './next-image-default-loader'; diff --git a/code/frameworks/nextjs/src/images/next-legacy-image.tsx b/code/frameworks/nextjs/src/images/next-legacy-image.tsx index ada69d607be7..c9b727d0145c 100644 --- a/code/frameworks/nextjs/src/images/next-legacy-image.tsx +++ b/code/frameworks/nextjs/src/images/next-legacy-image.tsx @@ -4,6 +4,7 @@ import OriginalNextLegacyImage from 'sb-original/next/legacy/image'; import type * as _NextLegacyImage from 'next/legacy/image'; import React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies import { ImageContext } from '@storybook/nextjs/dist/image-context'; import { defaultLoader } from './next-image-default-loader'; From 183ad26b4d6c1304910837579d441e86d2718bdc Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 4 Sep 2023 09:56:12 +0200 Subject: [PATCH 4/4] fix types via a bit convoluted work-around --- code/frameworks/nextjs/src/images/decorator.tsx | 7 ++++++- code/frameworks/nextjs/src/images/next-future-image.tsx | 7 ++++++- code/frameworks/nextjs/src/images/next-image.tsx | 7 ++++++- code/frameworks/nextjs/src/images/next-legacy-image.tsx | 7 ++++++- 4 files changed, 24 insertions(+), 4 deletions(-) diff --git a/code/frameworks/nextjs/src/images/decorator.tsx b/code/frameworks/nextjs/src/images/decorator.tsx index c3ca76aecc49..342f49d32b9a 100644 --- a/code/frameworks/nextjs/src/images/decorator.tsx +++ b/code/frameworks/nextjs/src/images/decorator.tsx @@ -1,8 +1,13 @@ import * as React from 'react'; import type { Addon_StoryContext } from '@storybook/types'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore-error (this only errors during compilation for production) // eslint-disable-next-line import/no-extraneous-dependencies -import { ImageContext } from '@storybook/nextjs/dist/image-context'; +import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image-context'; +import { type ImageContext as ImageContextType } from '../image-context'; + +const ImageContext = ImageContextValue as typeof ImageContextType; export const ImageDecorator = ( Story: React.FC, diff --git a/code/frameworks/nextjs/src/images/next-future-image.tsx b/code/frameworks/nextjs/src/images/next-future-image.tsx index 20f260b0335d..306518079b38 100644 --- a/code/frameworks/nextjs/src/images/next-future-image.tsx +++ b/code/frameworks/nextjs/src/images/next-future-image.tsx @@ -4,10 +4,15 @@ import type * as _NextImage from 'next/image'; // @ts-ignore import is aliased in webpack config import OriginalNextFutureImage from 'sb-original/next/future/image'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore-error (this only errors during compilation for production) // eslint-disable-next-line import/no-extraneous-dependencies -import { ImageContext } from '@storybook/nextjs/dist/image-context'; +import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image-context'; +import { type ImageContext as ImageContextType } from '../image-context'; import { defaultLoader } from './next-image-default-loader'; +const ImageContext = ImageContextValue as typeof ImageContextType; + function NextFutureImage({ loader, ...props }: _NextImage.ImageProps) { const imageParameters = React.useContext(ImageContext); diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index 8f4e9a7957e3..8fc964785f6b 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -4,10 +4,15 @@ import OriginalNextImage from 'sb-original/next/image'; import type * as _NextImage from 'next/image'; import React from 'react'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore-error (this only errors during compilation for production) // eslint-disable-next-line import/no-extraneous-dependencies -import { ImageContext } from '@storybook/nextjs/dist/image-context'; +import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image-context'; +import { type ImageContext as ImageContextType } from '../image-context'; import { defaultLoader } from './next-image-default-loader'; +const ImageContext = ImageContextValue as typeof ImageContextType; + const MockedNextImage = ({ loader, ...props }: _NextImage.ImageProps) => { const imageParameters = React.useContext(ImageContext); diff --git a/code/frameworks/nextjs/src/images/next-legacy-image.tsx b/code/frameworks/nextjs/src/images/next-legacy-image.tsx index c9b727d0145c..33dfc0e0068a 100644 --- a/code/frameworks/nextjs/src/images/next-legacy-image.tsx +++ b/code/frameworks/nextjs/src/images/next-legacy-image.tsx @@ -4,10 +4,15 @@ import OriginalNextLegacyImage from 'sb-original/next/legacy/image'; import type * as _NextLegacyImage from 'next/legacy/image'; import React from 'react'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore-error (this only errors during compilation for production) // eslint-disable-next-line import/no-extraneous-dependencies -import { ImageContext } from '@storybook/nextjs/dist/image-context'; +import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image-context'; +import { type ImageContext as ImageContextType } from '../image-context'; import { defaultLoader } from './next-image-default-loader'; +const ImageContext = ImageContextValue as typeof ImageContextType; + function NextLegacyImage({ loader, ...props }: _NextLegacyImage.ImageProps) { const imageParameters = React.useContext(ImageContext);