@nx/storybook 23.2.0-beta.7 → 23.2.0-beta.9

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

@@ -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;
     }

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: {

package/dist/src/plugins/plugin.js

@@ -8,6 +8,7 @@ const fs_1 = require("fs");
 const js_1 = require("@nx/js");
 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'.
  */
@@ -16,6 +17,23 @@ 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) => {
@@ -69,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: {
@@ -83,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'),
             },
@@ -125,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),
                 },
             ],
@@ -146,9 +178,7 @@ function buildTarget(namedInputs, outputs, projectRoot, frameworkIsAngular, proj
                 {
                     externalDependencies: [
                         'storybook',
-                        isStorybookTestRunnerInstalled()
-                            ? '@storybook/test-runner'
-                            : undefined,
+                        hasTestRunner ? '@storybook/test-runner' : undefined,
                     ].filter(Boolean),
                 },
             ],
@@ -156,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,
             },
         };
     }
@@ -188,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}`],
@@ -208,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];
@@ -224,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);
@@ -274,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.7",
+  "version": "23.2.0-beta.9",
   "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.7",
-    "@nx/cypress": "23.2.0-beta.7",
-    "@nx/js": "23.2.0-beta.7",
-    "@nx/eslint": "23.2.0-beta.7"
+    "@nx/devkit": "23.2.0-beta.9",
+    "@nx/cypress": "23.2.0-beta.9",
+    "@nx/js": "23.2.0-beta.9",
+    "@nx/eslint": "23.2.0-beta.9"
   },
   "devDependencies": {
     "storybook": "9.0.6",
-    "nx": "23.2.0-beta.7"
+    "nx": "23.2.0-beta.9"
   },
   "peerDependencies": {
     "storybook": ">=8.0.0 <11.0.0",
-    "@nx/web": "23.2.0-beta.7"
+    "@nx/web": "23.2.0-beta.9"
   },
   "peerDependenciesMeta": {
     "@nx/web": {