@nx/storybook 23.2.0-beta.0 → 23.2.0-beta.10

package/dist/src/generators/configuration/configuration.js

@@ -76,9 +76,9 @@ async function configurationGeneratorInternal(tree, rawSchema) {
     (0, util_functions_1.configureTsSolutionConfig)(tree, schema);
     (0, util_functions_1.updateLintConfig)(tree, schema);
     (0, util_functions_1.addBuildStorybookToCacheableOperations)(tree);
-    (0, util_functions_1.addStorybookToNamedInputs)(tree);
+    (0, util_functions_1.addStorybookToNamedInputs)(tree, schema);
     if (!hasPlugin) {
-        (0, util_functions_1.addStorybookToTargetDefaults)(tree);
+        (0, util_functions_1.addStorybookToTargetDefaults)(tree, schema);
     }
     let devDeps = {};
     if (!hasPlugin || schema.addExplicitTargets) {
@@ -96,6 +96,9 @@ async function configurationGeneratorInternal(tree, rawSchema) {
     else {
         devDeps['storybook'] = (0, utilities_1.getStorybookVersionToInstall)(tree);
     }
+    if (schema.interactionTests) {
+        devDeps['@storybook/test-runner'] = (0, versions_1.versions)(tree).testRunnerVersion;
+    }
     if (schema.tsConfiguration) {
         devDeps['ts-node'] = versions_1.tsNodeVersion;
     }
@@ -128,7 +131,6 @@ function normalizeSchema(tree, schema) {
         nxJson.useInferencePlugins !== false;
     const defaults = {
         interactionTests: true,
-        linter: 'eslint',
         js: false,
         tsConfiguration: true,
         addPlugin,

package/dist/src/generators/configuration/lib/util-functions.d.ts

@@ -17,8 +17,8 @@ export declare function configureTsSolutionConfig(tree: Tree, schema: StorybookC
  */
 export declare function updateLintConfig(tree: Tree, schema: StorybookConfigureSchema): void;
 export declare function normalizeSchema(schema: StorybookConfigureSchema): StorybookConfigureSchema;
-export declare function addStorybookToNamedInputs(tree: Tree): void;
-export declare function addStorybookToTargetDefaults(tree: Tree, setCache?: boolean): void;
+export declare function addStorybookToNamedInputs(tree: Tree, schema: StorybookConfigureSchema): void;
+export declare function addStorybookToTargetDefaults(tree: Tree, schema: StorybookConfigureSchema, setCache?: boolean): void;
 export declare function createProjectStorybookDir(tree: Tree, projectName: string, uiFramework: UiFramework, js: boolean, tsConfiguration: boolean, root: string, projectType: string, projectIsRootProjectInStandaloneWorkspace: boolean, interactionTests: boolean, mainDir?: string, isNextJs?: boolean, usesSwc?: boolean, usesVite?: boolean, viteConfigFilePath?: string, hasPlugin?: boolean, viteConfigFileName?: string, usesReactNative?: boolean): void;
 export declare function getTsConfigPath(tree: Tree, projectName: string, path?: string): string;
 export declare function addBuildStorybookToCacheableOperations(tree: Tree): void;

package/dist/src/generators/configuration/lib/util-functions.js

@@ -74,7 +74,7 @@ function addAngularStorybookTarget(tree, projectName, interactionTests) {
         options: {
             port: 4400,
             configDir: `${projectConfig.root}/.storybook`,
-            browserTarget: `${projectName}:${ngBuildTarget ? 'build' : 'build-storybook'}`,
+            browserTarget: `${projectName}:${ngBuildTarget ?? 'build-storybook'}`,
             compodoc: false,
         },
         configurations: {
@@ -89,7 +89,7 @@ function addAngularStorybookTarget(tree, projectName, interactionTests) {
         options: {
             outputDir: (0, devkit_1.joinPathFragments)('dist/storybook', projectName),
             configDir: `${projectConfig.root}/.storybook`,
-            browserTarget: `${projectName}:${ngBuildTarget ? 'build' : 'build-storybook'}`,
+            browserTarget: `${projectName}:${ngBuildTarget ?? 'build-storybook'}`,
             compodoc: false,
         },
         configurations: {
@@ -345,7 +345,6 @@ function updateLintConfig(tree, schema) {
 function normalizeSchema(schema) {
     const defaults = {
         configureCypress: true,
-        linter: 'eslint',
         js: false,
     };
     return {
@@ -353,7 +352,7 @@ function normalizeSchema(schema) {
         ...schema,
     };
 }
-function addStorybookToNamedInputs(tree) {
+function addStorybookToNamedInputs(tree, schema) {
     const nxJson = (0, devkit_1.readNxJson)(tree);
     if (nxJson.namedInputs) {
         const hasProductionFileset = !!nxJson.namedInputs?.production;
@@ -364,14 +363,15 @@ function addStorybookToNamedInputs(tree) {
             if (!nxJson.namedInputs.production.includes('!{projectRoot}/.storybook/**/*')) {
                 nxJson.namedInputs.production.push('!{projectRoot}/.storybook/**/*');
             }
-            if (!nxJson.namedInputs.production.includes('!{projectRoot}/tsconfig.storybook.json')) {
+            if (schema.uiFramework !== '@storybook/angular' &&
+                !nxJson.namedInputs.production.includes('!{projectRoot}/tsconfig.storybook.json')) {
                 nxJson.namedInputs.production.push('!{projectRoot}/tsconfig.storybook.json');
             }
         }
         (0, devkit_1.updateNxJson)(tree, nxJson);
     }
 }
-function addStorybookToTargetDefaults(tree, setCache = true) {
+function addStorybookToTargetDefaults(tree, schema, setCache = true) {
     const nxJson = (0, devkit_1.readNxJson)(tree) ?? {};
     const existing = (0, internal_2.findTargetDefault)(nxJson.targetDefaults, {
         target: 'build-storybook',
@@ -391,7 +391,8 @@ function addStorybookToTargetDefaults(tree, setCache = true) {
     const negatedIndex = inputs.indexOf('!{projectRoot}/.storybook/**/*');
     if (negatedIndex !== -1)
         inputs.splice(negatedIndex, 1);
-    if (!inputs.includes('{projectRoot}/tsconfig.storybook.json')) {
+    if (schema.uiFramework !== '@storybook/angular' &&
+        !inputs.includes('{projectRoot}/tsconfig.storybook.json')) {
         inputs.push('{projectRoot}/tsconfig.storybook.json');
     }
     (0, internal_2.upsertTargetDefault)(tree, nxJson, {

package/dist/src/generators/configuration/schema.d.ts

@@ -1,10 +1,10 @@
-import { Linter, LinterType } from '@nx/eslint';
+import { LinterType } from '@nx/js';
 import { UiFramework } from '../../utils/models';
 
 export interface StorybookConfigureSchema {
   project: string;
   uiFramework?: UiFramework;
-  linter?: Linter | LinterType;
+  linter?: LinterType;
   js?: boolean;
   interactionTests?: boolean;
   tsConfiguration?: boolean;

package/dist/src/generators/configuration/schema.json

@@ -28,8 +28,7 @@
     "linter": {
       "description": "The tool to use for running lint checks.",
       "type": "string",
-      "enum": ["eslint", "none"],
-      "default": "eslint"
+      "enum": ["eslint", "oxlint", "none"]
     },
     "js": {
       "type": "boolean",

package/dist/src/generators/migrate-10/migrate-10.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.migrate10Generator = migrate10Generator;
 const devkit_1 = require("@nx/devkit");
-const output_1 = require("nx/src/utils/output");
 const calling_storybook_cli_1 = require("./calling-storybook-cli");
 const path_1 = require("path");
 const fs_1 = require("fs");
@@ -11,7 +10,7 @@ async function migrate10Generator(tree, schema) {
     (0, assert_supported_storybook_version_1.assertSupportedStorybookVersion)(tree);
     const packageJson = (0, devkit_1.readJson)(tree, 'package.json');
     if (!(0, calling_storybook_cli_1.checkStorybookInstalled)(packageJson)) {
-        output_1.output.error({
+        devkit_1.output.error({
             title: 'No Storybook packages installed',
             bodyLines: [
                 `🚨 Nx did not find any Storybook packages installed in your workspace.`,

package/dist/src/generators/migrate-8/helper-functions.js

@@ -6,9 +6,9 @@ exports.handleMigrationResult = handleMigrationResult;
 exports.checkStorybookInstalled = checkStorybookInstalled;
 exports.logResult = logResult;
 const devkit_1 = require("@nx/devkit");
-const fileutils_1 = require("nx/src/utils/fileutils");
 const fs_1 = require("fs");
 const path_1 = require("path");
+const internal_1 = require("@nx/devkit/internal");
 function onlyShowGuide(storybookProjects) {
     const packageManager = (0, devkit_1.detectPackageManager)();
     const pm = (0, devkit_1.getPackageManagerCommand)(packageManager);
@@ -65,7 +65,7 @@ function getAllStorybookInfo(tree) {
     return allStorybookDirs;
 }
 function handleMigrationResult(migrateResult, allStorybookProjects) {
-    if ((0, fileutils_1.fileExists)((0, path_1.join)(devkit_1.workspaceRoot, 'migration-storybook.log')) &&
+    if ((0, internal_1.fileExists)((0, path_1.join)(devkit_1.workspaceRoot, 'migration-storybook.log')) &&
         Object.keys(migrateResult.successfulProjects)?.length) {
         const sbLogFile = (0, fs_1.readFileSync)((0, path_1.join)(devkit_1.workspaceRoot, 'migration-storybook.log'), 'utf-8');
         Object.keys(migrateResult.successfulProjects).forEach((projectName) => {

package/dist/src/generators/migrate-8/migrate-8.js

@@ -2,13 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.migrate8Generator = migrate8Generator;
 const devkit_1 = require("@nx/devkit");
-const output_1 = require("nx/src/utils/output");
 const calling_storybook_cli_1 = require("./calling-storybook-cli");
 const helper_functions_1 = require("./helper-functions");
 async function migrate8Generator(tree, schema) {
     const packageJson = (0, devkit_1.readJson)(tree, 'package.json');
     if (!(0, helper_functions_1.checkStorybookInstalled)(packageJson)) {
-        output_1.output.error({
+        devkit_1.output.error({
             title: 'No Storybook packages installed',
             bodyLines: [
                 `🚨 Nx did not find any Storybook packages installed in your workspace.`,

package/dist/src/generators/migrate-9/helper-functions.js

@@ -6,9 +6,9 @@ exports.handleMigrationResult = handleMigrationResult;
 exports.checkStorybookInstalled = checkStorybookInstalled;
 exports.logResult = logResult;
 const devkit_1 = require("@nx/devkit");
-const fileutils_1 = require("nx/src/utils/fileutils");
 const fs_1 = require("fs");
 const path_1 = require("path");
+const internal_1 = require("@nx/devkit/internal");
 function onlyShowGuide(storybookProjects) {
     const packageManager = (0, devkit_1.detectPackageManager)();
     const pm = (0, devkit_1.getPackageManagerCommand)(packageManager);
@@ -66,7 +66,7 @@ function getAllStorybookInfo(tree) {
     return allStorybookDirs;
 }
 function handleMigrationResult(migrateResult, allStorybookProjects) {
-    if ((0, fileutils_1.fileExists)((0, path_1.join)(devkit_1.workspaceRoot, 'migration-storybook.log')) &&
+    if ((0, internal_1.fileExists)((0, path_1.join)(devkit_1.workspaceRoot, 'migration-storybook.log')) &&
         Object.keys(migrateResult.successfulProjects)?.length) {
         const sbLogFile = (0, fs_1.readFileSync)((0, path_1.join)(devkit_1.workspaceRoot, 'migration-storybook.log'), 'utf-8');
         Object.keys(migrateResult.successfulProjects).forEach((projectName) => {

package/dist/src/generators/migrate-9/migrate-9.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.migrate9Generator = migrate9Generator;
 const devkit_1 = require("@nx/devkit");
-const output_1 = require("nx/src/utils/output");
 const calling_storybook_cli_1 = require("./calling-storybook-cli");
 const helper_functions_1 = require("./helper-functions");
 const assert_supported_storybook_version_1 = require("../../utils/assert-supported-storybook-version");
@@ -11,7 +10,7 @@ async function migrate9Generator(tree, schema) {
     schema.versionTag = schema.versionTag ?? 'latest';
     const packageJson = (0, devkit_1.readJson)(tree, 'package.json');
     if (!(0, helper_functions_1.checkStorybookInstalled)(packageJson)) {
-        output_1.output.error({
+        devkit_1.output.error({
             title: 'No Storybook packages installed',
             bodyLines: [
                 `🚨 Nx did not find any Storybook packages installed in your workspace.`,

package/dist/src/migrations/update-21-1-0/update-sb-9.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = changeStorybookTargets;
 const tslib_1 = require("tslib");
-const output_1 = require("nx/src/utils/output");
+const devkit_1 = require("@nx/devkit");
 const migrate_9_1 = tslib_1.__importDefault(require("../../generators/migrate-9/migrate-9"));
 const utilities_1 = require("../../utils/utilities");
 async function changeStorybookTargets(tree) {
@@ -18,7 +18,7 @@ async function changeStorybookTargets(tree) {
          */
         return;
     }
-    output_1.output.log({
+    devkit_1.output.log({
         title: 'Migrating Storybook to v9',
         bodyLines: [
             `🚀 This migration will update your Storybook configuration to v9.`,

package/dist/src/migrations/update-22-1-0/migrate-to-storybook-10.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = migrateToStorybook10;
 const tslib_1 = require("tslib");
-const output_1 = require("nx/src/utils/output");
+const devkit_1 = require("@nx/devkit");
 const migrate_10_1 = tslib_1.__importDefault(require("../../generators/migrate-10/migrate-10"));
 async function migrateToStorybook10(tree) {
-    output_1.output.log({
+    devkit_1.output.log({
         title: 'Migrating Storybook to v10',
         bodyLines: [
             `🚀 This migration will update your Storybook configuration to v10.`,

package/dist/src/plugins/plugin.js

@@ -5,11 +5,10 @@ const internal_1 = require("@nx/devkit/internal");
 const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
 const fs_1 = require("fs");
-const cache_directory_1 = require("nx/src/utils/cache-directory");
 const js_1 = require("@nx/js");
-const file_hasher_1 = require("nx/src/hasher/file-hasher");
 const tsquery_1 = require("@phenomnomnominal/tsquery");
 const internal_2 = require("@nx/js/internal");
+const utilities_1 = require("../utils/utilities");
 /**
  * @deprecated The 'createDependencies' function is now a no-op. This functionality is included in 'createNodesV2'.
  */
@@ -18,12 +17,29 @@ const createDependencies = () => {
 };
 exports.createDependencies = createDependencies;
 const storybookConfigGlob = '**/.storybook/main.{js,ts,mjs,mts,cjs,cts}';
+// Vite-builder frameworks we infer the addon target for. The addon itself only
+// checks that the resolved builder is Vite, so this list is conservative rather
+// than exhaustive. `@storybook/sveltekit` uses the Vite builder despite the name.
+const VITE_BUILDER_FRAMEWORKS = new Set([
+    '@storybook/angular-vite',
+    '@storybook/react-vite',
+    '@storybook/react-native-web-vite',
+    '@storybook/tanstack-react',
+    '@storybook/vue-vite',
+    '@storybook/vue3-vite',
+    '@storybook/svelte-vite',
+    '@storybook/sveltekit',
+    '@storybook/web-components-vite',
+    '@storybook/html-vite',
+    '@storybook/preact-vite',
+    '@storybook/nextjs-vite',
+]);
 exports.createNodes = [
     storybookConfigGlob,
     async (configFilePaths, options, context) => {
         const normalizedOptions = normalizeOptions(options);
-        const optionsHash = (0, file_hasher_1.hashObject)(normalizedOptions);
-        const cachePath = (0, path_1.join)(cache_directory_1.workspaceDataDirectory, `storybook-${optionsHash}.hash`);
+        const optionsHash = (0, internal_1.hashObject)(normalizedOptions);
+        const cachePath = (0, path_1.join)(internal_1.workspaceDataDirectory, `storybook-${optionsHash}.hash`);
         const targetsCache = new internal_1.PluginCache(cachePath);
         const packageManager = (0, devkit_1.detectPackageManager)(context.workspaceRoot);
         const pmc = (0, devkit_1.getPackageManagerCommand)(packageManager);
@@ -71,9 +87,9 @@ function getProjectRootFromConfigPath(configFilePath) {
     return projectRoot;
 }
 async function createNodesInternal(configFilePath, options, context, targetsCache, pmc, projectRoot, hash) {
-    const projectName = buildProjectName(projectRoot, context.workspaceRoot);
+    const { projectName, angularBuildTarget } = getProjectMetadata(projectRoot, context.workspaceRoot);
     if (!targetsCache.has(hash)) {
-        targetsCache.set(hash, await buildStorybookTargets(configFilePath, projectRoot, options, context, projectName, pmc));
+        targetsCache.set(hash, await buildStorybookTargets(configFilePath, projectRoot, options, context, projectName, angularBuildTarget, pmc));
     }
     const result = {
         projects: {
@@ -85,35 +101,51 @@ async function createNodesInternal(configFilePath, options, context, targetsCach
     };
     return result;
 }
-async function buildStorybookTargets(configFilePath, projectRoot, options, context, projectName, pmc) {
+async function buildStorybookTargets(configFilePath, projectRoot, options, context, projectName, angularBuildTarget, pmc) {
     const buildOutputs = getOutputs();
     const namedInputs = (0, internal_1.getNamedInputs)(projectRoot, context);
     // First attempt to do a very fast lookup for the framework
     // If that fails, the framework might be inherited, so do a very heavyweight lookup
-    const storybookFramework = (await getStorybookFramework(configFilePath, context)) ||
-        (await getStorybookFullyResolvedFramework(configFilePath, context));
+    // The slow path returns whatever the config holds, which for the common
+    // `getAbsolutePath('@storybook/react-vite')` shape is a resolved path.
+    const storybookFramework = normalizePackageName((await getStorybookFramework(configFilePath, context)) ||
+        (await getStorybookFullyResolvedFramework(configFilePath, context)));
     const frameworkIsAngular = storybookFramework === '@storybook/angular';
     if (frameworkIsAngular && !projectName) {
         throw new Error(`Could not find a name for the project at '${projectRoot}'. Please make sure that the project has a package.json or project.json file with name specified.`);
     }
     const targets = {};
-    targets[options.buildStorybookTargetName] = buildTarget(namedInputs, buildOutputs, projectRoot, frameworkIsAngular, projectName, configFilePath);
-    targets[options.serveStorybookTargetName] = serveTarget(projectRoot, frameworkIsAngular, projectName, configFilePath);
-    if (isStorybookTestRunnerInstalled()) {
+    // Resolution alone is not enough: the addon lives in the root package.json, so
+    // it resolves for every project. Registration in this project's own config is
+    // what makes it ours. Resolve first - it is a stat walk, while reading the
+    // registration executes the user's config.
+    const usesVitestAddon = VITE_BUILDER_FRAMEWORKS.has(storybookFramework) &&
+        isInstalled('@storybook/addon-vitest', context.workspaceRoot, projectRoot) &&
+        (await registersVitestAddon(configFilePath, context));
+    const hasTestRunner = isInstalled('@storybook/test-runner', context.workspaceRoot, projectRoot);
+    // Falls back to the storybook build target, whose name is configurable, so
+    // resolve it from the options rather than assuming the default.
+    const browserTarget = `${projectName}:${angularBuildTarget ?? options.buildStorybookTargetName}`;
+    targets[options.buildStorybookTargetName] = buildTarget(namedInputs, buildOutputs, projectRoot, frameworkIsAngular, browserTarget, configFilePath, hasTestRunner);
+    targets[options.serveStorybookTargetName] = serveTarget(projectRoot, frameworkIsAngular, browserTarget, configFilePath);
+    if (usesVitestAddon) {
+        targets[options.testStorybookTargetName] = vitestTestTarget(projectRoot);
+    }
+    else if (hasTestRunner) {
         targets[options.testStorybookTargetName] = testTarget(projectRoot);
     }
     targets[options.staticStorybookTargetName] = serveStaticTarget(options, projectRoot);
     (0, internal_2.addBuildAndWatchDepsTargets)(context.workspaceRoot, projectRoot, targets, options, pmc);
     return targets;
 }
-function buildTarget(namedInputs, outputs, projectRoot, frameworkIsAngular, projectName, configFilePath) {
+function buildTarget(namedInputs, outputs, projectRoot, frameworkIsAngular, browserTarget, configFilePath, hasTestRunner) {
     let targetConfig;
     if (frameworkIsAngular) {
         targetConfig = {
             executor: '@storybook/angular:build-storybook',
             options: {
                 configDir: `${(0, path_1.dirname)(configFilePath)}`,
-                browserTarget: `${projectName}:build-storybook`,
+                browserTarget,
                 compodoc: false,
                 outputDir: (0, devkit_1.joinPathFragments)(projectRoot, 'storybook-static'),
             },
@@ -127,9 +159,7 @@ function buildTarget(namedInputs, outputs, projectRoot, frameworkIsAngular, proj
                     externalDependencies: [
                         'storybook',
                         '@storybook/angular',
-                        isStorybookTestRunnerInstalled()
-                            ? '@storybook/test-runner'
-                            : undefined,
+                        hasTestRunner ? '@storybook/test-runner' : undefined,
                     ].filter(Boolean),
                 },
             ],
@@ -148,9 +178,7 @@ function buildTarget(namedInputs, outputs, projectRoot, frameworkIsAngular, proj
                 {
                     externalDependencies: [
                         'storybook',
-                        isStorybookTestRunnerInstalled()
-                            ? '@storybook/test-runner'
-                            : undefined,
+                        hasTestRunner ? '@storybook/test-runner' : undefined,
                     ].filter(Boolean),
                 },
             ],
@@ -158,15 +186,18 @@ function buildTarget(namedInputs, outputs, projectRoot, frameworkIsAngular, proj
     }
     return targetConfig;
 }
-function serveTarget(projectRoot, frameworkIsAngular, projectName, configFilePath) {
+function serveTarget(projectRoot, frameworkIsAngular, browserTarget, configFilePath) {
     if (frameworkIsAngular) {
         return {
             continuous: true,
             executor: '@storybook/angular:start-storybook',
             options: {
                 configDir: `${(0, path_1.dirname)(configFilePath)}`,
-                browserTarget: `${projectName}:build-storybook`,
+                browserTarget,
                 compodoc: false,
+                // The builder defaults to 9009, but test-storybook looks for 6006. Match
+                // the port the non-Angular `storybook dev` target serves on.
+                port: 6006,
             },
         };
     }
@@ -190,6 +221,24 @@ function testTarget(projectRoot) {
     };
     return targetConfig;
 }
+function vitestTestTarget(projectRoot) {
+    const targetConfig = {
+        // `--passWithNoTests` so the target is green before any stories exist. It does
+        // not mask a missing `storybook` project: that is a startup error either way.
+        command: `vitest run --project=storybook --passWithNoTests`,
+        options: { cwd: projectRoot },
+        inputs: [
+            {
+                externalDependencies: [
+                    'storybook',
+                    '@storybook/addon-vitest',
+                    'vitest',
+                ],
+            },
+        ],
+    };
+    return targetConfig;
+}
 function serveStaticTarget(options, projectRoot) {
     const targetConfig = {
         dependsOn: [`${options.buildStorybookTargetName}`],
@@ -210,10 +259,11 @@ async function getStorybookFramework(configFilePath, context) {
         return parseFrameworkName(mainTsJs);
     }
     const storybookConfigImportPackage = (0, tsquery_1.query)(importDeclarations, 'StringLiteral')?.[0];
-    if (storybookConfigImportPackage?.getText() === `'@storybook/core-common'`) {
+    const frameworkPackage = stringLiteralValue(storybookConfigImportPackage);
+    if (frameworkPackage === '@storybook/core-common') {
         return parseFrameworkName(mainTsJs);
     }
-    return storybookConfigImportPackage?.getText();
+    return frameworkPackage;
 }
 function parseFrameworkName(mainTsJs) {
     const frameworkPropertyAssignment = (0, tsquery_1.query)(mainTsJs, `PropertyAssignment:has(Identifier:has([text="framework"]))`)?.[0];
@@ -226,9 +276,13 @@ function parseFrameworkName(mainTsJs) {
     });
     if (!namePropertyAssignment) {
         const storybookConfigImportPackage = (0, tsquery_1.query)(frameworkPropertyAssignment, 'StringLiteral')?.[0];
-        return storybookConfigImportPackage?.getText();
+        return stringLiteralValue(storybookConfigImportPackage);
     }
-    return (0, tsquery_1.query)(namePropertyAssignment, `StringLiteral`)?.[0]?.getText();
+    return stringLiteralValue((0, tsquery_1.query)(namePropertyAssignment, `StringLiteral`)?.[0]);
+}
+function stringLiteralValue(node) {
+    const value = node?.getText();
+    return value?.slice(1, -1);
 }
 async function getStorybookFullyResolvedFramework(configFilePath, context) {
     const resolvedPath = (0, path_1.join)(context.workspaceRoot, configFilePath);
@@ -276,26 +330,73 @@ function normalizeOptions(options) {
         watchDepsTargetName: options.watchDepsTargetName ?? 'watch-deps',
     };
 }
-function buildProjectName(projectRoot, workspaceRoot) {
+function getProjectMetadata(projectRoot, workspaceRoot) {
     const packageJsonPath = (0, path_1.join)(workspaceRoot, projectRoot, 'package.json');
     const projectJsonPath = (0, path_1.join)(workspaceRoot, projectRoot, 'project.json');
-    let name;
+    let projectJsonName;
+    let projectJsonTargets = {};
+    let packageJsonName;
+    let packageJsonTargets = {};
     if ((0, fs_1.existsSync)(projectJsonPath)) {
         const projectJson = (0, devkit_1.parseJson)((0, fs_1.readFileSync)(projectJsonPath, 'utf-8'));
-        name = projectJson.name;
+        projectJsonName = projectJson.name;
+        projectJsonTargets = projectJson.targets ?? {};
     }
-    else if ((0, fs_1.existsSync)(packageJsonPath)) {
+    if ((0, fs_1.existsSync)(packageJsonPath)) {
         const packageJson = (0, devkit_1.parseJson)((0, fs_1.readFileSync)(packageJsonPath, 'utf-8'));
-        name = packageJson.name;
+        packageJsonName = packageJson.name;
+        packageJsonTargets = packageJson.nx?.targets ?? {};
     }
-    return name;
+    // Mirror how Nx itself names a project: project.json, then package.json, then
+    // the directory. Both files can carry targets, and project.json wins.
+    const targets = { ...packageJsonTargets, ...projectJsonTargets };
+    return {
+        projectName: projectJsonName ?? packageJsonName ?? nameFromRoot(projectRoot),
+        angularBuildTarget: (0, utilities_1.findStorybookAndBuildTargetsAndCompiler)(targets).ngBuildTarget,
+    };
+}
+// Same derivation as Nx's `toProjectName`. The workspace root has no directory
+// segment to name it after, so leave it undefined and let the caller complain.
+function nameFromRoot(projectRoot) {
+    const segment = projectRoot.split(/[\/\\]/g).pop();
+    return !segment || segment === '.' ? undefined : segment.toLowerCase();
+}
+async function registersVitestAddon(configFilePath, context) {
+    try {
+        const { addons } = await (0, internal_1.loadConfigFile)((0, path_1.join)(context.workspaceRoot, configFilePath));
+        return addons?.some(isVitestAddon) ?? false;
+    }
+    catch {
+        return false;
+    }
+}
+function isVitestAddon(addon) {
+    const addonName = typeof addon === 'string'
+        ? addon
+        : typeof addon === 'object' && addon !== null && 'name' in addon
+            ? addon.name
+            : undefined;
+    return (typeof addonName === 'string' &&
+        normalizePackageName(addonName) === '@storybook/addon-vitest');
+}
+function normalizePackageName(packageName) {
+    return packageName
+        ?.replace(/\\/g, '/')
+        .split('/')
+        .filter(Boolean)
+        .slice(-2)
+        .join('/');
 }
-function isStorybookTestRunnerInstalled() {
+// Resolved from the project first so a runner declared in the project's own
+// package.json counts, not just one hoisted to the workspace root.
+function isInstalled(packageName, workspaceRoot, projectRoot) {
     try {
-        require.resolve('@storybook/test-runner');
+        require.resolve(packageName, {
+            paths: [(0, path_1.join)(workspaceRoot, projectRoot), workspaceRoot],
+        });
         return true;
     }
-    catch (e) {
+    catch {
         return false;
     }
 }

package/dist/src/utils/utilities.js

@@ -67,24 +67,21 @@ function findStorybookAndBuildTargetsAndCompiler(targets) {
         '@angular-devkit/build-angular:application',
         '@angular-devkit/build-angular:browser',
         '@angular-devkit/build-angular:browser-esbuild',
+        '@angular/build:application',
     ];
     for (const target in targets) {
         if (arrayOfBuilders.includes(targets[target].executor)) {
             if (targets[target].executor === '@angular-devkit/build-angular:browser' ||
                 targets[target].executor ===
                     '@angular-devkit/build-angular:browser-esbuild' ||
-                targets[target].executor === '@angular-devkit/build-angular:application') {
+                targets[target].executor ===
+                    '@angular-devkit/build-angular:application' ||
+                targets[target].executor === '@angular/build:application') {
                 /**
-                 * Not looking for '@nx/angular:ng-packagr-lite' or any other
-                 * @nx/angular:* executors.
-                 * Only looking for '@angular-devkit/build-angular:browser'
-                 * because the '@nx/angular:ng-packagr-lite' executor
-                 * (and maybe the other custom executors)
-                 * does not support styles and extra options, so the user
-                 * will be forced to switch to build-storybook to add extra options.
-                 *
-                 * So we might as well use the build-storybook by default to
-                 * avoid any errors.
+                 * Only the official Angular application/browser builders. The
+                 * '@nx/angular:*' executors (ng-packagr-lite and friends) do not
+                 * support styles and extra options, so a project on one of those is
+                 * better served by build-storybook, which can carry those options.
                  */
                 returnObject.ngBuildTarget = target;
             }

package/dist/src/utils/versions.d.ts

@@ -8,8 +8,10 @@ export declare const storybookVersion = "^10.5.0";
 export declare const reactVersion = "^18.2.0";
 export declare const viteVersion = "^6.0.0";
 export declare const coreJsVersion = "^3.36.1";
+export declare const testRunnerVersion = "^0.24.0";
 type StorybookVersions = {
     storybookVersion: string;
+    testRunnerVersion: string;
 };
 export declare function versions(tree: Tree): StorybookVersions;
 export declare function storybookMajorVersion(tree?: Tree): number | undefined;

package/dist/src/utils/versions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.coreJsVersion = exports.viteVersion = exports.reactVersion = exports.storybookVersion = exports.minSupportedStorybookVersion = exports.tsLibVersion = exports.tsNodeVersion = exports.litVersion = exports.nxVersion = void 0;
+exports.testRunnerVersion = exports.coreJsVersion = exports.viteVersion = exports.reactVersion = exports.storybookVersion = exports.minSupportedStorybookVersion = exports.tsLibVersion = exports.tsNodeVersion = exports.litVersion = exports.nxVersion = void 0;
 exports.versions = versions;
 exports.storybookMajorVersion = storybookMajorVersion;
 exports.getInstalledStorybookVersion = getInstalledStorybookVersion;
@@ -17,20 +17,41 @@ exports.storybookVersion = '^10.5.0';
 exports.reactVersion = '^18.2.0';
 exports.viteVersion = '^6.0.0';
 exports.coreJsVersion = '^3.36.1';
+exports.testRunnerVersion = '^0.24.0';
 const latestVersions = {
     storybookVersion: exports.storybookVersion,
+    testRunnerVersion: exports.testRunnerVersion,
 };
 const versionMap = {
-    8: { storybookVersion: '^8.6.11' },
-    9: { storybookVersion: '^9.0.5' },
-    10: { storybookVersion: '^10.5.0' },
+    8: { storybookVersion: '^8.6.11', testRunnerVersion: '^0.21.0' },
+    9: { storybookVersion: '^9.0.5', testRunnerVersion: '^0.23.0' },
+    10: { storybookVersion: '^10.5.0', testRunnerVersion: exports.testRunnerVersion },
 };
 function versions(tree) {
     const installedStorybookMajor = storybookMajorVersion(tree);
     if (installedStorybookMajor === undefined) {
         return latestVersions;
     }
-    return (versionMap[installedStorybookMajor] ?? latestVersions);
+    const compat = versionMap[installedStorybookMajor] ?? latestVersions;
+    // 0.20 is the first runner line to declare a storybook peer, and it peers ^8.2.
+    // Ranges that cannot reach 8.2 need 0.17, the earliest line built against 8.
+    if (installedStorybookMajor === 8 &&
+        !storybookVersionIntersects(tree, '>=8.2.0')) {
+        return { ...compat, testRunnerVersion: '^0.17.0' };
+    }
+    return compat;
+}
+function storybookVersionIntersects(tree, range) {
+    const installedVersion = getInstalledStorybookVersion(tree);
+    if (!installedVersion) {
+        return false;
+    }
+    try {
+        return (0, semver_1.intersects)(installedVersion, range);
+    }
+    catch {
+        return false;
+    }
 }
 function storybookMajorVersion(tree) {
     const installedVersion = getInstalledStorybookVersion(tree);

package/migrations.json

@@ -435,6 +435,19 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "23.2.0-test-runner": {
+      "version": "23.2.0-beta.8",
+      "requires": {
+        "storybook": ">=10.0.0 <11.0.0",
+        "@storybook/test-runner": "<0.24.0"
+      },
+      "packages": {
+        "@storybook/test-runner": {
+          "version": "^0.24.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/storybook",
-  "version": "23.2.0-beta.0",
+  "version": "23.2.0-beta.10",
   "private": false,
   "type": "commonjs",
   "files": [
@@ -92,18 +92,18 @@
     "@phenomnomnominal/tsquery": "~6.2.0",
     "semver": "^7.6.3",
     "tslib": "^2.3.0",
-    "@nx/devkit": "23.2.0-beta.0",
-    "@nx/cypress": "23.2.0-beta.0",
-    "@nx/js": "23.2.0-beta.0",
-    "@nx/eslint": "23.2.0-beta.0"
+    "@nx/devkit": "23.2.0-beta.10",
+    "@nx/cypress": "23.2.0-beta.10",
+    "@nx/js": "23.2.0-beta.10",
+    "@nx/eslint": "23.2.0-beta.10"
   },
   "devDependencies": {
     "storybook": "9.0.6",
-    "nx": "23.2.0-beta.0"
+    "nx": "23.2.0-beta.10"
   },
   "peerDependencies": {
     "storybook": ">=8.0.0 <11.0.0",
-    "@nx/web": "23.2.0-beta.0"
+    "@nx/web": "23.2.0-beta.10"
   },
   "peerDependenciesMeta": {
     "@nx/web": {