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 76fedd1
Show file tree
Hide file tree
Showing 7 changed files with 627 additions and 302 deletions.
116 changes: 49 additions & 67 deletions packages/storybook/src/executors/utils.ts
View file
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;
}
168 changes: 168 additions & 0 deletions ...torybook/src/migrations/update-13-4-5/__snapshots__/set-project-build-config.spec.ts.snap
View file
Expand Up @@ -168,6 +168,174 @@ Object {
}
`;

exports[`Set the projectBuildConfig option in the Storybook configuration for Angular projects for all types of angular projects - non-buildable and buildable libs/apps should still set the projectBuildConfig even if target names are not the default 1`] = `
Object {
"projects": Object {
"main-app": Object {
"prefix": "katst",
"projectType": "application",
"root": "apps/main-app",
"sourceRoot": "apps/main-app/src",
"targets": Object {
"lmfkcn": Object {
"configurations": Object {
"ci": Object {
"quiet": true,
},
},
"executor": "@nrwl/storybook:storybook",
"options": Object {
"config": Object {
"configFolder": "apps/main-app/.storybook",
},
"port": 4400,
"projectBuildConfig": "main-app",
"uiFramework": "@storybook/angular",
},
},
"njdfvndfjnv": Object {
"executor": "@angular-devkit/build-angular:browser",
"outputs": Array [
"{options.outputPath}",
],
},
"odmwjbc": Object {
"configurations": Object {
"ci": Object {
"quiet": true,
},
},
"executor": "@nrwl/storybook:build",
"options": Object {
"config": Object {
"configFolder": "apps/main-app/.storybook",
},
"outputPath": "dist/storybook/main-app",
"projectBuildConfig": "main-app",
"uiFramework": "@storybook/angular",
},
"outputs": Array [
"{options.outputPath}",
],
},
},
},
"ui-one": Object {
"projectType": "library",
"root": "libs/ui/one",
"sourceRoot": "libs/ui/one/src",
"targets": Object {
"asdgsdfg": Object {
"configurations": Object {
"ci": Object {
"quiet": true,
},
},
"executor": "@nrwl/storybook:build",
"options": Object {
"config": Object {
"configFolder": "libs/ui/one/.storybook",
},
"outputPath": "dist/storybook/ui/one",
"projectBuildConfig": "ui-one:asdgsdfg",
"uiFramework": "@storybook/angular",
},
"outputs": Array [
"{options.outputPath}",
],
},
"trthrngb": Object {
"executor": "@nrwl/storybook:storybook",
"options": Object {
"config": Object {
"configFolder": "libs/ui/one/.storybook",
},
"port": 4400,
"projectBuildConfig": "ui-one:asdgsdfg",
"uiFramework": "@storybook/angular",
},
},
},
},
"ui-three": Object {
"projectType": "library",
"root": "libs/ui/three",
"sourceRoot": "libs/ui/three/src",
"targets": Object {
"aaaa": Object {
"configurations": Object {
"ci": Object {
"quiet": true,
},
},
"executor": "@nrwl/storybook:build",
"options": Object {
"config": Object {
"configFolder": "libs/ui/three/.storybook",
},
"outputPath": "dist/storybook/ui/three",
"projectBuildConfig": "ui-three:aaaa",
"uiFramework": "@storybook/angular",
},
"outputs": Array [
"{options.outputPath}",
],
},
"nmkgd": Object {
"executor": "@nrwl/storybook:storybook",
"options": Object {
"config": Object {
"configFolder": "libs/ui/three/.storybook",
},
"port": 4400,
"projectBuildConfig": "ui-three:aaaa",
"uiFramework": "@storybook/angular",
},
},
},
},
"ui-two": Object {
"projectType": "library",
"root": "libs/ui/two",
"sourceRoot": "libs/ui/two/src",
"targets": Object {
"sdft": Object {
"executor": "@nrwl/storybook:storybook",
"options": Object {
"config": Object {
"configFolder": "libs/ui/two/.storybook",
},
"port": 4400,
"projectBuildConfig": "ui-two:thjkkb",
"uiFramework": "@storybook/angular",
},
},
"thjkkb": Object {
"configurations": Object {
"ci": Object {
"quiet": true,
},
},
"executor": "@nrwl/storybook:build",
"options": Object {
"config": Object {
"configFolder": "libs/ui/two/.storybook",
},
"outputPath": "dist/storybook/ui/two",
"projectBuildConfig": "ui-two:thjkkb",
"uiFramework": "@storybook/angular",
},
"outputs": Array [
"{options.outputPath}",
],
},
},
},
},
"version": 1,
}
`;

exports[`Set the projectBuildConfig option in the Storybook configuration for Angular projects for non-angular projects should not change their Storybook configuration 1`] = `
Object {
"projects": Object {
Expand Down

0 comments on commit 76fedd1

Please sign in to comment.