mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Hendrik LiebauandGitHub
9da15443c1
The cold cache dev indicator added in #94611 surfaces a load that filled an empty cache while streaming. After the load settles it leaves a persistent "Cold cache" badge in the corner. That badge is visually too loud and disruptive in its current form, so we want to keep iterating on its UI and UX before showing it to everyone. Until then it should be off by default. This change puts that persistent badge behind a new, default-off `experimental.coldCacheBadge` flag, plumbed to the dev overlay as `process.env.__NEXT_EXPERIMENTAL_COLD_CACHE_BADGE` via the define plugin. The transient "Rendering (cold cache)" pill shown during a navigation is intentionally kept regardless of the flag: it is transient and clears itself once the blocking navigation transition has committed, so it stays valuable without being disruptive. Only the permanent badge was the problem. The pre-existing "Cache disabled" (bypass) badge and the DevTools menu's cold-cache entry are also unaffected. The gate lives in `computeIntent`, so when the flag is off a cold load resolves to no badge and the indicator follows its existing empty-badge render path. Storybook forces the flag on through its `env` hook so the badge stories remain the surface for iterating on the design, and every test suite that asserts on the badge opts into the flag so none of them regress while it is disabled by default.
92 lines
2.7 KiB
TypeScript
92 lines
2.7 KiB
TypeScript
import type { StorybookConfig } from '@storybook/react-webpack5'
|
|
import { join, dirname, resolve } from 'path'
|
|
import { fileURLToPath } from 'url'
|
|
|
|
/**
|
|
* This function is used to resolve the absolute path of a package.
|
|
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
|
|
*/
|
|
function getAbsolutePath(value: string): any {
|
|
return dirname(require.resolve(join(value, 'package.json')))
|
|
}
|
|
import { createRequire } from 'module'
|
|
const require = createRequire(import.meta.url)
|
|
|
|
const config: StorybookConfig = {
|
|
stories: ['../src/next-devtools/**/*.stories.tsx'],
|
|
addons: [
|
|
getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
|
|
getAbsolutePath('@storybook/addon-essentials'),
|
|
getAbsolutePath('@storybook/addon-interactions'),
|
|
getAbsolutePath('@storybook/addon-a11y'),
|
|
],
|
|
framework: {
|
|
name: getAbsolutePath('@storybook/react-webpack5'),
|
|
options: {
|
|
builder: {
|
|
useSWC: true,
|
|
},
|
|
},
|
|
},
|
|
swc: () => ({
|
|
jsc: {
|
|
transform: {
|
|
react: {
|
|
runtime: 'automatic',
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
// The cold-cache badge is gated behind an experimental flag that is off by
|
|
// default in real apps, but its stories are where we iterate on the badge's
|
|
// UI, so force the flag on in Storybook.
|
|
env: (config) => ({
|
|
...config,
|
|
__NEXT_EXPERIMENTAL_COLD_CACHE_BADGE: 'true',
|
|
}),
|
|
webpackFinal: async (webpackConfig) => {
|
|
// Find and override CSS rule to use the devtool style injection
|
|
const cssRule = webpackConfig.module?.rules?.find((rule) => {
|
|
if (typeof rule !== 'object' || !rule) return false
|
|
if ('test' in rule && rule.test instanceof RegExp) {
|
|
return rule.test.test('.css')
|
|
}
|
|
return false
|
|
})
|
|
|
|
if (
|
|
cssRule &&
|
|
typeof cssRule === 'object' &&
|
|
'use' in cssRule &&
|
|
Array.isArray(cssRule.use)
|
|
) {
|
|
// Find the style-loader in the use array
|
|
const styleLoaderIndex = cssRule.use.findIndex((loader) => {
|
|
if (typeof loader === 'string') return loader.includes('style-loader')
|
|
if (typeof loader === 'object' && loader && 'loader' in loader) {
|
|
return loader.loader?.includes('style-loader')
|
|
}
|
|
return false
|
|
})
|
|
|
|
if (styleLoaderIndex !== -1) {
|
|
// Replace with our custom configuration
|
|
cssRule.use[styleLoaderIndex] = {
|
|
loader: require.resolve('style-loader'),
|
|
options: {
|
|
injectType: 'styleTag',
|
|
insert: resolve(
|
|
dirname(fileURLToPath(import.meta.url)),
|
|
'../src/build/webpack/loaders/devtool/devtool-style-inject.js'
|
|
),
|
|
},
|
|
}
|
|
}
|
|
}
|
|
|
|
return webpackConfig
|
|
},
|
|
}
|
|
|
|
export default config
|