feat(storybook): use createNodesV2 for init and convert-to-inferred g…

…enerators
nrwl · Dec 9, 2024 · 42cdcc4 · 42cdcc4
1 parent 7db6270
commit 42cdcc4
Show file tree

Hide file tree

Showing 4 changed files with 165 additions and 111 deletions.
diff --git a/packages/storybook/src/generators/convert-to-inferred/convert-to-inferred.ts b/packages/storybook/src/generators/convert-to-inferred/convert-to-inferred.ts
@@ -7,12 +7,12 @@ import {
 } from '@nx/devkit';
 import { AggregatedLog } from '@nx/devkit/src/generators/plugin-migrations/aggregate-log-util';
 import {
-  migrateProjectExecutorsToPluginV1,
+  migrateProjectExecutorsToPlugin,
   NoTargetsToMigrateError,
 } from '@nx/devkit/src/generators/plugin-migrations/executor-to-plugin-migrator';
 import { buildPostTargetTransformer } from './lib/build-post-target-transformer';
 import { servePostTargetTransformer } from './lib/serve-post-target-transformer';
-import { createNodes } from '../../plugins/plugin';
+import { createNodesV2 } from '../../plugins/plugin';
 import { storybookVersion } from '../../utils/versions';
 
 interface Schema {
@@ -23,11 +23,11 @@ interface Schema {
 export async function convertToInferred(tree: Tree, options: Schema) {
   const projectGraph = await createProjectGraphAsync();
   const migrationLogs = new AggregatedLog();
-  const migratedProjects = await migrateProjectExecutorsToPluginV1(
+  const migratedProjects = await migrateProjectExecutorsToPlugin(
     tree,
     projectGraph,
     '@nx/storybook/plugin',
-    createNodes,
+    createNodesV2,
     {
       buildStorybookTargetName: 'build-storybook',
       serveStorybookTargetName: 'storybook',

diff --git a/packages/storybook/src/generators/init/init.ts b/packages/storybook/src/generators/init/init.ts
@@ -10,9 +10,9 @@ import {
   updateJson,
   updateNxJson,
 } from '@nx/devkit';
-import { addPluginV1 } from '@nx/devkit/src/utils/add-plugin';
+import { addPlugin } from '@nx/devkit/src/utils/add-plugin';
 import { gte } from 'semver';
-import { createNodes } from '../../plugins/plugin';
+import { createNodesV2 } from '../../plugins/plugin';
 import {
   getInstalledStorybookVersion,
   storybookMajorVersion,
@@ -99,11 +99,11 @@ export async function initGeneratorInternal(tree: Tree, schema: Schema) {
   schema.addPlugin ??= addPluginDefault;
 
   if (schema.addPlugin) {
-    await addPluginV1(
+    await addPlugin(
       tree,
       await createProjectGraphAsync(),
       '@nx/storybook/plugin',
-      createNodes,
+      createNodesV2,
       {
         serveStorybookTargetName: [
           'storybook',

diff --git a/packages/storybook/src/plugins/plugin.spec.ts b/packages/storybook/src/plugins/plugin.spec.ts
@@ -64,33 +64,57 @@ describe('@nx/storybook/plugin', () => {
       context
     );
 
-    expect(nodes.at(0)?.[0]).toStrictEqual('my-app/.storybook/main.ts');
-    expect(nodes.at(0)?.[1]?.['projects']?.['my-app']?.targets).toBeDefined();
-    expect(
-      nodes.at(0)?.[1]?.['projects']?.['my-app']?.targets['build-storybook']
-    ).toMatchObject({
-      command: 'storybook build',
-      options: {
-        cwd: 'my-app',
-      },
-      cache: true,
-      outputs: [
-        '{projectRoot}/storybook-static',
-        '{options.output-dir}',
-        '{options.outputDir}',
-        '{options.o}',
-      ],
-      inputs: [
-        'production',
-        '^production',
-        { externalDependencies: ['storybook'] },
-      ],
-    });
-    expect(
-      nodes.at(0)?.[1]?.['projects']?.['my-app']?.targets['serve-storybook']
-    ).toMatchObject({
-      command: 'storybook dev',
-    });
+    expect(nodes).toMatchInlineSnapshot(`
+      [
+        [
+          "my-app/.storybook/main.ts",
+          {
+            "projects": {
+              "my-app": {
+                "root": "my-app",
+                "targets": {
+                  "build-storybook": {
+                    "cache": true,
+                    "command": "storybook build",
+                    "inputs": [
+                      "production",
+                      "^production",
+                      {
+                        "externalDependencies": [
+                          "storybook",
+                        ],
+                      },
+                    ],
+                    "options": {
+                      "cwd": "my-app",
+                    },
+                    "outputs": [
+                      "{projectRoot}/storybook-static",
+                      "{options.output-dir}",
+                      "{options.outputDir}",
+                      "{options.o}",
+                    ],
+                  },
+                  "serve-storybook": {
+                    "command": "storybook dev",
+                    "options": {
+                      "cwd": "my-app",
+                    },
+                  },
+                  "static-storybook": {
+                    "executor": "@nx/web:file-server",
+                    "options": {
+                      "buildTarget": "build-storybook",
+                      "staticFilePath": "my-app/storybook-static",
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
+      ]
+    `);
   });
 
   it('should create angular nodes', async () => {
@@ -115,49 +139,63 @@ describe('@nx/storybook/plugin', () => {
       context
     );
 
-    expect(nodes.at(0)?.[0]).toStrictEqual('my-ng-app/.storybook/main.ts');
-    expect(
-      nodes.at(0)?.[1]?.['projects']?.['my-ng-app']?.targets
-    ).toBeDefined();
-    expect(
-      nodes.at(0)?.[1]?.['projects']?.['my-ng-app']?.targets?.[
-        'build-storybook'
-      ]
-    ).toMatchObject({
-      executor: '@storybook/angular:build-storybook',
-      options: {
-        outputDir: 'my-ng-app/storybook-static',
-        configDir: 'my-ng-app/.storybook',
-        browserTarget: 'my-ng-app:build-storybook',
-        compodoc: false,
-      },
-      cache: true,
-      outputs: [
-        '{projectRoot}/storybook-static',
-        '{options.output-dir}',
-        '{options.outputDir}',
-        '{options.o}',
-      ],
-      inputs: [
-        'production',
-        '^production',
-        {
-          externalDependencies: ['storybook', '@storybook/angular'],
-        },
-      ],
-    });
-    expect(
-      nodes.at(0)?.[1]?.['projects']?.['my-ng-app']?.targets?.[
-        'serve-storybook'
+    expect(nodes).toMatchInlineSnapshot(`
+      [
+        [
+          "my-ng-app/.storybook/main.ts",
+          {
+            "projects": {
+              "my-ng-app": {
+                "root": "my-ng-app",
+                "targets": {
+                  "build-storybook": {
+                    "cache": true,
+                    "executor": "@storybook/angular:build-storybook",
+                    "inputs": [
+                      "production",
+                      "^production",
+                      {
+                        "externalDependencies": [
+                          "storybook",
+                          "@storybook/angular",
+                        ],
+                      },
+                    ],
+                    "options": {
+                      "browserTarget": "my-ng-app:build-storybook",
+                      "compodoc": false,
+                      "configDir": "my-ng-app/.storybook",
+                      "outputDir": "my-ng-app/storybook-static",
+                    },
+                    "outputs": [
+                      "{projectRoot}/storybook-static",
+                      "{options.output-dir}",
+                      "{options.outputDir}",
+                      "{options.o}",
+                    ],
+                  },
+                  "serve-storybook": {
+                    "executor": "@storybook/angular:start-storybook",
+                    "options": {
+                      "browserTarget": "my-ng-app:build-storybook",
+                      "compodoc": false,
+                      "configDir": "my-ng-app/.storybook",
+                    },
+                  },
+                  "static-storybook": {
+                    "executor": "@nx/web:file-server",
+                    "options": {
+                      "buildTarget": "build-storybook",
+                      "staticFilePath": "my-ng-app/storybook-static",
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
       ]
-    ).toMatchObject({
-      executor: '@storybook/angular:start-storybook',
-      options: {
-        browserTarget: 'my-ng-app:build-storybook',
-        configDir: 'my-ng-app/.storybook',
-        compodoc: false,
-      },
-    });
+    `);
   });
 
   it('should support main.js', async () => {
@@ -186,39 +224,57 @@ describe('@nx/storybook/plugin', () => {
       context
     );
 
-    expect(nodes.at(0)?.[0]).toStrictEqual('my-react-lib/.storybook/main.js');
-    expect(
-      nodes.at(0)?.[1]?.['projects']?.['my-react-lib']?.targets
-    ).toBeDefined();
-    expect(
-      nodes.at(0)?.[1]?.['projects']?.['my-react-lib']?.targets?.[
-        'build-storybook'
-      ]
-    ).toMatchObject({
-      command: 'storybook build',
-      options: {
-        cwd: 'my-react-lib',
-      },
-      cache: true,
-      outputs: [
-        '{projectRoot}/storybook-static',
-        '{options.output-dir}',
-        '{options.outputDir}',
-        '{options.o}',
-      ],
-      inputs: [
-        'production',
-        '^production',
-        { externalDependencies: ['storybook'] },
-      ],
-    });
-    expect(
-      nodes.at(0)?.[1]?.['projects']?.['my-react-lib']?.targets?.[
-        'serve-storybook'
+    expect(nodes).toMatchInlineSnapshot(`
+      [
+        [
+          "my-react-lib/.storybook/main.js",
+          {
+            "projects": {
+              "my-react-lib": {
+                "root": "my-react-lib",
+                "targets": {
+                  "build-storybook": {
+                    "cache": true,
+                    "command": "storybook build",
+                    "inputs": [
+                      "production",
+                      "^production",
+                      {
+                        "externalDependencies": [
+                          "storybook",
+                        ],
+                      },
+                    ],
+                    "options": {
+                      "cwd": "my-react-lib",
+                    },
+                    "outputs": [
+                      "{projectRoot}/storybook-static",
+                      "{options.output-dir}",
+                      "{options.outputDir}",
+                      "{options.o}",
+                    ],
+                  },
+                  "serve-storybook": {
+                    "command": "storybook dev",
+                    "options": {
+                      "cwd": "my-react-lib",
+                    },
+                  },
+                  "static-storybook": {
+                    "executor": "@nx/web:file-server",
+                    "options": {
+                      "buildTarget": "build-storybook",
+                      "staticFilePath": "my-react-lib/storybook-static",
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
       ]
-    ).toMatchObject({
-      command: 'storybook dev',
-    });
+    `);
   });
 
   function mockStorybookMainConfig(

diff --git a/packages/storybook/src/plugins/plugin.ts b/packages/storybook/src/plugins/plugin.ts
@@ -23,8 +23,6 @@ import { loadConfigFile } from '@nx/devkit/src/utils/config-utils';
 import type { StorybookConfig } from '@storybook/types';
 import { hashObject } from 'nx/src/hasher/file-hasher';
 
-const pmc = getPackageManagerCommand();
-
 export interface StorybookPluginOptions {
   buildStorybookTargetName?: string;
   serveStorybookTargetName?: string;