GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 13:11:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: start and build storybook witout browser-target

Browse Source 
only tsConfig is required and can be directly given to storybook using new Angular builder for SB

should allow project with only lib, without `@angular-devkit/build-angular:browser` to complete the configuration, to work more simply
This commit is contained in:
ThibaudAv 2021-08-03 15:46:01 +02:00 committed by Thibaud Av
parent d1fcb2458f
commit 1604b617a9
No known key found for this signature in database
GPG Key ID: 3F0FA53A70B49E78
10 changed files with 61 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/angular/src/builders/build-storybook/index.spec.ts
View File

@ -95,7 +95,7 @@ describe('Build Storybook Builder', () => {
expect(output.success).toBeTruthy();
expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
expect(buildStandaloneMock).toHaveBeenCalledWith({
angularBrowserTarget: undefined,
angularBrowserTarget: null,
configDir: '.storybook',
docsMode: false,
loglevel: undefined,

2
app/angular/src/builders/build-storybook/index.ts
View File

@ -16,7 +16,7 @@ import { BrowserBuilderOptions } from '@angular-devkit/build-angular';
import { runCompodoc } from '../utils/run-compodoc';
export type StorybookBuilderOptions = JsonObject & {
browserTarget?: string;
browserTarget?: string | null;
tsConfig?: string;
compodoc: boolean;
compodocArgs: string[];

3
app/angular/src/builders/build-storybook/schema.json
View File

@ -7,7 +7,8 @@
"browserTarget": {
"type": "string",
"description": "Build target to be served in project-name:builder:config format. Should generally target on the builder: '@angular-devkit/build-angular:browser'. Useful for Storybook to use options (styles, assets, ...).",
"pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$"
"pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$",
"default": null
},
"tsConfig": {
"type": "string",

2
app/angular/src/builders/start-storybook/index.spec.ts
View File

@ -102,7 +102,7 @@ describe('Start Storybook Builder', () => {
expect(output.success).toBeTruthy();
expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
expect(buildStandaloneMock).toHaveBeenCalledWith({
angularBrowserTarget: undefined,
angularBrowserTarget: null,
ci: false,
configDir: '.storybook',
docsMode: false,

2
app/angular/src/builders/start-storybook/index.ts
View File

@ -16,7 +16,7 @@ import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalon
import { runCompodoc } from '../utils/run-compodoc';
export type StorybookBuilderOptions = JsonObject & {
browserTarget?: string;
browserTarget?: string | null;
tsConfig?: string;
compodoc: boolean;
compodocArgs: string[];

3
app/angular/src/builders/start-storybook/schema.json
View File

@ -7,7 +7,8 @@
"browserTarget": {
"type": "string",
"description": "Build target to be served in project-name:builder:config format. Should generally target on the builder: '@angular-devkit/build-angular:browser'. Useful for Storybook to use options (styles, assets, ...).",
"pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$"
"pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$",
"default": null
},
"tsConfig": {
"type": "string",

5
app/angular/src/server/framework-preset-angular-cli.test.ts
View File

@ -616,7 +616,10 @@ describe('framework-preset-angular-cli', () => {
describe('with only tsConfig option', () => {
beforeEach(() => {
initMockWorkspace('without-projects-entry');
options = { tsConfig: 'projects/pattern-lib/tsconfig.lib.json' } as Options;
options = {
tsConfig: 'projects/pattern-lib/tsconfig.lib.json',
angularBrowserTarget: null,
} as Options;
});
it('should log', async () => {
const baseWebpackConfig = newWebpackConfiguration();

56
app/angular/src/server/framework-preset-angular-cli.ts
View File

@ -46,36 +46,40 @@ export async function webpackFinal(baseConfig: webpack.Configuration, options: O
// Find angular project target
let project: workspaces.ProjectDefinition;
let target: workspaces.TargetDefinition;
let browserTarget;
try {
browserTarget = options.angularBrowserTarget
? targetFromTargetString(options.angularBrowserTarget)
: ({
configuration: undefined,
project: getDefaultProjectName(workspaceConfig),
target: 'build',
} as Target);
// Default behavior when `angularBrowserTarget` are not explicitly defined to null
if (options.angularBrowserTarget !== null) {
const browserTarget = options.angularBrowserTarget
? targetFromTargetString(options.angularBrowserTarget)
: ({
configuration: undefined,
project: getDefaultProjectName(workspaceConfig),
target: 'build',
} as Target);
const fondProject = findAngularProjectTarget(
workspaceConfig,
browserTarget.project,
browserTarget.target
);
project = fondProject.project;
target = fondProject.target;
logger.info(
`=> Using angular project "${browserTarget.project}:${browserTarget.target}" for configuring Storybook`
);
} catch (error) {
if (!options.tsConfig) {
logger.error(`=> Could not find angular project: ${error.message}`);
logger.info(`=> Fail to load angular-cli config. Using base config`);
return baseConfig;
const fondProject = findAngularProjectTarget(
workspaceConfig,
browserTarget.project,
browserTarget.target
);
project = fondProject.project;
target = fondProject.target;
logger.info(
`=> Using angular project "${browserTarget.project}:${browserTarget.target}" for configuring Storybook`
);
}
logger.info(`=> Using default angular project with "tsConfig:${options.tsConfig}"`);
// Start storybook when only tsConfig is provided.
if (options.angularBrowserTarget === null && options.tsConfig) {
logger.info(`=> Using default angular project with "tsConfig:${options.tsConfig}"`);
project = { root: '', extensions: {}, targets: undefined };
target = { builder: '', options: { tsConfig: options.tsConfig } };
project = { root: '', extensions: {}, targets: undefined };
target = { builder: '', options: { tsConfig: options.tsConfig } };
}
} catch (error) {
logger.error(`=> Could not find angular project: ${error.message}`);
logger.info(`=> Fail to load angular-cli config. Using base config`);
return baseConfig;
}
// Use angular-cli to get some webpack config

2
app/angular/standalone.d.ts vendored
View File

@ -5,7 +5,7 @@ export type StandaloneOptions = Partial<
LoadOptions &
BuilderOptions & {
mode?: 'static' | 'dev';
angularBrowserTarget?: string;
angularBrowserTarget?: string | null;
tsConfig?: string;
}
>;

18
examples/angular-cli/angular.json
View File

@ -104,6 +104,24 @@
}
}
}
},
"without-browser-target": {
"root": "",
"projectType": "library",
"architect": {
"storybook": {
"builder": "@storybook/angular:start-storybook",
"options": {
"tsConfig": "src/tsconfig.app.json"
}
},
"build-storybook": {
"builder": "@storybook/angular:build-storybook",
"options": {
"tsConfig": "src/tsconfig.app.json"
}
}
}
}
},
"defaultProject": "angular-cli"