Merge pull request #27189 from storybookjs/valentin/angular-cleanup-t…

…ypes

Angular: Cleanup types

code/frameworks/angular/src/builders/build-storybook/index.ts

@@ -2,38 +2,28 @@ import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/ar
 import { JsonObject } from '@angular-devkit/core';
 import { sync as findUpSync } from 'find-up';
 import { sync as readUpSync } from 'read-pkg-up';
-import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
 
 import { CLIOptions } from '@storybook/types';
 import { getEnvConfig, versions } from '@storybook/core-common';
 import { addToGlobalContext } from '@storybook/telemetry';
 
 import { buildStaticStandalone, withTelemetry } from '@storybook/core-server';
-import {
-  AssetPattern,
-  SourceMapUnion,
-  StyleClass,
-  StyleElement,
-} from '@angular-devkit/build-angular/src/builders/browser/schema';
+import { StyleClass } from '@angular-devkit/build-angular/src/builders/browser/schema';
 import { StandaloneOptions } from '../utils/standalone-options';
 import { runCompodoc } from '../utils/run-compodoc';
 import { errorSummary, printErrorDetails } from '../utils/error-handler';
-import { setup } from '../utils/setup';
+import { AngularBuilderOptions, setup } from '../utils/setup';
 
 addToGlobalContext('cliVersion', versions.storybook);
 
-export type StorybookBuilderOptions = JsonObject & {
+export type StorybookBuilderOptions = AngularBuilderOptions & {
   browserTarget?: string | null;
   tsConfig?: string;
   test: boolean;
   docs: boolean;
   compodoc: boolean;
   compodocArgs: string[];
   enableProdMode?: boolean;
-  styles?: StyleElement[];
-  stylePreprocessorOptions?: StylePreprocessorOptions;
-  assets?: AssetPattern[];
-  sourceMap?: SourceMapUnion;
 } & Pick<
     // makes sure the option exists
     CLIOptions,

code/frameworks/angular/src/builders/start-storybook/index.ts

@@ -17,20 +17,16 @@ import {
 import { StandaloneOptions } from '../utils/standalone-options';
 import { runCompodoc } from '../utils/run-compodoc';
 import { printErrorDetails, errorSummary } from '../utils/error-handler';
-import { setup } from '../utils/setup';
+import { AngularBuilderOptions, setup } from '../utils/setup';
 
 addToGlobalContext('cliVersion', versions.storybook);
 
-export type StorybookBuilderOptions = JsonObject & {
+export type StorybookBuilderOptions = AngularBuilderOptions & {
   browserTarget?: string | null;
   tsConfig?: string;
   compodoc: boolean;
   compodocArgs: string[];
   enableProdMode?: boolean;
-  styles?: StyleElement[];
-  stylePreprocessorOptions?: StylePreprocessorOptions;
-  assets?: AssetPattern[];
-  sourceMap?: SourceMapUnion;
 } & Pick<
     // makes sure the option exists
     CLIOptions,

code/frameworks/angular/src/builders/utils/run-compodoc.ts

@@ -1,5 +1,4 @@
 import { BuilderContext } from '@angular-devkit/architect';
-import { Observable } from 'rxjs';
 import * as path from 'path';
 import { JsPackageManagerFactory } from '@storybook/core-common';
 

code/frameworks/angular/src/builders/utils/setup.ts

@@ -2,34 +2,24 @@ import { Target, targetFromTargetString } from '@angular-devkit/architect';
 import { BuilderContext } from '@angular-devkit/architect';
 import { JsonObject, logging } from '@angular-devkit/core';
 import { sync as findUpSync } from 'find-up';
-import { BrowserBuilderOptions, StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { BrowserBuilderOptions } from '@angular-devkit/build-angular';
 import { logger } from '@storybook/node-logger';
-import {
-  AssetPattern,
-  SourceMapUnion,
-  StyleElement,
-} from '@angular-devkit/build-angular/src/builders/browser/schema';
 
-type AngularBuilderOptions = {
-  stylePreprocessorOptions?: StylePreprocessorOptions;
-  styles?: StyleElement[];
-  assets?: AssetPattern[];
-  sourceMap?: SourceMapUnion;
-};
-
-type Options = AngularBuilderOptions & {
+export type AngularBuilderOptions = BrowserBuilderOptions & {
   browserTarget?: string | null;
-  tsConfig?: string;
   configDir?: string;
 };
 
-export async function setup(options: Options, context: BuilderContext) {
-  let browserOptions: (JsonObject & BrowserBuilderOptions) | undefined;
+export async function setup(
+  { stylePreprocessorOptions, styles, assets, sourceMap, ...options }: AngularBuilderOptions,
+  context: BuilderContext
+) {
+  let browserOptions: BrowserBuilderOptions | undefined;
   let browserTarget: Target | undefined;
 
   if (options.browserTarget) {
     browserTarget = targetFromTargetString(options.browserTarget);
-    browserOptions = await context.validateOptions<JsonObject & BrowserBuilderOptions>(
+    browserOptions = await context.validateOptions<any>(
       await context.getTargetOptions(browserTarget),
       await context.getBuilderNameForTarget(browserTarget)
     );
@@ -45,12 +35,11 @@ export async function setup(options: Options, context: BuilderContext) {
   const angularBuilderOptions = await getBuilderOptions(
     options.browserTarget,
     {
-      ...(options.stylePreprocessorOptions
-        ? { stylePreprocessorOptions: options.stylePreprocessorOptions }
-        : {}),
-      ...(options.styles ? { styles: options.styles } : {}),
-      ...(options.assets ? { assets: options.assets } : {}),
-      sourceMap: options.sourceMap ?? false,
+      ...options,
+      ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}),
+      ...(styles ? { styles } : {}),
+      ...(assets ? { assets } : {}),
+      sourceMap: sourceMap ?? false,
     },
     tsConfig,
     options.configDir,
@@ -91,7 +80,7 @@ async function getBuilderOptions(
   tsConfig: string,
   configDir: string,
   builderContext: BuilderContext
-) {
+): Promise<BrowserBuilderOptions> {
   /**
    * Get Browser Target options
    */
@@ -110,7 +99,9 @@ async function getBuilderOptions(
     ...browserTargetOptions,
     ...angularBuilderOptions,
     tsConfig:
-      tsConfig ?? findUpSync('tsconfig.json', { cwd: configDir }) ?? browserTargetOptions.tsConfig,
+      tsConfig ??
+      findUpSync('tsconfig.json', { cwd: configDir }) ??
+      (browserTargetOptions.tsConfig as string),
   };
   logger.info(`=> Using angular project with "tsConfig:${builderOptions.tsConfig}"`);
 

code/frameworks/angular/src/builders/utils/standalone-options.ts

@@ -1,7 +1,7 @@
 import { BuilderContext } from '@angular-devkit/architect';
 
 import { LoadOptions, CLIOptions, BuilderOptions } from '@storybook/types';
-import { AngularBuilderOptions } from '../../server/framework-preset-angular-cli';
+import { AngularBuilderOptions } from './setup';
 
 export type StandaloneOptions = CLIOptions &
   LoadOptions &

code/frameworks/angular/src/server/angular-cli-webpack.d.ts

@@ -1,7 +1,7 @@
-import { JsonObject } from '@angular-devkit/core';
 import { BuilderContext } from '@angular-devkit/architect';
+import { AngularBuilderOptions } from '../builders/utils/setup';
 
 export declare function getWebpackConfig(
   baseConfig: any,
-  options: { builderOptions: JsonObject; builderContext: BuilderContext }
+  options: { builderOptions: AngularBuilderOptions; builderContext: BuilderContext }
 ): any;

code/frameworks/angular/src/server/preset-options.ts

@@ -1,13 +1,13 @@
 import { Options as CoreOptions } from '@storybook/types';
 
 import { BuilderContext } from '@angular-devkit/architect';
-import { JsonObject } from '@angular-devkit/core';
+import { AngularBuilderOptions } from '../builders/utils/setup';
 
 export type PresetOptions = CoreOptions & {
   /* Allow to get the options of a targeted "browser builder"  */
   angularBrowserTarget?: string | null;
   /* Defined set of options. These will take over priority from angularBrowserTarget options  */
-  angularBuilderOptions?: JsonObject;
+  angularBuilderOptions?: AngularBuilderOptions;
   /* Angular context from builder */
   angularBuilderContext?: BuilderContext | null;
   tsConfig?: string;