@storybook/nextjs 7.1.0-alpha.8 → 7.1.0-alpha.9

package/README.md

@@ -159,12 +159,16 @@ export default {
   framework: {
     name: '@storybook/nextjs',
     options: {
+      image: {
+        loading: 'eager',
+      },
       nextConfigPath: path.resolve(__dirname, '../next.config.js'),
     },
   },
 };
 ```
 
+- `image`: Props to pass to every instance of `next/image`
 - `nextConfigPath`: The absolute path to the `next.config.js`
 
 ### Next.js's Image Component

package/dist/preview.d.ts

@@ -1,7 +1,7 @@
 import * as lib_types_dist from 'lib/types/dist';
 import * as react from 'react';
 
-declare const decorators: ((Story: react.FC<{}>, { globals, parameters }: lib_types_dist.Addon_StoryContext<lib_types_dist.Renderer>) => react.ReactNode)[];
+declare const decorators: ((Story: react.FC<{}>, { parameters }: lib_types_dist.Addon_StoryContext<lib_types_dist.Renderer>) => react.ReactNode)[];
 declare const parameters: {
     docs: {
         source: {

package/dist/preview.js

@@ -1 +1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preview_exports={};__export(preview_exports,{decorators:()=>decorators,parameters:()=>parameters});module.exports=__toCommonJS(preview_exports);var import_config=require("next/config");(0,import_config.setConfig)(process.env.__NEXT_RUNTIME_CONFIG);var React3=__toESM(require("react"));var import_react=__toESM(require("react")),AppRouterContext,LayoutRouterContext,PathnameContext,SearchParamsContext;try{AppRouterContext=require("next/dist/shared/lib/app-router-context").AppRouterContext,LayoutRouterContext=require("next/dist/shared/lib/app-router-context").LayoutRouterContext,PathnameContext=require("next/dist/shared/lib/hooks-client-context").PathnameContext,SearchParamsContext=require("next/dist/shared/lib/hooks-client-context").SearchParamsContext}catch{AppRouterContext=import_react.default.Fragment,LayoutRouterContext=import_react.default.Fragment,PathnameContext=import_react.default.Fragment,SearchParamsContext=import_react.default.Fragment}var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,action:action2,routeParams})=>{let{pathname,query,segments=[],...restRouteParams}=routeParams;return import_react.default.createElement(AppRouterContext.Provider,{value:{push(...args){action2("nextNavigation.push")(...args)},replace(...args){action2("nextNavigation.replace")(...args)},forward(...args){action2("nextNavigation.forward")(...args)},back(...args){action2("nextNavigation.back")(...args)},prefetch(...args){action2("nextNavigation.prefetch")(...args)},refresh:()=>{action2("nextNavigation.refresh")()},...restRouteParams}},import_react.default.createElement(SearchParamsContext.Provider,{value:new URLSearchParams(query)},import_react.default.createElement(LayoutRouterContext.Provider,{value:{childNodes:new Map,tree:[pathname,{children:getParallelRoutes([...segments])}],url:pathname,headRenderedAboveThisLevel:!0}},import_react.default.createElement(PathnameContext.Provider,{value:pathname},children))))},app_router_provider_default=AppRouterProvider;var import_router_context=require("next/dist/shared/lib/router-context"),import_react2=__toESM(require("react")),PageRouterProvider=({children,action:action2,routeParams,globals})=>import_react2.default.createElement(import_router_context.RouterContext.Provider,{value:{push(...args){return action2("nextRouter.push")(...args),Promise.resolve(!0)},replace(...args){return action2("nextRouter.replace")(...args),Promise.resolve(!0)},reload(...args){action2("nextRouter.reload")(...args)},back(...args){action2("nextRouter.back")(...args)},forward(){action2("nextRouter.forward")()},prefetch(...args){return action2("nextRouter.prefetch")(...args),Promise.resolve()},beforePopState(...args){action2("nextRouter.beforePopState")(...args)},events:{on(...args){action2("nextRouter.events.on")(...args)},off(...args){action2("nextRouter.events.off")(...args)},emit(...args){action2("nextRouter.events.emit")(...args)}},locale:globals==null?void 0:globals.locale,route:"/",asPath:"/",basePath:"/",isFallback:!1,isLocaleDomain:!1,isReady:!0,isPreview:!1,...routeParams}},children),page_router_provider_default=PageRouterProvider;var action;try{action=require("@storybook/addon-actions").action}catch{action=()=>()=>{}}var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{globals,parameters:parameters2})=>{var _a,_b,_c;return((_a=parameters2.nextjs)==null?void 0:_a.appDirectory)??!1?React3.createElement(app_router_provider_default,{action,routeParams:{...defaultRouterParams,...(_b=parameters2.nextjs)==null?void 0:_b.navigation}},React3.createElement(Story,null)):React3.createElement(page_router_provider_default,{action,globals,routeParams:{...defaultRouterParams,...(_c=parameters2.nextjs)==null?void 0:_c.router}},React3.createElement(Story,null))};var React4=__toESM(require("react")),StyleRegistry;try{StyleRegistry=require("styled-jsx").StyleRegistry}catch{StyleRegistry=React4.Fragment}var StyledJsxDecorator=Story=>React4.createElement(StyleRegistry,null,React4.createElement(Story,null));var React5=__toESM(require("react")),import_semver=__toESM(require("semver")),defaultLoader=({src,width,quality})=>{let missingValues=[];if(src||missingValues.push("src"),width||missingValues.push("width"),missingValues.length>0)throw new Error(`Next Image Optimization requires ${missingValues.join(", ")} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify({src,width,quality})}`);return`${src}?w=${width}&q=${quality??75}`},NextImage=require("next/image"),OriginalNextImage=NextImage.default;Object.defineProperty(NextImage,"default",{configurable:!0,value:props=>React5.createElement(OriginalNextImage,{...props,loader:props.loader??defaultLoader})});if(import_semver.default.satisfies(process.env.__NEXT_VERSION,"^13.0.0")){let OriginalNextLegacyImage=require("next/legacy/image").default;Object.defineProperty(OriginalNextLegacyImage,"default",{configurable:!0,value:props=>React5.createElement(OriginalNextLegacyImage,{...props,loader:props.loader??defaultLoader})})}if(import_semver.default.satisfies(process.env.__NEXT_VERSION,"^12.2.0")){let OriginalNextFutureImage=require("next/future/image").default;Object.defineProperty(OriginalNextFutureImage,"default",{configurable:!0,value:props=>React5.createElement(OriginalNextFutureImage,{...props,loader:props.loader??defaultLoader})})}var React7=__toESM(require("react"));var import_react3=__toESM(require("react")),import_head_manager_context=require("next/dist/shared/lib/head-manager-context"),import_head_manager=__toESM(require("next/dist/client/head-manager")),HeadManagerProvider=({children})=>{let headManager=(0,import_react3.useMemo)(import_head_manager.default,[]);return headManager.getIsSsr=()=>!1,import_react3.default.createElement(import_head_manager_context.HeadManagerContext.Provider,{value:headManager},children)},head_manager_provider_default=HeadManagerProvider;var HeadManagerDecorator=Story=>React7.createElement(head_manager_provider_default,null,React7.createElement(Story,null));function addNextHeadCount(){let meta=document.createElement("meta");meta.name="next-head-count",meta.content="0",document.head.appendChild(meta)}addNextHeadCount();var decorators=[StyledJsxDecorator,RouterDecorator,HeadManagerDecorator],parameters={docs:{source:{excludeDecorators:!0}}};0&&(module.exports={decorators,parameters});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preview_exports={};__export(preview_exports,{decorators:()=>decorators,parameters:()=>parameters});module.exports=__toCommonJS(preview_exports);var import_config=require("next/config");(0,import_config.setConfig)(process.env.__NEXT_RUNTIME_CONFIG);var React=__toESM(require("react"));var import_react=require("react"),ImageContext=(0,import_react.createContext)({});var ImageDecorator=(Story,{parameters:parameters2})=>{var _a;return(_a=parameters2.nextjs)!=null&&_a.image?React.createElement(ImageContext.Provider,{value:parameters2.nextjs.image},React.createElement(Story,null)):React.createElement(Story,null)};var React4=__toESM(require("react"));var import_react2=__toESM(require("react")),AppRouterContext,LayoutRouterContext,PathnameContext,SearchParamsContext;try{AppRouterContext=require("next/dist/shared/lib/app-router-context").AppRouterContext,LayoutRouterContext=require("next/dist/shared/lib/app-router-context").LayoutRouterContext,PathnameContext=require("next/dist/shared/lib/hooks-client-context").PathnameContext,SearchParamsContext=require("next/dist/shared/lib/hooks-client-context").SearchParamsContext}catch{AppRouterContext=import_react2.default.Fragment,LayoutRouterContext=import_react2.default.Fragment,PathnameContext=import_react2.default.Fragment,SearchParamsContext=import_react2.default.Fragment}var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,action:action2,routeParams})=>{let{pathname,query,segments=[],...restRouteParams}=routeParams;return import_react2.default.createElement(AppRouterContext.Provider,{value:{push(...args){action2("nextNavigation.push")(...args)},replace(...args){action2("nextNavigation.replace")(...args)},forward(...args){action2("nextNavigation.forward")(...args)},back(...args){action2("nextNavigation.back")(...args)},prefetch(...args){action2("nextNavigation.prefetch")(...args)},refresh:()=>{action2("nextNavigation.refresh")()},...restRouteParams}},import_react2.default.createElement(SearchParamsContext.Provider,{value:new URLSearchParams(query)},import_react2.default.createElement(LayoutRouterContext.Provider,{value:{childNodes:new Map,tree:[pathname,{children:getParallelRoutes([...segments])}],url:pathname,headRenderedAboveThisLevel:!0}},import_react2.default.createElement(PathnameContext.Provider,{value:pathname},children))))},app_router_provider_default=AppRouterProvider;var import_router_context=require("next/dist/shared/lib/router-context"),import_react3=__toESM(require("react")),PageRouterProvider=({children,action:action2,routeParams,globals})=>import_react3.default.createElement(import_router_context.RouterContext.Provider,{value:{push(...args){return action2("nextRouter.push")(...args),Promise.resolve(!0)},replace(...args){return action2("nextRouter.replace")(...args),Promise.resolve(!0)},reload(...args){action2("nextRouter.reload")(...args)},back(...args){action2("nextRouter.back")(...args)},forward(){action2("nextRouter.forward")()},prefetch(...args){return action2("nextRouter.prefetch")(...args),Promise.resolve()},beforePopState(...args){action2("nextRouter.beforePopState")(...args)},events:{on(...args){action2("nextRouter.events.on")(...args)},off(...args){action2("nextRouter.events.off")(...args)},emit(...args){action2("nextRouter.events.emit")(...args)}},locale:globals==null?void 0:globals.locale,route:"/",asPath:"/",basePath:"/",isFallback:!1,isLocaleDomain:!1,isReady:!0,isPreview:!1,...routeParams}},children),page_router_provider_default=PageRouterProvider;var action;try{action=require("@storybook/addon-actions").action}catch{action=()=>()=>{}}var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{globals,parameters:parameters2})=>{var _a,_b,_c;return((_a=parameters2.nextjs)==null?void 0:_a.appDirectory)??!1?React4.createElement(app_router_provider_default,{action,routeParams:{...defaultRouterParams,...(_b=parameters2.nextjs)==null?void 0:_b.navigation}},React4.createElement(Story,null)):React4.createElement(page_router_provider_default,{action,globals,routeParams:{...defaultRouterParams,...(_c=parameters2.nextjs)==null?void 0:_c.router}},React4.createElement(Story,null))};var React5=__toESM(require("react")),StyleRegistry;try{StyleRegistry=require("styled-jsx").StyleRegistry}catch{StyleRegistry=React5.Fragment}var StyledJsxDecorator=Story=>React5.createElement(StyleRegistry,null,React5.createElement(Story,null));var React6=__toESM(require("react")),import_semver=__toESM(require("semver"));var defaultLoader=({src,width,quality})=>{let missingValues=[];if(src||missingValues.push("src"),width||missingValues.push("width"),missingValues.length>0)throw new Error(`Next Image Optimization requires ${missingValues.join(", ")} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify({src,width,quality})}`);return`${src}?w=${width}&q=${quality??75}`},NextImage=require("next/image"),OriginalNextImage=NextImage.default;Object.defineProperty(NextImage,"default",{configurable:!0,value:props=>{let imageParameters=React6.useContext(ImageContext);return React6.createElement(OriginalNextImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}});if(import_semver.default.satisfies(process.env.__NEXT_VERSION,"^13.0.0")){let OriginalNextLegacyImage=require("next/legacy/image").default;Object.defineProperty(OriginalNextLegacyImage,"default",{configurable:!0,value:props=>{let imageParameters=React6.useContext(ImageContext);return React6.createElement(OriginalNextLegacyImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}})}if(import_semver.default.satisfies(process.env.__NEXT_VERSION,"^12.2.0")){let OriginalNextFutureImage=require("next/future/image").default;Object.defineProperty(OriginalNextFutureImage,"default",{configurable:!0,value:props=>{let imageParameters=React6.useContext(ImageContext);return React6.createElement(OriginalNextFutureImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}})}var React8=__toESM(require("react"));var import_react4=__toESM(require("react")),import_head_manager_context=require("next/dist/shared/lib/head-manager-context"),import_head_manager=__toESM(require("next/dist/client/head-manager")),HeadManagerProvider=({children})=>{let headManager=(0,import_react4.useMemo)(import_head_manager.default,[]);return headManager.getIsSsr=()=>!1,import_react4.default.createElement(import_head_manager_context.HeadManagerContext.Provider,{value:headManager},children)},head_manager_provider_default=HeadManagerProvider;var HeadManagerDecorator=Story=>React8.createElement(head_manager_provider_default,null,React8.createElement(Story,null));function addNextHeadCount(){let meta=document.createElement("meta");meta.name="next-head-count",meta.content="0",document.head.appendChild(meta)}addNextHeadCount();var decorators=[StyledJsxDecorator,ImageDecorator,RouterDecorator,HeadManagerDecorator],parameters={docs:{source:{excludeDecorators:!0}}};0&&(module.exports={decorators,parameters});

package/dist/preview.mjs

@@ -1 +1 @@
-import{__require}from"./chunk-YPQDI6HO.mjs";import{setConfig}from"next/config";setConfig(process.env.__NEXT_RUNTIME_CONFIG);import*as React3 from"react";import React from"react";var AppRouterContext,LayoutRouterContext,PathnameContext,SearchParamsContext;try{AppRouterContext=__require("next/dist/shared/lib/app-router-context").AppRouterContext,LayoutRouterContext=__require("next/dist/shared/lib/app-router-context").LayoutRouterContext,PathnameContext=__require("next/dist/shared/lib/hooks-client-context").PathnameContext,SearchParamsContext=__require("next/dist/shared/lib/hooks-client-context").SearchParamsContext}catch{AppRouterContext=React.Fragment,LayoutRouterContext=React.Fragment,PathnameContext=React.Fragment,SearchParamsContext=React.Fragment}var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,action:action2,routeParams})=>{let{pathname,query,segments=[],...restRouteParams}=routeParams;return React.createElement(AppRouterContext.Provider,{value:{push(...args){action2("nextNavigation.push")(...args)},replace(...args){action2("nextNavigation.replace")(...args)},forward(...args){action2("nextNavigation.forward")(...args)},back(...args){action2("nextNavigation.back")(...args)},prefetch(...args){action2("nextNavigation.prefetch")(...args)},refresh:()=>{action2("nextNavigation.refresh")()},...restRouteParams}},React.createElement(SearchParamsContext.Provider,{value:new URLSearchParams(query)},React.createElement(LayoutRouterContext.Provider,{value:{childNodes:new Map,tree:[pathname,{children:getParallelRoutes([...segments])}],url:pathname,headRenderedAboveThisLevel:!0}},React.createElement(PathnameContext.Provider,{value:pathname},children))))},app_router_provider_default=AppRouterProvider;import{RouterContext}from"next/dist/shared/lib/router-context";import React2 from"react";var PageRouterProvider=({children,action:action2,routeParams,globals})=>React2.createElement(RouterContext.Provider,{value:{push(...args){return action2("nextRouter.push")(...args),Promise.resolve(!0)},replace(...args){return action2("nextRouter.replace")(...args),Promise.resolve(!0)},reload(...args){action2("nextRouter.reload")(...args)},back(...args){action2("nextRouter.back")(...args)},forward(){action2("nextRouter.forward")()},prefetch(...args){return action2("nextRouter.prefetch")(...args),Promise.resolve()},beforePopState(...args){action2("nextRouter.beforePopState")(...args)},events:{on(...args){action2("nextRouter.events.on")(...args)},off(...args){action2("nextRouter.events.off")(...args)},emit(...args){action2("nextRouter.events.emit")(...args)}},locale:globals?.locale,route:"/",asPath:"/",basePath:"/",isFallback:!1,isLocaleDomain:!1,isReady:!0,isPreview:!1,...routeParams}},children),page_router_provider_default=PageRouterProvider;var action;try{action=__require("@storybook/addon-actions").action}catch{action=()=>()=>{}}var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{globals,parameters:parameters2})=>parameters2.nextjs?.appDirectory??!1?React3.createElement(app_router_provider_default,{action,routeParams:{...defaultRouterParams,...parameters2.nextjs?.navigation}},React3.createElement(Story,null)):React3.createElement(page_router_provider_default,{action,globals,routeParams:{...defaultRouterParams,...parameters2.nextjs?.router}},React3.createElement(Story,null));import*as React4 from"react";var StyleRegistry;try{StyleRegistry=__require("styled-jsx").StyleRegistry}catch{StyleRegistry=React4.Fragment}var StyledJsxDecorator=Story=>React4.createElement(StyleRegistry,null,React4.createElement(Story,null));import*as React5 from"react";import semver from"semver";var defaultLoader=({src,width,quality})=>{let missingValues=[];if(src||missingValues.push("src"),width||missingValues.push("width"),missingValues.length>0)throw new Error(`Next Image Optimization requires ${missingValues.join(", ")} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify({src,width,quality})}`);return`${src}?w=${width}&q=${quality??75}`},NextImage=__require("next/image"),OriginalNextImage=NextImage.default;Object.defineProperty(NextImage,"default",{configurable:!0,value:props=>React5.createElement(OriginalNextImage,{...props,loader:props.loader??defaultLoader})});if(semver.satisfies(process.env.__NEXT_VERSION,"^13.0.0")){let OriginalNextLegacyImage=__require("next/legacy/image").default;Object.defineProperty(OriginalNextLegacyImage,"default",{configurable:!0,value:props=>React5.createElement(OriginalNextLegacyImage,{...props,loader:props.loader??defaultLoader})})}if(semver.satisfies(process.env.__NEXT_VERSION,"^12.2.0")){let OriginalNextFutureImage=__require("next/future/image").default;Object.defineProperty(OriginalNextFutureImage,"default",{configurable:!0,value:props=>React5.createElement(OriginalNextFutureImage,{...props,loader:props.loader??defaultLoader})})}import*as React7 from"react";import React6,{useMemo}from"react";import{HeadManagerContext}from"next/dist/shared/lib/head-manager-context";import initHeadManager from"next/dist/client/head-manager";var HeadManagerProvider=({children})=>{let headManager=useMemo(initHeadManager,[]);return headManager.getIsSsr=()=>!1,React6.createElement(HeadManagerContext.Provider,{value:headManager},children)},head_manager_provider_default=HeadManagerProvider;var HeadManagerDecorator=Story=>React7.createElement(head_manager_provider_default,null,React7.createElement(Story,null));function addNextHeadCount(){let meta=document.createElement("meta");meta.name="next-head-count",meta.content="0",document.head.appendChild(meta)}addNextHeadCount();var decorators=[StyledJsxDecorator,RouterDecorator,HeadManagerDecorator],parameters={docs:{source:{excludeDecorators:!0}}};export{decorators,parameters};
+import{__require}from"./chunk-YPQDI6HO.mjs";import{setConfig}from"next/config";setConfig(process.env.__NEXT_RUNTIME_CONFIG);import*as React from"react";import{createContext}from"react";var ImageContext=createContext({});var ImageDecorator=(Story,{parameters:parameters2})=>parameters2.nextjs?.image?React.createElement(ImageContext.Provider,{value:parameters2.nextjs.image},React.createElement(Story,null)):React.createElement(Story,null);import*as React4 from"react";import React2 from"react";var AppRouterContext,LayoutRouterContext,PathnameContext,SearchParamsContext;try{AppRouterContext=__require("next/dist/shared/lib/app-router-context").AppRouterContext,LayoutRouterContext=__require("next/dist/shared/lib/app-router-context").LayoutRouterContext,PathnameContext=__require("next/dist/shared/lib/hooks-client-context").PathnameContext,SearchParamsContext=__require("next/dist/shared/lib/hooks-client-context").SearchParamsContext}catch{AppRouterContext=React2.Fragment,LayoutRouterContext=React2.Fragment,PathnameContext=React2.Fragment,SearchParamsContext=React2.Fragment}var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,action:action2,routeParams})=>{let{pathname,query,segments=[],...restRouteParams}=routeParams;return React2.createElement(AppRouterContext.Provider,{value:{push(...args){action2("nextNavigation.push")(...args)},replace(...args){action2("nextNavigation.replace")(...args)},forward(...args){action2("nextNavigation.forward")(...args)},back(...args){action2("nextNavigation.back")(...args)},prefetch(...args){action2("nextNavigation.prefetch")(...args)},refresh:()=>{action2("nextNavigation.refresh")()},...restRouteParams}},React2.createElement(SearchParamsContext.Provider,{value:new URLSearchParams(query)},React2.createElement(LayoutRouterContext.Provider,{value:{childNodes:new Map,tree:[pathname,{children:getParallelRoutes([...segments])}],url:pathname,headRenderedAboveThisLevel:!0}},React2.createElement(PathnameContext.Provider,{value:pathname},children))))},app_router_provider_default=AppRouterProvider;import{RouterContext}from"next/dist/shared/lib/router-context";import React3 from"react";var PageRouterProvider=({children,action:action2,routeParams,globals})=>React3.createElement(RouterContext.Provider,{value:{push(...args){return action2("nextRouter.push")(...args),Promise.resolve(!0)},replace(...args){return action2("nextRouter.replace")(...args),Promise.resolve(!0)},reload(...args){action2("nextRouter.reload")(...args)},back(...args){action2("nextRouter.back")(...args)},forward(){action2("nextRouter.forward")()},prefetch(...args){return action2("nextRouter.prefetch")(...args),Promise.resolve()},beforePopState(...args){action2("nextRouter.beforePopState")(...args)},events:{on(...args){action2("nextRouter.events.on")(...args)},off(...args){action2("nextRouter.events.off")(...args)},emit(...args){action2("nextRouter.events.emit")(...args)}},locale:globals?.locale,route:"/",asPath:"/",basePath:"/",isFallback:!1,isLocaleDomain:!1,isReady:!0,isPreview:!1,...routeParams}},children),page_router_provider_default=PageRouterProvider;var action;try{action=__require("@storybook/addon-actions").action}catch{action=()=>()=>{}}var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{globals,parameters:parameters2})=>parameters2.nextjs?.appDirectory??!1?React4.createElement(app_router_provider_default,{action,routeParams:{...defaultRouterParams,...parameters2.nextjs?.navigation}},React4.createElement(Story,null)):React4.createElement(page_router_provider_default,{action,globals,routeParams:{...defaultRouterParams,...parameters2.nextjs?.router}},React4.createElement(Story,null));import*as React5 from"react";var StyleRegistry;try{StyleRegistry=__require("styled-jsx").StyleRegistry}catch{StyleRegistry=React5.Fragment}var StyledJsxDecorator=Story=>React5.createElement(StyleRegistry,null,React5.createElement(Story,null));import*as React6 from"react";import semver from"semver";var defaultLoader=({src,width,quality})=>{let missingValues=[];if(src||missingValues.push("src"),width||missingValues.push("width"),missingValues.length>0)throw new Error(`Next Image Optimization requires ${missingValues.join(", ")} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify({src,width,quality})}`);return`${src}?w=${width}&q=${quality??75}`},NextImage=__require("next/image"),OriginalNextImage=NextImage.default;Object.defineProperty(NextImage,"default",{configurable:!0,value:props=>{let imageParameters=React6.useContext(ImageContext);return React6.createElement(OriginalNextImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}});if(semver.satisfies(process.env.__NEXT_VERSION,"^13.0.0")){let OriginalNextLegacyImage=__require("next/legacy/image").default;Object.defineProperty(OriginalNextLegacyImage,"default",{configurable:!0,value:props=>{let imageParameters=React6.useContext(ImageContext);return React6.createElement(OriginalNextLegacyImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}})}if(semver.satisfies(process.env.__NEXT_VERSION,"^12.2.0")){let OriginalNextFutureImage=__require("next/future/image").default;Object.defineProperty(OriginalNextFutureImage,"default",{configurable:!0,value:props=>{let imageParameters=React6.useContext(ImageContext);return React6.createElement(OriginalNextFutureImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}})}import*as React8 from"react";import React7,{useMemo}from"react";import{HeadManagerContext}from"next/dist/shared/lib/head-manager-context";import initHeadManager from"next/dist/client/head-manager";var HeadManagerProvider=({children})=>{let headManager=useMemo(initHeadManager,[]);return headManager.getIsSsr=()=>!1,React7.createElement(HeadManagerContext.Provider,{value:headManager},children)},head_manager_provider_default=HeadManagerProvider;var HeadManagerDecorator=Story=>React8.createElement(head_manager_provider_default,null,React8.createElement(Story,null));function addNextHeadCount(){let meta=document.createElement("meta");meta.name="next-head-count",meta.content="0",document.head.appendChild(meta)}addNextHeadCount();var decorators=[StyledJsxDecorator,ImageDecorator,RouterDecorator,HeadManagerDecorator],parameters={docs:{source:{excludeDecorators:!0}}};export{decorators,parameters};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "7.1.0-alpha.8",
+  "version": "7.1.0-alpha.9",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
@@ -71,13 +71,13 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
     "@babel/runtime": "^7.21.0",
-    "@storybook/addon-actions": "7.1.0-alpha.8",
-    "@storybook/builder-webpack5": "7.1.0-alpha.8",
-    "@storybook/core-common": "7.1.0-alpha.8",
-    "@storybook/node-logger": "7.1.0-alpha.8",
-    "@storybook/preset-react-webpack": "7.1.0-alpha.8",
-    "@storybook/preview-api": "7.1.0-alpha.8",
-    "@storybook/react": "7.1.0-alpha.8",
+    "@storybook/addon-actions": "7.1.0-alpha.9",
+    "@storybook/builder-webpack5": "7.1.0-alpha.9",
+    "@storybook/core-common": "7.1.0-alpha.9",
+    "@storybook/node-logger": "7.1.0-alpha.9",
+    "@storybook/preset-react-webpack": "7.1.0-alpha.9",
+    "@storybook/preview-api": "7.1.0-alpha.9",
+    "@storybook/react": "7.1.0-alpha.9",
     "@types/node": "^16.0.0",
     "css-loader": "^6.7.3",
     "find-up": "^5.0.0",
@@ -147,5 +147,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "ae73d1c8065f7d614cfe6f3462ae7ca55a0c4e6b"
+  "gitHead": "ec112401efaae6d3d4996c790a30301177570da9"
 }

package/template/stories/Image.stories.jsx

@@ -48,3 +48,30 @@ export const Sized = {
     ],
   },
 };
+
+export const Lazy = {
+  args: {
+    src: 'https://storybook.js.org/images/placeholders/50x50.png',
+    width: 50,
+    height: 50,
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <div style={{ height: '200vh' }} />
+        {Story()}
+      </>
+    ),
+  ],
+};
+
+export const Eager = {
+  ...Lazy,
+  parameters: {
+    nextjs: {
+      image: {
+        loading: 'eager',
+      },
+    },
+  },
+};