Toolchain updates. Node 18, TypeScript 5, Next 13

.eslintignore

@@ -1,4 +1,3 @@
-.happo/
 .next/
 coverage/
 node_modules/

.github/workflows/pull_request.yml

@@ -15,7 +15,7 @@ jobs:
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
       - uses: actions/cache@v4.3.0
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
@@ -41,6 +41,9 @@ jobs:
         env:
           CI: true
 
+      - name: 📃 Generate docs
+        run: yarn docs:generate
+
       - name: ❤️ Run lint
         run: yarn lint
 
@@ -50,15 +53,6 @@ jobs:
         env:
           NODE_OPTIONS: '--openssl-legacy-provider'
 
-      - name: 🦛 Run happo
-        run: yarn run happo-ci-github-actions
-        working-directory: './packages/visx-demo/'
-        env:
-          HAPPO_API_KEY: ${{ secrets.HAPPO_API_KEY }}
-          HAPPO_API_SECRET: ${{ secrets.HAPPO_API_SECRET }}
-          HAPPO_COMMAND: '../../node_modules/happo.io/build/cli.js'
-          NODE_OPTIONS: '--openssl-legacy-provider'
-
       # @TODO
       # this fails on forks, we need to update workflow event type to `pull_request_target`
       # but this needs security review

.github/workflows/push.yml

@@ -19,7 +19,7 @@ jobs:
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
       - uses: actions/cache@v4.3.0
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
@@ -89,12 +89,3 @@ jobs:
           git add .
           git commit -m "bot(${GITHUB_SHA}): build gh-pages"
           git push -f "https://$GITHUB_ACTOR:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY.git" HEAD:gh-pages
-
-      - name: 🦛 Run happo
-        # not running happo on push results in stale base shas in pull_request
-        run: yarn run happo-ci-github-actions
-        working-directory: './packages/visx-demo/'
-        env:
-          HAPPO_API_KEY: ${{ secrets.HAPPO_API_KEY }}
-          HAPPO_API_SECRET: ${{ secrets.HAPPO_API_SECRET }}
-          HAPPO_COMMAND: '../../node_modules/happo.io/build/cli.js'

.gitignore

@@ -8,7 +8,6 @@ logs/
 # Cache
 .bundle/
 .eslintcache/
-.happo/
 .idea/
 .next/
 .npm/
@@ -34,4 +33,7 @@ webpack.config.js
 
 # Lock files
 npm-shrinkwrap.json
-package-lock.json 
+package-lock.json
+
+# Generated files
+packages/visx-demo/src/generated/

.nvmrc

@@ -1 +1 @@
-16
+18

.prettierignore

@@ -1,4 +1,3 @@
-.happo/
 .next/
 coverage/
 node_modules/

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": [
@@ -41,10 +41,12 @@
     "dev:demo": "yarn workspace @visx/demo dev",
     "check:sizes": "yarn run ts ./scripts/compareBuildSizes.ts",
     "clean": "rm -rf ./packages/**/{lib,esm}",
+    "docs:generate": "yarn run ts ./scripts/generateDocs.ts",
     "format": "lerna exec --parallel -- prettier --write --ignore-path ../../.prettierignore .",
     "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",
@@ -54,7 +56,7 @@
     "vitest:ui": "vitest --ui",
     "ts": "ts-node --project ./tsconfig.node.json",
     "type": "yarn type:clean && yarn type:build",
-    "type:build": "lerna exec --parallel -- tsc --build",
+    "type:build": "lerna exec -- tsc --build",
     "type:clean": "find . -type f -name 'tsconfig.tsbuildinfo' -delete",
     "type:pkg": "lerna exec --scope $PKG -- tsc --build --verbose",
     "type:update-refs": "yarn run ts ./scripts/updateTsReferences.ts",
@@ -73,21 +75,24 @@
     "@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",
+    "@types/react": "18.3.26",
+    "@types/react-dom": "18.3.7",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
     "@vitest/coverage-v8": "2",
     "@vitest/ui": "2",
     "airbnb-js-shims": "^2.2.1",
     "babel-plugin-typescript-to-proptypes": "^2.0.0",
     "chalk": "4.1.0",
-    "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",
@@ -99,7 +104,8 @@
     "fs-jetpack": "^1.3.0",
     "happy-dom": "14",
     "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",
@@ -110,8 +116,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",
     "vitest": "2"
   },
   "packageManager": "yarn@1.22.19",
@@ -126,6 +132,13 @@
   "resolutions": {
     "handlebars": "4.5.3",
     "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "react-dom": "18.0.0",
+    "@types/react": "18.3.26",
+    "@types/react-dom": "18.3.7",
+    "wrap-ansi": "7.0.0",
+    "string-width": "4.2.3",
+    "strip-ansi": "6.0.1",
+    "ansi-regex": "5.0.1",
+    "emoji-regex": "8.0.0"
   }
 }

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

@@ -50,7 +50,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',