chore(snc): resolve top level dev server type errors (#4383)

this commit fixes 'top level' type errors related to a stencil
configuration's `devServer` config. it adds `devServer` to the
`ValidatedConfig` type, to verify that the field exists on any instances
of `ValidatedConfig`.

this commit does not attempt to set reasonable defaults for subfields of
the `DevServerConfig` type in order to limit the scope/size of the
commit

src/cli/task-docs.ts

@@ -5,7 +5,7 @@ import type { CoreCompiler } from './load-compiler';
 import { startupCompilerLog } from './logs';
 
 export const taskDocs = async (coreCompiler: CoreCompiler, config: ValidatedConfig) => {
-  config.devServer = null;
+  config.devServer = {};
   config.outputTargets = config.outputTargets.filter(isOutputTargetDocs);
   config.devMode = true;
 

src/cli/task-watch.ts

@@ -4,7 +4,7 @@ import type { CoreCompiler } from './load-compiler';
 import { startupCompilerLog } from './logs';
 
 export const taskWatch = async (coreCompiler: CoreCompiler, config: ValidatedConfig) => {
-  let devServer: DevServer = null;
+  let devServer: DevServer | null = null;
   let exitCode = 0;
 
   try {
@@ -36,7 +36,8 @@ export const taskWatch = async (coreCompiler: CoreCompiler, config: ValidatedCon
       const rmDevServerLog = watcher.on('buildFinish', () => {
         // log the dev server url one time
         rmDevServerLog();
-        config.logger.info(`${config.logger.cyan(devServer.browserUrl)}\n`);
+        const url = devServer?.browserUrl ?? 'UNKNOWN URL';
+        config.logger.info(`${config.logger.cyan(url)}\n`);
       });
     }
 

src/compiler/build/build-hmr.ts

@@ -6,7 +6,7 @@ import type * as d from '../../declarations';
 import { getScopeId } from '../style/scope-css';
 
 export const generateHmr = (config: d.Config, compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx) => {
-  if (config.devServer == null || config.devServer.reloadStrategy == null) {
+  if (config.devServer?.reloadStrategy == null) {
     return null;
   }
 

src/compiler/bundle/bundle-output.ts

@@ -85,7 +85,7 @@ export const getRollupOptions = (
     }
     return resolved;
   });
-  if (config.devServer && config.devServer.experimentalDevModules) {
+  if (config.devServer?.experimentalDevModules) {
     nodeResolvePlugin.resolveId = async function (importee: string, importer: string) {
       const resolvedId = await orgNodeResolveId2.call(nodeResolvePlugin, importee, importer);
       return devNodeModuleResolveId(config, compilerCtx.fs, resolvedId, importee);

src/compiler/config/test/validate-dev-server.spec.ts

@@ -163,7 +163,7 @@ describe('validateDevServer', () => {
 
   it.each([1, []])('should default historyApiFallback when an invalid value (%s) is provided', (badValue) => {
     // this test explicitly checks for a bad value in the stencil.config file, hence the type assertion
-    (inputConfig.devServer.historyApiFallback as any) = badValue;
+    inputConfig.devServer = { ...inputDevServerConfig, historyApiFallback: badValue as any };
     const { config } = validateConfig(inputConfig, mockLoadConfigInit());
     expect(config.devServer.historyApiFallback).toBeDefined();
     expect(config.devServer.historyApiFallback.index).toBe('index.html');

src/compiler/config/validate-config.ts

@@ -78,6 +78,7 @@ export const validateConfig = (
   const logger = bootstrapConfig.logger || config.logger || createLogger();
 
   const validatedConfig: ValidatedConfig = {
+    devServer: {}, // assign `devServer` before spreading `config`, in the event 'devServer' is not a key on `config`
     ...config,
     // flags _should_ be JSON safe
     flags: JSON.parse(JSON.stringify(config.flags || {})),

src/compiler/config/validate-dev-server.ts

@@ -3,12 +3,9 @@ import { isAbsolute, join } from 'path';
 
 import type * as d from '../../declarations';
 
-export const validateDevServer = (
-  config: d.ValidatedConfig,
-  diagnostics: d.Diagnostic[]
-): d.DevServerConfig | undefined => {
+export const validateDevServer = (config: d.ValidatedConfig, diagnostics: d.Diagnostic[]): d.DevServerConfig => {
   if ((config.devServer === null || (config.devServer as any)) === false) {
-    return undefined;
+    return {};
   }
 
   const { flags } = config;

src/declarations/stencil-public-compiler.ts

@@ -447,6 +447,7 @@ type RequireFields<T, K extends keyof T> = T & { [P in K]-?: T[P] };
  */
 type StrictConfigFields =
   | 'cacheDir'
+  | 'devServer'
   | 'flags'
   | 'hydratedFlag'
   | 'logger'

src/dev-server/index.ts

@@ -62,7 +62,7 @@ function startServer(
 
   let isActivelyBuilding = false;
   let lastBuildResults: CompilerBuildResults = null;
-  let devServer: DevServer = null;
+  let devServer: DevServer | null = null;
   let removeWatcher: BuildOnEventRemove = null;
   let closeResolve: () => void = null;
   let hasStarted = false;

src/testing/mocks.ts

@@ -34,6 +34,7 @@ export function mockValidatedConfig(overrides: Partial<ValidatedConfig> = {}): V
 
   return {
     ...baseConfig,
+    devServer: {},
     flags: createConfigFlags(),
     hydratedFlag: null,
     logger: mockLogger(),