feat: Replace rollup with tsup/esbuild

[lachlancollins]

Motivation

• tsup v7.0.0 preserves "use client" because it updated to esbuild 0.18, so I thought it was worth trying out here.
• tsup v7.1.0 introduces separate CJS/ESM type declaration generation. The reasoning behind why this is important is explained here. This allows the package to pass ATTW!
• esbuild also has a really nice target feature which lets you specify node, ecmascript and browser versions you need to support. I've generated separate modern and legacy targets like the current rollup system.
• For this draft demonstration I've just converted query-core and react-query.

Advantages

• Simpler build config
• Super fast builds
• Generates correct CJS/ESM types
• Built-in targets without babel

Disadvantages

• Doesn't work with all packages (e.g. svelte)
• No "bug fixes" from babel

Additional Notes

• The svelte-based packages have kept @sveltejs/package (properly handles types of svelte components), and the solid-based packages have kept rollup-preset-solid (generates correct code for SSR)

[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)			Jul 19, 2023 10:30pm

[nx-cloud]

☁️ Nx Cloud Report

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

📂 See all runs for this branch

---

🟥 Failed Commands
nx affected --targets=test:eslint,test:lib,test:types,test:build

---

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 d7f14d8:

Sandbox	Source
@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-commenter]

Codecov Report

Patch coverage has no change and project coverage change: -0.01 ⚠️

Comparison is base (f0ab7f5) 88.75% compared to head (f2fb747) 88.74%.

❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

Additional details and impacted files

@@            Coverage Diff             @@
##            alpha    #5597      +/-   ##
==========================================
- Coverage   88.75%   88.74%   -0.01%     
==========================================
  Files          72       71       -1     
  Lines        2401     2399       -2     
  Branches      624      624              
==========================================
- Hits         2131     2129       -2     
  Misses        222      222              
  Partials       48       48              

see 2 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[lachlancollins]

@TkDodo I've re-approached this after finding out about https://arethetypeswrong.github.io/ - I've modified the query-core and react-query exports fields to pass all tests with tsup's improved dts generation. I've also set it up to generate a build/legacy folder (es2020-compatible) and a build/modern folder (private fields, etc). I'd appreciate it if you could have a look 😃

[ardeora]

The solid-js packages can be built with https://github.com/solidjs-community/tsup-preset-solid. WOuld you like help with that? I can create a PR to add it to the solid-js packages!

[lachlancollins]

The solid-js packages can be built with https://github.com/solidjs-community/tsup-preset-solid. WOuld you like help with that? I can create a PR to add it to the solid-js packages!

@ardeora I saw that package, but I was worried as it hadn't been updated in 5 months and therefore doesn't have the latest tsup changes. However I just noticed rollup-preset-solid hasn't been updated in 8 months and has fewer weekly downloads, so it's probably not as much of a problem as I thought! I'd definitely appreciate it if you want to look into switching it :)

[lachlancollins]

@ardeora one option would be to do this, however it doesn't make the build/solid folder which rollup generates (tsup-plugin-solid doesn't seem to make this either?):

// @ts-check

import { defineConfig } from 'tsup'
import { solidPlugin } from 'esbuild-plugin-solid'
import { legacyConfig, modernConfig } from '../../scripts/getTsupConfig.js'

export default defineConfig([
  modernConfig({
    entry: ['src/*.ts', 'src/*.tsx'],
    esbuildPlugins: [solidPlugin()],
  }),
  legacyConfig({
    entry: ['src/*.ts', 'src/*.tsx'],
    esbuildPlugins: [solidPlugin()],
  }),
])

[TkDodo]

@lachlancollins I think the test failures are flaky. We can merge this if you want :)

[ardeora]

@lachlancollins I have made a PR adding tsup to solid-query and query-devtools linked here

The solid-query package in general dont need a modern/legacy version since they ship with the source files. If the user wants to add compatibility for older browsers they can do so in userland while building the app. So the TSUP config is fairly straightforward. Let me kknow if you have any questions :D

[lachlancollins]

@lachlancollins I think the test failures are flaky. We can merge this if you want :)

Thanks, I was just waiting on your approval :)