Bump TypeScript to 3.8.3

This is a conservative bump to minimize the amount of changes needed in
tooling and dependencies. Version 3.8.3 was chosen because it is the
version that implements support for type-only exports and imports (i.e.
`import type { TFoo } from '@types/foo';`, which is the major source of
incompatibility with upgraded type definitions in newer dependency
versions.

Notable changes:
* As noted in jaegertracing#998, the `@types/react` version used to type-check
  `jaeger-ui` is a transitive dependency on version `16.8.7`, rather
  than the expected `18`. Unfortunately, both newer `16.x` type
  definitions as well as `18.x` type definitions are incompatible
  with various dependencies such as `antd`. As a workaround, downgrade
  the typing versions for now and add an explicit dependency on them
  to the project. Only index.tsx was using a React 18-specific API
  (createRoot), so convert it back to JS until the typings can be
  updated again.
* TypeScript now enforces that `composite` projects must also generate
  declaration files, since that's what the project references system
  uses. Make it so. This required a small adjustment to the ErrorMessage
  component, as the types of its Message and Details sub-components
  could not be reflected in this declaration file; this was trivially
  fixable by converting them to named exports instead (which is also
  consistent with other areas of the codebase).
* Make Plexus a project reference in the root tsconfig, per the
  longstanding todo and per the changes above.

Signed-off-by: Máté Szabó <[email protected]>

.eslintignore

@@ -1,3 +1,8 @@
 build
 coverage
 packages/plexus/src/LayoutManager/layout.worker*js*
+
+# Ignore generated files
+packages/jaeger-ui/index.d.ts
+packages/plexus/dist
+packages/plexus/lib

.prettierignore

@@ -0,0 +1,2 @@
+# Ignore generated files
+packages/jaeger-ui/index.d.ts

package.json

@@ -27,7 +27,7 @@
     "npm-run-all": "4.1.5",
     "prettier": "2.8.4",
     "rxjs-compat": "6.6.7",
-    "typescript": "3.5.3"
+    "typescript": "3.8.3"
   },
   "resolutions": {
     "**/lodash": "4.17.21"

packages/jaeger-ui/.gitignore

@@ -1,4 +1,5 @@
-tsconfig.lint.tsbuildinfo
+*.tsbuildinfo
+index.d.ts
 
 # Bundle size breakdown generated by rollup-plugin-visualizer
 stats.html

packages/jaeger-ui/index.html

@@ -48,6 +48,6 @@
       See https://vitejs.dev/guide/#index-html-and-project-root for more information
       on how asset references are managed by the build system.
     -->
-    <script type="module" src="/src/index.tsx"></script>
+    <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>

packages/jaeger-ui/package.json

@@ -18,6 +18,8 @@
     "@svgr/babel-plugin-transform-svg-component": "^6.5.1",
     "@svgr/babel-preset": "^6.5.1",
     "@types/match-sorter": "^2.3.0",
+    "@types/react": "16.8.7",
+    "@types/react-dom": "16.8.5",
     "@types/react-router-redux": "^5.0.21",
     "@types/react-window": "^1.8.0",
     "@types/redux-form": "^8.3.5",
@@ -112,7 +114,7 @@
     "tar": "6.1.13",
     "ts-key-enum": "^2.0.0",
     "tween-functions": "^1.2.0",
-    "typescript": "3.5.3",
+    "typescript": "3.8.3",
     "u-basscss": "2.0.1"
   },
   "scripts": {

packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.test.js

@@ -16,7 +16,7 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { Icon, notification } from 'antd';
 import ArchiveNotifier from './index';
-import ErrorMessage from '../../common/ErrorMessage';
+import { Details, Message } from '../../common/ErrorMessage';
 
 jest.mock('antd', () => {
   const originalModule = jest.requireActual('antd');
@@ -140,10 +140,10 @@ describe('<ArchiveNotifier>', () => {
       expect.objectContaining({
         key: 'ENotifiedState.Outcome',
         className: 'ArchiveNotifier--errorNotification',
-        description: <ErrorMessage.Details error="This is an error string" wrap />,
+        description: <Details error="This is an error string" wrap />,
         duration: null,
         icon: <Icon className="ArchiveNotifier--errorIcon" type="clock-circle-o" />,
-        message: <ErrorMessage.Message error="This is an error string" wrap />,
+        message: <Message error="This is an error string" wrap />,
         onClose: props.acknowledge,
       })
     );

packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.tsx

@@ -15,7 +15,7 @@
 import * as React from 'react';
 import { Icon, notification } from 'antd';
 
-import ErrorMessage from '../../common/ErrorMessage';
+import { Details, Message } from '../../common/ErrorMessage';
 import { TNil } from '../../../types';
 import { TraceArchive } from '../../../types/archive';
 
@@ -70,8 +70,8 @@ function updateNotification(oldState: ENotifiedState | null, nextState: ENotifie
       notification.warn({
         key: ENotifiedState.Outcome,
         className: 'ArchiveNotifier--errorNotification',
-        message: <ErrorMessage.Message error={error} wrap />,
-        description: <ErrorMessage.Details error={error} wrap />,
+        message: <Message error={error} wrap />,
+        description: <Details error={error} wrap />,
         duration: null,
         icon: <Icon type="clock-circle-o" className="ArchiveNotifier--errorIcon" />,
         onClose: acknowledge,

packages/jaeger-ui/src/components/common/ErrorMessage.test.js

@@ -15,7 +15,7 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 
-import ErrorMessage from './ErrorMessage';
+import ErrorMessage, { Details } from './ErrorMessage';
 
 describe('<ErrorMessage>', () => {
   let wrapper;
@@ -38,7 +38,7 @@ describe('<ErrorMessage>', () => {
   });
 
   it('<Details /> renders empty on string error', () => {
-    wrapper = shallow(<ErrorMessage.Details error={error} />);
+    wrapper = shallow(<Details error={error} />);
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -50,7 +50,7 @@ describe('<ErrorMessage>', () => {
       httpQuery: 'value-httpQuery',
       httpBody: 'value-httpBody',
     };
-    wrapper = shallow(<ErrorMessage.Details error={error} wrap />);
+    wrapper = shallow(<Details error={error} wrap />);
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -62,7 +62,7 @@ describe('<ErrorMessage>', () => {
       httpQuery: 'value-httpQuery',
       httpBody: 'value-httpBody',
     };
-    wrapper = shallow(<ErrorMessage.Details error={error} wrap wrapperClassName="TEST-WRAPPER-CLASS" />);
+    wrapper = shallow(<Details error={error} wrap wrapperClassName="TEST-WRAPPER-CLASS" />);
     expect(wrapper).toMatchSnapshot();
   });
 

packages/jaeger-ui/src/components/common/ErrorMessage.tsx

@@ -41,7 +41,7 @@ function ErrorAttr({ name, value }: { name: string; value: any }) {
   );
 }
 
-function Message(props: SubPartProps) {
+export function Message(props: SubPartProps) {
   const { className, error, wrap, wrapperClassName } = props;
   const cssClass = `ErrorMessage--msg ${className || ''}`;
   const msg =
@@ -62,7 +62,7 @@ Message.defaultProps = {
   wrapperClassName: undefined,
 };
 
-function Details(props: SubPartProps) {
+export function Details(props: SubPartProps) {
   const { className, error, wrap, wrapperClassName } = props;
   if (typeof error === 'string') {
     return null;
@@ -120,6 +120,3 @@ ErrorMessage.defaultProps = {
   detailClassName: undefined,
   messageClassName: undefined,
 };
-
-ErrorMessage.Message = Message;
-ErrorMessage.Details = Details;

packages/jaeger-ui/src/index.tsx → packages/jaeger-ui/src/index.jsx

@@ -35,7 +35,7 @@ import 'u-basscss/css/typography.css';
 
 const UI_ROOT_ID = 'jaeger-ui-root';
 
-const root = createRoot(document.getElementById(UI_ROOT_ID)!);
+const root = createRoot(document.getElementById(UI_ROOT_ID));
 
 if (typeof trackingContext === 'object' && trackingContext !== null) {
   trackingContext.context(() => {

packages/jaeger-ui/tsconfig.lint.json

@@ -19,11 +19,14 @@
 // For that to work, project references are used
 // (https://www.typescriptlang.org/docs/handbook/project-references.html) which
 // requires `composite: true` and `isolatedModules: false`.
+// Since project references use emitted declarations to determine whether the project
+// is up to date, a single index.d.ts file is specified as the output.
 {
   "extends": "./tsconfig",
   "compilerOptions": {
     "isolatedModules": false,
-    "composite": true
+    "composite": true,
+    "outFile": "index.d.ts"
   },
   "files": [
     "src/actions/jaeger-api.js",

packages/plexus/.gitignore

@@ -1,3 +1,5 @@
 dist
 lib
 src/LayoutManager/layout.worker*js*
+
+tsconfig.tsbuildinfo

packages/plexus/package.json

@@ -22,8 +22,8 @@
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.21.0",
     "@types/d3-zoom": "3.0.2",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "16.8.7",
+    "@types/react-dom": "16.8.5",
     "babel-loader": "9.1.2",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "clean-webpack-plugin": "4.0.0",
@@ -57,7 +57,7 @@
   },
   "scripts": {
     "_tasks/build/lib/js": "node_modules/.bin/babel src --extensions '.tsx,.js' --out-dir lib",
-    "_tasks/build/lib/types": "../../node_modules/.bin/tsc",
+    "_tasks/build/lib/types": "../../node_modules/.bin/tsc --build --force",
     "_tasks/build/umd": "webpack --mode $NODE_ENV --config webpack.umd.config.js",
     "_tasks/clean/dirs": "rimraf lib dist",
     "_tasks/clean/worker": "rimraf src/LayoutManager/layout.worker*js*",

packages/plexus/tsconfig.json

@@ -27,11 +27,13 @@
     "declaration": true,
     "emitDeclarationOnly": true,
     "jsx": "preserve",
-    "outDir": "lib"
+    "outDir": "lib",
+    "rootDir": "src",
+    "composite": true
   },
   "include": [
     "src",
     // easier to add `./typings` here than deal with typeRoots, paths, etc.
-    "../../typings"
+    "./typings"
   ]
 }

tsconfig.json

@@ -13,20 +13,18 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
     "jsx": "preserve"
   },
-  "include": [
-    // TODO(tiffon): Make plexus a project reference #348 is mergeds
-    "packages/plexus/demo",
-    "packages/plexus/src",
-    // easier to add `./typings` here than deal with typeRoots, paths, etc.
-    "typings"
-  ],
-  "exclude": ["./packages/plexus/src/LayoutManager/layout.worker.bundled.js"],
+  "include": [],
+  "files": [],
   "references": [
     {
       "path": "packages/jaeger-ui/tsconfig.lint.json"
+    },
+    {
+      "path": "packages/plexus/tsconfig.json"
     }
   ]
 }

yarn.lock

@@ -2559,10 +2559,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@^18.0.11":
-  version "18.0.11"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.11.tgz#321351c1459bc9ca3d216aefc8a167beec334e33"
-  integrity sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==
+"@types/react-dom@16.8.5":
+  version "16.8.5"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.5.tgz#3e3f4d99199391a7fb40aa3a155c8dd99b899cbd"
+  integrity sha512-idCEjROZ2cqh29+trmTmZhsBAUNQuYrF92JHKzZ5+aiFM1mlSk3bb23CK7HhYuOY75Apgap5y2jTyHzaM2AJGA==
   dependencies:
     "@types/react" "*"
 
@@ -2648,22 +2648,13 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*":
+"@types/react@*", "@types/[email protected]":
   version "16.8.7"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.7.tgz#7b1c0223dd5494f9b4501ad2a69aa6acb350a29b"
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/react@^18.0.28":
-  version "18.0.28"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.28.tgz#accaeb8b86f4908057ad629a26635fe641480065"
-  integrity sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
 "@types/recompose@^0.30.5":
   version "0.30.10"
   resolved "https://registry.yarnpkg.com/@types/recompose/-/recompose-0.30.10.tgz#b6ab1743c279f463f2b62ccb90b82433dcea63c5"
@@ -2691,11 +2682,6 @@
     "@types/node" "*"
     rollup "^2.42.3"
 
-"@types/scheduler@*":
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
-  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
-
 "@types/stack-utils@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
@@ -4709,11 +4695,6 @@ csstype@^2.2.0:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.3.tgz#b701e5968245bf9b08d54ac83d00b624e622a9fa"
 
-csstype@^3.0.2:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
-  integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
-
 cytoscape-dagre@^2.0.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/cytoscape-dagre/-/cytoscape-dagre-2.5.0.tgz#47d9835ab64dd0b596d9c94731f070282f82fc5a"
@@ -9097,6 +9078,7 @@ lodash.throttle@^4.0.0:
 [email protected]:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
+  integrity sha512-DhhGRshNS1aX6s5YdBE3njCCouPgnG29ebyHvImlZzXZf2SHgt+J08DHgytTPnpywNbO1Y8mNUFyQuIDBq2JZg==
 
 [email protected], lodash@^4.16.5, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1:
   version "4.17.21"
@@ -12322,6 +12304,7 @@ selfsigned@^1.10.8:
 [email protected]:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+  integrity sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==
 
 [email protected]:
   version "7.3.4"
@@ -13382,10 +13365,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typescript@3.5.3:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.3.tgz#c830f657f93f1ea846819e929092f5fe5983e977"
-  integrity sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g==
+typescript@3.8.3:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
+  integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
 
 "typescript@^3 || ^4":
   version "4.8.4"