feat(storybook): add build-storybook to cacheable operations (#11631)

packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap

@@ -35,6 +35,29 @@ module.exports = {
 "
 `;
 
+exports[`@nrwl/storybook:configuration basic functionalities should generate files 1`] = `
+Object {
+  "affected": Object {
+    "defaultBase": "main",
+  },
+  "npmScope": "proj",
+  "tasksRunnerOptions": Object {
+    "default": Object {
+      "options": Object {
+        "cacheableOperations": Array [
+          "build",
+          "lint",
+          "test",
+          "e2e",
+          "build-storybook",
+        ],
+      },
+      "runner": "nx/tasks-runners/default",
+    },
+  },
+}
+`;
+
 exports[`@nrwl/storybook:configuration basic functionalities should have the proper typings 1`] = `
 Array [
   "../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts",

packages/storybook/src/generators/configuration/configuration.spec.ts

@@ -83,6 +83,7 @@ describe('@nrwl/storybook:configuration', () => {
       expect(
         storybookTsconfigJson.exclude.includes('../**/*.spec.jsx')
       ).toBeFalsy();
+      expect(readJson(tree, 'nx.json')).toMatchSnapshot();
     });
 
     it('should generate TypeScript Configuration files', async () => {

packages/storybook/src/generators/configuration/configuration.ts

@@ -15,6 +15,7 @@ import { initGenerator } from '../init/init';
 
 import {
   addAngularStorybookTask,
+  addBuildStorybookToCacheableOperations,
   addStorybookTask,
   configureTsProjectConfig,
   configureTsSolutionConfig,
@@ -60,6 +61,8 @@ export async function configurationGenerator(
   configureTsSolutionConfig(tree, schema);
   updateLintConfig(tree, schema);
 
+  addBuildStorybookToCacheableOperations(tree);
+
   if (schema.uiFramework === '@storybook/angular') {
     addAngularStorybookTask(tree, schema.name);
   } else {

packages/storybook/src/generators/configuration/util-functions.ts

@@ -15,9 +15,9 @@ import { Linter } from '@nrwl/linter';
 import { join } from 'path';
 import {
   dedupe,
+  findStorybookAndBuildTargetsAndCompiler,
   isFramework,
   TsConfig,
-  findStorybookAndBuildTargetsAndCompiler,
 } from '../../utils/utilities';
 import { StorybookConfigureSchema } from './schema';
 import { getRootTsConfigPathInTree } from '@nrwl/workspace/src/utilities/typescript';
@@ -356,3 +356,25 @@ export function getTsConfigPath(
       : 'tsconfig.lib.json'
   );
 }
+
+export function addBuildStorybookToCacheableOperations(tree: Tree) {
+  updateJson(tree, 'nx.json', (json) => ({
+    ...json,
+    tasksRunnerOptions: {
+      ...(json.tasksRunnerOptions ?? {}),
+      default: {
+        ...(json.tasksRunnerOptions?.default ?? {}),
+        options: {
+          ...(json.tasksRunnerOptions?.default?.options ?? {}),
+          cacheableOperations: Array.from(
+            new Set([
+              ...(json.tasksRunnerOptions?.default?.options
+                ?.cacheableOperations ?? []),
+              'build-storybook',
+            ])
+          ),
+        },
+      },
+    },
+  }));
+}