From 42cdcc4c2e850a1ac3158f2152a5a3c2f1699149 Mon Sep 17 00:00:00 2001 From: Phillip9587 Date: Wed, 25 Sep 2024 01:20:49 +0200 Subject: [PATCH] feat(storybook): use createNodesV2 for init and convert-to-inferred generators --- .../convert-to-inferred.ts | 8 +- .../storybook/src/generators/init/init.ts | 8 +- packages/storybook/src/plugins/plugin.spec.ts | 258 +++++++++++------- packages/storybook/src/plugins/plugin.ts | 2 - 4 files changed, 165 insertions(+), 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 index 161b579cb245f..e0dda2a19e6f4 100644 --- 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 index c5ed52fef7eab..88cbff0875a36 100644 --- 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 index 93cc60d20bbcf..9729aaa75a7ac 100644 --- 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 index e7d1858d8701e..e4a03023de9d5 100644 --- 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;