GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-16 05:03:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #21486 from storybookjs/norbert/wrap-for-pnp

Browse Source 
Core: Fix builders/renderer PnP support
This commit is contained in:
Michael Shilman 2023-03-09 17:25:45 +08:00 committed by GitHub
commit 99bcb2ca3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 90 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
code/frameworks/angular/src/preset.ts
View File

@ -1,7 +1,9 @@
import path from 'path';
import { dirname, join } from 'path';
import { PresetProperty } from '@storybook/types';
import { StorybookConfig } from './types';
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
export const addons: PresetProperty<'addons', StorybookConfig> = [
require.resolve('./server/framework-preset-angular-cli'),
require.resolve('./server/framework-preset-angular-ivy'),
@ -19,9 +21,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
return {
...config,
builder: {
name: path.dirname(
require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
) as '@storybook/builder-webpack5',
name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
options: typeof framework === 'string' ? {} : framework.options.builder || {},
},
};

8
code/frameworks/ember/src/preset.ts
View File

@ -1,7 +1,9 @@
import path from 'path';
import { dirname, join } from 'path';
import type { PresetProperty } from '@storybook/types';
import type { StorybookConfig } from './types';
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
export const addons: PresetProperty<'addons', StorybookConfig> = [
require.resolve('./server/framework-preset-babel-ember'),
require.resolve('./server/framework-preset-ember-docs'),
@ -13,9 +15,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
return {
...config,
builder: {
name: path.dirname(
require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
) as '@storybook/builder-webpack5',
name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
options: typeof framework === 'string' ? {} : framework.options.builder || {},
},
};

12
code/frameworks/html-webpack5/src/preset.ts
View File

@ -1,9 +1,11 @@
import path from 'path';
import { dirname, join } from 'path';
import type { PresetProperty } from '@storybook/types';
import type { StorybookConfig } from './types';
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
export const addons: PresetProperty<'addons', StorybookConfig> = [
path.dirname(require.resolve(path.join('@storybook/preset-html-webpack', 'package.json'))),
wrapForPnP('@storybook/preset-html-webpack'),
];
export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@ -12,11 +14,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
return {
...config,
builder: {
name: path.dirname(
require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
) as '@storybook/builder-webpack5',
name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
options: typeof framework === 'string' ? {} : framework.options.builder || {},
},
renderer: path.dirname(require.resolve(path.join('@storybook/html', 'package.json'))),
renderer: wrapForPnP('@storybook/html'),
};
};

12
code/frameworks/preact-webpack5/src/preset.ts
View File

@ -1,9 +1,11 @@
import path from 'path';
import { dirname, join } from 'path';
import type { PresetProperty } from '@storybook/types';
import type { StorybookConfig } from './types';
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
export const addons: PresetProperty<'addons', StorybookConfig> = [
path.dirname(require.resolve(path.join('@storybook/preset-preact-webpack', 'package.json'))),
wrapForPnP('@storybook/preset-preact-webpack'),
];
export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@ -12,11 +14,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
return {
...config,
builder: {
name: path.dirname(
require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
) as '@storybook/builder-webpack5',
name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
options: typeof framework === 'string' ? {} : framework.options.builder || {},
},
renderer: path.dirname(require.resolve(path.join('@storybook/preact', 'package.json'))),
renderer: wrapForPnP('@storybook/preact'),
};
};

7
code/frameworks/react-vite/src/preset.ts
View File

@ -1,11 +1,14 @@
/* eslint-disable global-require */
import type { PresetProperty } from '@storybook/types';
import { hasVitePlugins } from '@storybook/builder-vite';
import { dirname, join } from 'path';
import type { StorybookConfig } from './types';
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
export const core: PresetProperty<'core', StorybookConfig> = {
builder: '@storybook/builder-vite',
renderer: '@storybook/react',
builder: wrapForPnP('@storybook/builder-vite') as '@storybook/builder-vite',
renderer: wrapForPnP('@storybook/react'),
};
export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {

18
code/frameworks/react-webpack5/src/preset.ts
View File

@ -1,11 +1,13 @@
/* eslint-disable no-param-reassign */
import path from 'path';
import { dirname, join } from 'path';
import type { PresetProperty, Options } from '@storybook/types';
import type { FrameworkOptions, StorybookConfig } from './types';
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
export const addons: PresetProperty<'addons', StorybookConfig> = [
path.dirname(require.resolve(path.join('@storybook/preset-react-webpack', 'package.json'))),
wrapForPnP('@storybook/preset-react-webpack'),
];
const defaultFrameworkOptions: FrameworkOptions = {
@ -26,7 +28,7 @@ export const frameworkOptions = async (
}
if (typeof config === 'undefined') {
return {
name: require.resolve('@storybook/react-webpack5') as '@storybook/react-webpack5',
name: wrapForPnP('@storybook/react-webpack5') as '@storybook/react-webpack5',
options: defaultFrameworkOptions,
};
}
@ -46,12 +48,10 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
return {
...config,
builder: {
name: path.dirname(
require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
) as '@storybook/builder-webpack5',
name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
options: typeof framework === 'string' ? {} : framework.options.builder || {},
},
renderer: path.dirname(require.resolve(path.join('@storybook/react', 'package.json'))),
renderer: wrapForPnP('@storybook/react'),
};
};
@ -60,9 +60,7 @@ export const webpack: StorybookConfig['webpack'] = async (config) => {
config.resolve.alias = {
...config.resolve?.alias,
'@storybook/react': path.dirname(
require.resolve(path.join('@storybook/react', 'package.json'))
),
'@storybook/react': wrapForPnP('@storybook/react'),
};
return config;
};

12
code/frameworks/server-webpack5/src/preset.ts
View File

@ -1,9 +1,11 @@
import path from 'path';
import { dirname, join } from 'path';
import type { PresetProperty } from '@storybook/types';
import type { StorybookConfig } from './types';
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
export const addons: PresetProperty<'addons', StorybookConfig> = [
path.dirname(require.resolve(path.join('@storybook/preset-server-webpack', 'package.json'))),
wrapForPnP('@storybook/preset-server-webpack'),
];
export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@ -12,11 +14,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
return {
...config,
builder: {
name: path.dirname(
require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
) as '@storybook/builder-webpack5',
name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
options: typeof framework === 'string' ? {} : framework.options.builder || {},
},
renderer: path.dirname(require.resolve(path.join('@storybook/server', 'package.json'))),
renderer: wrapForPnP('@storybook/server'),
};
};

12
code/frameworks/svelte-webpack5/src/preset.ts
View File

@ -1,9 +1,11 @@
import path from 'path';
import { dirname, join } from 'path';
import type { PresetProperty } from '@storybook/types';
import type { StorybookConfig } from './types';
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
export const addons: PresetProperty<'addons', StorybookConfig> = [
path.dirname(require.resolve(path.join('@storybook/preset-svelte-webpack', 'package.json'))),
wrapForPnP('@storybook/preset-svelte-webpack'),
];
export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@ -12,11 +14,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
return {
...config,
builder: {
name: path.dirname(
require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
) as '@storybook/builder-webpack5',
name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
options: typeof framework === 'string' ? {} : framework.options.builder || {},
},
renderer: path.dirname(require.resolve(path.join('@storybook/svelte', 'package.json'))),
renderer: wrapForPnP('@storybook/svelte'),
};
};

12
code/frameworks/vue-webpack5/src/preset.ts
View File

@ -1,9 +1,11 @@
import path from 'path';
import { dirname, join } from 'path';
import type { PresetProperty } from '@storybook/types';
import type { StorybookConfig } from './types';
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
export const addons: PresetProperty<'addons', StorybookConfig> = [
path.dirname(require.resolve(path.join('@storybook/preset-vue-webpack', 'package.json'))),
wrapForPnP('@storybook/preset-vue-webpack'),
];
export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@ -12,12 +14,10 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
return {
...config,
builder: {
name: path.dirname(
require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
) as '@storybook/builder-webpack5',
name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
options: typeof framework === 'string' ? {} : framework.options.builder || {},
},
renderer: path.dirname(require.resolve(path.join('@storybook/vue', 'package.json'))),
renderer: wrapForPnP('@storybook/vue'),
};
};

12
code/frameworks/vue3-webpack5/src/preset.ts
View File

@ -1,9 +1,11 @@
import path from 'path';
import { dirname, join } from 'path';
import type { PresetProperty } from '@storybook/types';
import type { StorybookConfig } from './types';
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
export const addons: PresetProperty<'addons', StorybookConfig> = [
path.dirname(require.resolve(path.join('@storybook/preset-vue3-webpack', 'package.json'))),
wrapForPnP('@storybook/preset-vue3-webpack'),
];
export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@ -12,12 +14,10 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
return {
...config,
builder: {
name: path.dirname(
require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
) as '@storybook/builder-webpack5',
name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
options: typeof framework === 'string' ? {} : framework.options.builder || {},
},
renderer: path.dirname(require.resolve(path.join('@storybook/vue3', 'package.json'))),
renderer: wrapForPnP('@storybook/vue3'),
};
};

14
code/frameworks/web-components-webpack5/src/preset.ts
View File

@ -1,11 +1,11 @@
import path from 'path';
import { dirname, join } from 'path';
import type { PresetProperty } from '@storybook/types';
import type { StorybookConfig } from './types';
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
export const addons: PresetProperty<'addons', StorybookConfig> = [
path.dirname(
require.resolve(path.join('@storybook/preset-web-components-webpack', 'package.json'))
),
wrapForPnP('@storybook/preset-web-components-webpack'),
];
export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@ -14,11 +14,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
return {
...config,
builder: {
name: path.dirname(
require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
) as '@storybook/builder-webpack5',
name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
options: typeof framework === 'string' ? {} : framework.options.builder || {},
},
renderer: path.dirname(require.resolve(path.join('@storybook/web-components', 'package.json'))),
renderer: wrapForPnP('@storybook/web-components'),
};
};

6
code/lib/builder-vite/src/index.ts
View File

@ -25,6 +25,8 @@ export * from './types';
*/
export type StorybookViteConfig = StorybookBaseConfig & StorybookConfigVite;
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
function iframeMiddleware(options: Options, server: ViteDevServer): RequestHandler {
return async (req, res, next) => {
if (!req.url.match(/^\/iframe\.html($|\?)/)) {
@ -64,7 +66,7 @@ export const start: ViteBuilder['start'] = async ({
}) => {
server = await createViteServer(options as Options, devServer);
const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
const previewResolvedDir = wrapForPnP('@storybook/preview');
const previewDirOrigin = join(previewResolvedDir, 'dist');
router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
@ -82,7 +84,7 @@ export const start: ViteBuilder['start'] = async ({
export const build: ViteBuilder['build'] = async ({ options }) => {
const viteCompilation = viteBuild(options as Options);
const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
const previewResolvedDir = wrapForPnP('@storybook/preview');
const previewDirOrigin = join(previewResolvedDir, 'dist');
const previewDirTarget = join(options.outputDir || '', `sb-preview`);

6
code/lib/builder-webpack5/src/index.ts
View File

@ -20,6 +20,8 @@ export const printDuration = (startTime: [number, number]) =>
.replace(' s', ' seconds')
.replace(' m', ' minutes');
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
let compilation: ReturnType<typeof webpackDevMiddleware> | undefined;
let reject: (reason?: any) => void;
@ -173,7 +175,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
compilation = webpackDevMiddleware(compiler, middlewareOptions);
const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
const previewResolvedDir = wrapForPnP('@storybook/preview');
const previewDirOrigin = join(previewResolvedDir, 'dist');
router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
@ -286,7 +288,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
});
});
const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
const previewResolvedDir = wrapForPnP('@storybook/preview');
const previewDirOrigin = join(previewResolvedDir, 'dist');
const previewDirTarget = join(options.outputDir || '', `sb-preview`);

8
code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
View File

@ -27,8 +27,10 @@ import { dedent } from 'ts-dedent';
import type { BuilderOptions, TypescriptOptions } from '../types';
import { createBabelLoader } from './babel-loader-preview';
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
const storybookPaths: Record<string, string> = {
global: dirname(require.resolve('@storybook/global/package.json')),
global: wrapForPnP('@storybook/global'),
...[
// these packages are not pre-bundled because of react dependencies
'api',
@ -40,12 +42,12 @@ const storybookPaths: Record<string, string> = {
].reduce(
(acc, sbPackage) => ({
...acc,
[`@storybook/${sbPackage}`]: dirname(require.resolve(`@storybook/${sbPackage}/package.json`)),
[`@storybook/${sbPackage}`]: wrapForPnP(`@storybook/${sbPackage}`),
}),
{}
),
// deprecated, remove in 8.0
[`@storybook/api`]: dirname(require.resolve(`@storybook/manager-api/package.json`)),
[`@storybook/api`]: wrapForPnP(`@storybook/manager-api`),
};
export default async (

14
code/presets/preact-webpack/src/index.ts
View File

@ -1,9 +1,11 @@
import path from 'path';
import { dirname, join } from 'path';
import type { StorybookConfig } from './types';
export * from './types';
export const babel: StorybookConfig['babelDefault'] = (config, options) => {
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
export const babel: StorybookConfig['babelDefault'] = (config) => {
return {
...config,
plugins: [
@ -36,10 +38,10 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = (config) => {
...config.resolve,
alias: {
...(config.resolve?.alias || {}),
react: path.dirname(require.resolve('preact/compat/package.json')),
'react-dom/test-utils': path.dirname(require.resolve('preact/test-utils/package.json')),
'react-dom': path.dirname(require.resolve('preact/compat/package.json')),
'react/jsx-runtime': path.dirname(require.resolve('preact/jsx-runtime/package.json')),
react: wrapForPnP('preact/compat'),
'react-dom/test-utils': wrapForPnP('preact/test-utils'),
'react-dom': wrapForPnP('preact/compat'),
'react/jsx-runtime': wrapForPnP('preact/jsx-runtime'),
},
},
};

12
code/presets/react-webpack/src/framework-preset-react.ts
View File

@ -1,4 +1,4 @@
import path from 'path';
import { dirname, join } from 'path';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import { logger } from '@storybook/node-logger';
@ -6,6 +6,8 @@ import { logger } from '@storybook/node-logger';
import type { Options, Preset } from '@storybook/core-webpack';
import type { StorybookConfig, ReactOptions } from './types';
const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
const applyFastRefresh = async (options: Options) => {
const isDevelopment = options.configType === 'DEVELOPMENT';
const framework = await options.presets.apply<Preset>('framework');
@ -24,13 +26,11 @@ export const babel: StorybookConfig['babel'] = async (config, options) => {
],
};
};
const storybookReactDirName = path.dirname(
require.resolve('@storybook/preset-react-webpack/package.json')
);
const storybookReactDirName = wrapForPnP('@storybook/preset-react-webpack');
// TODO: improve node_modules detection
const context = storybookReactDirName.includes('node_modules')
? path.join(storybookReactDirName, '../../') // Real life case, already in node_modules
: path.join(storybookReactDirName, '../../node_modules'); // SB Monorepo
? join(storybookReactDirName, '../../') // Real life case, already in node_modules
: join(storybookReactDirName, '../../node_modules'); // SB Monorepo
const hasJsxRuntime = () => {
try {