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

This reverts commit 99bcb2c, reversing
changes made to 0d4810b.

code/frameworks/angular/src/preset.ts

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

code/frameworks/ember/src/preset.ts

@@ -1,9 +1,7 @@
-import { dirname, join } from 'path';
+import path 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'),
@@ -15,7 +13,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
+      name: path.dirname(
+        require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
+      ) as '@storybook/builder-webpack5',
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
   };

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

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

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

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

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

@@ -1,14 +1,11 @@
 /* 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: wrapForPnP('@storybook/builder-vite') as '@storybook/builder-vite',
-  renderer: wrapForPnP('@storybook/react'),
+  builder: '@storybook/builder-vite',
+  renderer: '@storybook/react',
 };
 
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {

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

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

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

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

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

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

code/frameworks/vue-webpack5/src/preset.ts

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

code/frameworks/vue3-webpack5/src/preset.ts

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

code/frameworks/web-components-webpack5/src/preset.ts

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

code/lib/builder-vite/src/index.ts

@@ -25,8 +25,6 @@ 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($|\?)/)) {
@@ -66,7 +64,7 @@ export const start: ViteBuilder['start'] = async ({
 }) => {
   server = await createViteServer(options as Options, devServer);
 
-  const previewResolvedDir = wrapForPnP('@storybook/preview');
+  const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
   const previewDirOrigin = join(previewResolvedDir, 'dist');
 
   router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
@@ -84,7 +82,7 @@ export const start: ViteBuilder['start'] = async ({
 export const build: ViteBuilder['build'] = async ({ options }) => {
   const viteCompilation = viteBuild(options as Options);
 
-  const previewResolvedDir = wrapForPnP('@storybook/preview');
+  const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
   const previewDirOrigin = join(previewResolvedDir, 'dist');
   const previewDirTarget = join(options.outputDir || '', `sb-preview`);
 

code/lib/builder-webpack5/src/index.ts

@@ -20,8 +20,6 @@ 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;
 
@@ -175,7 +173,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
 
   compilation = webpackDevMiddleware(compiler, middlewareOptions);
 
-  const previewResolvedDir = wrapForPnP('@storybook/preview');
+  const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
   const previewDirOrigin = join(previewResolvedDir, 'dist');
 
   router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
@@ -288,7 +286,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
     });
   });
 
-  const previewResolvedDir = wrapForPnP('@storybook/preview');
+  const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
   const previewDirOrigin = join(previewResolvedDir, 'dist');
   const previewDirTarget = join(options.outputDir || '', `sb-preview`);
 

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

@@ -27,10 +27,8 @@ 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: wrapForPnP('@storybook/global'),
+  global: dirname(require.resolve('@storybook/global/package.json')),
   ...[
     // these packages are not pre-bundled because of react dependencies
     'api',
@@ -42,12 +40,12 @@ const storybookPaths: Record<string, string> = {
   ].reduce(
     (acc, sbPackage) => ({
       ...acc,
-      [`@storybook/${sbPackage}`]: wrapForPnP(`@storybook/${sbPackage}`),
+      [`@storybook/${sbPackage}`]: dirname(require.resolve(`@storybook/${sbPackage}/package.json`)),
     }),
     {}
   ),
   // deprecated, remove in 8.0
-  [`@storybook/api`]: wrapForPnP(`@storybook/manager-api`),
+  [`@storybook/api`]: dirname(require.resolve(`@storybook/manager-api/package.json`)),
 };
 
 export default async (