@nx/storybook 17.3.0-beta.4 → 17.3.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/storybook",
-  "version": "17.3.0-beta.4",
+  "version": "17.3.0-beta.6",
   "private": false,
   "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.",
   "repository": {
@@ -30,14 +30,14 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nx/devkit": "17.3.0-beta.4",
+    "@nx/devkit": "17.3.0-beta.6",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "semver": "7.5.3",
     "tslib": "^2.3.0",
-    "@nx/cypress": "17.3.0-beta.4",
-    "@nx/js": "17.3.0-beta.4",
-    "@nx/eslint": "17.3.0-beta.4",
-    "@nrwl/storybook": "17.3.0-beta.4"
+    "@nx/cypress": "17.3.0-beta.6",
+    "@nx/js": "17.3.0-beta.6",
+    "@nx/eslint": "17.3.0-beta.6",
+    "@nrwl/storybook": "17.3.0-beta.6"
   },
   "publishConfig": {
     "access": "public"

package/src/generators/configuration/configuration.js

@@ -20,7 +20,9 @@ async function configurationGenerator(tree, rawSchema) {
     const tasks = [];
     const { projectType, targets, root } = (0, devkit_1.readProjectConfiguration)(tree, schema.project);
     const { compiler } = (0, utilities_1.findStorybookAndBuildTargetsAndCompiler)(targets);
-    const viteConfigFilePath = (0, util_functions_1.findViteConfig)(tree, root);
+    const viteConfig = (0, util_functions_1.findViteConfig)(tree, root);
+    const viteConfigFilePath = viteConfig?.fullConfigPath;
+    const viteConfigFileName = viteConfig?.viteConfigFileName;
     const nextConfigFilePath = (0, util_functions_1.findNextConfig)(tree, root);
     if (viteConfigFilePath) {
         if (schema.uiFramework === '@storybook/react-webpack5') {
@@ -54,7 +56,7 @@ async function configurationGenerator(tree, rawSchema) {
         ? 'components'
         : 'src';
     const usesVite = !!viteConfigFilePath || schema.uiFramework?.endsWith('-vite');
-    (0, util_functions_1.createProjectStorybookDir)(tree, schema.project, schema.uiFramework, schema.js, schema.tsConfiguration, root, projectType, (0, util_functions_1.projectIsRootProjectInStandaloneWorkspace)(root), schema.interactionTests, mainDir, !!nextConfigFilePath, compiler === 'swc', usesVite, viteConfigFilePath);
+    (0, util_functions_1.createProjectStorybookDir)(tree, schema.project, schema.uiFramework, schema.js, schema.tsConfiguration, root, projectType, (0, util_functions_1.projectIsRootProjectInStandaloneWorkspace)(root), schema.interactionTests, mainDir, !!nextConfigFilePath, compiler === 'swc', usesVite, viteConfigFilePath, hasPlugin, viteConfigFileName);
     if (schema.uiFramework !== '@storybook/angular') {
         (0, util_functions_1.createStorybookTsconfigFile)(tree, root, schema.uiFramework, (0, util_functions_1.projectIsRootProjectInStandaloneWorkspace)(root), mainDir);
     }
@@ -64,6 +66,9 @@ async function configurationGenerator(tree, rawSchema) {
     (0, util_functions_1.updateLintConfig)(tree, schema);
     (0, util_functions_1.addBuildStorybookToCacheableOperations)(tree);
     (0, util_functions_1.addStorybookToNamedInputs)(tree);
+    if (!hasPlugin) {
+        (0, util_functions_1.addStorybookToTargetDefaults)(tree);
+    }
     let devDeps = {};
     if (!hasPlugin) {
         if (schema.uiFramework === '@storybook/angular') {

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

@@ -18,13 +18,17 @@ 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 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): void;
+export declare function addStorybookToTargetDefaults(tree: Tree): 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): void;
 export declare function getTsConfigPath(tree: Tree, projectName: string, path?: string): string;
 export declare function addBuildStorybookToCacheableOperations(tree: Tree): void;
 export declare function projectIsRootProjectInStandaloneWorkspace(projectRoot: string): boolean;
 export declare function workspaceHasRootProject(tree: Tree): boolean;
 export declare function rootFileIsTs(tree: Tree, rootFileName: string, tsConfiguration: boolean): boolean;
 export declare function getE2EProjectName(tree: Tree, mainProject: string): Promise<string | undefined>;
-export declare function findViteConfig(tree: Tree, projectRoot: string): string | undefined;
+export declare function findViteConfig(tree: Tree, projectRoot: string): {
+    fullConfigPath: string | undefined;
+    viteConfigFileName: string | undefined;
+};
 export declare function findNextConfig(tree: Tree, projectRoot: string): string | undefined;
 export declare function renameAndMoveOldTsConfig(projectRoot: string, pathToStorybookConfigFile: string, tree: Tree): void;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renameAndMoveOldTsConfig = exports.findNextConfig = exports.findViteConfig = exports.getE2EProjectName = exports.rootFileIsTs = exports.workspaceHasRootProject = exports.projectIsRootProjectInStandaloneWorkspace = exports.addBuildStorybookToCacheableOperations = exports.getTsConfigPath = exports.createProjectStorybookDir = exports.addStorybookToNamedInputs = exports.normalizeSchema = exports.updateLintConfig = exports.configureTsSolutionConfig = exports.configureTsProjectConfig = exports.editTsconfigBaseJson = exports.createStorybookTsconfigFile = exports.addStaticTarget = exports.addAngularStorybookTarget = exports.addStorybookTarget = void 0;
+exports.renameAndMoveOldTsConfig = exports.findNextConfig = exports.findViteConfig = exports.getE2EProjectName = exports.rootFileIsTs = exports.workspaceHasRootProject = exports.projectIsRootProjectInStandaloneWorkspace = exports.addBuildStorybookToCacheableOperations = exports.getTsConfigPath = exports.createProjectStorybookDir = exports.addStorybookToTargetDefaults = exports.addStorybookToNamedInputs = exports.normalizeSchema = exports.updateLintConfig = exports.configureTsSolutionConfig = exports.configureTsProjectConfig = exports.editTsconfigBaseJson = exports.createStorybookTsconfigFile = exports.addStaticTarget = exports.addAngularStorybookTarget = exports.addStorybookTarget = void 0;
 const devkit_1 = require("@nx/devkit");
 const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
 const eslint_1 = require("@nx/eslint");
@@ -338,29 +338,36 @@ function addStorybookToNamedInputs(tree) {
                 nxJson.namedInputs.production.push('!{projectRoot}/tsconfig.storybook.json');
             }
         }
-        nxJson.targetDefaults ??= {};
-        nxJson.targetDefaults['build-storybook'] ??= {};
-        nxJson.targetDefaults['build-storybook'].inputs ??= [
-            'default',
-            hasProductionFileset ? '^production' : '^default',
-        ];
-        if (!nxJson.targetDefaults['build-storybook'].inputs.includes('{projectRoot}/.storybook/**/*')) {
-            nxJson.targetDefaults['build-storybook'].inputs.push('{projectRoot}/.storybook/**/*');
-        }
-        // Delete the !{projectRoot}/.storybook/**/* glob from build-storybook
-        // because we want to rebuild Storybook if the .storybook folder changes
-        const index = nxJson.targetDefaults['build-storybook'].inputs.indexOf('!{projectRoot}/.storybook/**/*');
-        if (index !== -1) {
-            nxJson.targetDefaults['build-storybook'].inputs.splice(index, 1);
-        }
-        if (!nxJson.targetDefaults['build-storybook'].inputs.includes('{projectRoot}/tsconfig.storybook.json')) {
-            nxJson.targetDefaults['build-storybook'].inputs.push('{projectRoot}/tsconfig.storybook.json');
-        }
         (0, devkit_1.updateNxJson)(tree, nxJson);
     }
 }
 exports.addStorybookToNamedInputs = addStorybookToNamedInputs;
-function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfiguration, root, projectType, projectIsRootProjectInStandaloneWorkspace, interactionTests, mainDir, isNextJs, usesSwc, usesVite, viteConfigFilePath) {
+function addStorybookToTargetDefaults(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    nxJson.targetDefaults ??= {};
+    nxJson.targetDefaults['build-storybook'] ??= {};
+    nxJson.targetDefaults['build-storybook'].inputs ??= [
+        'default',
+        nxJson.namedInputs && 'production' in nxJson.namedInputs
+            ? '^production'
+            : '^default',
+    ];
+    if (!nxJson.targetDefaults['build-storybook'].inputs.includes('{projectRoot}/.storybook/**/*')) {
+        nxJson.targetDefaults['build-storybook'].inputs.push('{projectRoot}/.storybook/**/*');
+    }
+    // Delete the !{projectRoot}/.storybook/**/* glob from build-storybook
+    // because we want to rebuild Storybook if the .storybook folder changes
+    const index = nxJson.targetDefaults['build-storybook'].inputs.indexOf('!{projectRoot}/.storybook/**/*');
+    if (index !== -1) {
+        nxJson.targetDefaults['build-storybook'].inputs.splice(index, 1);
+    }
+    if (!nxJson.targetDefaults['build-storybook'].inputs.includes('{projectRoot}/tsconfig.storybook.json')) {
+        nxJson.targetDefaults['build-storybook'].inputs.push('{projectRoot}/tsconfig.storybook.json');
+    }
+    (0, devkit_1.updateNxJson)(tree, nxJson);
+}
+exports.addStorybookToTargetDefaults = addStorybookToTargetDefaults;
+function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfiguration, root, projectType, projectIsRootProjectInStandaloneWorkspace, interactionTests, mainDir, isNextJs, usesSwc, usesVite, viteConfigFilePath, hasPlugin, viteConfigFileName) {
     let projectDirectory = projectType === 'application'
         ? isNextJs
             ? 'components'
@@ -391,6 +398,8 @@ function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfigu
         usesVite,
         isRootProject: projectIsRootProjectInStandaloneWorkspace,
         viteConfigFilePath,
+        hasPlugin,
+        viteConfigFileName,
     });
     if (js) {
         (0, devkit_1.toJS)(tree);
@@ -484,7 +493,10 @@ function findViteConfig(tree, projectRoot) {
     for (const ext of allowsExt) {
         const viteConfigPath = (0, devkit_1.joinPathFragments)(projectRoot, `vite.config.${ext}`);
         if (tree.exists(viteConfigPath)) {
-            return viteConfigPath;
+            return {
+                fullConfigPath: viteConfigPath,
+                viteConfigFileName: `vite.config.${ext}`,
+            };
         }
     }
 }

package/src/generators/configuration/project-files/.storybook/main.js__tmpl__

@@ -13,7 +13,12 @@ const config = {
   framework: {
     name: '<%= uiFramework %>',
     options: {
-      <% if (usesVite && viteConfigFilePath) { %>
+     <% if (usesVite && viteConfigFilePath && hasPlugin) { %>
+      builder: {
+        viteConfigPath: '<%= viteConfigFileName %>',
+      },
+      <% } %>
+      <% if (usesVite && viteConfigFilePath && !hasPlugin) { %>
       builder: {
         viteConfigPath: '<%= viteConfigFilePath %>',
       },

package/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__

@@ -14,7 +14,11 @@ const config: StorybookConfig = {
   framework: {
     name: '<%= uiFramework %>',
     options: {
-      <% if (usesVite && viteConfigFilePath) { %>
+      <% if (usesVite && viteConfigFilePath && hasPlugin) { %>
+      builder: {
+        viteConfigPath: '<%= viteConfigFileName %>',
+      },
+      <% } %><% if (usesVite && viteConfigFilePath && !hasPlugin) { %>
       builder: {
         viteConfigPath: '<%= viteConfigFilePath %>',
       },

package/src/generators/init/init.js

@@ -5,9 +5,10 @@ const devkit_1 = require("@nx/devkit");
 const semver_1 = require("semver");
 const utilities_1 = require("../../utils/utilities");
 const versions_1 = require("../../utils/versions");
-function checkDependenciesInstalled(host) {
+function checkDependenciesInstalled(host, schema) {
     const devDependencies = {
         '@nx/storybook': versions_1.nxVersion,
+        '@nx/web': versions_1.nxVersion,
     };
     if (process.env.NX_PCV3 === 'true') {
         let storybook7VersionToInstall = versions_1.storybookVersion;
@@ -18,7 +19,7 @@ function checkDependenciesInstalled(host) {
         }
         devDependencies['storybook'] = storybook7VersionToInstall;
     }
-    return (0, devkit_1.addDependenciesToPackageJson)(host, {}, devDependencies);
+    return (0, devkit_1.addDependenciesToPackageJson)(host, {}, devDependencies, undefined, schema.keepExistingVersions);
 }
 function addCacheableOperation(tree) {
     const nxJson = (0, devkit_1.readNxJson)(tree);
@@ -47,14 +48,16 @@ function moveToDevDependencies(tree) {
     return updated ? () => (0, devkit_1.installPackagesTask)(tree) : () => { };
 }
 async function initGenerator(tree, schema) {
-    addCacheableOperation(tree);
     if (process.env.NX_PCV3 === 'true') {
         (0, utilities_1.addPlugin)(tree);
     }
+    else {
+        addCacheableOperation(tree);
+    }
     const tasks = [];
     if (!schema.skipPackageJson) {
         tasks.push(moveToDevDependencies(tree));
-        tasks.push(checkDependenciesInstalled(tree));
+        tasks.push(checkDependenciesInstalled(tree, schema));
     }
     if (!schema.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);

package/src/generators/init/schema.d.ts

@@ -1,4 +1,5 @@
 export interface Schema {
   skipFormat?: boolean;
   skipPackageJson?: boolean;
+  keepExistingVersions?: boolean;
 }

package/src/generators/init/schema.json

@@ -14,6 +14,12 @@
       "description": "Do not add dependencies to `package.json`.",
       "type": "boolean",
       "default": false
+    },
+    "keepExistingVersions": {
+      "type": "boolean",
+      "x-priority": "internal",
+      "description": "Keep existing dependencies versions",
+      "default": false
     }
   }
 }

package/src/migrations/update-16-5-0/move-storybook-tsconfig.js

@@ -14,6 +14,7 @@ async function default_1(tree) {
         (0, util_functions_1.renameAndMoveOldTsConfig)(projectRoot, pathToStorybookConfigFile, tree);
     });
     (0, util_functions_1.addStorybookToNamedInputs)(tree);
+    (0, util_functions_1.addStorybookToTargetDefaults)(tree);
     await (0, devkit_1.formatFiles)(tree);
 }
 exports.default = default_1;

package/src/plugins/plugin.js

@@ -60,7 +60,7 @@ exports.createNodes = [
             },
         };
         // For root projects, the name is not inferred from root package.json, so we need to manually set it.
-        // TODO(jack): We should handle this in core and remove this workaround.
+        // TODO(katerina): Remove this workaround once Craigory's PR (https://github.com/nrwl/nx/pull/21125) is merged
         if (projectRoot === '.') {
             result.projects[projectRoot]['name'] = projectName;
         }
@@ -73,23 +73,22 @@ function buildStorybookTargets(configFilePath, projectRoot, options, context, pr
     const storybookFramework = getStorybookConfig(configFilePath, context);
     const frameworkIsAngular = storybookFramework === "'@storybook/angular'";
     const targets = {};
-    targets[options.buildStorybookTargetName] = buildTarget(namedInputs, buildOutputs, configFilePath, projectRoot, frameworkIsAngular, projectName);
-    targets[options.serveStorybookTargetName] = serveTarget(configFilePath, frameworkIsAngular, projectName);
-    targets[options.testStorybookTargetName] = testTarget(configFilePath);
+    targets[options.buildStorybookTargetName] = buildTarget(namedInputs, buildOutputs, projectRoot, frameworkIsAngular, projectName, configFilePath);
+    targets[options.serveStorybookTargetName] = serveTarget(projectRoot, frameworkIsAngular, projectName, configFilePath);
+    targets[options.testStorybookTargetName] = testTarget(projectRoot);
     targets[options.staticStorybookTargetName] = serveStaticTarget(options, projectRoot);
     return targets;
 }
-function buildTarget(namedInputs, outputs, configFilePath, projectRoot, frameworkIsAngular, projectName) {
-    const outputDir = (0, devkit_1.joinPathFragments)('dist/storybook', projectRoot);
+function buildTarget(namedInputs, outputs, projectRoot, frameworkIsAngular, projectName, configFilePath) {
     let targetConfig;
     if (frameworkIsAngular) {
         targetConfig = {
             executor: '@storybook/angular:build-storybook',
             options: {
-                outputDir: `${outputDir}`,
                 configDir: `${(0, path_1.dirname)(configFilePath)}`,
                 browserTarget: `${projectName}:build-storybook`,
                 compodoc: false,
+                outputDir: (0, devkit_1.joinPathFragments)(projectRoot, 'static-storybook'),
             },
             cache: true,
             outputs,
@@ -109,7 +108,8 @@ function buildTarget(namedInputs, outputs, configFilePath, projectRoot, framewor
     }
     else {
         targetConfig = {
-            command: `storybook build --config-dir ${(0, path_1.dirname)(configFilePath)} --output-dir ${outputDir}`,
+            command: `storybook build`,
+            options: { cwd: projectRoot },
             cache: true,
             outputs,
             inputs: [
@@ -124,7 +124,7 @@ function buildTarget(namedInputs, outputs, configFilePath, projectRoot, framewor
     }
     return targetConfig;
 }
-function serveTarget(configFilePath, frameworkIsAngular, projectName) {
+function serveTarget(projectRoot, frameworkIsAngular, projectName, configFilePath) {
     if (frameworkIsAngular) {
         return {
             executor: '@storybook/angular:start-storybook',
@@ -137,13 +137,15 @@ function serveTarget(configFilePath, frameworkIsAngular, projectName) {
     }
     else {
         return {
-            command: `storybook dev --config-dir ${(0, path_1.dirname)(configFilePath)}`,
+            command: `storybook dev`,
+            options: { cwd: projectRoot },
         };
     }
 }
-function testTarget(configFilePath) {
+function testTarget(projectRoot) {
     const targetConfig = {
-        command: `test-storybook --config-dir ${(0, path_1.dirname)(configFilePath)}`,
+        command: `test-storybook`,
+        options: { cwd: projectRoot },
         inputs: [
             {
                 externalDependencies: ['storybook', '@storybook/test-runner'],
@@ -157,8 +159,7 @@ function serveStaticTarget(options, projectRoot) {
         executor: '@nx/web:file-server',
         options: {
             buildTarget: `${options.buildStorybookTargetName}`,
-            // TODO(katerina): need to read the output from CLI args
-            staticFilePath: (0, devkit_1.joinPathFragments)('dist/storybook', projectRoot),
+            staticFilePath: (0, devkit_1.joinPathFragments)(projectRoot, 'static-storybook'),
         },
     };
     return targetConfig;
@@ -194,33 +195,21 @@ function getStorybookConfig(configFilePath, context) {
     return frameworkName;
 }
 function getOutputs(_projectRoot) {
-    // TODO(katerina): need to read the output from CLI args
-    // const outputPath = <output path as read from CLI>;
     const normalizedOutputPath = normalizeOutputPath(undefined, _projectRoot);
-    const outputs = [normalizedOutputPath];
+    const outputs = [
+        normalizedOutputPath,
+        `{options.output-dir}`,
+        `{options.outputDir}`,
+        `{options.o}`,
+    ];
     return outputs;
 }
 function normalizeOutputPath(outputPath, projectRoot) {
-    if (!outputPath) {
-        if (projectRoot === '.') {
-            return `{projectRoot}/dist/storybook`;
-        }
-        else {
-            return `{workspaceRoot}/dist/storybook/{projectRoot}`;
-        }
+    if (projectRoot === '.') {
+        return `{projectRoot}/static-storybook`;
     }
     else {
-        if ((0, path_1.isAbsolute)(outputPath)) {
-            return `{workspaceRoot}/${(0, path_1.relative)(devkit_1.workspaceRoot, outputPath)}`;
-        }
-        else {
-            if (outputPath.startsWith('..')) {
-                return (0, path_1.join)('{workspaceRoot}', (0, path_1.join)(projectRoot, outputPath));
-            }
-            else {
-                return (0, path_1.join)('{projectRoot}', outputPath);
-            }
-        }
+        return `{workspaceRoot}/{projectRoot}/static-storybook`;
     }
 }
 function normalizeOptions(options) {