Skip to content

Commit

Permalink
fix(storybook): find the correct targets for build and storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
@mandarini
mandarini committed Jan 17, 2022
1 parent 552efe2 commit 4ea1859
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 93 deletions.
116 changes: 49 additions & 67 deletions packages/storybook/src/executors/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@ import {
parseTargetString,
readTargetOptions,
} from '@nrwl/devkit';
import { Workspaces } from '@nrwl/tao/src/shared/workspace';
import {
TargetConfiguration,
Workspaces,
} from '@nrwl/tao/src/shared/workspace';
import { checkAndCleanWithSemver } from '@nrwl/workspace/src/utilities/version-utils';
import 'dotenv/config';
import { existsSync, readFileSync } from 'fs';
Expand Down Expand Up @@ -205,91 +208,41 @@ export function resolveCommonStorybookOptionMapper(

storybookOptions.angularBrowserTarget = targetString;
} else {
const buildable =
!!context?.workspace?.projects?.[context.projectName]?.targets?.build;

const storybookBuildTarget =
!!context?.workspace?.projects?.[context.projectName]?.targets?.[
'build-storybook'
];

// to preserve the backwards compatibility for our users Nx resolves the
// default project just as Storybook used to before

const ws = new Workspaces(context.root);
const defaultProjectName = ws.calculateDefaultProjectName(
context.cwd,
context.workspace
);

buildProjectName = defaultProjectName;

if (defaultProjectName) {
logger.warn(
`
No projectBuildConfig was provided. Nx will use the defaultProject as set in your workspace configuration
to build Storybook. This can lead to compilation errors for Storybook.
If you want to change this, you can run the command by providing the projectBuildConfig flag as follows:
nx ${context.targetName ? context.targetName : 'storybook'} ${
context.projectName
} --projectBuildConfig=${context.projectName}${
!buildable && storybookBuildTarget ? ':build-storybook' : ''
}
Alternatively, in your project configuration, under the "${
context.targetName ? context.targetName : 'storybook'
}" target options, you can
set the "projectBuildConfig" property to the name of the project of which you want to use
the build configuration for Storybook.
`
const { storybookBuildTarget, storybookTarget, buildTarget } =
findStorybookAndBuildTargets(
context?.workspace?.projects?.[context.projectName]?.targets
);
} else {
logger.warn(
`

logger.warn(
`
No projectBuildConfig was provided and Nx could not find a defaultProject in your workspace configuration.
To fix this, you can try one of the following options:
1. Specify a defaultProject in your nx.json
2. You can run the ${
context.targetName ? context.targetName : 'storybook'
context.targetName ? context.targetName : storybookTarget
} executor by providing the projectBuildConfig flag as follows:
nx ${context.targetName ? context.targetName : 'storybook'} ${
context.projectName
} --projectBuildConfig=${context.projectName}${
!buildable && storybookBuildTarget ? ':build-storybook' : ''
}
nx ${context.targetName ? context.targetName : storybookTarget} ${
context.projectName
} --projectBuildConfig=${context.projectName}${
!buildTarget && storybookBuildTarget ? `:${storybookBuildTarget}` : ''
}
3. In your project configuration, under the "${
context.targetName ? context.targetName : 'storybook'
context.targetName ? context.targetName : storybookTarget
}" target options, you can
set the "projectBuildConfig" property to the name of the project of which you want to use
the build configuration for Storybook.
`
);
throw new Error(
'No default project was found in your workspace configuration.'
);
}

targetOptions = readTargetOptions(
{
project: defaultProjectName,
target: targetName,
configuration: '',
},
context
);

storybookOptions.angularBrowserTarget = normalizeTargetString(
defaultProjectName,
targetName
throw new Error(
'No default project was found in your workspace configuration.'
);
}

const project = context.workspace.projects[buildProjectName];

const angularDevkitCompatibleLogger = {
Expand Down Expand Up @@ -340,3 +293,32 @@ function isStorybookGTE6_4() {
'6.4.0-rc.1'
);
}

export function findStorybookAndBuildTargets(targets: {
[targetName: string]: TargetConfiguration;
}): {
storybookBuildTarget?: string;
storybookTarget?: string;
buildTarget?: string;
} {
const returnObject: {
storybookBuildTarget?: string;
storybookTarget?: string;
buildTarget?: string;
} = {};
Object.entries(targets).forEach(([target, targetConfig]) => {
if (targetConfig.executor === '@nrwl/storybook:storybook') {
returnObject.storybookTarget = target;
}
if (targetConfig.executor === '@nrwl/storybook:build') {
returnObject.storybookBuildTarget = target;
}
if (
targetConfig.executor === '@angular-devkit/build-angular:browser' ||
targetConfig.executor === '@nrwl/angular:ng-packagr-lite'
) {
returnObject.buildTarget = target;
}
});
return returnObject;
}
72 changes: 46 additions & 26 deletions packages/storybook/src/migrations/update-13-4-5/set-project-build-config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,48 +5,68 @@ import {
updateProjectConfiguration,
getProjects,
} from '@nrwl/devkit';
import { findStorybookAndBuildTargets } from '../../executors/utils';

export default async function setProjectBuildConfig(tree: Tree) {
let changesMade = false;
const projects = getProjects(tree);
[...projects.entries()].forEach(([projectName, projectConfiguration]) => {
const { storybookBuildTarget, storybookTarget, buildTarget } =
findStorybookAndBuildTargets(projectConfiguration.targets);
if (
projectConfiguration?.targets?.storybook?.options?.uiFramework ===
'@storybook/angular' &&
projectName
projectName &&
storybookTarget &&
projectConfiguration?.targets?.[storybookTarget]?.options?.uiFramework ===
'@storybook/angular'
) {
if (!projectConfiguration.targets.storybook.options.projectBuildConfig) {
if (projectConfiguration.targets.build) {
projectConfiguration.targets.storybook.options.projectBuildConfig =
projectName;
if (projectConfiguration.targets['build-storybook']) {
if (buildTarget) {
if (
!projectConfiguration.targets[storybookTarget].options
.projectBuildConfig
) {
projectConfiguration.targets[
storybookTarget
].options.projectBuildConfig = projectName;
changesMade = true;
}
if (
storybookBuildTarget &&
!projectConfiguration.targets[storybookBuildTarget].options
.projectBuildConfig
) {
projectConfiguration.targets[
storybookBuildTarget
].options.projectBuildConfig = projectName;
changesMade = true;
}
} else {
if (storybookBuildTarget) {
if (
!projectConfiguration.targets[storybookTarget].options
.projectBuildConfig
) {
projectConfiguration.targets[
'build-storybook'
].options.projectBuildConfig = projectName;
storybookTarget
].options.projectBuildConfig = `${projectName}:build-storybook`;
changesMade = true;
}
} else {
if (projectConfiguration.targets['build-storybook']) {
projectConfiguration.targets.storybook.options.projectBuildConfig = `${projectName}:build-storybook`;
if (
!projectConfiguration.targets[storybookBuildTarget].options
.projectBuildConfig
) {
projectConfiguration.targets[
'build-storybook'
storybookBuildTarget
].options.projectBuildConfig = `${projectName}:build-storybook`;
} else {
Object.entries(projectConfiguration.targets).forEach(
([target, targetConfig]) => {
if (targetConfig.executor === '@nrwl/storybook:build') {
projectConfiguration.targets.storybook.options.projectBuildConfig = `${projectName}:${target}`;
}
}
);
changesMade = true;
}
}
if (projectConfiguration.targets.storybook.options.projectBuildConfig) {
updateProjectConfiguration(tree, projectName, projectConfiguration);
changesMade = true;
} else {
logger.warn(`Could not find a build target for ${projectName}.`);
}
}

if (changesMade) {
updateProjectConfiguration(tree, projectName, projectConfiguration);
}
}
});

Expand Down

0 comments on commit 4ea1859

Please sign in to comment.