feat(typescript): typescript 4.5 support

package.json

@@ -123,7 +123,7 @@
     "sizzle": "^2.3.6",
     "terser": "5.6.1",
     "tslib": "^2.1.0",
-    "typescript": "4.3.5",
+    "typescript": "4.5.4",
     "webpack": "^4.46.0",
     "ws": "7.4.6"
   },

scripts/tsconfig.json

@@ -15,6 +15,7 @@
     "pretty": true,
     "target": "es2017",
     "incremental": false,
+    "useUnknownInCatchVariables": true
   },
   "include": [
     "**/*.ts"

src/client/client-patch-browser.ts

@@ -21,6 +21,10 @@ export const patchBrowser = (): Promise<d.CustomElementsDefineOptions> => {
 
   if (BUILD.profile && !performance.mark) {
     // not all browsers support performance.mark/measure (Safari 10)
+    // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,
+    // simply stub the implementations out.
+    // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)
+    // @ts-ignore
     performance.mark = performance.measure = () => {
       /*noop*/
     };

src/compiler/sys/dependencies.json

@@ -52,6 +52,7 @@
         "compiler/lib.es2020.symbol.wellknown.d.ts",
         "compiler/lib.es2021.d.ts",
         "compiler/lib.es2021.full.d.ts",
+        "compiler/lib.es2021.intl.d.ts",
         "compiler/lib.es2021.promise.d.ts",
         "compiler/lib.es2021.string.d.ts",
         "compiler/lib.es2021.weakref.d.ts",

src/compiler/sys/typescript/typescript-sys.ts

@@ -83,6 +83,7 @@ export const patchTsSystemFileSystem = (
 
   tsSys.readDirectory = (path, extensions, exclude, include, depth) => {
     const cwd = stencilSys.getCurrentDirectory();
+    // TODO(STENCIL-344): Replace `matchFiles` with a function that is publicly exposed
     return (ts as any).matchFiles(
       path,
       extensions,

src/compiler/transformers/style-imports.ts

@@ -70,12 +70,13 @@ const updateEsmStyleImportPath = (
         const orgImportPath = n.moduleSpecifier.text;
         const importPath = getStyleImportPath(transformOpts, tsSourceFile, cmp, style, orgImportPath);
 
-        statements[i] = ts.updateImportDeclaration(
+        statements[i] = ts.factory.updateImportDeclaration(
           n,
           n.decorators,
           n.modifiers,
           n.importClause,
-          ts.createStringLiteral(importPath)
+          ts.factory.createStringLiteral(importPath),
+          undefined
         );
         break;
       }

src/compiler/transformers/test/parse-props.spec.ts

@@ -168,7 +168,7 @@ describe('parse props', () => {
               location: 'global',
             },
           },
-          resolved: 'any',
+          resolved: 'Object',
           original: 'Object',
         },
         docs: {

src/compiler/transformers/transform-utils.ts

@@ -595,9 +595,12 @@ export const createImportStatement = (importFnNames: string[], importPath: strin
       importFnName = splt[0];
     }
 
-    return ts.createImportSpecifier(
-      typeof importFnName === 'string' && importFnName !== importAs ? ts.createIdentifier(importFnName) : undefined,
-      ts.createIdentifier(importAs)
+    return ts.factory.createImportSpecifier(
+      false,
+      typeof importFnName === 'string' && importFnName !== importAs
+        ? ts.factory.createIdentifier(importFnName)
+        : undefined,
+      ts.factory.createIdentifier(importAs)
     );
   });
 

src/compiler/transformers/update-stencil-core-import.ts

@@ -25,17 +25,21 @@ export const updateStencilCoreImports = (updatedCoreImportPath: string): ts.Tran
                 const keepImports = origImports.map((e) => e.getText()).filter((name) => KEEP_IMPORTS.has(name));
 
                 if (keepImports.length > 0) {
-                  const newImport = ts.updateImportDeclaration(
+                  const newImport = ts.factory.updateImportDeclaration(
                     s,
                     undefined,
                     undefined,
-                    ts.createImportClause(
+                    ts.factory.createImportClause(
+                      false,
                       undefined,
-                      ts.createNamedImports(
-                        keepImports.map((name) => ts.createImportSpecifier(undefined, ts.createIdentifier(name)))
+                      ts.factory.createNamedImports(
+                        keepImports.map((name) =>
+                          ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier(name))
+                        )
                       )
                     ),
-                    ts.createStringLiteral(updatedCoreImportPath)
+                    ts.factory.createStringLiteral(updatedCoreImportPath),
+                    undefined
                   );
                   newStatements.push(newImport);
                 }

src/dev-server/dev-server-client/app-update.ts

@@ -65,7 +65,7 @@ const appUpdate = (win: d.DevClientWindow, config: d.DevClientConfig, buildResul
       // then let's refresh the page from the root of the server
       appReset(win, config, () => {
         logReload(`Initial load`);
-        win.location.reload(true);
+        win.location.reload();
       });
       return;
     }
@@ -111,7 +111,7 @@ const appHmr = (win: Window, hmr: d.HotModuleReplacement) => {
   }
 
   if (shouldWindowReload) {
-    win.location.reload(true);
+    win.location.reload();
     return;
   }
 

src/dev-server/dev-server-client/client-web-socket.ts

@@ -76,7 +76,7 @@ export const initClientWebSocket = (win: d.DevClientWindow, config: d.DevClientC
         clearInterval(requestBuildResultsTmrId);
 
         if (win['s-build-id'] !== msg.buildResults.buildId) {
-          win.location.reload(true);
+          win.location.reload();
         }
         win['s-build-id'] = msg.buildResults.buildId;
         return;

src/hydrate/runner/window-initialize.ts

@@ -47,6 +47,8 @@ export function initializeWindow(
   }
 
   try {
+    // TODO(STENCIL-345) - Evaluate reconciling MockWindow, Window differences
+    // @ts-ignore
     win.customElements = null;
   } catch (e) {}
 

src/mock-doc/custom-element-registry.ts

@@ -81,14 +81,14 @@ export class MockCustomElementRegistry implements CustomElementRegistry {
     }
   }
 
-  whenDefined(tagName: string) {
+  whenDefined(tagName: string): Promise<CustomElementConstructor> {
     tagName = tagName.toLowerCase();
 
     if (this.__registry != null && this.__registry.has(tagName) === true) {
-      return Promise.resolve();
+      return this.__registry.get(tagName).cstr;
     }
 
-    return new Promise<void>((resolve) => {
+    return new Promise<CustomElementConstructor>((resolve) => {
       if (this.__whenDefined == null) {
         this.__whenDefined = new Map();
       }

src/mock-doc/performance.ts

@@ -40,11 +40,21 @@ export class MockPerformance implements Performance {
     return [] as any;
   }
 
-  mark() {
+  // Stencil's implementation of `mark` is non-compliant with the `Performance` interface. Because Stencil will
+  // instantiate an instance of this class and may attempt to assign it to a variable of type `Performance`, the return
+  // type must match the `Performance` interface (rather than typing this function as returning `void` and ignoring the
+  // associated errors returned by the type checker)
+  // @ts-ignore
+  mark(): PerformanceMark {
     //
   }
 
-  measure() {
+  // Stencil's implementation of `measure` is non-compliant with the `Performance` interface. Because Stencil will
+  // instantiate an instance of this class and may attempt to assign it to a variable of type `Performance`, the return
+  // type must match the `Performance` interface (rather than typing this function as returning `void` and ignoring the
+  // associated errors returned by the type checker)
+  // @ts-ignore
+  measure(): PerformanceMeasure {
     //
   }
 

src/mock-doc/window.ts

@@ -802,6 +802,8 @@ export function cloneWindow(srcWin: Window, opts: { customElementProxy?: boolean
 
   const clonedWin = new MockWindow(false);
   if (!opts.customElementProxy) {
+    // TODO(STENCIL-345) - Evaluate reconciling MockWindow, Window differences
+    // @ts-ignore
     srcWin.customElements = null;
   }
 

src/runtime/test/tsconfig.json

@@ -18,6 +18,7 @@
     "noUnusedParameters": true,
     "pretty": true,
     "target": "es2017",
+    "useUnknownInCatchVariables": true,
     "baseUrl": ".",
     "paths": {
       "@stencil/core": ["../../index.ts"],

src/runtime/vdom/test/tsconfig.json

@@ -17,6 +17,7 @@
     "noUnusedParameters": true,
     "pretty": true,
     "target": "es2017",
+    "useUnknownInCatchVariables": true,
     "baseUrl": ".",
     "paths": {
       "@stencil/core": ["../../../index.ts"],

src/testing/tsconfig.internal.json

@@ -21,6 +21,7 @@
     "noUnusedParameters": true,
     "pretty": true,
     "target": "es2017",
+    "useUnknownInCatchVariables": true,
     "baseUrl": ".",
     "paths": {
       "@stencil/core/cli": [
@@ -46,4 +47,4 @@
       ]
     }
   }
-}
+}

test/browser-compile/tsconfig.json

@@ -20,6 +20,7 @@
     "noUnusedParameters": true,
     "pretty": true,
     "target": "es2017",
+    "useUnknownInCatchVariables": true,
     "baseUrl": ".",
     "paths": {
       "@stencil/core/testing": [
@@ -39,4 +40,4 @@
   "include": [
     "src"
   ]
-}
+}

test/end-to-end/tsconfig.json

@@ -21,6 +21,7 @@
     "noUnusedParameters": true,
     "pretty": true,
     "target": "es2017",
+    "useUnknownInCatchVariables": true,
     "baseUrl": ".",
     "paths": {
       "@stencil/core": [
@@ -40,4 +41,4 @@
   "include": [
     "src"
   ]
-}
+}

test/hello-vdom/tsconfig.json

@@ -19,6 +19,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "target": "es2017",
+    "useUnknownInCatchVariables": true,
     "baseUrl": ".",
     "paths": {
       "@stencil/core": ["../../internal"],

test/hello-world/tsconfig.parent.json

@@ -19,6 +19,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "target": "es2017",
+    "useUnknownInCatchVariables": true,
     "baseUrl": ".",
     "paths": {
       "@stencil/core": ["../../internal"],

test/ionic-app/tsconfig.json

@@ -12,6 +12,7 @@
     "noUnusedParameters": true,
     "jsx": "react",
     "jsxFactory": "h",
+    "useUnknownInCatchVariables": true,
     "baseUrl": ".",
     "paths": {
       "@stencil/core": ["../../internal"],

test/jest-spec-runner/tsconfig.json

@@ -19,6 +19,7 @@
     "noUnusedParameters": true,
     "pretty": true,
     "target": "es2017",
+    "useUnknownInCatchVariables": true,
     "baseUrl": ".",
     "paths": {
       "@stencil/core": ["../../internal"],