ci: Add TS version tests

[lachlancollins]

Uses the strategy implemented in TanStack Form and Store to take full advantage of Nx.

This strategy can be tested and debugged locally rather than needing to run in CI (e.g. the matrix approach). It also all runs in a single GitHub Action job, making it easier to work out which task has failed (all logs are in the Nx cloud report).

Currently tests TS 5.0 to 5.3. Adding pre-5.0 tests is a bit more involved, but TanStack Form and Store have a workaround which I'll implement in a subsequent PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)	Visit Preview		Jun 22, 2024 10:30pm

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 271b181. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx affected --targets=test:format,test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build,test:attw --parallel=3

---

Sent with 💌 from NxCloud.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 271b181:

Sandbox	Source
@tanstack/query-example-angular-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 43.88%. Comparing base (32bce35) to head (271b181).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7605   +/-   ##
=======================================
  Coverage   43.88%   43.88%           
=======================================
  Files         184      184           
  Lines        7029     7029           
  Branches     1539     1535    -4     
=======================================
  Hits         3085     3085           
  Misses       3578     3578           
  Partials      366      366           

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	∅ <ø> (∅)
@tanstack/angular-query-experimental	86.58% <ø> (ø)
@tanstack/eslint-plugin-query	85.46% <ø> (ø)
@tanstack/query-async-storage-persister	43.85% <ø> (ø)
@tanstack/query-broadcast-client-experimental	∅ <ø> (∅)
@tanstack/query-codemods	0.00% <ø> (ø)
@tanstack/query-core	92.79% <ø> (ø)
@tanstack/query-devtools	5.24% <ø> (ø)
@tanstack/query-persist-client-core	57.73% <ø> (ø)
@tanstack/query-sync-storage-persister	82.50% <ø> (ø)
@tanstack/react-query	92.72% <ø> (ø)
@tanstack/react-query-devtools	10.71% <ø> (ø)
@tanstack/react-query-next-experimental	∅ <ø> (∅)
@tanstack/react-query-persist-client	100.00% <ø> (ø)
@tanstack/solid-query	78.06% <ø> (ø)
@tanstack/solid-query-devtools	∅ <ø> (∅)
@tanstack/solid-query-persist-client	100.00% <ø> (ø)
@tanstack/svelte-query	68.66% <ø> (ø)
@tanstack/svelte-query-devtools	∅ <ø> (∅)
@tanstack/svelte-query-persist-client	100.00% <ø> (ø)
@tanstack/vue-query	70.60% <ø> (ø)
@tanstack/vue-query-devtools	∅ <ø> (∅)

[TkDodo]

I think a better way would be to just have CI install a different version of typescript, like we do in router:

https://github.com/TanStack/router/blob/main/.github/workflows/pr.yml#L77-L80

then we add the TS_VERSION as input to nx to avoid cache hits: https://github.com/TanStack/router/blob/cb6c21150f9637cef5d48596a489ffd2e5366303/nx.json#L41

also: what's all the file moves about 😅 ?

[lachlancollins]

I think a better way would be to just have CI install a different version of typescript, like we do in router:

TanStack/router@main/.github/workflows/pr.yml#L77-L80

then we add the TS_VERSION as input to nx to avoid cache hits: TanStack/router@cb6c211/nx.json#L41

also: what's all the file moves about 😅 ?

Yeah I've seen that option too, I prefer how its been implemented for TanStack Form as it can be tested and debugged locally rather than needing to run in CI. It also all runs in a single GitHub Action job, making it easier to work out which task has failed (everything is in the Nx cloud report).

As for the file moves, it makes it easier to target different files for different tsconfigs. The "main" TS version can check all files (src, tests, vite config, etc.), while the "legacy" TS versions only need to check src, which speeds up testing. The same thing can be achieved with slightly more annoying "include" and "exclude" config (actually now realising this would be less of a headache).

EDIT: I'll tidy this up tomorrow!

[arnoud-dv]

Looks good, I like that this strategy allows us to check different versions of TS per package. For example the lowest version of Angular supported by angular-query is v16, which requires TS 4.9 or higher. So unlike react-query we wouldn't need to check either 4.7 or 4.8.