feat(typescript): add support for typescript 4.9 (#3863)

this commit increments typescript to v4.9 for the project, and updates
the dependabot configuration to not create a pull request for a version
of typescript newer than 4.9.

the `@types/node` package for the karma test suite is updated as a part
of this commit, as the currently installed version has problems being
parsed by v4.9. this is fixed in the type declarations themselves, hence
the upgrade.

the remainder of the changes in this pr are for fixing type errors where
there is no overlap between two types being compared. this occurs in two
scenarios:

  1. parsing css. in the css parser, there were three cases where an
     overlap did not occur in a comparison. in reading through the code,
     i cannot find a scenario where such a value could be returned such
     that the comparison is valid. as a result, such comparisons are
     removed.

     prior to removing these comparisons, an alternative (else block)
     was written with a logging statement in it. stencil's unit/karma
     tests were run, as well as the ionic framework's tests with this
     branch installed. the logging statement was never triggered. that
     in addition to the rich testing available for css, makes us
     confident that this change is safe to make.

  2. validation of a configuration flag. this occurred for the dev
     server, hydration config, and service worker config. these
     fields _should_ be properly set via type checking. if users are
     providing invalid values, the logic has been updated to be
     type-safe while setting reasonable default values

.github/dependabot.yml

@@ -15,7 +15,7 @@ updates:
       - dependency-name: '@types/node'
         versions: ['17', '18']
       - dependency-name: 'typescript'
-        versions: ['>=4.9']
+        versions: ['>=4.10', '>=5.0']
       # disable Jest updates until the new testing architecture is in place
       - dependency-name: '@types/jest'
         versions: ['>=28']

package.json

@@ -122,7 +122,7 @@
     "semver": "^7.3.7",
     "sizzle": "^2.3.6",
     "terser": "5.6.1",
-    "typescript": "4.8.4",
+    "typescript": "4.9.3",
     "webpack": "^4.46.0",
     "ws": "7.4.6"
   },

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

@@ -161,6 +161,14 @@ describe('validateDevServer', () => {
     expect(config.devServer.historyApiFallback.index).toBe('index.html');
   });
 
+  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;
+    const { config } = validateConfig(inputConfig, mockLoadConfigInit());
+    expect(config.devServer.historyApiFallback).toBeDefined();
+    expect(config.devServer.historyApiFallback.index).toBe('index.html');
+  });
+
   it('should set historyApiFallback', () => {
     inputConfig.devServer = { ...inputDevServerConfig, historyApiFallback: {} };
     const { config } = validateConfig(inputConfig, mockLoadConfigInit());

src/compiler/config/test/validate-hydrated.spec.ts

@@ -0,0 +1,37 @@
+import * as d from '@stencil/core/declarations';
+
+import { validateHydrated } from '../validate-hydrated';
+
+describe('validate-hydrated', () => {
+  describe('validateHydrated', () => {
+    let inputConfig: d.UnvalidatedConfig;
+    let inputHydrateFlagConfig: d.HydratedFlag;
+
+    beforeEach(() => {
+      inputHydrateFlagConfig = {};
+      inputConfig = {
+        hydratedFlag: inputHydrateFlagConfig,
+      };
+    });
+
+    it.each([null, false])('returns undefined for hydratedFlag=%s', (badValue) => {
+      // this test explicitly checks for a bad value in the stencil.config file, hence the type assertion
+      (inputConfig.hydratedFlag as any) = badValue;
+      const actual = validateHydrated(inputConfig);
+      expect(actual).toBeUndefined();
+    });
+
+    it.each([[], true])('returns a default value when hydratedFlag=%s', (badValue) => {
+      // this test explicitly checks for a bad value in the stencil.config file, hence the type assertion
+      (inputConfig.hydratedFlag as any) = badValue;
+      const actual = validateHydrated(inputConfig);
+      expect(actual).toEqual<d.HydratedFlag>({
+        hydratedValue: 'inherit',
+        initialValue: 'hidden',
+        name: 'hydrated',
+        property: 'visibility',
+        selector: 'class',
+      });
+    });
+  });
+});

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

@@ -100,8 +100,10 @@ export const validateDevServer = (
     devServer.protocol = devServer.https ? 'https' : addressProtocol ? addressProtocol : 'http';
   }
 
-  if (devServer.historyApiFallback !== null && devServer.historyApiFallback !== false) {
-    devServer.historyApiFallback = devServer.historyApiFallback || {};
+  if (devServer.historyApiFallback !== null) {
+    if (Array.isArray(devServer.historyApiFallback) || typeof devServer.historyApiFallback !== 'object') {
+      devServer.historyApiFallback = {};
+    }
 
     if (!isString(devServer.historyApiFallback.index)) {
       devServer.historyApiFallback.index = 'index.html';

src/compiler/config/validate-hydrated.ts

@@ -12,11 +12,12 @@ export const validateHydrated = (config: UnvalidatedConfig): HydratedFlag | unde
   /**
    * If `config.hydratedFlag` is set to `null` that is an explicit signal that we
    * should _not_ create a default configuration when validating and should instead
-   * just return `undefined`.
+   * just return `undefined`. It may also have been set to `false`; this is an invalid
+   * value as far as the type system is concerned, but users may ignore this.
    *
    * See {@link HydratedFlag} for more details.
    */
-  if (config.hydratedFlag === null || config.hydratedFlag === false) {
+  if (config.hydratedFlag === null || (config.hydratedFlag as unknown as boolean) === false) {
     return undefined;
   }
 

src/compiler/config/validate-service-worker.ts

@@ -17,9 +17,7 @@ export const validateServiceWorker = (config: d.ValidatedConfig, outputTarget: d
     return;
   }
 
-  if (outputTarget.serviceWorker === true) {
-    outputTarget.serviceWorker = {};
-  } else if (!outputTarget.serviceWorker && config.devMode) {
+  if (!outputTarget.serviceWorker && config.devMode) {
     outputTarget.serviceWorker = null;
     return;
   }

src/compiler/style/css-parser/parse-css.ts

@@ -1,5 +1,5 @@
 import type * as d from '../../../declarations';
-import { CssNode, CssNodeType, CssParsePosition, ParseCssResults } from './css-parse-declarations';
+import { type CssNode, type CssParsePosition, type ParseCssResults, CssNodeType } from './css-parse-declarations';
 
 export const parseCss = (css: string, filePath?: string): ParseCssResults => {
   let lineno = 1;
@@ -104,10 +104,8 @@ export const parseCss = (css: string, filePath?: string): ParseCssResults => {
     comments(rules);
 
     while (css.length && css.charAt(0) !== '}' && (node = atrule() || rule())) {
-      if (node !== false) {
-        rules.push(node);
-        comments(rules);
-      }
+      rules.push(node);
+      comments(rules);
     }
     return rules;
   };
@@ -122,9 +120,7 @@ export const parseCss = (css: string, filePath?: string): ParseCssResults => {
     let c;
     rules = rules || [];
     while ((c = comment())) {
-      if (c !== false) {
-        rules.push(c);
-      }
+      rules.push(c);
     }
     return rules;
   };
@@ -202,10 +198,8 @@ export const parseCss = (css: string, filePath?: string): ParseCssResults => {
     // declarations
     let decl;
     while ((decl = declaration())) {
-      if (decl !== false) {
-        decls.push(decl);
-        comments(decls);
-      }
+      decls.push(decl);
+      comments(decls);
     }
 
     if (!close()) return error(`missing '}'`);

src/compiler/sys/dependencies.json

@@ -39,6 +39,7 @@
         "compiler/lib.es2019.array.d.ts",
         "compiler/lib.es2019.d.ts",
         "compiler/lib.es2019.full.d.ts",
+        "compiler/lib.es2019.intl.d.ts",
         "compiler/lib.es2019.object.d.ts",
         "compiler/lib.es2019.string.d.ts",
         "compiler/lib.es2019.symbol.d.ts",

test/bundler/package.json

@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "@types/karma": "^6.3.3",
+    "@types/node": "^14.18.34",
     "karma": "^6.3.17",
     "karma-chrome-launcher": "^3.1.0",
     "karma-jasmine": "^5.0.0",

test/karma/package.json

@@ -27,7 +27,7 @@
   },
   "devDependencies": {
     "@stencil/sass": "^1.3.2",
-    "@types/node": "^14.18.12",
+    "@types/node": "^14.18.34",
     "bootstrap": "^4.5.1",
     "karma": "^6.4.1",
     "karma-browserstack-launcher": "^1.6.0",