feat: start and build storybook witout browser-target

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
storybookjs · Aug 3, 2021 · b5c97a3 · b5c97a3
1 parent 1c724f8
commit b5c97a3
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 35 deletions.
diff --git a/app/angular/src/builders/build-storybook/index.spec.ts b/app/angular/src/builders/build-storybook/index.spec.ts
@@ -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,

diff --git a/app/angular/src/builders/build-storybook/index.ts b/app/angular/src/builders/build-storybook/index.ts
@@ -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[];

diff --git a/app/angular/src/builders/build-storybook/schema.json b/app/angular/src/builders/build-storybook/schema.json
@@ -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",

diff --git a/app/angular/src/builders/start-storybook/index.spec.ts b/app/angular/src/builders/start-storybook/index.spec.ts
@@ -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,

diff --git a/app/angular/src/builders/start-storybook/index.ts b/app/angular/src/builders/start-storybook/index.ts
@@ -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[];

diff --git a/app/angular/src/builders/start-storybook/schema.json b/app/angular/src/builders/start-storybook/schema.json
@@ -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",

diff --git a/app/angular/src/server/framework-preset-angular-cli.test.ts b/app/angular/src/server/framework-preset-angular-cli.test.ts
@@ -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();

diff --git a/app/angular/src/server/framework-preset-angular-cli.ts b/app/angular/src/server/framework-preset-angular-cli.ts
@@ -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);
-
-    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;
+    // 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`
+      );
     }
-    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

diff --git a/app/angular/standalone.d.ts b/app/angular/standalone.d.ts
@@ -5,7 +5,7 @@ export type StandaloneOptions = Partial<
     LoadOptions &
     BuilderOptions & {
       mode?: 'static' | 'dev';
-      angularBrowserTarget?: string;
+      angularBrowserTarget?: string | null;
       tsConfig?: string;
     }
 >;

diff --git a/examples/angular-cli/angular.json b/examples/angular-cli/angular.json
@@ -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"