internal: upgrade to TypeScript ^5.7.0

.github/workflows/pull_request.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v2 # checkout visx + this commit
       - uses: actions/setup-node@v2
         with:
-          node-version: '16.14.0'
+          node-version: '18.18.0'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/push.yml

@@ -14,7 +14,7 @@ jobs:
           fetch-depth: '0'
       - uses: actions/setup-node@v2
         with:
-          node-version: '16.14.0'
+          node-version: '18.18.0'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Get yarn cache directory path

config-eslint/base.js

@@ -70,7 +70,6 @@ module.exports = {
         'jest/no-export': 'error',
         'jest/no-focused-tests': 'error',
         'jest/no-identical-title': 'error',
-        'jest/no-if': 'error',
         'jest/no-jasmine-globals': 'error',
         'jest/no-standalone-expect': 'error',
         'jest/no-test-prefixes': 'error',

config-eslint/typescript.js

@@ -80,6 +80,7 @@ module.exports = {
           'error',
           { assertionStyle: 'as', objectLiteralTypeAssertions: 'allow-as-parameter' },
         ],
+        '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
         '@typescript-eslint/explicit-function-return-type': 'off', // Allow inferrence
         '@typescript-eslint/func-call-spacing': ['error', 'never'],
         '@typescript-eslint/member-delimiter-style': 'error',
@@ -95,9 +96,7 @@ module.exports = {
         '@typescript-eslint/no-for-in-array': 'error',
         '@typescript-eslint/no-misused-new': 'error',
         '@typescript-eslint/no-misused-promises': 'error',
-        '@typescript-eslint/no-parameter-properties': 'error',
         '@typescript-eslint/no-require-imports': 'error',
-        '@typescript-eslint/no-throw-literal': 'error',
         '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'error',
         '@typescript-eslint/no-unsafe-call': 'warn',
         '@typescript-eslint/no-unsafe-member-access': 'warn',

config-jest/setup/shims.js

@@ -1 +1,4 @@
 require('airbnb-js-shims/target/es2019');
+
+// Global mock for getComputedTextLength
+SVGElement.prototype.getComputedTextLength = () => 100;

jest.config.js

@@ -1,3 +1,4 @@
+/** @type {import('jest').Config} */
 module.exports = {
   bail: false,
   collectCoverageFrom: [
@@ -38,9 +39,10 @@ module.exports = {
   roots: ['<rootDir>/packages'],
   setupFiles: ['<rootDir>/config-jest/setup/shims.js', '<rootDir>/config-jest/setup/console.js'],
   testEnvironment: 'jsdom',
-  testURL: 'http://localhost',
-  timers: 'fake',
-  verbose: false,
+  testEnvironmentOptions: {
+    url: 'http://localhost',
+  },
+  verbose: true,
   testPathIgnorePatterns: ['<rootDir>/packages/visx-demo'],
   transformIgnorePatterns: [
     'node_modules/(?!(d3-(array|color|format|geo|interpolate|scale|time|time-format)|delaunator|internmap|robust-predicates)/)',

package.json

@@ -11,7 +11,7 @@
     "charts"
   ],
   "engines": {
-    "node": ">=16.13.0",
+    "node": ">=18.18.0",
     "yarn": ">=1.17.0"
   },
   "contributors": [
@@ -45,6 +45,7 @@
     "jest": "NODE_ENV=test jest --coverage --verbose",
     "lint": "eslint packages/ --quiet",
     "lint:fix": "yarn run lint --fix",
+    "postinstall": "yarn run ts ./scripts/postInstall.ts",
     "prepare-release": "git checkout master && git pull --rebase origin master && lerna updated",
     "release": "yarn run prepare-release && lerna publish --exact",
     "setup": "yarn run build",
@@ -71,20 +72,21 @@
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^24.0.18",
-    "@types/jsdom": "^12.2.4",
+    "@types/jest": "^29.5.14",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^22.10.2",
     "@types/node-fetch": "1.6.9",
-    "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "@typescript-eslint/parser": "^5.46.1",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
     "airbnb-js-shims": "^2.2.1",
     "babel-plugin-typescript-to-proptypes": "^2.0.0",
     "chalk": "4.1.0",
     "coveralls": "^3.0.6",
-    "eslint": "^8.30.0",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.1.7",
+    "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.1.1",
@@ -95,7 +97,8 @@
     "filesize": "6.1.0",
     "fs-jetpack": "^1.3.0",
     "husky": "^3.0.0",
-    "jest": "^25.5.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-mock-console": "^1.0.1",
     "lerna": "^7.0.2",
     "marked": "^0.7.0",
@@ -106,8 +109,8 @@
     "react-dom": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0",
     "regenerator-runtime": "^0.10.5",
     "timezone-mock": "^1.1.0",
-    "ts-node": "9.1.1",
-    "typescript": "^3.8.3"
+    "ts-node": "^10.9.1",
+    "typescript": "^5.7.0"
   },
   "packageManager": "[email protected]",
   "workspaces": {

packages/visx-annotation/src/components/Annotation.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import AnnotationContext from '../context/AnnotationContext';
-import { AnnotationContextType } from '../types';
+import type { AnnotationContextType } from '../types';
 
 export type AnnotationProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'> & {
   /** Annotation children (Subject, Label, Connector) */

packages/visx-annotation/src/components/CircleSubject.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import cx from 'classnames';
-import { AnnotationContextType } from '../types';
+import type { AnnotationContextType } from '../types';
 import AnnotationContext from '../context/AnnotationContext';
 
 export type CircleSubjectProps = Pick<AnnotationContextType, 'x' | 'y'> & {

packages/visx-annotation/src/components/Connector.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import cx from 'classnames';
-import { AnnotationContextType } from '../types';
+import type { AnnotationContextType } from '../types';
 import AnnotationContext from '../context/AnnotationContext';
 
 // @TODO

packages/visx-annotation/src/components/EditableAnnotation.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useCallback, useRef } from 'react';
-import useDrag, { UseDrag, HandlerArgs as DragHandlerArgs } from '@visx/drag/lib/useDrag';
-import { AnnotationContextType } from '../types';
+import type { UseDrag, HandlerArgs as DragHandlerArgs } from '@visx/drag/lib/useDrag';
+import useDrag from '@visx/drag/lib/useDrag';
+import type { AnnotationContextType } from '../types';
 import Annotation from './Annotation';
 
 export type EditableAnnotationProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'> & {

packages/visx-annotation/src/components/HtmlLabel.tsx

@@ -4,7 +4,7 @@ import useMeasure from 'react-use-measure';
 import { Group } from '@visx/group';
 import AnnotationContext from '../context/AnnotationContext';
 import AnchorLine from './LabelAnchorLine';
-import { LabelProps } from './Label';
+import type { LabelProps } from './Label';
 
 const wrapperStyle = { display: 'inline-block' };
 

packages/visx-annotation/src/components/Label.tsx

@@ -1,8 +1,10 @@
 import React, { useContext, useMemo } from 'react';
 import cx from 'classnames';
 import { Group } from '@visx/group';
-import { Text, TextProps, useText } from '@visx/text';
-import useMeasure, { Options as UseMeasureOptions } from 'react-use-measure';
+import type { TextProps } from '@visx/text';
+import { Text, useText } from '@visx/text';
+import type { Options as UseMeasureOptions } from 'react-use-measure';
+import useMeasure from 'react-use-measure';
 import AnnotationContext from '../context/AnnotationContext';
 import AnchorLine from './LabelAnchorLine';
 

packages/visx-annotation/src/components/LabelAnchorLine.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextProps } from '@visx/text';
+import type { TextProps } from '@visx/text';
 
 interface AnchorLineProps {
   anchorLineOrientation: 'horizontal' | 'vertical';

packages/visx-annotation/src/context/AnnotationContext.tsx

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { AnnotationContextType } from '../types';
+import type { AnnotationContextType } from '../types';
 
 const AnnotationContext = createContext<AnnotationContextType>({});
 

packages/visx-annotation/test/Label.test.tsx

@@ -19,24 +19,24 @@ describe('<Label />', () => {
 
   it('should render title text', () => {
     const { getByText } = renderLabel({
-      title: 'title test',
+      title: 'title',
       resizeObserverPolyfill: ResizeObserver,
     });
-    expect(getByText('title test')).toBeInTheDocument();
+    expect(getByText('title')).toBeInTheDocument();
   });
 
   it('should render subtitle text', () => {
     const { getByText } = renderLabel({
-      title: 'title test',
-      subtitle: 'subtitle test',
+      title: 'title',
+      subtitle: 'subtitle',
       resizeObserverPolyfill: ResizeObserver,
     });
-    expect(getByText('subtitle test')).toBeInTheDocument();
+    expect(getByText('subtitle')).toBeInTheDocument();
   });
 
   it('should render background', () => {
     const { container } = renderLabel({
-      title: 'title test',
+      title: 'title',
       showBackground: true,
       resizeObserverPolyfill: ResizeObserver,
     });
@@ -46,7 +46,7 @@ describe('<Label />', () => {
 
   it('should render anchor line', () => {
     const { container } = renderLabel({
-      title: 'title test',
+      title: 'title',
       showAnchorLine: true,
       resizeObserverPolyfill: ResizeObserver,
     });

packages/visx-axis/src/axis/Axis.tsx

@@ -2,12 +2,13 @@ import React from 'react';
 import cx from 'classnames';
 import { Group } from '@visx/group';
 import { getTicks, coerceNumber } from '@visx/scale';
-import { SharedAxisProps, AxisScale } from '../types';
+import type { SharedAxisProps, AxisScale } from '../types';
 import AxisRenderer from './AxisRenderer';
 import getTickPosition from '../utils/getTickPosition';
 import getTickFormatter from '../utils/getTickFormatter';
 import createPoint from '../utils/createPoint';
-import Orientation, { OrientationType } from '../constants/orientation';
+import type { OrientationType } from '../constants/orientation';
+import Orientation from '../constants/orientation';
 import getAxisRangePaddingConfig from '../utils/getAxisRangePaddingConfig';
 
 export type AxisProps<Scale extends AxisScale> = SharedAxisProps<Scale> & {

packages/visx-axis/src/axis/AxisBottom.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import Axis from './Axis';
 import Orientation from '../constants/orientation';
-import { SharedAxisProps, AxisScale } from '../types';
+import type { SharedAxisProps, AxisScale } from '../types';
 
 export const bottomTickLabelProps = {
   dy: '0.25em',

packages/visx-axis/src/axis/AxisLeft.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import Axis from './Axis';
 import Orientation from '../constants/orientation';
-import { SharedAxisProps, AxisScale } from '../types';
+import type { SharedAxisProps, AxisScale } from '../types';
 
 export const leftTickLabelProps = {
   dx: '-0.25em',

packages/visx-axis/src/axis/AxisRenderer.tsx

@@ -3,10 +3,10 @@ import cx from 'classnames';
 import { Line } from '@visx/shape';
 import { Text } from '@visx/text';
 
-import { TextProps } from '@visx/text/lib/Text';
+import type { TextProps } from '@visx/text/lib/Text';
 import getLabelTransform from '../utils/getLabelTransform';
 import Orientation from '../constants/orientation';
-import { AxisRendererProps, AxisScale } from '../types';
+import type { AxisRendererProps, AxisScale } from '../types';
 import Ticks from './Ticks';
 
 const defaultTextProps: Partial<TextProps> = {

packages/visx-axis/src/axis/AxisRight.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import Axis from './Axis';
 import Orientation from '../constants/orientation';
-import { SharedAxisProps, AxisScale } from '../types';
+import type { SharedAxisProps, AxisScale } from '../types';
 
 export type AxisRightProps<Scale extends AxisScale> = SharedAxisProps<Scale>;
 

packages/visx-axis/src/axis/AxisTop.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import Axis from './Axis';
 import Orientation from '../constants/orientation';
-import { SharedAxisProps, AxisScale } from '../types';
+import type { SharedAxisProps, AxisScale } from '../types';
 
 export type AxisTopProps<Scale extends AxisScale> = SharedAxisProps<Scale>;
 

packages/visx-axis/src/axis/Ticks.tsx

@@ -5,7 +5,7 @@ import { Group } from '@visx/group';
 import { Text } from '@visx/text';
 
 import Orientation from '../constants/orientation';
-import { TicksRendererProps, AxisScale } from '../types';
+import type { TicksRendererProps, AxisScale } from '../types';
 
 export default function Ticks<Scale extends AxisScale>({
   hideTicks,

packages/visx-axis/src/constants/orientation.ts

@@ -1,4 +1,4 @@
-import { ValueOf } from '@visx/scale';
+import type { ValueOf } from '@visx/scale';
 
 const Orientation = {
   top: 'top',

packages/visx-axis/src/types.ts

@@ -1,7 +1,7 @@
-import { D3Scale, NumberLike, ScaleInput, ValueOf } from '@visx/scale';
-import { TextProps } from '@visx/text/lib/Text';
-import { ReactNode, Ref, SVGProps } from 'react';
-import Orientation from './constants/orientation';
+import type { D3Scale, NumberLike, ScaleInput, ValueOf } from '@visx/scale';
+import type { TextProps } from '@visx/text/lib/Text';
+import type { ReactNode, Ref, SVGProps } from 'react';
+import type Orientation from './constants/orientation';
 
 // In order to plot values on an axis, output of the scale must be number.
 // Some scales return undefined.

packages/visx-axis/src/utils/getAxisRangePaddingConfig.ts

@@ -1,4 +1,4 @@
-import { SharedAxisProps } from '../types';
+import type { SharedAxisProps } from '../types';
 
 export const defaultAxisRangePadding = 0;
 

packages/visx-axis/src/utils/getLabelTransform.ts

@@ -1,6 +1,7 @@
-import { TextProps } from '@visx/text/lib/Text';
-import Orientation, { OrientationType } from '../constants/orientation';
-import { AxisScaleOutput } from '../types';
+import type { TextProps } from '@visx/text/lib/Text';
+import type { OrientationType } from '../constants/orientation';
+import Orientation from '../constants/orientation';
+import type { AxisScaleOutput } from '../types';
 
 export interface TransformArgs {
   labelOffset: number;

packages/visx-axis/src/utils/getTickFormatter.ts

@@ -1,5 +1,6 @@
-import { ScaleInput, toString } from '@visx/scale';
-import { TickFormatter, AxisScale } from '../types';
+import type { ScaleInput } from '@visx/scale';
+import { toString } from '@visx/scale';
+import type { TickFormatter, AxisScale } from '../types';
 
 /**
  * Returns a tick position for the given tick value

packages/visx-axis/src/utils/getTickPosition.ts

@@ -1,5 +1,5 @@
-import { ScaleInput } from '@visx/scale';
-import { AxisScale, AxisScaleOutput } from '../types';
+import type { ScaleInput } from '@visx/scale';
+import type { AxisScale, AxisScaleOutput } from '../types';
 
 /**
  * Create a function that returns a tick position for the given tick value

packages/visx-bounds/src/enhancers/withBoundingRects.tsx

@@ -1,5 +1,6 @@
 /* eslint react/no-did-mount-set-state: 0, react/no-find-dom-node: 0 */
-import React, { ComponentClass } from 'react';
+import type { ComponentClass } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
 
 const emptyRect = {

packages/visx-bounds/src/index.ts

@@ -1,4 +1,4 @@
-import { WithBoundingRectsProps as WithBoundingRectsPropsType } from './enhancers/withBoundingRects';
+import type { WithBoundingRectsProps as WithBoundingRectsPropsType } from './enhancers/withBoundingRects';
 
 export { default as withBoundingRects } from './enhancers/withBoundingRects';
 

packages/visx-bounds/test/withBoundingRects.test.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import fireEvent from '@testing-library/user-event';
 import { withBoundingRects } from '../src';