fix(webpack-dev-server): add custom project config to handler

Author: jordanpowell88

cli/types/cypress.d.ts

@@ -3047,16 +3047,29 @@ declare namespace Cypress {
 
   type PickConfigOpt<T> = T extends keyof DefineDevServerConfig ? DefineDevServerConfig[T] : any
 
+  type ProjectConfig = {
+    root: string,
+    sourceRoot: string,
+    buildOptions: Record<string, any>
+  }
+
   type DevServerFn<ComponentDevServerOpts = any> = (cypressDevServerConfig: DevServerConfig, devServerConfig: ComponentDevServerOpts) => ResolvedDevServerConfig | Promise<ResolvedDevServerConfig>
 
   type DevServerConfigOptions = {
     bundler: 'webpack'
-    framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app' | 'next' | 'angular'
+    framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app' | 'next'
     webpackConfig?: PickConfigOpt<'webpackConfig'>
   } | {
     bundler: 'vite'
     framework: 'react' | 'vue'
     viteConfig?: Omit<Exclude<PickConfigOpt<'viteConfig'>, undefined>, 'base' | 'root'>
+  } | {
+    bundler: 'webpack',
+    framework: 'angular',
+    webpackConfig?: PickConfigOpt<'webpackConfig'>,
+    options?: {
+      projectConfig: ProjectConfig
+    }
   }
 
   interface ComponentConfigOptions<ComponentDevServerOpts = any> extends Omit<CoreConfigOptions, 'baseUrl' | 'experimentalSessionAndOrigin'> {

npm/webpack-dev-server/src/devServer.ts

@@ -24,6 +24,9 @@ export type WebpackDevServerConfig = {
 } & {
   framework?: typeof ALL_FRAMEWORKS[number] // Add frameworks here as we implement
   webpackConfig?: unknown // Derived from the user's webpack
+  options?: {
+    projectConfig?: Cypress.ProjectConfig
+  }
 }
 
 export const ALL_FRAMEWORKS = ['create-react-app', 'nuxt', 'react', 'vue-cli', 'next', 'vue', 'angular'] as const

npm/webpack-dev-server/src/helpers/angularHandler.ts

@@ -5,19 +5,22 @@ import { pathToFileURL } from 'url'
 import type { PresetHandlerResult, WebpackDevServerConfig } from '../devServer'
 import { sourceDefaultWebpackDependencies } from './sourceRelativeWebpackModules'
 
+type BuildOptions = Record<string, any>
+
+type Configurations = {
+  configurations?: {
+    [configuration: string]: BuildOptions
+  }
+}
+
+export type MyType = Extract<Cypress.DevServerConfigOptions, { framework: 'angular'}>
+
 export type AngularJsonProjectConfig = {
   projectType: string
   root: string
   sourceRoot: string
   architect: {
-    build: {
-      options: { [key: string]: any } & { polyfills?: string }
-      configurations?: {
-        [configuration: string]: {
-          [key: string]: any
-        }
-      }
-    }
+    build: { options: BuildOptions } & Configurations
   }
 }
 
@@ -30,21 +33,7 @@ type AngularJson = {
 
 const dynamicImport = new Function('specifier', 'return import(specifier)')
 
-export async function angularHandler (devServerConfig: WebpackDevServerConfig): Promise<PresetHandlerResult> {
-  const webpackConfig = await getAngularCliWebpackConfig(devServerConfig)
-
-  return { frameworkConfig: webpackConfig, sourceWebpackModulesResult: sourceDefaultWebpackDependencies(devServerConfig) }
-}
-
-async function getAngularCliWebpackConfig (devServerConfig: WebpackDevServerConfig) {
-  const { projectRoot } = devServerConfig.cypressConfig
-
-  const {
-    generateBrowserWebpackConfigFromContext,
-    getCommonConfig,
-    getStylesConfig,
-  } = await getAngularCliModules(projectRoot)
-
+async function getProjectConfig (projectRoot: string): Promise<Cypress.ProjectConfig> {
   const angularJson = await getAngularJson(projectRoot)
 
   let { defaultProject } = angularJson
@@ -59,24 +48,20 @@ async function getAngularCliWebpackConfig (devServerConfig: WebpackDevServerConf
 
   const defaultProjectConfig = angularJson.projects[defaultProject]
 
-  const tsConfig = await generateTsConfig(devServerConfig, defaultProjectConfig)
-
-  const buildOptions = getAngularBuildOptions(defaultProjectConfig, tsConfig)
-
-  const context = createFakeContext(projectRoot, defaultProject, defaultProjectConfig)
-
-  const { config } = await generateBrowserWebpackConfigFromContext(
-    buildOptions,
-    context,
-    (wco: any) => [getCommonConfig(wco), getStylesConfig(wco)],
-  )
-
-  delete config.entry.main
+  const { architect, root, sourceRoot } = defaultProjectConfig
+  const { build } = architect
 
-  return config
+  return {
+    root,
+    sourceRoot,
+    buildOptions: {
+      ...build.options,
+      ...build.configurations?.development || {},
+    },
+  }
 }
 
-export function getAngularBuildOptions (projectConfig: AngularJsonProjectConfig, tsConfig: string) {
+export function getAngularBuildOptions (buildOptions: BuildOptions, tsConfig: string) {
   // Default options are derived from the @angular-devkit/build-angular browser builder, with some options from
   // the serve builder thrown in for development.
   // see: https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/src/builders/browser/schema.json
@@ -115,16 +100,15 @@ export function getAngularBuildOptions (projectConfig: AngularJsonProjectConfig,
     extractLicenses: false,
     sourceMap: true,
     namedChunks: true,
-    ...projectConfig.architect.build.options,
-    ...projectConfig.architect.build.configurations?.development || {},
+    ...buildOptions,
     tsConfig,
     aot: false,
     outputHashing: 'none',
     budgets: undefined,
   }
 }
 
-export async function generateTsConfig (devServerConfig: WebpackDevServerConfig, projectConfig: AngularJsonProjectConfig): Promise<string> {
+export async function generateTsConfig (devServerConfig: WebpackDevServerConfig, buildOptions: BuildOptions): Promise<string> {
   const { cypressConfig } = devServerConfig
   const { projectRoot } = cypressConfig
 
@@ -138,8 +122,8 @@ export async function generateTsConfig (devServerConfig: WebpackDevServerConfig,
     includePaths.push(toPosix(cypressConfig.supportFile))
   }
 
-  if (projectConfig.architect.build.options.polyfills) {
-    const polyfills = getProjectFilePath(projectConfig.architect.build.options.polyfills)
+  if (buildOptions?.polyfills) {
+    const polyfills = getProjectFilePath(buildOptions?.polyfills)
 
     includePaths.push(polyfills)
   }
@@ -215,14 +199,14 @@ export async function getAngularJson (projectRoot: string): Promise<AngularJson>
   return JSON.parse(angularJson)
 }
 
-function createFakeContext (projectRoot: string, defaultProject: string, defaultProjectConfig: any) {
+function createFakeContext (projectRoot: string, defaultProjectConfig: Cypress.ProjectConfig) {
   const logger = {
     createChild: () => ({}),
   }
 
   const context = {
     target: {
-      project: defaultProject,
+      project: 'angular',
     },
     workspaceRoot: projectRoot,
     getProjectMetadata: () => {
@@ -239,3 +223,38 @@ function createFakeContext (projectRoot: string, defaultProject: string, default
 }
 
 export const toPosix = (filePath: string) => filePath.split(path.sep).join(path.posix.sep)
+
+async function getAngularCliWebpackConfig (devServerConfig: WebpackDevServerConfig) {
+  const { projectRoot } = devServerConfig.cypressConfig
+
+  const {
+    generateBrowserWebpackConfigFromContext,
+    getCommonConfig,
+    getStylesConfig,
+  } = await getAngularCliModules(projectRoot)
+
+  // normalize
+  const projectConfig = devServerConfig.options?.projectConfig || await getProjectConfig(projectRoot)
+
+  const tsConfig = await generateTsConfig(devServerConfig, projectConfig.buildOptions)
+
+  const buildOptions = getAngularBuildOptions(projectConfig.buildOptions, tsConfig)
+
+  const context = createFakeContext(projectRoot, projectConfig)
+
+  const { config } = await generateBrowserWebpackConfigFromContext(
+    buildOptions,
+    context,
+    (wco: any) => [getCommonConfig(wco), getStylesConfig(wco)],
+  )
+
+  delete config.entry.main
+
+  return config
+}
+
+export async function angularHandler (devServerConfig: WebpackDevServerConfig): Promise<PresetHandlerResult> {
+  const webpackConfig = await getAngularCliWebpackConfig(devServerConfig)
+
+  return { frameworkConfig: webpackConfig, sourceWebpackModulesResult: sourceDefaultWebpackDependencies(devServerConfig) }
+}