@nx/storybook 16.8.0-beta.0 → 16.8.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/storybook",
-  "version": "16.8.0-beta.0",
+  "version": "16.8.0-beta.2",
   "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,13 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nrwl/storybook": "16.8.0-beta.0",
-    "@nx/cypress": "16.8.0-beta.0",
-    "@nx/devkit": "16.8.0-beta.0",
-    "@nx/js": "16.8.0-beta.0",
-    "@nx/linter": "16.8.0-beta.0",
-    "@nx/workspace": "16.8.0-beta.0",
+    "@nrwl/storybook": "16.8.0-beta.2",
+    "@nx/cypress": "16.8.0-beta.2",
+    "@nx/devkit": "16.8.0-beta.2",
+    "@nx/js": "16.8.0-beta.2",
+    "@nx/linter": "16.8.0-beta.2",
+    "@nx/workspace": "16.8.0-beta.2",
     "@phenomnomnominal/tsquery": "~5.0.1",
-    "dotenv": "~16.3.1",
     "semver": "7.5.3",
     "tslib": "^2.3.0"
   },
@@ -45,5 +44,5 @@
     "access": "public"
   },
   "type": "commonjs",
-  "gitHead": "818352404283c1d34ab303d91b3bd16474f54916"
+  "gitHead": "9bcc04742f9e1516d8c1ddbfb1907770c347876f"
 }

package/src/executors/build-storybook/build-storybook.impl.d.ts

@@ -1,6 +1,5 @@
 import { ExecutorContext } from '@nx/devkit';
 import { CLIOptions } from '@storybook/types';
-import 'dotenv/config';
 import { CommonNxStorybookConfig } from '../../utils/models';
 export default function buildStorybookExecutor(options: CLIOptions & CommonNxStorybookConfig, context: ExecutorContext): Promise<{
     success: boolean;

package/src/executors/build-storybook/build-storybook.impl.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const build = require("@storybook/core-server");
-require("dotenv/config");
 const utilities_1 = require("../../utils/utilities");
 const utils_1 = require("../utils");
 function buildStorybookExecutor(options, context) {

package/src/executors/storybook/storybook.impl.d.ts

@@ -1,5 +1,4 @@
 import { ExecutorContext } from '@nx/devkit';
-import 'dotenv/config';
 import { CLIOptions } from '@storybook/types';
 import { CommonNxStorybookConfig } from '../../utils/models';
 export default function storybookExecutor(options: CLIOptions & CommonNxStorybookConfig, context: ExecutorContext): AsyncGenerator<{

package/src/executors/storybook/storybook.impl.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const build = require("@storybook/core-server");
-require("dotenv/config");
 const utilities_1 = require("../../utils/utilities");
 const utils_1 = require("../utils");
 function storybookExecutor(options, context) {

package/src/executors/utils.d.ts

@@ -1,4 +1,3 @@
-import 'dotenv/config';
 import ts = require('typescript');
 import { CommonNxStorybookConfig } from '../utils/models';
 import { CLIOptions } from '@storybook/types';

package/src/executors/utils.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.builderIsWebpackButNotWebpack5 = exports.runStorybookSetupCheck = exports.getStorybookFrameworkPath = void 0;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
-require("dotenv/config");
 const fs_1 = require("fs");
 const path_1 = require("path");
 const semver_1 = require("semver");

package/src/generators/configuration/configuration.js

@@ -99,6 +99,14 @@ function configurationGenerator(tree, rawSchema) {
             schema.uiFramework === '@storybook/react-webpack5') {
             devDeps['core-js'] = versions_1.coreJsVersion;
         }
+        if (schema.uiFramework.endsWith('-vite') &&
+            (!viteBuildTarget || !viteConfigFilePath)) {
+            // This means that the user has selected a Vite framework
+            // but the project does not have Vite configuration.
+            // We need to install the @nx/vite plugin in order to be able to use
+            // the nxViteTsPaths plugin to register the tsconfig paths in Vite.
+            devDeps['@nx/vite'] = versions_1.nxVersion;
+        }
         tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, devDeps));
         if (!schema.skipFormat) {
             yield (0, devkit_1.formatFiles)(tree);

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

@@ -14,7 +14,7 @@ export declare function configureTsSolutionConfig(tree: Tree, schema: StorybookC
  * which includes *.stories files.
  *
  * For TSLint this is done via the builder config, for ESLint this is
- * done within the .eslintrc.json file.
+ * done within the eslint config file.
  */
 export declare function updateLintConfig(tree: Tree, schema: StorybookConfigureSchema): void;
 export declare function normalizeSchema(schema: StorybookConfigureSchema): StorybookConfigureSchema;

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

@@ -8,6 +8,8 @@ const linter_1 = require("@nx/linter");
 const path_1 = require("path");
 const utilities_1 = require("../../../utils/utilities");
 const versions_1 = require("../../../utils/versions");
+const eslint_file_1 = require("@nx/linter/src/generators/utils/eslint-file");
+const flat_config_1 = require("@nx/linter/src/utils/flat-config");
 const DEFAULT_PORT = 4400;
 function addStorybookTask(tree, projectName, uiFramework, interactionTests) {
     if (uiFramework === '@storybook/react-native') {
@@ -115,7 +117,7 @@ function createStorybookTsconfigFile(tree, projectRoot, uiFramework, isRootProje
     const oldStorybookTsConfigPath = (0, devkit_1.joinPathFragments)(projectRoot, '.storybook/tsconfig.json');
     if (tree.exists(oldStorybookTsConfigPath)) {
         devkit_1.logger.warn(`.storybook/tsconfig.json already exists for this project`);
-        devkit_1.logger.warn(`It will be renamed and moved to tsconfig.storybook.json. 
+        devkit_1.logger.warn(`It will be renamed and moved to tsconfig.storybook.json.
       Please make sure all settings look correct after this change.
       Also, please make sure to use "nx migrate" to move from one version of Nx to another.
       `);
@@ -252,30 +254,52 @@ exports.configureTsSolutionConfig = configureTsSolutionConfig;
  * which includes *.stories files.
  *
  * For TSLint this is done via the builder config, for ESLint this is
- * done within the .eslintrc.json file.
+ * done within the eslint config file.
  */
 function updateLintConfig(tree, schema) {
     const { name: projectName } = schema;
     const { targets, root } = (0, devkit_1.readProjectConfiguration)(tree, projectName);
-    const tslintTargets = Object.values(targets).filter((target) => target.executor === '@angular-devkit/build-angular:tslint');
+    const tslintTargets = Object.values(targets !== null && targets !== void 0 ? targets : {}).filter((target) => target.executor === '@angular-devkit/build-angular:tslint');
     tslintTargets.forEach((target) => {
         target.options.tsConfig = (0, utilities_1.dedupe)([
             ...target.options.tsConfig,
             (0, devkit_1.joinPathFragments)(root, './.storybook/tsconfig.json'),
         ]);
     });
-    if (tree.exists((0, path_1.join)(root, '.eslintrc.json'))) {
-        (0, devkit_1.updateJson)(tree, (0, path_1.join)(root, '.eslintrc.json'), (json) => {
+    const eslintFile = (0, eslint_file_1.findEslintFile)(tree, root);
+    if (!eslintFile) {
+        return;
+    }
+    const parserConfigPath = (0, path_1.join)(root, schema.uiFramework === '@storybook/angular'
+        ? '.storybook/tsconfig.json'
+        : 'tsconfig.storybook.json');
+    if ((0, flat_config_1.useFlatConfig)(tree)) {
+        let config = tree.read(eslintFile, 'utf-8');
+        const projectRegex = RegExp(/project:\s?\[?['"](.*)['"]\]?/g);
+        let match;
+        while ((match = projectRegex.exec(config)) !== null) {
+            const matchSet = new Set(match[1].split(',').map((p) => p.trim().replace(/['"]/g, '')));
+            matchSet.add(parserConfigPath);
+            const insert = `project: [${Array.from(matchSet)
+                .map((p) => `'${p}'`)
+                .join(', ')}]`;
+            config =
+                config.slice(0, match.index) +
+                    insert +
+                    config.slice(match.index + match[0].length);
+        }
+        tree.write(eslintFile, config);
+    }
+    else {
+        (0, devkit_1.updateJson)(tree, (0, path_1.join)(root, eslintFile), (json) => {
             var _a, _b, _c, _d;
             if (typeof ((_a = json.parserOptions) === null || _a === void 0 ? void 0 : _a.project) === 'string') {
                 json.parserOptions.project = [json.parserOptions.project];
             }
-            if (Array.isArray((_b = json.parserOptions) === null || _b === void 0 ? void 0 : _b.project)) {
+            if ((_b = json.parserOptions) === null || _b === void 0 ? void 0 : _b.project) {
                 json.parserOptions.project = (0, utilities_1.dedupe)([
                     ...json.parserOptions.project,
-                    schema.uiFramework === '@storybook/angular'
-                        ? (0, path_1.join)(root, '.storybook/tsconfig.json')
-                        : (0, path_1.join)(root, 'tsconfig.storybook.json'),
+                    parserConfigPath,
                 ]);
             }
             const overrides = json.overrides || [];
@@ -283,12 +307,10 @@ function updateLintConfig(tree, schema) {
                 if (typeof ((_c = o.parserOptions) === null || _c === void 0 ? void 0 : _c.project) === 'string') {
                     o.parserOptions.project = [o.parserOptions.project];
                 }
-                if (Array.isArray((_d = o.parserOptions) === null || _d === void 0 ? void 0 : _d.project)) {
+                if ((_d = o.parserOptions) === null || _d === void 0 ? void 0 : _d.project) {
                     o.parserOptions.project = (0, utilities_1.dedupe)([
                         ...o.parserOptions.project,
-                        schema.uiFramework === '@storybook/angular'
-                            ? (0, path_1.join)(root, '.storybook/tsconfig.json')
-                            : (0, path_1.join)(root, 'tsconfig.storybook.json'),
+                        parserConfigPath,
                     ]);
                 }
             }
@@ -418,14 +440,14 @@ function workspaceHasRootProject(tree) {
 exports.workspaceHasRootProject = workspaceHasRootProject;
 function rootFileIsTs(tree, rootFileName, tsConfiguration) {
     if (tree.exists(`.storybook/${rootFileName}.ts`) && !tsConfiguration) {
-        devkit_1.logger.info(`The root Storybook configuration is in TypeScript, 
-      so Nx will generate TypeScript Storybook configuration files 
+        devkit_1.logger.info(`The root Storybook configuration is in TypeScript,
+      so Nx will generate TypeScript Storybook configuration files
       in this project's .storybook folder as well.`);
         return true;
     }
     else if (tree.exists(`.storybook/${rootFileName}.js`) && tsConfiguration) {
-        devkit_1.logger.info(`The root Storybook configuration is in JavaScript, 
-        so Nx will generate JavaScript Storybook configuration files 
+        devkit_1.logger.info(`The root Storybook configuration is in JavaScript,
+        so Nx will generate JavaScript Storybook configuration files
         in this project's .storybook folder as well.`);
         return false;
     }
@@ -511,14 +533,11 @@ function renameAndMoveOldTsConfig(projectRoot, pathToStorybookConfigFile, tree)
             return json;
         });
     }
-    const projectEsLintFile = (0, devkit_1.joinPathFragments)(projectRoot, '.eslintrc.json');
-    if (tree.exists(projectEsLintFile)) {
-        (0, devkit_1.updateJson)(tree, projectEsLintFile, (json) => {
-            const jsonString = JSON.stringify(json);
-            const newJsonString = jsonString.replace(/\.storybook\/tsconfig\.json/g, 'tsconfig.storybook.json');
-            json = JSON.parse(newJsonString);
-            return json;
-        });
+    const eslintFile = (0, eslint_file_1.findEslintFile)(tree, projectRoot);
+    if (eslintFile) {
+        const fileName = (0, devkit_1.joinPathFragments)(projectRoot, eslintFile);
+        const config = tree.read(fileName, 'utf-8');
+        tree.write(fileName, config.replace(/\.storybook\/tsconfig\.json/g, 'tsconfig.storybook.json'));
     }
 }
 exports.renameAndMoveOldTsConfig = renameAndMoveOldTsConfig;

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

@@ -1,3 +1,8 @@
+<% if (usesVite && !viteConfigFilePath) { %>
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { mergeConfig } from 'vite';
+<% } %>
+
 const config = {
   stories: [
     <% if(uiFramework === '@storybook/angular' && projectType === 'library') { %>
@@ -8,13 +13,19 @@ const config = {
   framework: {
     name: '<%= uiFramework %>',
     options: {
-      <% if (usesVite) { %>
+      <% if (usesVite && viteConfigFilePath) { %>
       builder: {
         viteConfigPath: '<%= viteConfigFilePath %>',
       },
       <% } %>
     },
   },
+  <% if (usesVite && !viteConfigFilePath) { %>
+  viteFinal: async (config) =>
+    mergeConfig(config, {
+      plugins: [nxViteTsPaths()],
+    }),
+  <% } %>
 };
 
 export default config;
@@ -22,11 +33,11 @@ export default config;
 <% if(!usesVite) { %>
 // To customize your webpack configuration you can use the webpackFinal field.
 // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
-// and https://nx.dev/packages/storybook/documents/custom-builder-configs
+// and https://nx.dev/recipes/storybook/custom-builder-configs
 <% } %>
 
 <% if(usesVite) { %>
 // To customize your Vite configuration you can use the viteFinal field.
 // Check https://storybook.js.org/docs/react/builders/vite#configuration
-// and https://nx.dev/packages/storybook/documents/custom-builder-configs
+// and https://nx.dev/recipes/storybook/custom-builder-configs
 <% } %>

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

@@ -1,4 +1,8 @@
 import type { StorybookConfig } from '<%= uiFramework %>';
+<% if (usesVite && !viteConfigFilePath) { %>
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { mergeConfig } from 'vite';
+<% } %>
 
 const config: StorybookConfig = {
   stories: [
@@ -10,13 +14,19 @@ const config: StorybookConfig = {
   framework: {
     name: '<%= uiFramework %>',
     options: {
-      <% if (usesVite) { %>
+      <% if (usesVite && viteConfigFilePath) { %>
       builder: {
         viteConfigPath: '<%= viteConfigFilePath %>',
       },
       <% } %>
     },
   },
+  <% if (usesVite && !viteConfigFilePath) { %>
+  viteFinal: async (config) =>
+    mergeConfig(config, {
+      plugins: [nxViteTsPaths()],
+    }),
+  <% } %>
 };
 
 export default config;
@@ -24,11 +34,11 @@ export default config;
 <% if(!usesVite) { %>
 // To customize your webpack configuration you can use the webpackFinal field.
 // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
-// and https://nx.dev/packages/storybook/documents/custom-builder-configs
+// and https://nx.dev/recipes/storybook/custom-builder-configs
 <% } %>
 
 <% if(usesVite) { %>
 // To customize your Vite configuration you can use the viteFinal field.
 // Check https://storybook.js.org/docs/react/builders/vite#configuration
-// and https://nx.dev/packages/storybook/documents/custom-builder-configs
+// and https://nx.dev/recipes/storybook/custom-builder-configs
 <% } %>