Merge branch 'next' into vitest-integration

MIGRATION.md

@@ -2513,7 +2513,7 @@ const meta: Meta = {
         // Extract all providers (and nested ones) from a ModuleWithProviders
         importProvidersFrom(SomeOtherModule.forRoot()),
       ],
-    }
+    }),
   ],
 };
 

code/.storybook/main.ts

@@ -1,11 +1,12 @@
-import path from 'path';
+import { join } from 'node:path';
+
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { mergeConfig } from 'vite';
 
 import type { StorybookConfig } from '../frameworks/react-vite';
 
-const componentsPath = path.join(__dirname, '../core/src/components');
-const managerApiPath = path.join(__dirname, '../core/src/manager-api');
+const componentsPath = join(__dirname, '../core/src/components');
+const managerApiPath = join(__dirname, '../core/src/manager-api');
 
 const config: StorybookConfig = {
   stories: [

code/addons/controls/src/preset/checkDocsLoaded.ts

@@ -1,6 +1,6 @@
-import { checkAddonOrder, serverRequire } from 'storybook/internal/common';
+import { isAbsolute, join } from 'node:path';
 
-import path from 'path';
+import { checkAddonOrder, serverRequire } from 'storybook/internal/common';
 
 export const checkDocsLoaded = (configDir: string) => {
   checkAddonOrder({
@@ -12,9 +12,9 @@ export const checkDocsLoaded = (configDir: string) => {
       name: '@storybook/addon-controls',
       inEssentials: true,
     },
-    configFile: path.isAbsolute(configDir)
-      ? path.join(configDir, 'main')
-      : path.join(process.cwd(), configDir, 'main'),
+    configFile: isAbsolute(configDir)
+      ? join(configDir, 'main')
+      : join(process.cwd(), configDir, 'main'),
     getConfig: (configFile) => serverRequire(configFile),
   });
 };

code/addons/docs/src/plugins/mdx-plugin.ts

@@ -1,7 +1,8 @@
+import { dirname, join } from 'node:path';
+
 import type { Options } from 'storybook/internal/types';
 
 import { createFilter } from '@rollup/pluginutils';
-import { dirname, join } from 'path';
 import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSlug from 'rehype-slug';
 import type { Plugin } from 'vite';

code/addons/docs/src/preset.ts

@@ -1,9 +1,10 @@
+import { dirname, isAbsolute, join } from 'node:path';
+
 import { logger } from 'storybook/internal/node-logger';
 import type { DocsOptions, Options, PresetProperty } from 'storybook/internal/types';
 
 import type { CsfPluginOptions } from '@storybook/csf-plugin';
 
-import { dirname, isAbsolute, join } from 'path';
 import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSlug from 'rehype-slug';
 

code/addons/essentials/src/docs/preset.ts

@@ -1,4 +1,4 @@
-import { dirname, join } from 'path';
+import { dirname, join } from 'node:path';
 
 export * from '@storybook/addon-docs/dist/preset';
 

code/addons/essentials/src/index.ts

@@ -1,8 +1,8 @@
+import { isAbsolute, join } from 'node:path';
+
 import { serverRequire } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 
-import path from 'path';
-
 interface PresetOptions {
   /**
    * Allow to use @storybook/addon-actions
@@ -57,10 +57,8 @@ interface PresetOptions {
 }
 
 const requireMain = (configDir: string) => {
-  const absoluteConfigDir = path.isAbsolute(configDir)
-    ? configDir
-    : path.join(process.cwd(), configDir);
-  const mainFile = path.join(absoluteConfigDir, 'main');
+  const absoluteConfigDir = isAbsolute(configDir) ? configDir : join(process.cwd(), configDir);
+  const mainFile = join(absoluteConfigDir, 'main');
 
   return serverRequire(mainFile) ?? {};
 };

code/addons/interactions/src/preset.ts

@@ -1,6 +1,6 @@
-import { checkAddonOrder, serverRequire } from 'storybook/internal/common';
+import { isAbsolute, join } from 'node:path';
 
-import path from 'path';
+import { checkAddonOrder, serverRequire } from 'storybook/internal/common';
 
 export const checkActionsLoaded = (configDir: string) => {
   checkAddonOrder({
@@ -12,9 +12,9 @@ export const checkActionsLoaded = (configDir: string) => {
       name: '@storybook/addon-interactions',
       inEssentials: false,
     },
-    configFile: path.isAbsolute(configDir)
-      ? path.join(configDir, 'main')
-      : path.join(process.cwd(), configDir, 'main'),
+    configFile: isAbsolute(configDir)
+      ? join(configDir, 'main')
+      : join(process.cwd(), configDir, 'main'),
     getConfig: (configFile) => serverRequire(configFile),
   });
 };

code/addons/onboarding/src/preset.ts

@@ -1,9 +1,9 @@
+import { readFileSync } from 'node:fs';
+
 import type { Channel } from 'storybook/internal/channels';
 import { telemetry } from 'storybook/internal/telemetry';
 import type { CoreConfig, Options } from 'storybook/internal/types';
 
-import fs from 'fs';
-
 import { STORYBOOK_ADDON_ONBOARDING_CHANNEL } from './constants';
 
 type Event = {
@@ -20,7 +20,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
     const packageJsonPath = require.resolve('@storybook/addon-onboarding/package.json');
 
     const { version: addonVersion } = JSON.parse(
-      fs.readFileSync(packageJsonPath, { encoding: 'utf-8' })
+      readFileSync(packageJsonPath, { encoding: 'utf-8' })
     );
 
     channel.on(STORYBOOK_ADDON_ONBOARDING_CHANNEL, ({ type, ...event }: Event) => {

code/builders/builder-vite/src/codegen-importfn-script.ts

@@ -1,6 +1,6 @@
-import type { Options } from 'storybook/internal/types';
+import { relative } from 'node:path';
 
-import * as path from 'path';
+import type { Options } from 'storybook/internal/types';
 
 import { listStories } from './list-stories';
 
@@ -27,7 +27,7 @@ function toImportPath(relativePath: string) {
 async function toImportFn(stories: string[]) {
   const { normalizePath } = await import('vite');
   const objectEntries = stories.map((file) => {
-    const relativePath = normalizePath(path.relative(process.cwd(), file));
+    const relativePath = normalizePath(relative(process.cwd(), file));
 
     return `  '${toImportPath(relativePath)}': async () => import('/@fs/${file}')`;
   });

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

@@ -1,11 +1,12 @@
 // noinspection JSUnusedGlobalSymbols
+import { join, parse } from 'node:path';
+
 import { NoStatsForViteDevError } from 'storybook/internal/server-errors';
 import type { Options } from 'storybook/internal/types';
 
 import type { RequestHandler } from 'express';
 import express from 'express';
 import * as fs from 'fs-extra';
-import { join, parse } from 'path';
 import { corePath } from 'storybook/core-path';
 import type { ViteDevServer } from 'vite';
 

code/builders/builder-vite/src/list-stories.ts

@@ -1,8 +1,9 @@
+import { isAbsolute, join } from 'node:path';
+
 import { commonGlobOptions, normalizeStories } from 'storybook/internal/common';
 import type { Options } from 'storybook/internal/types';
 
 import { glob } from 'glob';
-import * as path from 'path';
 import slash from 'slash';
 
 export async function listStories(options: Options) {
@@ -15,10 +16,8 @@ export async function listStories(options: Options) {
           configDir: options.configDir,
           workingDir: options.configDir,
         }).map(({ directory, files }) => {
-          const pattern = path.join(directory, files);
-          const absolutePattern = path.isAbsolute(pattern)
-            ? pattern
-            : path.join(options.configDir, pattern);
+          const pattern = join(directory, files);
+          const absolutePattern = isAbsolute(pattern) ? pattern : join(options.configDir, pattern);
 
           return glob(slash(absolutePattern), {
             ...commonGlobOptions(absolutePattern),

code/builders/builder-vite/src/optimizeDeps.ts

@@ -1,6 +1,7 @@
+import { relative } from 'node:path';
+
 import type { Options } from 'storybook/internal/types';
 
-import * as path from 'path';
 import type { UserConfig, InlineConfig as ViteInlineConfig } from 'vite';
 
 import { listStories } from './list-stories';
@@ -121,7 +122,7 @@ export async function getOptimizeDeps(config: ViteInlineConfig, options: Options
   const { root = process.cwd() } = config;
   const { normalizePath, resolveConfig } = await import('vite');
   const absoluteStories = await listStories(options);
-  const stories = absoluteStories.map((storyPath) => normalizePath(path.relative(root, storyPath)));
+  const stories = absoluteStories.map((storyPath) => normalizePath(relative(root, storyPath)));
   // TODO: check if resolveConfig takes a lot of time, possible optimizations here
   const resolvedConfig = await resolveConfig(config, 'serve', 'development');
 

code/builders/builder-vite/src/plugins/code-generator-plugin.ts

@@ -1,6 +1,7 @@
+import { readFileSync } from 'node:fs';
+
 import type { Options } from 'storybook/internal/types';
 
-import * as fs from 'fs';
 import type { Plugin } from 'vite';
 
 import { generateImportFnScriptCode } from '../codegen-importfn-script';
@@ -69,41 +70,38 @@ export function codeGeneratorPlugin(options: Options): Plugin {
     },
     resolveId(source) {
       if (source === virtualFileId) {
-        return virtualFileId;
+        return `\0${virtualFileId}`;
       }
       if (source === iframePath) {
         return iframeId;
       }
       if (source === virtualStoriesFile) {
-        return virtualStoriesFile;
+        return `\0${virtualStoriesFile}`;
       }
       if (source === virtualPreviewFile) {
         return virtualPreviewFile;
       }
       if (source === virtualAddonSetupFile) {
-        return virtualAddonSetupFile;
+        return `\0${virtualAddonSetupFile}`;
       }
 
       return undefined;
     },
     async load(id, config) {
-      if (id === virtualStoriesFile) {
+      if (id === `\0${virtualStoriesFile}`) {
         return generateImportFnScriptCode(options);
       }
 
-      if (id === virtualAddonSetupFile) {
+      if (id === `\0${virtualAddonSetupFile}`) {
         return generateAddonSetupCode();
       }
 
-      if (id === virtualFileId) {
+      if (id === `\0${virtualFileId}`) {
         return generateModernIframeScriptCode(options, projectRoot);
       }
 
       if (id === iframeId) {
-        return fs.readFileSync(
-          require.resolve('@storybook/builder-vite/input/iframe.html'),
-          'utf-8'
-        );
+        return readFileSync(require.resolve('@storybook/builder-vite/input/iframe.html'), 'utf-8');
       }
 
       return undefined;

code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts

@@ -1,7 +1,8 @@
 // This plugin is a direct port of https://github.com/IanVS/vite-plugin-turbosnap
+import { relative } from 'node:path';
+
 import type { BuilderStats } from 'storybook/internal/types';
 
-import path from 'path';
 import slash from 'slash';
 import type { Plugin } from 'vite';
 
@@ -57,7 +58,7 @@ export function pluginWebpackStats({ workingDir }: WebpackStatsPluginOptions): W
     }
     // Otherwise, we need them in the format `./path/to/file.js`.
     else {
-      const relativePath = path.relative(workingDir, stripQueryParams(filename));
+      const relativePath = relative(workingDir, stripQueryParams(filename));
       // This seems hacky, got to be a better way to add a `./` to the start of a path.
       return `./${slash(relativePath)}`;
     }

code/builders/builder-vite/src/utils/process-preview-annotation.ts

@@ -1,7 +1,8 @@
+import { isAbsolute, relative, resolve } from 'node:path';
+
 import { stripAbsNodeModulesPath } from 'storybook/internal/common';
 import type { PreviewAnnotation } from 'storybook/internal/types';
 
-import { isAbsolute, relative, resolve } from 'path';
 import slash from 'slash';
 
 /**

code/builders/builder-vite/src/vite-config.ts

@@ -1,3 +1,5 @@
+import { resolve } from 'node:path';
+
 import {
   getBuilderOptions,
   getFrameworkName,
@@ -7,7 +9,6 @@ import {
 import { globalsNameReferenceMap } from 'storybook/internal/preview/globals';
 import type { Options } from 'storybook/internal/types';
 
-import * as path from 'path';
 import type {
   ConfigEnv,
   InlineConfig,
@@ -50,7 +51,7 @@ export async function commonConfig(
 
   const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);
 
-  const projectRoot = path.resolve(options.configDir, '..');
+  const projectRoot = resolve(options.configDir, '..');
 
   // I destructure away the `build` property from the user's config object
   // I do this because I can contain config that breaks storybook, such as we had in a lit project.

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

@@ -1,3 +1,5 @@
+import { join, parse } from 'node:path';
+
 import { PREVIEW_BUILDER_PROGRESS } from 'storybook/internal/core-events';
 import { logger } from 'storybook/internal/node-logger';
 import {
@@ -11,7 +13,6 @@ import { checkWebpackVersion } from '@storybook/core-webpack';
 
 import express from 'express';
 import fs from 'fs-extra';
-import { join, parse } from 'path';
 import prettyTime from 'pretty-hrtime';
 import { corePath } from 'storybook/core-path';
 import type { Configuration, Stats, StatsOptions } from 'webpack';

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

@@ -1,3 +1,5 @@
+import { dirname, join, resolve } from 'node:path';
+
 import {
   getBuilderOptions,
   isPreservingSymlinks,
@@ -14,7 +16,6 @@ import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import type { TransformOptions as EsbuildOptions } from 'esbuild';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { dirname, join, resolve } from 'path';
 import TerserWebpackPlugin from 'terser-webpack-plugin';
 import { dedent } from 'ts-dedent';
 import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin, ProvidePlugin } from 'webpack';

code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts

@@ -1,3 +1,5 @@
+import { join, resolve } from 'node:path';
+
 import {
   getBuilderOptions,
   handlebars,
@@ -9,7 +11,6 @@ import type { Options, PreviewAnnotation } from 'storybook/internal/types';
 
 import { toImportFn } from '@storybook/core-webpack';
 
-import { join, resolve } from 'path';
 import slash from 'slash';
 
 import type { BuilderOptions } from '../types';