internal: upgrade to TypeScript ^5.7.0 #1894

williaster · 2024-12-19T01:15:57Z

🏠 Internal

Working toward react@19 (#1883), this PR

Updates jest / related dependencies, basically pulling in changes from Upgrade jest #1892
- react@19 uses queueMicrotask which is not supported by our 5 year old version of jest
Updates TypeScript from 3.8 to 5.7 because upgrading jest dependencies couldn't compile
Updates eslint + @typescript-eslint/eslint-plugin so we can use @typescript-eslint/consistent-type-imports to auto fix import type { FooType } from './foo'; required in TypeScript@^5.4
Updates several other dependencies to fix misc type issues
- includes an update of @react-spring/web peer deps to ^9.7.5 which should fix TypeError: (0 , _web.useTransition) is not a function #1725
updates from node >= 16.13.0 to node >= 18.8.0
removes @visx/xychart's withRegisteredData HOC because the compiled types were so complex they became invalid (similar to [regression - 5.4] Generated .d.ts file contains invalid types microsoft/TypeScript#57843)

…ences.ts` (#1895)

…oo complex

williaster · 2024-12-20T02:41:22Z

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' }],


enabled auto-fixing import { FooType } from './foo' to import type { FooType } from './foo' which TS now cares about

Typescript should not require this afaik unless verbatimModuleSyntax is enabled 🤔

But it's a good practice anyway, so 👍

I think I was getting *.d.ts is not a module errors, but actually fixed that in tsconfig with "moduleResolution": "node16"

but agree this is best practice/we should do it anyway 👍

williaster · 2024-12-20T03:00:04Z

packages/visx-demo/package.json

@@ -6,7 +6,7 @@
  "scripts": {
    "build": "next build && next export",
    "deploy": "rm -rf out && yarn build && cd out && touch .nojekyll && git init && git add . && git commit -m \"Deploy commit\" && git remote add origin [email protected]:airbnb/visx.git && git push -f origin master:gh-pages",
-    "dev": "next",
+    "dev": "NODE_OPTIONS=--openssl-legacy-provider next",


may need to update next, minimally need to add this same option to the build. don't fully understand why there is an error without this, because our version of next should be using webpack 5 by default 🤔

I've tried to upgrade next to the latest version using npx @next/codemod upgrade back when I made #1889 in an attempt to verify all components with react 19, but when I tried react-docgen-typescript-loader did not work anymore (everything else did though), so I didn't continue working on it.

I can try again in the next few days based on this branch, maybe some other dependency upgrade made it work in the meantime, or maybe there is an easy replacement for that dependency...

darthmaim · 2024-12-20T10:15:33Z

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

+import type { OrientationType } from '../constants/orientation';
+import Orientation from '../constants/orientation';


FYI, instead of splitting those lines up you can also do this:

Suggested change

import type { OrientationType } from '../constants/orientation';

import Orientation from '../constants/orientation';

import Orientation, { type OrientationType } from '../constants/orientation';

had just used the eslint autofix here. this doesn't seem to be configurable https://typescript-eslint.io/rules/consistent-type-imports/. no strong opinion from me.

github-actions · 2024-12-20T20:04:53Z

Size Changes

Package	Diff	ESM	Prev ESM	CJS	Prev CJS
visx-bounds	+0.0%	2.6 KB	2.6 KB	3.06 KB	3.06 KB
visx-brush	+0.4%	54.39 KB	54.19 KB	58.56 KB	58.36 KB
visx-scale	+0.1%	18.45 KB	18.43 KB	29.22 KB	29.2 KB
visx-shape	+0.0%	79.87 KB	79.85 KB	100.19 KB	100.17 KB
visx-text	+0.3%	8.1 KB	8.08 KB	9.56 KB	9.54 KB
visx-xychart	+0.8%	170.73 KB	169.38 KB	220.63 KB	220.2 KB

Compared to master. File sizes are unminified and ungzipped.

View raw build stats

Previous (master)

{
  "visx-annotation": {
    "esm": 30333,
    "lib": 40419
  },
  "visx-axis": {
    "esm": 20709,
    "lib": 25153
  },
  "visx-bounds": {
    "esm": 2661,
    "lib": 3136
  },
  "visx-brush": {
    "esm": 55492,
    "lib": 59763
  },
  "visx-chord": {
    "esm": 3301,
    "lib": 4484
  },
  "visx-clip-path": {
    "esm": 3993,
    "lib": 5491
  },
  "visx-curve": {
    "esm": 323,
    "lib": 1462
  },
  "visx-delaunay": {
    "esm": 2422,
    "lib": 3231
  },
  "visx-demo": {
    "esm": 0,
    "lib": 36814
  },
  "visx-drag": {
    "esm": 12570,
    "lib": 14176
  },
  "visx-event": {
    "esm": 3815,
    "lib": 5091
  },
  "visx-geo": {
    "esm": 12930,
    "lib": 16196
  },
  "visx-glyph": {
    "esm": 13761,
    "lib": 18476
  },
  "visx-gradient": {
    "esm": 16078,
    "lib": 20593
  },
  "visx-grid": {
    "esm": 18097,
    "lib": 21710
  },
  "visx-group": {
    "esm": 1471,
    "lib": 2070
  },
  "visx-heatmap": {
    "esm": 7040,
    "lib": 8347
  },
  "visx-hierarchy": {
    "esm": 12093,
    "lib": 17820
  },
  "visx-legend": {
    "esm": 25546,
    "lib": 32474
  },
  "visx-marker": {
    "esm": 8204,
    "lib": 10332
  },
  "visx-mock-data": {
    "esm": 326036,
    "lib": 329336
  },
  "visx-network": {
    "esm": 4497,
    "lib": 6572
  },
  "visx-pattern": {
    "esm": 11689,
    "lib": 15673
  },
  "visx-point": {
    "esm": 1003,
    "lib": 1781
  },
  "visx-react-spring": {
    "esm": 13253,
    "lib": 16586
  },
  "visx-responsive": {
    "esm": 15936,
    "lib": 18296
  },
  "visx-sankey": {
    "esm": 3543,
    "lib": 4594
  },
  "visx-scale": {
    "esm": 18870,
    "lib": 29896
  },
  "visx-shape": {
    "esm": 81766,
    "lib": 102573
  },
  "visx-stats": {
    "esm": 13498,
    "lib": 15050
  },
  "visx-text": {
    "esm": 8276,
    "lib": 9773
  },
  "visx-threshold": {
    "esm": 2844,
    "lib": 3723
  },
  "visx-tooltip": {
    "esm": 14383,
    "lib": 19715
  },
  "visx-vendor": {
    "esm": 2492,
    "lib": 2702
  },
  "visx-visx": {
    "esm": 1524,
    "lib": 4155
  },
  "visx-voronoi": {
    "esm": 2137,
    "lib": 2824
  },
  "visx-wordcloud": {
    "esm": 2506,
    "lib": 3311
  },
  "visx-xychart": {
    "esm": 173440,
    "lib": 225481
  },
  "visx-zoom": {
    "esm": 16176,
    "lib": 18872
  }
}

Current

{
  "visx-annotation": {
    "esm": 30333,
    "lib": 40419
  },
  "visx-axis": {
    "esm": 20709,
    "lib": 25153
  },
  "visx-bounds": {
    "esm": 2662,
    "lib": 3136
  },
  "visx-brush": {
    "esm": 55698,
    "lib": 59969
  },
  "visx-chord": {
    "esm": 3301,
    "lib": 4484
  },
  "visx-clip-path": {
    "esm": 3993,
    "lib": 5491
  },
  "visx-curve": {
    "esm": 323,
    "lib": 1462
  },
  "visx-delaunay": {
    "esm": 2422,
    "lib": 3231
  },
  "visx-demo": {
    "esm": 0,
    "lib": 0
  },
  "visx-drag": {
    "esm": 12570,
    "lib": 14176
  },
  "visx-event": {
    "esm": 3815,
    "lib": 5091
  },
  "visx-geo": {
    "esm": 12930,
    "lib": 16196
  },
  "visx-glyph": {
    "esm": 13761,
    "lib": 18476
  },
  "visx-gradient": {
    "esm": 16078,
    "lib": 20593
  },
  "visx-grid": {
    "esm": 18097,
    "lib": 21710
  },
  "visx-group": {
    "esm": 1471,
    "lib": 2070
  },
  "visx-heatmap": {
    "esm": 7040,
    "lib": 8347
  },
  "visx-hierarchy": {
    "esm": 12093,
    "lib": 17820
  },
  "visx-legend": {
    "esm": 25546,
    "lib": 32474
  },
  "visx-marker": {
    "esm": 8204,
    "lib": 10332
  },
  "visx-mock-data": {
    "esm": 326036,
    "lib": 329336
  },
  "visx-network": {
    "esm": 4497,
    "lib": 6572
  },
  "visx-pattern": {
    "esm": 11689,
    "lib": 15673
  },
  "visx-point": {
    "esm": 1003,
    "lib": 1781
  },
  "visx-react-spring": {
    "esm": 13253,
    "lib": 16586
  },
  "visx-responsive": {
    "esm": 15936,
    "lib": 18296
  },
  "visx-sankey": {
    "esm": 3543,
    "lib": 4594
  },
  "visx-scale": {
    "esm": 18891,
    "lib": 29917
  },
  "visx-shape": {
    "esm": 81787,
    "lib": 102594
  },
  "visx-stats": {
    "esm": 13498,
    "lib": 15050
  },
  "visx-text": {
    "esm": 8297,
    "lib": 9794
  },
  "visx-threshold": {
    "esm": 2844,
    "lib": 3723
  },
  "visx-tooltip": {
    "esm": 14383,
    "lib": 19715
  },
  "visx-vendor": {
    "esm": 2492,
    "lib": 2702
  },
  "visx-visx": {
    "esm": 1524,
    "lib": 4155
  },
  "visx-voronoi": {
    "esm": 2137,
    "lib": 2824
  },
  "visx-wordcloud": {
    "esm": 2506,
    "lib": 3324
  },
  "visx-xychart": {
    "esm": 174826,
    "lib": 225920
  },
  "visx-zoom": {
    "esm": 16176,
    "lib": 18872
  }
}

williaster · 2024-12-21T22:09:29Z

everything is good except the typescript -> docs is broken. may not land this until after the holidays.

darthmaim · 2024-12-22T00:54:09Z

everything is good except the typescript -> docs is broken. may not land this until after the holidays.

I briefly tried to look into fixing the docs and wrote everything down in #1897.

williaster added 12 commits December 18, 2024 16:02

deps: typescript ^4.8.0

761d68c

deps: ts-node ^10.9.1

e7ec946

deps: jest

edd6b31

update jest.config.js

837ee87

geo: bump topo types

43ce203

wordcloud: bump d3-cloud + types

6ae05a1

remove @types/d3-cloud dep, copy local types

646898b

fix wordcloud types

b50f0e2

fix wordcloud types

c58e8c3

zoom: update use-gesture

bcc7a5a

shape: relax type

74f4bf5

add postinstall script

44462c6

williaster mentioned this pull request Dec 19, 2024

Upgrade jest #1892

Open

add d3-cloud declaration

e988ad3

williaster mentioned this pull request Dec 19, 2024

React 19 support #1883

Open

darthmaim mentioned this pull request Dec 19, 2024

Fix typescript error when accessing error in scripts/updateTsReferences.ts #1895

Merged

darthmaim and others added 11 commits December 19, 2024 11:48

Fix typescript error when accessing error in `scripts/updateTsRefer…

d006445

…ences.ts` (#1895)

react-spring: update to ^9.7.5

1a02cb5

react-spring: update to ^9.7.5

1beb5a3

xychart: fix types

40d0fb2

github: update workflows to node 18.8

9f34870

udpate project refs

78b3995

try ts 5.4

3dc76f4

bump @types/lodash throughout

628c464

upgrade eslint and @typescript-eslint

fb8bb3f

lint fix - mostly for import type changes

4abf7f7

xychart: fix a lot of types, remove withRegisteredData because it's t…

afac952

…oo complex

williaster changed the title ~~internal: upgrade to TypeScript ^4.8~~ internal: upgrade to TypeScript ^5.7.0 Dec 20, 2024

williaster added 🏠 internal 🤖 typescript labels Dec 20, 2024

williaster added patch-release alpha-release 🧪 testing labels Dec 20, 2024

williaster added 2 commits December 19, 2024 18:37

typescript 5.7

e86e658

demo: include only .ts,.tsx files in tsconfig.json

c8e2590

williaster commented Dec 20, 2024

View reviewed changes

fix jest config

3fb907b

williaster commented Dec 20, 2024

View reviewed changes

williaster added 5 commits December 19, 2024 19:10

jest: add TextEncoder, TextDecoder to shims

31e8b6f

fix tests

ece9d58

lint

e3f22aa

demo: fix build

b7a0edb

demo: fix build

fa2f173

darthmaim reviewed Dec 20, 2024

View reviewed changes

williaster added 2 commits December 20, 2024 10:45

demo: fix happo

b3fcad1

fix misc issues in scripts

0cb4bc8

williaster marked this pull request as ready for review December 20, 2024 19:09

williaster added 2 commits December 20, 2024 11:29

group: export type to fix TS module issue

548f65a

fix misc issues in scripts

f43a979

darthmaim mentioned this pull request Dec 22, 2024

Attempt to fix API docs in #1894 #1897

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

internal: upgrade to TypeScript ^5.7.0 #1894

internal: upgrade to TypeScript ^5.7.0 #1894

williaster commented Dec 19, 2024 •

edited

Loading

williaster Dec 20, 2024 •

edited

Loading

darthmaim Dec 20, 2024

williaster Dec 20, 2024

williaster Dec 20, 2024

darthmaim Dec 20, 2024 •

edited

Loading

darthmaim Dec 20, 2024

williaster Dec 20, 2024

github-actions bot commented Dec 20, 2024

Previous (master)

Current

williaster commented Dec 21, 2024

darthmaim commented Dec 22, 2024

		import type { OrientationType } from '../constants/orientation';
		import Orientation from '../constants/orientation';

	import type { OrientationType } from '../constants/orientation';
	import Orientation from '../constants/orientation';
	import Orientation, { type OrientationType } from '../constants/orientation';

internal: upgrade to TypeScript ^5.7.0 #1894

Are you sure you want to change the base?

internal: upgrade to TypeScript ^5.7.0 #1894

Conversation

williaster commented Dec 19, 2024 • edited Loading

🏠 Internal

williaster Dec 20, 2024 • edited Loading

Choose a reason for hiding this comment

darthmaim Dec 20, 2024

Choose a reason for hiding this comment

williaster Dec 20, 2024

Choose a reason for hiding this comment

williaster Dec 20, 2024

Choose a reason for hiding this comment

darthmaim Dec 20, 2024 • edited Loading

Choose a reason for hiding this comment

darthmaim Dec 20, 2024

Choose a reason for hiding this comment

williaster Dec 20, 2024

Choose a reason for hiding this comment

github-actions bot commented Dec 20, 2024

Size Changes

Previous (master)

Current

williaster commented Dec 21, 2024

darthmaim commented Dec 22, 2024

williaster commented Dec 19, 2024 •

edited

Loading

williaster Dec 20, 2024 •

edited

Loading

darthmaim Dec 20, 2024 •

edited

Loading