chore: migrate to TS 4.5 (#27936)

* chore: migrate to TS 4.5

* fix: tweak type errors exposed in ts 4.5

* fix(react-conformance): tweak type errors exposed in ts 4.5

* fix(react-utilities): tweak type errors exposed in ts 4.5

* fix(.storybook): tweak type errors exposed in ts 4.5

* fix(merge-styles): tweak type errors exposed in ts 4.5

* fix(react): tweak type errors exposed in ts 4.5

* fix(eslint-plugin): tweak type errors exposed in ts 4.5

* generate changefiles

* fix(scripts/update-release-notes): tweak type errors exposed in ts 4.5

* fix(scripts/dangerjs): tweak type errors exposed in ts 4.5

* fix(scripts-gulp): tweak type errors exposed in ts 4.5

* fix(codemods): tweak type errors exposed in ts 4.5

* fix(global-context): tweak type errors exposed in ts 4.5

* fix(react-northstar): tweak type errors exposed in ts 4.5

* fix(utilities): tweak type errors exposed in ts 4.5

* fix(react-tabster): tweak type errors exposed in ts 4.5

* fix(api-docs): tweak type errors exposed in ts 4.5

* fix(react-focus): tweak type errors exposed in ts 4.5

* feat(test-bundles): provide better log when bundle task is invoked without pacakgeName

* fix(react-table): tweak type errors exposed in ts 4.5

* fix(ts-minbar-test-react): tweak type errors exposed in ts 4.5

* fix(react-experiments): tweak type errors exposed in ts 4.5

* fix(ts-minbar-test-react-components): tweak type errors exposed in ts 4.5

* fix(scripts-test-ssr): tweak type errors exposed in ts 4.5

* fix(react-monaco-editor): tweak type errors exposed in ts 4.5

* fix(react-experiments): tweak type errors exposed in ts 4.5

.storybook/preview.js

@@ -13,11 +13,11 @@ const realSetCurrentStory = window.__setCurrentStory;
 window.__setCurrentStory = function (categorization, story) {
   try {
     realSetCurrentStory(categorization, story);
-  } catch (e) {
+  } catch (err) {
     // Ignore API removed errors from cypress-storybook's call to forceReRender
     // https://github.com/storybookjs/storybook/blob/208d2f930b2b72a48355367d993e65e5b01be655/lib/core-client/src/preview/start.ts#L24
-    if (!(typeof e.message === 'string' && e.message.includes('was removed in storyStoreV7'))) {
-      throw e;
+    if (!(err instanceof Error && err.message.includes('was removed in storyStoreV7'))) {
+      throw err;
     }
   }
 };

apps/test-bundles/webpack.config.js

@@ -21,6 +21,7 @@ if (packageName === '@fluentui/react-northstar') {
   entries = buildEntries('@fluentui/react');
   entries['keyboard-key'] = buildEntry('@fluentui/keyboard-key');
 } else {
+  console.error('🚨 No packageName provided!');
   process.exit(1);
 }
 

apps/ts-minbar-test-react-components/src/index.ts

@@ -49,9 +49,9 @@ async function performTest() {
     await shEcho(`yarn --version`);
     await shEcho(`yarn tsc --version`);
     await shEcho(`yarn tsc --version`, tempPaths.testApp);
-  } catch (e) {
+  } catch (err) {
     console.error('Something went wrong setting up the test:');
-    console.error(e?.stack || e);
+    console.error(err instanceof Error ? err?.stack : err);
     process.exit(1);
   }
 

apps/ts-minbar-test-react/src/index.ts

@@ -51,9 +51,9 @@ async function performTest() {
     await shEcho(`yarn --version`);
     await shEcho(`yarn tsc --version`);
     await shEcho(`yarn tsc --version`, tempPaths.testApp);
-  } catch (e) {
+  } catch (err) {
     console.error('Something went wrong setting up the test:');
-    console.error(e?.stack || e);
+    console.error(err instanceof Error ? err?.stack : err);
     process.exit(1);
   }
 

change/@fluentui-api-docs-0023a435-7cc6-4f25-8285-a90e18b6d5c4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: bump api-extractor and tsdoc which enables us to remove --isolateModules hacks within our code",
+  "packageName": "@fluentui/api-docs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-codemods-d9f89563-1319-4694-9494-33bedc4f3ef2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: tweak type errors exposed in ts 4.5",
+  "packageName": "@fluentui/codemods",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-eslint-plugin-cfc95ba1-fba6-4e36-b98b-89187b51db4b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: tweak type errors exposed in ts 4.5",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-global-context-76b10924-4684-4fc4-b53f-c37823797978.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: tweak type errors exposed in ts 4.5",
+  "packageName": "@fluentui/global-context",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-merge-styles-703a5784-8032-4ff0-ab59-2582ee3475b8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: tweak type errors exposed in ts 4.5",
+  "packageName": "@fluentui/merge-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-172adf2e-e597-4972-b46a-f1ff56036436.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: tweak type errors exposed in ts 4.5",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-conformance-79931335-3fc5-4b81-860f-9f8d5e21d1db.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: tweak type errors exposed in ts 4.5",
+  "packageName": "@fluentui/react-conformance",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-experiments-6a5a932e-2ec1-4f99-b514-a74943006fdf.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: tweak type errors exposed in ts 4.5",
+  "packageName": "@fluentui/react-experiments",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-focus-51d1d6b1-4dcb-4b5d-909e-ecb02fd3ab97.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: tweak type errors exposed in ts 4.5",
+  "packageName": "@fluentui/react-focus",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-monaco-editor-c4fecf70-4975-4a70-b526-b9f97b5cb69e.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: tweak type errors exposed in ts 4.5",
+  "packageName": "@fluentui/react-monaco-editor",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-table-62559c4a-08ec-4659-a307-db5753a0e899.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: tweak type errors exposed in ts 4.5",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tabster-b994e1d9-a6bd-4b4c-94ca-e2d724bd9fbe.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: tweak type errors exposed in ts 4.5",
+  "packageName": "@fluentui/react-tabster",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-utilities-078f8a6c-cb92-4524-88a4-5582dfb0850f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: tweak type errors exposed in ts 4.5",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-utilities-cbf9c1ed-b949-4ecb-8e7e-799bc3bd795d.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: tweak type errors exposed in ts 4.5",
+  "packageName": "@fluentui/utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

package.json

@@ -96,7 +96,9 @@
     "@griffel/webpack-loader": "2.1.8",
     "@jest/reporters": "28.1.3",
     "@mdx-js/loader": "1.6.22",
-    "@microsoft/api-extractor": "7.18.1",
+    "@microsoft/api-extractor": "7.22.2",
+    "@microsoft/api-extractor-model": "7.17.1",
+    "@microsoft/tsdoc": "0.14.1",
     "@microsoft/eslint-plugin-sdl": "0.1.9",
     "@microsoft/load-themed-styles": "1.10.26",
     "@microsoft/loader-load-themed-styles": "2.0.17",
@@ -343,7 +345,7 @@
     "tsconfig-paths": "4.1.0",
     "tsconfig-paths-webpack-plugin": "4.0.0",
     "tslib": "2.4.1",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "vinyl": "2.2.0",
     "vrscreenshotdiff": "0.0.17",
     "webpack": "5.83.1",

packages/api-docs/package.json

@@ -21,8 +21,8 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@microsoft/api-extractor-model": "7.13.3",
-    "@microsoft/tsdoc": "0.13.2",
+    "@microsoft/api-extractor-model": "7.17.1",
+    "@microsoft/tsdoc": "0.14.1",
     "fs-extra": "^8.1.0"
   }
 }

packages/api-docs/src/pageJson.ts

@@ -1,5 +1,4 @@
-import { ApiItem, ApiDocumentedItem, ApiModel } from '@microsoft/api-extractor-model';
-import { ApiItemKind } from './const-enum-overrides';
+import { ApiItem, ApiDocumentedItem, ApiModel, ApiItemKind } from '@microsoft/api-extractor-model';
 import { findInlineTagByName } from './rendering';
 import { ICollectedData } from './types-private';
 import { ITableJson, IPageJson, PageGroups } from './types';

packages/api-docs/src/rendering.ts

@@ -11,9 +11,9 @@ import {
   DocNodeContainer,
   DocCodeSpan,
   DocBlock,
+  DocNodeKind,
 } from '@microsoft/tsdoc';
 import { ApiItem, ApiModel, ExcerptToken, IExcerptTokenRange } from '@microsoft/api-extractor-model';
-import { DocNodeKind } from './const-enum-overrides';
 import { ILinkToken } from './types';
 import { ICollectedData } from './types-private';
 

packages/api-docs/src/tableJson.ts

@@ -7,8 +7,8 @@ import {
   ApiDeclaredItem,
   HeritageType,
   ApiItem,
+  ApiItemKind,
 } from '@microsoft/api-extractor-model';
-import { ApiItemKind } from './const-enum-overrides';
 import { ITableJson, ITableRowJson } from './types';
 import { renderDocNodeWithoutInlineTag, getTokenHyperlinks, renderNodes } from './rendering';
 import { ICollectedData } from './types-private';

packages/api-docs/src/tableRowJson.ts

@@ -9,8 +9,8 @@ import {
   ApiProperty,
   ApiConstructor,
   ApiMethod,
+  ApiItemKind,
 } from '@microsoft/api-extractor-model';
-import { ApiItemKind } from './const-enum-overrides';
 import { ICollectedData } from './types-private';
 import { ITableRowJson, IEnumTableRowJson } from './types';
 import {

packages/bundle-size/src/utils/collectLocalReport.js

@@ -26,16 +26,21 @@ async function readReportForPackage(reportFile) {
     );
   }
 
-  const packageName = path.basename(packageRoot);
-  const packageReportJSON = await fs.readFile(reportFilePath, 'utf8');
-
   try {
+    const packageName = path.basename(packageRoot);
+    const packageReportJSON = await fs.readFile(reportFilePath, 'utf8');
     /** @type {BuildResult[]} */
     const packageReport = JSON.parse(packageReportJSON);
 
     return { packageName, packageReport };
-  } catch (e) {
-    throw new Error([`Failed to read JSON from "${reportFilePath}":`, e.toString()].join('\n'));
+  } catch (err) {
+    if (err instanceof SyntaxError) {
+      throw new Error([`Invalid JSON in "${reportFilePath}"`, err.toString()].join('\n'));
+    }
+    if (err instanceof Error) {
+      throw new Error([`Failed to read JSON from "${reportFilePath}":`, err.toString()].join('\n'));
+    }
+    throw new Error(`Unexpected error: ${err}`);
   }
 }
 

packages/bundle-size/src/utils/collectLocalReport.test.js

@@ -121,6 +121,6 @@ describe('collectLocalReport', () => {
     await fs.writeFile(reportBPath, JSON.stringify(reportB));
     await fs.writeFile(reportCPath, JSON.stringify(reportC));
 
-    await expect(collectLocalReport({ root: rootDir })).rejects.toThrow(/Failed to read JSON/);
+    await expect(collectLocalReport({ root: rootDir })).rejects.toThrow(/Invalid JSON/);
   });
 });

packages/bundle-size/src/utils/getRemoteReport.js

@@ -26,9 +26,11 @@ module.exports = async function getRemoteReport(branch, attempt = 1) {
     const { commitSHA } = result[result.length - 1];
 
     return { commitSHA, remoteReport };
-  } catch (e) {
-    console.log([chalk.yellow('[w]'), e.toString()].join(' '));
-    console.log([chalk.yellow('[w]'), 'Failed to fetch report from the remote. Retrying...'].join(' '));
+  } catch (err) {
+    if (err instanceof Error) {
+      console.log([chalk.yellow('[w]'), err.toString()].join(' '));
+      console.log([chalk.yellow('[w]'), 'Failed to fetch report from the remote. Retrying...'].join(' '));
+    }
 
     if (attempt >= MAX_HTTP_ATTEMPT_COUNT) {
       console.error(

packages/codemods/src/codeMods/utilities/helpers/propHelpers.ts

@@ -255,6 +255,7 @@ function tryInsertExistingDecomposedProp(oldProp: string, statement: VariableSta
   const decompObject = statement.getFirstDescendantByKind(SyntaxKind.ObjectBindingPattern);
   if (decompObject) {
     let objectText = decompObject.getText();
+    // eslint-disable-next-line deprecation/deprecation
     objectText = objectText.substr(0, 1) + ` ${oldProp},` + objectText.substr(1);
     decompObject.replaceWithText(objectText);
     return true;

packages/eslint-plugin/src/rules/ban-instanceof-html-element/index.js

@@ -61,6 +61,7 @@ const constructorNames = [
   'HTMLDataElement',
   'HTMLDataListElement',
   'HTMLDetailsElement',
+  // @ts-expect-error - NOTE: dialog is not supported in safari 14, also it was removed from lib-dom starting typescript 4.4
   'HTMLDialogElement',
   'HTMLDivElement',
   'HTMLDListElement',