From 08fa6a604a8b1e9ff68005c8a5f4af6970e0549d Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Tue, 18 Jan 2022 00:08:58 +0100 Subject: [PATCH 1/4] bump typescript to 4.5 Signed-off-by: Patrik Oldsberg --- .changeset/clever-olives-shake.md | 40 ++++++++++++++++++ .changeset/stupid-baboons-hug.md | 42 +++++++++++++++++++ package.json | 2 +- packages/cli/package.json | 1 - .../templates/default-app/package.json.hbs | 3 +- tsconfig.json | 3 +- yarn.lock | 15 +++---- 7 files changed, 92 insertions(+), 14 deletions(-) create mode 100644 .changeset/clever-olives-shake.md create mode 100644 .changeset/stupid-baboons-hug.md diff --git a/.changeset/clever-olives-shake.md b/.changeset/clever-olives-shake.md new file mode 100644 index 0000000000..cc4aae4c3e --- /dev/null +++ b/.changeset/clever-olives-shake.md @@ -0,0 +1,40 @@ +--- +'@backstage/cli': minor +--- + +Removed the `typescript` dependency from the Backstage CLI in order to decouple the TypeScript version in Backstage projects. To keep using a specific TypeScript version, be sure to add an explicit dependency in your root `package.json`: + +```json + "dependencies": { + ... + "typescript": "~4.5.4", + } +``` + +We recommend using a `~` version range since TypeScript releases do not adhere to semver. + +It may be the case that you end up with errors if upgrade the TypeScript version. This is because there was a change to TypeScript not long ago that defaulted the type of errors caught in `catch` blocks to `unknown`. You can work around this by adding `"useUnknownInCatchVariables": false` to the `"compilerOptions"` in your `tsconfig.json`: + +```json + "compilerOptions": { + ... + "useUnknownInCatchVariables": false + } +``` + +Another option is to use the utilities from `@backstage/errors` to assert the type of errors caught in `catch` blocks: + +```ts +import { assertError, isError } from '@backstage/errors'; + +try { + ... +} catch (error) { + assertError(error); + ... + // OR + if (isError(error)) { + ... + } +} +``` diff --git a/.changeset/stupid-baboons-hug.md b/.changeset/stupid-baboons-hug.md new file mode 100644 index 0000000000..bd9afd2552 --- /dev/null +++ b/.changeset/stupid-baboons-hug.md @@ -0,0 +1,42 @@ +--- +'@backstage/create-app': patch +--- + +The app template has been updated to add an explicit dependency on `typescript` in the root `package.json`. This is because it was removed as a dependency of `@backstage/cli` in order to decouple the TypeScript versioning in Backstage projects. + +To apply this change in an existing app, add a `typescript` dependency to your `package.json` in the project root: + +```json + "dependencies": { + ... + "typescript": "~4.5.4", + } +``` + +We recommend using a `~` version range since TypeScript releases do not adhere to semver. + +It may be the case that you end up with errors if upgrade the TypeScript version. This is because there was a change to TypeScript not long ago that defaulted the type of errors caught in `catch` blocks to `unknown`. You can work around this by adding `"useUnknownInCatchVariables": false` to the `"compilerOptions"` in your `tsconfig.json`: + +```json + "compilerOptions": { + ... + "useUnknownInCatchVariables": false + } +``` + +Another option is to use the utilities from `@backstage/errors` to assert the type of errors caught in `catch` blocks: + +```ts +import { assertError, isError } from '@backstage/errors'; + +try { + ... +} catch (error) { + assertError(error); + ... + // OR + if (isError(error)) { + ... + } +} +``` diff --git a/package.json b/package.json index fe5876dd97..74a6c8bd50 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "prettier": "^2.2.1", "shx": "^0.3.2", "ts-node": "^10.4.0", - "typescript": "~4.3.5", + "typescript": "~4.5.4", "yarn-lock-check": "^1.0.5" }, "prettier": "@spotify/prettier-config", diff --git a/packages/cli/package.json b/packages/cli/package.json index 95cb4f70de..a3f49028b3 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -105,7 +105,6 @@ "sucrase": "^3.20.2", "tar": "^6.1.2", "terser-webpack-plugin": "^5.1.3", - "typescript": "^4.0.3", "util": "^0.12.3", "webpack": "^5.48.0", "webpack-dev-server": "4.3.1", diff --git a/packages/create-app/templates/default-app/package.json.hbs b/packages/create-app/templates/default-app/package.json.hbs index a73045c050..e7c39add25 100644 --- a/packages/create-app/templates/default-app/package.json.hbs +++ b/packages/create-app/templates/default-app/package.json.hbs @@ -34,7 +34,8 @@ "@spotify/prettier-config": "^12.0.0", "concurrently": "^6.0.0", "lerna": "^4.0.0", - "prettier": "^2.3.2" + "prettier": "^2.3.2", + "typescript": "~4.5.4" }, "prettier": "@spotify/prettier-config", "lint-staged": { diff --git a/tsconfig.json b/tsconfig.json index d6cb6f4c96..789743363d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,6 +8,7 @@ ], "compilerOptions": { "outDir": "dist-types", - "rootDir": "." + "rootDir": ".", + "useUnknownInCatchVariables": false } } diff --git a/yarn.lock b/yarn.lock index c8b506927b..a2ba33360a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -27648,21 +27648,16 @@ typescript-json-schema@^0.52.0: typescript "~4.4.4" yargs "^17.1.1" -typescript@^4.0.3, typescript@~4.5.2: - version "4.5.4" - resolved "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz#a17d3a0263bf5c8723b9c52f43c5084edf13c2e8" - integrity sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg== - -typescript@~4.3.5: - version "4.3.5" - resolved "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4" - integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA== - typescript@~4.4.4: version "4.4.4" resolved "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz#2cd01a1a1f160704d3101fd5a58ff0f9fcb8030c" integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA== +typescript@~4.5.2, typescript@~4.5.4: + version "4.5.4" + resolved "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz#a17d3a0263bf5c8723b9c52f43c5084edf13c2e8" + integrity sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg== + ua-parser-js@^0.7.18: version "0.7.28" resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31" From 0988dc5238452bca9d7dd654a1e42eee22d911c4 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Tue, 18 Jan 2022 09:54:09 +0100 Subject: [PATCH 2/4] switch out react-use imports Signed-off-by: Patrik Oldsberg --- plugins/azure-devops/src/hooks/useUserTeamIds.ts | 2 +- .../HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx | 2 +- .../src/components/GoCdBuildsComponent/GoCdBuildsComponent.tsx | 2 +- .../components/fields/EntityTagsPicker/EntityTagsPicker.tsx | 3 ++- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/plugins/azure-devops/src/hooks/useUserTeamIds.ts b/plugins/azure-devops/src/hooks/useUserTeamIds.ts index 878dbebdfe..87a069f50f 100644 --- a/plugins/azure-devops/src/hooks/useUserTeamIds.ts +++ b/plugins/azure-devops/src/hooks/useUserTeamIds.ts @@ -16,7 +16,7 @@ import { azureDevOpsApiRef } from '../api'; import { useApi } from '@backstage/core-plugin-api'; -import { useAsync } from 'react-use'; +import useAsync from 'react-use/lib/useAsync'; export function useUserTeamIds(userId: string | undefined): { teamIds?: string[]; diff --git a/plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx b/plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx index d9c1573182..3f9da083bb 100644 --- a/plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx +++ b/plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx @@ -43,7 +43,7 @@ import { import { Member, BazaarProject } from '../../types'; import { bazaarApiRef } from '../../api'; import { Alert } from '@material-ui/lab'; -import { useAsyncFn } from 'react-use'; +import useAsyncFn from 'react-use/lib/useAsyncFn'; import { catalogApiRef, catalogRouteRef, diff --git a/plugins/gocd/src/components/GoCdBuildsComponent/GoCdBuildsComponent.tsx b/plugins/gocd/src/components/GoCdBuildsComponent/GoCdBuildsComponent.tsx index 46e5d09260..eb8b311896 100644 --- a/plugins/gocd/src/components/GoCdBuildsComponent/GoCdBuildsComponent.tsx +++ b/plugins/gocd/src/components/GoCdBuildsComponent/GoCdBuildsComponent.tsx @@ -24,7 +24,7 @@ import { Page, } from '@backstage/core-components'; import { useApi, configApiRef } from '@backstage/core-plugin-api'; -import { useAsync } from 'react-use'; +import useAsync from 'react-use/lib/useAsync'; import { gocdApiRef } from '../../plugin'; import { GoCdBuildsTable } from '../GoCdBuildsTable/GoCdBuildsTable'; import { GoCdApiError, PipelineHistory } from '../../api/gocdApi.model'; diff --git a/plugins/scaffolder/src/components/fields/EntityTagsPicker/EntityTagsPicker.tsx b/plugins/scaffolder/src/components/fields/EntityTagsPicker/EntityTagsPicker.tsx index b21398a3f4..b0577acfeb 100644 --- a/plugins/scaffolder/src/components/fields/EntityTagsPicker/EntityTagsPicker.tsx +++ b/plugins/scaffolder/src/components/fields/EntityTagsPicker/EntityTagsPicker.tsx @@ -14,7 +14,8 @@ * limitations under the License. */ import React, { useState } from 'react'; -import { useAsync, useEffectOnce } from 'react-use'; +import useAsync from 'react-use/lib/useAsync'; +import useEffectOnce from 'react-use/lib/useEffectOnce'; import { CatalogEntitiesRequest } from '@backstage/catalog-client'; import { Entity, makeValidator } from '@backstage/catalog-model'; import { useApi } from '@backstage/core-plugin-api'; From 4e2245a7b2800fa77f7cbbce00181ff11b8eba0c Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Tue, 18 Jan 2022 10:16:05 +0100 Subject: [PATCH 3/4] update API reports Signed-off-by: Patrik Oldsberg --- packages/core-components/api-report.md | 72 +++++++++++++------------- plugins/catalog-react/api-report.md | 44 ++++++++-------- 2 files changed, 58 insertions(+), 58 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index bfe1064fed..923e9b2e3e 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -906,28 +906,29 @@ export const SidebarDivider: React_2.ComponentType< React_2.HTMLAttributes, HTMLHRElement >, + | 'id' + | 'color' + | 'translate' | 'hidden' | 'dir' | 'slot' | 'style' | 'title' - | 'color' - | 'translate' + | 'accessKey' + | 'draggable' + | 'lang' | 'prefix' | 'children' - | 'id' + | 'contentEditable' + | 'inputMode' + | 'tabIndex' | 'defaultChecked' | 'defaultValue' | 'suppressContentEditableWarning' | 'suppressHydrationWarning' - | 'accessKey' - | 'contentEditable' | 'contextMenu' - | 'draggable' - | 'lang' | 'placeholder' | 'spellCheck' - | 'tabIndex' | 'radioGroup' | 'role' | 'about' @@ -948,7 +949,6 @@ export const SidebarDivider: React_2.ComponentType< | 'results' | 'security' | 'unselectable' - | 'inputMode' | 'is' | 'aria-activedescendant' | 'aria-atomic' @@ -1268,28 +1268,29 @@ export const SidebarScrollWrapper: React_2.ComponentType< React_2.HTMLAttributes, HTMLDivElement >, + | 'id' + | 'color' + | 'translate' | 'hidden' | 'dir' | 'slot' | 'style' | 'title' - | 'color' - | 'translate' + | 'accessKey' + | 'draggable' + | 'lang' | 'prefix' | 'children' - | 'id' + | 'contentEditable' + | 'inputMode' + | 'tabIndex' | 'defaultChecked' | 'defaultValue' | 'suppressContentEditableWarning' | 'suppressHydrationWarning' - | 'accessKey' - | 'contentEditable' | 'contextMenu' - | 'draggable' - | 'lang' | 'placeholder' | 'spellCheck' - | 'tabIndex' | 'radioGroup' | 'role' | 'about' @@ -1310,7 +1311,6 @@ export const SidebarScrollWrapper: React_2.ComponentType< | 'results' | 'security' | 'unselectable' - | 'inputMode' | 'is' | 'aria-activedescendant' | 'aria-atomic' @@ -1543,28 +1543,29 @@ export const SidebarSpace: React_2.ComponentType< React_2.HTMLAttributes, HTMLDivElement >, + | 'id' + | 'color' + | 'translate' | 'hidden' | 'dir' | 'slot' | 'style' | 'title' - | 'color' - | 'translate' + | 'accessKey' + | 'draggable' + | 'lang' | 'prefix' | 'children' - | 'id' + | 'contentEditable' + | 'inputMode' + | 'tabIndex' | 'defaultChecked' | 'defaultValue' | 'suppressContentEditableWarning' | 'suppressHydrationWarning' - | 'accessKey' - | 'contentEditable' | 'contextMenu' - | 'draggable' - | 'lang' | 'placeholder' | 'spellCheck' - | 'tabIndex' | 'radioGroup' | 'role' | 'about' @@ -1585,7 +1586,6 @@ export const SidebarSpace: React_2.ComponentType< | 'results' | 'security' | 'unselectable' - | 'inputMode' | 'is' | 'aria-activedescendant' | 'aria-atomic' @@ -1817,28 +1817,29 @@ export const SidebarSpacer: React_2.ComponentType< React_2.HTMLAttributes, HTMLDivElement >, + | 'id' + | 'color' + | 'translate' | 'hidden' | 'dir' | 'slot' | 'style' | 'title' - | 'color' - | 'translate' + | 'accessKey' + | 'draggable' + | 'lang' | 'prefix' | 'children' - | 'id' + | 'contentEditable' + | 'inputMode' + | 'tabIndex' | 'defaultChecked' | 'defaultValue' | 'suppressContentEditableWarning' | 'suppressHydrationWarning' - | 'accessKey' - | 'contentEditable' | 'contextMenu' - | 'draggable' - | 'lang' | 'placeholder' | 'spellCheck' - | 'tabIndex' | 'radioGroup' | 'role' | 'about' @@ -1859,7 +1860,6 @@ export const SidebarSpacer: React_2.ComponentType< | 'results' | 'security' | 'unselectable' - | 'inputMode' | 'is' | 'aria-activedescendant' | 'aria-atomic' diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md index ac1c086f72..90fa193bfd 100644 --- a/plugins/catalog-react/api-report.md +++ b/plugins/catalog-react/api-report.md @@ -296,43 +296,40 @@ export const EntityRefLink: React_2.ForwardRefExoticComponent< Pick< EntityRefLinkProps, | 'replace' + | 'type' + | 'key' + | 'id' | 'media' + | 'state' + | 'color' + | 'display' + | 'translate' | 'hidden' | 'dir' | 'slot' | 'style' | 'title' - | 'color' - | 'underline' - | 'display' - | 'translate' + | 'target' + | 'accessKey' + | 'draggable' + | 'lang' + | 'className' | 'prefix' | 'children' - | 'key' - | 'id' - | 'variant' - | 'state' - | 'href' + | 'contentEditable' + | 'inputMode' + | 'tabIndex' + | 'underline' | 'download' + | 'href' | 'hrefLang' - | 'ping' - | 'rel' - | 'target' - | 'type' - | 'referrerPolicy' | 'defaultChecked' | 'defaultValue' | 'suppressContentEditableWarning' | 'suppressHydrationWarning' - | 'accessKey' - | 'className' - | 'contentEditable' | 'contextMenu' - | 'draggable' - | 'lang' | 'placeholder' | 'spellCheck' - | 'tabIndex' | 'radioGroup' | 'role' | 'about' @@ -353,7 +350,6 @@ export const EntityRefLink: React_2.ForwardRefExoticComponent< | 'results' | 'security' | 'unselectable' - | 'inputMode' | 'is' | 'aria-activedescendant' | 'aria-atomic' @@ -403,6 +399,7 @@ export const EntityRefLink: React_2.ForwardRefExoticComponent< | 'aria-valuemin' | 'aria-valuenow' | 'aria-valuetext' + | 'rel' | 'dangerouslySetInnerHTML' | 'onCopy' | 'onCopyCapture' @@ -564,13 +561,16 @@ export const EntityRefLink: React_2.ForwardRefExoticComponent< | 'onAnimationIterationCapture' | 'onTransitionEnd' | 'onTransitionEndCapture' + | 'ping' + | 'referrerPolicy' + | 'align' + | 'variant' | 'component' | 'classes' | 'innerRef' | 'noWrap' | 'gutterBottom' | 'paragraph' - | 'align' | 'variantMapping' | 'TypographyClasses' | 'entityRef' From d45cb13107ebc1a709f9a583065b39eb0cadea3f Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Tue, 18 Jan 2022 12:52:02 +0100 Subject: [PATCH 4/4] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Patrik Oldsberg Co-authored-by: Fredrik Adelöw --- .changeset/clever-olives-shake.md | 2 +- .changeset/stupid-baboons-hug.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/clever-olives-shake.md b/.changeset/clever-olives-shake.md index cc4aae4c3e..bb3641923d 100644 --- a/.changeset/clever-olives-shake.md +++ b/.changeset/clever-olives-shake.md @@ -13,7 +13,7 @@ Removed the `typescript` dependency from the Backstage CLI in order to decouple We recommend using a `~` version range since TypeScript releases do not adhere to semver. -It may be the case that you end up with errors if upgrade the TypeScript version. This is because there was a change to TypeScript not long ago that defaulted the type of errors caught in `catch` blocks to `unknown`. You can work around this by adding `"useUnknownInCatchVariables": false` to the `"compilerOptions"` in your `tsconfig.json`: +It may be the case that you end up with errors if you upgrade the TypeScript version. This is because there was a change to TypeScript not long ago that defaulted the type of errors caught in `catch` blocks to `unknown`. You can work around this by adding `"useUnknownInCatchVariables": false` to the `"compilerOptions"` in your `tsconfig.json`: ```json "compilerOptions": { diff --git a/.changeset/stupid-baboons-hug.md b/.changeset/stupid-baboons-hug.md index bd9afd2552..22b4ee508f 100644 --- a/.changeset/stupid-baboons-hug.md +++ b/.changeset/stupid-baboons-hug.md @@ -15,7 +15,7 @@ To apply this change in an existing app, add a `typescript` dependency to your ` We recommend using a `~` version range since TypeScript releases do not adhere to semver. -It may be the case that you end up with errors if upgrade the TypeScript version. This is because there was a change to TypeScript not long ago that defaulted the type of errors caught in `catch` blocks to `unknown`. You can work around this by adding `"useUnknownInCatchVariables": false` to the `"compilerOptions"` in your `tsconfig.json`: +It may be the case that you end up with errors if you upgrade the TypeScript version. This is because there was a change to TypeScript not long ago that defaulted the type of errors caught in `catch` blocks to `unknown`. You can work around this by adding `"useUnknownInCatchVariables": false` to the `"compilerOptions"` in your `tsconfig.json`: ```json "compilerOptions": {